/* moonmedia — the archive. A film stock look: aged paper, film black, one
   amber light. Every colour is a variable, so the dark theme swaps the stock
   rather than patching the pages. */

:root {
  color-scheme: light;
  --paper: #f3e8d3;
  --paper-2: #ecdfc6;
  --paper-3: #e2d2b4;
  --ink: #1d1712;
  --ink-2: #453a2e;
  --muted: #6b5b45;
  --rule: #cdba95;
  --rule-soft: #ddcdae;
  --amber: #a35a12;
  --amber-2: #c9822f;
  --stamp: #9b3324;
  --edge: #1d1712;
  --film: #171210;
  --film-2: #241b16;
  --hole: #f3e8d3;
  --frame-bg: #f3e8d3;
  --on-amber: #1a1208;
  --code-bg: #171210;
  --code-ink: #f0e3ca;
  --code-dim: #a68f6d;
  --selection: #e6cfa4;
  --display: "Bodoni Moda", "Times New Roman", serif;
  --ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --max: 1180px;
  --gap: clamp(18px, 3vw, 34px);
  --grain-opacity: 0.055;
  --grain-blend: multiply;
  --vignette-opacity: 0.5;
}

/* The screening room. One palette, two ways to reach it: a reader who pressed
   the button, and a system that asked for dark and a reader who has not
   chosen. Both blocks hold the same tokens on purpose — add a colour, add it
   to both. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14100d;
  --paper-2: #1c1713;
  --paper-3: #251d17;
  --ink: #ece0c8;
  --ink-2: #cdba9c;
  --muted: #a08d72;
  --rule: #3a2f25;
  --rule-soft: #2b221b;
  --amber: #e0a458;
  --amber-2: #f0bd76;
  --stamp: #d9684f;
  --edge: #000;
  --film: #0c0a08;
  --film-2: #161210;
  --hole: #2b2119;
  --frame-bg: #1f1915;
  --on-amber: #160e05;
  --code-bg: #0c0a08;
  --code-ink: #e9dcc3;
  --code-dim: #8c7a61;
  --selection: #4a3826;
  --grain-opacity: 0.07;
  --grain-blend: screen;
  --vignette-opacity: 0.7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14100d;
    --paper-2: #1c1713;
    --paper-3: #251d17;
    --ink: #ece0c8;
    --ink-2: #cdba9c;
    --muted: #a08d72;
    --rule: #3a2f25;
    --rule-soft: #2b221b;
    --amber: #e0a458;
    --amber-2: #f0bd76;
    --stamp: #d9684f;
    --edge: #000;
    --film: #0c0a08;
    --film-2: #161210;
    --hole: #2b2119;
    --frame-bg: #1f1915;
    --on-amber: #160e05;
    --code-bg: #0c0a08;
    --code-ink: #e9dcc3;
    --code-dim: #8c7a61;
    --selection: #4a3826;
    --grain-opacity: 0.07;
    --grain-blend: screen;
    --vignette-opacity: 0.7;
  }
}

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

html {
  font-variant-ligatures: no-contextual;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 520px at 8% -8%, color-mix(in oklab, var(--amber) 9%, transparent), transparent 70%),
    radial-gradient(900px 480px at 100% 4%, color-mix(in oklab, var(--stamp) 6%, transparent), transparent 72%);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
  color: var(--ink);
}


/* Screen furniture — the header, the tabs, the strip, the readouts — does not
   take a text selection, and nothing in it starts a drag ghost when it is
   pulled at. Prose, code, signatures and the playlist log still select: those
   are the things a reader copies. */
.perf,
.grain,
.vignette,
.site-head,
.brand,
.nav,
.reel,
.strip-note,
.strip,
.frame,
h1,
.numbers,
.card .idx,
.intertitle,
.demo-head,
.presets,
.chip,
.verdict,
.cues,
.demo-foot,
.stamp,
.teaser .kicker,
.page-head .reel,
.toc,
.tabs,
.tab,
.frames,
.reel-frame,
.cuts,
.cut,
.readout,
.ruler,
.ruler-note,
.bytes,
.legend,
.tree,
.box-row,
.api-side,
.pkg > h2,
.group,
.entry .kind,
.site-foot {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

a,
img,
svg,
button,
.frame,
.btn,
.chip,
.tab,
.cut,
.reel-frame {
  -webkit-user-drag: none;
}

/* Form fields and the log opt back in, whatever they sit inside. */
textarea,
input,
.prose,
.prose p,
.prose li,
.prose table,
.doc,
.sig,
.fields,
.variants,
pre,
.lede,
.card p,
.print {
  -webkit-user-select: text;
  user-select: text;
}

/* The page itself has no scrollbar: the rail on the right edge is the
   indicator, and it is not there until the page has moved. The boxes that do
   scroll — code, the log, the cue sheet, the strip — keep a bar, drawn to
   match the stock they sit on. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: none;
  }
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--paper-2);
}

::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 3px solid var(--paper-2);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--amber-2);
}

::-webkit-scrollbar-corner {
  background: var(--paper-2);
}


/* A strip of sprockets down the right edge. It appears after the first scroll
   and leaves when the page is back at the top, so nothing sits on the paper
   while the reader is still on the first frame. */
.scroll-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18px;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  background-color: transparent;
  border-left: 1px solid var(--rule-soft);
  background-image: radial-gradient(3.5px 3px at 50% 50%, var(--rule) 96%, transparent 100%);
  background-size: 18px 22px;
}

.scroll-rail.on {
  opacity: 1;
}

@media (width <= 860px) {
  .scroll-rail {
    display: none;
  }
}

/* The grain and the vignette sit above the page, below the text, and take no
   clicks. Both are faint: the theme is a print, not a filter. */
.grain,
.vignette {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.grain {
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  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.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grain-shift 7s steps(6) infinite;
}

@keyframes grain-shift {
  0% { background-position: 0 0; }
  17% { background-position: -14px 9px; }
  33% { background-position: 9px -12px; }
  50% { background-position: -7px -6px; }
  67% { background-position: 12px 7px; }
  83% { background-position: -11px 12px; }
  100% { background-position: 0 0; }
}

.vignette {
  background: radial-gradient(120% 92% at 50% 0%, transparent 46%, color-mix(in oklab, var(--ink) 22%, transparent) 100%);
  opacity: var(--vignette-opacity);
}

/* The perforated edge of a strip. Two bands of holes, drawn as an ellipse
   gradient so they have the rounded shape of a real sprocket hole. */
.perf {
  height: 26px;
  background-color: var(--film);
  background-image: radial-gradient(6px 4.5px at 50% 50%, var(--hole) 96%, transparent 100%);
  background-size: 30px 26px;
  background-position: center;
  background-repeat: repeat-x;
}

.site-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--max);
  margin-inline: auto;
  padding: 26px var(--gap) 20px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.brand b {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.brand span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.2vw, 26px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 4px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--amber);
}

.nav a[aria-current="page"] {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* The stock switch: a sun while the page is dark, a moon while it is light. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--amber);
}

.theme-toggle .icon {
  width: 15px;
  height: 15px;
}

.theme-toggle .sun {
  display: none;
}

.theme-toggle[data-mode="dark"] .sun {
  display: block;
}

.theme-toggle[data-mode="dark"] .moon {
  display: none;
}

.nav .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

main {
  display: block;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gap);
}

.hero {
  padding-block: clamp(26px, 5vw, 54px) 10px;
}

.reel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}

.reel::before {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
}

.reel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(64px, 13.5vw, 176px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-shadow: 0 1px 0 color-mix(in oklab, var(--paper) 70%, transparent), 0 -1px 0 color-mix(in oklab, var(--ink) 16%, transparent);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 208px;
  gap: var(--gap);
  align-items: start;
}

.record {
  justify-self: end;
  margin-top: 6px;
  padding: 14px 16px 12px;
  border: 2px solid var(--stamp);
  outline: 1px solid var(--stamp);
  outline-offset: 3px;
  color: var(--stamp);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-4deg);
  opacity: 0.82;
}

.record b {
  display: block;
  margin: 4px 0 2px;
  font-family: var(--display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.record em {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, var(--stamp) 45%, transparent);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.16em;
}

.lede {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
}

.lede em {
  font-style: normal;
  color: var(--ink);
  border-bottom: 1px solid var(--amber);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: var(--amber-2);
  color: var(--on-amber);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--edge);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--edge);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--edge);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
}

.btn.ghost:hover {
  background: color-mix(in oklab, var(--paper-3) 70%, transparent);
}

.btn .icon {
  width: 15px;
  height: 15px;
}

/* The strip: five formats laid out like frames on a length of film. */
.strip-wrap {
  margin-block: clamp(34px, 5vw, 60px) 0;
  padding-block: 10px;
  transform: rotate(-1.1deg);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.strip-wrap::-webkit-scrollbar {
  height: 8px;
}

.strip-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.strip-wrap::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 0;
}

.frame {
  scroll-snap-align: start;
}

.strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(178px, 1fr));
  gap: 16px;
  min-width: 940px;
  padding: 30px 22px;
  background: var(--film);
  box-shadow: 0 14px 34px -22px color-mix(in oklab, var(--ink) 80%, transparent);
}

.strip::before,
.strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image: radial-gradient(5px 4px at 50% 50%, var(--hole) 96%, transparent 100%);
  background-size: 24px 12px;
  background-repeat: repeat-x;
}

.strip {
  position: relative;
}

.strip::before {
  top: 9px;
}

.strip::after {
  bottom: 9px;
}

.frame {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 8px;
  background: var(--frame-bg);
  border: 1px solid color-mix(in oklab, var(--film) 70%, var(--amber));
  color: var(--ink);
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}

.frame:hover,
.frame:focus-visible {
  background: color-mix(in oklab, var(--paper) 82%, var(--amber-2));
  transform: translateY(-4px);
}

.frame svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 72;
}

.frame .fig {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 6px 2px;
  border-bottom: 1px dashed var(--rule);
}

.frame .cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
}

.frame .cap b {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.frame .cap span {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.strip-note {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* Key numbers. Constants only: 188 bytes will still be 188 bytes in a decade. */
.numbers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-block: clamp(46px, 7vw, 78px) 0;
  border-block: 1px solid var(--rule);
}

.num {
  padding: 22px 18px 20px;
  border-left: 1px solid var(--rule-soft);
}

.num:first-child {
  border-left: 0;
  padding-left: 0;
}

.num b {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.num span {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
}

.section {
  padding-block: clamp(52px, 8vw, 96px) 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
}

.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.section-head .kicker {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}

.section-head > p {
  margin: 0;
  max-width: 36ch;
  color: var(--muted);
  font-size: 14.5px;
  text-align: right;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.card {
  padding: 24px 22px 26px;
  background: var(--paper);
}

.card .idx {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--amber);
}

.card h3 {
  margin: 10px 0 8px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.card code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ink);
  background: var(--paper-3);
  padding: 1px 4px;
}

/* The pull quote sits on a band of film, lettered like an intertitle. */
.intertitle {
  margin-block: clamp(52px, 8vw, 96px) 0;
  padding: 46px var(--gap) 42px;
  background: var(--film);
  color: var(--code-ink);
  text-align: center;
  position: relative;
}

.intertitle::before,
.intertitle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image: radial-gradient(5px 4px at 50% 50%, var(--hole) 96%, transparent 100%);
  background-size: 24px 12px;
  background-repeat: repeat-x;
}

.intertitle::before {
  top: 10px;
}

.intertitle::after {
  bottom: 10px;
}

.intertitle p {
  max-width: 30ch;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 40px);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: 0.005em;
}

.intertitle small {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--code-ink) 55%, transparent);
}

/* The live parser. Left: the log as typed. Right: what the library made of it. */
.demo {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.demo:has(textarea:focus) {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 18%, transparent);
}

.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.demo-head .dots {
  display: flex;
  gap: 5px;
}

.demo-head .dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
}

.demo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.log {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  min-width: 0;
}

.log textarea {
  flex: 1;
  min-height: 330px;
  width: 100%;
  resize: vertical;
  padding: 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  outline: none;
}

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
}

.chip {
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--amber);
  color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.reader {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--film);
  color: var(--code-ink);
  position: relative;
}

.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in oklab, var(--code-ink) 16%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--code-ink) 62%, transparent);
}

.verdict b {
  color: var(--amber-2);
  font-weight: 500;
}

.verdict > span::before {
  content: "·";
  margin-right: 9px;
  color: color-mix(in oklab, var(--code-ink) 30%, transparent);
}

.cues {
  max-height: 246px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cues li {
  display: grid;
  grid-template-columns: 2.2em 5.4em 3.2em minmax(0, 1fr);
  gap: 10px;
  padding: 7px 18px;
  border-bottom: 1px solid color-mix(in oklab, var(--code-ink) 8%, transparent);
  font-family: var(--mono);
  font-size: 11.5px;
  color: color-mix(in oklab, var(--code-ink) 78%, transparent);
}

.cues li span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cues li.head {
  color: color-mix(in oklab, var(--code-ink) 42%, transparent);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: var(--film);
}

.reader ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.reader ::-webkit-scrollbar-track {
  background: var(--film-2);
}

.reader ::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--code-ink) 22%, var(--film));
  border: 2px solid var(--film-2);
  border-radius: 0;
}

@supports not selector(::-webkit-scrollbar) {
  .cues,
  .print,
  .log textarea,
  .code pre {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--code-ink) 30%, var(--film)) var(--film-2);
  }
  .strip-wrap,
  .out,
  .prose .code pre {
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
}

.print {
  margin: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid color-mix(in oklab, var(--code-ink) 16%, transparent);
  overflow: auto;
  max-height: 260px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--code-ink) 88%, transparent);
  white-space: pre;
}

.stamp {
  position: absolute;
  inset-inline: 0;
  top: 104px;
  margin-inline: auto;
  width: max-content;
  max-width: 84%;
  padding: 10px 18px;
  border: 2px solid var(--stamp);
  border-radius: 3px;
  color: var(--stamp);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-4deg);
  background: color-mix(in oklab, var(--film) 88%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

.stamp[hidden] {
  display: none;
}

.demo-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--muted);
}

.demo-foot code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink-2);
}

.demo-foot a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--amber) 45%, transparent);
}

.demo-foot a:hover {
  border-bottom-color: var(--amber);
}

/* The teaser for the anatomy page. */
.teaser {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  padding: 30px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.teaser h2 {
  margin: 6px 0 10px;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 400;
  line-height: 1.1;
}

.teaser p {
  margin: 0 0 20px;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 15px;
}

.teaser svg {
  width: 100%;
  height: auto;
}

.install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(48px, 7vw, 80px) 0;
}

.install h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
}

.install p {
  margin: 0;
  color: var(--muted);
}

.code {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--film) 55%, var(--rule));
  background: var(--code-bg);
  color: var(--code-ink);
}

.code pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.code pre::-webkit-scrollbar-track {
  background: var(--code-bg);
}

.code pre::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--code-ink) 24%, var(--code-bg));
  border: 2px solid var(--code-bg);
}

.code pre::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--code-ink) 40%, var(--code-bg));
}

.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  tab-size: 2;
  white-space: pre;
}

.code .copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 9px;
  border: 1px solid color-mix(in oklab, var(--code-ink) 24%, transparent);
  border-radius: 2px;
  background: transparent;
  color: color-mix(in oklab, var(--code-ink) 65%, transparent);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}

.code:hover .copy,
.code:focus-within .copy {
  opacity: 1;
}

.code .copy:hover {
  color: var(--code-ink);
  border-color: var(--code-ink);
}

.code .label {
  display: block;
  padding: 8px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--code-ink) 14%, transparent);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--code-dim);
}

.site-foot {
  margin-top: clamp(64px, 9vw, 110px);
  background: var(--film);
  color: var(--code-ink);
}

.site-foot .inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 34px var(--gap) 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.site-foot .brand b,
.site-foot .brand span {
  color: var(--code-ink);
}

.site-foot .brand span {
  color: color-mix(in oklab, var(--code-ink) 55%, transparent);
}

.site-foot p {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--code-ink) 48%, transparent);
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.site-foot nav a {
  color: color-mix(in oklab, var(--code-ink) 72%, transparent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-foot nav a:hover {
  color: var(--code-ink);
  border-bottom-color: var(--amber-2);
}

/* ---------------------------------------------------------------------
   Inner pages: a guide, an anatomy, a reference. Same stock, quieter.
   --------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(30px, 5vw, 52px) 26px;
  border-bottom: 1px solid var(--rule);
}

.page-head h1 {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 0.94;
}

.page-head .lede {
  max-width: 60ch;
  margin-top: 18px;
}

.layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
  padding-block: 40px 0;
}

.toc {
  position: sticky;
  top: 24px;
  font-size: 13px;
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}

.toc p {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc a {
  display: block;
  padding: 5px 0;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.toc a:hover {
  color: var(--ink);
}

.toc a.active {
  color: var(--amber);
}

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

.prose > section {
  padding-block: 8px 34px;
  scroll-margin-top: 24px;
}

.prose h2 {
  margin: 14px 0 10px;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin: 30px 0 8px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.prose p {
  margin: 0 0 14px;
  color: var(--ink-2);
}

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

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--ink-2);
}

.prose li {
  margin-bottom: 6px;
}

.prose a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
}

.prose a:hover {
  background: color-mix(in oklab, var(--amber) 14%, transparent);
}

.prose .code {
  margin: 0 0 8px;
}

.prose .out {
  margin: 0 0 22px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--amber);
  border-radius: 0 3px 3px 0;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  overflow: auto;
  white-space: pre;
}

.prose .out::before {
  content: "output";
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.note {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--amber);
  border-radius: 0 3px 3px 0;
  background: color-mix(in oklab, var(--paper-2) 70%, transparent);
  font-size: 14px;
  color: var(--ink-2);
}

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

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
}

.prose th,
.prose td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule);
}

.prose td code,
.prose p code,
.prose li code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 0 3px;
}

/* The anatomy page. */
.stage {
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

.tab {
  padding: 11px 18px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--film);
  color: var(--code-ink);
}

.panel {
  padding: 22px;
}

.panel[hidden] {
  display: none;
}

.panel h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
}

.panel > p {
  margin: 0 0 20px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 14px;
}

.frames {
  display: flex;
  gap: 10px;
  padding: 10px 0 14px;
  overflow-x: auto;
}

.reel-frame {
  flex: none;
  width: 54px;
  height: 40px;
  border: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
}

.reel-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule-soft);
}

.reel-frame.key {
  border-color: var(--amber);
}

.reel-frame.key::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -7px;
  height: 3px;
  background: var(--amber);
}

.reel-frame:hover {
  background: var(--paper-3);
}

.reel-frame.picked {
  background: color-mix(in oklab, var(--amber) 14%, var(--paper));
  border-color: var(--amber);
}

.reel-frame.muted {
  opacity: 0.4;
}

.cuts {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.cut {
  padding: 12px 14px;
  border-left: 1px dashed var(--rule);
  flex: 1;
  min-width: 0;
  cursor: pointer;
  background: transparent;
  border-block: 0;
  border-right: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}

.cut:first-child {
  border-left: 0;
}

.cut[aria-pressed="true"] {
  background: color-mix(in oklab, var(--amber) 12%, transparent);
}

.cut b {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

.cut span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin-top: 16px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.readout div {
  padding: 10px 12px;
  background: var(--paper);
}

#byte-readout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.readout dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.readout dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
}

/* Box tree: one row per box, indented by depth, with a byte bar alongside. */
.tree {
  border: 1px solid var(--rule);
  background: var(--paper);
}

.box-row {
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 12px;
  cursor: default;
}

.box-row:last-child {
  border-bottom: 0;
}

.box-row:hover,
.box-row.active {
  background: color-mix(in oklab, var(--amber) 10%, transparent);
}

.box-row[data-depth="1"] .name {
  padding-left: 18px;
}

.box-row[data-depth="2"] .name {
  padding-left: 36px;
}

.box-row.active .name b,
.box-row.active .name {
  color: var(--ink);
}

.box-row .name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.box-row .name i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  flex: none;
}

.box-row.kind-moof .name i,
.box-row.kind-traf .name i {
  background: var(--amber);
  border-color: var(--amber);
}

.box-row.kind-mdat .name i {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

.box-row .size {
  color: var(--muted);
  text-align: right;
  font-size: 11px;
}

.ruler {
  margin-top: 14px;
  position: relative;
  height: 34px;
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 10%),
    var(--paper);
}

.ruler .base {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  right: 0;
  background: var(--paper-3);
}

.ruler .span {
  position: absolute;
  top: 6px;
  bottom: 6px;
  background: color-mix(in oklab, var(--amber) 55%, transparent);
  border: 1px solid var(--amber);
  transition: left 140ms ease, width 140ms ease;
}

.ruler-note {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ruler .mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  opacity: 0.35;
}

/* 188 bytes as a grid: 16 to a line, 12 lines. */
.bytes {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 2px;
  max-width: 720px;
}

.bytes span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease, opacity 100ms ease;
}

.bytes span.f-sync { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.bytes span.f-flags { background: color-mix(in oklab, var(--stamp) 26%, var(--paper)); color: var(--ink); border-color: var(--stamp); }
.bytes span.f-pid { background: color-mix(in oklab, var(--amber) 24%, var(--paper)); color: var(--ink); border-color: var(--amber); }
.bytes span.f-af { background: color-mix(in oklab, var(--ink-2) 18%, var(--paper)); color: var(--ink); }
.bytes span.f-pcr { background: color-mix(in oklab, var(--amber) 42%, var(--paper)); color: var(--ink); border-color: var(--amber); }
.bytes span.f-payload { background: var(--paper); }

.bytes span.on {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  color: var(--ink);
}

.bytes span.lit {
  border-color: var(--amber);
  color: var(--ink);
}

.bytes span.dim {
  opacity: 0.35;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: default;
}

.legend li[data-field]:hover {
  color: var(--ink);
}

.legend i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--rule);
  flex: none;
}

/* The API reference. */
.api-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
  padding-block: 34px 0;
}

.api-side {
  position: sticky;
  top: 22px;
}

.filter {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid color-mix(in oklab, var(--ink) 27%, transparent);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
  box-shadow: 2px 2px 0 color-mix(in oklab, var(--ink) 8%, transparent);
}

.filter::placeholder {
  color: var(--muted);
}

.filter:focus {
  border-color: var(--amber);
}

.api-side nav {
  margin-top: 18px;
  border-left: 1px solid var(--rule);
  padding-left: 14px;
  font-size: 13px;
}

.api-side a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}

.api-side a:hover {
  color: var(--amber);
}

.api-side a:hover {
  color: var(--amber);
}

.api-side a span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.api-body {
  min-width: 0;
}

.pkg {
  padding-bottom: 26px;
  scroll-margin-top: 18px;
}

.pkg > h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 4px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}

.pkg > h2 span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pkg > p {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 14px;
  max-width: 70ch;
}

.entry {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--rule-soft);
}

.entry:last-child {
  border-bottom: 0;
}

.entry .sig {
  display: block;
  overflow-x: auto;
  white-space: pre;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink);
}

.entry .sig .kw {
  color: var(--amber);
}

.entry .sig .ty {
  color: var(--ink-2);
}

.entry .doc {
  margin: 8px 0 0;
  max-width: 72ch;
  font-size: 14px;
  color: var(--ink-2);
}

.entry .doc p {
  margin: 0 0 6px;
}

.entry .doc code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 0 3px;
}

.entry .kind,
.group .kind {
  display: inline-block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry.method {
  padding: 10px 0 2px;
  border-bottom: 0;
}

.group {
  margin-top: 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.fields {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
}

.fields li {
  display: grid;
  grid-template-columns: 176px minmax(0, 150px) minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
  padding: 3px 0;
}

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

.fields li span {
  color: var(--muted);
}

.fields li em {
  font-style: normal;
  color: var(--muted);
  font-size: 11.5px;
}

@media (width <= 620px) {
  .fields li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .fields li em {
    grid-column: 1 / -1;
  }
}

.variants {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
}

.variants li {
  padding: 2px 0;
}

.variants li em {
  font-style: normal;
  color: var(--muted);
  font-family: var(--ui);
  font-size: 12.5px;
  margin-left: 8px;
}

.empty {
  padding: 20px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

@media (width <= 1020px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .num:nth-child(4) {
    border-left: 0;
    padding-left: 0;
  }
  .num:nth-child(n + 4) {
    border-top: 1px solid var(--rule-soft);
  }
}

@media (width <= 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .record {
    display: none;
  }
  .demo-body,
  .install,
  .teaser,
  .layout,
  .api-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .toc,
  .api-side {
    position: static;
  }
  .toc {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    border-left: 0;
    padding-left: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 12px;
  }
  .toc p {
    width: 100%;
    margin-bottom: 2px;
  }
  .toc a {
    padding: 2px 0;
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .section-head p {
    text-align: left;
    max-width: 52ch;
  }
  .log {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .log textarea {
    min-height: 240px;
  }
  .numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .num:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .num:nth-child(n + 3) {
    border-top: 1px solid var(--rule-soft);
  }
  .site-head {
    flex-wrap: wrap;
    gap: 12px;
  }
  .nav {
    gap: 14px;
    font-size: 10.5px;
  }
  .page-head h1 {
    line-height: 1;
  }
  .teaser {
    padding: 20px;
  }
  .intertitle {
    padding-block: 34px;
  }
}

@media (width <= 520px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .brand span {
    display: none;
  }
  .nav .github span {
    display: none;
  }
  .cues li {
    grid-template-columns: 2em 4.6em minmax(0, 1fr);
  }
  .cues li .parts {
    display: none;
  }
  .verdict {
    font-size: 10px;
  }
  .bytes span {
    font-size: 8px;
  }
}

@media (width <= 620px) {
  .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tab {
    padding: 9px 6px;
    font-size: 9px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: center;
  }
  .tab:last-child {
    border-right: 0;
  }
  .frames {
    flex-wrap: wrap;
  }
  .reel-frame {
    width: 40px;
    height: 30px;
  }
  .bytes span {
    font-size: 8.5px;
  }
  .panel {
    padding: 18px 14px;
  }
  .readout div:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.frame:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* The page scroll bar shows while the page moves or under the pointer and
   hides a moment after; it keeps its place, so nothing shifts. */
@supports selector(::-webkit-scrollbar) {
  html:not(.scrolling)::-webkit-scrollbar-thumb { background: transparent; border-color: transparent; box-shadow: none; }
}
@supports not selector(::-webkit-scrollbar) {
  html:not(.scrolling) { scrollbar-color: transparent transparent; }
}