/* ═══════════════════════════════════════════════════════════
   ProgramGym — tokens, theming, motion
   Palette follows the paper's blue-green family. Chart steps
   are fitted, not eyeballed: every one clears 3:1 on its own
   surface. Regenerate the page with tools/gen.py.
   ═══════════════════════════════════════════════════════════ */

:root {
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure: 1400px;
  --measure-prose: 1000px;

  /* Expo-out: quick departure, long glide to rest. */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-pop:  cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .16s;
  --t-base: .3s;

  --hud-h: 56px;
  /* Remains 1vh at normal zoom; fitStages corrects desktop zoom-out only. */
  --figure-vh: 1vh;
  /* How far you scroll to pass one page. The pane is one screen tall, so the
     part above 100vh is how long it holds before handing over: 125vh is a
     quarter-screen hold. Raising this makes every page slower to leave. */
  --stage-run: calc(112 * var(--figure-vh));
}

[data-theme="light"] {
  --bg0: #ffffff;
  --bg1: #f7f8fa;
  --bg2: #f1f3f6;
  --panel: #ffffff;
  --line: #e4e7ec;
  --line-2: #d3d8e0;
  --ink: #15181d;
  --ink-2: #4e5663;
  --ink-3: #8992a1;

  --accent: #15785c;
  --accent-soft: rgba(21, 120, 92, .10);
  --on-accent: #ffffff;
  --hf: #ffd21e;
  --on-hf: #15181d;
  --arxiv: #b31b1b;

  --hud-bg: rgba(255, 255, 255, .82);
  --shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 8px 24px -12px rgba(16, 20, 28, .12);
  --shadow-lg: 0 2px 4px rgba(16, 20, 28, .04), 0 24px 56px -24px rgba(16, 20, 28, .20);

  /* Corpus ramp: one hue, darkest = largest share. */
  --c-go:   #0d5242;
  --c-cpp:  #1f6d5a;
  --c-rust: #378674;
  --c-c:    #509f8c;
  /* Benchmark bars */
  --c-ours: #2a6e55;
  --c-base: #b9c2ce;
  --bval-ours: #ffffff;
  --bval-base: #15181d;
  --grid: rgba(21, 24, 29, .07);

  /* Brand icon inks */
  --i-claude:    #d97757;
  --i-openai:    #000000;
  --i-zai:       #2d2d2d;
  --i-google:    #4285f4;
  --i-deepseek:  #4d6bfe;
  --i-qwen:      #6950ef;
  --i-kimi:      #000000;
  --i-go:        #00add8;
  --i-rust:      #000000;
  --i-cpp:       #00599c;
  --i-c:         #7b8ba3;
}

[data-theme="dark"] {
  --bg0: #0b0f15;
  --bg1: #0e131a;
  --bg2: #141b24;
  --panel: #111820;
  --line: #1f2733;
  --line-2: #2c3644;
  --ink: #e7ecf3;
  --ink-2: #a3adbb;
  --ink-3: #6f7a89;

  --accent: #46b98f;
  --accent-soft: rgba(70, 185, 143, .14);
  --on-accent: #06130e;
  --hf: #ffd21e;
  --on-hf: #15181d;
  --arxiv: #c62828;

  --hud-bg: rgba(11, 15, 21, .80);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 56px -24px rgba(0, 0, 0, .7);

  --c-go:   #61d8bc;
  --c-cpp:  #3ab699;
  --c-rust: #35967f;
  --c-c:    #2d7a68;
  --c-ours: #43a584;
  --c-base: #4a5464;
  --bval-ours: #06231a;
  --bval-base: #e7ecf3;
  --grid: rgba(231, 236, 243, .07);

  --i-claude:    #d97757;
  --i-openai:    #ffffff;
  --i-zai:       #ffffff;
  --i-google:    #7cadf8;
  --i-deepseek:  #7d9dff;
  --i-qwen:      #9b87f5;
  --i-kimi:      #ffffff;
  --i-go:        #4ecbe8;
  --i-rust:      #ffffff;
  --i-cpp:       #4b9ad8;
  --i-c:         #9aa9bd;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: calc(var(--hud-h) + 10px); }

body {
  background: var(--bg0);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  transition: background var(--t-base) var(--ease-soft), color var(--t-base) var(--ease-soft);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); }

/* ═══════════════ HUD ═══════════════ */

.hud {
  position: sticky; top: 0; z-index: 90;
  background: var(--hud-bg);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-base) var(--ease-soft), border-color var(--t-base) var(--ease-soft);
}
.hud-in {
  max-width: var(--measure); margin: 0 auto;
  padding: 0 24px; height: var(--hud-h);
  display: flex; align-items: center; gap: 16px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 14.5px; font-weight: 700;
  color: var(--accent); letter-spacing: -.01em; white-space: nowrap;
}
.wordmark .mark {
  width: 26px; height: 26px; display: block; object-fit: contain;
  transition: transform .45s var(--ease-pop);
}
.wordmark:hover .mark { transform: rotate(-7deg) scale(1.08); }
.hud nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hud nav a {
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  padding: 7px 12px; border-radius: 7px;
  transition: color var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}
.hud nav a:hover { color: var(--ink); background: var(--bg2); }
.navbtn {
  color: var(--ink) !important; background: transparent;
  border: 1px solid var(--line-2);
  font-weight: 600 !important; padding: 6px 13px !important; border-radius: 999px !important;
}
.navbtn:hover { background: var(--bg2) !important; color: var(--ink) !important; border-color: var(--ink-3); }
.tbtn {
  margin-left: 6px; padding: 6px 12px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.tbtn:hover { color: var(--ink); border-color: var(--ink-3); }

/* ═══════════════ Hero ═══════════════ */

.hero { position: relative; padding: 46px 24px 12px; }
.hero-in { position: relative; max-width: var(--measure); margin: 0 auto; text-align: center; }

.papertitle {
  font-size: clamp(27px, 4.1vw, 44px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.028em;
  color: var(--ink); max-width: 1040px; margin: 0 auto;
  text-wrap: balance;
}
.papertitle .grad { color: var(--accent); }

.authors {
  margin: 20px auto 0; max-width: 1020px;
  font-size: 14.5px; line-height: 1.72; color: var(--ink-2);
  text-wrap: balance;
}
.authors b { font-weight: 600; color: var(--ink); }
.authors sup { font-size: .68em; font-weight: 400; color: var(--ink-3); }

.affils {
  margin: 9px auto 0; max-width: 820px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.75;
  color: var(--ink-3); letter-spacing: .01em;
}
.affils sup { font-size: .78em; }

.fnotes {
  margin: 9px auto 0;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); opacity: .9;
}

.tagline {
  margin: 22px auto 0; max-width: 1200px;
  font-size: clamp(19px, 2.3vw, 28px); font-weight: 700;
  line-height: 1.32; letter-spacing: -.02em; color: var(--ink);
  text-wrap: balance;
}
.tagline .grad { color: var(--accent); }
@media (min-width: 761px) {
  .tagline { white-space: nowrap; }
}

/* ═══════════════ Buttons ═══════════════ */

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

.btn-hero {
  display: inline-flex; align-items: center; gap: 9px; line-height: 1;
  font-size: 13.5px; font-weight: 600; padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg0);
  transition: transform var(--t-fast) var(--ease-soft), opacity var(--t-fast) var(--ease-soft);
}
.btn-hero:hover { opacity: .86; transform: translateY(-1.5px); }
.btn-hero:active { transform: translateY(0) scale(.99); }
.btn-hero .bicon { width: 15px; height: 15px; flex: none; }
/* HuggingFace's own mark is #FFD21E, the same yellow as the button under it.
   A white disc is what lets the real logo read instead of a dark silhouette. */
.btn-hero.primary .bicon { width: 21px; height: 21px; padding: 1px; background: #fff; border-radius: 50%; }

/* Each hero button wears the colour of what it links to: HuggingFace yellow,
   arXiv red. The nav's Paper keeps its quiet outline — a red pill up there is
   the half of this pairing that looked wrong. */
.btn-hero.primary, .btn-hero.paper { position: relative; overflow: hidden; }
.btn-hero.primary { background: var(--hf); border-color: var(--hf); color: var(--on-hf); }
.btn-hero.paper { background: var(--arxiv); border-color: var(--arxiv); color: #fff; }
/* the arXiv glyph is all thin strokes — it needs a little more than 15px */
.btn-hero.paper .bicon { width: 17px; height: 17px; }
.btn-hero.primary::after, .btn-hero.paper::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease-soft);
}
.btn-hero.primary:hover::after, .btn-hero.paper:hover::after { left: 125%; }

/* ═══════════════ Figure ═══════════════ */

.section { max-width: var(--measure); margin: 0 auto; padding: 32px 24px 0; }

.figrow {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: 18px; align-items: stretch;
}

.vpanel {
  position: relative;
  min-width: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 22px 18px;
  box-shadow: var(--shadow);
  transition: background var(--t-base) var(--ease-soft), border-color var(--t-base) var(--ease-soft),
              box-shadow .45s var(--ease-soft), transform .45s var(--ease-soft);
}
.vpanel:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.vtitle {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.vtitle.sys { color: var(--accent); font-size: 11.5px; letter-spacing: .10em; }
.fighead { margin-bottom: 16px; }
.figname { font-size: clamp(26px, calc(3.4 * var(--figure-vh)), 40px); font-weight: 700; color: var(--accent);
           letter-spacing: -.025em; line-height: 1.04; }
.fignote { margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.vsub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }

/* ── Icons ── */
.mi { width: 100%; height: 100%; fill: currentColor; display: block; }
.ic { display: block; width: 20px; height: 20px; margin: 0 auto 5px; }
.ic img { width: 100%; height: 100%; display: block; object-fit: contain; }
.i-claude    { color: var(--i-claude); }
.i-openai    { color: var(--i-openai); }
.i-zai       { color: var(--i-zai); }
.i-google    { color: var(--i-google); }
.i-deepseek  { color: var(--i-deepseek); }
.i-qwen      { color: var(--i-qwen); }
.i-kimi      { color: var(--i-kimi); }
.i-go        { color: var(--i-go); }
.i-rust      { color: var(--i-rust); }
.i-cpp       { color: var(--i-cpp); }
.i-c         { color: var(--i-c); }

/* ── Donut ── */

.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.donut { position: relative; width: 100%; max-width: 292px; aspect-ratio: 1; }
.donut svg { width: 100%; height: 100%; display: block; overflow: visible; }

.seg {
  fill: none; stroke-width: 26; stroke-linecap: butt;
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.25s var(--ease), stroke-width .22s var(--ease-soft),
              opacity .22s var(--ease-soft);
  transition-delay: var(--d, 0s), 0s, 0s;
  cursor: pointer;
}
.in .seg { stroke-dashoffset: 0; }
.donut:hover .seg { opacity: .38; }
.donut:hover .seg:hover { opacity: 1; stroke-width: 30; }

.donut-core {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
}
.donut-core .k {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.donut-core .n {
  font-size: 30px; font-weight: 700; color: var(--ink);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.donut-core .u { font-size: 11px; color: var(--ink-3); }

.dlegend { width: 100%; display: flex; flex-direction: column; gap: 1px; }
.dlegend li {
  list-style: none; display: grid;
  grid-template-columns: 16px 1fr auto auto; align-items: center; gap: 9px;
  padding: 5px 8px; border-radius: 8px; font-size: 12.5px;
  transition: background var(--t-fast) var(--ease-soft);
}
.dlegend li:hover { background: var(--bg2); }
/* Keep the hover tint animating once the reveal rule has claimed `transition`. */
.dlegend li.reveal.in {
  transition: opacity .72s var(--ease), translate .72s var(--ease),
              background var(--t-fast) var(--ease-soft);
}
.dlegend .sw { width: 16px; height: 16px; }
.dlegend .nm { color: var(--ink); font-weight: 600; }
.dlegend .ct { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dlegend .pc {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: right;
}

/* ── Bars ── */

.barchart { width: 100%; }

/* Header and plot share one grid so icons sit exactly over their bar. */
.bhead, .plot {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 5px; padding-left: 30px;
}

.bhead { align-items: end; margin-bottom: 9px; }
.bh { min-width: 0; text-align: center; }
.bh .nm {
  display: block; font-size: 9.6px; font-weight: 600; line-height: 1.25;
  color: var(--ink-2); font-style: italic; overflow-wrap: anywhere;
}
.bh .vr {
  display: block; font-size: 8.6px; line-height: 1.25; color: var(--ink-3);
  font-style: italic; overflow-wrap: anywhere;
}
.bh.ours .nm { color: var(--c-ours); }

.plot { position: relative; height: 300px; align-items: end; border-bottom: 1px solid var(--line-2); }

.gridline { position: absolute; left: 30px; right: 0; border-top: 1px dashed var(--grid); pointer-events: none; }
.gridline span {
  position: absolute; left: -30px; top: -8px;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.bar { position: relative; height: 100%; min-width: 0; cursor: pointer; }

.bfill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--c-base);            /* flat fill — no gradient */
  border-radius: 4px 4px 0 0;
  transition: height .95s var(--ease), filter .22s var(--ease-soft);
}
.bar.ours .bfill { background: var(--c-ours); }
.bar.on .bfill { height: var(--h); }
.bar.pop .bfill { animation: pop .5s var(--ease-pop); }
.bar:hover .bfill { filter: brightness(1.12); }

@keyframes pop {
  0%   { transform: scaleY(.9);  }
  60%  { transform: scaleY(1.03); }
  100% { transform: scaleY(1);   }
}
.bfill { transform-origin: bottom; }

/* Value sits inside the bar, just under its top edge — as in the paper figure. */
.bval {
  position: absolute; left: 0; right: 0; bottom: var(--h);
  margin-bottom: -22px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--bval-base); text-align: center;
  font-variant-numeric: tabular-nums; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease-soft) .45s;
  z-index: 1;                           /* the fill comes later in the DOM and would paint over the value */
}
.bar.ours .bval { color: var(--bval-ours); }
.bar.on .bval { opacity: 1; }

/* Jump curves drawn over the plot once the bars are in place. */
.arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arcpath {
  fill: none; stroke: var(--c-ours); stroke-width: 2.4;
  stroke-linecap: round; opacity: .95;
}
.arcpath.dashed { stroke-dasharray: 7 5.5; }
.archead { fill: var(--c-ours); opacity: 0; transition: opacity .28s var(--ease-soft); }
.archead.on { opacity: 1; }

.blegend {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.blegend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.blegend .line, .blegend .dash {
  display: inline-block; width: 22px; height: 0; border-radius: 0;
  margin-right: 7px; vertical-align: 3px;
}
.blegend .line { border-top: 2.5px solid var(--c-ours); }
.blegend .dash { border-top: 2.5px dashed var(--c-ours); }

.baxis {
  margin-top: 10px; text-align: center;
  font-size: 13px; font-weight: 700; font-style: italic;
  color: var(--ink-2); letter-spacing: -.01em;
}

.figcap {
  max-width: var(--measure-prose); margin: 18px auto 0;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-3); text-align: center;
}
.figcap b { color: var(--ink-2); font-weight: 600; }

/* ── Tooltip ── */

.tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 9px 38px 9px 12px; box-shadow: var(--shadow-lg);
  font-size: 12px; color: var(--ink-2);
  width: max-content; max-width: min(380px, calc(100vw - 28px));
  max-height: calc(100dvh - 24px); overflow: auto; overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0; translate: 0 4px;
  transition: opacity .16s var(--ease-soft), translate .16s var(--ease-soft);
}
.tip.on { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; }
.tip-close {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px;
  border: 0; border-radius: 5px; background: transparent; color: var(--ink-2);
  font: 20px/1 var(--sans); cursor: pointer;
}
.tip-close:hover, .tip-close:focus-visible { background: var(--bg2); color: var(--ink); }
.tip .t { font-weight: 700; color: var(--ink); display: block; margin-bottom: 2px; }
.tip .v { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Table fallback ── */

.tablebtn {
  display: block; margin: 20px auto 0;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  background: none; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tablebtn:hover { color: var(--ink); border-color: var(--ink-3); }
.datatable { max-width: 760px; margin: 16px auto 0; overflow-x: auto; }
.datatable table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.datatable th, .datatable td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.datatable th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.datatable td { color: var(--ink-2); }
.datatable td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.datatable caption { text-align: left; font-size: 11.5px; color: var(--ink-3); padding-bottom: 8px; }

/* ═══════════════ One figure, one screen ═══════════════

   A figure section is a runway taller than the viewport holding a pane that
   sticks below the HUD. Scrolling stays completely ordinary — nothing is
   pinned by script and no wheel event is intercepted — but the figure takes
   the screen, holds it for a screenful, and then the next section slides up
   over it. The pane paints an opaque background so that hand-off is clean.

   Only above a viewport that can actually hold a figure; shorter screens get
   the plain stacked flow, which is what the page did before.
   ═══════════════════════════════════════════════════════ */

.stage { position: relative; }

@media (min-height: 700px) and (min-width: 761px) {
  .stage { height: var(--stage-run); }
  .stage-in {
    position: sticky; top: var(--hud-h);
    height: calc(100 * var(--figure-vh) - var(--hud-h));
    display: flex; align-items: stretch;
    background: var(--bg0);
    transition: background var(--t-base) var(--ease-soft);
  }
  /* A page whose content cannot fit a screen gives up its pin rather than
     hiding the overflow behind a scrollbar nobody expects. Without this the
     pane is a third scroll container, silently taking the wheel whenever the
     data table is open or the viewport is short. Set from script, which is
     the only place the natural height can be measured. */
  .stage.unpinned { height: auto; }
  .stage.unpinned > .stage-in { position: static; height: auto; }
  .stage.unpinned > .stage-in > .section,
  .stage.unpinned > .stage-in > .page-in { height: auto; padding-top: 44px; padding-bottom: 44px; }

  .stage-in > .section,
  .stage-in > .page-in {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; min-height: 0;
    padding-top: 18px; padding-bottom: 18px;
  }

  /* The walkthrough iframes grow into whatever is left under the heading. */
  .stage-in .pipe-embed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  /* Without a floor the frame loses its height race against the heading and
     collapses to a bare rectangle as the window shrinks. */
  .stage-in .pipe-embed iframe { flex: 1; min-height: min(480px, calc(62 * var(--figure-vh))); height: auto; }

  .stage-in .page-head { margin-bottom: clamp(12px, calc(2.2 * var(--figure-vh)), 30px); }
  .stage-in .page-head h2 { font-size: clamp(23px, calc(3.3 * var(--figure-vh)), 40px); }
  .stage-in .page-head p { font-size: clamp(13px, calc(1.7 * var(--figure-vh)), 15.5px); }

  /* The walkthrough pages spend their height on the figure. */
  #pipeline .section, #agent .section { padding-top: 10px; padding-bottom: 10px; }
  #pipeline .fighead, #agent .fighead { margin-bottom: clamp(8px, calc(1.6 * var(--figure-vh)), 18px); }

  /* Figure 1 is two cards rather than one frame, so its parts scale instead. */
  .stage-in .figrow { flex: 1; min-height: 0; }
  .stage-in .figrow .vpanel { display: flex; flex-direction: column; min-height: 0; }
  .stage-in .donut-wrap { flex: 1; min-height: 0; justify-content: center; }
  .stage-in .donut { max-width: min(292px, calc(30 * var(--figure-vh))); }
  .stage-in .barchart { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .stage-in .plot { flex: 1; min-height: 160px; height: auto; }
}

@supports (animation-timeline: view()) {
  @media (min-height: 700px) and (min-width: 761px) {
    .stage { view-timeline-name: --stage; view-timeline-axis: block; }
    .stage-in > .section,
    .stage-in > .page-in {
      /* longhands on purpose: the `animation` shorthand resets
         animation-timeline and animation-duration back to their initials */
      animation-name: stage-pass;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --stage;
      animation-range: cover 0% cover 100%;
    }
    @keyframes stage-pass {
      0%        { opacity: .55; transform: translateY(22px) scale(.988); }
      34%, 62%  { opacity: 1;   transform: none; }
      100%      { opacity: 0;   transform: translateY(-22px) scale(.97); }
    }
  }
}

/* The theme change is a circle opening from the toggle, not a cross-fade:
   the outgoing page holds still underneath while the new one is clipped in
   over it. Scoped to .vt-theme so an unrelated view transition is unaffected. */
.vt-theme::view-transition-old(root),
.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.vt-theme::view-transition-old(root) { z-index: 1; }
.vt-theme::view-transition-new(root) { z-index: 2; }

/* ═══════════════ Citation ═══════════════ */

.section.citation {
  --citation-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --citation-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  padding-top: 64px; font-family: var(--citation-sans);
}
.citation-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 20px; }
.citation-head h2 { margin: 0; color: var(--ink); font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.citation-head a { color: var(--ink-2); font-size: 13px; line-height: 1.5; text-decoration: none; transition: color var(--t-base) var(--ease-soft); }
.citation-head a:hover { color: var(--accent); }
.citation-head a span { display: inline-block; transition: transform var(--t-base) var(--ease); }
.citation-head a:hover span { transform: translate(2px, -2px); }
.citation-card {
  min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow);
  transition: border-color .4s var(--ease-soft), background var(--t-base) var(--ease-soft);
}
.citation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 4px 24px; }
.citation-format { color: var(--ink-3); font: 500 12px/1.5 var(--citation-sans); letter-spacing: .01em; }
.citation-copy {
  display: grid; place-items: center; min-width: 98px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel);
  color: var(--ink-2); font: 500 13px var(--citation-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft), color .3s var(--ease-soft), transform .3s var(--ease);
}
.citation-copy > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 7px; transition: opacity .25s var(--ease-soft), transform .35s var(--ease); }
.citation-copy svg { width: 16px; height: 16px; }
.citation-copy .copy-done { opacity: 0; transform: translateY(6px); }
.citation-copy:active { transform: scale(.97); }
@media (hover: hover) {
  .citation-copy:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
}
.citation-card.copied { border-color: var(--accent); }
.copied .citation-copy { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.copied .copy-idle { opacity: 0; transform: translateY(-6px); }
.copied .copy-done { opacity: 1; transform: translateY(0); }
.citation-code {
  margin: 0; padding: 14px 24px 24px; overflow-x: auto; color: var(--ink-2);
  font: 400 13px/1.75 var(--citation-mono); letter-spacing: 0; tab-size: 2;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.citation-code code { font: inherit; }
.citation-copy:focus-visible, .citation-head a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.citation-code:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.citation-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.copy-failed .citation-status { position: static; width: auto; height: auto; padding: 0 24px 18px; margin: 0; clip-path: none; white-space: normal; color: var(--ink-2); font-size: 12px; }
@media (max-width: 760px) {
  .section.citation { padding-top: 44px; }
  .citation-head { margin-bottom: 16px; }
  .citation-card { border-radius: 15px; }
  .citation-toolbar { padding: 10px 12px 0 16px; }
  .citation-code { padding: 12px 16px 20px; font-size: 12px; }
  .copy-failed .citation-status { padding: 0 16px 16px; }
}

/* ═══════════════ Footer ═══════════════ */

footer {
  margin-top: 72px; border-top: 1px solid var(--line);
  background: var(--bg1); font-size: 12px; color: var(--ink-3);
  transition: background var(--t-base) var(--ease-soft), border-color var(--t-base) var(--ease-soft);
}
.footer-in { max-width: var(--measure); margin: 0 auto; padding: 36px 24px 0; }

/* Brand on the left, link columns on the right. */
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px; align-items: start;
}
.foot-brand .wordmark { font-size: 15px; }
.foot-blurb {
  margin-top: 11px; max-width: 340px;
  font-size: 13px; line-height: 1.65; color: var(--ink-2);
}

.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-col { display: flex; flex-direction: column; align-items: start; gap: 7px; }
.foot-h {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.foot-col a {
  font-size: 13px; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-soft);
}
.foot-col a:hover { color: var(--accent); }
/* Mark the links that leave the site, as the nav's Paper button does. */
.foot-col a[target]::after { content: "\2009\2197"; color: var(--ink-3); font-size: .9em; }

/* Affiliation marks. Each sits on a white tile in BOTH themes: two of the
   three are navy-on-transparent and all but disappear against the dark
   footer, and a tile keeps the brand colours right instead of filtering
   them. The tile is literally white, so its hairline is a fixed alpha
   rather than a theme token. */
.orgrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.org {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(16, 20, 28, .12);
  transition: transform var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-fast) var(--ease-soft);
}
.org img { width: 36px; height: 36px; object-fit: contain; display: block; }
.org:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.org:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.foot-btm {
  margin-top: 32px; padding: 16px 0 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3);
}

/* ═══════════════ Entrance ═══════════════ */

.rise { opacity: 0; translate: 0 18px; }
.rise.in {
  opacity: 1; translate: 0 0;
  transition: opacity .85s var(--ease), translate .85s var(--ease);
  transition-delay: var(--d, 0s);
}
.focusin { opacity: 0; translate: 0 22px; filter: blur(9px); scale: .985; }
.focusin.in {
  opacity: 1; translate: 0 0; filter: blur(0); scale: 1;
  transition: opacity 1.05s var(--ease), translate 1.05s var(--ease),
              filter 1.05s var(--ease), scale 1.05s var(--ease);
  transition-delay: var(--d, 0s);
}

/* Each marked component lands one beat after the one before it. */
.reveal { opacity: 0; translate: 0 16px; }
.reveal.in {
  opacity: 1; translate: 0 0;
  transition: opacity .72s var(--ease), translate .72s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .focusin, .reveal { opacity: 1; translate: none; filter: none; scale: 1; transition: none; }
  .seg { stroke-dashoffset: 0 !important; transition: none; }
  .bfill { height: var(--h) !important; transition: none; animation: none !important; }
  .bval { opacity: 1 !important; transition: none; }
  .btn-hero.primary::after, .btn-hero.paper::after { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════ Responsive ═══════════════ */

@media (max-width: 1120px) {
  .figrow { grid-template-columns: minmax(0, 1fr); }
  .donut { max-width: 248px; }
}

@media (max-width: 760px) {
  .hud-in { padding: 0 16px; gap: 8px; }
  .hud nav a.hide-s { display: none; }
  .hero { padding: 32px 18px 10px; }
  .authors { font-size: 13px; }
  .affils { font-size: 10.5px; }
  .section { padding: 26px 16px 0; }
  .vpanel { padding: 18px 14px 16px; border-radius: 15px; }

  /* Keep all 11 columns on screen: shed the variant line, rotate the name. */
  .bhead, .plot { padding-left: 24px; gap: 3px; }
  .gridline { left: 24px; }
  .gridline span { left: -24px; }
  .bh .vr { display: none; }
  .bh .nm {
    font-size: 8px; writing-mode: vertical-rl; rotate: 180deg;
    margin: 0 auto; max-height: 76px; overflow: hidden; white-space: nowrap;
  }
  .ic { width: 15px; height: 15px; }
  .plot { height: 210px; }
  .bval { font-size: 9.5px; margin-bottom: -16px; }
  .pages .page-in { padding: 40px 16px; }

  /* Wide figures stay legible and pan sideways rather than shrinking away. */
  .scatwrap, .kwrap, .curvewrap { overflow-x: auto; overscroll-behavior-x: contain; }
  .scatwrap .scat { min-width: 680px; }
  .kwrap .kplot, .curvewrap .curves { min-width: 500px; }
  .footer-in { padding: 28px 16px 0; }
  .foot-top { grid-template-columns: 1fr; gap: 26px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .foot-blurb { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   Pipeline — Figure 2 walkthrough, embedded from program-env.html
   ═══════════════════════════════════════════════════════════ */

.pipe-embed { padding: 0; overflow: hidden; }
.pipe-embed iframe {
  display: block; width: 100%; border: 0; background: var(--bg1);
  height: clamp(560px, calc(78 * var(--figure-vh)), 760px);
}
.pipe-embed.compact iframe { flex: none; height: var(--walkthrough-height); }
.pipe-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.pipe-foot a { color: var(--accent); font-weight: 600; white-space: nowrap; margin-left: auto; }
@media (max-width: 720px) {
  .pipe-embed iframe { height: 88vh; }
  .pipe-foot { flex-direction: column; align-items: flex-start; }
}

/* ── Walkthrough skeleton: shown until the embedded figure reports ready ── */
.pipe-embed { position: relative; }
.pipe-skel {
  position: absolute; inset: 0 0 41px 0; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 20%, 300px); gap: 0;
  background: var(--bg1); transition: opacity .4s var(--ease-soft); pointer-events: none;
}
.pipe-skel.off { opacity: 0; }
.pipe-skel .sk-sheet { margin: 14px 14px 12px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); position: relative; overflow: hidden; }
.pipe-skel .sk-cap { position: absolute; left: 12px; top: 11px; width: 38%; height: 34px; border-radius: 4px; background: var(--bg2); }
.pipe-skel .sk-fig { position: absolute; inset: 60px 24px 24px 24px; border-radius: 6px;
  background: linear-gradient(100deg, var(--bg2) 20%, var(--bg1) 40%, var(--bg2) 60%); background-size: 240% 100%; animation: skshimmer 1.6s linear infinite; }
.pipe-skel .sk-rail { border-left: 1px solid var(--line); padding: 16px 15px; display: flex; flex-direction: column; gap: 12px; }
.pipe-skel .sk-rail i { display: block; height: 11px; border-radius: 3px; background: var(--bg2); width: 86%; }
.pipe-skel .sk-rail i:nth-child(2n) { width: 64%; }
.pipe-skel .sk-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
@keyframes skshimmer { from { background-position: 100% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .pipe-skel .sk-fig { animation: none; } }
@media (max-width: 880px) { .pipe-skel { grid-template-columns: 1fr; } .pipe-skel .sk-rail { display: none; } }

/* ── Walkthrough footer: subagent switch ── */
.pipe-follow { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pipe-follow .fl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.pipe-follow button { appearance: none; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); border-radius: 6px; cursor: pointer; padding: 5px 9px; font-family: var(--mono); font-size: 11px; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.pipe-follow button:hover { color: var(--ink); border-color: var(--ink-3); }
.pipe-follow button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ═══════════════ Program-Env · Results — six runway pages ═══════════════ */
/* Each page is an ordinary .stage (runway + sticky pane, see "One figure, one screen"); nothing is pinned by script. */
.pages { position: relative; }
.page { position: relative; }
.stage.alt > .stage-in { background: var(--bg1); }
.page-in { max-width: var(--measure); width: 100%; margin: 0 auto; padding: 56px 24px; }
.page-head { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.page-head .eyebrow { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.page-head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; color: var(--ink); margin: 0 0 14px; text-wrap: balance; }
.page-head h2 b { color: var(--accent); font-weight: 700; }
.page-head p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.figsub { font-family: 'Tinos', 'Times New Roman', Times, serif; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-align: center; margin: 12px 0 0; }
.figsub.top { text-align: left; margin: 0 0 12px; }
.envrow { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: stretch; }
#envIntPanel { display: flex; flex-direction: column; justify-content: center; }
#envCatPanel { display: flex; flex-direction: column; }
#envCatPanel .ringfig { flex: 1; display: flex; align-items: center; }
#envCatPanel .vtitle, #envIntPanel .vtitle, #envTokPanel .vtitle, #envDistPanel .vtitle { margin-bottom: 10px; }

/* Figure 4: ring with labels around it, Times, paper teal ramp */
.ringfig svg { width: 100%; height: auto; display: block; overflow: visible; font-family: 'Tinos', 'Times New Roman', Times, serif; }
.ringbg { fill: none; stroke: #DCEDEA; stroke-width: 3; opacity: .7; }
.cseg { stroke-width: 36; }
.rlab polyline { fill: none; stroke: #7A8F8B; stroke-width: .8; }
.rlab .rn { font-size: 12px; font-weight: 700; fill: var(--ink); }
.rlab .rv { font-size: 10px; font-weight: 700; fill: var(--ink-2); }
.rlab { opacity: 0; translate: 0 6px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: var(--d, 0s); }
.in .rlab { opacity: 1; translate: 0 0; }
.rc-n { font-size: 30px; font-weight: 700; fill: var(--ink); letter-spacing: -.02em; }
.rc-u { font-size: 11.5px; fill: var(--ink-3); }
.ringfig .cseg:hover { stroke-width: 40; }
.cat-legend { display: none; }

/* Table 1, set like the paper */
.ptable { width: 100%; border-collapse: collapse; font-family: 'Tinos', 'Times New Roman', Times, serif; font-size: 15.5px; color: var(--ink); }
.ptable-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.ptable th { text-align: left; font-weight: 700; padding: 10px 12px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ptable td { padding: 9px 12px; }
.ptable tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
.ptable .n { text-align: right; font-variant-numeric: tabular-nums; }
.ptable tbody tr { transition: background var(--t-fast) var(--ease-soft); }
.ptable tbody tr:hover { background: var(--bg2); }
.ptable tr.reveal { display: table-row; }

/* (a)(b)(c): one figure, paper colours */
.abc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: end; }
.abc .pl { font-family: 'Tinos', 'Times New Roman', Times, serif; font-weight: 700; font-size: 13px; text-align: center; color: var(--ink); margin-top: 4px; }
.abc .abcnote { font-family: 'Tinos', 'Times New Roman', Times, serif; font-size: 11.5px; color: var(--ink); text-align: left; padding-left: 48px; margin-bottom: -14px; position: relative; z-index: 1; }
.vb { width: 100%; height: auto; display: block; overflow: visible; font-family: 'Tinos', 'Times New Roman', Times, serif; }
.vb .grid { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 3; }
.vb .axis { stroke: var(--ink); stroke-width: 1; }
.vb .tk { font-size: 9px; font-weight: 700; fill: var(--ink); text-anchor: end; }
.vb .yt { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.vb .bf { stroke-width: 1; transform: scaleY(0); transition: transform 1.05s var(--ease); transition-delay: var(--d, 0s); }
.in .vb .bf { transform: scaleY(1); }
.vb .bv { font-size: 9.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; opacity: 0; transition: opacity .5s var(--ease-soft); transition-delay: calc(var(--d, 0s) + .7s); }
.in .vb .bv { opacity: 1; }
.vb .bl { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.vb .bs { font-size: 9px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.vb .bar:hover .bf { filter: brightness(.96); }
.vb .ref { stroke: #D1322E; stroke-width: 1.2; opacity: 0; transition: opacity .6s var(--ease-soft); transition-delay: 1s; }
.vb .ref.dash { stroke-dasharray: 5 3; }
.in .vb .ref { opacity: 1; }
.vb .rl { font-size: 8.5px; font-weight: 700; fill: #D1322E; text-anchor: start; opacity: 0; transition: opacity .6s var(--ease-soft); transition-delay: 1.1s; }
.in .vb .rl { opacity: 1; }
[data-theme="dark"] .vb .bf { filter: saturate(.9); }

/* Figure 5: violins in the paper's pastels, legend at the right */
.viorow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 150px; gap: 14px; align-items: center; }
.vio { width: 100%; height: auto; display: block; overflow: visible; font-family: 'Tinos', 'Times New Roman', Times, serif; }
.vio .grid { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 3; }
.vio .axis { stroke: var(--ink); stroke-width: 1; }
.vio .tk { font-size: 9px; font-weight: 700; fill: var(--ink); text-anchor: end; }
.vio .yt { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.vio .bl { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.vio .bs { font-size: 9px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.vio .den { fill: var(--f); fill-opacity: .9; stroke: var(--c); stroke-opacity: .5; stroke-width: .6; transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.in .vio .den { transform: scaleX(1); }
.vio .box { fill: var(--f); stroke: var(--c); stroke-width: 1.4; }
.vio .wh, .vio .cap { stroke: #6B7A86; stroke-width: 1; }
.vio .med { stroke: #E98A6B; stroke-width: 1.8; }
.vio .mean { fill: #3A4A5A; }
.vio .out { fill: none; stroke: #6B7A86; stroke-width: .7; }
.vio .box, .vio .wh, .vio .cap, .vio .med, .vio .mean, .vio .out { opacity: 0; transition: opacity .6s var(--ease-soft); transition-delay: calc(var(--d, 0s) + .55s); }
.in .vio .box, .in .vio .wh, .in .vio .cap, .in .vio .med, .in .vio .mean, .in .vio .out { opacity: 1; }
.vio .vl:hover .den { fill-opacity: 1; stroke-opacity: 1; }
.vio .hit { fill: transparent; pointer-events: all; }
.tip .tt { border-collapse: collapse; margin-top: 4px; }
.tip .tt td { padding: 1px 10px 1px 0; color: var(--ink-3); font-size: 11.5px; }
.tip .tt td.v { white-space: nowrap; }
.tip .tt td.v { padding-right: 0; text-align: right; }
.violeg { display: flex; flex-direction: column; gap: 10px; font-family: 'Tinos', 'Times New Roman', Times, serif; font-size: 11.5px; font-weight: 700; color: var(--ink); padding-left: 6px; }
.violeg span { display: inline-flex; align-items: center; gap: 8px; }
.violeg i { display: inline-block; width: 16px; height: 11px; }
.violeg .l-den { background: #E6D3F0; border: 1px solid #B89BD0; border-radius: 6px; }
.violeg .l-box { border: 1.4px solid #B89BD0; background: #E6D3F0; border-radius: 1px; }
.violeg .l-med { height: 0; border-top: 2px solid #E98A6B; }
.violeg .l-mean { width: 8px; height: 8px; background: #3A4A5A; transform: rotate(45deg); margin-left: 4px; }
.violeg .l-wh { height: 0; border-top: 1px solid #6B7A86; }
.violeg .l-out { width: 7px; height: 7px; border: 1px solid #6B7A86; border-radius: 50%; margin-left: 4px; }

/* ── Experiments: survival curves (paper colours), scatter with broken axis, K-rounds plot, summary table ── */
.curvewrap { position: relative; max-width: min(760px, calc(72 * var(--figure-vh))); margin: 0 auto; }
.curves, .scat, .kplot { width: 100%; height: auto; display: block; overflow: visible; font-family: 'Tinos', 'Times New Roman', Times, serif; }
.curves .grid, .kplot .grid, .scat .grid { stroke: #B9B9B9; stroke-width: .75; stroke-dasharray: 3 3; opacity: .8; }
.curves .frame, .kplot .frame, .scat .frame { fill: none; stroke: var(--ink); stroke-width: 1.15; }
.curves .tk, .kplot .tk { font-size: 10.5px; fill: var(--ink); }
.scat .tk { font-size: 23px; fill: var(--ink); }
.curves .yt, .curves .xt, .kplot .yt, .kplot .xt { font-size: 12px; font-weight: 700; fill: var(--ink); }
.scat .yt, .scat .xt { font-size: 30px; font-weight: 700; fill: var(--ink); }
.curves .lg { font-size: 9.5px; fill: var(--ink); }
.curves .legbg { fill: var(--panel); fill-opacity: .92; stroke: #D0D0D0; }
.curves .cv { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linejoin: round; }
/* Reveal all four series at the same horizontal pace. Keep their data intact. */
.curves .curve-reveal { clip-path: inset(0 100% 0 0); opacity: 0; }
.in .curves .curve-reveal {
  clip-path: inset(0);
  opacity: 1;
  transition: clip-path 2.6s cubic-bezier(.4, 0, .2, 1) .15s, opacity .7s ease .15s;
}
.curves .cv.dim { opacity: .25; }
.curves .cursor line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 3; }
.curves .cursor circle { stroke: #fff; stroke-width: 1.5; }
.curvestats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.curvestats .cs { display: inline-flex; align-items: center; gap: 7px; }
.curvestats .cs i { width: 18px; height: 3px; background: var(--c); border-radius: 2px; }
.curvestats .cs b { color: var(--ink); font-variant-numeric: tabular-nums; }
.curvestats .cs small { color: var(--ink-3); font-family: var(--mono); font-size: 10px; }
.scatwrap { max-width: 1100px; margin: 0 auto; }
.scat .brk { fill: var(--panel); }
.scat .brkline, .kplot .brkline { fill: none; stroke: var(--ink); stroke-width: 2; }
.scat .pn { font-size: 25px; font-weight: 700; fill: var(--ink); }
.scat .ps { font-size: 21px; font-style: italic; fill: var(--ink-2); }
.kplot .pn { font-size: 11.5px; font-weight: 700; fill: var(--ink); }
.kplot .ps { font-size: 10px; fill: var(--ink-2); }
.pt { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); cursor: default; }
.in .pt { opacity: 1; transform: none; }
.pt .hit { fill: transparent; pointer-events: all; }
.pt:hover .pn { fill: var(--accent); }
.pi.i-claude { color: var(--i-claude); } .pi.i-openai { color: var(--i-openai); } .pi.i-google { color: var(--i-google); } .pi.i-deepseek { color: var(--i-deepseek); } .pi.i-qwen { color: var(--i-qwen); } .pi.i-kimi { color: var(--i-kimi); } .pi.i-zai { color: var(--i-zai); }
.pi { fill: currentColor; }
.kwrap { width: 100%; max-width: 820px; margin: 0 auto; }
/* inside the sticky pane the plot must leave room for the heading: cap the chart height and let the SVG letterbox */
@media (min-height: 700px) and (min-width: 761px) {
  .stage-in .kplot, .stage-in .scat { max-height: calc(54 * var(--figure-vh)); }
  .stage-in .curves { max-height: calc(46 * var(--figure-vh)); }
  .stage-in .acts { max-height: calc(40 * var(--figure-vh)); }
}
.ptable.exp { font-size: 13px; }
.ptable.exp th, .ptable.exp td { padding: 7px 9px; }
.ptable.exp small { color: var(--ink-3); font-size: 11px; }
.ptable.exp tr.hi td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ptable.exp tr.hi td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
/* ── Experiments: action types across turns (four small multiples, one shared y axis) ── */
.actrow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1180px; margin: 0 auto; padding-left: 18px; }
.actrow .ylab { position: absolute; left: -6px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; font-family: 'Tinos', 'Times New Roman', Times, serif; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.actp { margin: 0; min-width: 0; }
.actp figcaption { text-align: center; font-family: 'Tinos', 'Times New Roman', Times, serif; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink); margin-bottom: 6px; }
.acts { width: 100%; height: auto; display: block; overflow: visible; font-family: 'Tinos', 'Times New Roman', Times, serif; }
.acts .grid { stroke: #B9B9B9; stroke-width: .75; stroke-dasharray: 3 3; opacity: .7; }
.acts .frame { fill: none; stroke: var(--ink); stroke-width: 1.05; }
.acts .tk { font-size: 9px; fill: var(--ink); }
.acts .xt { font-size: 10.5px; font-weight: 700; fill: var(--ink); }
.acts .bars { transform: scaleY(0); transform-origin: 50% 260px; transform-box: view-box; transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.in .acts .bars { transform: none; }
.acts .cur { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.acts .hit { pointer-events: all; cursor: crosshair; }
.actleg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.actleg .al { display: inline-flex; align-items: center; gap: 6px; }
.actleg .al i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.tip .tt td i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: -0.5px; }
@media (max-width: 1120px) { .actrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .actrow { grid-template-columns: 1fr; } }
@media (max-width: 1120px) { .envrow { grid-template-columns: minmax(0, 1fr); } .abc { grid-template-columns: minmax(0, 1fr); } .viorow { grid-template-columns: minmax(0, 1fr); } .violeg { flex-direction: row; flex-wrap: wrap; justify-content: center; } }
@media (max-width: 760px) {
  .page-in { padding: 40px 16px; }
  .ringfig { min-width: 0; width: 100%; }
  #envCatPanel .ringfig { flex: none; }
  .ringfig svg { max-width: 270px; margin: 0 auto; }
  .ringfig .rlab { display: none; }
  .cat-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 12px; list-style: none; }
  .cat-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0 7px; align-content: start; font-size: 11.5px; line-height: 1.4; }
  .cat-legend i { width: 10px; height: 10px; border-radius: 2px; margin-top: 3px; border: 1px solid rgba(0, 0, 0, .1); }
  .cat-legend .name { color: var(--ink); }
  .cat-legend .value { grid-column: 2; color: var(--ink-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
  .ptable { font-size: 13px; }
  .ptable th, .ptable td { padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .curves .curve-reveal { clip-path: none !important; opacity: 1 !important; transition: none !important; }
  .vb .bf, .vio .den { transform: none !important; transition: none; }
  .curves .cv { stroke-dashoffset: 0 !important; transition: none; } .acts .bars { transform: none !important; transition: none; } .pt { opacity: 1 !important; transform: none !important; transition: none; }
  .rlab, .vb .bv, .vb .ref, .vb .rl, .vio .box, .vio .wh, .vio .cap, .vio .med, .vio .mean, .vio .out { opacity: 1 !important; translate: none; transition: none; }
}