*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

ul,
ol {
  list-style: none;
}

a {
  color: currentColor;
}

:root {
  --font-family: "Inter Tight", sans-serif;

  --font-weight-normal: 400;
  --font-weight-bold: 700;

  --font-size-body: 1rem;
  --font-size-heading: 2.074rem;
  --font-size-vis: 0.833rem;

  --line-height-body: 1.5;
  --line-height-heading: 1.1;
  --line-height-vis: 1.5;

  --color-bin-1: #fcde9c;
  --color-bin-2: #eeb495;
  --color-bin-3: #de8a8c;
  --color-bin-4: #cc5e84;
  --color-bin-5: #b9257a;
  --color-highlight: #7c1d6f;
  --color-bg: #fff;
  --color-text-primary: #212529;
  --color-text-secondary: #868e96;
  --color-tick: #dee2e6;

  --container-max: 50rem;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

h1 {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.vis {
  font-size: var(--font-size-vis);
  line-height: var(--line-height-vis);
  font-variant-numeric: tabular-nums;
}

footer {
  color: var(--color-text-secondary);
}

main {
  width: min(100% - 2rem, var(--container-max));
  margin: 2rem auto;
}

article > * + * {
  margin-block-start: 1rem;
}

.legend {
  display: grid;
  gap: 0.5em;
  grid-template:
    "low high" auto
    "swatches swatches" auto / auto auto;
  justify-content: space-between;
}

@media screen and (min-width: 35rem) {
  .legend {
    grid-template: "low swatches high" auto / auto auto auto;
    justify-content: flex-start;
  }
}

.legend__low-label {
  grid-area: low;
}

.legend__high-label {
  grid-area: high;
}

.legend__swatches {
  justify-self: center;
  grid-area: swatches;
  display: flex;
}

.legend__swatch {
  width: 3rem;
  height: 1.5rem;
}

.form-field {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}

input[type="search"] {
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--color-tick);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  color: var(--color-highlight);
}

input[type="search"]:focus {
  outline-color: var(--color-text-primary);
}

.vis svg {
  overflow: visible;
}

.row__label {
  fill: currentColor;
  font-weight: var(--font-weight-bold);
}

.row__line {
  stroke: var(--color-tick);
}

.highlight__path {
  fill: none;
  stroke: var(--color-highlight);
  stroke-width: 2px;
}

.highlight__dot {
  stroke: var(--color-highlight);
  stroke-width: 2px;
}

.highlight__value {
  stroke: var(--color-bg);
  stroke-width: 4px;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: var(--color-highlight);
  paint-order: stroke;
  font-weight: var(--font-weight-bold);
}