/* Syntelea v5 core: tokens, base, page shell (tabs, slide-in pages, Platform sub-pages) and the shared components.
   Section styles live in assets/css/v5/*.css, each scoped to its own prefix.

   v5 is v3 in the look of the films, the X banner and the logo ("paper studio", animation/cinema/ENGINE.md): a paper
   field, warm greys, ink type and hairlines, orange #FE6005 for the key element inside figures; Newsreader headlines
   and italic captions, Figtree text, JetBrains Mono for data and code; a barely visible paper grain. Bright, not
   sombre (the owner, 2026-11-05: "the site must not look depressing"): the pages take the logo orange and its tints,
   white and one ink page; the logo orange never fills a page or sits behind text (it was "too garish" as a page), so
   Prove carries it on its tab and top bar; the home sections alternate paper and white. The token names stay those of v3, so
   every module follows the new values; the blue names now hold the warm grey ramp.

   Shared components (exact class names; reference in the components note, markup in the plan):
     type      h2 · .h2s · h3/.h3 · h4/.h4 · .lead · .small · .fnote · .slabel · .k (.mini .chip-k) · .tag (.badge) · .data · .num-m · .num-l
     layout    .page-head · .block · .block.ruled · .psub-first · .mod-head/.mod-id · .sheet(.flush .planned .dark .lg) · .sheet-head · .figbox/.fig/.ctl
     readout   .readout(--n) · .rd-cell(.hot .idle) · .rd-v(.mono .dim) · .rd-bar · .meter(.zero .ph) · .rd-note · .ph-cell · .stats/.stat · .verdict(.ok .bad)
     controls  .btn(.ghost) · .act(.replay) · .stepper · .ftabs · .drop · .opts(.row .col)/.opt · .switch · .range · .close
     marks     .tag.fn-* .tag.ph-* · .st(.dev .planned) .tier-0..3 .cstat(.proven .signed .assumed) · .key · .cmark(.proven .no .assumed) · .syn-chip · .note(.limit) · details.sources
     motion    @keyframes v3-in v3-flash v3-fill v3-draw · .a-in .a-fill .a-steps .a-draw .a-flash · .rv .rv-1 .rv-2
   Modules use these as they are. A module never restyles a shared component (no heading or label sizes, button styles,
   tints, shadows, radii or entrance keyframes of its own); a pattern that is missing gets added here. */

/* Fonts: assets/css/fonts.css (Figtree) and assets/css/v5/fonts.css (Newsreader, JetBrains Mono), served from this site. */

/* ======================================================================
   Tokens
   ====================================================================== */
:root {
  /* Colour */
  /* The films' palette (animation/cinema/src/palette.js) */
  --ink: #111; --white: #fff; --paper: #f3f2ec; --paper-far: #eae7de; --bg: #f3f2ec;
  --g1: #e3e0d6; --g2: #d6d2c6; --g3: #bdb8aa; --shadow: #8f8a7e; --dark: #3b3933; --orange: #fe6005;
  /* v3 names, now the warm ramp from ink to the palest grey (modules use them for marks and fills) */
  --blue-900: #111111; --blue-700: #3b3933; --blue-500: #8a857a; --blue-300: #bdb8aa; --blue-100: #e3e0d6;
  --signal: #fe6005;        /* fills and marks only: the one key element */
  --signal-ink: #b14705;    /* orange text on any light background (4.8:1 on --signal-tint, 5:1 on paper) */
  --signal-tint: #ffeadf;   /* limit / warning backgrounds */
  --soft: #f3f2ec;          /* control columns and bars inside white sheets (the paper tint) */
  --sel: #e3e0d6;           /* selected, hover, drop-over, flash */
  --line: #e3e0d6;          /* hairlines inside sheets, empty meter cells */
  --line-2: #d6d2c6;        /* inputs, hollow squares, no-call records */
  --dash: #a8a396;          /* dashed strokes: planned or assumed */
  --rule: rgba(17, 17, 17, .2);
  --muted: #5f5b52;         /* secondary text and labels */
  --tone: #111;             /* second half of a heading (set in italic), action links, proven marks */
  --meter-off: var(--line); --meter-on: #111;
  --focus: #111;            /* keyboard focus ring: ink on light fields (orange on paper is only 2.7:1); orange on ink */
  --btn-bg: #111; --btn-fg: #f3f2ec; --btn-hover: #3b3933;
  /* Pages: the logo's colours in v3's roles: a pale peach, the logo orange (Prove: its tab and the page's top bar;
     the page itself is paper), ink (Verify), a light apricot, the palest warm grey and white. Text is ink on all but
     Verify. */
  --c-how: #ffeadf;     --c-how-ink: #111;
  --c-prove: #fe6005;   --c-prove-ink: #111;
  --c-verify: #111111;  --c-verify-ink: #f3f2ec;
  --c-explore: #ffd3bd; --c-explore-ink: #111;
  --c-platform: #eae7de; --c-platform-ink: #111;
  --c-about: #ffffff;   --c-about-ink: #111;
  /* Data scale: phenotype and allele function (marks only). Faster to slower runs dark grey to light grey, then
     the two oranges for reduced and no function: text on them is ink, on the darkest one paper. */
  --ph-um: #3b3933; --ph-rm: #8a857a; --ph-nm: #bdb8aa; --ph-im: #ffa36b; --ph-pm: #fe6005;
  --fn-inc: var(--ph-um); --fn-norm: var(--ph-nm); --fn-dec: var(--ph-im); --fn-no: var(--ph-pm);
  /* Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --sec: clamp(96px, 12vh, 144px);     /* top and bottom of every home section and side page */
  --block: clamp(64px, 9vh, 96px);     /* between blocks inside a page */
  --tab: 56px;
  --pad: clamp(20px, 4vw, 64px);
  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);     /* entering, settling */
  --ease-io: cubic-bezier(.65, 0, .35, 1); /* travelling A to B */
  --t1: 160ms; --t2: 320ms; --t3: 560ms; --t4: 900ms; --t-page: 850ms;
  /* Type */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;   /* headlines, big numbers, italic captions (the films' titles) */
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;     /* data and code lines only (the films' code lines) */
}

/* Dark pages and blocks: one token context. White sheets inside them go back to the light values. */
.on-dark, .c-verify, .sheet.dark, .c-prove .pv-res {
  --muted: rgba(243, 242, 236, .72); --line: rgba(243, 242, 236, .22); --line-2: rgba(243, 242, 236, .38);
  --rule: rgba(243, 242, 236, .22); --tone: #f3f2ec; --meter-off: rgba(243, 242, 236, .2); --meter-on: #f3f2ec; --focus: #fe6005;
  --btn-bg: #f3f2ec; --btn-fg: #111; --btn-hover: #e3e0d6;
}
/* Prove: the logo orange is the page's top bar (the sticky close bar) and its tab; the heading, the step strip and
   everything else sit on the site's paper, like the home header (the owner, 2026-11-05: keep the bright orange, but
   not across the whole screen, and the text on the site's own colour). The close button on the bar is ink, with an
   ink focus ring. */
.c-prove .pbar { background: var(--c-prove); --focus: var(--ink); }
/* The results (every record as a square, the Merkle tree, the proving clock, the certificate) sit on an ink panel:
   they keep the ink-page look they were drawn for, and their orange marks stay clear. */
.c-prove .pv-res { background: var(--ink); color: var(--paper); padding: clamp(20px, 3vw, 40px); }
/* Platform's warm grey keeps its secondary text a little darker (about 6:1). White sheets go back to the light values. */
.c-platform { --muted: rgba(17, 17, 17, .7); }
.on-light, .sheet:not(.dark), .card, .figbox, .tag, .badge, .opt, .drop {
  --muted: #5f5b52; --line: #e3e0d6; --line-2: #d6d2c6; --rule: rgba(17, 17, 17, .2); --tone: #111;
  --meter-off: #e3e0d6; --meter-on: #111; --focus: #111;
  --btn-bg: #111; --btn-fg: #f3f2ec; --btn-hover: #3b3933;
}

/* v5: native checkboxes, radios and range thumbs in ink, not the browser's blue; a soft ink tap flash on phones;
   placeholders in the muted tone; code in the data face. */
:root { accent-color: var(--ink); }
html { -webkit-tap-highlight-color: rgba(17, 17, 17, .08); }
::placeholder { color: var(--muted); opacity: 1; }
code { font-family: var(--mono); font-size: .9em; }

/* ======================================================================
   Base
   ====================================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
::selection { background: #ffd3bd; color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg .g2 { fill: var(--g2, var(--signal)); }   /* second tone inside a pixel glyph */
svg .g3 { fill: var(--g3, var(--blue-500)); }

.page { margin-right: calc(var(--tab) * 6); }
.wrap { max-width: 1120px; padding-left: var(--pad); padding-right: var(--pad); }
.wrap.wide { max-width: 1320px; }
p { max-width: 46em; }

/* ---------- Type scale ---------- */
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 5vw, 80px); line-height: 1.02; letter-spacing: -0.012em; margin: 0 0 24px; max-width: 18ch; }
.h2s { font-family: var(--display); font-weight: 400; font-size: clamp(31px, 3.5vw, 50px); line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 24px; max-width: 20ch; }
h3, .h3 { font-family: var(--display); font-weight: 400; font-size: clamp(25px, 2.3vw, 31px); line-height: 1.12; letter-spacing: -0.006em; }
h3 { margin: 48px 0 12px; }
.h3 { margin: 0 0 12px; }
h4, .h4 { font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.005em; margin: 0 0 8px; }
h2 .tone, .h2s .tone, h3 .tone { color: var(--tone); font-style: italic; }   /* the films' italic caption voice */
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 38em; margin: 0 0 48px; }
.small { font-size: 15px; line-height: 1.45; color: var(--muted); }
.fnote { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 62em; margin: 16px 0 0; }
.fnote a { color: inherit; }
/* Section label: the films' label, a hairline leader then Figtree caps. Home sections carry a number, side pages words only. */
.slabel { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-family: var(--font); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.slabel::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }
/* Small label (Figtree caps): dt, figcaption, column heads, control-group labels. .mini keeps its old 8px bottom margin. */
.k:not(svg *), .mini, .chip-k { font-family: var(--font); font-weight: 500; font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.mini { margin: 0 0 8px; }
.data { font-family: var(--mono); font-size: 12.5px; line-height: 1.4; letter-spacing: 0; }
.num-m { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.num-l { font-family: var(--display); font-weight: 400; font-size: 52px; line-height: .9; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }

/* ======================================================================
   Sections and page backgrounds
   ====================================================================== */
.sec { padding: var(--sec) 0; }
.white { background: var(--paper); }
.soft { background: var(--white); }   /* alternating home sections: white between the paper ones */
.c-how { background: var(--c-how); color: var(--ink); }
.c-prove { background: var(--paper); color: var(--ink); }   /* the orange is its tab and top bar (above) */
.c-verify { background: var(--c-verify); color: var(--c-verify-ink); }
.c-explore { background: var(--paper); color: var(--ink); }
.c-platform { background: var(--c-platform); color: var(--ink); }
.c-about { background: var(--c-about); color: var(--ink); padding-bottom: 0; }
.band-blue { background: var(--white); color: var(--ink); }   /* v5: home section 06, white like the other light sections (bright, not an ink field) */
.on-dark { color: var(--paper); }

/* ======================================================================
   Pages that slide in over the home page
   ====================================================================== */
.panel { position: fixed; top: 0; bottom: 0; left: 0; right: calc(var(--tab) * 6); z-index: 20; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(calc(100% + var(--tab) * 6)); transition: transform var(--t-page) var(--ease); }
.panel.open { transform: none; }
.panel:focus { outline: none; }
.panel.sec { padding-top: 0; }
/* Opaque bar at the top of each page: content scrolls under it, so Close never sits on text. */
.pbar { position: sticky; top: 0; z-index: 15; display: flex; justify-content: flex-end; align-items: center; height: 64px; padding: 0 18px; margin-bottom: clamp(16px, 5vh, 46px); background: inherit; }
/* Close: a hairline frame with the films' label type (Figtree caps, tracked); the pixel cross turns slowly on hover. */
.close { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 14px 9px 12px; background: transparent; border: 1px solid currentColor; color: inherit; cursor: pointer; font-family: var(--font); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; transition: background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.close svg { width: 11px; height: 18px; fill: currentColor; transition: transform .5s var(--ease); }
.close:hover svg { transform: rotate(90deg); }
.c-verify .close:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.c-prove .close:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.c-how .close:hover, .c-platform .close:hover, .c-about .close:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Explore: a warm-grey bar over the paper page. Close is a white block with ink text; the focus ring is ink on the bar. */
.c-explore .pbar { background: var(--c-explore); margin-bottom: 0; --focus: var(--ink); }
.c-explore .close { background: var(--white); border-color: var(--white); color: var(--ink); }
.c-explore .close:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body.locked { overflow: hidden; }
/* Anything a link scrolls to inside a page lands below the sticky top bar. */
.panel [id] { scroll-margin-top: 76px; }

/* ---------- Hero (shell; the readouts, lens and helix live in hero.css) ---------- */
.hero { min-height: 100vh; min-height: 100svh; padding: var(--pad); display: flex; flex-direction: column; position: relative; }
.mark { display: inline-flex; gap: 12px; align-items: flex-start; text-decoration: none; font-weight: 500; font-size: 17px; line-height: 1.2; width: fit-content; }
.mark img { margin-top: 2px; }
/* The Q.E.D. wordmark: its x-height band sits in the middle of the image box, so centring lines it up with the label. */
.mark:has(.mark-word) { align-items: center; gap: 14px; }
.mark-word { display: block; flex: none; width: auto; height: 23px; margin: 0 !important; }
.mark-word + span { padding-left: 14px; border-left: 1px solid var(--line-2); font-size: 14px; font-weight: 400; color: var(--muted); }
/* On phones the label goes under the wordmark so the pair stays clear of the hero helix. */
@media (max-width: 640px) {
  .mark:has(.mark-word) { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mark-word + span { padding-left: 0; border-left: 0; }
}
.field { display: block; width: calc(100% + 2 * var(--pad)); max-width: none; height: clamp(360px, 70vh, 780px); margin: calc(-1 * var(--pad) - 42px) calc(-1 * var(--pad)) clamp(12px, 3vh, 32px); position: relative; z-index: 0; pointer-events: none; }
.hero .mark { position: relative; z-index: 1; }
.statement { margin: auto 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -0.014em; max-width: none; }   /* v5: the four .ln lines set the breaks (17ch left "DNA." alone in Newsreader) */
.statement .ln { display: block; overflow: hidden; padding-bottom: .07em; }
.statement .ln > span { display: inline-block; text-wrap: balance; }
.hero-foot { margin-top: clamp(28px, 5vh, 52px); display: flex; gap: 32px; align-items: baseline; flex-wrap: wrap; }
.cta { font-size: 19px; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.cta:hover { color: var(--signal-ink); }

/* ---------- Tabs ---------- */
.tabs { position: fixed; top: 0; right: 0; bottom: 0; display: flex; z-index: 30; }
.tab { width: var(--tab); padding: 0 0 22px; display: flex; align-items: flex-end; justify-content: center; text-decoration: none; transition: filter .2s ease; }
.tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 16px; font-weight: 500; white-space: nowrap; }
.tab:hover { filter: brightness(.94); }
.tab.on span { text-decoration: underline; text-underline-offset: 5px; }
.t-how { background: var(--c-how); color: var(--c-how-ink); }
.t-prove { background: var(--c-prove); color: var(--c-prove-ink); }
.t-verify { background: var(--c-verify); color: var(--c-verify-ink); }
.t-explore { background: var(--c-explore); color: var(--c-explore-ink); }
.t-platform { background: var(--c-platform); color: var(--c-platform-ink); }
.t-about { background: var(--c-about); color: var(--c-about-ink); }
.tab:focus-visible { outline-offset: -4px; }
.t-verify:focus-visible { --focus: var(--paper); }
.t-prove:focus-visible { --focus: var(--ink); }

/* ======================================================================
   Motion: reveal on scroll, the four shared keyframes and their utilities
   ====================================================================== */
/* The films' dissolve: opacity with a small rise, unhurried (about 1.3× the v3 timings). */
.rv { opacity: 0; transform: translateY(12px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-1 { transition-delay: 100ms; }
.rv-2 { transition-delay: 200ms; }
@keyframes v3-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes v3-flash { from { background: var(--sel); } }
@keyframes v3-fill { from { clip-path: inset(0 100% 0 0); } }
@keyframes v3-draw { from { stroke-dashoffset: var(--len); } }
/* --i: index inside a figure (75ms stagger, capped at 8 items); --delay, --dur, --steps, --len tune one element. */
.a-in { animation: v3-in var(--dur, 720ms) var(--ease) both; animation-delay: calc(var(--delay, 0ms) + min(var(--i, 0), 7) * 75ms); }
.a-fill { animation: v3-fill var(--dur, 420ms) var(--ease) both; animation-delay: var(--delay, 0ms); }
.a-steps { animation: v3-fill var(--dur, 360ms) steps(var(--steps, 7), end) both; animation-delay: var(--delay, 0ms); }
.a-draw { stroke-dasharray: var(--len); animation: v3-draw var(--dur, 720ms) var(--ease) both; animation-delay: var(--delay, 0ms); }
.a-flash { animation: v3-flash 1.5s var(--ease); }

/* ---------- Intro (plays once on load) ---------- */
.intro .tab { transform: translateY(102%); animation: tabin .8s var(--ease) forwards; }
.intro .tab:nth-child(1) { animation-delay: .15s; } .intro .tab:nth-child(2) { animation-delay: .25s; }
.intro .tab:nth-child(3) { animation-delay: .35s; } .intro .tab:nth-child(4) { animation-delay: .45s; } .intro .tab:nth-child(5) { animation-delay: .55s; } .intro .tab:nth-child(6) { animation-delay: .65s; }
@keyframes tabin { to { transform: none; } }
.intro .statement .ln > span { transform: translateY(105%); animation: linein .9s var(--ease) forwards; }
.intro .statement .ln:nth-child(1) > span { animation-delay: .5s; } .intro .statement .ln:nth-child(2) > span { animation-delay: .6s; }
.intro .statement .ln:nth-child(3) > span { animation-delay: .7s; } .intro .statement .ln:nth-child(4) > span { animation-delay: .8s; }
@keyframes linein { to { transform: none; } }
.intro .mark, .intro .hero-foot { opacity: 0; animation: fade .8s ease forwards; }
.intro .mark { animation-delay: .1s; } .intro .hero-foot { animation-delay: 1.4s; }
@keyframes fade { to { opacity: 1; } }

/* ======================================================================
   Layout components
   ====================================================================== */
.page-head > :last-child { margin-bottom: 48px; }

/* Module head (M1–M10, Modules list, Plan demos): ID, label, title, one line, at most two tags.
   The ID is a Newsreader numeral like the films' titles; its column is fixed (fits "M10") so every title starts on the same edge. */
.mod-head { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; padding-top: 32px; border-top: 1px solid var(--rule); }
.mod-id { grid-row: span 3; font-family: var(--display); font-weight: 400; font-size: 42px; line-height: .9; letter-spacing: -.025em; font-variant-numeric: lining-nums; color: var(--tone); white-space: nowrap; }
.mod-head .k { grid-column: 2; }
.mod-head h3, .mod-head .h3 { grid-column: 2; margin: 0; }
.mod-head p:not(.k) { grid-column: 2; margin: 0; font-size: 17px; color: var(--muted); }
.mod-head .tags { grid-column: 3; grid-row: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Sheet: the one white surface (cards, boxes, figure frames): white card on paper, a hairline, no shadow, no radius. */
.sheet, .card { background: var(--white); color: var(--ink); border: 1px solid var(--line); padding: 24px; }
.sheet.flush { padding: 0; }
.sheet.planned { border-style: dashed; border-color: var(--dash); }
.sheet.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.sheet-head > * { margin: 0; }
.sheet-head .tags, .sheet-head .end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sheet > :last-child { margin-bottom: 0; }

/* Figure + control column, for interactive figures. */
.figbox { display: grid; grid-template-columns: minmax(0, 1fr) 320px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.figbox > .fig { padding: 24px; min-width: 0; position: relative; }
.figbox > .ctl { border-left: 1px solid var(--line); background: var(--soft); padding: 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ctl .k { margin: 0 0 8px; }
.ctl .mini { margin: 0 0 8px; }

/* ======================================================================
   Readout family (the hero's cells, shared)
   ====================================================================== */
/* A hairline over each cell (orange for the one hot cell), the label in the films' Figtree caps, data in mono. */
.readout { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.rd-cell { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid currentColor; padding-top: 9px; transition: border-color var(--t2) var(--ease); }
.rd-cell.hot { border-top-color: var(--signal); }
.rd-cell.idle { border-top-color: var(--line-2); }
.rd-cell > dt, .rd-cell .rd-k { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rd-cell > dd { margin: 0; }
.rd-cell .rd-v { flex: 1; margin: 5px 0 9px; font-size: 15.5px; line-height: 20px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-cell .rd-v.mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.rd-cell .rd-v.dim { color: var(--muted); }
.rd-cell .rd-bar { display: flex; align-items: center; gap: 10px; margin: 0; }
.meter { flex: 1; min-width: 0; display: flex; gap: 2px; height: 6px; }
.meter > i { flex: 1 1 0; background: var(--meter-off); }
.meter > i.on { background: var(--meter-on); }
.meter.zero > i { flex: 0 0 6px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.rd-note { font-family: var(--font); font-size: 11px; line-height: 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

/* Phenotype cell: gene, phenotype, diplotype or rule version, a five-step track PM IM NM RM UM with one step lit. */
.ph-cell .ph-v { flex: 1; margin: 5px 0 4px; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.ph-cell .data { margin: 0 0 9px; color: var(--muted); }
.ph-cell .ph-chk { width: 14px; height: 14px; flex: none; color: var(--tone); }
.meter.ph > i.on { background: var(--c, var(--meter-on)); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }   /* the lit step: an outlined data mark, as in the films */
.meter.ph.ind > i { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }

/* Headline numbers: Newsreader numerals (the films' titles) over a hairline */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin: 0; }
.stat { border-top: 1px solid currentColor; padding-top: 12px; min-width: 0; }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums; }
.stat b small { font-family: var(--font); font-size: .36em; margin-left: 5px; letter-spacing: .02em; }
.stat .k { margin: 10px 0 4px; }
.stat p:not(.k) { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Verdict band: one line across the sheet; wipes in when it gets .ok or .bad (V3.restart replays it).
   Valid: ink field, paper text. Rejected: the orange field, ink text. */
.verdict { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px; margin: 0; font-size: 17px; line-height: 1.3; }
.verdict.ok { background: var(--ink); color: var(--paper); --focus: var(--paper); }
.verdict.bad { background: var(--signal); color: var(--ink); --focus: var(--ink); }
/* v5: on an ink field (the Verify page, the Prove results panel) the valid band is paper with ink type, else it would be
   ink on ink; inside a white sheet on those pages it is ink again. */
:is(.on-dark, .c-verify, .sheet.dark, .c-prove .pv-res) .verdict.ok { background: var(--paper); color: var(--ink); --focus: var(--ink); }
:is(.on-dark, .c-verify, .sheet.dark, .c-prove .pv-res) :is(.sheet:not(.dark), .card, .figbox, .on-light) .verdict.ok { background: var(--ink); color: var(--paper); --focus: var(--paper); }
.verdict.ok, .verdict.bad { animation: v3-fill 560ms var(--ease) both; }
.verdict svg { width: 14px; height: 14px; flex: none; }

/* ======================================================================
   Controls
   ====================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--btn-bg); border-radius: 0; background: var(--btn-bg); color: var(--btn-fg);
  font: 500 15px/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer; transition: background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--btn-bg); border-color: var(--btn-bg); }
.btn.ghost:disabled:hover, .btn.ghost[aria-disabled="true"]:hover { background: transparent; color: inherit; border-color: currentColor; }
.btn svg { width: 14px; height: 14px; flex: none; }

/* Action link: a text action in the films' label type (Figtree caps, tracked) on a hairline. At least 24px tall; the text sits on the rule. */
.act { display: inline-flex; align-items: flex-end; gap: 6px; min-height: 24px; padding: 6px 0 3px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: none; color: var(--tone);
  font-family: var(--font); font-weight: 500; font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color var(--t2) var(--ease); }
.act:hover { color: inherit; }
.act .arr { margin-left: 0; }
.act svg { width: 14px; height: 14px; flex: none; }
.acts { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }

/* Stepper: Back · 1 / 6 · Next */
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper .n { margin: 0 auto; font-family: var(--font); font-weight: 500; font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Figure tabs */
.ftabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ftabs::-webkit-scrollbar { display: none; }
.ftabs > button, .ftabs > [role="tab"] { padding: 14px 18px; text-align: left; background: var(--soft); color: var(--muted); border: 0; border-top: 2px solid transparent; border-radius: 0; font: 400 15px/1.3 var(--font); cursor: pointer; transition: background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.ftabs > button:hover, .ftabs > [role="tab"]:hover { color: var(--ink); }
.ftabs b { font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: .08em; font-variant-numeric: tabular-nums; margin-right: 8px; }
.ftabs [aria-selected="true"] { background: var(--white); color: var(--ink); border-top-color: var(--ink); }
.ftabs > :focus-visible { outline-offset: -3px; }

/* Drop zone: a solid hairline frame, never dashed. */
.drop { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 32px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); cursor: pointer; transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.drop:hover, .drop.over { border-color: var(--ink); background: var(--sel); }

/* Options (aria-pressed): white cards with a hairline; the picked one takes an ink frame on the palest warm grey. */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opts.col { grid-template-columns: 1fr; }
.opts.row { display: flex; flex-wrap: wrap; }
.opt { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line-2); border-radius: 0; background: var(--white); color: var(--ink); padding: 9px 12px; cursor: pointer; font-size: 14px; line-height: 1.3; transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease); }
.opt small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed="true"], .opt[aria-selected="true"] { border-color: var(--ink); background: var(--sel); }
.opt[aria-pressed="true"] small, .opt[aria-selected="true"] small { color: var(--ink); }

/* Switch (role="switch", aria-checked): square track and knob */
.switch { display: flex; align-items: center; gap: 10px; min-height: 24px; cursor: pointer; font-size: 14px; background: none; border: 0; padding: 0; text-align: left; }
.switch i { width: 32px; height: 16px; border-radius: 0; background: var(--line-2); position: relative; flex: none; transition: background var(--t2) var(--ease); }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 0; background: var(--white); transition: transform var(--t3) var(--ease); }
.switch[aria-checked="true"] i { background: var(--ink); }
.switch[aria-checked="true"] i::after { transform: translateX(16px); }

/* Range: a 2px flat track and a square ink thumb (no round controls). */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; accent-color: var(--ink); }
.range::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); border: 0; border-radius: 0; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -6px; border: 0; border-radius: 0; background: var(--ink); transition: background var(--t2) var(--ease); }
.range::-moz-range-track { height: 2px; background: var(--line-2); border: 0; border-radius: 0; }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 0; background: var(--ink); transition: background var(--t2) var(--ease); }
.range:hover::-webkit-slider-thumb { background: var(--dark); }
.range:hover::-moz-range-thumb { background: var(--dark); }
.range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.range:disabled { opacity: .4; cursor: default; }

/* Arrow inside buttons and links: the only hover nudge. */
.arr { display: inline-block; margin-left: 8px; transition: transform var(--t1) var(--ease); }
a:hover .arr, button:hover .arr { transform: translate(2px, -2px); }

/* ======================================================================
   Marks
   ====================================================================== */
/* Tag: ink label (Figtree caps) on white; the colour lives only in the 7px square (--mk), outlined in ink like the films' atoms. */
.tag, .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-weight: 500; font-size: 10.5px; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); white-space: nowrap; vertical-align: middle; }
.tag::before, .badge::before { content: ""; width: 7px; height: 7px; background: var(--mk, currentColor); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); flex: none; }
.tag.plain::before { content: none; }
.tag[class*="fn-"], .tag[class*="ph-"] { background: var(--white); color: var(--ink); }   /* wins over any module's own .fn-* chip */
.tag.fn-no, .tag.ph-pm { --mk: var(--ph-pm); }
.tag.fn-dec, .tag.ph-im { --mk: var(--ph-im); }
.tag.fn-norm, .tag.ph-nm { --mk: var(--ph-nm); }
.tag.ph-rm { --mk: var(--ph-rm); }
.tag.fn-inc, .tag.ph-um { --mk: var(--ph-um); }
.tag.ph-ind::before, .tag.fn-unk::before { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tag.hot { border-color: var(--signal); }
/* Biology tier: how strong the evidence is */
.tier-0 { --mk: var(--ink); }                 /* T0 · Rule */
.tier-1 { --mk: var(--blue-900); }            /* T1 · Measurement */
.tier-2 { --mk: var(--blue-500); }            /* T2 · Model + controls */
.tier-3 { border-style: dashed; border-color: var(--dash); }   /* T3 · Hypothesis */
.tier-3::before { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
/* Cryptography: what backs the run */
.cstat.proven { --mk: var(--blue-900); }      /* Jolt proof */
.cstat.signed::before { clip-path: polygon(0 100%, 100% 0, 100% 100%); box-shadow: none; }
.cstat.assumed { border-style: dashed; border-color: var(--dash); }
.cstat.assumed::before { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
/* Availability: In development · Planned (built items carry no mark). .now and .research are older names for .dev and .planned. */
.st.dev, .st.now { --mk: var(--ink); }
.st.planned::before, .st.research::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Legend row under a figure: the films' labels (Figtree caps); filled swatches take a fine ink outline. */
.key:not(svg *) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-family: var(--font); font-weight: 500; font-size: 10.5px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.key:not(svg *) > * { margin: 0; }
.key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--mk, currentColor); }
:where(.key i:not([class])) { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }   /* plain swatches only, zero specificity: a module's own swatch rule always wins */
.key i.line { width: 14px; height: 2px; vertical-align: 3px; }
.key i.dash { background: none; border: 1px dashed var(--dash); }
.key i.hollow { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* Claim marks: replace every ✓ ✕ ? character */
.cmark { display: inline-block; width: 10px; height: 10px; flex: none; vertical-align: -1px; background: var(--tone); }
.cmark.no { background: none; box-shadow: inset 0 0 0 1.5px var(--signal); }
.cmark.assumed { background: none; border: 1px dashed var(--muted); }

/* Synthetic-data chip, top right of every figure that uses sample data */
.syn-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 4px 8px; background: var(--white); border: 1px solid var(--ink); color: var(--ink); font-family: var(--font); font-weight: 500; font-size: 10.5px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.syn-chip::before { content: ""; width: 6px; height: 6px; background: var(--signal); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); flex: none; }

/* Notes: a hairline bar, orange for a limit */
.note { border-left: 2px solid var(--tone); padding: 4px 0 4px 16px; margin: 0; font-size: 15px; line-height: 1.45; }
.note.limit { border-left-color: var(--signal); }

/* Sources: one wording everywhere ("Sources · N"), a pixel +/− marker, the label in Figtree caps */
details.sources { margin: 24px 0 0; }
details.sources > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; padding: 4px 0; cursor: pointer; list-style: none; font-family: var(--font); font-weight: 500; font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color var(--t2) var(--ease); }
details.sources > summary::-webkit-details-marker { display: none; }
details.sources > summary::before { content: ""; width: 9px; height: 9px; flex: none;
  background: linear-gradient(currentColor, currentColor) center / 9px 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 9px no-repeat; }
details.sources[open] > summary::before { background: linear-gradient(currentColor, currentColor) center / 9px 3px no-repeat; }
details.sources > summary:hover { color: inherit; }
details.sources ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: src; font-size: 13px; line-height: 1.5; max-width: 62em; }
details.sources ol > li { counter-increment: src; display: grid; grid-template-columns: 26px minmax(0, 1fr); margin: 0 0 6px; }
details.sources ol > li::before { content: counter(src, decimal-leading-zero); font-family: var(--font); font-weight: 500; font-size: 11px; line-height: 19.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--muted); }
details.sources a { color: inherit; overflow-wrap: anywhere; }

/* ---------- Block divider: the only section divider inside a page (after the components, so it wins over their margins) ---------- */
.block { margin-top: var(--block); }
.block.ruled { border-top: 1px solid var(--rule); padding-top: 48px; }
/* The router marks the first block of the open Platform sub-page (and its module wrapper): no gap, no orphan rule above it. */
.psub-first, .psub-first > :first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

/* ======================================================================
   Platform: a page index in the top bar, one sub-page at a time
   ====================================================================== */
.psub-off { display: none !important; }
.psub-h:focus { outline: none; }   /* a sub-page heading that received focus after Previous / Next */
.c-platform .pbar { gap: 16px; padding-left: calc(var(--pad) - 8px); }
.c-platform .pbar .close { flex: none; }   /* only the index shrinks (and scrolls); Close keeps its size */
.psub { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.psub::-webkit-scrollbar { display: none; }
.psub.more-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.psub.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.psub.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.psub a { flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 8px; font-size: 14px; line-height: 1.2; white-space: nowrap; text-decoration: none; color: inherit; transition: background var(--t2) var(--ease), color var(--t2) var(--ease); }
.psub a b { font-family: var(--font); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.psub a:hover { background: var(--white); }
.psub a.on { background: var(--ink); color: var(--paper); }
.psub a.on b { color: rgba(243, 242, 236, .72); }
.psub a:focus-visible { outline-offset: -2px; }
#pintro, #psubs { transition: opacity var(--t2) ease, transform var(--t3) var(--ease); }
.psub-out #pintro, .psub-out #psubs { opacity: 0; transform: translateX(calc(var(--dir, 1) * -24px)); transition-duration: .18s, .19s; }
.psub-in #pintro, .psub-in #psubs { opacity: 0; transform: translateX(calc(var(--dir, 1) * 48px)); transition: none; }
.pnext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: var(--block); padding-bottom: clamp(40px, 8vh, 80px); }
/* Previous / Next: a hairline card, the label in Figtree caps, the sub-page name as a Newsreader title. */
.pnext a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--ink); text-decoration: none; transition: background var(--t2) var(--ease), color var(--t2) var(--ease); }
.pnext a small { font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color var(--t2) var(--ease); }
.pnext a span { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.01em; }
.pnext a span b { font-family: var(--font); font-weight: 500; font-size: 12px; letter-spacing: .08em; margin-right: 10px; vertical-align: 4px; }
.pnext .pn-next { grid-column: 2; align-items: flex-end; text-align: right; }
.pnext a:hover { background: var(--ink); color: var(--paper); }
.pnext a:hover small { color: rgba(243, 242, 236, .72); }

/* ======================================================================
   Responsive
   ====================================================================== */
/* Narrower side tabs on small screens; the Platform index tightens so all nine entries fit. */
@media (min-width: 1001px) and (max-width: 1200px) {
  :root { --tab: 48px; }
  .tab span { font-size: 15px; }
}
@media (min-width: 1001px) and (max-width: 1279px) {
  .c-platform .pbar { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .psub { gap: 0; }
  .psub a { padding: 8px 6px; font-size: 13px; gap: 4px; }
  .psub a b { font-size: 10px; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .c-platform .close { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .c-platform .close span { display: none; }
}
@media (min-width: 1001px) and (max-width: 1100px) {
  .psub a { padding: 8px 4px; font-size: 12.5px; }
}

/* Tablet / mobile: the tabs become a bottom bar */
@media (max-width: 1000px) {
  :root { --tab: 0px; }
  .page { margin-right: 0; margin-bottom: 60px; }
  .tabs { top: auto; left: 0; height: 60px; }
  .tab { flex: 1; width: auto; padding: 0 4px; align-items: center; }
  .tab span { writing-mode: horizontal-tb; transform: none; font-size: 13px; white-space: normal; text-align: center; line-height: 1.1; }
  .panel { right: 0; bottom: 60px; transform: translateY(105%); }
  .pbar { height: 56px; padding: 0 12px; margin-bottom: 16px; }
  .figbox { grid-template-columns: 1fr; }
  .figbox > .ctl { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .close { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .close span { display: none; }
  .statement .ln { display: inline; overflow: visible; }
  .statement .ln > span { display: inline; }
  .intro .statement .ln > span { animation: fade .9s ease .5s forwards; opacity: 0; transform: none; }
  .field { height: 330px; }
  .c-platform .pbar { padding-left: 4px; gap: 8px; }
  .psub a { padding: 8px; font-size: 13px; }
  .pnext { grid-template-columns: 1fr; }
  .pnext .pn-next { grid-column: 1; }
  /* Components */
  .sheet, .card { padding: 16px; }
  .sheet.flush { padding: 0; }
  .figbox > .fig, .figbox > .ctl { padding: 16px; }
  .readout { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); gap: 14px; }
  .rd-cell .rd-v { white-space: normal; font-size: 15px; }   /* wraps; flex:1 keeps meters level across a row */
  .rd-cell .rd-v.mono { font-size: 13px; overflow-wrap: anywhere; }
  .rd-cell .rd-bar { gap: 8px; }
  .ph-cell .ph-v { font-size: 18px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .stat b { font-size: 40px; }
  .mod-head { grid-template-columns: 66px minmax(0, 1fr); gap: 4px 14px; padding-top: 24px; }
  .mod-id { font-size: 31px; }
  .mod-head .tags { grid-column: 2; grid-row: auto; }
  .ftabs { grid-auto-columns: minmax(max-content, 1fr); }
  .ftabs > button, .ftabs > [role="tab"] { padding: 12px 14px; font-size: 14px; }
  .verdict { padding: 12px 16px; }
  .drop { padding: 24px; }
}
@media (min-width: 1001px) {
  .sheet.lg { padding: 32px; }
}
/* Touch: 44px targets for the small text controls. The extra height is a transparent top border (or a pseudo
   element) offset by a negative margin, so nothing moves and the rule under .act stays under its text. */
@media (pointer: coarse) {
  .act { min-height: 44px; border-top: 20px solid transparent; margin-top: -20px; }
  .acts { row-gap: 20px; }
  details.sources > summary { min-height: 44px; margin: -10px 0; }
  .switch { min-height: 44px; margin-top: -10px; margin-bottom: -10px; }
  .range { height: 32px; }
  .range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -11px; }
  .range::-moz-range-thumb { width: 24px; height: 24px; }
  html sup a[href] { position: relative; }
  html sup a[href]::after { content: ""; position: absolute; top: -12px; bottom: -12px; left: -8px; right: -8px; }
}

/* ======================================================================
   Reduced motion: every build shows its end state, nothing loops
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .panel { transition: none !important; }
  .rv, .intro .tab, .intro .statement .ln > span, .intro .mark, .intro .hero-foot { opacity: 1 !important; transform: none !important; }
  #pintro, #psubs { transition: none; }
}

/* The note a mail link shows after it copies the address (assets/js/v3.js). */
.mail-note { position: fixed; left: 50%; bottom: 16px; z-index: 40; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 8px 12px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); font-family: var(--font); font-size: 12.5px; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ======================================================================
   v5: the films' paper grain over the whole page (about ±1.5 % in the films; static here, so it costs one layer)
   ====================================================================== */
body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .066 0 0 0 0 .055 0 0 0 1.1 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; }
@media print { body::after { display: none; } }