/* Paleta · Swiss editorial. Interface colours are the five greys below and nothing else;
   real colour appears only inside lesson canvases (circles, wheel, strips, jeepney, chips). */

/* Atkinson draws 0 with a slash, so every 0 comes from Lexend instead.
   "Paleta Zero" is scaled to Atkinson's digit height for running text.
   "Paleta Zero Tab" is scaled to the width of Atkinson's tabular digits (0.639em regular, 0.632em bold),
   for numbers that change while a control moves. */
@font-face { font-family: "Paleta Zero"; src: url(https://fonts.gstatic.com/s/lexend/v26/wlpwgwvFAVdoq2_v-6QU.woff2) format("woff2"); unicode-range: U+0030; font-weight: 400; size-adjust: 97.2%; font-display: swap; }
@font-face { font-family: "Paleta Zero"; src: url(https://fonts.gstatic.com/s/lexend/v26/wlpwgwvFAVdoq2_v-6QU.woff2) format("woff2"); unicode-range: U+0030; font-weight: 700; size-adjust: 95.8%; font-display: swap; }
@font-face { font-family: "Paleta Zero Tab"; src: url(https://fonts.gstatic.com/s/lexend/v26/wlpwgwvFAVdoq2_v-6QU.woff2) format("woff2"); unicode-range: U+0030; font-weight: 400; size-adjust: 105.3%; font-display: swap; }
@font-face { font-family: "Paleta Zero Tab"; src: url(https://fonts.gstatic.com/s/lexend/v26/wlpwgwvFAVdoq2_v-6QU.woff2) format("woff2"); unicode-range: U+0030; font-weight: 700; size-adjust: 93.6%; font-display: swap; }
/* Atkinson's 1-9 on their own, for Lexend labels whose numbers change: Lexend has no tabular figures. */
@font-face { font-family: "Paleta Digits"; src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v12/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G04pIo.woff2) format("woff2"); unicode-range: U+0031-0039; font-weight: 400; font-display: swap; }
@font-face { font-family: "Paleta Digits"; src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v12/9Bt73C1KxNDXMspQ1lPyU89-1h6ONRlW45G8Wbc9dCWP.woff2) format("woff2"); unicode-range: U+0031-0039; font-weight: 700; font-display: swap; }

:root {
  --bone: #F4F3EF;
  --ink: #111111;
  --g1: #6B6A66;
  --g2: #B8B7B2;
  --g3: #DAD9D4;
  --lx: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --at: "Paleta Zero", "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --at-tab: "Paleta Zero Tab", "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lx-num: "Paleta Zero Tab", "Paleta Digits", var(--lx);
  /* The type scale: every text size on the page is one of these eight. */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-base: 18px;
  --fs-lg: 24px;
  --fs-xl: clamp(28px, 3vw, 40px);
  --fs-2xl: clamp(40px, 6.4vw, 96px);
  --fs-3xl: clamp(72px, 17vw, 232px);
  --margin: 80px;
  --gutter: 24px;
  --nav-h: 72px;
  --sec: 48px;
  /* Paper grain: grey noise only, painted behind content so lesson canvases keep their true colours. */
  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .07 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 1199px) { :root { --margin: 40px; } }
@media (max-width: 767px) { :root { --margin: 20px; --gutter: 16px; --nav-h: 56px; --sec: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 400 var(--fs-base)/1.5 var(--at);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure { margin: 0; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--g1); }
sup { line-height: 0; font-size: var(--fs-xs); }
[hidden] { display: none !important; }
/* Grain on its own fixed layer: composited once, not repainted on every scroll frame. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- type ---------- */
h1 { font: 600 var(--fs-2xl)/1.02 var(--lx); letter-spacing: -0.035em; max-width: 13em; }
/* A slice of the jeepney (its fog lamps) set into the headline. */
.h1-pill { display: inline-block; width: 2.2em; height: 0.9em; vertical-align: -0.06em; border-radius: 999px; border: 2px solid var(--ink); background: url(assets/images/jeepney-hero.webp) 17.5% 57% / 500% auto no-repeat var(--g3); }
h2 { font: 600 var(--fs-xl)/1.1 var(--lx); letter-spacing: -0.025em; margin-top: 8px; }
h1, h2 { text-wrap: balance; }
.body, .lede, .cap { text-wrap: pretty; }
.num { font: 300 var(--fs-2xl)/1 var(--lx); letter-spacing: -0.03em; color: var(--g2); }
.lbl { font: 600 var(--fs-sm)/1.3 var(--lx); letter-spacing: 0.005em; }
/* Small caps only where they title something: widget heads, table and stat headers, footer columns. */
h3.lbl, th.lbl, dt.lbl, .whead .lbl, .footer .lbl { font-size: var(--fs-xs); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.png8 h3.lbl { font-size: var(--fs-sm); letter-spacing: 0.005em; text-transform: none; }
.body { margin-top: 16px; max-width: 66ch; }
.cap { font-size: var(--fs-md); line-height: 1.5; letter-spacing: 0.01em; color: var(--g1); margin-top: 12px; }
.small { font-size: var(--fs-sm); }
.g1 { color: var(--g1); }
/* Live numbers use tabular figures so they keep their width while a slider moves. */
.tab, .readout, .readout-lg { font-family: var(--at-tab); font-variant-numeric: tabular-nums; }
.lbl.tab, button.tab { font-family: var(--lx-num); }
.readout { font: 700 var(--fs-md)/1.5 var(--at-tab); font-variant-numeric: tabular-nums; }
.readout-lg { font: 700 var(--fs-xl)/1.2 var(--at-tab); font-variant-numeric: tabular-nums; }
.formula { font: 600 var(--fs-xl)/1.2 var(--lx); margin-top: 24px; }
.formula sup { font-size: var(--fs-lg); }
.mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; }
.mt24 { margin-top: 24px; } .mt28 { margin-top: 28px; }
.r { text-align: right; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: 4px; background: transparent;
  font: 500 var(--fs-md)/1 var(--lx); color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background 200ms, color 200ms;
}
.btn:hover { background: var(--ink); color: var(--bone); }
.btn > span[aria-hidden] { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover > span[aria-hidden] { transform: translateY(3px); }
.footer__top .btn:hover > span[aria-hidden] { transform: translateY(-3px); }
.btn:active:not(:disabled), .seg button:active, .sw:active .sw__track { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } .btn:active, .seg button:active, .sw:active .sw__track, .frame:hover img { transform: none; } }
.btn--sm { height: 44px; padding: 0 16px; }
.btn:disabled { color: var(--g2); border-color: var(--g2); background: transparent; cursor: default; }

.seg { display: flex; border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; }
.seg button {
  flex: 1 1 0; min-width: 0; height: 44px; padding: 0 12px;
  border: 0; border-left: 1px solid var(--ink); background: transparent;
  font: 500 var(--fs-sm)/1 var(--lx); white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--g3); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
.seg button[aria-pressed="true"]:focus-visible { outline-color: var(--bone); }

.sw { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0; border: 0; background: transparent; font: 400 var(--fs-md)/1.2 var(--at); text-align: left; }
.sw__track { position: relative; flex-shrink: 0; width: 44px; height: 24px; border: 1px solid var(--ink); border-radius: 12px; background: var(--bone); }
.sw__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
.sw[aria-checked="true"] .sw__track { background: var(--ink); }
.sw[aria-checked="true"] .sw__knob { left: 23px; background: var(--bone); }

.field .lbl { display: block; }
.pair { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.pair input[type="range"] { flex: 1 1 auto; min-width: 0; }

input[type="number"], .val {
  height: 40px; border: 1px solid var(--ink); border-radius: 4px; background: var(--bone);
  font: 700 var(--fs-md)/1 var(--at-tab); font-variant-numeric: tabular-nums; color: var(--ink);
}
input[type="number"] { width: 76px; flex-shrink: 0; text-align: center; padding: 0 4px; }
.val { width: 100%; padding: 0 10px; font-size: var(--fs-base); }
.val[aria-invalid="true"] { border-width: 2px; border-style: dashed; }

input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; margin: 0; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--g3); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bone); }
input[type="range"]::-moz-range-track { height: 4px; background: var(--g3); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bone); box-sizing: border-box; }
input[type="radio"] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--ink); }

.skip { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--bone); }
.skip:focus { top: 16px; }

/* ---------- grid ---------- */
.wrap { width: min(1200px, 100% - 2 * var(--margin)); margin-inline: auto; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.copy { grid-column: 1 / span 5; }
/* Desktop: the section title stays put while its widget scrolls past beside it. */
@media (min-width: 1024px) { .lesson .split:not(.qhead) > .copy { position: sticky; top: calc(var(--nav-h) + 40px); } }
.widget { grid-column: 6 / span 7; container-type: inline-size; }
.whead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--ink); }

.lesson { padding-bottom: 56px; }
main { overflow-x: clip; }
.lesson > .wrap:first-child { padding-top: var(--sec); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--grain), var(--bone); border-bottom: 2px solid var(--g3); }
.nav__in { height: calc(var(--nav-h) - 2px); display: flex; align-items: center; justify-content: space-between; }
.wordmark { font: 600 var(--fs-lg)/1 var(--lx); letter-spacing: -0.02em; text-decoration: none; }
a.wordmark { display: inline-flex; flex-direction: column; gap: 4px; }
.wordmark__by { font: 400 var(--fs-xs)/1.2 var(--at); letter-spacing: 0.01em; color: var(--g1); }
.nav__links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: 12px 0; font: 500 var(--fs-sm)/1 var(--lx); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0 2px no-repeat;
  transition: background-size 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a:hover { color: var(--ink); background-size: 100% 2px; }
.nav__links a[aria-current] { background-size: 100% 2px; }
.nav__menu { display: none; }
.nav__progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; }
.nav__progress span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }


/* ---------- #top ---------- */
.hero { padding: 64px 0 72px; }
.lede { font-size: var(--fs-lg); line-height: 1.45; margin-top: 24px; max-width: 42ch; }
.hero__cta { margin-top: 32px; }
.hero__photo { margin-top: 48px; }
.frame { overflow: hidden; background: var(--g3); }
.frame img { transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.frame:hover img { transform: scale(1.04); }
.hero__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--g3); }
.hero__photo figcaption { margin-top: 10px; }

/* ---------- #pixel ---------- */
.pixel { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px 24px; grid-template-areas: "fig sliders" "out out" "photo photo"; }
.pixel__fig { grid-area: fig; }
.pixel__fig svg { width: 100%; height: auto; }
.pixel__fig figcaption { margin-top: 12px; }
.screen circle { mix-blend-mode: screen; }
.pixel__sliders { grid-area: sliders; display: flex; flex-direction: column; gap: 20px; }
.pixel__out { grid-area: out; display: flex; align-items: center; gap: 24px; }
.pixel__out .cap { margin-top: 0; }
.swatch { width: 96px; height: 96px; flex-shrink: 0; border: 1px solid var(--ink); }
/* Real photos sit beside the simulations: subpixels in 01, halftone dots in the CMYK row of 02. */
.pixel__photo { grid-area: photo; }
.pixel__photo img, .halftone img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); background: var(--g3); }
.pixel__photo figcaption { margin-top: 10px; }
.halftone { margin-top: 12px; max-width: 360px; }
.notations .halftone figcaption { margin-top: 8px; }
@container (max-width: 560px) {
  .pixel { grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "fig out" "sliders sliders" "photo photo"; gap: 24px 20px; }
  .pixel__fig figcaption { display: none; }
  .pixel__out { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pixel__out .swatch { width: 64px; height: 64px; }
  .pixel__out .readout-lg { font-size: var(--fs-lg); }
}

/* ---------- #models ---------- */
.models { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px 40px; }
.wheel { position: relative; width: 300px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: crosshair; }
.wheel img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.wheel__shade { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.wheel__handle {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; border: 3px solid var(--bone); outline: 1px solid var(--ink);
  cursor: grab; touch-action: none;
}
.wheel__handle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--bone); }
.models__wheel .cap { margin: 16px 0 16px; }
.swatch--bar { width: auto; height: 48px; }
.notations { width: 100%; border-collapse: collapse; margin-top: 16px; }
.notations thead th { text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--ink); }
.notations thead th:first-child { width: 72px; }
.notations tbody th { text-align: left; vertical-align: top; padding: 26px 12px 14px 0; border-bottom: 1px solid var(--g3); }
.notations td { padding: 12px 0 12px; border-bottom: 1px solid var(--g3); }
.notations td .cap { display: block; margin-top: 4px; }
.approx { display: flex; align-items: center; gap: 10px; }
.approx .readout { color: var(--g1); }
.md-err:empty { display: none; }
@container (max-width: 600px) {
  .models { grid-template-columns: minmax(0, 1fr); }
  .wheel { width: 240px; margin-inline: auto; }
  .wheel__handle { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-width: 4px; }
}

.spectrum { margin-top: 32px; max-width: 420px; }
.spectrum svg { display: block; width: 100%; height: auto; }
.spectrum svg rect { stroke: #111111; stroke-width: 1; }
.spectrum__scale { position: relative; height: 1.5em; margin-top: 6px; font-size: var(--fs-sm); color: var(--g1); }
.spectrum__scale span { position: absolute; top: 0; white-space: nowrap; }
.spectrum__scale span:nth-child(2) { left: 60%; transform: translateX(-50%); color: var(--ink); }
.spectrum__scale span:last-child { right: 0; }

/* ---------- #schemes ---------- */
.seg--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg--grid button { border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); margin: -1px 0 0 -1px; }
.schemes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px 40px; margin-top: 24px; }
.wheel--static { cursor: auto; touch-action: auto; }
.sc-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-overlay polygon { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sc-overlay circle { stroke: var(--ink); stroke-width: 3; }
.sc-overlay circle:first-child { stroke-width: 4; }
.sc-swatches { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sc-swatches li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-sw { display: block; height: 56px; border: 1px solid var(--ink); }
#sc-name { font-size: var(--fs-lg); }
.sc-hex { font-size: var(--fs-sm); font-weight: 700; }
.sc-deg { font-size: var(--fs-xs); color: var(--g1); }
@media (max-width: 1023px) { .schemes { grid-template-columns: minmax(0, 1fr); } .wheel--static { width: 260px; margin-inline: auto; } }
@media (max-width: 767px) { .seg--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- #depth ---------- */
.seg--depth { max-width: 460px; }
.strip-ref { height: 24px; margin-top: 8px; background: linear-gradient(90deg, #000000, #F2C230); }
.strip { width: 100%; height: 96px; margin-top: 8px; border: 1px solid var(--ink); image-rendering: pixelated; }
.levels { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: var(--fs-md); }
.levels th { text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--ink); }
.levels th.r { text-align: right; }
.levels td { padding: 8px 0; border-bottom: 1px solid var(--g3); }
.levels tr.is-active td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }

/* ---------- #histogram ---------- */
.seg--four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg--four button { border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); margin: -1px 0 0 -1px; }
.hist-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 24px; border: 1px solid var(--ink); background: var(--g3); }
.hist-graph { display: block; width: 100%; height: 160px; margin-top: 24px; border-bottom: 1px solid var(--ink); background: linear-gradient(to right, transparent 33.2%, var(--g3) 33.2%, var(--g3) 33.5%, transparent 33.5%, transparent 66.5%, var(--g3) 66.5%, var(--g3) 66.8%, transparent 66.8%); }
.hist-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-xs); color: var(--g1); }
.hist-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; }
.hist-stats dd { margin: 4px 0 0; font: 700 var(--fs-lg)/1.2 var(--at-tab); }
@media (max-width: 767px) { .seg--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hist-axis span:nth-child(2), .hist-axis span:nth-child(4) { display: none; } }

/* ---------- #quantize ---------- */
.qhead__text { grid-column: 1 / span 8; margin-top: 24px; }
.qhead__text > * { max-width: 65ch; }
.qhead__text .body { margin-top: 0; }
/* 06 opens with the worked example: 24 shades snap to a 4-colour palette, redrawn without and with dithering. */
.qdiagram { margin-top: 32px; max-width: 640px; }
.qdiagram svg { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.qdiagram .lbl { margin-top: 20px; }
.qdiagram .lbl:first-child { margin-top: 0; }
.qdiagram .cap { margin-top: 12px; }
/* 06 is the one full-width section: its heading, intro and diagram sit centred over the centred image. */
@media (min-width: 768px) {
  .qhead { display: block; text-align: center; }
  .qhead__text > *, .qdiagram { margin-inline: auto; }
}
.qdiagram__hex { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; font-size: var(--fs-xs); color: var(--g1); }
.mob-only { display: none; }

.stage {
  --edge: max(var(--margin), calc((100% - 1200px) / 2));
  position: relative; width: min(100%, 120vh); margin-inline: auto; aspect-ratio: 3 / 2; margin-top: 40px;
  overflow: hidden; background: var(--g3); touch-action: pan-y; user-select: none; cursor: ew-resize;
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#q-after { clip-path: inset(0 0 0 50%); }
.chip { position: absolute; z-index: 2; margin: 0; background: var(--bone); padding: 6px 10px; font-size: var(--fs-sm); line-height: 1.4; max-width: calc(100% - 2 * var(--edge)); }
.chip--tl { left: var(--edge); top: 24px; }
.chip--tr { right: var(--edge); top: 24px; }
.chip--bl { left: var(--edge); bottom: 24px; max-width: 48%; }
.chip--br { right: var(--edge); bottom: 24px; padding: 6px 10px; }
.divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--bone); pointer-events: none; }
.handle {
  position: absolute; z-index: 4; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--bone); color: var(--ink);
  touch-action: none; cursor: ew-resize;
}
.handle.on { background: var(--ink); color: var(--bone); }
.handle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--bone); }
.drag-readout {
  position: absolute; z-index: 4; top: calc(50% - 62px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bone); padding: 4px 8px; border-radius: 4px;
  font: 700 var(--fs-sm)/1.2 var(--at-tab); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}

.qcontrols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--gutter); margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink); }
.qcontrols .lbl + .seg, .qcontrols .lbl + .sw, .qcontrols .lbl + .btn { margin-top: 8px; }
.qcontrols .pair { height: 44px; }
.qc .cap { margin-top: 8px; }
.qlab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.qlab__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.qlab .cap { flex: 1 1 20rem; margin: 0; }
.q-msg, .q-credit { flex-basis: 100%; }
.q-msg { color: var(--ink); }
.q-samples button { flex: 0 0 auto; padding: 0 16px; }
.q-msg:empty { display: none; }
/* While a photo is dragged over 06, the stage says where to let go. */
.stage.is-drop::after {
  content: "Drop the photo to quantize it"; position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 24px; text-align: center;
  background: rgb(17 17 17 / 0.72); color: var(--bone); font: 600 var(--fs-lg)/1.2 var(--lx);
  outline: 2px dashed var(--bone); outline-offset: -16px;
}
.drawer__head { display: none; }

.qpalette { margin-top: 32px; }
.png8 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; margin-top: 40px; }
.png8 img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .png8 { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; } }
code { font: inherit; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.qpalette__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.chips { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 8px; }
.chips li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chips .chip-sw { display: block; height: 56px; }
.chips .chip-hex { font-size: var(--fs-xs); line-height: 1.2; color: var(--g1); font-family: var(--at-tab); font-variant-numeric: tabular-nums; }
.chips--dense { grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 4px; }
.chips--dense .chip-sw { height: 24px; }
.chips--dense .chip-hex { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.drawer-bar { width: 100%; height: 56px; margin-top: 32px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 4px 4px 0 0; background: var(--bone); font-size: var(--fs-sm); }

/* ---------- #hear ---------- */
.audio-slot { margin-top: 8px; }
.audio-slot audio { width: 100%; }
.tone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.tone-row .cap { margin: 0 0 0 4px; }
.link-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; margin-top: 20px; }
.link-row .cap { margin: 0; }
.wave { margin-top: 28px; }
.wave svg { width: 100%; height: auto; border: 1px solid var(--ink); }
.wave figcaption { margin-top: 12px; }

/* ---------- #check ---------- */
.quiz { display: flex; flex-direction: column; gap: 24px; }
.q { border-top: 1px solid var(--g3); padding-top: 20px; }
.q fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.q legend { padding: 0; font: 500 var(--fs-base)/1.5 var(--lx); }
.opts { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 8px; }
.opts label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--fs-md); cursor: pointer; }
.fb { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 4px; font-size: var(--fs-md); line-height: 1.5; }
.fb:empty { display: none; }
.fb.is-wrong { border-width: 2px; }
.fb svg { flex-shrink: 0; margin-top: 2px; }
.quiz-top { justify-content: space-between; align-items: center; margin-bottom: 16px; }
.quiz-bars { display: flex; gap: 4px; }
.quiz-bars span { width: 28px; height: 4px; background: var(--g3); }
.quiz-bars span.on { background: var(--ink); }
.quiz-nav { justify-content: space-between; margin-top: 20px; }

/* ---------- #spec ---------- */
.table-scroll { margin-top: 32px; overflow-x: auto; }
.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-md); line-height: 1.5; }
.spec th { text-align: left; vertical-align: bottom; padding: 0 16px 12px 0; border-bottom: 1px solid var(--ink); width: 25%; }
.spec td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--g3); vertical-align: top; }
.spec th:last-child, .spec td:last-child { padding-right: 0; }
.spec .cap { margin: 0; }

/* ---------- footer ---------- */
.footer .wrap { border-top: 1px solid var(--ink); padding: 40px 0 32px; }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; font-size: var(--fs-md); }
.footer__refs { grid-column: 1 / span 6; }
.footer__course { grid-column: 7 / span 3; }
.footer__top { grid-column: 10 / span 3; display: flex; justify-content: flex-end; align-items: flex-start; }
.footer ol { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.footer li { overflow-wrap: anywhere; } /* long source URLs break instead of widening the page on phones */
.footer__course p:not(.lbl) { margin-top: 12px; }
.footer__base { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
/* The page closes on its name, set as large as the column allows. */
.footer__base .wordmark { font-size: var(--fs-3xl); line-height: 0.8; letter-spacing: -0.055em; margin-left: -0.04em; }
.footer__base .cap { margin: 0; }

/* ---------- 768–1199: splits stack below 1024 ---------- */
@media (max-width: 1199px) {
  .chips { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .split { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .copy { grid-column: 1 / span 6; }
  .widget, .qhead__text { grid-column: 1 / -1; margin-top: 40px; }
  .qhead__text { margin-top: 24px; }
  .footer__refs { grid-column: 1 / span 4; }
  .footer__course { grid-column: 5 / span 4; }
  .footer__top { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Nine links stop fitting beside the wordmark below 1024px, so the menu button takes over there. */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; margin-left: auto; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
    padding: 4px var(--margin) 12px; background: var(--grain), var(--bone); border-bottom: 1px solid var(--ink);
  }
  .nav.open .nav__links a { padding: 14px 0; font-size: var(--fs-base); }
}

/* ---------- 390 (≤767) ---------- */
@media (max-width: 767px) {

  .split { grid-template-columns: minmax(0, 1fr); }
  .copy, .widget, .qhead__text { grid-column: 1 / -1; }
  .widget { margin-top: 32px; }
  .body { margin-top: 12px; }
  .cap { margin-top: 8px; }
  .lesson { padding-bottom: 56px; }

  .hero { padding: 32px 0 48px; }
  .lede { font-size: var(--fs-base); margin-top: 16px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__photo { margin-top: 32px; }

  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
  input[type="number"] { width: 72px; height: 44px; }
  .pair { gap: 14px; }
  .seg button { padding: 0 4px; }

  /* colour-model table becomes four stacked cards */
  .notations thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .notations, .notations tbody, .notations tr, .notations th, .notations td { display: block; }
  .notations tbody { display: flex; flex-direction: column; gap: 8px; }
  .notations tr { border: 1px solid var(--ink); border-radius: 4px; padding: 12px 14px; }
  .notations tbody th, .notations td { padding: 0; border: 0; }
  .notations td { margin-top: 8px; }
  .notations .val { height: 44px; }

  .desk-only { display: none; }
  .mob-only { display: block; }
  .q-view, .quiz-top, .quiz-nav, .drawer-bar { display: flex; }
  .q-more { margin-top: 12px; border-bottom: 1px solid var(--g3); }
  .q-more summary { min-height: 44px; display: flex; align-items: center; font: 500 var(--fs-md)/1.2 var(--lx); cursor: pointer; }
  .q-more .cap { margin: 0 0 12px; }
  .q-view { margin-top: 24px; }

  .stage { aspect-ratio: 3 / 2; margin-top: 16px; cursor: auto; touch-action: auto; --edge: 20px; }
  .divider, .handle, .drag-readout, .chip--br { display: none; }
  #q-after { clip-path: none; }
  .stage[data-view="before"] #q-after { visibility: hidden; }
  .stage[data-view="before"] .chip--tr, .stage[data-view="after"] .chip--tl { display: none; }
  .chip--tr { right: auto; left: var(--edge); }
  .chip--bl { max-width: calc(100% - 40px); font-size: var(--fs-xs); }

  .chips .chip-sw { height: 36px; }
  .chips .chip-hex { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chips--dense .chip-sw { height: 24px; }

  /* quantizer controls live in a bottom drawer; the canvas stays visible above it */
  .qcontrols { display: none; }
  .qcontrols.open {
    display: flex; flex-direction: column; gap: 16px;
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 55dvh; overflow-y: auto;
    margin: 0; padding: 12px 20px 20px; background: var(--bone);
    border: 1px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0;
  }
  .drawer__head { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 8px; }
  .drawer__grip { grid-column: 1 / -1; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--g2); }
  .qlab__btns .btn { flex: 1 1 auto; justify-content: center; }
  .q-samples { flex: 1 1 100%; }
  .q-samples button { flex: 1 1 0; }

  .quiz .q { display: none; border-top: 0; padding-top: 0; }
  .quiz .q.is-current { display: block; }
  .opts { flex-direction: column; gap: 0; }
  .opts label { min-height: 48px; border-bottom: 1px solid var(--g3); }

  .scroll-hint { margin-top: 24px; text-align: right; }
  .table-scroll { margin-top: 8px; border: 1px solid var(--ink); }
  .spec { min-width: 720px; }
  .spec th, .spec td { padding: 12px; }
  .spec th:last-child, .spec td:last-child { padding-right: 12px; }

  .footer__refs, .footer__course, .footer__top { grid-column: 1 / -1; }
}