/* moonrgba — the instrument.
 *
 * A colour bench, not a poster. The surface is one warm grey with a light from
 * the top left; depth is a pair of shadows so tight that they read as a moulded
 * edge rather than as a glow, and it is spent only on the four things you could
 * pick up: the board, the dial, the card, the buttons. Everything else is a
 * hairline.
 *
 * Radii stay between two and twelve pixels. Nothing here is rounder than the
 * rule that made it, because a large radius is a gesture and this page is a
 * measuring instrument.
 *
 * The one saturated thing is the colour under inspection: it arrives as
 * `--swatch` and tints the focus ring, the marks and the small headings. The
 * page has no colour of its own.
 */

:root {
  color-scheme: light;

  /* The surface: bone, with room above it for the highlight to sit in. */
  --desk: #d6d1c6;
  --bone: #e9e5dc;
  --bone-2: #e2ddd3;
  --hi: #fdfcf8;
  --lo: #a79e8d;

  --ink: #2a2722;
  --ink-2: #5f5a51;
  --ink-3: #8b857a;
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 7%, transparent);

  /* Small on purpose. A 30px radius on a 12px control is a cartoon. */
  --r-xs: 3px;
  --r-s: 4px;
  --r-m: 6px;
  --r-l: 8px;
  --r-xl: 12px;

  /* Two shadows, low contrast, short throw. The light is at 315°: highlight up
     and left, shadow down and right, one pixel of each at the smallest size. */
  --out-sm: -1px -1px 1px color-mix(in srgb, var(--hi) 92%, transparent),
    1px 1px 2px color-mix(in srgb, var(--lo) 52%, transparent);
  --out: -2px -2px 4px color-mix(in srgb, var(--hi) 88%, transparent),
    2px 3px 7px -2px color-mix(in srgb, var(--lo) 62%, transparent);
  --out-lg: -3px -3px 8px color-mix(in srgb, var(--hi) 80%, transparent),
    5px 6px 16px -8px color-mix(in srgb, var(--lo) 78%, transparent);
  --in-sm: inset 1px 1px 1px color-mix(in srgb, var(--lo) 40%, transparent),
    inset -1px -1px 1px color-mix(in srgb, var(--hi) 85%, transparent);
  --in: inset 2px 2px 4px -1px color-mix(in srgb, var(--lo) 46%, transparent),
    inset -2px -2px 4px -1px color-mix(in srgb, var(--hi) 85%, transparent);

  --sans: "Instrument Sans", system-ui, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --swatch: #2e73b8;
  --swatch-ink: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --desk: #191b1d;
    --bone: #232629;
    --bone-2: #1e2124;
    --hi: color-mix(in srgb, #fff 10%, transparent);
    --lo: #07080a;
    --ink: #e8e4da;
    --ink-2: #a9a49a;
    --ink-3: #7a756b;
    --line: color-mix(in srgb, var(--ink) 15%, transparent);
    --line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
    --out-sm: -1px -1px 1px color-mix(in srgb, var(--hi) 70%, transparent),
      1px 1px 2px color-mix(in srgb, var(--lo) 70%, transparent);
    --out: -2px -2px 4px color-mix(in srgb, var(--hi) 55%, transparent),
      2px 3px 7px -2px color-mix(in srgb, var(--lo) 80%, transparent);
    --out-lg: -3px -3px 8px color-mix(in srgb, var(--hi) 42%, transparent),
      5px 6px 16px -8px color-mix(in srgb, var(--lo) 90%, transparent);
    --in-sm: inset 1px 1px 1px color-mix(in srgb, var(--lo) 75%, transparent),
      inset -1px -1px 1px color-mix(in srgb, var(--hi) 45%, transparent);
    --in: inset 2px 2px 4px -1px color-mix(in srgb, var(--lo) 80%, transparent),
      inset -2px -2px 4px -1px color-mix(in srgb, var(--hi) 40%, transparent);
  }
}

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

html {
  /* Code is read to be typed: no ligatures, here or in any control. */
  font-variant-ligatures: no-contextual;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
button,
input,
textarea,
select {
  font-variant-ligatures: no-contextual;
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A matte finish, a few percent of noise, so the shadows sit on a surface
   rather than on a flat fill. Any more than this reads as a texture. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

a:hover {
  text-decoration-color: currentColor;
}

::selection {
  background: color-mix(in srgb, var(--swatch) 26%, transparent);
}

:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--swatch) 65%, var(--ink));
  outline-offset: 2px;
  border-radius: 2px;
}

/* Chrome ignores ::-webkit-scrollbar once scrollbar-color is set, so the
   standard properties go behind a guard that only the others match. */
@supports not selector(::-webkit-scrollbar) {
  .scroll,
  .spellings,
  pre {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent;
  }
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent; }
  html:not(.scrolled) { scrollbar-color: transparent transparent; }
}

/* The page's own bar, in the panels' hand; at the top of the page it keeps its
   place but shows no thumb. */
@supports selector(::-webkit-scrollbar) {
  html::-webkit-scrollbar { width: 10px; height: 10px; }
  html::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb {
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: color-mix(in srgb, var(--ink) 24%, transparent);
  }
  html::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 38%, transparent); }
  html:not(.scrolled)::-webkit-scrollbar-thumb { background-color: transparent; }
}

@supports selector(::-webkit-scrollbar) {
  .scroll::-webkit-scrollbar,
  .spellings::-webkit-scrollbar,
  pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scroll::-webkit-scrollbar-track,
  .spellings::-webkit-scrollbar-track,
  pre::-webkit-scrollbar-track {
    background: transparent;
  }
  .scroll::-webkit-scrollbar-thumb,
  .spellings::-webkit-scrollbar-thumb,
  pre::-webkit-scrollbar-thumb {
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
    background-color: color-mix(in srgb, var(--ink) 22%, transparent);
  }
  .scroll::-webkit-scrollbar-thumb:hover,
  .spellings::-webkit-scrollbar-thumb:hover,
  pre::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--ink) 36%, transparent);
  }
}

.wrap {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
}

/* ——— header ——————————————————————————————————————————————— */

.site {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.15rem 0 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
}

.brand b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

.brand small {
  color: var(--ink-3);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.top {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.top a {
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.32rem 0.6rem;
  border-radius: var(--r-s);
  border: 1px solid transparent;
}

.top a:hover {
  color: var(--ink);
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--hi) 40%, transparent);
}

.top a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--line);
}

/* The icon button keeps its own padding, so the glyph is never squeezed. */
.top .gh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 0.35rem;
  border-color: var(--line-soft);
}

.top .gh svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ——— the board ———————————————————————————————————————————— */

.board {
  position: relative;
  margin-block: 1.6rem 2.4rem;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--bone);
  box-shadow: var(--out-lg);
}

/* The hairline that makes the panel read as moulded rather than pasted, and the
   inner cut that keeps the edge from looking like a drop shadow on a div. */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--hi) 55%, transparent);
}

.board::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--r-xl) - 3px);
  pointer-events: none;
  border: 1px solid var(--line-soft);
}

.eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.7rem, 3.1vw, 2.45rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 72;
  color: color-mix(in srgb, var(--swatch) 62%, var(--ink));
}

.board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.2rem, 3.4vw, 3rem);
  align-items: end;
  padding-bottom: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--line-soft);
}

.lede {
  margin: 0 0 0.1rem;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.lede b {
  color: var(--ink);
  font-weight: 500;
}

.bench {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  margin-top: clamp(1.2rem, 2.6vw, 1.9rem);
}

/* ——— the dial ————————————————————————————————————————————— */

/* A bezel with an engraved scale, a ring of hue that turns inside it, and a
   fixed read head. Nothing is filled in: the ring is hollow, so the selection is
   an angle rather than an area. */
.dial {
  position: relative;
  width: min(100%, 310px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  box-shadow: var(--out);
  touch-action: none;
  cursor: grab;
}

.dial:active {
  cursor: grabbing;
}

.dial:focus-visible {
  outline-offset: 5px;
  border-radius: 50%;
}

.dial .well {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: var(--in-sm);
  overflow: hidden;
  isolation: isolate;
}

/* The two rules that frame the band: the colour is inlaid between them, which
   is what stops a rainbow from reading as a sticker. */
.dial .well::before,
.dial .well::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.dial .well::before {
  inset: 4.4%;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}

.dial .well::after {
  inset: 10.4%;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

/* The hue ring: a conic sweep masked to an annulus, so what turns is a band of
   colour and not a disc. Its stops are set from the library, at the current
   saturation and lightness, by home.js. */
.wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  mask: radial-gradient(closest-side, transparent 0 79%, #000 79.4% 91%, transparent 91.4%);
  will-change: transform;
}

/* The scale, engraved into the bezel: twelve long marks and twenty-four short. */
.rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-conic-gradient(
      from 0deg,
      color-mix(in srgb, var(--ink) 42%, transparent) 0deg 0.9deg,
      transparent 0.9deg 90deg
    ),
    repeating-conic-gradient(
      from 0deg,
      color-mix(in srgb, var(--ink) 20%, transparent) 0deg 0.4deg,
      transparent 0.4deg 15deg
    );
  mask: radial-gradient(closest-side, transparent 0 92.4%, #000 92.8% 99.2%, transparent 99.4%);
}

/* The read head: a hairline from the bezel to the ring, at twelve o'clock. */
.head {
  position: absolute;
  left: 50%;
  top: 1.6%;
  height: 17.4%;
  width: 1px;
  translate: -0.5px 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 38%, transparent),
    color-mix(in srgb, var(--ink) 62%, transparent)
  );
  pointer-events: none;
  z-index: 4;
}

/* The index at the bezel end: a small triangle, pointing in. */
.head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  translate: -50% 0;
  border-inline: 4px solid transparent;
  border-top: 7px solid color-mix(in srgb, var(--ink) 48%, transparent);
}

/* The hub: a plate, not a colour. The colour is a small chip on it, and the two
   numbers are the reading. */
.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
  box-shadow: var(--out), inset 0 1px 0 color-mix(in srgb, var(--hi) 70%, transparent);
  pointer-events: none;
}

.hub .chip {
  width: 19px;
  height: 19px;
  border-radius: var(--r-xs);
  background: var(--swatch);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

.hub .deg {
  font-family: var(--mono);
  font-size: clamp(0.9rem, 1.9vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.hub .code {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ——— the card ————————————————————————————————————————————— */

/* One plate, divided by hairlines: no stacking of little shadowed boxes, which
   is what makes a control panel look like a pile of stickers. */
.card {
  border-radius: var(--r-l);
  padding: 0.9rem 1rem 1rem;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  box-shadow: var(--out);
}

.field {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 0.6rem 0.34rem 0.7rem;
  border-radius: var(--r-s);
  background: var(--bone-2);
  box-shadow: var(--in-sm);
  transition: box-shadow 120ms ease;
}

.field:has(input:focus-visible) {
  box-shadow: var(--in-sm), 0 0 0 1px color-mix(in srgb, var(--swatch) 55%, transparent);
}

.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.1rem 0;
}

.field input:focus {
  outline: none;
}

.field input::placeholder {
  color: var(--ink-3);
}

.field .tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.swatch {
  position: relative;
  margin-top: 0.7rem;
  height: clamp(88px, 9.5vw, 108px);
  border-radius: var(--r-m);
  background: var(--swatch);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
  display: flex;
  align-items: flex-end;
  padding: 0.6rem 0.7rem;
}

.swatch .label,
.swatch .note {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #fffdf8;
  padding: 0.14rem 0.36rem;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, #000 42%, transparent);
}

.swatch .note {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
}

[hidden] {
  display: none !important;
}

.value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
}

.value code {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.value button {
  flex: none;
  border: 1px solid var(--line-soft);
  font: inherit;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bone);
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-xs);
  box-shadow: var(--out-sm);
  cursor: pointer;
}

.value button:active {
  box-shadow: var(--in-sm);
}

.value button[data-done="1"] {
  color: color-mix(in srgb, var(--swatch) 55%, var(--ink));
}

/* Contrast: two columns divided by a hairline, each a number and its measure. */
.pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 0.55rem;
}

.pair {
  padding: 0.1rem 0.8rem 0.1rem 0;
  display: grid;
  gap: 0.05rem;
}

.pair + .pair {
  padding-left: 0.8rem;
  border-left: 1px solid var(--line-soft);
}

.pair .k {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pair .v {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--ink);
}

.pair .v b {
  font-weight: 500;
}

.pair .v span {
  color: var(--ink-3);
  font-size: 0.7rem;
}

.pair .s {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.terminal {
  margin-top: 0.55rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
}

.terminal b {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.12rem 0.4rem 0.12rem 0.16rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-soft);
  background: var(--bone);
}

.chip i {
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: var(--slot, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent);
}

/* ——— sliders —————————————————————————————————————————————— */

.sliders {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.slider {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: 0.55rem;
}

.slider label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.slider output {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  appearance: none;
  width: 100%;
  height: 16px;
  background: none;
  margin: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--bone-2);
  box-shadow: var(--in-sm);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--bone-2);
  box-shadow: var(--in-sm);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent), var(--out-sm);
}

input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 50%;
  background: var(--bone);
  box-shadow: var(--out-sm);
}

/* ——— sections below the board ————————————————————————————— */

section {
  margin-block: clamp(2rem, 3.6vw, 3.2rem);
}

.sec-head {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.2rem 1.1rem;
  align-items: start;
  margin-bottom: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.sec-head .index {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding-top: 0.3rem;
}

h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: -0.015em;
}

.sec-head p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.85rem;
  max-width: 62ch;
  text-wrap: pretty;
}

/* The ledger: flat rows with hairline rules, deliberately not cards. */
.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.4rem;
}

.ledger .col > div {
  border-top: 1px solid var(--line);
}

.ledger .col > .eyebrow {
  margin-bottom: 0.15rem;
}

.row {
  display: grid;
  grid-template-columns: 8.2rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.4rem 0.1rem;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

#spellings .row {
  grid-template-columns: 9.6rem minmax(0, 1fr);
}

.row .name {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.row .data {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.row:hover .name {
  color: var(--ink-2);
}

/* Shapes: a strip of the syntaxes the library reads. */
.shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.shape {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-2);
  padding: 0.22rem 0.45rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}

.shape[data-live="1"] {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--swatch) 40%, var(--line));
}

/* Features: hairline cells on a shared grid, not six stickers. */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line-soft);
}

.feature {
  padding: 0.95rem 1rem 1.05rem;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.feature svg {
  width: 15px;
  height: 15px;
  display: block;
  margin-bottom: 0.55rem;
  color: color-mix(in srgb, var(--swatch) 45%, var(--ink-2));
}

.feature h3 {
  margin: 0 0 0.25rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: -0.003em;
}

.feature p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Code, with the numbers the library actually prints. */
.sample {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

pre {
  margin: 0;
  overflow-x: auto;
  padding: 0.85rem 0.95rem;
  border-radius: var(--r-m);
  background: var(--bone-2);
  box-shadow: var(--in-sm);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.72;
  white-space: pre;
  color: var(--ink);
  tab-size: 2;
}

pre .c {
  color: var(--ink-3);
}

pre .k {
  color: color-mix(in srgb, var(--swatch) 48%, var(--ink));
}

.notes {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.notes p {
  margin: 0;
  padding-left: 0.8rem;
  border-left: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.84rem;
}

.notes b {
  color: var(--ink);
  font-weight: 500;
}

/* Key numbers: timeless ones only, on a rule rather than on a plate. */
.numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(760px, 100%);
  margin: 2rem auto 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.numbers div {
  padding: 0.7rem 0 0.75rem;
  text-align: center;
}

.numbers div + div {
  border-left: 1px solid var(--line-soft);
}

.numbers b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.numbers span {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.6rem 0 2.6rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.74rem;
}

footer a {
  color: var(--ink-2);
}

.warn {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid color-mix(in srgb, #c2410c 70%, var(--ink));
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: color-mix(in srgb, var(--bone-2) 80%, transparent);
  color: var(--ink-2);
  font-size: 0.8rem;
}

/* ——— inner pages: the guide and the reference ——————————————————————— */

.doc-head {
  padding: clamp(1.2rem, 2.4vw, 1.9rem) 0 clamp(0.9rem, 1.6vw, 1.2rem);
  border-bottom: 1px solid var(--line);
}

.doc-head h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
}

.doc-head .lede {
  margin: 0;
  max-width: 64ch;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.doc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: clamp(1.4rem, 3.4vw, 3rem);
  align-items: start;
  padding-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

.prose {
  min-width: 0;
  max-width: 72ch;
}

.prose p {
  margin: 0 0 0.8rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  text-wrap: pretty;
}

.prose p b,
.prose p strong {
  color: var(--ink);
  font-weight: 500;
}

.prose h3 {
  margin: 1.6rem 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
}

.prose a {
  color: color-mix(in srgb, var(--swatch) 55%, var(--ink));
}

.prose ul,
.prose ol {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.prose li {
  margin-bottom: 0.25rem;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
}

.prose code,
.lede code,
.sec-head p code,
.notes p code,
.note code,
.entry p code,
.itinerary code {
  padding: 0.05em 0.3em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bone-2) 92%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--ink);
  font-size: 0.86em;
}

/* A chapter: a number and a heading on one baseline, then prose. */
.chapter {
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  scroll-margin-top: 1rem;
}

.chapter:first-of-type {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.chapter-head {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.7rem;
}

.chapter-head .n {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.chapter h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
}

/* A listing: the code in one pane and what it printed in the other. Two panes
   rather than trailing comments, so that nothing has to line up. */
.listing {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  margin: 0.9rem 0 1rem;
  border-radius: var(--r-m);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--bone-2);
  box-shadow: var(--in-sm);
}

.listing .pane {
  min-width: 0;
  padding: 0.55rem 0 0.5rem;
}

.listing .pane + .pane {
  border-left: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--hi) 18%, var(--bone));
}

.listing .pane-label {
  margin: 0 0 0.45rem;
  padding: 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.listing pre {
  padding: 0 0.9rem;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0.72rem;
  line-height: 1.72;
}

.listing .out pre {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* The itinerary: a ruled list, not a card. */
.itinerary {
  position: sticky;
  top: 1rem;
  padding-top: 0.2rem;
  font-size: 0.78rem;
}

.itinerary .label {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.itinerary ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.itinerary a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.24rem 0.2rem 0.24rem 0;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.4;
}

.itinerary a::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-3);
  padding-top: 0.16rem;
}

.itinerary a:hover,
.itinerary a[aria-current="true"] {
  color: var(--ink);
}

.itinerary a[aria-current="true"]::before {
  color: color-mix(in srgb, var(--swatch) 60%, var(--ink-3));
}

.itinerary .sub {
  display: grid;
  margin: 0.9rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.itinerary .sub a {
  grid-template-columns: minmax(0, 1fr);
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.itinerary .sub a::before {
  content: none;
}

/* Callouts. The coloured bar on the left is straight: no radius on that side. */
.note {
  margin: 1rem 0;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid color-mix(in srgb, var(--swatch) 55%, var(--ink));
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: color-mix(in srgb, var(--bone-2) 70%, transparent);
  font-size: 0.84rem;
  color: var(--ink-2);
}

.note b {
  color: var(--ink);
  font-weight: 500;
}

/* ——— the reference ————————————————————————————————————————————— */

.reference .band {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  scroll-margin-top: 1rem;
}

.reference .band:first-of-type {
  margin-top: 0;
}

.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  margin-bottom: 0.35rem;
}

.reference .band:first-of-type .band-head {
  border-top: 0;
  padding-top: 0;
}

.band-head h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
}

.band-head .count {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.entry {
  padding: 0.85rem 0 0.95rem;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 1rem;
}

.entry h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.entry h3 .kind {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.1rem 0.32rem;
  border-radius: 2px;
  border: 1px solid var(--line-soft);
}

.entry .sig {
  margin: 0 0 0.55rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--r-xs);
  background: var(--bone-2);
  box-shadow: var(--in-sm);
  font-family: var(--mono);
  font-size: 0.71rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
}

.entry p {
  margin: 0 0 0.5rem;
  color: var(--ink-2);
  font-size: 0.86rem;
  max-width: 70ch;
}

.entry p:last-child {
  margin-bottom: 0;
}

.entry .member {
  margin-top: 0.65rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--line);
}

.entry .member h4 {
  margin: 0 0 0.25rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink);
}

.entry .member p {
  font-size: 0.82rem;
}

.variants {
  margin: 0.15rem 0 0.55rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0 1.2rem;
}

.variants li {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0.28rem 0;
  border-top: 1px solid var(--line-soft);
}

.variants li small {
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: 0.08rem;
}

/* The jump list at the head of a band: every name in it, so that a reader who
   knows what they are looking for does not have to scroll to find it. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.15rem;
  margin: 0.1rem 0 0.4rem;
}

.jump a {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.1rem 0.32rem;
  border-radius: 2px;
}

.jump a:hover {
  color: var(--ink);
  background: var(--bone-2);
}

/* A pipe table in a doc comment. It scrolls on its own rather than pushing the
   column, and it wears hairlines like the rest of the data on the site. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0.25rem 0 0.8rem;
}

.doc-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 100%;
}

.doc-table th,
.doc-table td {
  text-align: left;
  padding: 0.26rem 0.8rem 0.26rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  white-space: nowrap;
}

.doc-table th {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--line);
}

.doc-table td {
  color: var(--ink-2);
}

.doc-table td code {
  color: var(--ink);
}

.doc-table tr:last-child td {
  border-bottom: 0;
}

/* ——— narrow ——————————————————————————————————————————————— */

@media (width <= 980px) {
  .sample,
  .board-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .numbers div:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }
  .numbers div:nth-child(3) {
    border-left: 0;
  }
}

@media (width <= 940px) {
  .doc-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .itinerary {
    position: static;
    order: -1;
  }
  .itinerary ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    column-gap: 1.2rem;
  }
}

@media (width <= 860px) {
  .bench {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
  .dial {
    width: min(100%, 290px);
  }
  .ledger {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ledger .col + .col {
    margin-top: 1.2rem;
  }
  .site {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .top {
    gap: 0;
  }
  .top a {
    padding: 0.28rem 0.45rem;
    font-size: 0.76rem;
  }
}

@media (width <= 620px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
  }
  .sec-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .sec-head .index {
    grid-row: auto;
  }
  .sec-head p {
    grid-column: 1;
  }
  .listing {
    grid-template-columns: minmax(0, 1fr);
  }
  .listing .pane + .pane {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}

@media (width <= 560px) {
  .wrap {
    width: min(1120px, 100% - 1.6rem);
  }
  body {
    font-size: 14px;
  }
  .row {
    grid-template-columns: 6.4rem minmax(0, 1fr);
    gap: 0.5rem;
  }
  .pairs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
  .pair + .pair {
    padding-left: 0;
    border-left: 0;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* The maker's mark in the board's corner: a hairline meander, cut into the
   surface. It is the only ornament on the page, so it has to be quiet — one
   pixel, one ink, and no second copy anywhere. */
.maker {
  position: absolute;
  right: clamp(1.2rem, 2.4vw, 2rem);
  top: clamp(1.25rem, 2.4vw, 2rem);
  color: color-mix(in srgb, var(--ink) 24%, transparent);
  pointer-events: none;
}

/* ——— the gamut page ——————————————————————————————————————— */

.bench-gamut {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: start;
  gap: clamp(1.1rem, 2.4vw, 2rem);
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}

/* The plot is mounted, not printed on the page: a plate with a recessed well
   inside it, the same two moves as the dial. */
.plot {
  margin: 0;
  padding: 9px;
  border-radius: var(--r-l);
  border: 1px solid var(--line-soft);
  background: var(--bone);
  box-shadow: var(--out);
}

.plot-frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--bone-2);
  box-shadow: var(--in-sm);
}

.plot-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#marks {
  cursor: crosshair;
  touch-action: none;
}

.plot figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  padding: 0.55rem 0.15rem 0.05rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.plot figcaption span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lg {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: none;
}

.lg-ring {
  border-radius: 50%;
  border: 1.25px solid color-mix(in srgb, var(--ink) 70%, transparent);
}

.lg-square {
  width: 8px;
  height: 8px;
  border: 1.25px solid color-mix(in srgb, var(--ink) 70%, transparent);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.lg-line {
  width: 12px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}

.panel {
  border-radius: var(--r-l);
  padding: 0.9rem 1rem 1rem;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  box-shadow: var(--out);
}

/* Six numbers in a 2 × 3 grid, divided by hairlines rather than boxed. */
.read {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.75rem 0 0.2rem;
  border-top: 1px solid var(--line-soft);
}

.read > div {
  display: grid;
  gap: 0.05rem;
  padding: 0.42rem 0.7rem 0.42rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.read > div:nth-child(even) {
  padding-left: 0.7rem;
  border-left: 1px solid var(--line-soft);
}

.read dt {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.read dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.read dd[data-out="1"] {
  color: color-mix(in srgb, #b45309 62%, var(--ink));
}

.read dd[data-out="0"] {
  color: var(--ink-2);
}

.curve {
  margin-top: 0.8rem;
  padding: 0.55rem 0.6rem 0.5rem;
  border-radius: var(--r-m);
  background: var(--bone-2);
  box-shadow: var(--in-sm);
}

.curve .pane-label {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

#delta {
  display: block;
  width: 100%;
  height: 74px;
}

.curve-note {
  margin: 0.35rem 0 0;
  color: var(--ink-3);
  font-size: 0.72rem;
  line-height: 1.45;
}

.mapped {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-soft);
}

.mapped-swatch {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--bone-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

.mapped-text {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.mapped-text b {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
}

.mapped-text span {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* The four steps, as a numbered list with hairline rules. */
.how {
  max-width: 78ch;
}

.steps {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.65rem 0 0.65rem 2.4rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-size: 0.88rem;
  max-width: 72ch;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.72rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--ink-3);
}

.steps b {
  color: var(--ink);
  font-weight: 500;
}

@media (width <= 900px) {
  .bench-gamut {
    grid-template-columns: minmax(0, 1fr);
  }
  .plot {
    max-width: 460px;
    margin-inline: auto;
  }
}

/* A header cell names a column; it is not a value, so it does not wear the code
   chip's box. */
.doc-table th code {
  background: none;
  box-shadow: none;
  padding: 0;
  color: var(--ink-3);
}