/* ===========================================================================
   FluxFlow project page.
   One design system, shared with the film: same type stack, same palette, same
   dark field. The page must read as an extension of the film, not a separate
   artefact.

   Deviations from the frontend baseline, and why:
   - Purple is normally banned. It is kept here because the film already fixed
     violet as its single accent, and page/film consistency outranks the
     baseline. It is used with zero glow and zero gradient.
   - No pure black anywhere: the field is #06080A, the darkest token in the film.
   =========================================================================== */

@font-face { font-family:"Arimo"; src:url("../fonts/arimo-latin-700.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("../fonts/source-serif-4.woff2") format("woff2"); font-weight:200 900; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("../fonts/source-sans-3.woff2") format("woff2"); font-weight:200 900; font-display:swap; }
@font-face { font-family:"Barlow SC"; src:url("../fonts/barlow-sc-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Barlow SC"; src:url("../fonts/barlow-sc-600.woff2") format("woff2"); font-weight:600; font-display:swap; }

:root {
  --field:#06080A;
  --field-2:#0B0F13;
  --field-3:#121820;
  --field-4:#1A222C;
  --starlight:#F4F1E9;
  --moonlight:#A6B0B6;
  --faint:#78828A;
  --dim:#5A646B;
  --rule:rgba(24,36,32,.12);
  --rule-2:rgba(24,36,32,.07);

  --viol:#9B8AE6;
  --viol-dim:#6E63A8;
  --ground:#D9A05B;
  --space:#9CC4E4;
  --ok:#7FB894;

  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --narrow:"Barlow SC", "Source Sans 3", system-ui, sans-serif;
  --mark:"Arimo", Arial, "Helvetica Neue", sans-serif;
  --mono:ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, monospace;

  --maxw:1320px;
  --gutter:clamp(18px, 4.4vw, 64px);
  --bar-h:64px;

  --beat:.418s;
  --e-out:cubic-bezier(.16, 1, .3, 1);
  --e-cout:cubic-bezier(.33, 1, .68, 1);
  --e-inout:cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--field); }
#skybg { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; }
main, .topbar, .footer { position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0;
  background:transparent;
  color:var(--starlight);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

/* The film's paper grain. Fixed and pointer-events:none so it never triggers a
   repaint of a scrolling container. */
body::after {
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.5; mix-blend-mode:plus-lighter;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.055'/></svg>");
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; top:-60px; left:16px; z-index:100; padding:10px 14px; background:var(--starlight); color:var(--field); font:600 14px var(--sans); border-radius:6px; transition:top .2s var(--e-out); }
.skip:focus { top:12px; }

a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--viol); outline-offset:3px; border-radius:4px; }

/* ============================ top bar ============================ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--bar-h);
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:0 var(--gutter);
  transition:background .4s var(--e-out), border-color .4s var(--e-out), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.topbar.is-solid {
  background:rgba(6,8,10,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--rule-2);
}
.brand { display:flex; align-items:center; }
.wm { font-family:var(--mark); font-weight:700; letter-spacing:-.022em; line-height:1; color:var(--starlight); white-space:nowrap; }
.wm-dot { display:inline-block; width:.10em; height:.10em; margin-left:.05em; border-radius:50%; background:var(--starlight); font-style:normal; vertical-align:baseline; }
.brand .wm { font-size:22px; }
.nav { display:flex; gap:clamp(12px,1.6vw,26px); margin-left:auto; }
.nav a { font:500 14px/1 var(--narrow); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:6px 0; position:relative; transition:color .3s var(--e-out); }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--viol); transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--e-out); }
.nav a:hover, .nav a.is-active { color:var(--starlight); }
.nav a.is-active::after { transform:scaleX(1); }
.topbar-links { display:flex; gap:10px; }
.pill {
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--rule); font:500 13px/1 var(--narrow); letter-spacing:.08em; text-transform:uppercase;
  color:var(--moonlight); transition:border-color .3s var(--e-out), color .3s var(--e-out), transform .3s var(--e-out), background .3s var(--e-out);
}
.pill:hover { border-color:rgba(24,36,32,.4); color:var(--starlight); background:rgba(24,36,32,.04); }
.pill:active { transform:translateY(1px); }
.ext { font-size:.9em; opacity:.6; }
.progress { position:absolute; left:0; right:0; bottom:0; height:1px; background:transparent; }
.progress span { display:block; height:100%; width:100%; background:var(--viol); transform:scaleX(var(--p, 0)); transform-origin:0 50%; }

/* ============================ hero ============================ */
.hero {
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--bar-h) + 40px) var(--gutter) clamp(48px,7vh,84px);
  overflow:clip; isolation:isolate;
}
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,8,10,.42) 0%, rgba(6,8,10,0) 24%, rgba(6,8,10,0) 52%, rgba(6,8,10,.72) 84%, var(--field) 100%),
    radial-gradient(120% 78% at 22% 78%, rgba(6,8,10,.80) 0%, rgba(6,8,10,0) 58%);
}
.hero-grid {
  position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(180px,16vw,224px);
  gap:clamp(24px,4vw,72px); align-items:end;
}
.hero-copy { max-width:760px; }

.venue { margin:0 0 clamp(14px,2vh,22px); font:500 13px/1 var(--narrow); letter-spacing:.36em; text-transform:uppercase; color:var(--viol); padding-left:.36em; }
.title { margin:0; font-weight:400; }
.wm--hero { display:inline-block; font-size:clamp(58px, min(10.5vw, 15vh), 168px); line-height:.92; overflow:hidden; padding:.06em .02em .08em; margin:-.06em -.02em -.08em; }
.wm--hero .ch { display:inline-block; transform:translateY(102%); opacity:0; transition:transform calc(var(--beat) * 1.6) var(--e-out), opacity calc(var(--beat) * .7) linear; transition-delay:calc((var(--at) + var(--i) * .07) * var(--beat)); }
.wm--hero .wm-dot { opacity:0; transform-origin:50% 100%; }
.js .hero.is-live .wm--hero .ch { transform:none; opacity:1; }
.js .hero.is-live .wm--hero .wm-dot { opacity:1; animation:land .9s linear both; }
@keyframes land {
  0% { transform:scale(1.28,.72); } 12% { transform:scale(.86,1.16); } 26% { transform:scale(1.08,.93); }
  42% { transform:scale(.97,1.03); } 62% { transform:scale(1.01,.99); } 100% { transform:none; }
}
.subtitle { display:block; margin-top:clamp(12px,2vh,20px); font:400 clamp(18px,2vw,29px)/1.32 var(--serif); color:var(--moonlight); letter-spacing:-.004em; font-optical-sizing:auto; }
.subtitle .line { display:block; overflow:hidden; }
.subtitle .line > span { display:inline-block; transform:translateY(105%); opacity:0; transition:transform calc(var(--beat) * 2.1) var(--e-out), opacity calc(var(--beat) * 1.3) linear; transition-delay:calc(var(--at) * var(--beat)); }
.subtitle .line--muted { color:var(--faint); }
.js .hero.is-live .subtitle .line > span { transform:none; opacity:1; }

.authors { margin-top:clamp(20px,3vh,32px); font:500 clamp(15px,1.35vw,19px)/1.6 var(--narrow); color:var(--moonlight); }
.authors .row { margin:0; }
.authors .au { display:inline-block; }
.who { border-bottom:1px solid transparent; transition:border-color .3s var(--e-out), color .3s var(--e-out); }
.who:hover { color:var(--starlight); border-bottom-color:var(--viol); }
.authors sup { font-size:.62em; margin-left:1px; color:var(--faint); }
.sep { display:inline-block; padding:0 .42em; color:var(--dim); }
.affil { margin:10px 0 0; font-size:clamp(13px,1.05vw,15.5px); color:var(--faint); letter-spacing:.02em; }
.affil sup { margin:0 2px 0 0; }

.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,3.4vh,36px); }
.btn {
  display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:8px;
  border:1px solid var(--rule); background:rgba(24,36,32,.02);
  font:500 14px/1 var(--narrow); letter-spacing:.1em; text-transform:uppercase; color:var(--starlight);
  transition:border-color .3s var(--e-out), background .3s var(--e-out), transform .3s var(--e-out);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.btn:hover { border-color:rgba(24,36,32,.42); background:rgba(24,36,32,.06); transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.985); }
.btn--primary { background:var(--starlight); color:var(--field); border-color:var(--starlight); }
.btn--primary:hover { background:#fff; border-color:#fff; }
.ico { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.btn--primary .ico { fill:currentColor; stroke:none; }

/* instrument rail */
.rail { border-left:1px solid var(--rule-2); padding-left:clamp(14px,1.6vw,22px); }
.rail-in { display:grid; gap:12px; }
.rail-h { margin:0; font:500 11px/1 var(--narrow); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.rail-v { margin:0; font:400 34px/1 var(--mark); letter-spacing:-.02em; color:var(--starlight); font-variant-numeric:tabular-nums; }
.rail-v .u { font-size:.5em; color:var(--moonlight); margin-left:2px; }
.rail-k { margin:0; font:500 15px/1.3 var(--narrow); letter-spacing:.06em; color:var(--moonlight); }
.rail-s { margin:0; font:500 11px/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; color:var(--ground); transition:color .5s var(--e-out); }
.rail hr { border:0; border-top:1px solid var(--rule-2); margin:2px 0; }
.mono { font-family:var(--mono) !important; font-variant-numeric:tabular-nums; }

.scroll-cue {
  position:absolute; left:var(--gutter); bottom:18px; z-index:3;
  display:flex; align-items:center; gap:12px; opacity:0; transition:opacity .8s var(--e-out) 1s;
}
/* ONE reveal clock for the whole hero. The wordmark and the subtitle had rules; the kicker,
   the authors, the buttons and the instrument rail did not, so they were painted on frame one
   and their data-at values did nothing. Everything below waits its beat, which is what makes
   the collision land on an empty stage. */
.js .hero .venue,
.js .hero .authors,
.js .hero .actions {
  opacity:0; transform:translateY(16px);
  transition:opacity calc(var(--beat) * 1.4) linear, transform calc(var(--beat) * 1.9) var(--e-out);
  transition-delay:calc(var(--at, 0) * var(--beat));
}
.js .hero .rail {
  opacity:0; transform:translateX(20px);
  transition:opacity calc(var(--beat) * 1.6) linear, transform calc(var(--beat) * 2.2) var(--e-out);
  transition-delay:calc(7.9 * var(--beat));           /* the instruments come online last */
}
.js .hero.is-live .venue,
.js .hero.is-live .authors,
.js .hero.is-live .actions,
.js .hero.is-live .rail { opacity:1; transform:none; }
.js .hero.is-live .scroll-cue { opacity:1; transition-delay:calc(9.2 * var(--beat)); }
.cue-label { font:500 11px/1 var(--narrow); letter-spacing:.28em; text-transform:uppercase; color:var(--dim); }
.cue-line { display:block; width:56px; height:1px; background:var(--rule); position:relative; overflow:hidden; }
.cue-line::after { content:""; position:absolute; inset:0; background:var(--viol); animation:cue 2.6s var(--e-inout) infinite; }
@keyframes cue { 0% { transform:translateX(-100%); } 55% { transform:translateX(0); } 100% { transform:translateX(100%); } }

/* ============================ film ============================ */
.film-sec { padding:clamp(40px,7vw,96px) var(--gutter) clamp(24px,4vw,56px); }
.film-frame {
  position:relative; width:min(100%, 1240px); margin:0 auto; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background:var(--field-2); isolation:isolate;
  box-shadow:0 0 0 1px var(--rule-2), 0 60px 100px -70px rgba(0,0,0,.9);
}
.film-video { width:100%; height:100%; object-fit:contain; background:var(--field-2); display:block; }
.fp-ui {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:14px; padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(6,8,10,0) 0%, rgba(6,8,10,.78) 62%, rgba(6,8,10,.92) 100%);
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--e-out), transform .4s var(--e-out);
}
.film-frame:hover .fp-ui, .film-frame:focus-within .fp-ui, .film-frame.is-paused .fp-ui { opacity:1; transform:none; }
.fp-btn { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--starlight); cursor:pointer; transition:background .3s var(--e-out), transform .2s var(--e-out); }
.fp-btn:hover { background:rgba(24,36,32,.1); }
.fp-btn:active { transform:scale(.94); }
.fp-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fp-btn .i-play { fill:currentColor; stroke:none; }
.film-frame:not(.is-paused) .i-play { display:none; }
.film-frame.is-paused .i-pause { display:none; }
.fp-bar { position:relative; flex:1; height:22px; display:flex; align-items:center; cursor:pointer; }
.fp-bar::before { content:""; position:absolute; left:0; right:0; height:3px; border-radius:2px; background:rgba(24,36,32,.16); }
.fp-buf, .fp-fill { position:absolute; left:0; height:3px; border-radius:2px; }
.fp-buf { background:rgba(24,36,32,.28); width:var(--buf, 0%); }
.fp-fill { background:var(--starlight); width:var(--p, 0%); }
.fp-knob { position:absolute; left:var(--p, 0%); width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:var(--starlight); opacity:0; transition:opacity .2s var(--e-out); }
.fp-bar:hover .fp-knob, .fp-bar.is-drag .fp-knob { opacity:1; }
.fp-time { font:500 12px/1 var(--narrow); letter-spacing:.1em; color:var(--moonlight); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fp-sound-pill {
  position:absolute; top:16px; right:16px; z-index:4; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px; border:1px solid var(--rule); background:rgba(6,8,10,.6);
  backdrop-filter:blur(10px); color:var(--starlight); cursor:pointer;
  font:500 12px/1 var(--narrow); letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .4s var(--e-out), transform .3s var(--e-out), border-color .3s var(--e-out);
}
.fp-sound-pill:hover { border-color:rgba(24,36,32,.4); transform:translateY(-1px); }
.fp-sound-pill svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fp-sound-pill .spk { fill:currentColor; stroke:none; }
.film-frame.is-sound .fp-sound-pill { opacity:0; pointer-events:none; }
.film-frame.is-sound:hover .fp-sound-pill { opacity:1; pointer-events:auto; }
.film-frame:not(.is-sound) .fp-sound-pill .on { display:none; }
.film-frame.is-sound .fp-sound-pill .off { display:none; }
.film-caption { display:flex; justify-content:center; align-items:baseline; gap:14px; margin:18px 0 0; font-size:15px; color:var(--faint); text-align:center; }
.film-caption span { font:500 12px/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* ============================ sections ============================ */
.section { padding:clamp(56px,10vw,150px) var(--gutter); }
.section--night { background:linear-gradient(180deg, transparent 0%, rgba(8,11,16,.78) 18%, rgba(8,11,16,.78) 82%, transparent 100%); }
.sec-head { max-width:var(--maxw); margin:0 auto clamp(28px,5vw,68px); }
.kicker { display:flex; align-items:baseline; gap:14px; margin:0 0 clamp(14px,2vw,22px); font:500 13px/1 var(--narrow); letter-spacing:.32em; text-transform:uppercase; color:var(--moonlight); }
.kicker .num { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--viol); }
.h2 { margin:0; font:700 clamp(34px, 5.2vw, 68px)/1.04 var(--mark); letter-spacing:-.032em; color:var(--starlight); }
.dek { margin:clamp(16px,2.4vw,26px) 0 0; max-width:62ch; font-size:clamp(16px,1.5vw,20px); line-height:1.62; color:var(--moonlight); }
.fine { margin:clamp(16px,2vw,24px) 0 0; font-size:13.5px; line-height:1.6; color:var(--faint); max-width:66ch; }

/* split —deliberately asymmetric, and it reverses between sections */
.split { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(32px,6vw,96px); align-items:center; }
.split--rev { grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); }
.split-copy { max-width:600px; }
.split--rev .split-copy { margin-left:auto; }
.split-art { margin:0; }
.split-art canvas { width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 0 0 1px var(--rule-2), 0 50px 90px -70px rgba(0,0,0,.9); }
.split-art figcaption { margin-top:14px; font-size:13px; line-height:1.55; color:var(--dim); }

.specs { margin:clamp(24px,3.4vw,40px) 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--rule-2); border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }
.spec { background:var(--field); padding:16px 18px 18px 0; }
.spec + .spec { padding-left:18px; }
.spec dt { font:500 11px/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.spec dd { margin:10px 0 0; }
.spec b { display:block; font:400 clamp(24px,2.6vw,34px)/1 var(--mark); letter-spacing:-.02em; color:var(--starlight); font-variant-numeric:tabular-nums; }
.spec span { display:block; margin-top:6px; font:500 12.5px/1.3 var(--narrow); letter-spacing:.06em; color:var(--faint); }
.spec--w b { color:var(--viol); }

.ticks { list-style:none; margin:clamp(22px,3vw,34px) 0 0; padding:0; display:grid; gap:14px; }
.ticks li { position:relative; padding-left:28px; font-size:15.5px; line-height:1.6; color:var(--moonlight); }
.ticks b { color:var(--starlight); font-weight:600; }
.tk { position:absolute; left:0; top:.42em; width:14px; height:14px; border-radius:50%; }
.tk::after { content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; }
.tk--no { border:1px solid rgba(217,160,91,.55); } .tk--no::after { background:var(--ground); }
.tk--ok { border:1px solid rgba(217,79,43,.55); } .tk--ok::after { background:var(--viol); }

/* ============================ bento ============================ */
.bento { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
.cell { padding:clamp(20px,2.4vw,30px) 0 0; border-top:1px solid var(--rule-2); }
.cell--wide { grid-column:1 / -1; }
.cell canvas { width:100%; height:auto; display:block; border-radius:10px; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2); margin-bottom:clamp(16px,2vw,22px); }
.cell h3 { margin:0; display:flex; align-items:baseline; gap:12px; font:700 clamp(19px,1.9vw,25px)/1.2 var(--mark); letter-spacing:-.018em; color:var(--starlight); }
.cell h3 .n { font-family:var(--mono); font-size:12px; color:var(--viol); letter-spacing:.04em; }
.cell p { margin:12px 0 0; max-width:64ch; font-size:15.5px; line-height:1.66; color:var(--moonlight); }

/* ============================ results ============================ */
.metrics { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(28px,4.4vw,72px); align-items:start; }
.metric-set { margin:0; font:500 12px/1 var(--narrow); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.bignum { margin:14px 0 0; font:400 clamp(64px,9vw,132px)/.92 var(--mark); letter-spacing:-.045em; color:var(--starlight); font-variant-numeric:tabular-nums; }
.gain { margin:14px 0 0; font:500 13.5px/1.4 var(--narrow); letter-spacing:.06em; color:var(--viol); }
.bars { display:grid; gap:2px; }
.bar { display:grid; grid-template-columns:108px minmax(0,1fr); align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid var(--rule-2); }
.bar-name { font:500 14px/1 var(--narrow); letter-spacing:.05em; color:var(--faint); }
.bar-track { position:relative; display:flex; align-items:center; height:14px; }
.bar-fill { display:block; height:4px; border-radius:2px; background:rgba(166,176,182,.4); width:0; }
.bar-val { margin-left:12px; font-family:var(--mono); font-size:12.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.bar--ours .bar-name { color:var(--starlight); }
.bar--ours .bar-fill { height:6px; background:var(--viol); }
.bar--ours .bar-val { color:var(--starlight); }
.is-in .bar-fill { width:calc(var(--v) / 16.5 * 100%); transition:width 1.1s var(--e-cout); transition-delay:calc(var(--i) * 90ms); }

.facts { max-width:var(--maxw); margin:clamp(36px,5vw,72px) auto 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--rule-2); border-top:1px solid var(--rule-2); }
.fact { background:var(--field); padding:20px 18px 22px 0; }
.fact + .fact { padding-left:18px; }
.fact dt { font:500 11px/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.fact dd { margin:12px 0 0; display:flex; align-items:baseline; gap:9px; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.fact .from { font-size:15px; color:var(--dim); text-decoration:line-through; text-decoration-color:var(--rule); }
.fact .arrow { color:var(--dim); font-size:12px; }
.fact .to { font-size:20px; color:var(--starlight); }
.facts + .fine { max-width:var(--maxw); margin-left:auto; margin-right:auto; }

.strip { max-width:var(--maxw); margin:clamp(40px,6vw,88px) auto 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); }
.panel { margin:0; position:relative; border-radius:10px; overflow:hidden; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2); }
.panel img { width:100%; height:auto; display:block; filter:brightness(.92) contrast(1.04); transition:transform .8s var(--e-out), filter .5s var(--e-out); }
.panel:hover img, .panel:focus-visible img { transform:scale(1.045); filter:brightness(1.02) contrast(1.06); }
.panel figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:baseline; gap:9px; padding:12px 13px; background:linear-gradient(180deg, rgba(6,8,10,0) 0%, rgba(6,8,10,.86) 60%); }
.bits { font:400 17px/1 var(--mark); letter-spacing:-.01em; color:var(--starlight); font-variant-numeric:tabular-nums; }
.bits small { font-size:.62em; margin-left:1px; color:var(--moonlight); }
.cam { font:500 11px/1 var(--narrow); letter-spacing:.16em; text-transform:uppercase; color:var(--moonlight); }

/* ============================ paper ============================ */
.paper-grid { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,88px); align-items:start; }
.paper-title { margin:0; font:400 clamp(20px,2.1vw,28px)/1.32 var(--serif); letter-spacing:-.006em; color:var(--starlight); max-width:34ch; }
.paper-venue { margin:12px 0 0; font:500 12px/1 var(--narrow); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.links { list-style:none; margin:clamp(22px,3vw,34px) 0 0; padding:0; }
.links li + li { border-top:1px solid var(--rule-2); }
.links a { display:grid; grid-template-columns:110px 1fr 18px; align-items:center; gap:14px; padding:15px 4px; transition:padding-left .35s var(--e-out), background .35s var(--e-out); }
.links a:hover { padding-left:12px; background:rgba(24,36,32,.03); }
.l-name { font:500 13px/1 var(--narrow); letter-spacing:.18em; text-transform:uppercase; color:var(--starlight); }
.l-meta { font-family:var(--mono); font-size:12.5px; color:var(--faint); }
.cite { margin-top:clamp(22px,3vw,34px); position:relative; }
.copy { position:absolute; top:12px; right:12px; z-index:2; padding:8px 13px; border-radius:7px; border:1px solid var(--rule); background:rgba(6,8,10,.7); backdrop-filter:blur(8px); color:var(--moonlight); cursor:pointer; font:500 11.5px/1 var(--narrow); letter-spacing:.16em; text-transform:uppercase; transition:border-color .3s var(--e-out), color .3s var(--e-out), transform .2s var(--e-out); }
.copy:hover { border-color:rgba(24,36,32,.4); color:var(--starlight); }
.copy:active { transform:scale(.97); }
.copy.is-done { border-color:var(--viol); color:var(--viol); }
.bibtex { margin:0; padding:20px 20px 22px; border-radius:10px; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2); overflow-x:auto; }
.bibtex code { font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--moonlight); white-space:pre; }
.paper-art { margin:0; }
.paper-art img { width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 0 0 1px var(--rule-2); }
.paper-art figcaption { margin-top:14px; font-size:13px; line-height:1.55; color:var(--dim); }

/* ============================ footer ============================ */
.footer { padding:clamp(48px,7vw,110px) var(--gutter) 34px; border-top:1px solid var(--rule-2); margin-top:clamp(48px,7vw,110px); }
.footer-line { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 clamp(36px,6vw,80px); font:400 clamp(22px,3vw,38px)/1.2 var(--serif); color:var(--starlight); }
.footer-line .wm-dot { width:.13em; height:.13em; background:var(--viol); }
.footer-bar { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--dim); }
.wm--foot { font-size:17px; }
.footer-bar a { margin-left:auto; color:var(--faint); transition:color .3s var(--e-out); }
.footer-bar a:hover { color:var(--starlight); }

/* ============================ reveal ============================ */
.js .reveal { opacity:1; transform:none; transition:none; }
/* One authored entrance, in the hero only. The same fade-and-rise on 26 blocks made every
   section identical, which is animation debt rather than a motion thesis. */
.js .hero .reveal { opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--e-out), transform .9s var(--e-out); transition-delay:var(--d, 0s); }
.js .hero .reveal.is-in { opacity:1; transform:none; }
.js .reveal.is-in { opacity:1; transform:none; }

/* ============================ pinned story ============================ */
/* The page's one scrolltelling device: a tall section whose inner frame is
   sticky, so scrolling walks one field through the adapter's four stages. */
.story { position:relative; height:340vh; }
.story-pin {
  position:sticky; top:var(--bar-h); height:calc(100svh - var(--bar-h));
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:clamp(24px,4vw,64px); align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:20px var(--gutter);
}
.story-frame { position:relative; margin:0; border-radius:12px; overflow:hidden; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2), 0 60px 100px -70px rgba(0,0,0,.9); }
.story-canvas { display:block; width:100%; height:auto; }
/* The curve inset used to be transparent, so its channel curves were drawn straight
   across the photograph and read as a scratch on it. It gets its own surface now —
   same hairline ring the frame itself uses — so it reads as an instrument. */
.story-curve {
  position:absolute; right:14px; bottom:14px; width:clamp(120px,15vw,190px); height:auto;
  border-radius:10px; background:var(--field-2); box-shadow:0 0 0 1px var(--rule);
}
.story-badge {
  position:absolute; left:14px; top:14px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--rule); background:rgba(6,8,10,.6); backdrop-filter:blur(10px);
  font:500 11px/1 var(--narrow); letter-spacing:.18em; text-transform:uppercase; color:var(--moonlight);
  transition:color .5s var(--e-out), border-color .5s var(--e-out);
}
.story-side { display:grid; gap:clamp(14px,2vw,22px); align-content:center; }
.kicker--small { margin:0; letter-spacing:.26em; color:var(--faint); }
.story-steps { list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:s; }
.story-steps li { display:grid; gap:5px; padding-left:16px; position:relative; opacity:.34; transition:opacity .5s var(--e-out); }
.story-steps li::before { content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--dim); transition:background .5s var(--e-out), transform .5s var(--e-out); }
.story-steps li b { font:600 16px/1.3 var(--narrow); letter-spacing:.03em; color:var(--starlight); }
.story-steps li span { font-size:14px; line-height:1.58; color:var(--moonlight); max-width:44ch; }
.story-steps li.is-on { opacity:1; }
.story-steps li.is-on::before { background:var(--viol); transform:scale(1.25); }
.story-note { margin:0; font:500 11.5px/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

@media (max-width: 900px) {
  .story { height:auto; }
  .story-pin { position:static; height:auto; grid-template-columns:minmax(0,1fr); padding-top:0; padding-bottom:40px; }
  .story-side { order:2; }
  .story-steps li { opacity:1; }
}

/* ============================ result tables ============================ */
.fold { max-width:var(--maxw); margin:clamp(32px,5vw,64px) auto 0; }
.fold-head { display:flex; align-items:baseline; gap:14px; margin:0 0 16px; font:600 17px/1 var(--narrow); letter-spacing:.04em; color:var(--starlight); }
.summary-hint { margin-left:auto; font:500 11.5px/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.tabs button {
  padding:9px 14px; border-radius:7px; border:1px solid var(--rule-2); background:transparent;
  color:var(--faint); cursor:pointer; font:500 12px/1 var(--narrow); letter-spacing:.1em; text-transform:uppercase;
  transition:color .3s var(--e-out), border-color .3s var(--e-out), background .3s var(--e-out), transform .2s var(--e-out);
}
.tabs button:hover { color:var(--starlight); border-color:var(--rule); }
.tabs button:active { transform:scale(.97); }
.tabs button[aria-selected="true"] { color:var(--starlight); border-color:var(--viol); background:rgba(217,79,43,.07); }
.table-wrap { overflow-x:auto; border-radius:10px; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2); }
table.res { width:100%; border-collapse:collapse; font-size:14px; }
table.res th, table.res td { padding:11px 14px; text-align:right; white-space:nowrap; }
table.res th:first-child, table.res td:first-child { text-align:left; }
table.res thead th { font:500 11px/1 var(--narrow); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--rule-2); }
table.res tbody tr + tr { border-top:1px solid var(--rule-2); }
table.res td { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--moonlight); }
table.res td:first-child { font-family:var(--sans); color:var(--faint); }
table.res tr.is-ours td { color:var(--starlight); }
table.res tr.is-ours td:first-child { color:var(--viol); }
table.res .best { color:var(--starlight); font-weight:600; }
.table-caption { margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--dim); }

/* ============================ lightbox ============================ */
.zoom { cursor:zoom-in; }
.lightbox { position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:5vh 5vw; background:rgba(4,6,8,.92); backdrop-filter:blur(6px); }
.lightbox.is-open { display:grid; }
.lightbox img { max-width:100%; max-height:90vh; border-radius:8px; box-shadow:0 0 0 1px var(--rule-2); }
.lightbox button { position:absolute; top:20px; right:24px; width:42px; height:42px; border-radius:50%; border:1px solid var(--rule); background:rgba(6,8,10,.7); color:var(--starlight); cursor:pointer; font-size:20px; line-height:1; transition:border-color .3s var(--e-out), transform .2s var(--e-out); }
.lightbox button:hover { border-color:rgba(24,36,32,.45); }
.lightbox button:active { transform:scale(.94); }

/* panels: the hover gesture resolves the field */
.panel img { filter:blur(var(--blur, 0px)) brightness(.94) contrast(1.02); transition:filter .55s var(--e-out), transform .8s var(--e-out); }
.panel.is-resolved img, .panel:focus-visible img { filter:blur(0px) brightness(1.02) contrast(1.06); }
.panel::after {
  content:"Hover to resolve"; position:absolute; left:13px; top:12px; z-index:2;
  font:500 10.5px/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; color:var(--moonlight);
  opacity:.85; transition:opacity .4s var(--e-out); pointer-events:none;
}
.panel.is-resolved::after { opacity:0; }

/* ============================ inside the adapter ============================ */
/* Only the rail uses `.pipe`: it is the width wrapper, nothing more. The step cards it
   holds are defined once, in the sampler-rail block below. */
.pipe { max-width:var(--maxw); margin:0 auto clamp(32px,5vw,64px); }

.frac { display:inline-grid; grid-template-rows:1fr auto 1fr; align-items:center; text-align:center; vertical-align:middle; }
.frac > span:first-child { padding:0 6px; border-bottom:1px solid var(--rule); }
.frac > span:last-child { padding:0 6px; font-size:20px; }
.algo, .cli { margin:clamp(16px,2vw,22px) 0 0; padding:18px 20px; border-radius:10px; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2); overflow-x:auto; }
.algo code, .cli code { font-family:var(--mono); font-size:12.5px; line-height:1.75; color:var(--moonlight); white-space:pre; }
.algo code { color:var(--starlight); }
.run { max-width:var(--maxw); margin:clamp(36px,5vw,72px) auto 0; }
.run .kicker { margin-bottom:14px; }

/* ============================ comparison ============================ */
.cmp { max-width:var(--maxw); margin:0 auto; }
.cmp-bar { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:clamp(14px,2vw,22px); }
.tabs--scene { margin-bottom:0; }
.legend { display:flex; align-items:center; gap:9px; margin:0 0 0 auto; font:500 12px/1 var(--narrow); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.lg { width:9px; height:9px; border-radius:2px; }
.lg-a { background:var(--ground); }
.lg-b { background:var(--viol); }

.cmp-stage {
  position:relative; width:100%; max-width:var(--maxw); margin:0 auto; overflow:hidden;
  border-radius:12px; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2), 0 60px 100px -70px rgba(0,0,0,.9);
  cursor:ew-resize; touch-action:none; user-select:none;
  /* square: the field is read as a window, not as a strip (the slices are 9:16, so a
     square view is a crop — where it sits is set per scene from the pixels, in site.js) */
  aspect-ratio:1 / 1; max-height:min(72svh, 660px); width:auto; max-width:100%; margin-inline:auto;
}
.cmp-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cmp-under { filter:brightness(.94) contrast(1.02); }
.cmp-over { filter:brightness(1.02) contrast(1.05); }
/* one custom property drives both the clip on the sharp image and the handle position */
.cmp-over { clip-path:inset(0 calc(100% - var(--split, 50%)) 0 0); }
.cmp-handle { position:absolute; top:0; bottom:0; left:var(--split, 50%); width:2px; margin-left:-1px; background:var(--starlight); box-shadow:0 0 0 1px rgba(6,8,10,.5); pointer-events:none; }
.cmp-handle i { position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1px solid var(--starlight); background:rgba(6,8,10,.55); backdrop-filter:blur(6px); }
.cmp-handle i::before, .cmp-handle i::after { content:""; position:absolute; top:50%; width:6px; height:1px; background:var(--starlight); }
.cmp-handle i::before { left:8px; box-shadow:3px -3px 0 var(--starlight), 3px 3px 0 var(--starlight); }
.cmp-handle i::after { right:8px; box-shadow:-3px -3px 0 var(--starlight), -3px 3px 0 var(--starlight); }
.cmp-loupe {
  position:absolute; width:150px; height:150px; border-radius:50%; pointer-events:none; opacity:0;
  border:1px solid rgba(24,36,32,.5); box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
  background-repeat:no-repeat; transition:opacity .25s var(--e-out); z-index:3;
}
.cmp-stage.is-loupe .cmp-loupe { opacity:1; }
.cmp-methods { display:flex; flex-wrap:wrap; gap:6px; margin-top:clamp(14px,2vw,20px); }
.cmp-methods button {
  padding:9px 14px; border-radius:7px; border:1px solid var(--rule-2); background:transparent; color:var(--faint);
  cursor:pointer; font:500 12px/1 var(--narrow); letter-spacing:.1em; text-transform:uppercase;
  transition:color .3s var(--e-out), border-color .3s var(--e-out), background .3s var(--e-out), transform .2s var(--e-out);
}
.cmp-methods button:hover { color:var(--starlight); border-color:var(--rule); }
.cmp-methods button:active { transform:scale(.97); }
.cmp-methods button[aria-pressed="true"] { color:var(--starlight); border-color:var(--ground); background:rgba(217,160,91,.08); }
.cmp-methods button[data-m="fluxflow"][aria-pressed="true"] { border-color:var(--viol); background:rgba(217,79,43,.08); color:var(--viol); }
[data-cmp-note] { max-width:var(--maxw); margin-left:auto; margin-right:auto; }

/* ============================ dataset files ============================ */
.files { list-style:none; margin:clamp(22px,3vw,32px) 0 0; padding:0; }
.files li { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--rule-2); }
.files code { font-family:var(--mono); font-size:13px; color:var(--starlight); }
.files span { font:500 12px/1 var(--narrow); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }

/* ============================ responsive ============================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); }
  .rail { display:none; }
  .metrics { grid-template-columns:minmax(0,1fr); }
  .facts { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .strip { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .split, .split--rev { grid-template-columns:minmax(0,1fr); gap:clamp(24px,6vw,40px); }
  .split-art { order:2; }
  .split-copy, .split--rev .split-copy { max-width:none; margin:0; }
  .paper-grid { grid-template-columns:minmax(0,1fr); }
  .paper-art { order:-1; max-width:420px; }
  .bento { grid-template-columns:minmax(0,1fr); }
  .nav { display:none; }
  .specs { grid-template-columns:minmax(0,1fr); }
  .spec, .spec + .spec { padding:14px 0; }
  .fact, .fact + .fact { padding:16px 0; }
}
@media (max-width: 640px) {
  body { font-size:16px; }
  .strip { grid-template-columns:minmax(0,1fr); }
  .facts { grid-template-columns:minmax(0,1fr); }
  .bar { grid-template-columns:84px minmax(0,1fr); gap:12px; }
  .links a { grid-template-columns:92px 1fr 16px; gap:10px; }
  .actions { gap:8px; }
  .btn { padding:11px 16px; font-size:13px; }
  .footer-bar { gap:12px; }
  .footer-bar a { margin-left:0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
  .wm--hero .ch, .subtitle .line > span,
  .venue, .authors, .actions, .rail, .scroll-cue { transform:none !important; opacity:1 !important; transition:none !important; }
  .cue-line::after { animation:none; }
  body::after { opacity:.35; }
}

/* ========================= appendix knobs ========================= */
.knobs { padding: clamp(72px, 9vw, 132px) var(--gutter); border-top:1px solid var(--rule); scroll-margin-top:76px; }
.knob-legend {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  margin:0 0 26px; font-size:12px; letter-spacing:.04em; color:var(--faint);
}
.knob-legend span { display:inline-flex; align-items:center; gap:8px; }
.knob-legend i { width:22px; height:2px; border-radius:2px; background:var(--c); display:block; }
.knob-legend-note { margin-left:auto; letter-spacing:.01em; }
.knob-legend-note b { color:var(--moonlight); font-weight:600; }

.knob-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.knob { background:var(--field); padding:22px 22px 18px; display:flex; flex-direction:column; gap:12px; }
.knob-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.knob-head h3 { margin:0; font-size:14.5px; font-weight:600; letter-spacing:.01em; color:var(--starlight); }
.knob-head .mono { font-family:var(--mono); font-size:13px; color:var(--faint); letter-spacing:.02em; }
.knob-val {
  font-family:var(--mono); font-size:15px; color:var(--accent);
  font-variant-numeric:tabular-nums; min-width:4ch; text-align:right;
}
.knob-canvas { width:100%; height:232px; display:block; }
.knob-range { -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:ew-resize; }
.knob-range::-webkit-slider-runnable-track { height:1px; background:rgba(24,36,32,.22); }
.knob-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:11px; height:11px; margin-top:-5px; border-radius:50%;
  background:var(--accent); border:0; transition:transform .18s ease;
}
.knob-range:hover::-webkit-slider-thumb { transform:scale(1.25); }
.knob-range:focus-visible { outline:1px solid var(--accent); outline-offset:4px; }
.knob-range::-moz-range-track { height:1px; background:rgba(24,36,32,.22); }
.knob-range::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%; background:var(--accent); }
.knob-note { margin:0; font-size:12.5px; line-height:1.62; color:var(--moonlight); min-height:4.9em; }
.knob-default { margin:0; padding-top:10px; border-top:1px solid var(--rule); font-size:11.5px; color:var(--faint); letter-spacing:.02em; }
.knob-default b { color:var(--moonlight); font-weight:600; }

.knob-also { list-style:none; margin:34px 0 0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.knob-also li { background:var(--field); padding:16px 20px; font-size:13px; line-height:1.7; color:var(--moonlight); }
.knob-also b { color:var(--starlight); font-weight:600; }

.knob-src { margin-top:22px; border-top:1px solid var(--rule); padding-top:14px; }
.knob-src summary { cursor:pointer; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.knob-src summary:hover { color:var(--starlight); }
.knob-src ul { margin:14px 0 0; padding-left:18px; display:grid; gap:9px; }
.knob-src li { font-size:12px; line-height:1.65; color:var(--faint); }

@media (max-width:760px) {
  .knob-grid { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:640px) {
  .knob-legend-note { margin-left:0; width:100%; }
  .knob { padding:18px 16px 14px; }
}
@media (prefers-reduced-motion:reduce) { .knob-range::-webkit-slider-thumb { transition:none; } }

/* ========================== related work ========================== */
.rel { padding: clamp(72px, 9vw, 132px) var(--gutter); border-top:1px solid var(--rule); scroll-margin-top:76px; }
.rel-cols { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.rel-col { background:var(--field); padding:24px 24px 26px; }
.rel-col h3 { margin:0 0 14px; font-size:15px; font-weight:600; color:var(--starlight); letter-spacing:.01em; display:flex; gap:10px; align-items:baseline; }
.rel-n { font-family:var(--mono); font-size:11.5px; color:var(--accent); letter-spacing:.04em; }
.rel-col p { margin:0 0 14px; font-size:13px; line-height:1.72; color:var(--moonlight); }
.rel-col p:last-child { margin-bottom:0; }
.rel-crit { border-left:1px solid rgba(217,79,43,.45); padding-left:14px; color:var(--faint) !important; }
.rel-crit b { color:var(--starlight); font-weight:600; }

.chips { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:0; }
.chips li {
  font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--moonlight);
  border:1px solid var(--rule); border-radius:999px; padding:3px 10px;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.chips li:hover { color:var(--starlight); border-color:rgba(24,36,32,.34); transform:translateY(-1px); }

/* --- the sampling loop figure --- */
.rel-fig { margin-top:38px; border:1px solid var(--rule); background:var(--field); padding:22px 24px 20px; }
.rel-tabs { display:flex; gap:2px; margin-bottom:22px; }
.rel-tab {
  appearance:none; background:transparent; border:1px solid var(--rule); color:var(--faint);
  font-family:var(--narrow); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 16px; cursor:pointer; transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.rel-tab + .rel-tab { border-left:0; }
.rel-tab:hover { color:var(--starlight); }
.rel-tab[aria-selected="true"] { color:var(--starlight); border-color:rgba(217,79,43,.6); background:rgba(217,79,43,.10); }

.rel-loop { display:grid; grid-template-columns:1fr 46px 1fr; align-items:center; gap:0; }
.rel-node {
  border:1px solid var(--rule); padding:16px 18px; min-height:78px;
  display:flex; flex-direction:column; gap:7px; justify-content:center;
  transition:border-color .35s ease, background .35s ease;
}
.rel-node b { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.rel-node span { font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--starlight); }
.rel-n2 { border-color:rgba(217,79,43,.42); background:rgba(217,79,43,.055); }
.rel-arrow { position:relative; height:1px; background:var(--rule); }
.rel-arrow::after {
  content:''; position:absolute; right:-1px; top:-3px; width:7px; height:7px;
  border-top:1px solid var(--faint); border-right:1px solid var(--faint); transform:rotate(45deg);
}
.rel-repeat { margin:18px 0 0; display:flex; align-items:center; gap:14px; }
.rel-repeat::before, .rel-repeat::after { content:''; height:1px; flex:1; }
.rel-repeat::before { background:linear-gradient(90deg, transparent, rgba(24,36,32,.18)); }
.rel-repeat::after  { background:linear-gradient(270deg, transparent, rgba(24,36,32,.18)); }
.rel-repeat span { font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.rel-fig[data-m="ours"] .rel-n2 { border-color:rgba(217,79,43,.75); background:rgba(217,79,43,.11); }
.rel-cap { margin:20px 0 0; font-size:12.5px; line-height:1.7; color:var(--moonlight); min-height:3.4em; }

/* --- positioning table --- */
.rel-tblwrap { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:26px 24px 22px; }
.rel-pos { width:100%; border-collapse:collapse; }
.rel-pos caption { text-align:left; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding-bottom:14px; }
.rel-pos th, .rel-pos td { text-align:left; padding:13px 16px 13px 0; font-size:13px; border-bottom:1px solid var(--rule); vertical-align:baseline; }
.rel-pos th { font-weight:600; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.rel-pos td { color:var(--moonlight); }
.rel-pos td:first-child { color:var(--starlight); font-weight:600; }
.rel-pos sub, .rel-pos sup { font-size:.72em; }
.rel-pos .no { color:#B98A6A; }
.rel-pos .yes { color:var(--accent); }
.rel-pos tbody tr { transition:background .3s ease; }
.rel-pos tbody tr:hover { background:rgba(24,36,32,.028); }
.rel-pos tbody tr.is-ours { background:rgba(217,79,43,.055); }
.rel-pos tbody tr.is-ours td { border-bottom-color:rgba(217,79,43,.28); }
.rel-base { margin:18px 0 0; font-size:12px; line-height:1.7; color:var(--faint); }
.rel-base b { color:var(--moonlight); font-weight:600; }

.rel-notes { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:6px 24px 20px; }
.rel-notes p { margin:16px 0 0; font-size:12.5px; line-height:1.74; color:var(--faint); }
.rel-notes b { color:var(--moonlight); font-weight:600; }
.rel-notes em { color:var(--moonlight); font-style:italic; }

@media (max-width:820px) {
  .rel-cols { grid-template-columns:minmax(0,1fr); }
  .rel-loop { grid-template-columns:minmax(0,1fr); gap:14px; }
  .rel-arrow { display:none; }
  .rel-tabs { flex-wrap:wrap; }
  .rel-tab + .rel-tab { border-left:1px solid var(--rule); }
}

/* ==================== downstream science ==================== */
.dn, .dt, .im { padding: clamp(72px, 9vw, 132px) var(--gutter); border-top:1px solid var(--rule); scroll-margin-top:76px; }
.dn-head { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.dn-toggle { display:flex; }
.dn-tab {
  appearance:none; background:transparent; border:1px solid var(--rule); color:var(--faint);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; padding:7px 18px; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.dn-tab + .dn-tab { border-left:0; }
.dn-tab:hover { color:var(--starlight); }
.dn-tab[aria-selected="true"] { color:var(--starlight); border-color:rgba(217,79,43,.6); background:rgba(217,79,43,.10); }
.dn-note { margin:0; font-size:12px; color:var(--faint); line-height:1.6; }

.dn-tablewrap { border:1px solid var(--rule); background:var(--field); padding:24px 22px 20px; overflow-x:auto; }
.dn-table { width:100%; border-collapse:collapse; min-width:640px; }
.dn-table[hidden] { display:none; }
/* tab continuity: the numbers roll between scales, the labels hold still (site.js).
   The ghost repeats the cell's own padding and line-height via inherit, so the
   outgoing value sits exactly where the real one sat — no pixel of drift. */
.dn-table td { position:relative; }
.dn-cell { display:inline-block; }
.dn-ghost {
  position:absolute; left:0; right:0; top:0; padding:inherit;
  text-align:right; white-space:nowrap; pointer-events:none;
  font:inherit; color:inherit;
}
.dn-table caption { text-align:left; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding-bottom:14px; }
.dn-table th, .dn-table td { padding:11px 14px 11px 0; font-size:13px; border-bottom:1px solid var(--rule); text-align:right; font-variant-numeric:tabular-nums; }
.dn-table thead th { font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); text-align:right; }
.dn-table thead tr:first-child th[colspan] { text-align:center; border-bottom:0; color:var(--moonlight); }
.dn-table thead th:first-child, .dn-table tbody th { text-align:left; }
.dn-table tbody th { font-weight:500; color:var(--moonlight); }
.dn-table td { color:var(--faint); font-family:var(--mono); font-size:12.5px; }
.dn-table tbody tr { transition:background .3s ease; }
.dn-table tbody tr:hover { background:rgba(24,36,32,.028); }
.dn-table tbody tr.is-ours { background:rgba(217,79,43,.055); }
.dn-table tbody tr.is-ours th, .dn-table tbody tr.is-ours td { color:var(--starlight); }
.dn-table tbody tr.is-ours td { border-bottom-color:rgba(217,79,43,.28); }
.dn-notes { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:8px 24px 22px; }
.dn-notes p { margin:16px 0 0; font-size:12.5px; line-height:1.74; color:var(--faint); }
.dn-notes b { color:var(--moonlight); font-weight:600; }

/* ==================== dataset ==================== */
.dt-atmos { border:1px solid var(--rule); background:var(--field); padding:24px 22px 20px; display:grid; gap:12px; }
.dt-bar { display:grid; grid-template-columns:190px 1fr 120px; align-items:center; gap:16px; }
.dt-bar-lbl { font-size:12px; color:var(--moonlight); }
.dt-bar-track { height:6px; background:rgba(24,36,32,.06); position:relative; overflow:hidden; }
.dt-bar-track i { position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--ground); display:block; transform-origin:left center; animation:barIn .8s cubic-bezier(.22,.8,.2,1) both; }
.dt-bar-track i.hot { background:var(--space); }
@keyframes barIn { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.dt-bar-val { font-family:var(--mono); font-size:12px; color:var(--starlight); text-align:right; }
.dt-atmos-note { margin:8px 0 0; font-size:12.5px; line-height:1.74; color:var(--faint); }
.dt-atmos-note b { color:var(--starlight); font-weight:600; }

.dt-tablewrap { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:24px 22px 20px; overflow-x:auto; }
.dt-table { width:100%; border-collapse:collapse; min-width:520px; }
.dt-table caption { text-align:left; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding-bottom:14px; }
.dt-table th, .dt-table td { padding:11px 14px 11px 0; font-size:13px; border-bottom:1px solid var(--rule); text-align:right; }
.dt-table thead th { font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.dt-table thead th:first-child, .dt-table tbody th { text-align:left; }
.dt-table tbody th { font-weight:500; color:var(--moonlight); }
.dt-table td { color:var(--faint); font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; }
.dt-table tbody tr { transition:background .3s ease; }
.dt-table tbody tr:hover { background:rgba(24,36,32,.028); }
.dt-table tbody tr.is-ours { background:rgba(217,79,43,.055); }
.dt-table tbody tr.is-ours th, .dt-table tbody tr.is-ours td { color:var(--starlight); }
.dt-table tbody tr.is-ours td { border-bottom-color:rgba(217,79,43,.28); }
.dt-legend { margin:16px 0 0; font-size:11.5px; color:var(--faint); }
.dt-legend b { color:var(--moonlight); font-weight:600; }

.dt-extra { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:24px 22px 22px; }
.dt-extra h3 { margin:0 0 14px; font-size:15px; font-weight:600; color:var(--starlight); }
.dt-extra p { margin:0 0 14px; font-size:13px; line-height:1.72; color:var(--moonlight); }
.dt-extra ul { margin:0 0 16px; padding-left:18px; display:grid; gap:8px; }
.dt-extra li { font-size:12.5px; line-height:1.66; color:var(--moonlight); }
.dt-extra b { color:var(--starlight); font-weight:600; }
.dt-caveat { border-left:1px solid rgba(217,79,43,.45); padding-left:14px; color:var(--faint) !important; }
.dt-caveat b { color:var(--starlight); }

/* ==================== implementation ==================== */
.im-flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:0; border:1px solid var(--rule); background:var(--field); padding:22px; }
.im-node {
  flex:1 1 150px; min-width:150px; border:1px solid var(--rule); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px; justify-content:center;
}
.im-node.wide { flex:1 1 230px; }
.im-node b { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.im-node span { font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--moonlight); }
.im-node.hot { border-color:rgba(217,79,43,.55); background:rgba(217,79,43,.075); }
.im-node.hot span { color:var(--starlight); }
.im-plus, .im-arrow { display:flex; align-items:center; justify-content:center; width:34px; flex:0 0 34px; color:var(--faint); font-size:14px; }
.im-arrow { position:relative; }
.im-arrow::before { content:''; position:absolute; left:8px; right:8px; top:50%; height:1px; background:var(--rule); }
.im-arrow::after { content:''; position:absolute; right:8px; top:50%; width:6px; height:6px; margin-top:-3px;
  border-top:1px solid var(--faint); border-right:1px solid var(--faint); transform:rotate(45deg); }

.im-conv { margin:1px 0 0; border:1px solid var(--rule); border-top:0; background:var(--field); padding:20px 22px; font-size:12.5px; line-height:1.74; color:var(--faint); }
.im-conv b { color:var(--moonlight); font-weight:600; }
.im-conv .mono { font-family:var(--mono); font-size:11.5px; color:var(--starlight); }
.im-conv em { color:var(--moonlight); font-style:italic; }

.im-spec { margin-top:1px; border:1px solid var(--rule); border-top:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--rule); }
.im-spec-col { background:var(--field); padding:22px 22px 20px; }
.im-spec-col h3 { margin:0 0 16px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--moonlight); }
.im-spec-col h3.im-spec-h3b { margin-top:26px; }
.im-spec dl { margin:0; display:grid; gap:9px; }
.im-spec dt { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.im-spec dd { margin:2px 0 0; font-size:12.5px; line-height:1.6; color:var(--moonlight); }

@media (max-width:900px) { .im-spec { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) {
  .dt-bar { grid-template-columns:minmax(0,1fr); gap:6px; }
  .dt-bar-val { text-align:left; }
  .dt-bar-track { height:5px; }
  .im-flow { padding:16px; }
  .im-plus, .im-arrow { display:none; }
}

/* ==================== appendix I reading guide ==================== */
.rd { padding: clamp(72px, 9vw, 132px) var(--gutter); border-top:1px solid var(--rule); scroll-margin-top:76px; }
.rd-list { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); counter-reset:rd; }
.rd-list li { background:var(--field); padding:22px 24px; display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:start; counter-increment:rd; transition:background .3s ease; }
.rd-list li:hover { background:rgba(24,36,32,.026); }
.rd-fig { font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--accent); position:relative; padding-left:26px; }
.rd-fig::before { content:counter(rd,decimal-leading-zero); position:absolute; left:0; top:-1px; font-size:11px; color:var(--faint); }
.rd-list p { margin:0; font-size:13px; line-height:1.74; color:var(--moonlight); }
.rd-list b { color:var(--starlight); font-weight:600; }
.rd-foot { margin:18px 0 0; font-size:12px; line-height:1.7; color:var(--faint); }
@media (max-width:700px) { .rd-list li { grid-template-columns:minmax(0,1fr); gap:10px; } }

/* ==================== appendix E analysis ==================== */
.an, .ab, .od, .co { padding: clamp(72px, 9vw, 132px) var(--gutter); border-top:1px solid var(--rule); scroll-margin-top:76px; }
.an-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.an-steps li { background:var(--field); padding:24px 24px 22px; }
.an-tag { font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--accent); }
.an-steps h3 { margin:10px 0 12px; font-size:14.5px; font-weight:600; color:var(--starlight); }
.an-steps p { margin:0; font-size:12.5px; line-height:1.74; color:var(--moonlight); }
.an-steps em { color:var(--starlight); font-style:italic; }
.mono { font-family:var(--mono); font-size:11.5px; color:var(--starlight); }
.an-steps b, .an-limit b, .an-toy b, .an-caveat b { color:var(--starlight); font-weight:600; }

.an-limits { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:24px 22px 20px; }
.an-limits h3 { margin:0 0 18px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--moonlight); }
.an-limit { border-left:1px solid rgba(217,79,43,.4); padding:2px 0 2px 16px; margin-bottom:18px; }
.an-limit-k { font-family:var(--mono); font-size:12px; color:var(--accent); }
.an-limit p { margin:8px 0 0; font-size:12.5px; line-height:1.7; color:var(--faint); }
.an-limit p.mono { color:var(--starlight); font-size:12px; }
.an-limit-note { margin:0; font-size:12.5px; line-height:1.72; color:var(--faint); }

.an-toy { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:24px 22px 20px; display:grid; gap:12px; }
.an-toy h3 { margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--moonlight); }
.dt-bar-track i.bad { background:#B98A6A; }
.an-toy-note { margin:10px 0 0; font-size:12.5px; line-height:1.74; color:var(--faint); }
.an-caveat { margin-top:1px; border:1px solid var(--rule); border-top:0; background:var(--field); padding:22px 22px; }
.an-caveat p { margin:0; font-size:12.5px; line-height:1.76; color:var(--faint); border-left:1px solid rgba(217,79,43,.45); padding-left:16px; }

/* wide tables scroll on narrow screens */
.dn-table[data-wide] { min-width:760px; }
.dn-table thead th:nth-child(n+2) { white-space:nowrap; }
.dn-table td { min-width:52px; }

/* ==================== training cost ==================== */
.co-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.co-col { background:var(--field); padding:24px 22px 20px; display:grid; gap:12px; align-content:start; }
.co-col h3 { margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--moonlight); }
.co-note { margin:1px 0 0; border:1px solid var(--rule); border-top:0; background:var(--field); padding:20px 22px; font-size:12.5px; line-height:1.74; color:var(--faint); }
.co-note b { color:var(--moonlight); font-weight:600; }

@media (max-width:860px) {
  .an-steps, .co-grid { grid-template-columns:minmax(0,1fr); }
}

/* ==================== 1. section rail ==================== */
.sec-rail {
  position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:2px; padding:8px 6px;
  opacity:0; pointer-events:none; transition:opacity .45s cubic-bezier(.22,.8,.2,1);
}
.sec-rail.is-on { opacity:1; pointer-events:auto; }
.sec-rail button {
  appearance:none; background:transparent; border:0; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:flex-end; gap:9px; height:15px;
}
.sec-rail .sr-dot {
  width:5px; height:5px; border-radius:50%; background:rgba(24,36,32,.22);
  transition:background .3s ease, transform .3s cubic-bezier(.22,.8,.2,1), width .3s ease;
}
.sec-rail button:hover .sr-dot { background:rgba(24,36,32,.55); transform:scale(1.3); }
.sec-rail button.is-on .sr-dot { background:var(--viol); transform:scale(1.5); }
.sec-rail .sr-label {
  font:500 10px/1 var(--narrow); letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap; opacity:0; transform:translateX(6px); transition:opacity .3s ease, transform .3s ease, color .3s ease;
}
.sec-rail button:hover .sr-label, .sec-rail button.is-on .sr-label { opacity:1; transform:none; color:var(--moonlight); }
@media (max-width:1180px) { .sec-rail { display:none; } }

/* ==================== 2. algorithm stepper ==================== */
.algo-wrap { position:relative; }
.algo .al { display:block; border-left:2px solid transparent; padding-left:8px; margin-left:-10px;
  transition:background .35s ease, border-color .35s ease, color .35s ease; }
.algo .al.is-step { background:rgba(217,79,43,.12); border-left-color:var(--viol); color:var(--starlight); }
.algo-ctl { display:flex; align-items:center; gap:12px; margin-top:12px; }
.algo-btn {
  appearance:none; background:transparent; border:1px solid var(--rule); color:var(--moonlight);
  font:500 10.5px/1 var(--narrow); letter-spacing:.12em; text-transform:uppercase;
  padding:8px 14px; cursor:pointer; transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.algo-btn:hover { color:var(--starlight); border-color:rgba(24,36,32,.34); }
.algo-btn[aria-pressed="true"] { color:var(--starlight); border-color:rgba(217,79,43,.6); background:rgba(217,79,43,.10); }
.algo-step-no { font:500 10.5px/1 var(--mono); letter-spacing:.1em; color:var(--dim); }

/* ==================== 3. interactive cost bars ==================== */
.co-col .dt-bar { cursor:default; padding:2px 6px; margin:0 -6px; border-radius:3px; transition:background .28s ease; }
.co-col .dt-bar.is-hi { background:rgba(217,79,43,.10); }
.co-col .dt-bar.is-hi .dt-bar-lbl { color:var(--starlight); }
.co-col .dt-bar.is-hi .dt-bar-val { color:var(--accent); }
.co-col .dt-bar.is-mut { opacity:.38; }
.co-delta { font:500 10.5px/1 var(--mono); color:var(--dim); letter-spacing:.06em; margin-left:10px; }
.co-delta b { color:var(--accent); font-weight:500; }

/* ==================== 4. cursor spotlight ==================== */
.spot { position:relative; }
.spot::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(217,79,43,.10), transparent 70%);
  transition:opacity .35s ease;
}
.spot:hover::after { opacity:1; }

@media (prefers-reduced-motion:reduce) {
  .sec-rail, .algo .al, .co-col .dt-bar, .spot::after { transition:none; }
}

/* ==================== appendix accordion ==================== */
.app-head { padding: clamp(72px, 9vw, 132px) var(--gutter) clamp(28px, 3vw, 44px); border-top:1px solid var(--rule); }
.acc { border-top:1px solid var(--rule); background:var(--field); scroll-margin-top:76px; }
.acc[open] { background:transparent; }
/* the click target: taller, larger title, and the plus/minus becomes a ringed button */
.acc summary {
  list-style:none; cursor:pointer; display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr) 46px;
  align-items:center; gap:18px;
  padding:clamp(24px, 2.8vw, 36px) var(--gutter);
  transition:background .3s ease;
}
.acc summary:focus-visible { outline:1px solid var(--accent); outline-offset:-2px; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary:hover { background:rgba(24,36,32,.026); }
.acc-k { font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.acc-t { font:600 clamp(19px,1.9vw,26px)/1.28 var(--narrow); color:var(--starlight); letter-spacing:.01em; }
.acc-i {
  position:relative; width:28px; height:28px; justify-self:end; align-self:center;
  border:1px solid var(--rule); border-radius:50%;
  transition:border-color .3s var(--e-out), background .3s var(--e-out);
}
.acc-i::before, .acc-i::after {
  content:''; position:absolute; background:var(--moonlight);
  transition:transform .35s cubic-bezier(.22,.8,.2,1), opacity .35s ease, background .3s var(--e-out);
}
/* percentages, so one rule serves the 28px row button and the 34px group button */
.acc-i::before { left:25%; right:25%; top:calc(50% - .5px); height:1px; }
.acc-i::after { top:25%; bottom:25%; left:calc(50% - .5px); width:1px; }
.acc summary:hover .acc-i { border-color:rgba(24,36,32,.34); background:rgba(24,36,32,.05); }
.acc[open] .acc-i { border-color:rgba(217,79,43,.5); background:rgba(217,79,43,.07); }
.acc[open] .acc-i::after { transform:scaleY(0); opacity:0; }
.acc[open] .acc-i::before { background:var(--viol); }
.acc-b { padding:0 var(--gutter) clamp(56px,7vw,96px); }
.acc-b > section, .acc-b > .dn-tablewrap, .acc-b > .dt-tablewrap, .acc-b > .co-grid, .acc-b > .dt-atmos { margin-top:0; }
.acc-b .dn, .acc-b .dt, .acc-b .im, .acc-b .an, .acc-b .ab, .acc-b .od, .acc-b .co, .acc-b .rd,
.acc-b > section { padding-top:0 !important; border-top:0 !important; }
/* ---- the group button: the appendix heading opens the appendix ------------------- */
.acc--group > summary.app-head {
  display:grid; grid-template-columns:minmax(0,1fr) 46px; align-items:center; gap:20px;
  padding:clamp(52px,7vw,104px) var(--gutter) clamp(22px,2.6vw,34px);
  border-top:1px solid var(--rule);
}
.app-head-in { display:block; max-width:var(--maxw); margin:0 auto; width:100%; }
.acc--group > summary .acc-k { display:block; margin-bottom:12px; font-size:12.5px; }
.acc--group > summary .acc-t { display:block; font:700 clamp(24px,3vw,38px)/1.18 var(--mark); letter-spacing:-.018em;
  transition:color .3s var(--e-out); }
.acc--group > summary:hover .acc-t { color:var(--starlight); }
.acc-lede { display:block; margin:18px 0 0; max-width:82ch; font-size:15.5px; line-height:1.72; color:var(--moonlight); }
.acc--group > summary .acc-i { width:34px; height:34px; align-self:center; }
/* the rows inside are full-bleed: they carry their own gutters */
.acc--group > .acc-b { padding:0; }
@media (max-width:760px) {
  .acc--group > summary.app-head { grid-template-columns:minmax(0,1fr) 34px; padding:clamp(44px,9vw,64px) var(--gutter) 20px; }
  .acc--group > summary .acc-t { font-size:24px; }
  .acc-lede { font-size:14.5px; }
}

@media (max-width:760px) {
  .acc summary { grid-template-columns:minmax(0,1fr) 34px; gap:8px 14px; padding:22px var(--gutter); }
  .acc-k { grid-column:1; }
  .acc-t { grid-column:1; }
  .acc-i { grid-column:2; grid-row:1 / span 2; }
}

/* ==================== failure field: consistency dial ==================== */
.hal-ctl { margin-top:14px; padding:16px 18px 14px; border:1px solid var(--rule); background:var(--field-2); border-radius:10px; }
.hal-ctl-top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; }
.hal-ctl-top label { font:500 10.5px/1 var(--narrow); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.hal-state { font:500 11px/1 var(--mono); letter-spacing:.04em; color:var(--ground); transition:color .35s ease; }
.hal-range { -webkit-appearance:none; appearance:none; width:100%; height:20px; background:transparent; cursor:ew-resize; }
.hal-range::-webkit-slider-runnable-track { height:2px; background:linear-gradient(90deg, rgba(217,160,91,.55), rgba(217,79,43,.75)); }
.hal-range::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; margin-top:-5.5px; border-radius:50%;
  background:var(--starlight); border:1px solid rgba(6,8,10,.9); transition:transform .18s ease; }
.hal-range:hover::-webkit-slider-thumb { transform:scale(1.2); }
.hal-range:focus-visible { outline:1px solid var(--accent); outline-offset:4px; }
.hal-range::-moz-range-track { height:2px; background:linear-gradient(90deg, rgba(217,160,91,.55), rgba(217,79,43,.75)); }
.hal-range::-moz-range-thumb { width:13px; height:13px; border:0; border-radius:50%; background:var(--starlight); }
.hal-metrics { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin:12px 0 10px; }
.hal-m { background:var(--field); padding:9px 10px; display:flex; flex-direction:column; gap:4px; }
.hal-m span { font:500 9.5px/1 var(--narrow); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.hal-m b { font:500 15px/1 var(--mono); color:var(--moonlight); font-variant-numeric:tabular-nums; transition:color .3s ease; }
.hal-ctl .fine { margin:0; font-size:11px; line-height:1.65; color:var(--dim); }
.hal-ctl .fine b { color:var(--moonlight); font-weight:600; }
@media (prefers-reduced-motion:reduce) { .hal-range::-webkit-slider-thumb, .hal-m b, .hal-state { transition:none; } }

/* hoverable method bullets: they drive the field above */
/* keep the original 16px text inset: shrinking it slid the copy onto the marker dot.
   The hover background bleeds outward via negative side margins instead. */
#failure li.is-probe { cursor:pointer; border-radius:6px; margin:0 -12px; padding:5px 12px 5px 16px;
  transition:background .28s ease, color .28s ease; }
#failure li.is-probe:hover, #failure li.is-probe:focus-visible {
  background:rgba(217,79,43,.09); outline:none; }
#failure li.is-probe:hover b { color:var(--starlight); }
@media (prefers-reduced-motion:reduce) { #failure li.is-probe { transition:none; } }

/* the hovered method stays lit while its state is on screen */
#failure li.is-probe { position:relative; }
#failure li.is-probe.is-active { background:rgba(217,79,43,.12); }
#failure li.is-probe.is-active b { color:var(--starlight); }
#failure li.is-probe::after {
  content:''; position:absolute; left:0; top:50%; width:2px; height:0;
  transform:translateY(-50%); background:var(--viol); border-radius:2px;
  transition:height .3s cubic-bezier(.22,.8,.2,1);
}
#failure li.is-probe.is-active::after { height:62%; }
@media (prefers-reduced-motion:reduce) { #failure li.is-probe::after { transition:none; } }

/* ==================== sampler rail ==================== */
/* Cards, not a table of rows: the seven steps read as seven objects. This block is the
   single definition of a step card — the legacy `.pipe`/`.node` layer that used to fight
   it for these properties is gone (it was rail-only and had drifted out of use).
   The formula keeps a full-width line of its own under the header: at 15px mono the
   longest one (the Wiener row) fits on one line only if it is not indented under the
   thumbnail, and that constraint is what puts the two-column breakpoint at 1280px. */
.flow-rail {
  list-style:none; margin:0; padding:0; width:100%;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(12px,1.3vw,18px);
}
.flow-rail li {
  position:relative; box-sizing:border-box; border-radius:12px; padding:0;
  display:flex; flex-direction:column; width:100%; min-width:0; overflow:hidden;
  aspect-ratio:1/1;
  background:var(--field-2);
  box-shadow:0 0 0 1px var(--rule-2);
  transition:box-shadow .35s var(--e-out), background .35s var(--e-out);
}
/* the frame is the top band of the tile; the index rides on it as a badge, so the reading order
   stays image -> number -> name -> formula without a thumbnail column eating the width */
.flow-rail .fr-t { width:100%; height:36%; flex:0 0 36%; object-fit:cover; display:block;
  border-bottom:1px solid var(--rule-2); opacity:.8;
  transition:border-color .3s ease, opacity .3s ease; }
.flow-rail .fr-i { position:absolute; top:10px; left:10px; z-index:2;
  font:500 12px/1 var(--mono); color:var(--moonlight); letter-spacing:.06em;
  font-variant-numeric:tabular-nums; padding:5px 7px; border-radius:6px;
  background:rgba(8,11,16,.72); box-shadow:0 0 0 1px rgba(24,36,32,.16); }
.flow-rail li b { margin:clamp(12px,1.2vw,18px) clamp(14px,1.4vw,20px) 0;
  font:600 18px/1.28 var(--narrow); letter-spacing:.004em; color:var(--starlight); }
.flow-rail li span { margin:auto clamp(14px,1.4vw,20px) clamp(14px,1.4vw,20px);
  padding-top:10px; border-top:1px solid var(--rule-2);
  font-family:var(--mono); font-size:13.5px; line-height:1.5; color:var(--faint); }
/* the pointer gets an answer from the tile itself — it lifts, its frame band zooms inside the
   clip, its ring and its formula come up — and the script below lights the algorithm line the
   step drives. Both halves are one interaction, so neither is styled without the other. */
.flow-rail li { transition:box-shadow .35s var(--e-out), background .35s var(--e-out),
  transform .35s var(--e-out); }
.flow-rail .fr-t { transition:opacity .3s ease, transform .6s var(--e-out), border-color .3s ease; }
/* a dark drop shadow is invisible on a dark page, so the answer is the lift, the ring and a
   slightly lighter field — measured at 3px it read as nothing, so it is 5px and .34 */
.flow-rail li:hover, .flow-rail li:focus-visible {
  transform:translateY(-5px);
  background:#0E141A;
  box-shadow:0 0 0 1px rgba(24,36,32,.34), 0 24px 40px -26px rgba(0,0,0,1);
}
/* the lit tile carries its own .is-lit .fr-t opacity, and equal specificity means source order
   would win there, so this rule names the node class to stay ahead of it */
.flow-rail li.node:hover .fr-t, .flow-rail li.node:focus-visible .fr-t { opacity:.98; transform:scale(1.06); }
.flow-rail li:hover span, .flow-rail li:focus-visible span { color:var(--moonlight); }
.flow-rail li:hover .fr-i, .flow-rail li:focus-visible .fr-i { color:var(--starlight); box-shadow:0 0 0 1px rgba(24,36,32,.3); }
.flow-rail li:focus { outline:none; }
.flow-rail li:focus-visible { outline:none; }
/* a hovered tile keeps its own ring even when it is the lit step */
.flow-rail li.is-lit:hover, .flow-rail li.is-lit:focus-visible {
  box-shadow:0 0 0 1px rgba(217,79,43,.8), 0 24px 40px -26px rgba(0,0,0,1);
}
/* order matters: a step is lit *and* done while the stepper sits on it, and the active
   state has to win, so the visited state is declared first */
.flow-rail li.is-done { box-shadow:0 0 0 1px rgba(217,79,43,.34); }
.flow-rail li.is-done .fr-i { color:rgba(217,79,43,.75); }
.flow-rail li.is-lit {
  background:linear-gradient(180deg, rgba(217,79,43,.16), rgba(217,79,43,.05));
  box-shadow:0 0 0 1px rgba(217,79,43,.55);
}
.flow-rail li.is-lit span { color:var(--moonlight); }
.flow-rail li.is-lit .fr-i { color:var(--viol); }
.flow-rail li.is-lit .fr-t { opacity:.95; }
/* measured: a tile needs about 250px to hold its content without clipping, the same threshold
   the tiles below use. Below 1150 the four columns give 223px and the formula starts to clip, so
   the cards take their content height and two columns instead of the square. */
@media (max-width:1149px) {
  .flow-rail { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .flow-rail li { aspect-ratio:auto; }
  .flow-rail .fr-t { height:96px; flex:0 0 96px; }
}
@media (max-width:700px) {
  .flow-rail { grid-template-columns:minmax(0,1fr); }
  .flow-rail .fr-t { height:132px; flex:0 0 132px; }
}
@media (prefers-reduced-motion:reduce) {
  .flow-rail li, .flow-rail .fr-t { transition:none; }
  .flow-rail li:hover, .flow-rail li:focus-visible { transform:none; }
  .flow-rail li.node:hover .fr-t, .flow-rail li.node:focus-visible .fr-t { transform:none; }
}

/* ==================== reproduce-it disclosure ==================== */
.run--disc { border:1px solid var(--rule); background:var(--field); }
.run--disc summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 22px; transition:background .3s ease; }
.run--disc summary::-webkit-details-marker { display:none; }
.run--disc summary:hover { background:rgba(24,36,32,.026); }
.run--disc summary .kicker { margin:0; }
.run-i { position:relative; width:12px; height:12px; flex:0 0 12px; }
.run-i::before, .run-i::after { content:''; position:absolute; background:var(--moonlight); transition:transform .35s cubic-bezier(.22,.8,.2,1), opacity .35s ease; }
.run-i::before { left:0; right:0; top:5.5px; height:1px; }
.run-i::after { top:0; bottom:0; left:5.5px; width:1px; }
.run--disc[open] .run-i::after { transform:scaleY(0); opacity:0; }
.run--disc[open] .run-i::before { background:var(--viol); }
.run-body { padding:0 22px 20px; }
.run-body .cli { margin:0; }
@media (prefers-reduced-motion:reduce) { .flow-rail li, .run-i::before, .run-i::after { transition:none; } }


/* ==================== feedback states ==================== */
.run-copy {
  appearance:none; background:transparent; border:1px solid var(--rule); color:var(--faint);
  font:500 10.5px/1 var(--narrow); letter-spacing:.12em; text-transform:uppercase;
  padding:9px 14px; margin:0 0 12px; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.run-copy:hover { color:var(--starlight); border-color:rgba(24,36,32,.34); }
.run-copy:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.run-copy.is-done { color:var(--accent); border-color:rgba(217,79,43,.6); background:rgba(217,79,43,.10); }

@media (prefers-reduced-motion:reduce) { .run-copy { transition:none; } }

@media (max-width:760px) {
  .acc--group > summary.app-head { grid-template-columns:minmax(0,1fr) 34px; padding:clamp(44px,9vw,64px) var(--gutter) 20px; }
  .acc--group > summary .acc-t { font-size:24px; }
  .acc-lede { font-size:14.5px; }
}

/* ==================== continuity ==================== */
/* the body is measured and animated by script; overflow is only clipped while it runs,
   so nothing gets cut off at rest (focus rings, descenders, sticky children) */
.acc-b { will-change: height; }
.acc-b.is-animating { overflow: hidden; }
.acc summary .acc-i { transition: transform .35s cubic-bezier(.22,.8,.2,1); }

/* anchor navigation cross-fades instead of teleporting */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-b, .acc summary .acc-i { transition: none; }
}

/* ==================== 05 instrument tiles ==================== */
/* Section 05 was two columns of prose around one formula. The prose is gone — the tiles and the
   REPRODUCE IT block carry every claim — and what is left is square: a tile is as tall as it is
   wide. Four of them fit one row at 1440 and a 2x2 at 1024, and each is small enough that its
   content fills it; the first attempt used three 377px squares and they read as empty boxes. */
.ins-grid { max-width:var(--maxw); margin:clamp(28px,3.6vw,52px) auto 0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(12px,1.3vw,18px); }
.ins-card { position:relative; display:flex; flex-direction:column; padding:clamp(16px,1.5vw,22px);
  border-radius:12px; background:var(--field-2); box-shadow:0 0 0 1px var(--rule-2);
  overflow:hidden; min-height:0; }
.ins-card:not(.ins-card--wide) { aspect-ratio:1/1; }
.ins-card--wide { grid-column:1 / -1; }
.ins-k { margin:0 0 clamp(10px,1.1vw,16px); font:500 11.5px/1.35 var(--narrow);
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }
.ins-eq { margin:0; display:flex; align-items:center; gap:7px; font-family:var(--serif);
  font-size:clamp(24px,2.05vw,32px); line-height:1.12; color:var(--starlight); }
.ins-eq--sm { font-size:clamp(18px,1.55vw,25px); }
.ins-eq .frac > span:last-child { font-size:.62em; }
.ins-eq sub, .ins-eq sup { font-size:.5em; color:var(--moonlight); }
.ins-pts { list-style:none; margin:clamp(12px,1.3vw,18px) 0 0; padding:0; display:grid; gap:7px; }
.ins-pts li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:baseline; }
.ins-pts b { font:600 13px/1.3 var(--mark); color:var(--starlight); white-space:nowrap; }
.ins-pts span { font-size:12.5px; line-height:1.4; color:var(--moonlight); }
/* the footnote sits on the floor of the tile, so every tile in the row closes on the same line */
.ins-foot { margin:auto 0 0; padding-top:12px; border-top:1px solid var(--rule-2);
  font-size:11px; line-height:1.5; color:var(--faint); }
.ins-foot code { font-family:var(--mono); font-size:.94em; color:var(--moonlight); }
.ins-kv { margin:clamp(12px,1.3vw,18px) 0 0; display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(10px,1.2vw,16px) 10px; align-content:start; }
.ins-kv dt { font:500 10px/1.3 var(--narrow); letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:5px; }
.ins-kv dd { margin:0; font-family:var(--mono); font-size:clamp(15px,1.45vw,23px);
  line-height:1.2; color:var(--starlight); }
.ins-kv dd sub { font-size:.62em; color:var(--moonlight); }
.ins-deltas { margin:clamp(12px,1.3vw,18px) 0 0; display:grid; gap:9px; }
.ins-deltas > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:baseline; }
.ins-deltas dt { font:500 10px/1.5 var(--narrow); letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); }
.ins-deltas dd { margin:0; display:flex; align-items:baseline; gap:6px;
  font-family:var(--mono); font-size:clamp(13px,1.15vw,17px); }
.ins-deltas dd span { color:var(--dim); }
.ins-deltas dd i { font-style:normal; color:var(--dim); }
.ins-deltas dd b { font-weight:500; color:var(--ground); }
.ins-card .algo { margin:clamp(10px,1.1vw,16px) 0 0; background:transparent; box-shadow:none;
  padding:0; overflow-x:auto; }
.ins-card .algo code { font-size:12.5px; }
.ins-card .algo-ctl { margin-top:14px; }
/* the same answer the sampler tiles give, minus the frame zoom: they are the tiles without a
   picture, so the lift and the ring are what they have to offer. The algorithm card keeps still —
   it is a listing to read, not a tile to poke. */
.ins-card { transition:box-shadow .35s var(--e-out), transform .35s var(--e-out); }
.ins-card:not(.ins-card--wide):hover, .ins-card:not(.ins-card--wide):focus-within {
  transform:translateY(-5px);
  background:#0E141A;
  box-shadow:0 0 0 1px rgba(24,36,32,.3), 0 24px 40px -26px rgba(0,0,0,1);
}
@media (prefers-reduced-motion:reduce) {
  .ins-card:not(.ins-card--wide):hover, .ins-card:not(.ins-card--wide):focus-within { transform:none; }
}
@media (max-width:1149px) {
  /* measured: a tile needs about 250px to hold its content with room left over. At 1150 the four
     columns give 250px each; at 1024 they would give 223px and the text starts to clip, and two
     columns would give 460px squares, which is the empty box the first attempt was. So below
     1150 the tiles take their content height instead of the square. */
  .ins-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ins-card:not(.ins-card--wide) { aspect-ratio:auto; }
}
@media (max-width:700px) {
  .ins-grid { grid-template-columns:minmax(0,1fr); }
  .ins-pts, .ins-kv, .ins-deltas { margin-top:16px; }
}