@charset "utf-8";
/* ---------- the site's look (全站精装修, 2026-10-22, the owner chose 方向一 知识树) ----------
   Fonts come with the site (static/fonts, SIL Open Font License 1.1, see OFL-*.txt there): Figtree for text and labels, Bricolage
   Grotesque for headings and large numbers, JetBrains Mono only for code. Chinese uses the system's own font (苹方, 微软雅黑, 思源黑体).
   Each file holds one script's letters; the browser fetches a file only when the page shows one of them. The second address serves a
   page one folder down (the tests wrap a build in out/<lab>/); on the site and in the Artifact the first one loads. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(static/fonts/figtree-latin.woff2) format("woff2"),url(../static/fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(static/fonts/figtree-latin-ext.woff2) format("woff2"),url(../static/fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:italic;font-weight:300 900;font-display:swap;src:url(static/fonts/figtree-italic-latin.woff2) format("woff2"),url(../static/fonts/figtree-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:italic;font-weight:300 900;font-display:swap;src:url(static/fonts/figtree-italic-latin-ext.woff2) format("woff2"),url(../static/fonts/figtree-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Figtree's digits in their even-width form (tools/tab_digits.py): --font-mono puts them first, so labels and numbers keep figures of one width as IBM Plex Mono gave them */
@font-face{font-family:"Figtree Tab";font-style:normal;font-weight:300 900;font-display:swap;src:url(static/fonts/figtree-tab-digits.woff2) format("woff2"),url(../static/fonts/figtree-tab-digits.woff2) format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(static/fonts/bricolage-grotesque-latin.woff2) format("woff2"),url(../static/fonts/bricolage-grotesque-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(static/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2"),url(../static/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(static/fonts/jetbrains-mono-latin.woff2) format("woff2"),url(../static/fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(static/fonts/jetbrains-mono-latin-ext.woff2) format("woff2"),url(../static/fonts/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(static/fonts/jetbrains-mono-greek.woff2) format("woff2"),url(../static/fonts/jetbrains-mono-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* colours: a white page, leaf-grey fills, ink with a touch of green. The tree's colours (--tr-*) name the parts of the knowledge tree, and a
   lab page wears its branch's colour (--branch, from html[data-limb], set by the router): the branch crumb, the step numbers, the slider
   fill, the selected option and the Next button. On the home page a tile or a branch button carries its own data-limb. The data colours
   (--c-*) are unchanged and keep their meaning in every lab. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F6F2; --sunken:#E9EEE7; --raised:#FFFFFF;
  --ink:#16201B; --ink-2:#47534C; --ink-3:#66726B; --line:#D9E0D6; --line-2:#E7ECE4;
  --grid:transparent;
  --c-weights:#2855C5; --c-kv:#D38700; --c-overhead:#7153E6; --c-oom:#CF2F2A; --c-ok:#0F7F59;
  --tr-wood:#8E7358; --tr-bark:#D8C6AC; --tr-trunk:#6A5341; --tr-build:#B03F74; --tr-eval:#3D4A5C; --tr-use:#0D7A86; --tr-on:#FFFFFF;
  --c-oom-soft:rgba(207,47,42,.10); --c-ok-soft:rgba(15,127,89,.10);
  --on-weights:#FFFFFF; --on-kv:#1A1200; --kv-tick:rgba(26,18,0,.32);
  --shadow:0 1px 2px rgba(22,32,27,.06),0 12px 32px -18px rgba(22,32,27,.30);
  --shadow-sm:0 1px 2px rgba(22,32,27,.08);
  --branch:var(--ink); --branch-ink:#FFFFFF;
  --font-disp:"Bricolage Grotesque","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
  --font-ui:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  /* labels and numbers: the text font with even-width figures (it was IBM Plex Mono); a mark the text font lacks (✓ ⊘ → ₂) comes from the
     same monospace fonts as before, one character wide, so a legend or a log line keeps the width it was fitted to */
  --font-mono:"Figtree Tab","Figtree",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",monospace;
  --font-code:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",monospace;
  --r:8px;
  /* the type scale (精装修 step 2): a lab takes every size from these eight. mark: ticks, axis numbers and marks on a chart, the
     smallest text on the site; label: labels, notes, table heads; cap: captions and the titles of a figure's parts; ui: text in a
     panel; stage: the stage's own text; body: reading text; lead: large numbers and lead lines; big: the largest numbers in a lab.
     --fs-math is the formula panel's text (.mathbody), so a lab's lines in that panel match it. */
  --fs-mark:11px; --fs-label:12px; --fs-cap:13px; --fs-ui:14px; --fs-stage:15px; --fs-body:16px; --fs-lead:18px; --fs-big:22px;
  --fs-math:13.5px;
}
/* the branch colour as the lab page uses it: the tree's own hue, a little deeper where it carries small text (wood and teal reach 4.5:1) */
[data-limb="root"]{--branch:#7E644B} [data-limb="trunk"]{--branch:var(--tr-trunk)} [data-limb="build"]{--branch:var(--tr-build)}
[data-limb="eval"]{--branch:var(--tr-eval)} [data-limb="use"]{--branch:#0B7380}
:root,[data-limb]{--branch-soft:color-mix(in srgb,var(--branch) 11%,var(--surface));
  /* the dashed frame a guided part draws round the part of the figure it talks about (R3.14): the branch colour, a little lighter
     than its text (3.3:1 or more on the stage and the figure, light and dark) */
  --focus-frame:color-mix(in srgb,var(--branch) 80%,var(--surface))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1512; --surface:#151D19; --surface-2:#1B2520; --sunken:#222D27; --raised:#2C3832;
    --ink:#E7EEE9; --ink-2:#B1BFB6; --ink-3:#808F86; --line:#2E3B34; --line-2:#24302A;
    --c-weights:#5A8AFF; --c-kv:#EFAE36; --c-overhead:#9B85FF; --c-oom:#FF5D52; --c-ok:#2EC38C;
    --tr-wood:#A88E72; --tr-bark:#3E342B; --tr-trunk:#D2BA9E; --tr-build:#E6819F; --tr-eval:#B3BECC; --tr-use:#4CC4CB; --tr-on:#0F1512;
    --c-oom-soft:rgba(255,93,82,.14); --c-ok-soft:rgba(46,195,140,.13);
    --on-weights:#06101F; --on-kv:#1A1200; --kv-tick:rgba(26,18,0,.34);
    --shadow:0 1px 1px rgba(0,0,0,.35),0 14px 30px -16px rgba(0,0,0,.8); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --branch-ink:#0F1512;
  }
  :root:not([data-theme="light"]) :is([data-limb="root"]),:root:not([data-theme="light"])[data-limb="root"]{--branch:var(--tr-wood)}
  :root:not([data-theme="light"]) :is([data-limb="use"]),:root:not([data-theme="light"])[data-limb="use"]{--branch:var(--tr-use)}
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1512; --surface:#151D19; --surface-2:#1B2520; --sunken:#222D27; --raised:#2C3832;
  --ink:#E7EEE9; --ink-2:#B1BFB6; --ink-3:#808F86; --line:#2E3B34; --line-2:#24302A;
  --c-weights:#5A8AFF; --c-kv:#EFAE36; --c-overhead:#9B85FF; --c-oom:#FF5D52; --c-ok:#2EC38C;
  --tr-wood:#A88E72; --tr-bark:#3E342B; --tr-trunk:#D2BA9E; --tr-build:#E6819F; --tr-eval:#B3BECC; --tr-use:#4CC4CB; --tr-on:#0F1512;
  --c-oom-soft:rgba(255,93,82,.14); --c-ok-soft:rgba(46,195,140,.13);
  --on-weights:#06101F; --on-kv:#1A1200; --kv-tick:rgba(26,18,0,.34);
  --shadow:0 1px 1px rgba(0,0,0,.35),0 14px 30px -16px rgba(0,0,0,.8); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --branch-ink:#0F1512;
}
:root[data-theme="dark"] :is([data-limb="root"]),:root[data-theme="dark"][data-limb="root"]{--branch:var(--tr-wood)}
:root[data-theme="dark"] :is([data-limb="use"]),:root[data-theme="dark"][data-limb="use"]{--branch:var(--tr-use)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--branch);outline-offset:2px}
.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}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,3.5vw,40px)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
code,pre,kbd,samp{font-family:var(--font-code)}
.eyebrow{font-family:var(--font-mono);font-size:13px;font-weight:650;letter-spacing:.01em;line-height:1.37;color:var(--ink-3)}   /* a 13 px line as tall as the old 11.5 px one (17.8 px), so what was fitted around it keeps its height */
.muted{color:var(--ink-3)}
.small{font-size:13px}
h1,h2,h3{text-wrap:balance}
h1,h2,h3,.labtitle,.pr-h,.tile-q,.pe-name,.th-name,.ph,.rh{font-family:var(--font-disp)}
h2{font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.015em;margin:8px 0 10px}
html[lang^="zh"] :is(h1,h2,h3,.labtitle,.pr-h,.tile-q,.pe-name,.th-name,.ph,.rh){font-weight:700;letter-spacing:0}

/* top bar */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line-2)}
@supports (backdrop-filter:blur(8px)){.topbar{background:color-mix(in srgb,var(--bg) 95%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:58px}
/* the brand: a small tree in the tree's colours (body.html), the name in the heading face */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--font-disp);font-weight:700;letter-spacing:-.012em;white-space:nowrap;font-size:18px;line-height:1.1;min-width:0}
.brand span{overflow:hidden;text-overflow:ellipsis}
.brand svg{width:26px;height:26px;flex:none}
/* the logo: the knowledge tree itself, a wood trunk with the two big branches (building models, using models) and evaluation between them */
.logo path{fill:none;stroke-linecap:round}
.logo .lg-t{stroke:var(--tr-trunk);stroke-width:2.8}
.logo .lg-b{stroke:var(--tr-build);stroke-width:2.4}.logo .lg-bd{fill:var(--tr-build)}
.logo .lg-u{stroke:var(--tr-use);stroke-width:2.4}.logo .lg-ud{fill:var(--tr-use)}
.logo .lg-e{stroke:var(--tr-eval);stroke-width:2.2}.logo .lg-ed{fill:var(--tr-eval)}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex:none}
.nav a{padding:6px 11px;border-radius:var(--r);text-decoration:none;color:var(--ink-2);font-size:14.5px;font-weight:600;white-space:nowrap}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;margin-left:6px;flex:none}
.icon-btn:hover{background:var(--surface-2)}
@media (max-width:680px){.nav a.hide-sm{display:none}}
/* phones: the name takes two short lines rather than losing its end to “…” */
@media (max-width:560px){.brand span{white-space:normal;max-width:6.3em;font-size:15px;line-height:1.05}}
@media (max-width:440px){.nav a.hide-xs{display:none}}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:6px;flex:none}
.langsw button{border:0;background:var(--surface);padding:5px 10px;font-size:13px;font-weight:650;color:var(--ink-2);cursor:pointer;line-height:1.2}
.langsw button+button{border-left:1px solid var(--line)}
.langsw button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
html[lang^="zh"] .hero h1{line-height:1.15;letter-spacing:0}
html[lang^="zh"] h2,html[lang^="zh"] .labtitle{line-height:1.2;letter-spacing:0}
html[lang^="zh"] .eyebrow{letter-spacing:.02em}
html[lang^="zh"] .meter-title{letter-spacing:0}   /* untracked, so a long figure title still leaves room for the status pill beside it */
html[lang^="zh"] .eyebrow,html[lang^="zh"] .metric .k{text-transform:none}

/* buttons: ink, rounded; inside a lab the guided cards' own buttons wear the branch colour (below, with the cards) */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:650;font-size:14.5px;text-decoration:none;cursor:pointer;line-height:1.2;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px -8px rgba(22,32,27,.55);transition:background-color .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:10px}   /* buttons keep the sizes the labs were laid out with: a row of keys and buttons that fitted on one line still does */
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13.5px}
.linkbtn:hover{color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* a panel: white, a hairline and a soft shadow, round corners (no graph paper behind the figures any more) */
.panel{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow)}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:0;padding:4px 11px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap}
.status.ok{color:var(--c-ok);background:var(--c-ok-soft)}
.status.bad{color:var(--c-oom);background:var(--c-oom-soft)}

/* sliders: a rounded track filled in the branch colour up to a round thumb */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0;cursor:pointer}
input[type=range]:disabled{cursor:not-allowed;opacity:.45}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--branch) 0 var(--fill,0%),var(--sunken) var(--fill,0%) 100%)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--sunken)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--branch)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--raised);border:2px solid var(--branch);box-shadow:0 1px 4px rgba(22,32,27,.28)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--raised);border:2px solid var(--branch);box-shadow:0 1px 4px rgba(22,32,27,.28)}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--branch-soft),0 1px 4px rgba(22,32,27,.28)}
input[type=range]:focus-visible{outline:2px solid var(--branch);outline-offset:4px;border-radius:6px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(32px,5vw,64px) clamp(24px,3vw,40px)}
@media (max-width:920px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero>*,.map-wrap>*,.why-grid>*,.bench>*,.connect-grid>*{min-width:0}
.hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.04;font-weight:750;letter-spacing:-.022em;margin:14px 0 18px}
/* the line above the title: the tree's four colours and what the site holds */
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:650 14px/1.35 var(--font-ui);color:var(--ink-2)}
.kicker i{display:inline-flex;gap:4px;flex:none}
.kicker b{width:9px;height:9px;border-radius:50%;background:var(--tr-trunk)}
.kicker b:nth-child(2){background:var(--tr-build)} .kicker b:nth-child(3){background:var(--tr-use)} .kicker b:nth-child(4){background:var(--tr-eval)}
.lede{font-size:clamp(16px,1.45vw,18px);color:var(--ink-2);max-width:32em;margin:0 0 26px}
.meter{padding:18px 18px 16px}
.meter-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.meter-title{font-family:var(--font-mono);font-size:13px;font-weight:650;letter-spacing:.01em;line-height:1.37;color:var(--ink-3)}   /* 17.8 px a line, as before */
.meter-sub{font-weight:650;margin-top:2px;font-size:15px;line-height:1.45;letter-spacing:-.01em}   /* a hair tighter: a headline that filled its line in the old font still fits it in Figtree */
.ctl-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;font-weight:650;color:var(--ink-2)}
.ctl-label output,.ctl output{font-family:var(--font-mono);font-weight:700;color:var(--ink);font-size:13.5px}
.ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin:-2px 3px 0}
.meter-read{font-family:var(--font-mono);font-size:13.5px;color:var(--ink-2);margin:12px 0 0;line-height:1.6}
.hint{font-size:13.5px;color:var(--ink-3);margin:6px 0 0}

/* resource bars */
.bar{position:relative;height:46px;margin-top:22px}
.bar.thin{height:16px;margin-top:8px}
.bar .cap{position:absolute;top:0;bottom:0;left:0;background:var(--surface);border:1px solid var(--line);border-radius:3px}
.seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--font-mono);font-size:11px;padding-left:6px;transition:left .22s ease-out,width .22s ease-out}
.seg.w{background:var(--c-weights);color:var(--on-weights);border-radius:3px 0 0 3px}
.seg.oh{background:var(--c-overhead);padding:0}
.seg.kv{background-color:var(--c-kv);color:var(--on-kv)}
.seg.free{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line) 5px 6px);padding:0}
.seg.res{background:repeating-linear-gradient(135deg,var(--surface-2) 0 3px,var(--line) 3px 4px);padding:0;border-radius:0 3px 3px 0}
.seg.over{background:repeating-linear-gradient(135deg,var(--c-oom) 0 5px,var(--c-oom-soft) 5px 9px);border:1.5px solid var(--c-oom);color:var(--c-oom);font-weight:600;justify-content:flex-end;padding:0 6px 0 0;border-radius:0 3px 3px 0}
.seg.over span{background:var(--surface);padding:1px 5px;border-radius:2px;white-space:pre-line;text-align:center;line-height:1.25}
.seg.over.clipped{border-right-style:dashed}
.bar.thin .seg{font-size:0}
.usable{position:absolute;top:-17px;bottom:-5px;width:0;border-left:1.5px dashed var(--ink-2);transition:left .22s ease-out}
.usable span{position:absolute;top:0;left:5px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap}
.bar.thin .usable{top:-3px;bottom:-3px}
.bar.thin .usable span{display:none}
.bar-ghost{position:absolute;top:-3px;bottom:-3px;left:0;border:1.5px dashed var(--ink);border-radius:3px;opacity:0;pointer-events:none}
.axis{position:relative;height:16px;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.axis span:first-child{transform:none}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--font-mono);font-size:12.5px;line-height:1.36;color:var(--ink-2);margin-top:12px}   /* a line as tall as the old 11 px one (17 px), so a legend that wraps takes the room the stages were fitted to */
:where(html[lang^="zh"]) .legend-row{font-size:11.5px;line-height:1.48}   /* Chinese characters are 1 em wide in any font: at 12 px and up, 20 legends in 6 labs would wrap onto another line; :where so a lab's own legend size still wins */
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:6px;border:1px solid var(--line)}
.sw.w{background:var(--c-weights);border-color:transparent}.sw.kv{background:var(--c-kv);border-color:transparent}.sw.oh{background:var(--c-overhead);border-color:transparent}
.sw.free{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px)}
.sw.res{background:repeating-linear-gradient(135deg,var(--surface-2) 0 2px,var(--line) 2px 3px)}
.sw.over{background:repeating-linear-gradient(135deg,var(--c-oom) 0 3px,var(--c-oom-soft) 3px 5px);border-color:var(--c-oom)}
/* the dashed outline of the last state, and the dashed usable-limit line, as legend marks */
.sw.was{background:transparent;border:1.5px dashed var(--ink)}
.sw.lim{width:0;height:12px;border:0;border-left:1.5px dashed var(--ink-2);border-radius:0;margin:0 7px 0 4px}

/* sections */
.section{padding-block:clamp(40px,6vw,76px) 0;scroll-margin-top:70px}
.sec-lede{color:var(--ink-2);max-width:42em;margin:0}

/* map */
.pathchip{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
.pathchip:hover{border-color:var(--ink)}
.pathchip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* the six learning paths above the tree (owner round 3 #1). Wide screens: one row per path under column headings, so the paths compare
   side by side; narrower: cards, two or one to a row, each field named on the card */
#map.section{padding-top:clamp(24px,3vw,40px)}   /* right under the hero: the paths start on the first screen */
.paths{margin-top:14px}
.pl-lead{margin:0 0 12px;font-size:14px;color:var(--ink-2);max-width:62em}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pentry{position:relative;display:grid;gap:6px 16px;padding:14px 14px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);min-width:0;transition:border-color .15s,box-shadow .15s}
.pentry.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* the whole entry is one button (it shows the path on the tree); the start link and the progress note sit above it */
.pathchip.pe-hit,.pathchip.pe-hit[aria-pressed="true"]{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:0;border-radius:16px;background:transparent;cursor:pointer}
.pentry:has(.pe-hit:hover){border-color:var(--ink-3);box-shadow:var(--shadow)}
.pentry.sel:has(.pe-hit:hover){border-color:var(--ink)}
.pe-hit:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pe-go .btn,.pe-prog{position:relative;z-index:2}
.pentry>*{min-width:0}
.pe-head{display:flex;flex-direction:column;gap:2px}
.pe-name{margin:0;font-size:18px;font-weight:700;line-height:1.25}
.pe-size{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3)}
.pe-prog{font-size:12.5px;font-weight:600;color:var(--c-ok)}
.pe-f{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pe-k{font-weight:650;color:var(--ink)}
.pe-go{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pe-go .btn{white-space:nowrap}
.pl-cols{display:none}
.pl-rec{margin:10px 0 0;font-size:13px;color:var(--ink-3)}
@media (min-width:1180px){
  .pl-cols,.pentry{grid-template-columns:10.5rem minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.85fr) 15rem;column-gap:16px}
  .pl-cols{display:grid;padding:0 15px 6px;font-family:var(--font-mono);font-size:12.5px;font-weight:650;color:var(--ink-3)}
  .pentry .pe-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:1179px){
  .plist{grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}
  .pentry{display:flex;flex-direction:column}
  .pe-head{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .pe-go{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;padding-top:4px}
}
/* the line right above the tree: what the tree shows now, and the way back to no path */
.map-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:18px}
.mb-now{font-size:13.5px;color:var(--ink-2)}
.map-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;margin-top:14px;align-items:start}
@media (max-width:1000px){.map-wrap{grid-template-columns:minmax(0,1fr)}}
.map-canvas{padding:8px 8px 10px;position:relative}
.map-scroll{overflow-x:auto}
#mapSvg{display:block;width:100%;min-width:660px;height:auto}
.map-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);padding:4px 8px 0}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-panel{padding:16px 16px 18px;min-height:200px}
.ph{font-size:20px;font-stretch:108%;font-weight:700;line-height:1.2;margin:6px 0 6px}
.pd{color:var(--ink-2);font-size:14px;margin:0 0 10px}
.lablist{list-style:none;padding:0;margin:10px 0 14px;display:grid;gap:6px}
.lablist li{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line-2);border-radius:4px;background:var(--surface)}
.lablist li.live{border-color:var(--ink)}
.lrow{display:grid;grid-template-columns:14px minmax(0,1fr);gap:9px;padding:8px 10px;text-decoration:none;flex:1;min-width:0}
a.lrow:hover .lq{text-decoration:underline}
.lnum{font-size:11.5px;color:var(--ink-2);padding:9px 0 0 10px;width:20px;flex:none}
.lq{font-weight:600;font-size:14px;line-height:1.35;display:block}
.lm{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);display:block;margin-top:2px}
.glyph{width:12px;height:12px;border-radius:50%;border:1.6px solid var(--ink);margin-top:4px;display:inline-block;flex:none}
.glyph.live{background:var(--ink)}
.glyph.wip{background:linear-gradient(90deg,transparent 50%,var(--ink) 50%)}
.glyph.next{border-width:3px}
.glyph.planned{border-color:var(--ink-3)}
.sep{height:1px;background:var(--line-2);margin:12px 0}
/* svg map */
.loop{fill:none;stroke:var(--line);stroke-width:1.5}
.flow{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:1.5 14;stroke-linecap:round;animation:flow 3.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-31}}
.chev{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cap-big{font-family:var(--font-ui);font-stretch:125%;font-weight:800;font-size:30px;letter-spacing:.16em;fill:var(--ink);opacity:.10}
.cap-sub{font-family:var(--font-mono);font-size:12px;fill:var(--ink-3)}
.world{cursor:pointer}
.world:focus{outline:none}
.world .hit,.bead .hit{fill:transparent}
.world .wnode{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.world .wdot{fill:var(--ink)}
.world.sel .wnode{fill:var(--ink)}
.world.sel .wdot{fill:var(--surface)}
.world:hover .wnode,.world:focus-visible .wnode{stroke-width:3.5}
.wname{font-family:var(--font-ui);font-weight:680;font-size:15px;fill:var(--ink)}
.wsub{font-family:var(--font-mono);font-size:11px;fill:var(--ink-3)}
.halo{paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
/* a word that depends on the theme, for a picture drawn dark on light in one theme and light on dark in the other: .th-lt shows in the
   light theme, .th-dk in the dark one */
.th-dk{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .th-lt{display:none}:root:not([data-theme="light"]) .th-dk{display:inline}}
:root[data-theme="dark"] .th-lt{display:none}:root[data-theme="dark"] .th-dk{display:inline}
.bead{cursor:pointer}
.bead:focus{outline:none}
.bead .b{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.bead.live .b{fill:var(--ink)}
.bead .half{fill:var(--ink)}
.bead.next .b{stroke-width:3}
.bead.planned .b{stroke:var(--ink-3)}
.bead:hover .b,.bead:focus-visible .b{stroke-width:3.2}
.dim{opacity:.2}
.route{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 5}
.bnum-bg{fill:var(--surface);stroke:var(--ink);stroke-width:1.2}
.bnum{font-family:var(--font-mono);font-size:10.5px;font-weight:600;fill:var(--ink)}
.way{fill:var(--ink-3)}
.wayt{font-family:var(--font-mono);font-size:11px;fill:var(--ink-3);font-style:italic}
.tip{position:fixed;z-index:60;max-width:280px;background:var(--ink);color:var(--bg);padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.45;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));box-shadow:var(--shadow)}
.tip .m{font-family:var(--font-mono);font-size:12px;opacity:.75;margin-top:4px}

/* approach */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
@media (max-width:920px){.why-grid{grid-template-columns:minmax(0,1fr)}}
.why{padding:18px}
.why h3{font-size:18px;font-stretch:108%;margin:0 0 6px}
.why p{color:var(--ink-2);margin:0;font-size:14.5px}
.mini{background:var(--sunken);border:0;border-radius:12px;padding:10px 12px;font-family:var(--font-code);font-size:12.5px;margin:12px 0 0;white-space:pre;overflow-x:auto;line-height:1.55}
.fid-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:7px;font-size:13.5px;color:var(--ink-2)}
.fid{display:inline-block;min-width:96px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--line);border-radius:3px;margin-right:8px;color:var(--ink);background:var(--surface)}

/* lab */
.labhead{padding-block:16px}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-family:var(--font-mono);font-size:13px;line-height:1.35;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
/* the branch in the breadcrumbs names where the lab grows on the tree, in its colour */
.crumbs>a[href^="#map~"]{color:var(--branch);font-weight:700;text-decoration:none;background:var(--branch-soft);border-radius:999px;padding:1px 10px}
.crumbs>a[href^="#map~"]:hover{background:color-mix(in srgb,var(--branch) 18%,var(--surface))}
.crumbs a:hover{text-decoration-color:currentColor}
.crumbs>.crumb-next{margin-left:auto}
/* the previous and the next lab at the right end of the row (the owner, 2026-10-09): “← Previous lab: X   Next lab: Y →”. When the row
   is too long the pair wraps as one piece to a line of its own, still at the right */
.crumbs .crumb-pn{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 22px;min-width:0;max-width:100%}
.crumbs .crumb-pn:empty{display:none}
.crumbs .crumb-pn>a{min-width:0;overflow-wrap:anywhere}
/* touch widths: each link is a tap target at least 32 px tall that takes no room (padding inside negative margins; it reaches down
   into the title's top margin, not up into the crumbs) */
@media (max-width:760px){.crumbs .crumb-pn>a{padding:4px 0 12px;margin:-4px 0 -12px}}
/* phones (≤ 480 px): the row is no taller than before the previous link (v6; R7.3, the first screen): short labels on one line,
   “← 上一个  下一个 →”; the lab's name and its stop are in the hover, and in the link's text for screen readers (kept at font-size 0) */
@media (max-width:480px){
  .crumbs>a[href^="#map~"]{padding:0 8px}
  .crumbs .crumb-pn{flex-wrap:nowrap;gap:0 16px}
  .crumbs .crumb-pn>a{font-size:0;white-space:nowrap;overflow-wrap:normal}
  .crumbs .crumb-pn>a>span,.crumbs .crumb-pn>a::before,.crumbs .crumb-pn>a::after{font-size:12px}
  .crumbs .crumb-pn>.crumb-prev::after{content:'Prev';content:'Prev'/'';margin-left:.6em}
  .crumbs .crumb-pn>.crumb-next::before{content:'Next';content:'Next'/'';margin-right:.6em}
  html[lang^="zh"] .crumbs .crumb-pn>.crumb-prev::after{content:'上一个';content:'上一个'/''}
  html[lang^="zh"] .crumbs .crumb-pn>.crumb-next::before{content:'下一个';content:'下一个'/''}
}
/* the next lab, below the rail card in every mode (R3.11) */
.next-lab{margin-top:12px;padding:12px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.next-lab .nl-k,.next-lab .nl-last{font-family:var(--font-mono);font-size:12.5px;font-weight:650;color:var(--ink-3)}
.next-lab .nl-go{font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
.next-lab .nl-done{font-family:var(--font-mono);font-size:12.5px;font-weight:650;color:var(--ink)}
.next-lab .nl-skip,.next-lab .nl-note{font-size:12px;color:var(--ink-3);line-height:1.4}
/* at a branch's end: the button that joins the path of the suggested next step (round 3, item 4) */
.next-lab .nl-join{align-self:flex-start;margin-top:4px}
.next-lab .nl-go:hover,.next-lab .nl-go:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* a term defined on hover (R2.8): dotted underline and a question-mark cursor, a click does nothing (R1.3) */
.def{border-bottom:1px dotted var(--ink-3);cursor:help}
.next-lab-end{display:none}
/* on phones the rail's footer moves after the bench; it shows only where the rail shows one (not before the last guided part, R3.11) */
@media (max-width:760px){.rail .next-lab{display:none}.bench:has(.rail .next-lab)+.next-lab-end{display:block;margin-top:14px}.next-lab-end .next-lab{margin-top:0}}
.labtitle{font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.018em;margin:10px 0 8px;max-width:28em}
.labmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.labmeta .spacer{flex:1 1 0}
.tag{font-family:var(--font-mono);font-size:13px;font-weight:600;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:transparent;line-height:1.3}
button.tag{cursor:pointer}
button.tag:hover{border-color:var(--ink);color:var(--ink)}
.modes{display:inline-flex;border:1px solid var(--line);border-radius:5px;padding:3px;background:var(--surface);gap:2px}
.modes button{border:0;background:transparent;padding:6px 12px;border-radius:3px;cursor:pointer;font-weight:620;font-size:13.5px;color:var(--ink-2)}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pop{margin-top:12px;padding:16px 18px}
.pop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.pop ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
.pop p{margin:0 0 8px;font-size:14px;color:var(--ink-2);max-width:62em}
.sharebox{margin-top:10px;display:grid;gap:6px;max-width:640px}
.sharebox input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-family:var(--font-code);font-size:12px}
.bench{display:grid;grid-template-columns:300px minmax(0,1fr) 290px;gap:16px;padding-block:6px 30px;align-items:start}
@media (max-width:1180px){.bench{grid-template-columns:280px minmax(0,1fr)}.rail{grid-column:1;grid-row:1}.controls{grid-column:1;grid-row:2}.stage{grid-column:2;grid-row:1 / span 2}}
@media (max-width:760px){.bench{grid-template-columns:minmax(0,1fr)}.rail,.stage,.controls{grid-column:auto;grid-row:auto}.rail{order:1}.stage{order:2}.controls{order:3}}
@media (min-width:761px) and (min-height:600px){.stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);max-height:calc(100vh - 86px);overflow-y:auto}}
/* a lab page on a desktop (精装修 step 2): the top bar scrolls away with the page instead of staying on top, so the sticky stage sits 12 px
   from the top and is 58 px taller (at 1440×800 almost every part's stage now fits without scrolling inside). Scroll back to the top and
   the bar is there. On short windows (820 px and less) the stage sits 8 px from the top and its own spacing is a little tighter (below,
   after the stage's own rules). Phones keep the bar on top. */
@media (min-width:761px) and (min-height:600px){
  html[data-limb] .topbar{position:relative}
  html[data-limb] .stage{top:calc(env(safe-area-inset-top,0px) + 12px);max-height:calc(100vh - 24px)}
  html[data-limb] .dock{top:env(safe-area-inset-top,0px)}
  html[data-limb] :is(#view-dyn,#view-lab) .bench.flowed[data-flow="primer"]>[data-flow-nav]{top:calc(env(safe-area-inset-top,0px) + 12px)}
}
@media (min-width:761px) and (min-height:600px) and (max-height:820px){html[data-limb] .stage{top:calc(env(safe-area-inset-top,0px) + 8px);max-height:calc(100vh - 16px)}}
/* the stage is a figure, not running text: its own text keeps the compact size and spacing it was laid out with, so every stage still fits
   the window it fitted before (the reading text in the rail and the primer is 16 px with looser lines) */
.stage{padding:16px;container-type:inline-size;font-size:15px;line-height:1.55}
.stage-head{display:flex;justify-content:space-between;gap:10px 14px;align-items:flex-start;flex-wrap:wrap}
.stage-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* one frame per figure: the stage panel is the frame, the figure inside it has none of its own */
.stage-graph{margin-top:14px;padding:12px 14px 12px;border:0;border-radius:14px}
.bar-label{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--ink-2);margin:12px 0 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bar-label:first-child{margin-top:0}
.stage-note{font-size:13.5px;color:var(--ink-2);margin:12px 0 0}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
@container (min-width:560px){.metrics{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* a card's name (.k) and its change line (.d) are 12 px in the text's font (kit polish r2, M1; they were 10.5 and 11 px in the numbers'
   font): in the numbers' font 12 px is a seventh wider, and over every lab, part and size it put about 1,100 more names on a second line.
   The value keeps the numbers' font; the colours are as before. The side padding is 7 px (was 9 px), so a name of 7 Chinese characters
   (12 px each) still fits on one line in a phone's three-column card (103 px wide at 390 px). Each line keeps its height (a name line
   16.2 px, a change line 15 px), so a card is no taller unless its text wraps more. A lab sets nothing smaller (CONTRACT §19).
   Refit (2026-10-22): a card is a leaf-grey tile without a border; its value is in the heading face, bold; wider sides above 760 px. */
.metric{border:0;border-radius:12px;padding:9px 7px;background:var(--surface-2);min-width:0}
@media (min-width:761px){.metric{padding:10px 6px}}   /* Figtree runs about 2% wider than the old font, so the text box is 4 px wider than before (6 px padding, no 1 px frame): a change line that fitted on one line still does (dpo's “▲ 2.8 times the last value” takes 139 of the 140 px) */
.metric .k{font-family:var(--font-ui);font-size:12px;line-height:1.35;color:var(--ink-3);text-wrap:balance}
.metric .v{font-family:var(--font-disp);font-size:clamp(15px,4cqi,18px);font-weight:700;letter-spacing:-.005em;margin-top:1px;white-space:nowrap}
.metric .sub{font-size:12px;color:var(--ink-3);line-height:1.35;letter-spacing:-.01em;text-wrap:balance}   /* a hair tighter (0.12 px a letter): a note that filled its line in the old font still fits one line in Figtree */
.metric .d{font-family:var(--font-ui);font-size:12px;color:var(--ink-2);height:15px;opacity:0;transition:opacity .35s}
.metric .d.on{opacity:1}
details.math{margin-top:12px;border-top:1px solid var(--line-2);padding-top:10px}
details.math summary,details.adv summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.5}   /* 21.75 px, as tall as the old 14 px line */
details.math summary::-webkit-details-marker,details.adv summary::-webkit-details-marker{display:none}
details.math summary::before,details.adv summary::before{content:"+";font-family:var(--font-ui);font-weight:700;width:20px;height:20px;display:inline-grid;place-items:center;border:0;border-radius:6px;background:var(--sunken);color:var(--ink-2);font-size:14px;line-height:1}
details.math[open] summary::before,details.adv[open] summary::before{content:"−"}
.mathbody{font-family:var(--font-mono);font-size:13.5px;line-height:1.6;overflow-x:auto}   /* a line as tall as the old 12.5 px / 1.7 one (21.6 px for 21.25), so an open panel inside a stage keeps its height */
.mathbody math.tex{font-size:1.04em}   /* the formulas keep the size they were reviewed at (1.12 × the old 12.5 px = 14 px), so a table that fitted a phone still fits; only the words around them grew */
/* a short desktop window (精装修 step 2: 820 px tall or less, e.g. 1536 × 730, a 15-inch laptop's browser): the stage's own spacing is a
   little tighter, and a metric card's value takes a 1.25 line (22.5 px for 28: one line of digits). Each rule has the weight of one class
   (:where), and lab stylesheets come after this one, so a lab's own spacing wins */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  :where(html[data-limb]) .stage{padding:12px 14px}
  :where(html[data-limb] .stage) .stage-graph{margin-top:10px;padding:10px 12px}
  :where(html[data-limb] .stage) .legend-row{margin-top:8px}
  :where(html[data-limb] .stage) .metrics{margin-top:8px;gap:6px}
  :where(html[data-limb] .stage) .metric{padding:7px 6px}
  :where(html[data-limb] .stage) .metric .v{line-height:1.25}
  :where(html[data-limb] .stage) details.math{margin-top:8px;padding-top:7px}
}
/* 700 px tall or less (1366 × 650: a 1366 × 768 laptop's browser): the stage sits 6 px from the top and its spacing is one step tighter
   again (a metric card's padding 5 px); no text is smaller. Same weight as above */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){
  html[data-limb] .stage{top:calc(env(safe-area-inset-top,0px) + 6px);max-height:calc(100vh - 12px)}
  :where(html[data-limb]) .stage{padding:10px 12px}
  :where(html[data-limb] .stage) .stage-graph{margin-top:8px;padding:8px 10px}
  :where(html[data-limb] .stage) .legend-row{margin-top:6px}
  :where(html[data-limb] .stage) .metrics{margin-top:6px}
  :where(html[data-limb] .stage) .metric{padding:5px 6px}
  :where(html[data-limb] .stage) details.math{margin-top:6px;padding-top:5px}
}
/* the owner's review of batch 9 (2026-10-08): in SFT's Show the math the top of a tall fraction (120 over 1919) was cut off. A box
   with overflow-x:auto clips vertically too, so every formula box gets room above and below; a lab's own padding wins (:where
   has zero specificity). LAB_UX_GUIDE R6.33 */
:where(.mathbody,.fx,[class$="-fx"],[class*="-fx "],[class*="math-line"]){padding-block:.3em}
.mathbody p{margin:6px 0}
/* the KV lab's summary formula (batch 9, H1): pieces that wrap before an operator, a hanging indent for the lines after the first */
.kv-fx{margin:6px 0;padding-left:1.4em;text-indent:-1.4em;line-height:1.8;overflow-x:auto}
.kv-fx>math{text-indent:0}
.t{border-bottom:1px dotted var(--ink-3);cursor:pointer;border-radius:2px}
.t:hover,.t:focus{background:var(--surface-2);border-bottom:1px solid var(--ink);outline:none}
.okc{color:var(--c-ok)}.badc{color:var(--c-oom)}
.controls{padding:16px 16px 18px;display:grid;gap:15px}
.controls .eyebrow{margin-bottom:-6px}
.ctl{display:grid;gap:6px;border-radius:4px}
.ctl > label,.ctl > .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;font-weight:650;color:var(--ink-2)}
select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px;cursor:pointer}
select:disabled{opacity:.5;cursor:not-allowed}
/* options: keys on a tray. Each key is a light chip, so keys that wrap to a second row stay apart (R7.13); the chosen one is ink */
.seg-ctl{display:flex;gap:3px;padding:3px;border:0;border-radius:12px;background:var(--sunken)}
.seg-ctl button{flex:1;padding:6px 6px;border:0;border-radius:9px;background:color-mix(in srgb,var(--raised) 55%,transparent);cursor:pointer;font-family:var(--font-mono);font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-2);text-wrap:balance}   /* a label that takes two lines splits evenly */
.seg-ctl button:hover:not(:disabled):not([aria-pressed="true"]){background:var(--raised);color:var(--ink)}
.seg-ctl button[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:0 1px 2px rgba(22,32,27,.22)}   /* same weight as the other keys: a label never gets wider, or wraps, when it is picked */
.seg-ctl button:disabled{opacity:.4;cursor:not-allowed}
/* seven keys or more: a tighter tray, so the group still fits the width the old 1 px-border group took (model-parallel's 9 keys in a 269 px panel). :where keeps a lab's own key rules stronger */
.seg-ctl:where(:has(>button:nth-child(7))){gap:2px}
.seg-ctl:where(:has(>button:nth-child(7)))>button{padding-inline:4px;font-size:12.5px}
.ctl-note{font-size:12px;color:var(--ink-3);line-height:1.4}
.ctl-note.warn{color:var(--c-oom)}
details.adv{border-top:1px solid var(--line-2);padding-top:10px}
details.adv .ctl{margin-top:12px}
.cue{outline:2px dashed var(--branch);outline-offset:5px;animation:cue 1.5s ease-in-out 3}
@keyframes cue{50%{outline-color:transparent}}
.linked{outline:2px solid var(--branch);outline-offset:5px}
/* rail */
.rail-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
/* the guided parts: only the current one is a raised white card; the others are flat leaf-grey rows. Numbers in the branch colour:
   filled for the current part, a ring on a light tint for a part done */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.step{border:1px solid transparent;border-radius:16px;background:var(--surface-2);transition:background-color .2s,border-color .2s,box-shadow .2s}
.step.current{border-color:var(--line-2);background:var(--surface);box-shadow:var(--shadow)}
.step-h{display:flex;gap:10px;align-items:center;width:100%;padding:9px 14px;background:none;border:0;text-align:left;cursor:pointer;font-weight:700;font-size:14.5px;line-height:1.35}
.step.current .step-h{padding-block:11px 9px}
.step .num{display:inline-grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--line);border-radius:50%;font-family:var(--font-mono);font-size:12px;font-weight:800;flex:none;background:var(--surface)}
.step.done .num{background:var(--branch-soft);color:var(--branch);border-color:var(--branch)}
.step.current .num{background:var(--branch);color:var(--branch-ink);border-color:var(--branch)}
.step.todo .step-h{color:var(--ink-3)}
/* round 3, R08: a part left behind without its answer keeps its number in a dashed ring, with "skipped" at the row's end */
.step.skipped .num{border-style:dashed;border-color:var(--ink-3);color:var(--ink-2)}
.step-h .sk-tag{margin-left:auto;flex:none;font:600 12px/1.2 var(--font-mono);color:var(--ink-3)}
/* the cards keep the text size they were reviewed at (14.5 px), with a little more line height: at 16 px a card ran a median 30 % longer
   and eval-capstone's three answers left the first screen at 1440 × 900 (todo 6); the owner widened this column so cards run in fewer lines */
.step-b{padding:0 15px 14px;font-size:14.5px;line-height:1.6}
/* the card's own forward buttons wear the branch colour */
.step-b .btn:not(.ghost),.pbar .btn:not(.ghost){background:var(--branch);border-color:var(--branch);color:var(--branch-ink)}
.step-b .btn:not(.ghost):hover:not(:disabled),.pbar .btn:not(.ghost):hover:not(:disabled){background:color-mix(in srgb,var(--branch) 82%,var(--ink));border-color:color-mix(in srgb,var(--branch) 82%,var(--ink))}
.step-b p{margin:0 0 10px}
.step-b ul{margin:0 0 10px;padding-left:18px}
.step-b li{margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.obs{margin:10px 0 0;padding:11px 14px;background:var(--surface-2);border-radius:12px;font-size:14px;line-height:1.55}
.obs p{margin:4px 0 8px}
.obs p:last-child{margin-bottom:0}
.obs .eyebrow{font-size:12px}
.eyebrow.keepcase{text-transform:none;letter-spacing:.02em}
.choices{display:grid;gap:6px;margin:8px 0}
.choice{text-align:left;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-size:14px;line-height:1.45}
.choice:hover{border-color:var(--ink-3);background:var(--surface-2)}
/* a chosen answer or case: tinted in the branch's colour, with a filled dot (not inverted, so a long answer stays easy to read) */
.choice[aria-pressed="true"]{border-color:var(--branch);background:var(--branch-soft);box-shadow:inset 0 0 0 1px var(--branch)}
.stepnav{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.tries{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.okline{color:var(--c-ok)}
.badline{color:var(--c-oom)}
.railcard{padding:16px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.rh{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:6px 0 8px;line-height:1.3}
.railcard p{font-size:14.5px;margin:0 0 10px}
.goal{font-size:13px;display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.progress{height:6px;background:var(--sunken);border-radius:6px;overflow:hidden;margin:6px 0 12px}
.progress i{display:block;height:100%;width:0;background:var(--branch);transition:width .3s}
.presets{display:grid;gap:6px;margin:0 0 12px}
.preset{display:grid;gap:2px;text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.preset:hover{border-color:var(--ink-3);background:var(--surface-2)}
.preset b{font-size:14.5px}
.preset span{font-size:12.5px;color:var(--ink-3)}
/* tooltips and term jumps */
.tip.below{transform:translate(-50%,12px)}
.tip .act{font-size:12px;opacity:.78;margin-top:5px}
[data-tip]:not(button){cursor:help}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,35%{outline:2px solid var(--branch);outline-offset:4px;background-color:var(--surface-2)}100%{outline:2px solid transparent;outline-offset:4px}}
/* mode description */
.mode-desc{margin:10px 0 0;font-size:14px;color:var(--ink-2);max-width:62em}
.mode-desc b{color:var(--ink);font-weight:650}
/* controls: hint and challenge lock */
.ctl-hint{margin:0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.ctl-lock{margin:0;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.controls.locked .lockable{display:none}
/* the control a step asks for, inside the step card */
.inline-ctl{display:grid;gap:6px;margin:2px 0 12px;padding:10px 12px 11px;border:1.5px dashed color-mix(in srgb,var(--branch) 50%,var(--line));border-radius:12px;background:var(--surface)}
.inline-ctl>label,.inline-ctl>.lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;font-weight:650;color:var(--ink-2)}
.inline-ctl output{font-family:var(--font-mono);font-weight:700;color:var(--ink);font-size:13.5px}
/* mini chart under the top bar */
.stage-graph{scroll-margin-top:80px}
.dock{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 59px);z-index:29;background:var(--surface);border-bottom:1px solid var(--line-2);box-shadow:0 10px 24px -18px rgba(22,32,27,.5);cursor:pointer;animation:dockin .18s ease-out}
@keyframes dockin{from{opacity:0;transform:translateY(-6px)}}
.dock-in{display:flex;align-items:center;gap:12px;min-height:48px}
.dk-bar{flex:1 1 auto;min-width:64px}
.dk-bar .bar{margin-top:0}
.dk-read{font-size:12px;color:var(--ink-2);white-space:nowrap}
.dk-go{font-size:12.5px;font-weight:650;white-space:nowrap}
.dock:hover .dk-go{text-decoration:underline;text-underline-offset:3px}
.dock.pulse .dock-in{animation:dockp .8s ease-out}
@keyframes dockp{from{background:var(--surface-2)}}
@media (max-width:560px){.dk-go,.dk-mem{display:none}}
/* challenge progress and comparison bars */
.goal.met b{color:var(--c-ok)}
.progress.met i{background:var(--c-ok)}
.cmp{margin:14px 0 6px}
.cmp-title{font-size:13px;font-weight:650;margin:0 0 2px}
.cmp-row{margin-top:9px}
.cmp-lab{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.cmp-row.me .cmp-lab{color:var(--ink);font-weight:650}
.cmp-track{position:relative;height:14px;margin:4px 28px 0 0;background:var(--surface-2);border-radius:4px}
.cmp-track i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:4px}
.cmp-row.ok .cmp-track i{background:var(--ink)}
.cmp-row.me .cmp-track{box-shadow:0 0 0 1.5px var(--ink)}
.cmp-track .g{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px dashed var(--ink-2)}
.cmp-val{position:absolute;top:50%;transform:translateY(-50%);margin-left:6px;font-size:11.5px;line-height:1;color:var(--ink)}
.cmp-tag,.cmp-you{font-family:var(--font-mono);font-size:11.5px;line-height:1.5;border-radius:999px;padding:0 7px;font-weight:650}
.cmp-tag{border:1px solid var(--line);color:var(--ink-3)}
.cmp-you{background:var(--ink);color:var(--bg)}
.cmp-axis{position:relative;height:16px;margin:5px 28px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}
.cmp-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
#chRes{scroll-margin-top:120px;scroll-margin-bottom:12px}
/* single-choice options: a radio dot, a filled pressed state, and each tried option's result on the right */
.levers{display:grid;gap:6px;margin:8px 0 4px}
/* an option: the dot, the title with its result on the same row (the tried results line up on the right, R3.6),
   and the description below at full width, so a narrow rail does not squeeze it into a thin column */
.lever{display:grid;grid-template-columns:14px minmax(0,1fr) auto;column-gap:10px;row-gap:1px;align-items:start}
.lever::before{content:"";grid-column:1;grid-row:1;margin-top:2px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink-3);box-sizing:border-box}
.lever[aria-pressed="true"]::before{border-color:currentColor;background:radial-gradient(circle,currentColor 0 3px,transparent 3.5px)}
.lever .lv-t{display:contents}
.lever .lv-t b{grid-column:2;grid-row:1;font-weight:650;min-width:0}
.lever .lv-d{grid-column:2 / 4;grid-row:2;font-size:12px;line-height:1.35;color:var(--ink-3)}
.lever[aria-pressed="true"] .lv-d{color:inherit;opacity:.78}
.lever .lv-r{grid-column:3;grid-row:1;padding-top:1px;font-size:12px;white-space:nowrap;color:var(--ink-2)}
.lever[aria-pressed="true"] .lv-r{color:inherit}
.obs.bump{animation:bump 1s ease-out}
@keyframes bump{0%,35%{box-shadow:0 0 0 2px var(--ink)}100%{box-shadow:0 0 0 2px transparent}}
.legend-row [data-jump]{cursor:pointer}
.legend-row [data-jump]:hover>span{text-decoration:underline;text-underline-offset:3px}
.preset{grid-template-columns:14px minmax(0,1fr);column-gap:10px;align-items:center}
.preset::before{content:"";grid-row:1 / span 2;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink-3);box-sizing:border-box}
.preset>*{grid-column:2}
.preset[aria-pressed="true"]{background:var(--branch-soft);border-color:var(--branch);box-shadow:inset 0 0 0 1px var(--branch)}
.preset[aria-pressed="true"]::before{border-color:var(--branch);background:radial-gradient(circle,var(--branch) 0 3px,transparent 3.5px)}
.preset[aria-pressed="true"] span{color:var(--ink-2)}
.step-b .linkbtn,.railcard .linkbtn,.pop .linkbtn{font-size:inherit}
/* connect */
.connect{padding-block:10px 20px}
.connect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}   /* two per row: code blocks fit without dragging (R7.6, review 8) */
@media (max-width:760px){.connect-grid{grid-template-columns:minmax(0,1fr)}}
/* 761–1279 px (the Claude side panel is 720–960): two columns leave a code block under 74 characters, so the minimal implementation
   takes a whole row, and so does the last card when it would sit alone (R7.6, R7.3); code lines stay within 74 characters */
@media (min-width:761px) and (max-width:1279px){.connect-grid>.c-card:has(pre.code),.connect-grid:has(>.c-card:first-child pre.code)>.c-card:last-child:nth-child(even){grid-column:1/-1}}
.hero-side{min-width:0}
/* a wide hero (HERO.wide): title and buttons in one row, the card full width below */
.hero.hero-wide{grid-template-columns:minmax(0,1fr);gap:18px;padding-block:clamp(20px,3vw,36px) clamp(16px,2vw,28px)}
.hero.hero-wide>div:first-child{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 28px}
.hero.hero-wide h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08;margin:0}
.hero.hero-wide .cta-row{margin:0}
.hero-lab{padding:18px 18px 16px;border-radius:22px}
/* the hero lab's button, bottom right of its card, under the animation: the dashed loop back to the start runs along the animation's bottom edge (the owner, 2026-10-11 and 10-12) */
.hero-lab{position:relative}
.hero-foot{display:flex;justify-content:flex-end;margin-top:10px}
.hero-foot .btn{padding:7px 12px;font-size:13.5px}
.c-card{padding:16px}
.c-card h3{font-size:17px;font-weight:700;letter-spacing:-.005em;margin:0 0 8px}
.c-card p{font-size:14.5px;color:var(--ink-2);margin:0 0 10px}
.c-card li code{overflow-wrap:anywhere}   /* a source's file path breaks at the card's edge: at the 16 px body text (2026-10-22 refit) a long path no longer fits a phone's card on one line */
.code{background:var(--sunken);border:0;border-radius:12px;padding:12px 14px;font-family:var(--font-code);font-size:12px;line-height:1.6;overflow-x:auto;margin:0 0 10px;white-space:pre}
.refs{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14px}
.refs span{display:block;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3)}
.drill-a{margin-top:12px;font-family:var(--font-mono);font-size:14px;background:var(--surface-2);border-radius:12px;padding:11px 12px}
.drill-a math.tex{font-size:1em}   /* a worked answer's formulas keep the 14 px they were reviewed at (1.12 × the old 12.5 px) and its box the old 12 px sides, so a formula that fitted a phone still does */
.drill-a p{margin:3px 0}
code{font-family:var(--font-code);font-size:.88em;background:var(--surface-2);padding:1px 4px;border-radius:5px}
/* the footer: what the site is, the learning paths, the tree's branches and the project; the other explainers and the licences at the end */
.foot{margin-top:72px;background:var(--surface-2);padding-block:44px 40px;color:var(--ink-2);font-size:14px}
.foot .wrap{display:grid;gap:30px}
.foot p{margin:0}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px 32px}
.ft-brand{display:inline-flex;align-items:center;gap:9px;font:700 18px/1.1 var(--font-disp);letter-spacing:-.012em;color:var(--ink);text-decoration:none;margin-bottom:12px}
.ft-brand svg{width:26px;height:26px;flex:none}
.ft-about p{max-width:30em;line-height:1.65}
.foot .ft-h{font:700 14px/1.3 var(--font-ui);letter-spacing:.01em;color:var(--ink);margin:4px 0 12px}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ft-col a{color:var(--ink-2);text-decoration:none}
.ft-col a:hover{color:var(--ink);text-decoration:underline}
.ft-end{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-3)}
.ft-end a{color:var(--ink-2)}
@media (max-width:900px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-about{grid-column:1/-1}}
@media (max-width:480px){.foot{padding-block:36px 32px}.ft-grid{gap:24px 20px}}
@media (prefers-reduced-motion:reduce){
  .flow{animation:none}
  .seg,.usable,.progress i{transition:none}
  .cue{animation:none}
  .flash{animation:none;outline:2px solid var(--branch);outline-offset:4px}
  .dock,.dock.pulse .dock-in{animation:none}
  .obs.bump{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- home: map with domain icons, then the chosen domain's lab tiles ---------- */
.map-canvas{margin-top:14px;padding:8px 8px 10px}
#mapSvg{min-width:620px}
.world .wnode{fill:var(--surface);stroke:var(--ink);stroke-width:1.8}
.world .wico{color:var(--ink)}
.world.sel .wnode{fill:var(--ink)}
.world.sel .wico{color:var(--surface)}
.world:hover .wnode,.world:focus-visible .wnode{stroke-width:3.2}
.tiles-head{display:flex;gap:14px;align-items:flex-start;margin:28px 0 14px;scroll-margin-top:72px}
.th-icon{width:50px;height:50px;border-radius:50%;border:1.8px solid var(--branch);display:grid;place-items:center;flex:none;background:var(--branch-soft);color:var(--branch)}
.th-text{min-width:0}
.th-name{font-size:24px;font-weight:700;line-height:1.2;margin:2px 0 4px}
.th-desc{margin:0;color:var(--ink-2);font-size:14.5px;max-width:48em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;min-width:0;scroll-margin-top:80px;box-shadow:var(--shadow-sm)}
.tile-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;padding:2px 9px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--surface)}
.tile-at{font-size:12.5px;font-weight:650;color:var(--branch)}
/* what this browser remembers of the lab */
.chip.tm{border-color:var(--ink-3);color:var(--ink)}
.chip.tm-passed{border-color:var(--c-ok);color:var(--c-ok);background:var(--c-ok-soft)}
/* the hero's "Continue": the lab's name, and under it where the learner was */
.btn.resume{flex-direction:column;align-items:flex-start;gap:1px;padding:6px 14px;line-height:1.3}
.btn.resume .rs-at{font-size:12px;font-weight:500;opacity:.8}
.tile-num{width:24px;height:24px;border-radius:50%;background:var(--branch);color:var(--branch-ink);display:inline-grid;place-items:center;font-size:12px;font-weight:800}
.tile-q{font-size:18px;line-height:1.32;margin:0;font-weight:700}
.tile-q a{text-decoration:none;color:inherit}   /* the title is part of the tile's one button, not a link of its own */
.tile-tz{min-height:150px;border-top:1px solid var(--line-2);padding-top:10px}
.tile-tz.tz-none{min-height:0}
.tile-soon{color:var(--ink-3);font-size:12.5px}
/* teaser building blocks, shared by all labs */
.tz{display:grid;gap:8px;min-width:0}
.tz-lab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;font-weight:620;color:var(--ink-2)}
.tz-lab output{font-family:var(--font-mono);font-weight:500;color:var(--ink);font-size:12.5px}
.tz .seg-ctl button{padding:5px 4px;font-size:12px}
.tz-vis{display:block;width:100%;height:auto;overflow:visible}
.tz-vis text{font-family:var(--font-mono);font-size:10px;fill:var(--ink-2)}
.tz-read{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.tz-read b{color:var(--ink);font-weight:650}
.tz-note{margin:0;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.tz .bar.thin{margin-top:2px}
@media (max-width:440px){.th-name{font-size:19px}.tiles-head{gap:10px}.th-icon{width:42px;height:42px}}
.cmp-val{background:var(--surface);padding:0 3px;border-radius:2px}
.status.neutral{color:var(--ink-2);background:var(--surface-2)}
.dyn-root{display:block}

/* ---------- round 5: kit fixes shared by every lab ---------- */
/* single-choice prediction buttons show a radio dot, like levers and presets */
.choices .choice{display:flex;align-items:center;gap:10px}
.choices .choice::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink-3);box-sizing:border-box}
.choices .choice[aria-pressed="true"]::before{border-color:var(--branch);background:radial-gradient(circle,var(--branch) 0 3px,transparent 3.5px)}
/* comparison charts: green meets the goal, gray does not, and a legend says so */
.cmp-row.ok .cmp-track i{background:var(--c-ok)}
.cmp-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}
.cmp-leg span{display:inline-flex;align-items:center;gap:6px}
.cmp-leg i{display:inline-block;width:14px;height:9px;border-radius:2px;background:var(--ink-3)}
.cmp-leg i.ok{background:var(--c-ok)}
.cmp-leg i.g{width:0;height:12px;border-radius:0;background:none;border-left:1.5px dashed var(--ink-2)}
.metric .d{height:auto;min-height:15px;line-height:1.25}
.tip p{margin:0}
/* formulas (A.ui.math): real maths, not TeX source */
math.tex{font-family:'STIX Two Math','Cambria Math','Latin Modern Math','Noto Sans Math',serif;font-size:1.12em}
.tip math.tex{font-size:1.18em}
.tip .fx{margin:6px 0 2px;padding:6px 8px;border-radius:4px;background:color-mix(in srgb,var(--bg) 12%,transparent);overflow-x:auto}
.tip p+p{margin-top:6px}

/* ---------- round 5: home ---------- */
.hm-legend{margin-top:10px}
.hm-legend>span{cursor:help}
#map h2{margin-bottom:0}
.path-hint{font-size:12.5px;align-self:center;margin-left:4px}
.map-legend .lg-lead{color:var(--ink-3)}
/* phones and tablets: the branches as a list grouped by part of the tree, instead of the drawn tree. The tree needs 900 px of panel,
   which a window up to 1004 px wide (a 15 px scroll bar included) does not give it (R11.10; re-review: at 720 px a third was cut off) */
.domgrid{display:none}
@media (max-width:1004px){
  .map-canvas{display:none}
  .domgrid{display:grid;gap:12px;margin-top:16px}
  .dg-h{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);margin:0 0 6px}
  .dg-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:8px}
  .dg-btn{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 11px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);color:var(--ink);text-align:left;cursor:pointer}
  .dg-btn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .dg-ico{width:38px;height:38px;flex:none;border-radius:50%;border:1.6px solid var(--ink);display:grid;place-items:center;background:var(--surface)}
  .dg-btn[aria-pressed="true"] .dg-ico{background:var(--ink);color:var(--surface)}
  .dg-t{display:grid;min-width:0}
  .dg-t b{font-size:14.5px;font-weight:700;line-height:1.25}
  .dg-t span{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.35}
}
/* the domain strip above the tiles sticks under the top bar */
.domstrip{position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:20;display:flex;align-items:center;gap:8px 14px;margin:22px 0 0;padding:9px 0;background:var(--bg);border-bottom:1px solid var(--line-2)}
@supports (backdrop-filter:blur(8px)){.domstrip{background:color-mix(in srgb,var(--bg) 95%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}}
.ds-worlds{display:flex;gap:4px;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.ds-worlds::-webkit-scrollbar{display:none}
.ds-btn{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 11px 6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap}
.ds-btn svg{color:var(--branch)}
.ds-btn:hover{border-color:var(--branch);color:var(--ink)}
.ds-btn[aria-pressed="true"]{background:var(--branch);border-color:var(--branch);color:var(--branch-ink)}
.ds-btn[aria-pressed="true"] svg{color:inherit}
.ds-path{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12.5px;color:var(--ink-3)}
.ds-path select{max-width:190px;padding:6px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px}
/* when the branches' names do not all fit in one row (measured by fitStrip), icons with tooltips; the chosen branch keeps its name (H4) */
.domstrip.ds-icons .ds-btn span{display:none}.domstrip.ds-icons .ds-btn{padding:6px}
.domstrip.ds-icons .ds-btn[aria-pressed="true"] span{display:inline}.domstrip.ds-icons .ds-btn[aria-pressed="true"]{padding:6px 10px 6px 7px}
@media (max-width:600px){.ds-path{display:none}.domstrip{margin-top:18px}}
.tiles-head{margin-top:16px;scroll-margin-top:120px}
.th-meta{font-family:var(--font-mono);font-size:13px;font-weight:650;color:var(--branch)}
/* tiles: one sentence on the tile; the teaser's own notes stay on the lab page (owner 2026-10-13: no 假设和来源 on tiles) */
.tile .tz-note{display:none}
.chip.tz-kind{cursor:help}
.tz-leg{display:flex;flex-wrap:wrap;gap:3px 12px;font-family:var(--font-mono);font-size:11px;line-height:1.35;color:var(--ink-2)}
.tz-leg>span{display:inline-flex;align-items:center}
.tz-leg>span[hidden]{display:none}
.tz-leg .sw{width:10px;height:10px;margin-right:5px}
.tz-leg .sw.lim{width:0;height:11px;margin:0 6px 0 3px}
/* tooltips size to their text, never wider than the screen; the tile notes get a wider one */
.tip{width:max-content;max-width:min(280px,calc(100vw - 16px))}
.tip.wide{max-width:min(380px,calc(100vw - 16px))}
/* mini result bar: a long reading shrinks with an ellipsis instead of pushing "Back to the chart" off screen */
.dock-in>*{flex:none}
.dock-in .dk-bar{flex:1 1 auto}
.dk-read{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.meter-sub{text-wrap:balance}
@media (max-width:600px){
  .path-hint{margin:0}
}
#mapSvg{max-height:min(640px,calc(100vh - 210px))}

.ds-path span{white-space:nowrap}
.dock-in .dk-bar{flex:1 1 48px;min-width:48px}
@media (max-width:760px){.dk-read{white-space:normal;line-height:1.3;overflow:visible}}
.dg-btn.dim,.ds-btn.dim{opacity:.42}
.chip[data-tipx]{cursor:help}
@media (max-width:400px){.brand span{font-size:14px}.topbar .wrap{gap:10px}}

/* ---------- Batch 1 (Codex review 1): the phone template for labs with class m2, a two-column bench, the home page's paths ---------- */
.pbar{display:none}
.pb-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pb-dots{display:flex;flex-wrap:wrap;gap:4px}
.pb-dot{width:26px;height:26px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-3);font:800 11.5px/1 var(--font-mono);display:grid;place-items:center;cursor:pointer}
.pb-dot.done{color:var(--ink-2);border-color:var(--ink-3)}
.pb-dot.on{background:var(--branch);color:var(--branch-ink);border-color:var(--branch)}
.pb-nav{display:flex;gap:6px;flex:0 0 auto}
.pb-t{margin-top:8px;font-size:14px;line-height:1.4}
.pb-t b{font-weight:650;margin-right:6px}
.pb-lead{color:var(--ink-2)}
.pb-dot.skip{border-style:dashed;border-color:var(--ink-3);color:var(--ink-2)}
.pb-go{display:inline-block;margin-left:4px;vertical-align:middle}
.pb-go .btn.sm{padding:3px 9px;font-size:12.5px;white-space:nowrap}
@media (max-width:760px){
  .m2 .bench{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .m2 .bench>.stage,.m2 .bench>.controls,.m2 .bench>.rail>*{width:100%;min-width:0}
  .m2 .bench>.rail{display:contents}
  .m2 .bench>.rail>*{order:3}
  .m2 .bench>.rail>.pbar{order:1;display:block;padding:8px 12px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);font-size:15px;line-height:1.5}
  .m2 .bench>.rail>.pbar .pb-t{margin-top:6px}   /* 10 px and 8 px before kit polish r2 (M2, the first screen) */
  .m2 .bench>.rail>.rail-top{display:none}
  .m2 .bench>.stage{order:2}
  .m2 .bench>.controls{order:4}
  .m2 .rail .steps .step:not(.current){display:none}
  .m2 .rail .steps .step.current>.step-h{display:none}
  .m2 .rail .steps .step.current>.step-b{padding-top:14px}
  .m2 .labhead:has(.modes button[data-mode="guided"][aria-pressed="true"]) .mode-desc{display:none}
  .m2 .controls:not(.open)>:not(.eyebrow){display:none}
  .m2 .controls>.eyebrow{display:flex;justify-content:space-between;align-items:center;margin:0;cursor:pointer;font-size:12.5px}
  .m2 .controls>.eyebrow::after{content:'▾';font-size:13px}
  .m2 .controls.open>.eyebrow{margin-bottom:4px}
  .m2 .controls.open>.eyebrow::after{content:'▴'}
}
.bench.no-ctl{grid-template-columns:300px minmax(0,1fr)}
@media (max-width:1180px){.bench.no-ctl{grid-template-columns:280px minmax(0,1fr)}.bench.no-ctl>.stage{grid-row:1}}
/* home: the paths that can be walked, first (R0.3) */

/* ---------- Batch 2 (Codex review 1 #5): what you can do after the lab; three ways to show it transfers ---------- */
.lab-outcome{margin:0 0 12px;font-size:15px;color:var(--ink-2);max-width:62em;line-height:1.5}
.lab-outcome b{color:var(--ink);font-weight:700}
/* the refit (2026-10-22; the plan: one line fewer in the lab head): on every width the minutes tag runs on at the end of “You will be
   able to …”, as it already did on phones (below). .lab-sub holds the two, keeps the paragraph's 62em measure and sets its font size and
   line height, so a line the tag shares is the paragraph's height (the tag, 20.9 px tall with 1 px padding, fits inside the 22.5 px line) */
.lab-sub{max-width:62em;font-size:15px;line-height:1.5}
.lab-sub>.lab-outcome{display:inline;margin:0;font-size:inherit;line-height:inherit}
.lab-sub>.lab-outcome::after{content:" ";word-spacing:4px}
.lab-sub>.labmeta{display:inline-flex;vertical-align:1px}
.lab-sub>.labmeta>.tag{padding-block:1px}
/* phones (≤ 760 px), the first screen (kit polish r2, M2): the header is set tighter so the stage and its figure come up (390×844 zh:
   the stage's top, median over the labs, from 496 to about 420 px). Nothing is removed and the order stays: the breadcrumbs, the title
   (22 px, the size of a path's name on the home page), “You will be able to …”, then the minutes tag, which runs on at the end of that
   paragraph: on its last line when there is room, else at the start of the next line. It is a space (with word-spacing) from the text,
   not a margin, so a tag that wraps is not indented. The header takes the paragraph's font size and line height, so a line the tag shares
   is the paragraph's height (the tag, 19.6 px tall with 1 px padding, fits inside the 21 px line); the breadcrumbs keep their line height,
   and the title keeps its 10 px top margin (the previous / next links' tap boxes reach into it). The paragraph and the tag are broken into
   lines the plain way (text-wrap-style auto): a lab's “pretty” wrapping (eval-capstone, English) would even out the lines of the paragraph
   and the tag together and leave a short first line. Since the refit desktop runs the tag on too (.lab-sub, above). */
@media (max-width:760px){
  .labhead:not(.ls-labhead){padding-block:12px 6px;font-size:14.5px;line-height:1.45;text-wrap-style:auto}
  .labhead:not(.ls-labhead)>.crumbs{line-height:1.55}
  .labhead>.labtitle{font-size:22px;margin-bottom:8px}
  .labhead .lab-sub{font-size:inherit;line-height:inherit}
}
.exits{margin-top:12px}
/* the tabs wrap to a second row (English, up to 1280 px); each tab is a chip of its own on the tray, so the rows stay apart (owner 2026-10-14:
   agent-anatomy's token-budget rows lost their line; R7.13) */
.exits .ex-tabs{margin:4px 0 12px;flex-wrap:wrap}
.exits .ex-tabs button{flex:1 1 auto}
.ex-body p{margin:0 0 8px}
.ex-qs{display:flex;gap:4px;margin:0 0 8px}
.ex-opts{display:grid;gap:6px;margin:0 0 8px}
.ex-opts .choice{align-items:flex-start;line-height:1.45}
.ex-opts .choice::before{margin-top:2px}
.ex-opts .choice.right{border-color:var(--line);box-shadow:inset 0 0 0 2px var(--c-ok)}
.ex-opts .choice.wrong{border-color:var(--line);box-shadow:inset 0 0 0 2px var(--c-oom)}
.ex-res{padding:11px 14px;border-radius:12px;background:var(--surface-2);margin:0 0 8px}
.ex-res.ok{border-left:3px solid var(--c-ok)}
.ex-res.no{border-left:3px solid var(--c-oom)}
.ex-res p{font-size:14px;line-height:1.45}
.ex-links{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.ex-links li{display:grid;gap:2px}
.ex-links a{font-weight:600;color:var(--ink)}
.ex-links span{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.ex-body .ex-drill{margin-top:14px}
/* round 3, R07: the card is optional practice; once the challenge is passed it opens with that and the next lab */
.exits .ex-opt{margin:2px 0 10px}
.ex-passed{display:grid;gap:8px;justify-items:start;padding:11px 14px;margin:0 0 12px;border-radius:12px;border-left:3px solid var(--c-ok);background:var(--surface-2)}
.ex-passed p{margin:0;font-size:14px;line-height:1.45}

/* ---------- home: the knowledge tree (batch 5; replaces the two loops). Roots and trunk in wood, each limb in its own hue (R11.10) ---------- */
/* at 1440 x 900 the top bar, the two rows of path chips, the whole tree and its legend fit on one screen (H1, R11.10) */
#mapSvg.tree{min-width:900px;max-height:min(720px,calc(100vh - 210px))}
@media (min-width:601px){#map .map-canvas{margin-top:10px}}
.tr-limbs .lf{stroke:none;opacity:.55}
.tr-limbs .lf.build{fill:var(--tr-build)}.tr-limbs .lf.use{fill:var(--tr-use)}.tr-limbs .lf.eval{fill:var(--tr-eval)}
/* the tree grows once when the page opens: roots, trunk, limbs, then the labs (reduced motion: drawn at once) */
@media (prefers-reduced-motion:no-preference){
  .tree.grow .tr-roots path,.tree.grow .tr-limbs path:not(.lf){stroke-dasharray:1;stroke-dashoffset:1;animation:trGrow .9s ease-out forwards}
  .tree.grow .tr-limbs .lb{animation-delay:.35s}.tree.grow .tr-limbs .st{animation-delay:.75s}
  .tree.grow .tr-trunk{transform-origin:600px 592px;transform:scaleY(0);animation:trTrunk .5s ease-out .1s forwards}
  .tree.grow .tnode,.tree.grow .tw,.tree.grow .lf,.tree.grow .tr-twigs{opacity:0;animation:trFade .45s ease-out forwards;animation-delay:calc(.25s + var(--d,0s))}
  .tree.grow:not(.go) *{animation-play-state:paused!important}
}
@keyframes trGrow{to{stroke-dashoffset:0}}
@keyframes trTrunk{to{transform:scaleY(1)}}
@keyframes trFade{to{opacity:1}}
.tree [data-limb="root"]{--h:var(--tr-wood)}
.tree [data-limb="trunk"]{--h:var(--tr-trunk)}
.tree [data-limb="build"]{--h:var(--tr-build)}
.tree [data-limb="eval"]{--h:var(--tr-eval)}
.tree [data-limb="use"]{--h:var(--tr-use)}
.tr-axis line{stroke:var(--line);stroke-width:1.2}
.tr-axis .tk{stroke:var(--ink-3)}
.tr-axis text{font-family:var(--font-mono);font-size:11px;fill:var(--ink-3)}
.tr-ground{stroke:var(--tr-wood);stroke-width:1.2;stroke-dasharray:3 5;opacity:.7}
.tr-roots path{fill:none;stroke:var(--tr-wood);stroke-width:2.6;stroke-linecap:round;opacity:.8}
.tr-trunk{fill:var(--tr-bark);stroke:var(--tr-wood);stroke-width:1.4}
.tr-twigs line{stroke:var(--tr-wood);stroke-width:2;stroke-linecap:round}
.tr-limbs path{fill:none;stroke-linecap:round}
.tr-limbs .lb{stroke-width:7;opacity:.45}
.tr-limbs .lb.main{stroke-width:11}
.tr-limbs .st{stroke-width:3.5;opacity:.45}
.tr-limbs .build{stroke:var(--tr-build)}.tr-limbs .use{stroke:var(--tr-use)}.tr-limbs .eval{stroke:var(--tr-eval)}
.tr-cap{opacity:.32}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tr-cap{opacity:.42}}
:root[data-theme="dark"] .tr-cap{opacity:.42}
.tr-cap.build{fill:var(--tr-build)}.tr-cap.use{fill:var(--tr-use)}
.tree .tw{cursor:pointer}
.tree .tw:focus{outline:none}
.tree .tw-bg{fill:transparent;stroke:none}
.tree .tw .wname{font-family:var(--font-ui);font-size:13.5px;font-weight:720;fill:var(--h)}
.tree .tw .wsub{font-family:var(--font-mono);font-size:10.5px;fill:var(--ink-3)}
.tree .tw:hover .tw-bg,.tree .tw:focus-visible .tw-bg{fill:var(--surface);stroke:var(--h);stroke-width:1.2}
.tree .tw.sel .tw-bg{fill:var(--h)}
.tree .tw.sel .wname,.tree .tw.sel .wsub{fill:var(--tr-on)}
.tree .tw.dim{opacity:.3}
.tnode{cursor:pointer}
.tnode:focus{outline:none}
.tnode .tbx{fill:var(--surface);stroke:var(--h);stroke-width:1.5}
.tnode .tlb{font-family:var(--font-ui);font-size:11px;font-weight:620;fill:var(--h)}
.tnode.live .tbx{fill:var(--h)}
.tnode.live .tlb{fill:var(--tr-on)}
.tnode.wip .tbx{fill:color-mix(in srgb,var(--h) 35%,var(--surface))}
.tnode.next .tbx{stroke-dasharray:4 3;stroke-width:2}
.tnode:hover .tbx,.tnode:focus-visible .tbx{stroke-width:2.8}
/* hover changes colour, never size: a bigger box would run into the path numbers next to it (map_geometry) */
.tnode.live:hover .tbx,.tnode.live:focus-visible .tbx{stroke:var(--ink);fill:color-mix(in srgb,var(--h) 82%,var(--ink))}
/* labs off the chosen path: the box stays opaque (no line shows through its name); only its outline and its name fade (H3) */
.tnode.dim{opacity:1}
.tnode.dim .tbx{fill:var(--surface);stroke:color-mix(in srgb,var(--h) 30%,var(--surface))}
.tnode.dim.live .tbx{fill:color-mix(in srgb,var(--h) 20%,var(--surface))}
.tnode.dim.wip .tbx{fill:color-mix(in srgb,var(--h) 9%,var(--surface))}
.tnode.dim .tlb,.tnode.dim.live .tlb{fill:color-mix(in srgb,var(--h) 50%,var(--surface))}
.tnum .bnum-bg{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.tnum .bnum{fill:var(--surface)}
.tr-bars .tb-t{font-family:var(--font-mono);font-size:11px;font-weight:600;fill:var(--ink-2)}
.tr-bars .tb-n,.tr-bars .tb-c{font-family:var(--font-mono);font-size:10px;fill:var(--ink-3)}
.tr-bars .tb-bar{fill:var(--h)}
/* the legend's swatches: small boxes like the tree's */
.tsw{display:inline-block;width:16px;height:10px;border-radius:3px;border:1.5px solid var(--ink-3);background:var(--surface)}
/* the legend: what a box's colour means (H5) */
.map-legend{display:grid;gap:3px}
.map-legend .lg-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px 16px}
.tsw.c{width:14px;border:0}
.tsw.c.trunk{background:linear-gradient(90deg,var(--tr-wood) 0 50%,var(--tr-trunk) 50% 100%)}
.tsw.c.build{background:var(--tr-build)}.tsw.c.use{background:var(--tr-use)}.tsw.c.eval{background:var(--tr-eval)}
/* a path's tiles: who it is for, and its start */
.th-who{margin:0 0 3px;color:var(--ink-3);font-size:13.5px;max-width:52em}
.th-go{margin:8px 0 0}
.nw{white-space:nowrap}
/* the list runs from the top of the tree to its roots, a wood line on the left for the trunk */
@media (max-width:1004px){
  .domgrid{position:relative;padding-left:14px}
  .domgrid::before{content:'';position:absolute;left:3px;top:6px;bottom:6px;width:4px;border-radius:2px;background:var(--tr-bark);border:1px solid var(--tr-wood)}
  .dg-group .dg-h{color:var(--h);font-weight:600}
  .dg-group[data-limb="root"],.dg-btn[data-limb="root"]{--h:var(--tr-wood)}
  .dg-group[data-limb="trunk"],.dg-btn[data-limb="trunk"]{--h:var(--tr-trunk)}
  .dg-group[data-limb="build"],.dg-btn[data-limb="build"]{--h:var(--tr-build)}
  .dg-group[data-limb="eval"],.dg-btn[data-limb="eval"]{--h:var(--tr-eval)}
  .dg-group[data-limb="use"],.dg-btn[data-limb="use"]{--h:var(--tr-use)}
  .dg-btn .dg-ico{border-color:var(--h);color:var(--h)}
  .dg-btn[aria-pressed="true"]{border-color:var(--h);box-shadow:inset 0 0 0 1px var(--h)}
  .dg-btn[aria-pressed="true"] .dg-ico{background:var(--h);color:var(--tr-on)}
}
/* ---------- KV cache memory lab, home tile: one GPU's memory against each user's context (app.js, TEASERS['kv-cache']) ---------- */
.tz-kvc-vis text{font-family:var(--font-mono);font-size:10px;fill:var(--ink-3)}
/* the axis caption is HTML over the chart's top margin (where the SVG text used to be), so its GiB can carry the definition */
.tz-kvc-box{position:relative;min-width:0}
.tz-kvc-cap{position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:10px;line-height:13px;color:var(--ink-2);white-space:nowrap}   /* a line as tall as Figtree's text box, so the caption stays inside the chart */
.tz-kvc-vis .tz-kvc-ylim{fill:var(--ink-2);font-weight:600}
.tz-kvc-vis .tz-kvc-tag{fill:var(--on-kv);font-weight:600}
.tz-kvc-w{fill:var(--c-weights)}
.tz-kvc-oh{fill:var(--c-overhead)}
.tz-kvc-kv{fill:var(--c-kv)}
.tz-kvc-ov{fill:url(#tz-kvc-hatch)}
.tz-kvc-hs{fill:var(--c-oom)}
.tz-kvc-ovl{stroke:var(--c-oom);stroke-width:1.5}
.tz-kvc-grid{stroke:var(--line-2);stroke-width:1}
.tz-kvc-tick{stroke:var(--line);stroke-width:1}
.tz-kvc-lim{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 3}
.tz-kvc-mkh{stroke:var(--surface);stroke-width:4}
.tz-kvc-mk{stroke:var(--ink);stroke-width:1.5}
.tz-kvc-dot{fill:var(--ink);stroke:var(--surface);stroke-width:2}
/* legend: the KV cache's amber with the chart's red stripes; the marker as a line with a dot on top */
.tz-leg .sw.tz-kvc-swov{background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,var(--c-kv) 2px 5px);border-color:var(--c-oom)}
.tz-leg .tz-kvc-swmk{position:relative;display:inline-block;width:0;height:11px;margin:0 6px 0 3px;border-left:1.5px solid var(--ink)}
.tz-leg .tz-kvc-swmk::before{content:'';position:absolute;left:-3.75px;top:-1px;width:6px;height:6px;border-radius:50%;background:var(--ink)}

/* ---------- kit fixes, round K (five gaps found by the batch-6 reviews; CONTRACT §14) ---------- */
/* 1a. comparison chart: a passing row is marked on its track (a green ring on a light green track), so it shows at any value, 0% too;
   the legend's swatch shows the same ring */
.cmp-row.ok .cmp-track{background:var(--c-ok-soft);box-shadow:inset 0 0 0 2px var(--c-ok)}
.cmp-row.ok.me .cmp-track{box-shadow:inset 0 0 0 2px var(--c-ok),0 0 0 1.5px var(--ink)}
.cmp-leg i.ok{background:linear-gradient(90deg,var(--c-ok) 0 55%,var(--c-ok-soft) 55%);box-shadow:inset 0 0 0 1.5px var(--c-ok)}
/* 1d. the brief comparison chart (the owner's review of batch 8, 2026-10-07): the note on the rows it leaves out, and the closed list of
   every setting that meets the goal */
.cmp-note{margin:4px 0 0}
.cmp-more{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.cmp-more>summary{cursor:pointer;font-weight:650;font-size:13.5px;color:var(--ink);padding:4px 0}
.cmp-more>.cmp{margin-top:2px}
/* 1b. the goal label: centred on the goal line, and kept inside the chart near either end (100cqw = the axis width, 100% = the label's) */
.cmp-axis.cmp-gx{container-type:inline-size}
.cmp-gx>span{transform:translateX(clamp(calc(var(--g) * -1cqw),-50%,calc((100 - var(--g)) * 1cqw - 100%)))}
/* 1c. a value label never wraps: right of its bar when the chart has room for it (the track's 28 px margin included), else inside the
   bar's end; never past the track's left edge. A label a lab has moved itself (an inline left, right or margin) is left where it is */
.cmp-val{white-space:nowrap}
.cmp-track.cmp-cq{container-type:inline-size}
.cmp-fit[style^="left:"]{transform:translateY(-50%) translateX(var(--cx,max(calc(var(--v) * -1cqw - 6px),clamp(calc(-100% - 12px),calc(((100 - var(--v)) * 1cqw + 20px - 100%) * 1000),0px))))}
/* kit polish K1: the kit measures each label and sets --cx, the shift from its place right of the bar's end, so that no reference line
   (.g) runs through it (app.js cmpPlaceAll); the formula above is only what shows before that. When nothing on the bar's row fits, the
   label goes under the bar's end (.cmp-lo) and the track keeps room for it below (--lo); the lines stop 3 px under the track */
.cmp-track.cmp-lo{margin-bottom:var(--lo,19px)}
.cmp-lo-row{display:flow-root}   /* the row holds that room (no margin collapsing through it) */
.cmp-val.cmp-fit.cmp-lo[style^="left:"]{top:calc(100% + 4px);transform:translateX(var(--cx,0px))}
/* 2. options: the title and the result share the first row while the title fits on one line beside the result (R3.6, R3.10); otherwise
   the result drops under the title, still on the right, and the title keeps the row's whole width; the description fills the next row */
.lever{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px;row-gap:1px}
.lever::before{flex:none}
.lever .lv-t b{flex:1 1 auto;min-width:0;max-width:calc(100% - 24px)}
.lever .lv-r{order:2;margin-left:auto;max-width:100%;text-align:right}
.lever .lv-r:empty{display:none}
.lever .lv-d{order:3;flex:1 0 100%;padding-left:24px}
/* 3. why Next is disabled (steps({nextWhy})): under the card's buttons and the part bar's; blank but keeping its height once Next is on */
.nx-why{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.pbar>.nx-why{margin:6px 0 0;text-align:right}
.step-b:has(>.stepnav [data-nav="next"]:not(:disabled))>.nx-why,.pbar:has(>.pb-row [data-nav="next"]:not(:disabled))>.nx-why{visibility:hidden}
/* 4. the phone part bar: the dots and Back / Next stay on one row up to 8 parts at 360 px and wider; every tap target at least 24 px.
   6 or more parts: 24 px dots, 2 px apart (1 px for 8) and smaller buttons; under 390 px, 7 or 8 parts: tighter buttons, and 8 parts drop
   the arrow after "Next" (the button keeps its word) */
.pb-dots{flex:0 1 auto;min-width:0}
.pb-dot{flex:none}
.pb-nav [data-nav="back"]{min-width:30px;justify-content:center}
@media (max-width:480px){
  .pb-row{gap:6px}
  .pb-nav{gap:4px}
  .pb-dots:has(>.pb-dot:nth-child(6)){gap:2px}
  .pb-dots:has(>.pb-dot:nth-child(8)){gap:1px}
  .pb-dots:has(>.pb-dot:nth-child(6))>.pb-dot{width:24px;height:24px;font-size:11px}
  .pb-row:has(.pb-dot:nth-child(6)) .pb-nav .btn.sm{padding:6px 8px;font-size:12.5px}
  .pb-row:has(.pb-dot:nth-child(6)) .pb-nav [data-nav="back"]{min-width:28px}
}
@media (max-width:389px){
  .pb-row{gap:4px}
  .pb-row:has(.pb-dot:nth-child(7)) .pb-nav .btn.sm{padding:6px}
  .pb-row:has(.pb-dot:nth-child(7)) .pb-nav [data-nav="back"]{min-width:26px}
  .pb-row:has(.pb-dot:nth-child(8)) .pb-arr{display:none}
}

/* ---------- the owner's real-reader round (2026-10-11) ---------- */
/* the hero: the title, one line on where to start, one main button (in the animation card) */
.hero-sub{margin:10px 0 0;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);max-width:46em;line-height:1.5}
.hero-foot .btn{padding:10px 16px;font-size:15px}
/* phones: where the tree went */
.dg-lead{font-size:14px;color:var(--ink-2);margin:0 0 4px;line-height:1.55}
@media (min-width:1005px){.dg-lead{display:none}}
/* large screens: the tree gets more of the window, so its labels are bigger (the reader: “字看不清”) */
@media (min-width:1360px){#map .map-canvas{width:min(1680px,calc(100vw - 64px));margin-left:calc(50% - min(840px,50vw - 32px))}}
/* “#top” (the brand link, the lesson's “← Home”) lands with the title clear of the sticky top bar */
#top{scroll-margin-top:60px}

/* ---------- the lab's flow (owner's decision 2026-10-11 19:28 UTC): the steps listed on the left, the stage or the primer on the right;
   the settings panel is the step 自由调参; the fidelity notes close the page ---------- */
.flow.modes{display:block;border:0;padding:0;background:none;border-radius:0;gap:0}
/* the outline: no frame; the steps' numbers sit on one rail, the current step is a raised white row with its number in the branch colour */
.flow .fl-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:2px}
.flow .fl-list::before{content:"";position:absolute;left:23px;top:18px;bottom:18px;width:2px;border-radius:2px;background:var(--line)}
.flow .fl-i{position:relative;margin:0}
.flow .fl-i>button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:6px 12px;border:0;border-radius:14px;background:transparent;font:inherit;font-weight:700;font-size:15px;line-height:1.3;color:var(--ink-2);cursor:pointer;transition:background-color .15s,box-shadow .15s}
.flow .fl-i>button:hover{background:var(--surface-2);color:var(--ink)}
.flow .fl-i>button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.flow .fl-n{position:relative;z-index:1;font-family:var(--font-mono);font-size:12px;font-weight:800;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);color:var(--ink-3);display:inline-grid;place-items:center;flex:0 0 auto}
.flow .fl-i>button:hover .fl-n{border-color:var(--ink-3)}
.flow .fl-i>button[aria-pressed="true"] .fl-n{background:var(--branch);border-color:var(--branch);color:var(--branch-ink)}
.flow .fl-m{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.flow .fl-sub{list-style:none;margin:4px 0 8px 48px;padding:0;display:none}
.bench[data-flow="primer"]>.flow .fl-sub{display:grid}
.flow .fl-sub a{display:block;padding:5px 8px 5px 12px;font-size:13.5px;line-height:1.4;color:var(--ink-2);text-decoration:none;border-left:2px solid var(--line-2)}
.flow .fl-sub a:hover{color:var(--ink)}
.flow .fl-sub a.on{color:var(--ink);border-left-color:var(--branch);font-weight:650}
.flow .fl-see{margin:8px 4px 0 12px;font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (max-width:760px){.flow .fl-see{margin-top:6px}}   /* phones: the first screen (kit polish r2, M2) */
.flow .fl-see a{color:var(--ink);font-weight:650;text-underline-offset:2px}
/* the outline column is wide so the guided cards' text runs in fewer lines (owner 2026-10-14; the stage gave up the room when Settings left the right rail) */
:is(#view-dyn,#view-lab) .bench.flowed,:is(#view-dyn,#view-lab) .bench.flowed.no-ctl{grid-template-columns:400px minmax(0,1fr)}
@media (max-width:1300px){:is(#view-dyn,#view-lab) .bench.flowed,:is(#view-dyn,#view-lab) .bench.flowed.no-ctl{grid-template-columns:360px minmax(0,1fr)}}
:is(#view-dyn,#view-lab) .bench.flowed>[data-flow-nav]{grid-column:1;grid-row:1}
:is(#view-dyn,#view-lab) .bench.flowed>.rail,:is(#view-dyn,#view-lab) .bench.flowed>.controls{grid-column:1;grid-row:2}
:is(#view-dyn,#view-lab) .bench.flowed:is(.peek,.compat):not([data-flow="free"])>.controls{grid-row:3}
:is(#view-dyn,#view-lab) .bench.flowed>.stage,:is(#view-dyn,#view-lab) .bench.flowed>.primer{grid-column:2;grid-row:1 / span 3}
:is(#view-dyn,#view-lab) .bench.flowed:not([data-flow="free"]):not(.peek):not(.compat)>.controls{display:none}
:is(#view-dyn,#view-lab) .bench.flowed[data-flow="free"]>.rail{display:none}
:is(#view-dyn,#view-lab) .bench.flowed:not([data-flow="primer"])>.primer{display:none}
:is(#view-dyn,#view-lab) .bench.flowed[data-flow="primer"]>:not([data-flow-nav]):not(.primer){display:none}
:is(#view-dyn,#view-lab) .bench.flowed[data-flow="primer"]~.connect,:is(#view-dyn,#view-lab) .bench.flowed[data-flow="primer"]~.next-lab-end{display:none}
@media (min-width:761px){:is(#view-dyn,#view-lab) .bench.flowed[data-flow="primer"]>[data-flow-nav]{grid-row:1 / span 3;align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px)}}
@media (max-width:1180px){:is(#view-dyn,#view-lab) .bench.flowed,:is(#view-dyn,#view-lab) .bench.flowed.no-ctl{grid-template-columns:280px minmax(0,1fr)}:is(#view-dyn,#view-lab) .bench.flowed>.stage{grid-row:1 / span 3}}
@media (max-width:760px){
  :is(#view-dyn,#view-lab) .bench.flowed,:is(#view-dyn,#view-lab) .m2 .bench.flowed{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  :is(#view-dyn,#view-lab) .bench.flowed>[data-flow-nav]{order:0;width:100%}
  :is(#view-dyn,#view-lab) .bench.flowed>.primer{order:2}
  /* phones: the steps as a strip of keys on a tray, the current one raised */
  .flow .fl-list{display:flex;overflow-x:auto;padding:3px;gap:3px;scrollbar-width:none;background:var(--sunken);border-radius:12px}
  .flow .fl-list::before{display:none}
  .flow .fl-i>button{white-space:nowrap;padding:7px 10px;font-size:13.5px;line-height:1.3;gap:7px;border-radius:9px}
  .flow .fl-i>button:hover{background:color-mix(in srgb,var(--raised) 55%,transparent)}
  .flow .fl-i>button[aria-pressed="true"]{background:var(--raised);box-shadow:0 1px 3px rgba(22,32,27,.2)}
  .flow .fl-m,.bench[data-flow="primer"]>.flow .fl-sub{display:none}
}
/* the primer: read top to bottom; its pictures are the lab's own, shown as a display (inert), each picture's frames in turn */
.primer{min-width:0;max-width:880px}
.pr-sec{padding:2px 0 30px;margin-bottom:28px;border-bottom:1px solid var(--line-2);scroll-margin-top:84px}
.pr-k{font-family:var(--font-mono);font-size:13.5px;font-weight:800;color:var(--branch)}
.pr-h{font-size:clamp(23px,2.3vw,30px);line-height:1.28;margin:2px 0 14px;font-weight:700;letter-spacing:-.01em}
.pr-text{font-size:18px;line-height:1.85;max-width:740px}
.pr-text p{margin:0 0 12px}
.pr-text ul{margin:0 0 12px;padding-left:22px}
.pr-fig{margin:16px 0 22px;padding:16px 18px 14px;border:1px solid var(--line-2);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.pr-frames{display:grid}
.pr-fr{grid-area:1 / 1;visibility:hidden;min-width:0}
.pr-fr.on{visibility:visible}
.pr-frames button,.pr-frames input,.pr-frames select,.pr-frames a{pointer-events:none}
.pr-multi{touch-action:pan-y}
.pr-cap{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.6}
.pr-nav{display:flex;align-items:center;gap:12px;margin-top:10px}
.pr-prev,.pr-next{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.pr-prev:hover:not(:disabled),.pr-next:hover:not(:disabled){border-color:var(--ink-3);background:var(--surface-2)}
.pr-prev:disabled,.pr-next:disabled{opacity:.35;cursor:default}
.pr-num{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--ink-3)}
.pr-dots{display:flex;gap:6px}
.pr-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.pr-dots i.on{background:var(--branch)}
@media (prefers-reduced-motion:reduce){.pr-fr{grid-area:auto;visibility:visible}.pr-frames{gap:18px}.pr-nav{display:none}}
.pr-end{padding:0 0 24px}
@media (max-width:760px){.pr-text{font-size:17px;line-height:1.8}.pr-fig{padding:12px;border-radius:16px}}
/* the fidelity notes, at the page's end like a paper's references */
.endnotes{padding-block:28px 40px;margin-top:8px;border-top:1px solid var(--line-2)}
.endnotes h2{font-size:22px;margin:0 0 14px}
.en-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 32px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.en-block h3{font-size:15px;margin:0 0 6px;color:var(--ink)}
.en-block ul{margin:0;padding-left:18px}
.en-block p{margin:0 0 8px}
.en-block>.eyebrow{margin-top:4px}
@media (max-width:760px){.flow .fl-n{display:none}.flow .fl-i>button{padding:7px 9px}}
/* phones: a lab with 知识梳理 and 自由调参 has five steps; they fit the strip at 390 px instead of scrolling sideways (R7.8) */
@media (max-width:760px){.flow .fl-list:has(>.fl-i:nth-child(5)){gap:2px}.flow .fl-list:has(>.fl-i:nth-child(5))>.fl-i>button{padding:7px 6px;gap:5px}}

/* ---------- the knowledge tree's size (the owner, 2026-10-13) ----------
   wide windows: “on a MacBook the tree is only about 60% of the window wide and its labels are small; it should be about 80%”. The tree
   was held to the window's height (whole tree on one screen); now it fills the panel, which is at least 80% of the window wide */
@media (min-width:1005px){
  #map .map-canvas{width:max(100%,80vw);margin-left:min(0px,calc(50% - 40vw))}
  #mapSvg.tree{max-height:none}
}
/* narrow windows and phones: “the tree is simplified; show only part of it and let me drag to see the rest, like a maps app”. The whole
   tree at full size (its labels at 11 px) in a box that scrolls both ways; the branch list it replaces is no longer shown */
@media (max-width:1004px){
  #map .map-canvas{display:block;padding:6px;min-width:0;max-width:100%}
  #map .domgrid{display:none}
  #map .map-scroll{overflow:auto;max-width:100%;height:min(716px,calc(100vh - 150px));height:min(716px,calc(100svh - 150px));-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;-webkit-user-select:none}
  #map .map-scroll.dragging{cursor:grabbing}
  #mapSvg.tree{width:1224px;min-width:1224px;max-width:none;max-height:none}
}
/* a lab with a primer: a small open book on its tree box and on its tile */
.tnode .tbk{fill:none;stroke:var(--h);stroke-width:1.3;stroke-linejoin:round}
.tnode.live .tbk{stroke:var(--tr-on)}
.tnode.dim .tbk,.tnode.dim.live .tbk{stroke:color-mix(in srgb,var(--h) 50%,var(--surface))}
.tile-pr{display:inline-flex;align-items:center;color:var(--ink-2);cursor:help}
.bk-ico{display:block}
.map-legend .lg-bk{gap:5px}

/* a card that is one button looks like something you press: a light shadow, and on hover a darker edge, a deeper shadow and a 1 px lift
   (second reader, 2026-10-13: nobody saw the path cards could be clicked; the owner: the lab tiles work the same way) */
.pentry{box-shadow:0 1px 2px rgba(13,20,30,.07);transition:border-color .15s,box-shadow .15s,transform .15s}
.pentry:has(.pe-hit:hover){border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-1px)}
.tile.is-live{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.tile.is-live:hover:not(:has(:is(button,input,select,label,.seg-ctl,[role=slider],[tabindex="0"][data-tipx]):hover)){border-color:var(--branch);box-shadow:var(--shadow);transform:translateY(-2px)}
.tile.is-live:has(.tile-q a:focus-visible){outline:2px solid var(--branch);outline-offset:2px}
.tile-q a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.pentry,.tile.is-live{transition:none}.pentry:has(.pe-hit:hover),.tile.is-live:hover{transform:none!important}}

/* admission: capacity capstone */
.adm-graph{display:flex;flex-direction:column;gap:0}
.adm-blk{padding:8px 0}
.adm-blk+.adm-blk{border-top:1px solid var(--line)}
.adm-bh{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);margin:0 0 6px;min-height:1.35em;overflow-wrap:anywhere}
.adm-day,.adm-q{width:100%;min-width:0}
.adm-svg{display:block;max-width:100%;height:auto}
.adm-svg text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.adm-svg .adm-at{font-size:var(--fs-mark);fill:var(--ink-3)}
.adm-svg .adm-capt{font-size:var(--fs-mark);fill:var(--ink)}
.adm-ax{stroke:var(--ink-3)}
.adm-pa{fill:var(--c-weights)}
.adm-fr{fill:var(--c-kv)}
.adm-sc{fill:var(--c-overhead)}
.adm-over{fill:var(--c-oom);opacity:.85}
.adm-hbg{fill:var(--sunken)}
.adm-hln{stroke:var(--ink-3);stroke-width:2}
.adm-bt{stroke:var(--ink-3);stroke-width:.6}
.adm-cap{stroke:var(--ink);stroke-width:1.3;stroke-dasharray:5 3}
.adm-hl{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 2;rx:2}
.adm-lp,.adm-lf,.adm-lb{fill:none;stroke-width:2;stroke-linejoin:round}
.adm-lp{stroke:var(--c-weights)}
.adm-lf{stroke:var(--c-kv)}
.adm-lb{stroke:var(--ink-3);stroke-dasharray:4 3}
.adm-miss{fill:var(--c-oom)}
.adm-ph{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 2}
.adm-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 4px;font-size:var(--fs-label)}
.adm-legend>span{display:inline-flex;align-items:center;gap:6px;cursor:help}
.adm-sw{display:inline-block;width:14px;height:10px;border-radius:2px;flex:none}
.adm-sw.pa{background:var(--c-weights)}
.adm-sw.fr{background:var(--c-kv)}
.adm-sw.sc{background:var(--c-overhead)}
.adm-sw.over{background:var(--c-oom)}
.adm-sw.bt{background:repeating-linear-gradient(45deg,var(--ink-3) 0 2px,var(--sunken) 2px 5px);border:1px solid var(--ink-3)}
.adm-sw.cap{height:0;border-top:2px dashed var(--ink);border-radius:0}
.adm-sw.lp{height:3px;background:var(--c-weights)}
.adm-sw.lf{height:3px;background:var(--c-kv)}
.adm-sw.lb{height:0;border-top:2px dashed var(--ink-3);border-radius:0}
.adm-sw.miss{height:5px;background:var(--c-oom)}
.adm-run{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 0 0}
.adm-run .btn{min-height:30px}
.adm-speed{display:inline-flex;align-items:center;gap:6px;flex:none}
.adm-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.adm-app .adm-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);min-height:26px}   /* the kit's tray adds 3 px above and below its keys (2026-10-22 refit), so a 26 px key keeps the control 32 px tall, as before */
.adm-prog{flex:1 1 140px;min-width:120px}
.adm-goals{display:flex;flex-direction:column;gap:6px}
.adm-gr{display:grid;grid-template-columns:minmax(96px,150px) minmax(60px,1fr) max-content;align-items:center;gap:4px 10px;font-size:var(--fs-cap)}
.adm-gb{position:relative;height:10px;background:var(--sunken);border-radius:5px}
.adm-gb>i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--ink-3)}
.adm-gr.ok .adm-gb>i{background:var(--c-ok)}
.adm-gr.bad .adm-gb>i{background:var(--c-oom)}
.adm-gb>b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink)}
.adm-gv{font-size:var(--fs-label);white-space:nowrap}
@container (max-width:420px){.adm-gr{grid-template-columns:minmax(0,1fr) max-content}.adm-gb{grid-column:1/-1;grid-row:2}}
.adm-metrics.adm-wait .metric{opacity:.55}
.adm-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0}
.adm-ch-res{margin-top:10px}
.adm-ul{margin:4px 0 8px;padding-left:20px}
.adm-ul>li{margin:0 0 6px}
.adm-prod li{margin:4px 0}
.adm-fx{margin:6px 0 10px;overflow-x:auto;max-width:100%}
.adm-dk{height:8px;background:var(--sunken);border-radius:4px;overflow:hidden;min-width:60px}
.adm-dk i{display:block;height:100%;background:var(--ink-2)}
.adm-mb{padding:8px 0 10px}
.adm-mb+.adm-mb{border-top:1px solid var(--line)}
.adm-mb>p{margin:0 0 6px}
.adm-mb-res{margin-bottom:0}
.adm-eqs{display:grid;grid-template-columns:max-content max-content minmax(0,max-content);justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.35em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3;max-width:100%}
.adm-eq-l{text-align:right}
.adm-app .mathbody{container-type:inline-size}
@container (max-width:560px){.adm-eqs{grid-template-columns:max-content minmax(0,1fr)}.adm-eqs>.adm-eq-l{grid-column:1/-1;text-align:left}.adm-eqs>.adm-eq-l:empty{display:none}.adm-eq-r{min-width:0;overflow-x:auto}}
/* a group that wraps: each option is a chip of its own on the kit's tray, so the rows stay apart (R7.13) */
.adm-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.adm-app .inline-ctl .seg-ctl button{flex:1 0 auto;white-space:nowrap}
.adm-blk[hidden]+.adm-blk{border-top:0}
.adm-prod code,.adm-app .small code{overflow-wrap:anywhere;word-break:break-word}
.adm-gnote{margin:2px 0 0;padding-left:8px;border-left:3px solid var(--c-oom);font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
/* ---------- a wide stage (polish round 3, 2026-10-16; the owner's B4, R7.12): at 1440 × 900 parts 1, 2, 7 and 8 needed 69 px of
   scrolling inside the stage (part 5: 27). On a stage at least 736 px wide (windows from about 1226 px) the day chart and the busiest
   minute are drawn shorter (--adm-ch, read by chartH), the metric cards share the row by their number (it was five columns, the rest
   empty, so a card's name and its note took two lines) with the value and change lines tighter (as tool-scheduling's, CONTRACT §19),
   and a few gaps are tighter. In English the status badge keeps to the first line, beside the run's settings, and the title runs under
   it, instead of the badge taking a line of its own (40 px). Same pieces in the same order, same animation; phones (≤ 760 px) and
   narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  html:not([lang^="zh"]) .adm-stage>.stage-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start}
  html:not([lang^="zh"]) .adm-stage>.stage-head>div:first-child{display:contents}
  html:not([lang^="zh"]) #adm-st-title{grid-column:1;grid-row:1;align-self:center}
  html:not([lang^="zh"]) #adm-st-sub{grid-column:1/-1;grid-row:2}
  html:not([lang^="zh"]) .adm-stage>.stage-head>.stage-actions{grid-column:2;grid-row:1}
  #adm-graph{margin-top:10px;padding-top:8px;padding-bottom:8px}
  .adm-blk{padding:6px 0}
  .adm-bh{margin-bottom:4px}
  .adm-legend{margin:2px 0}
  .adm-run{padding-top:6px}
  .adm-goals{gap:4px}
  #adm-day,#adm-q{--adm-ch:120}
  .adm-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}
  .adm-metrics:has(>.metric:nth-child(4 of :not([hidden]))){grid-template-columns:repeat(4,minmax(0,1fr))}
  .adm-metrics:has(>.metric:nth-child(5 of :not([hidden]))){grid-template-columns:repeat(5,minmax(0,1fr))}
  .adm-metrics .metric .v{line-height:1.25}
  .adm-metrics .metric .d{min-height:13px;line-height:1.1}
  .adm-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 1, 2, 7 and 8 still ran 21 px past the stage (English
   24–41). The day's and the queue's charts are drawn 108 px high instead of 120 (chartH reads --adm-ch; they are drawn for their height,
   so their text keeps its size). In English, whose text takes more lines, they are drawn 100 px high and the blocks' padding is 5 px
   instead of 6 (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  #adm-day,#adm-q{--adm-ch:108}
  html[lang="en"] #adm-day,html[lang="en"] #adm-q{--adm-ch:100}
  html[lang="en"] .adm-blk{padding:5px 0}
}}

/* agent-anatomy: the loop diagram (model, your code, tools) with the active arrow lit and a two-line caption; the replay's player;
   the conversation as rows coloured by author; the bar chart of tokens each call sends (stacked by author, a dashed mark at the
   previous call's height); the time line (model lane, tool lane); the challenge's chart of tokens read so far against calls.
   Colours (R5.6): grayscale, outline and hatching only: the model solid, your code outlined, a tool hatched. Red only for a failed
   tool (is_error) and a run stopped before it is done; green only for the challenge's goal. Boxes keep their height during the
   replay (R7.9): captions have fixed lines, the conversation scrolls inside a fixed box. */
.ana-app [hidden]{display:none!important}
.ana-stage .stage-head{align-items:center}
.ana-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.ana-graph>div{min-width:0}
.ana-phone{display:none}
.ana-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:18px;height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 6px;font:var(--fs-mark)/16px var(--font-mono);color:var(--ink-2)}
.ana-leg>span{white-space:nowrap}
.ana-legn{color:var(--ink-3)}

/* ---------- who wrote a block: the model solid, your code outlined, a tool hatched ---------- */
.ana-sw{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:-1px;margin-right:6px;box-sizing:border-box;flex:none}
.ana-sw.w-model,.ana-col .s-model{background:var(--ink-2);border:1.5px solid var(--ink-2)}
.ana-sw.w-you,.ana-col .s-you{background:var(--surface);border:1.5px solid var(--ink-2)}
.ana-sw.w-tool,.ana-col .s-tool{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border:1.5px solid var(--ink-3)}
.ana-sw-err{background:transparent;border:2px solid var(--c-oom)}
.ana-sw-prev{width:14px;height:0;border:0;border-top:2px dashed var(--ink);border-radius:0;vertical-align:3px}

/* ---------- the loop: model ⇄ your code ⇄ tools ---------- */
.ana-loop{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr) auto minmax(0,1fr);align-items:center;gap:6px}
.ana-node{position:relative;border:1.5px solid var(--line);border-radius:6px;padding:6px 8px 6px 26px;background:var(--surface);min-width:0;transition:border-color .15s,box-shadow .15s}
.ana-node::before{content:"";position:absolute;left:8px;top:9px;width:11px;height:11px;border-radius:2px;box-sizing:border-box}
.ana-node.w-model::before{background:var(--ink-2);border:1.5px solid var(--ink-2)}
.ana-node.w-you::before{background:var(--surface);border:1.5px solid var(--ink-2)}
.ana-node.w-tool::before{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border:1.5px solid var(--ink-3)}
.ana-node b{display:block;font-size:var(--fs-cap);line-height:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-node span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:30px;font-size:var(--fs-mark);line-height:15px;color:var(--ink-3);overflow:hidden}
.ana-node.on{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);background:var(--surface-2)}
@container (max-width:600px){.ana-node span{display:none}}
.ana-arr{display:grid;gap:2px;font:var(--fs-mark)/15px var(--font-mono);color:var(--ink-3);text-align:center}
.ana-arr span{white-space:nowrap;padding:1px 4px;border-radius:3px}
.ana-arr em{font-style:normal}
.ana-arr span.on{color:var(--ink);font-weight:700;background:var(--surface-2)}
.ana-cap2{margin-top:8px;height:38px;overflow:hidden;font-size:var(--fs-cap);line-height:19px}
.ana-cap2 b,.ana-cap2 span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-cap2 b{color:var(--ink)}
.ana-cap2 span{color:var(--ink-2)}

/* ---------- the player ---------- */
.ana-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
/* H5 (the owner, 2026-10-09): a hairline between the stage’s blocks (the loop, the conversation, the token bars, the timeline); none above the first */
.ana-graph>[id$="box"]:not([hidden])~[id$="box"]:not([hidden]){border-top:1px solid var(--line);padding-top:12px}
.ana-player .ctl{display:flex;align-items:center;gap:6px;margin:0}
.ana-player .ctl>.lbl{font-size:var(--fs-label)}
.ana-player .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
.ana-play{min-width:96px;justify-content:center}
.ana-stepb{min-width:32px;justify-content:center;padding-inline:8px}
.ana-scrub{display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:0}
.ana-scrub input{flex:1 1 auto;min-width:0}
.ana-count{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;flex:none;min-width:92px;text-align:right}

/* ---------- the conversation: one row per block ---------- */
.ana-conv{height:176px;overflow-y:auto;border:1px solid transparent;border-radius:8px;background:var(--surface-2);padding:4px;display:grid;align-content:start;gap:3px;scroll-behavior:auto}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.ana-row{display:grid;grid-template-columns:12px minmax(96px,auto) minmax(0,1fr) 56px;align-items:center;gap:8px;height:22px;padding:0 6px;border:1px solid transparent;border-radius:3px;font-size:var(--fs-label);outline-offset:1px}
.ana-row .ana-sw{margin:0}
.ana-rl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-pv{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-rt{font-size:var(--fs-label);text-align:right;color:var(--ink);white-space:nowrap}
.ana-row.sent{background:var(--surface)}   /* inside a soft panel (var(--surface-2)), so a track or a highlight is var(--surface) (精装修 step 2) */
.ana-row.new{border-color:var(--ink-2)}
.ana-row.new .ana-rl{font-weight:700}
.ana-row.err{border:1.5px solid var(--c-oom)}
.ana-stoprow{grid-template-columns:minmax(96px,auto) minmax(0,1fr);border:1.5px dashed var(--ink-2)}
.ana-stoprow .ana-rl{font-weight:700}

/* ---------- the bars: tokens each call sends, stacked by author ---------- */
.ana-bars{min-width:0}
.ana-cols{position:relative;height:128px;margin-top:16px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;align-items:end;border-bottom:1px solid var(--line)}
.ana-col{position:relative;height:100%;border-radius:2px;outline-offset:2px}
.ana-col i{position:absolute;left:14%;right:14%;bottom:0;box-sizing:border-box}
.ana-col .s-model{border-radius:2px 2px 0 0}
.ana-col .s-todo{background:transparent;border:1px dashed var(--line);border-bottom:0}
.ana-col.todo{opacity:.7}
.ana-col.cur i:not(.s-todo){box-shadow:0 0 0 1px var(--ink)}
.ana-prevmk{position:absolute;left:4%;right:4%;height:0;border-top:2px dashed var(--ink);z-index:1;pointer-events:none}
.ana-cv{position:absolute;left:50%;transform:translateX(-50%);padding-bottom:2px;font:var(--fs-mark)/1.2 var(--font-mono);font-style:normal;color:var(--ink-2);white-space:nowrap;pointer-events:none}
.ana-col.cur .ana-cv{color:var(--ink);font-weight:700}
.ana-clabs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;padding-top:3px}
.ana-clabs span{text-align:center;font:var(--fs-mark)/1.3 var(--font-mono);color:var(--ink-3);min-width:0}
.ana-clabs span.on{color:var(--ink);font-weight:700}
.ana-cx{text-align:center;font-size:var(--fs-mark);color:var(--ink-3)}
.ana-cols[style*="--n:30"],.ana-clabs[style*="--n:30"]{gap:2px}

/* ---------- the time line ---------- */
.ana-time{display:grid;gap:5px}
.ana-lane,.ana-tscale{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:center}
.ana-ll{font:var(--fs-mark)/1.2 var(--font-mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-trk{position:relative;height:20px;background:var(--surface-2);border-radius:2px}
.ana-trk i{position:absolute;top:2px;bottom:2px;box-sizing:border-box;min-width:2px;outline-offset:1px}
.ana-trk .t-model{background:var(--ink-2);border-radius:2px}
.ana-trk .t-tool{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border:1px solid var(--ink-3);border-radius:2px}
/* tools run at the same time: one thin row each, at least 10 px wide, in a taller lane, with a label under them (R5.10) */
.ana-tl .ana-trk{height:30px}
.ana-trk .t-tool.par{top:calc(3px + var(--k) * 24px / var(--m));bottom:auto;height:calc(24px / var(--m) - 1px);min-width:10px}
.ana-tnt{position:relative;height:16px}
.ana-tnote{position:absolute;top:0;font:var(--fs-mark)/16px var(--font-mono);color:var(--ink);white-space:nowrap}
.ana-tnote.end{transform:translateX(-100%)}
.ana-ts{position:relative;height:16px;border-top:1px solid var(--line)}
.ana-ts span{position:absolute;top:2px;transform:translateX(-50%);font:var(--fs-mark)/1.2 var(--font-mono);color:var(--ink-3)}

/* ---------- the challenge: tokens read so far against calls ---------- */
.ana-chart{outline-offset:3px}
.ana-chart svg{display:block;width:100%;height:auto}
.ana-chart text{font:var(--fs-mark) var(--font-mono);fill:var(--ink-3)}
.ana-chart text.lab{font-size:var(--fs-label);fill:var(--ink)}
.ana-chart text.ax{fill:var(--ink-2)}
.ana-chart .g{stroke:var(--line-2);stroke-width:1}
.ana-chart .box{fill:var(--ink-3);fill-opacity:.07;stroke:none}
.ana-chart .lim{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:5 4}
.ana-chart path{fill:none;stroke-width:2.2;stroke-linejoin:round}
.ana-chart path.n{stroke:var(--ink)}
.ana-chart path.s{stroke:var(--ink-2);stroke-dasharray:6 4}
.ana-chart path.ghost{opacity:.25}
.ana-chart .sd{fill:var(--ink-2)}
.ana-chart .nd{fill:var(--c-oom)}
.ana-chart .nd.ok{fill:var(--c-ok)}
.ana-sw-n{width:16px;height:0;border:0;border-top:2.5px solid var(--ink);border-radius:0;vertical-align:3px}
.ana-sw-s{width:16px;height:0;border:0;border-top:2.5px dashed var(--ink-2);border-radius:0;vertical-align:3px}
.ana-sw-g{width:16px;height:0;border:0;border-top:2.5px solid var(--ink);opacity:.25;border-radius:0;vertical-align:3px}
.ana-sw-box{background:var(--surface-2);border:1.5px dashed var(--ink-2)}

/* ---------- metric cards ---------- */
.ana-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ana-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ana-metrics .metric .sub{min-height:2.7em}
@container (min-width:560px){.ana-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- formulas on their own line ---------- */
.ana-fx{margin:8px 0 10px;overflow-x:auto;font-size:var(--fs-stage);line-height:1.3}
.ana-fxn{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6em;row-gap:2px}
.ana-fx-nm{font-size:var(--fs-ui);color:var(--ink-2)}

/* ---------- rail ---------- */
.ana-mt{margin-top:12px}
.ana-ch-res{scroll-margin-top:120px}
.goal.ana-over b{color:var(--c-oom)}
.ana-lv{margin-top:6px}
.ana-app .goal span:last-child{text-align:right}
/* an option group that wraps to a second row (the challenge's token budget at desktop width): each option is a chip of its own on the
   kit's tray, so the rows stay apart (owner, 2026-10-14; R7.13) */
.ana-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.ana-app .inline-ctl .seg-ctl button{white-space:nowrap}
.ana-asm{margin:6px 0 12px;padding-left:18px;color:var(--ink-2)}
.ana-asm li{margin-bottom:3px}
.ana-remlist{margin:0 0 10px;padding-left:18px}
.ana-remlist li{margin-bottom:8px}
.ana-rem{margin-left:2px}

/* ---------- settings ---------- */
.ana-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.ana-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.ana-app .ctl output{white-space:nowrap}
/* the task list in Settings stacks its options in one column */
#ana-w-run .seg-ctl{display:grid;grid-template-columns:minmax(0,1fr)}
#ana-w-run .seg-ctl button{white-space:normal;line-height:1.3;padding-block:6px}

/* ---------- connect ---------- */
.ana-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.ana-prod li{margin-bottom:6px}
.ana-prod code,.ana-app .refs code{word-break:break-word}

/* ---------- dock: the bars, small ---------- */
.ana-dk{display:flex;align-items:flex-end;gap:2px;height:16px;width:100%;min-width:48px}
.ana-dk i{flex:1 1 0;min-width:1px;background:var(--ink-2);border-radius:1px 1px 0 0}

@media (max-width:760px){
  /* phones: the picture first, then the numbers (R7.3) */
  .ana-stage{display:flex;flex-direction:column}
  .ana-stage>.stage-head{order:1}
  .ana-stage>.ana-graph{order:2}
  .ana-stage>.metrics{order:3}
  .ana-stage>details.math{order:4}
  .ana-graph{padding:10px 10px 12px;gap:10px}
  .ana-phone:not(:empty){display:block}
  .ana-cap{height:36px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* the part's own chart right under its control */
  .ana-graph[data-v="calls"]>.ana-phone,.ana-graph[data-v="time"]>.ana-phone{order:-2}
  .ana-graph[data-v="calls"]>.ana-barsbox,.ana-graph[data-v="time"]>.ana-timebox{order:-1}
  /* that chart now comes first, so the hairline moves to the loop under it (H5) */
  .ana-graph[data-v="calls"]>[id$="box"]:not([hidden])~.ana-barsbox:not([hidden]),.ana-graph[data-v="time"]>[id$="box"]:not([hidden])~.ana-timebox:not([hidden]){border-top:0;padding-top:0}
  .ana-graph[data-v="calls"]>.ana-loopbox:not([hidden]),.ana-graph[data-v="time"]>.ana-loopbox:not([hidden]){border-top:1px solid var(--line);padding-top:10px}
  .ana-loop{gap:4px}
  .ana-node{padding:5px 6px 5px 22px}
  .ana-node::before{left:6px;top:8px;width:10px;height:10px}
  .ana-node b{font-size:var(--fs-label)}
  .ana-node span{display:none}
  .ana-arr em{display:none}
  .ana-arr span{padding:0 2px}
  .ana-cap2{height:57px}
  .ana-cap2 span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ana-count{min-width:0}
  .ana-row{grid-template-columns:11px minmax(0,1fr) 44px;gap:5px;padding:0 5px}
  .ana-rl{font-size:var(--fs-mark)}
  .ana-row .ana-pv{display:none}
  .ana-stoprow{grid-template-columns:auto minmax(0,1fr)}
  .ana-stoprow .ana-pv{display:block}
  .ana-cols,.ana-clabs{gap:3px}
  .ana-cv{display:none}
  .ana-col.cur .ana-cv{display:block}
  .ana-lane,.ana-tscale{grid-template-columns:50px minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){.ana-node{transition:none}}

/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.ana-mb{padding:8px 0 10px}
.ana-mb+.ana-mb{border-top:1px solid var(--line)}
.ana-mb>p{margin:0 0 6px}
.ana-mb>p.ana-mb-res{margin:6px 0 0}
.ana-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.ana-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.ana-eqs-nm{grid-template-columns:max-content max-content}.ana-eqs-nm>.ana-eq-l{grid-column:1/-1;text-align:left}.ana-eqs-nm>.ana-eq-l:empty{display:none}}

/* 知识梳理 (2026-10-12): a formula on its own line */
.primer .ana-prfx{display:block;max-width:100%;overflow-x:auto;padding:.3em 0;margin:0 0 12px;font-size:1.05em}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4, R7.12): at 1440 × 900 the stage had to scroll inside itself by
   68 px (parts 1, 3, 4) and 111 px (parts 2, 6; the replay's player above the conversation), and Scenarios and Settings by 277 px: the
   conversation and the bars of tokens sent sat one under the other, each across the whole stage. On a stage at least 736 px wide (1440
   and 1280 px windows among them) they sit side by side, the conversation on the left, read in the same order as before (the loop and
   its caption, the player, the conversation, the bars, the time line under them in Settings); the hairline above them runs across
   both, and a hairline divides them (R7.13). In the narrower column a row of the conversation keeps its label and its number whole:
   the number's column is 44 px (as on a phone; the widest number, the long log's “40,000”, takes 41 px) and the gaps are tighter, so
   the one-line preview, cut on purpose, keeps what is left. With 9 to 12 calls the bars' values (“11,342”, 38 px) come closer than
   their width, so their letters are set a little closer there and do not touch. The metric cards' value and change lines are tighter
   (CONTRACT §19). The time line (part 5) and the challenge's chart keep the whole width. Same pieces, same order, same replay; phones
   (≤ 760 px) and narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .ana-graph:not([data-v="time"]):not([data-v="ch"]){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0}
  .ana-graph:not([data-v="time"]):not([data-v="ch"])>*{grid-column:1/-1}
  .ana-graph:not([data-v="time"]):not([data-v="ch"])>.ana-convbox{grid-column:1;padding-right:10px}
  .ana-graph:not([data-v="time"]):not([data-v="ch"])>.ana-barsbox{grid-column:2;border-left:1px solid var(--line);padding-left:10px}
  .ana-graph:not([data-v="time"]):not([data-v="ch"]) .ana-row{gap:6px;padding:0 4px}
  .ana-graph:not([data-v="time"]):not([data-v="ch"]) .ana-row:not(.ana-stoprow){grid-template-columns:12px minmax(96px,auto) minmax(0,1fr) 44px}
  .ana-graph:not([data-v="time"]):not([data-v="ch"]) .ana-cols:is([style="--n:9"],[style="--n:10"],[style="--n:11"],[style="--n:12"]) .ana-cv{letter-spacing:-.6px}
  .ana-metrics .metric .v{line-height:1.25}
  .ana-metrics .metric .d{min-height:13px;line-height:13px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
#ana-conv-cap,#ana-cap2 b,#ana-metrics .sub{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 5 still ran 49 px past the stage, in both languages
   (in parts 2, 4 and 6 only the conversation's own box scrolls, as it is meant to). The graph's and the nodes' padding, the gap above
   the caption, the space above the bars and the timeline and the legend's gap are 2–6 px smaller, and the columns are drawn 100 px high
   instead of 128 */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .ana-graph{padding-top:8px;padding-bottom:8px}
  .ana-node{padding-block:4px}
  .ana-cap2{margin-top:6px}
  .ana-barsbox{padding-top:8px}
  .ana-timebox{padding-top:6px}
  .ana-leg{margin-top:2px}
  .ana-cols{height:100px}
}}

/* agent-capstone: the score strip (success, its 95% interval, the goal lines), the grid of runs (tasks × runs, canvas),
   the player, the causes of failure, the metric cards. Colours (R5.6): grayscale for the picture; red only for a run with an
   unsafe action and for ✗; green only for ✓ and passing rows. */
.acp-stage .stage-head{align-items:center}
.acp-graph{padding:12px 14px 14px;display:grid;gap:8px;min-width:0}
/* H5 (the owner, 2026-10-09): a hairline between the stage’s three blocks: the runs, the success rate, why runs fail */
#acp-score-cap,#acp-cause-cap{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.acp-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}

/* ---------- the score strip ---------- */
.acp-score{min-width:0;min-height:70px;outline-offset:3px;cursor:help}
.acp-score.acp-wait{cursor:default;background:var(--surface-2);border-radius:3px}
.acp-score svg{display:block;max-width:100%;height:auto;overflow:visible}
.acp-score svg text{font-family:var(--font-mono);font-size:var(--fs-mark);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.acp-axl{stroke:var(--line-2);stroke-width:1}
.acp-tk{fill:var(--ink-3)}
.acp-goal{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:5 3}
.acp-gt{fill:var(--ink);font-weight:650}
.acp-goal2{stroke:var(--ink-2);stroke-width:1.4;stroke-dasharray:1.5 2.5}
.acp-gt2{fill:var(--ink-2)}
.acp-b1-ci{stroke:var(--ink);stroke-width:2}
.acp-b1-pt{fill:var(--ink)}
.acp-b1-lb{fill:var(--ink);font-weight:650}
.acp-b0-ci{stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:3 2}
.acp-b0-pt{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.6}
.acp-b0-lb{fill:var(--ink-3)}

/* ---------- the grid of runs ---------- */
.acp-gridw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start;min-width:0}
.acp-rowl{display:flex;flex-direction:column;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.acp-rowl span{display:flex;align-items:center;white-space:nowrap;line-height:1}
.acp-gridc{min-width:0}
.acp-grid{position:relative;min-width:0;cursor:help;outline-offset:3px;border-radius:2px}
.acp-grid canvas{display:block;max-width:100%}
/* the kinds sit under their columns (R5.9); a label wider than its bracket spills inward, never past the grid */
.acp-kinds{position:relative;height:34px;margin-top:3px}
.acp-kind{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;cursor:help;line-height:1.2}
.acp-kind.acp-k0{align-items:flex-start}
.acp-kind.acp-k9{align-items:flex-end}
.acp-kind i{display:block;align-self:stretch;height:5px;border:1px solid var(--ink-3);border-top:0;margin-bottom:2px}
.acp-kind b{font-size:var(--fs-mark);font-weight:650;color:var(--ink-2);white-space:nowrap}
.acp-kind span{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap}
.acp-legend{margin-top:0}
.acp-legend>span{cursor:help;display:inline-flex;align-items:center}

/* legend swatches: the same fills as the cells */
.sw.acp-sw-ok{background:var(--ink-2);border-color:transparent}
.sw.acp-sw-no{background:var(--surface);border:1px solid var(--ink-3)}
.sw.acp-sw-un{background:var(--c-oom);border-color:transparent}
.sw.acp-sw-wait{background:var(--surface-2);border-color:transparent}

/* ---------- the player ---------- */
.acp-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.acp-play{min-width:92px}
.acp-speed button{font-size:var(--fs-label);padding:3px 9px}
.acp-scrub{flex:1 1 140px;min-width:120px}
/* the tally keeps two lines' height, so the stage does not jump while the runs play (R7.9) */
.acp-tally{font-size:var(--fs-label);line-height:1.45;color:var(--ink-2);min-height:2.9em}

/* ---------- why runs fail ---------- */
.acp-causes{display:grid;gap:4px;min-width:0}
.acp-cz{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr) 2.8em;align-items:center;gap:8px;font-size:var(--fs-label);cursor:help}
.acp-czl{color:var(--ink-2);line-height:1.25}
.acp-czt{display:block;height:9px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.acp-czt i{display:block;height:100%;background:var(--ink-3)}
.acp-cz-u .acp-czt i{background:var(--c-oom)}
.acp-czv{text-align:right;color:var(--ink)}

/* ---------- metric cards ---------- */
.acp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.acp-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.acp-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.acp-lv{margin-top:6px}
.acp-goal-l{margin:6px 0 10px;padding-left:18px}
.acp-goal-l li{margin-bottom:3px}
.acp-one{margin:4px 0 10px;padding-left:18px}
.acp-one li{margin-bottom:2px}
.acp-one li.acp-best{font-weight:650}
.acp-rem{padding-left:18px}
.acp-rem li{margin-bottom:10px}
.acp-rem-b{display:inline-block;margin-top:4px}
.acp-rem-b[aria-pressed="true"]{font-weight:650;border-color:var(--ink)}
.acp-mis{padding-left:18px}
.acp-mis li{margin-bottom:6px}
.acp-gl{list-style:none;padding:0;margin:6px 0 8px;display:grid;gap:3px}
.acp-gl li{display:flex;gap:6px;font-size:var(--fs-cap);line-height:1.4}
.acp-met>span{color:var(--c-ok)}
.acp-miss>span{color:var(--c-oom)}
.acp-live{margin-top:10px}
.acp-mt{margin-top:12px}
.acp-ch-res{scroll-margin-top:120px}
.acp-app .inline-ctl .seg-ctl{flex-wrap:wrap}
/* a long option (“裁剪 + 摘要 + 笔记”) breaks at its spaces, never inside a word */
.acp-app .seg-ctl button{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- settings ---------- */
.acp-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.acp-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.acp-as-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.acp-as output{white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink)}
.acp-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.acp-row .ctl-note{flex-basis:100%}

/* a formula on its own line inside a capability-card answer (R6.29) */
.acp-fx{display:block;margin:6px 0 8px;overflow-x:auto;font-size:var(--fs-stage);line-height:1.3}

/* ---------- connect ---------- */
.acp-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.acp-prod li{margin-bottom:6px}

/* ---------- the dock's mini bar: the interval, the dot and the goal, on the stage's 40% to 100% axis ---------- */
.acp-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.acp-dk i{position:absolute;top:0;height:100%;display:block}
.acp-dk i.ci{background:var(--ink-3);opacity:.45}
.acp-dk i.gl{width:0;border-left:1.5px dashed var(--ink)}
.acp-dk i.pt{width:4px;margin-left:-2px;background:var(--ink)}

@media (max-width:760px){
  /* phones: the picture first; its legend sits right under the grid (R5.9) */
  .acp-stage{display:flex;flex-direction:column}
  .acp-stage>.stage-head{order:1}
  .acp-stage>.acp-graph{order:2}
  .acp-stage>.acp-scope{order:4}
  .acp-stage>.metrics{order:5}
  .acp-stage>details.math{order:6}
  .acp-graph{padding:10px 10px 12px}
  .acp-play{min-width:84px}
  .acp-scrub{flex-basis:100%}
  .acp-cz{grid-template-columns:minmax(0,10.5em) minmax(0,1fr) 2.6em;gap:6px}
  .acp-tally{min-height:4.4em}
}

/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.acp-mb{padding:8px 0 10px}
.acp-mb+.acp-mb{border-top:1px solid var(--line)}
.acp-mb>p{margin:0 0 6px}
.acp-mb>p:last-child{margin-bottom:0}
.acp-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.acp-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.acp-eqs-nm{grid-template-columns:max-content max-content}.acp-eqs-nm>.acp-eq-l{grid-column:1/-1;text-align:left}.acp-eqs-nm>.acp-eq-l:empty{display:none}}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4: “动画播放面板被整体顶得靠下了”) ----------
   At 1440 × 900 part 5 (the initial setup drawn beside the new harness) ran 8 px past the stage's 814 px in Chinese; in English
   parts 4 and 6 ran 31 px past it and part 5 61 px. On a stage at least 736 px wide:
   - the speed buttons are as wide as their words, so “Medium” no longer breaks inside the word and the player keeps one line (13 px);
   - the five causes of failure sit two to a row, read left to right (stopped, wrong / lost, over the window / unsafe), each still
     its name, its bar and its count (44 px);
   - the two captions under the hairlines, the note on the assumptions and the metric cards sit 2–4 px closer, and the cards take
     CONTRACT §19's compact line heights (value 1.25, change line 13 px).
   The grid of runs stays first, the success-rate strip keeps the full width, the blocks keep their order and hairlines; phones
   and narrower stages are unchanged. */
@media (min-width:761px){@container (min-width:736px){
  .acp-player .acp-speed{flex:none}
  .acp-player .acp-speed button{flex:1 0 auto;white-space:nowrap}
  .acp-causes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  #acp-score-cap,#acp-cause-cap{padding-top:8px;margin-top:2px}
  .acp-stage>.acp-scope{margin:8px 0 4px}
  .acp-metrics{margin-top:8px}
  .acp-metrics .metric .v{line-height:1.25}
  .acp-metrics .metric .d{min-height:13px;line-height:13px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.acp-runl{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 5 still ran 15 px past the stage (English: parts 4–6,
   26–56). The figure's padding and the space above its two captions and above the scope line are smaller. In English the subtitle
   took two lines beside the status badge: there the badge sits beside the title and the subtitle has the stage's whole width under
   them (as in pd-disagg), the figure's padding is 4 px smaller again, the scope line has 4 px above it and none under it, and the
   causes' rows sit 2 px closer (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  #acp-graph{padding-top:10px;padding-bottom:10px}
  #acp-score-cap,#acp-cause-cap{padding-top:6px;margin-top:0}
  .acp-stage>.acp-scope{margin:6px 0 2px}
  html[lang="en"] .acp-stage>.stage-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center}
  html[lang="en"] .acp-stage>.stage-head>div:first-child{display:contents}
  html[lang="en"] #acp-st-title{grid-column:1;grid-row:1}
  html[lang="en"] .acp-stage>.stage-head>.stage-actions{grid-column:2;grid-row:1}
  html[lang="en"] #acp-st-sub{grid-column:1/-1;grid-row:2}
  html[lang="en"] #acp-graph{padding-top:6px;padding-bottom:6px}
  html[lang="en"] .acp-stage>.acp-scope{margin:4px 0 0}
  html[lang="en"] .acp-causes{row-gap:2px}
}}

/* agent-reliability: the grid of 30 tasks × n steps (canvas), the player, the success curve against the number of steps,
   the metric cards. Colours (R5.6): grayscale, hatching and outlines; green and red only for ✓ / ✗ and the challenge's goal. */
.arl-stage .stage-head{align-items:center}
.arl-graph{padding:12px 14px 14px;display:grid;gap:10px;min-width:0}
.arl-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.arl-legend{margin-top:0}
.arl-legend>span{cursor:help;display:inline-flex;align-items:center}
.arl-okm{color:var(--c-ok);margin-right:2px}
.arl-badm{color:var(--c-oom);margin-right:6px}

/* ---------- the grid of tasks ---------- */
.arl-grid{position:relative;min-width:0;cursor:help;outline-offset:3px;border-radius:2px}
.arl-grid canvas{display:block;max-width:100%}

/* ---------- the player ---------- */
.arl-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.arl-play{min-width:92px}
.arl-speed button{font-size:var(--fs-label);padding:3px 9px}
.arl-scrub{flex:1 1 140px;min-width:120px}
/* the tally keeps two lines' height, so the stage does not jump while the tasks run (R7.9) */
.arl-tally{font-size:var(--fs-label);line-height:1.45;color:var(--ink-2);min-height:2.9em}

/* ---------- the curve ---------- */
.arl-curve{display:grid;gap:4px;min-width:0}
/* H5 (the owner, 2026-10-09): a hairline between the tasks running (grid, legend, player) and the success curve */
.arl-graph>.arl-grid~.arl-curve:not([hidden]){border-top:1px solid var(--line);padding-top:10px}
.arl-svgw{min-width:0;min-height:132px;outline-offset:3px;cursor:help}
.arl-svgw.arl-wait{cursor:default;background:var(--surface-2);border-radius:3px}
.arl-svgw svg{display:block;max-width:100%;height:auto;overflow:visible}
.arl-gl{stroke:var(--line-2);stroke-width:1}
.arl-tk{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.arl-plain{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:4 3}
.arl-mine{fill:none;stroke:var(--ink);stroke-width:2.2}
.arl-ln{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.arl-ln2{fill:var(--ink-3)}
.arl-mk{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
.arl-dot{fill:var(--ink)}
.arl-dot2{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.5}
.arl-vl{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--ink);paint-order:stroke fill;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round}
.arl-vl2{font-weight:400;fill:var(--ink-3)}

/* ---------- legend swatches (the same shapes as the cells; R5.11: the step where a task goes wrong has a red outline) ---------- */
.sw.arl-sw-ok{background:var(--ink-2);border-color:transparent}
.sw.arl-sw-rt{width:16px;border:0;border-radius:0;background:linear-gradient(90deg,transparent 0 6px,var(--surface) 6px 7px,var(--ink-2) 7px);box-shadow:inset 0 0 0 1px var(--ink-3)}
.sw.arl-sw-si{background:repeating-linear-gradient(135deg,var(--ink) 0 1.2px,var(--surface) 1.2px 3.2px);border:1.2px solid var(--c-oom)}
.sw.arl-sw-pa{background:var(--line-2);border-color:transparent}
.sw.arl-sw-st{background:var(--surface);border:1.6px solid var(--c-oom)}
/* narrow cells (R5.10): a retried step is drawn as one mid-gray cell, and its swatch says so */
.sw.arl-sw-rt.arl-tight{width:12px;background:var(--ink-3);box-shadow:none}

/* ---------- metric cards ---------- */
.arl-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.arl-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.arl-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.arl-fx{margin:8px 0 10px;overflow-x:auto}
.arl-lv{margin-top:6px}
.arl-mt{margin-top:12px}
.arl-ch-res{scroll-margin-top:120px}
.arl-app .goal.arl-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.arl-app .goal.arl-goal span:last-child{white-space:normal}
.goal.arl-over b{color:var(--c-oom)}
.arl-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.arl-remlist li{margin-bottom:8px}
.arl-rem{font-size:var(--fs-label);white-space:nowrap}
.arl-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}

/* ---------- settings ---------- */
.arl-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.arl-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.arl-grp .ctl>.lbl{display:block}
.arl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.arl-row .ctl-note{flex-basis:100%}
.arl-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.arl-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.arl-prod li{margin-bottom:6px}
.arl-prod code{word-break:break-word}

/* ---------- the dock's mini bar: right, wrong at the end, stopped ---------- */
.arl-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden;display:flex}
.arl-dk i{display:block;height:100%}
.arl-dk i.ok{background:var(--ink-2)}
.arl-dk i.wr{background:repeating-linear-gradient(135deg,var(--ink) 0 1.2px,var(--surface) 1.2px 3.2px)}
.arl-dk i.st{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}

@media (max-width:760px){
  /* phones: the picture first; its legend sits right under the grid (R5.9) */
  .arl-stage{display:flex;flex-direction:column}
  .arl-stage>.stage-head{order:1}
  .arl-stage>.arl-graph{order:2}
  .arl-stage>.arl-scope{order:4}
  .arl-stage>.metrics{order:5}
  .arl-stage>details.math{order:6}
  .arl-graph{padding:10px 10px 12px}
  .arl-play{min-width:84px}
  .arl-scrub{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.arl-dk i{transition:none}}
/* R7.9: the batch caption changes every few seconds while the tasks run: one line, never wrapped */
#arl-batch{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.arl-mb{padding:8px 0 10px}
.arl-mb+.arl-mb{border-top:1px solid var(--line)}
.arl-mb>p{margin:0 0 6px}
.arl-mb>p:last-child{margin-bottom:0}
.arl-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.arl-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.arl-eqs-nm{grid-template-columns:max-content max-content}.arl-eqs-nm>.arl-eq-l{grid-column:1/-1;text-align:left}.arl-eqs-nm>.arl-eq-l:empty{display:none}}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4, R7.12): at 1440 × 900 the stage had to scroll inside itself by
   68 px (Chinese, every part; English parts 1 and 2) and 107 px (English parts 3 to 6, whose legend takes two lines): the grid of
   tasks, its legend, the player, the tally and the success curve sat one under the other, each across the whole stage. On a stage at
   least 736 px wide (1440 and 1280 px windows among them) the grid and its legend keep the whole width, and the curve sits beside the
   player and the tally, drawn shorter (--arl-ch, read by drawCurve); the curve keeps its hairline on top, and one on its left keeps it
   apart from the player and the tally beside it (H5, R7.13). In its half of the row the player puts its slider on a line of its own,
   as on a phone. R7.9: the tally keeps two lines, as before, and the curve's caption two lines (the caption before the tasks finish
   takes one in Chinese, the one after them two), so the row does not change height while the tasks run. The metric cards' value and
   change lines are tighter (CONTRACT §19) and a few gaps are 2 px tighter. Same pieces, same order, same replay; phones (≤ 760 px) and
   narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .arl-graph{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;gap:8px 0;padding:10px 14px 12px}
  .arl-graph>*{grid-column:1/-1}
  .arl-graph>#arl-batch{grid-row:1}
  .arl-graph>.arl-grid{grid-row:2}
  .arl-graph>.arl-legend{grid-row:3}
  .arl-graph>.arl-player{grid-column:1;grid-row:4;align-self:start;padding-right:12px;row-gap:6px}
  .arl-graph>.arl-tally{grid-column:1;grid-row:5;align-self:start;padding-right:12px}
  .arl-graph>.arl-grid~.arl-curve:not([hidden]){grid-column:2;grid-row:4/span 2;align-self:start;padding:8px 0 0 12px;border-left:1px solid var(--line);--arl-ch:104}
  .arl-scrub{flex-basis:100%}
  #arl-curve-cap{min-height:2.7em}
  .arl-svgw{min-height:104px}
  .arl-scope{margin:8px 0 4px}
  .arl-metrics{margin-top:10px}
  .arl-metrics .metric .v{line-height:1.25}
  .arl-metrics .metric .d{min-height:13px;line-height:13px}
  .arl-stage>details.math{margin-top:10px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) every part still ran 23 px past the stage (English 23–62).
   The curve beside the grid is drawn 84 px high instead of 104 (drawCurve reads --arl-ch; it is drawn for its height, so its text keeps
   its size) and the gaps above the scope line and the metric cards are smaller. In English, whose legend and notes take more lines,
   the figure's padding and the gaps under it are 2 px smaller again (R7.16), and parts 4–6 still run 20 px past 1536 × 730 (62
   before): a curve drawn shorter than 84 px crowds its labels */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .arl-graph>.arl-grid~.arl-curve:not([hidden]){--arl-ch:84}
  .arl-svgw{min-height:84px}
  .arl-scope{margin:6px 0 2px}
  .arl-metrics{margin-top:8px}
  html[lang="en"] .arl-graph{padding-top:8px;padding-bottom:8px}
  html[lang="en"] .arl-scope{margin:4px 0 0}
  html[lang="en"] .arl-metrics{margin-top:6px}
  html[lang="en"] .arl-stage>details.math{margin-top:6px}
  html[lang="en"] .arl-legend{row-gap:2px}
}}

/* ---------- Architecture overview v2 (prefix ar-): a data-flow picture (specs/architecture-v2.md). Parameters blue (R5.6), K and V amber,
   Q magenta, attention weights teal, one soft tint per token lane, the next token ink. ---------- */
:root{--ar-q:#C8367E;--ar-v:#9A5B00;--ar-att:#0E8C8C;--ar-t0:#9A86E6;--ar-t1:#EE8F7A;--ar-t2:#D9B63C;--ar-t3:#8DB84A;--ar-t4:#55AFD6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ar-q:#F06BAA;--ar-v:#C98A1E;--ar-att:#34C3C3;--ar-t0:#AE9CF5;--ar-t1:#F4A08C;--ar-t2:#E5C454;--ar-t3:#A0CB5E;--ar-t4:#6CC2E8}}
:root[data-theme="dark"]{--ar-q:#F06BAA;--ar-v:#C98A1E;--ar-att:#34C3C3;--ar-t0:#AE9CF5;--ar-t1:#F4A08C;--ar-t2:#E5C454;--ar-t3:#A0CB5E;--ar-t4:#6CC2E8}
.ar-app{overflow-anchor:none}

/* ---------- home hero: six stages left to right on one canvas; the stage names are the buttons over it ---------- */
.ar-hero2{position:relative}
.ar-hbar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:0 0 4px}
.ar-hcap{margin:0;font-size:var(--fs-stage);color:var(--ink-2)}
.ar-hcap b{color:var(--ink)}
.ar-hdesc{flex:1 1 0;min-width:0}   /* basis 0: a long description wraps inside its box instead of dropping to its own row (no jump between stages) */
.ar-hnext{margin-left:auto;min-width:40px}
.ar-hstage{position:relative;height:306px}
.ar-hcv{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.ar-hbtns{position:absolute;inset:0}
.ar-hb{position:absolute;display:flex;align-items:flex-start;justify-content:center;padding:9px 6px 0;border:0;border-radius:10px;background:transparent;color:var(--ink-2);
  font:600 var(--fs-label)/1.2 var(--font-ui);text-align:center;cursor:default;overflow:hidden}
.ar-hb span{white-space:normal}
.ar-hb:not(.on){padding:9px 3px 0;font-size:var(--fs-label);line-height:1.15}
.ar-hb.on{justify-content:flex-start;padding-left:16px;font-size:var(--fs-cap);color:var(--ink)}
.ar-hero2.narrow .ar-hstage{height:auto}
.ar-hero2.narrow .ar-hcv{position:relative;height:250px}
.ar-hero2.narrow .ar-hbtns{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
/* narrow card: the stage names form a grid of plain labels, the current one underlined; no box, so they do not read as buttons (2026-10-11) */
.ar-hero2.narrow .ar-hb{position:static;justify-content:center;padding:7px 4px 5px;border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;color:var(--ink-3);font-size:var(--fs-label)}
.ar-hero2.narrow .ar-hb.on{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:760px){.ar-hcap{font-size:var(--fs-cap)}.ar-hdesc{order:3;flex-basis:100%}}
/* the stage's sentence keeps two lines' room wherever it can wrap, so the picture and the page below do not jump when a longer
   sentence (self-attention, MLP) comes round (review A #3, R7.9) */
@media (max-width:1100px){.ar-hdesc{min-height:2.9em;min-height:2lh}}
/* the hero's one caption: whose shapes, and that its numbers are set by hand (review B-01, B-02; R2.9) */
.ar-hnote{margin:6px 0 0;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.4;color:var(--ink-3)}

/* ---------- the lab's overview: one canvas, a transparent button over each component ---------- */
.ar-ov{position:relative;width:100%}
.ar-ovcv{display:block;width:100%;height:650px}
.ar-hots{position:absolute;inset:0;pointer-events:none}
.ar-hot{position:absolute;pointer-events:auto;border-radius:10px;cursor:pointer;outline:none}
/* the kit's .t underline and hover background would draw an empty box over the canvas: the canvas highlights the component instead */
.ar-hot.t,.ar-hot.t:hover,.ar-hot.t:focus{border:0;background:transparent}
/* hover and focus light up the component itself on the canvas (ovPaint), so no box is drawn here */
.ar-hint{margin:6px 0 0}
.ar-legend .sw{margin-right:5px}
.sw.ar-sw-lane{width:18px;background:linear-gradient(90deg,var(--ar-t0) 0 20%,var(--ar-t1) 0 40%,var(--ar-t2) 0 60%,var(--ar-t3) 0 80%,var(--ar-t4) 0);border-color:transparent}
.sw.ar-sw-w{background:var(--c-weights);border-color:transparent}
.sw.ar-sw-att{background:var(--ar-att);border-color:transparent}
.sw.ar-sw-plus{display:none}
.ar-dk{display:flex;gap:3px;height:12px}
.ar-dk i{flex:1 1 0;border-radius:2px}

/* tooltips: definition, formula, where it is used */
#tip .ar-tn{font-weight:700;margin-bottom:2px}
#tip .ar-tf{margin:5px 0 3px;padding:3px 6px;border-radius:4px;background:rgba(127,127,127,.16);font-size:var(--fs-label);white-space:normal}
#tip .ar-tu{font-size:var(--fs-label);opacity:.85}
.ar-term{border-bottom:1px dotted currentColor;cursor:help}
.ar-info{display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--ink-3);border-bottom-width:1.5px;border-radius:50%;font:700 var(--fs-label) var(--font-mono);color:var(--ink-2)}

/* ---------- rail ---------- */
.ar-pred{display:grid;gap:6px;margin:8px 0}
.ar-fb{margin-top:8px}
.ar-fb.ok{border-left:3px solid var(--c-ok)}
.ar-fb.no{border-left:3px solid var(--ink-3)}
.ar-open{display:flex;align-items:center;gap:10px;margin:8px 0 4px}
.ar-seen{font-size:var(--fs-label);color:var(--ink-3)}
.ar-sum{margin:2px 0 8px;padding-left:18px}
.ar-sum li{margin-bottom:3px}
.ar-presets{display:grid;gap:6px;margin:10px 0}
.ar-presets .choice{display:grid;gap:2px;text-align:left}
.ar-presets .choice span{font-size:var(--fs-label);color:var(--ink-2)}
.ar-presets .choice[aria-pressed="true"] span{color:inherit;opacity:.82}
.ar-ch h3{margin:4px 0 10px;font-size:var(--fs-lead)}
.ar-chq{margin:0 0 14px}
.ar-chq p{margin:0 0 6px}
.ar-cho{display:grid;gap:5px}
.ar-cho .choice{text-align:left;font-size:var(--fs-cap)}
.ar-cho .choice.right{border-color:var(--line);box-shadow:inset 0 0 0 2px var(--c-ok)}
.ar-cho .choice.wrong{border-color:var(--line);box-shadow:inset 0 0 0 2px var(--c-oom)}
.ar-chr{margin-top:6px;padding:6px 8px;border-radius:6px;background:var(--surface-2)}
.ar-chr.ok{border-left:3px solid var(--c-ok)}
.ar-chr.no{border-left:3px solid var(--c-oom)}
.ar-chr p{margin:0 0 6px;font-size:var(--fs-cap)}
.ar-chs{font-size:var(--fs-label);color:var(--ink-2)}
.ar-prod{margin:0;padding-left:18px;font-size:var(--fs-cap);color:var(--ink-2)}
.ar-prod li{margin-bottom:8px}

/* ---------- pop-ups: a large modal with a stepper; the kit tooltip (z-index 60) stays above it ---------- */
.ar-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.ar-backdrop{position:absolute;inset:0;background:rgba(6,10,15,.58)}
.ar-dialog{position:relative;display:flex;flex-direction:column;width:min(1100px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);outline:none}
.ar-dlg-head{display:flex;align-items:center;gap:12px;padding:14px 18px 8px}
.ar-dlg-head h2{font-size:var(--fs-big);line-height:1.2;margin:0;outline:none;flex:1 1 auto;min-width:0}
.ar-stepper{display:flex;align-items:center;gap:6px}
.ar-sn{font-size:var(--fs-label);color:var(--ink-2);min-width:42px;text-align:center}
.ar-pcap{margin:0;padding:0 18px 10px;font-size:var(--fs-stage);color:var(--ink);border-bottom:1px solid var(--line-2);min-height:1.5em}
.ar-dlg-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:12px 18px 18px;font-size:var(--fs-ui);min-width:0}
.ar-dlg-body p{margin:0 0 8px}
.ar-pctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 8px}
.ar-pctl .lbl{font-size:var(--fs-label);font-weight:600;color:var(--ink-2)}
.ar-pctl .seg-ctl{margin:0}
.ar-pctl .inline-ctl{margin:0;min-width:260px}
.ar-tag{font-family:var(--font-mono);font-size:var(--fs-label);padding:2px 8px;border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
.ar-illus{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.ar-pscroll{overflow-x:auto;overscroll-behavior-x:contain}
.ar-psvg{display:block;width:100%;height:auto;min-width:640px}
.ar-psvg.fit{min-width:0;max-width:760px}
.ar-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
.ar-two .ar-psvg{min-width:0}
@media (max-width:760px){.ar-modal{padding:0}.ar-dialog{width:100%;height:100%;max-height:none;border:0;border-radius:0}.ar-dlg-body{flex:1 1 auto;padding:10px 14px 20px}
  .ar-dlg-head{padding:12px 14px 8px;flex-wrap:wrap}.ar-pcap{padding:0 14px 8px;font-size:var(--fs-ui)}.ar-two{grid-template-columns:minmax(0,1fr)}.ar-two .ar-psvg{min-width:0}}
/* svg text and shapes */
.ar-sv{font-family:var(--font-ui);font-size:var(--fs-cap);fill:var(--ink-2)}
.ar-sv.big{font-size:var(--fs-big);fill:var(--ink)}
.ar-sv.huge{font-size:34px;font-weight:700;fill:var(--ink)}
.ar-sv.small{font-size:var(--fs-label)}
.ar-sv.b{font-weight:700;fill:var(--ink)}
.ar-sv.w{fill:var(--c-weights);font-weight:700}
.ar-sv.muted,.ar-sv tspan.muted{fill:var(--ink-3)}
.ar-sv.mono{font-family:var(--font-mono);font-size:var(--fs-label)}
/* a weight on its teal cell: dark ink on the light theme's tints; on the dark theme's, white until the cell is bright (hi) */
.ar-sv.aw{fill:#10151c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ar-sv.aw{fill:#fff}:root:not([data-theme="light"]) .ar-sv.aw.hi{fill:#10151c}}
:root[data-theme="dark"] .ar-sv.aw{fill:#fff}:root[data-theme="dark"] .ar-sv.aw.hi{fill:#10151c}
.ar-sv.huge.mono{font-size:34px;font-weight:700;fill:var(--ink)}
.ar-sv.tokt{font-size:var(--fs-ui);fill:#10151c;font-weight:600}
.ar-sv.tk{fill:#10151c}   /* a vocabulary word on its token tint: dark ink, as on the token pills, in both themes */
.ar-sv.tokl{font-family:var(--font-mono);font-size:var(--fs-label);fill:var(--ink)}
.ar-sl{stroke:var(--ink-3);stroke-width:1.3;fill:none}
.ar-sl.id{stroke-dasharray:3 3}
.ar-wt{fill:color-mix(in srgb,var(--c-weights) 16%,transparent);stroke:var(--c-weights);stroke-width:1.4}
.ar-wl{stroke:var(--c-weights);stroke-opacity:.18;stroke-width:1}
.ar-wlit{fill:var(--c-weights);fill-opacity:.6}
.ar-chd{fill:var(--surface-2);stroke:var(--line)}
.ar-hbox{fill:none;stroke:var(--ink-3);stroke-dasharray:4 3;stroke-width:1.2}
.ar-note{fill:var(--surface-2);stroke:var(--line)}
.ar-note.hot{stroke:var(--ink);stroke-width:1.5}
.ar-sg{outline:none;cursor:help}
.ar-sg:focus-visible>*:first-child{stroke:var(--ink);stroke-width:2}
.ar-sc{fill:var(--ink-3)}
.ar-aw{fill:var(--ar-att)}
.ar-hbg{fill:var(--surface-2)}
.ar-hl{stroke:var(--ink-3);stroke-width:1.2;stroke-opacity:.6}
.ar-cell{cursor:crosshair}
.ar-cell.hl rect{stroke:var(--ink);stroke-width:1.5}
.ar-cell.sel rect{stroke:var(--ar-q);stroke-width:2}
.ar-sum{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.6}
.ar-flow{fill:none;stroke:var(--ar-v);stroke-opacity:.75;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:0;animation:arDraw 1s ease both}
.ar-plot{fill:var(--surface-2);stroke:var(--line)}
.ar-ax{stroke:var(--line);stroke-width:1}
.ar-curve{fill:none;stroke:var(--ar-att);stroke-width:2.2}
.ar-probe{fill:var(--ar-q);stroke:var(--surface);stroke-width:2}
.ar-ring{fill:none;stroke:var(--ink-2);stroke-width:2}
.ar-rope{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.ar-ropea{fill:none;stroke:var(--ar-q);stroke-width:2}
.ar-trk{fill:var(--surface-2)}
.ar-road{fill:color-mix(in srgb,var(--ar-t4) 40%,transparent);stroke:var(--ar-t4)}
.ar-gap{fill:var(--surface)}
.ar-br{fill:none;stroke:var(--ar-t4);stroke-width:3;stroke-opacity:.8}
.ar-ringb{fill:var(--surface);stroke:var(--ink-2);stroke-width:2.2}
.ar-ringb.off{stroke:var(--line);stroke-dasharray:3 2}
.ar-x{stroke:var(--c-oom);stroke-width:2.2}
.ar-attb{fill:color-mix(in srgb,var(--ar-att) 12%,var(--surface));stroke:var(--ar-att);stroke-width:1.4}
.ar-mlpb{fill:color-mix(in srgb,var(--c-weights) 10%,var(--surface));stroke:var(--c-weights);stroke-width:1.4}
.ar-ghost{fill:none;stroke:var(--ink-3);stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:3 3}
.ar-live{fill:none;stroke:var(--ar-q);stroke-width:2.6}
.ar-live2{fill:none;stroke:var(--ar-att);stroke-width:2.6}
/* motion: what a step adds comes in; nothing moves with reduced motion */
.ar-new{animation:arIn .55s ease both}
.ar-grow{transform-box:fill-box;transform-origin:left center;animation:arGrow .7s ease both}
.ar-slide{animation:arSlide .8s cubic-bezier(.2,.8,.2,1) both}
.ar-fadein{animation:arIn .6s ease both}
.ar-cell{animation:arIn .4s ease both}
@keyframes arIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes arGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes arSlide{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes arDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ar-new,.ar-grow,.ar-slide,.ar-fadein,.ar-cell,.ar-flow,.ar-ofly.on{animation:none!important}}
/* R3.20: a re-render that shows nothing new (pause, end of play, the same option, a language switch) draws the step finished; a new draw animates only the token */
.ar-dlg-body.ar-still :is(.ar-new,.ar-grow,.ar-slide,.ar-fadein,.ar-cell,.ar-flow){animation:none!important}
.ar-dlg-body.ar-still-fly :is(.ar-ofly.on,.ar-mark){animation:none!important}

/* output pop-up: the logits drag, live softmax, temperature, greedy or sampled, the loop */
.ar-out{display:grid;gap:10px}
.ar-oprompt{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--surface-2);font-size:var(--fs-stage)}
.ar-ofly{display:inline-block;padding:2px 10px;border-radius:12px;background:var(--ink);color:var(--surface);font-weight:600;opacity:0}
.ar-ofly.on{opacity:1;animation:arFly 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes arFly{from{opacity:0;transform:translate(260px,180px) scale(.8)}60%{opacity:1}to{opacity:1;transform:none}}
.ar-ohead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ar-lmh{display:inline-block;padding:4px 12px;border-radius:6px;border:1.5px solid var(--c-weights);background:color-mix(in srgb,var(--c-weights) 14%,transparent);color:var(--c-weights);font:600 var(--fs-label) var(--font-mono)}
.ar-cands{display:grid;gap:6px}
.ar-cand{display:grid;grid-template-columns:90px minmax(120px,1fr) minmax(140px,1.2fr);align-items:center;gap:12px;padding:4px 8px;border-radius:6px}
.ar-cand.pick{background:var(--surface-2)}
.ar-cand.smp{box-shadow:inset 0 0 0 2px var(--ar-q)}
.ar-ct{font-size:var(--fs-cap)}
.ar-cr{display:flex;align-items:center;gap:8px}
.ar-cr input{flex:1 1 auto;min-width:0}
.ar-cr output{font-size:var(--fs-label);min-width:30px}
.ar-cp{position:relative;display:block;height:16px;border-radius:4px;background:var(--surface-2)}
.ar-cp i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--ink-3);transition:width .25s ease}
.ar-cand.pick .ar-cp i{background:var(--ink)}
.ar-cp b{position:absolute;right:6px;top:0;font-size:var(--fs-label);line-height:16px;font-weight:600}
.ar-greedy{font-size:var(--fs-ui)}
@media (max-width:760px){.ar-cand{grid-template-columns:70px minmax(0,1fr);}.ar-cp{grid-column:1 / -1}}

/* ---------- home tile ---------- */
.sw.ar-sw-emb{background:repeating-linear-gradient(0deg,var(--c-weights) 0 1px,transparent 1px 3px);border-color:var(--c-weights)}
.sw.ar-sw-head{background:repeating-linear-gradient(90deg,var(--c-weights) 0 1px,transparent 1px 3px);border-color:var(--c-weights)}
.sw.ar-sw-tied{background:transparent;border:1.5px dashed var(--c-weights)}
.sw.ar-sw-layer{width:10px;background:radial-gradient(circle,var(--c-weights) 0 1.1px,transparent 1.4px) 0 0/3.5px 3.5px;box-shadow:inset 0 0 0 1px var(--c-weights);border-color:transparent;border-radius:1px}
.ar-tz rect.emb,.ar-tz rect.head{fill:var(--surface);stroke:var(--c-weights);stroke-width:1.5}
.ar-tz rect.tied{fill:none;stroke:var(--c-weights);stroke-width:1.5;stroke-dasharray:3 2}
.ar-tz rect.lay{fill:url(#ar-tzdots);stroke:var(--c-weights);stroke-width:.6}
.ar-tz .dot{fill:var(--c-weights)}
.ar-tz line.row{stroke:var(--c-weights);stroke-width:1}
.ar-tz text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.ar-tzw .tz-leg .sw{margin-right:5px}
/* home tile v2: the hero's flow in small, the whole picture is the one control */
.ar-tzbtn{position:relative;display:block;width:100%;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
/* the picture is a button: say so right under it, not only in the caption (second reader, 2026-10-13); below the picture, so it covers
   no part of it (the owner: the hero button once covered the dashed loop back to the input) */
.ar-tz-next{display:block;width:max-content;margin:4px 0 0 auto;padding:2px 9px;border:1px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font-size:var(--fs-label);font-weight:650;line-height:1.5}
.ar-tzbtn:hover .ar-tz-next,.ar-tzbtn:focus-visible .ar-tz-next{background:var(--ink);color:var(--bg)}
.ar-tzbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ar-tzcv{display:block;width:100%;height:124px}

/* QA v2: segmented buttons never break inside a label (the group wraps instead); phone pop-ups as tall as their content */
.ar-pctl .seg-ctl{flex-wrap:wrap;max-width:100%}
.ar-pctl .seg-ctl button{white-space:nowrap;flex:0 1 auto}
@media (max-width:760px){.ar-modal{align-items:flex-start}.ar-dialog{height:auto;max-height:100%;max-height:100dvh}}
.ar-vcard{fill:var(--surface-2);stroke:var(--line)}
.ar-vpill{fill:var(--surface);stroke:var(--line)}
/* the model's shape, under the settings */
.ar-shp{display:grid;gap:2px;margin:8px 0 6px;font-size:var(--fs-cap)}
.ar-shp div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dotted var(--line-2)}
.ar-shp dt{color:var(--ink-2)}
.ar-shp dd{margin:0;color:var(--ink);text-align:right;white-space:nowrap}
.ar-shp-svg{display:block;width:100%;max-width:230px;height:auto;margin:10px 0 2px}
.ar-shp-svg rect{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.ar-shp-svg rect.on{fill:color-mix(in srgb,var(--c-weights) 22%,transparent);stroke:var(--c-weights)}
.ar-shp-svg text{font:500 var(--fs-mark) var(--font-mono);fill:var(--ink-3)}
.ar-shp-svg text.on{fill:var(--ink);font-weight:600}
.ar-shp-note{margin:4px 0 0}
@media (min-width:1181px) and (min-height:600px){#ar-controls{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px)}html[data-limb] #ar-controls{top:calc(env(safe-area-inset-top,0px) + 12px)}}   /* as the stage: the top bar scrolls away on a lab page (styles.css) */

/* round 17: the output pop-up's LM head step and the read-only probabilities of the pick step */
.ar-zbar{fill:var(--ink-3);fill-opacity:.55}.ar-zbar.top{fill:var(--ink);fill-opacity:1}.ar-zbar.faint{fill-opacity:.18}
.ar-sl.dot{stroke-dasharray:2 4}
.ar-cands.ro .ar-cand{grid-template-columns:90px minmax(140px,1fr)}
@media (max-width:760px){.ar-cands.ro .ar-cand{grid-template-columns:70px minmax(0,1fr)}.ar-cands.ro .ar-cp{grid-column:auto}}
.ar-lmh.ar-sm{border-color:var(--ink-3);background:var(--surface-2);color:var(--ink-2)}
.ar-onote{margin:0}

/* review 12: formulas in diagrams (MathML in a foreignObject) */
.ar-fxo{font-size:var(--fs-cap);line-height:1.15;color:var(--ink);white-space:nowrap}
.ar-fxo.sm{font-size:var(--fs-label);color:var(--ink-2)}
.ar-fxo math{color:var(--ink)}
/* position: the pair that keeps its score; the RoPE dials */
.ar-sc.hot{stroke:var(--ar-q);stroke-width:2.2}
.ar-dial{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.ar-dial.dim{opacity:.55}
.ar-arc{fill:none;stroke:var(--ink-2);stroke-width:1.4}
.ar-qar{stroke:var(--ar-q);stroke-width:2.4;stroke-linecap:round}
.ar-kar{stroke:var(--c-kv);stroke-width:2.4;stroke-linecap:round}
.ar-gar{stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round}
.ar-qar.hd{fill:var(--ar-q);stroke:none}.ar-kar.hd{fill:var(--c-kv);stroke:none}.ar-gar.hd{fill:var(--ink-3);stroke:none}
.ar-qdot{fill:var(--ar-q)}.ar-kdot{fill:var(--c-kv)}
/* the MLP as a network */
.ar-fc{stroke:var(--ink-3);stroke-opacity:.16;stroke-width:.8}
.ar-fc.g{stroke:var(--ar-att);stroke-opacity:.16}
.ar-fc.up,.ar-fc.gp{fill:none;stroke-opacity:.5;stroke-width:1}
.ar-fc.res{fill:none;stroke-opacity:.55;stroke-width:1.1}
.ar-nn{stroke:var(--ink-2);stroke-width:1}
.ar-nn.in,.ar-nn.out,.ar-nn.prod{fill:var(--ar-t4)}
.ar-nn.hid{fill:var(--ink-3)}
.ar-nn.up{fill:var(--ar-v)}
.ar-nn.gate{fill:var(--ar-att)}
.ar-nn.gate.probe{stroke:var(--ar-q);stroke-width:2.6}
/* the next-token draw: the probabilities end to end, where the random number landed, the last draws, the counts */
.ar-cum{margin:12px 0 4px}
.ar-cumw{position:relative;padding:7px 0 5px}
.ar-cumbar{display:flex;height:26px;border-radius:5px;overflow:hidden;background:var(--surface-2)}
.ar-seg{display:flex;align-items:center;justify-content:center;min-width:0;font:600 var(--fs-label) var(--font-mono);white-space:nowrap;overflow:hidden;color:var(--ink);border-right:1px solid var(--surface)}
.ar-seg.s0{background:var(--ink);color:var(--bg)}
.ar-seg.s1{background:color-mix(in srgb,var(--ink-3) 58%,transparent)}
.ar-seg.s2{background:color-mix(in srgb,var(--ink-3) 44%,transparent)}
.ar-seg.s3{background:color-mix(in srgb,var(--ink-3) 32%,transparent)}
.ar-seg.s4{background:color-mix(in srgb,var(--ink-3) 22%,transparent);border-right:0}
.ar-seg.hit{box-shadow:inset 0 0 0 2px var(--ar-q)}
.ar-mark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ar-q);border-radius:1px;animation:ar-drop .35s ease}
.ar-mark::before{content:'';position:absolute;left:-5px;top:-5px;border:6px solid transparent;border-top-color:var(--ar-q)}
@keyframes ar-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ar-cumax{position:relative;display:flex;justify-content:space-between;font-size:var(--fs-mark);color:var(--ink-3);height:32px}
.ar-ulab{position:absolute;top:15px;transform:translateX(-50%);color:var(--ar-q);font-weight:600;white-space:nowrap}
.ar-ulab.al{transform:translateX(-2px)}.ar-ulab.ar{transform:translateX(calc(-100% + 2px))}
.ar-hist{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0}
.ar-hp{font:600 var(--fs-label) var(--font-mono);padding:2px 8px;border-radius:10px;background:var(--surface-2);color:var(--ink);white-space:nowrap}
.ar-hp.s0{background:var(--ink);color:var(--bg)}
.ar-hp.new{box-shadow:0 0 0 2px var(--ar-q)}
.ar-cp em{position:absolute;left:0;bottom:-5px;height:3px;border-radius:2px;background:var(--ar-q)}
.ar-cn{font-size:var(--fs-label);color:var(--ink-2);text-align:right;white-space:nowrap}
.ar-cands.ro.cnt .ar-cand{grid-template-columns:90px minmax(140px,1fr) 64px}
@media (max-width:760px){.ar-cands.ro.cnt .ar-cand{grid-template-columns:70px minmax(0,1fr) 56px}.ar-cands.ro.cnt .ar-cp{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.ar-mark{animation:none}}
/* the dialog's stepper keeps its buttons on one line; a long title wraps instead */
.ar-stepper{flex:0 0 auto}
.ar-stepper .btn,.ar-close{white-space:nowrap}
/* Batch 0 (Codex review 1): the link from the RoPE step to self-attention, under the figure */
.ar-pctl.ar-pgo{margin:10px 0 0;justify-content:flex-end}
.ar-fchip{white-space:normal;line-height:1.35}
/* Batch 1 (Codex review 1): model switch on the stage, deep dives, one challenge question at a time */
.ar-shead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.ar-mseg{margin:0}
.ar-mseg button{min-width:44px}
.ar-deep{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px}
.ar-deep .lbl{flex-basis:100%;font-size:var(--fs-label);font-weight:600;color:var(--ink-3)}
.ar-deep .ar-seen{font-size:inherit;color:var(--c-ok)}
.ar-deepchip{display:inline-block;margin-right:8px;padding:0 7px;border:1px solid var(--line);border-radius:999px;font:600 var(--fs-mark)/1.7 var(--font-mono);color:var(--ink-3);vertical-align:4px}
.ar-chdots{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.ar-chg{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ar-chdots .lbl{min-width:3.2em;font-size:var(--fs-label);color:var(--ink-3);margin-right:4px}
@media (max-width:760px){.ar-fchip{font-size:var(--fs-mark);padding:1px 7px}}
.pb-dot.ok{border-color:var(--c-ok);color:var(--c-ok)}
.pb-dot.no{border-color:var(--c-oom);color:var(--c-oom)}
.pb-dot.on.ok,.pb-dot.on.no{color:var(--bg)}
.ar-chk{margin:0 0 6px;font-size:var(--fs-label);color:var(--ink-3)}
.ar-ch .ar-chs{display:block;margin:10px 0 0;font-size:var(--fs-label);color:var(--ink-3)}
.ar-shape{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* ---------- the causal switch (guided part 5): the stage swaps the overview for one SVG; teal = attention, hatched = hidden by the mask,
   red = the leak (R5.6: red only for failure), everything else grayscale and the token tints ---------- */
.ar-stage.ar-mkon .ar-mseg,.ar-stage.ar-mkon .ar-hint{display:none}
.ar-mk[hidden],.ar-ov[hidden]{display:none!important}
.ar-mksvg{display:block;width:100%;height:auto;overflow:visible}
.ar-mk-lane{fill:none;stroke-width:2.5;stroke-opacity:.8}
.ar-mk-lane.dim{stroke-opacity:.28}
.ar-mk-lane.empty{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 3}
.ar-mk-hd{fill:var(--ink-3)}
.ar-mk-att{fill:none;stroke:var(--ar-att)}
.ar-mk-leak path{fill:none;stroke:var(--c-oom);stroke-linecap:round}
.ar-mk-leak path.ar-mk-lhd{fill:var(--c-oom);stroke:none}
.ar-mk-leak path.dash{stroke-dasharray:4 4}
.ar-mk-tgt{fill:var(--surface);stroke-width:1.5}
.ar-mk-p{fill:var(--ink)}
.ar-mk-lk{fill:var(--c-oom)}
.ar-mkc rect{stroke:var(--surface);stroke-width:.5}
.ar-mk-loss{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.ar-mk-loss.off{stroke:var(--c-oom)}
.ar-sv.ar-mk-red{fill:var(--c-oom)}
.ar-sv.ar-mk-invt{fill:var(--surface)}
.ar-mk-br{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.ar-mk-c{fill:var(--ink-3);fill-opacity:.55}
.ar-mk-c.top{fill:var(--ink);fill-opacity:1}
.ar-mk-c.bad{fill:var(--c-oom);fill-opacity:1}
.ar-mk-q{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:3 3}
.ar-mk-q.off{stroke:var(--c-oom)}
.ar-mk-bar,.ar-mk-lv{outline:none}
.ar-mk-bar:focus-visible .ar-trk,.ar-mk-lv:focus-visible text{stroke:var(--ink);stroke-width:1}
.ar-mkdraw{stroke-dasharray:600;animation:arDraw .8s ease both}
.sw.ar-sw-hatch{background:repeating-linear-gradient(45deg,var(--ink-3) 0 1px,var(--surface-2) 1px 4px);border-color:var(--ink-3)}
.sw.ar-sw-leak{background:var(--c-oom);border-color:transparent}
.ar-mkobs.on{border-left:3px solid var(--c-ok)}
.ar-mkobs.off{border-left:3px solid var(--c-oom)}
@media (prefers-reduced-motion:reduce){.ar-mkdraw{animation:none!important;stroke-dasharray:none}}
#ar-mk.ar-still :is(.ar-mkdraw,.ar-mk-late,.ar-grow){animation:none!important}
#ar-mk.ar-still .ar-mkdraw{stroke-dasharray:none}
/* round 1 (review tree-causal-A, L1–L11): hovers on the stage's numbers show a help cursor (R1.1, R1.3); "training loss" is defined on
   hover; numbers appear once their bars have grown; the reason Next waits; the mini result bar's chance of " Paris" */
.ar-mk-tip{cursor:help;outline:none}
.ar-mk-tip:focus-visible rect,.ar-mk-tip:focus-visible text{stroke:var(--ink);stroke-width:.8}
.ar-mkc{cursor:help}
.ar-mk-dtxt{text-decoration:underline dotted;text-underline-offset:2px}
.ar-mk-late{animation:arIn .35s ease .55s both}
.ar-mk-end{fill:var(--ink)}
.ar-mk-end.off{fill:var(--c-oom)}
.ar-mkwait{margin:6px 0 0;color:var(--ink-2)}
.ar-mkwait-l{color:var(--ink-2)}
.ar-dkp{position:relative;width:64px;height:10px;border-radius:3px;background:var(--surface-2);overflow:hidden;cursor:help}
.ar-dkp i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.ar-dkp.bad i{background:var(--c-oom)}
@media (prefers-reduced-motion:reduce){.ar-mk-late{animation:none!important}}
/* R07 (round 3): the last guided part: the scenarios are the next step; the other labs and the next lab are quiet text links there */
.ar-nextstep{margin:12px 0 6px}
.ar-nextstep+.stepnav{margin-top:0}
.ar-later{margin:12px 0 0}
.next-lab.ar-nlq{padding:0;border:0;background:none;margin-top:14px;flex-direction:row;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.next-lab.ar-nlq .nl-go{font-weight:500;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-ui)}
/* the challenge: the summary once the core three are right */
.ar-ch .ex-passed{margin:10px 0 4px}

/* 知识梳理 (2026-10-11): the deep-dive steps as a display in the primer, without their controls and notes */
.pr-fr.pr-ar{overflow:visible;padding:0;font-size:var(--fs-ui)}
.primer .pr-ar :is(.ar-pctl,.ar-illus,.ar-onote,.ar-cr,.ar-hist,.ar-cn){display:none!important}
.primer .pr-ar .ar-out>p.small{display:none}
.primer .pr-ovbox{position:relative}
.primer .pr-ovbox canvas{display:block;width:100%}
.pr-fx{display:block;overflow-x:auto;padding:.3em 0;font-size:1.05em}
/* the home hero plays on its own (2026-10-11 19:28 UTC): the stage names are labels, not buttons */
.ar-hb{cursor:default;pointer-events:none}
.ar-hb:hover:not(.on){color:var(--ink-2)}
.ar-seg.ar-segr{background:transparent;color:var(--ink-3);font-family:var(--font-ui,inherit)}
.ar-crest .ar-ct{font-size:var(--fs-label);color:var(--ink-3);line-height:1.25}
.ar-crest .ar-cp i{background:color-mix(in srgb,var(--ink-3) 35%,transparent)}
/* 精装修 step 2: 700 px tall or less (1366 × 650), the overview's frame and the line under it are tighter: the drawing is already at its
   smallest spacing there (ovFit), so this is what lets the stage fit without scrolling inside */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){#ar-graph{padding-top:4px;padding-bottom:4px}.ar-stage>.small.muted{margin-top:2px}}

/* backprop: the computation graph (parameter boxes, operation boxes with value and gradient), the backward player, the gradient
   check panel (the loss curve, autograd's slope solid, the finite-difference slope dashed), and the challenge's checks.
   Colours (R5.6): grayscale only; green and red only for a check that passes or fails and for the error banner. */
.bp-stage .stage-head{align-items:center}
.bp-stage .stage-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end}
.bp-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.bp-sub{font-size:var(--fs-label);color:var(--ink-2);line-height:1.35}

/* ---------- the graph ---------- */
.bp-gwrap{min-width:0;overflow:hidden}
.bp-svg{display:block;max-width:100%;height:auto;margin:0 auto}
.bp-svg text{font-family:var(--font-mono);fill:var(--ink-2)}
.bp-e{fill:none;stroke:var(--ink-3);stroke-width:1.3}
.bp-e.bp-on{stroke:var(--ink);stroke-width:2.6}
.bp-arh{fill:var(--ink-3)}
.bp-n{cursor:help;outline:none}
.bp-n rect{fill:var(--surface);stroke:var(--line);stroke-width:1}
.bp-n.bp-par rect{stroke:var(--ink-2);stroke-width:2.4}
.bp-n.bp-known rect{fill:var(--surface-2)}
.bp-n.bp-src rect{stroke:var(--ink);stroke-width:2}
.bp-n.bp-on rect{stroke:var(--ink);stroke-width:2;stroke-dasharray:5 3}
.bp-n.bp-errn rect{stroke:var(--c-oom);stroke-width:2.4;fill:var(--c-oom-soft)}
.bp-n:focus-visible rect{stroke:var(--ink);stroke-width:2.6}
.bp-svg .bp-t1{font-size:var(--fs-mark);font-weight:650;fill:var(--ink)}
.bp-svg .bp-t2{font-size:var(--fs-mark);fill:var(--ink-2)}
.bp-svg .bp-t3{font-size:var(--fs-mark);fill:var(--ink-3)}
.bp-n.bp-known .bp-t3{fill:var(--ink);font-weight:650}
.bp-svg .bp-tag{font-size:var(--fs-mark);fill:var(--ink-3)}
.bp-cl rect{fill:var(--surface);stroke:var(--ink);stroke-width:1.2}
.bp-svg .bp-cl text{font-size:var(--fs-mark);font-weight:650;fill:var(--ink)}
.bp-svg .bp-fant{font-size:var(--fs-mark);font-weight:650;fill:var(--ink)}
.bp-svg .bp-fan.bp-bad .bp-fant{fill:var(--c-oom)}

/* ---------- the backward player ---------- */
.bp-pwrap{display:grid;gap:8px;min-width:0;border-top:1px solid var(--line-2);padding-top:10px}
.bp-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.bp-pb{min-width:36px;justify-content:center}
.bp-playbtn{min-width:86px}
.bp-scrub{display:flex;align-items:center;gap:8px;flex:1 1 200px;max-width:100%}
.bp-scrub input[type=range]{flex:1 1 auto;min-width:80px}
.bp-scrub output{font-size:var(--fs-label);white-space:nowrap;color:var(--ink-2);min-width:6.5em;flex:none}
.bp-speed button{font-size:var(--fs-label);padding:3px 9px}
.bp-read{margin:0;font-size:var(--fs-cap);line-height:1.45;color:var(--ink-2);min-height:4.4em;overflow-wrap:anywhere}
.bp-err{font-size:var(--fs-cap);line-height:1.45;color:var(--c-oom);background:var(--c-oom-soft);border:1px solid var(--c-oom);border-radius:4px;padding:8px 10px;overflow-wrap:anywhere}
.bp-player.bp-inline{margin-top:8px}
.bp-player.bp-inline .bp-scrub{flex-basis:140px}

/* ---------- the gradient check ---------- */
/* the check and the error come first in the chart: they are the part's result (R3.10). On a wide stage they sit beside the graph,
   so the sticky stage keeps the graph, the check and the player on one screen at 1440 × 900 (review A6) */
.bp-top{display:grid;gap:12px;min-width:0}
.bp-side{display:grid;gap:12px;min-width:0;order:-1;align-content:start}
.bp-side:not(:has(>:not([hidden]))){display:none}
@container (min-width:576px){
  .bp-top.bp-two{grid-template-columns:max-content minmax(0,1fr);align-items:start}
  .bp-top.bp-two>.bp-side{order:0}
  .bp-top.bp-two .bp-check{border-bottom:0;padding-bottom:0}
  .bp-side>.bp-metrics{grid-template-columns:minmax(0,1fr)!important;margin:0}
}
.bp-check{display:grid;gap:8px;min-width:0;border-bottom:1px solid var(--line-2);padding-bottom:10px}
.bp-check .bp-sub{font-weight:650;color:var(--ink);font-size:var(--fs-cap)}
.bp-ckrow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;min-width:0}
.bp-cksvg{display:block;max-width:100%;height:auto;flex:none;border-radius:3px;cursor:help;outline-offset:2px}
.bp-ckbg{fill:var(--surface-2)}
.bp-curve{fill:none;stroke:var(--ink-3);stroke-width:2}
.bp-tan{fill:none;stroke:var(--ink);stroke-width:2}
.bp-tan.bp-bad{stroke:var(--c-oom)}
.bp-sec{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:6 4}
.bp-dot{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
.bp-pt{fill:var(--ink)}
.bp-cknum{display:grid;gap:4px;min-width:150px;flex:1 1 150px;font-size:var(--fs-label);color:var(--ink-2)}
.bp-cknum>div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bp-cknum>div[data-tipx]{cursor:help}
.bp-cknum b{color:var(--ink);font-size:var(--fs-cap);white-space:nowrap}
.bp-cknum .okc{color:var(--c-ok);font-weight:650}
.bp-cknum .bp-bad{color:var(--c-oom);font-weight:650}
.bp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.bp-chips>.bp-sub{flex:1 1 100%}
.bp-chip{font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.2;padding:4px 8px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.bp-chip:hover{border-color:var(--ink-3)}
.bp-chip.bp-on{border:1.5px solid var(--ink);color:var(--ink);font-weight:650}
.bp-chip.bp-ok{color:var(--c-ok)}
.bp-chip.bp-bad{color:var(--c-oom)}

/* ---------- legend swatches ---------- */
.sw.bp-sw-par{background:var(--surface);border:2.4px solid var(--ink-2)}
.sw.bp-sw-op{background:var(--surface);border:1px solid var(--line)}
.sw.bp-sw-on{background:transparent;border:1.5px dashed var(--ink)}
.sw.bp-sw-tan{width:16px;height:0;border:0;border-top:2px solid var(--ink);border-radius:0;margin:0 6px 3px 0}
.sw.bp-sw-sec{width:16px;height:0;border:0;border-top:2px dashed var(--ink-2);border-radius:0;margin:0 6px 3px 0}
#bp-legend>span{cursor:help}

/* ---------- metric cards ---------- */
.bp-metrics[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.bp-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.bp-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.bp-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bp-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;max-width:100%;cursor:help}
.bp-scope span{border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.bp-mt{margin-top:12px}
.bp-ch-res{scroll-margin-top:120px}
#bp-ch-res{scroll-margin-top:120px}
.bp-lv{margin-top:6px}
.bp-app .goal span:last-child{white-space:nowrap}
.bp-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.bp-app .inline-ctl .seg-ctl button{white-space:nowrap}
.bp-lv .lever .lv-r{grid-column:2 / 4;grid-row:2;padding-top:0}
.bp-lv .lever .lv-d{grid-row:3}
.bp-lv .lever .lv-r:empty{display:none}
.bp-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .bp-why{margin-top:6px}
.bp-remlist{padding-left:18px}
.bp-remlist li{margin-bottom:8px}
.bp-rem{font-size:var(--fs-label);white-space:nowrap}
.bp-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}
.bp-app .goal.bp-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.bp-app .goal.bp-goal span:last-child{white-space:normal}
.bp-nw{white-space:nowrap}

/* ---------- the challenge's checks ---------- */
.bp-chks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}
.bp-chk{display:grid;gap:2px;text-align:left;font:inherit;font-size:var(--fs-label);line-height:1.3;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);cursor:pointer;min-width:0}
.bp-chk:hover:not(:disabled){border-color:var(--ink-3)}
.bp-chk .mono{font-size:var(--fs-label);color:var(--ink-3);overflow-wrap:anywhere}
.bp-chk:disabled{cursor:default;opacity:1}
.bp-chk.bp-ok{border-color:var(--c-ok)}
.bp-chk.bp-ok .mono{color:var(--c-ok)}
.bp-chk.bp-bad{border-color:var(--c-oom)}
.bp-chk.bp-bad .mono{color:var(--c-oom)}
.bp-sig{margin:12px 0;min-width:0;overflow-x:auto}
.bp-sig table{width:100%;border-collapse:collapse;font-size:var(--fs-label);line-height:1.35}
.bp-sig th,.bp-sig td{padding:4px 5px;border-bottom:1px solid var(--line-2);text-align:center;vertical-align:top}
.bp-sig th:first-child,.bp-sig td:first-child{text-align:left}
.bp-sig td.bp-x{color:var(--c-oom);font-weight:650}
.bp-sig td.bp-v{color:var(--ink-3)}
.bp-sig tr.bp-on td{background:var(--surface-2);font-weight:650}

/* ---------- connect ---------- */
.bp-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.bp-prod li{margin-bottom:6px}
.bp-prod code,.refs code{word-break:break-word}

/* ---------- mini result bar: each parameter's gradient size ---------- */
.bp-dk{display:flex;gap:3px;width:100%;min-width:60px;cursor:help}
.bp-dk span{position:relative;flex:1 1 0;min-width:0;height:13px;background:var(--surface-2);border-radius:2px}   /* not clipped: a 13 px bar on a phone still shows all of “w₂” */
.bp-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);opacity:.55;border-radius:inherit}
.bp-dk em{position:absolute;left:2px;top:0;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:13px;color:var(--ink);white-space:nowrap}

@media (max-width:760px){
  /* phones: the picture first, its legend right under it (R7.3) */
  .bp-stage{display:flex;flex-direction:column}
  .bp-stage>.stage-head{order:1}
  .bp-stage>.bp-graph{order:2}
  .bp-stage>.legend-row{order:3}
  .bp-stage>.bp-scope{order:4}
  .bp-stage>.metrics{order:4}
  .bp-stage>details.math{order:5}
  .bp-graph{padding:10px 10px 12px}
  .bp-read{min-height:7.3em}
  .bp-speed{flex:1 1 100%}
}
@media (max-width:420px){.bp-app .pb-dots{gap:3px}.bp-chks{grid-template-columns:minmax(0,1fr)}}

/* ---------- round 3 (review 2026-10-03): the formula of the current step, next to the graph ---------- */
/* forward and backward of the operation the player is on: each formula on one line, its numbers on the next. Every line has a fixed
   height and the script gives the box the height of the tallest step, so nothing around it moves while stepping (R7.8) */
.bp-fx{display:block;min-width:0;padding:8px 8px 10px;border:1px solid transparent;border-radius:8px;background:var(--surface-2);box-sizing:border-box}   /* a soft panel, no frame (精装修 step 2) */
.bp-fx[hidden]{display:none}
.bp-fxh{height:26px;font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-fxl{height:18px;font-size:var(--fs-mark);line-height:18px;color:var(--ink-3);border-top:1px solid var(--line)}
.bp-fxm,.bp-fxn,.bp-fxt{display:flex;align-items:center;min-width:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin}
.bp-fxm{height:36px}
.bp-fxm.bp-fxf{height:26px}
.bp-fxn{height:24px;padding-left:4px}
.bp-fxt{height:24px;font-size:var(--fs-label);color:var(--ink-2)}
.bp-fxm math{font-size:var(--fs-math);color:var(--ink)}
.bp-fxn math{font-size:var(--fs-label);color:var(--ink-2)}
.bp-top.bp-two{column-gap:8px}
/* review v6: formulas the page needs, each on its own line (R6.29) */
.bp-ml{margin:4px 0 8px;overflow-x:auto;overflow-y:hidden}
.bp-ml math{font-size:var(--fs-stage)}
.bp-mls{margin:2px 0 8px}
.bp-mls .bp-ml{margin:2px 0}
/* H1 (2026-10-09): the formulas of the boxes, typeset in HTML under the graph (an SVG text keeps only the box's name) */
.bp-ops{width:0;min-width:100%;box-sizing:border-box;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:var(--fs-label);line-height:1.5;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;color:var(--ink-2)}
.bp-ops-k{flex-basis:100%;font-size:var(--fs-label);color:var(--ink-3)}
.bp-op{white-space:nowrap}
.bp-mname{font-family:var(--font-ui);font-size:var(--fs-cap);margin-right:.3em}
/* Show the math as short blocks (H2, 2026-10-09): a hairline between blocks, the "=" of a chain in one column, numbers in tables */
.bp-mblk{padding:8px 0 6px;border-top:1px solid var(--line-2)}
.bp-mblk:first-child{border-top:0;padding-top:0}
.bp-mlead,.bp-msym,.bp-mblk>p{font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.55}
.bp-mfx{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .6em;overflow-x:auto;max-width:100%;margin:4px 0}
.bp-eq{display:grid;grid-template-columns:max-content max-content;column-gap:.3em;row-gap:.6em;align-items:center;overflow-x:auto;max-width:100%;margin:4px 0}
.bp-eq-l{justify-self:end}
.bp-mtab-w{overflow-x:auto;max-width:100%;padding-block:.3em}
.bp-mtab{border-collapse:collapse;font-size:var(--fs-label);margin:2px 0}
.bp-mtab th,.bp-mtab td{padding:3px 14px 3px 0;text-align:left;vertical-align:top;white-space:nowrap}
.bp-mtab th{font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--line)}
.bp-mtab td>div+div{margin-top:4px}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read): on a phone-wide stage the backward
   table's three columns do not fit, so each step becomes two lines: its number and operation, then what it adds into the inputs'
   gradients, under the operation */
@container (max-width:480px){
  .bp-mtab-b,.bp-mtab-b tbody{display:block}
  .bp-mtab-b tr{display:grid;grid-template-columns:3em minmax(0,1fr);row-gap:3px;padding:4px 0;border-bottom:1px solid var(--line-2)}
  .bp-mtab-b tr:first-child{border-bottom:1px solid var(--line)}
  .bp-mtab-b th,.bp-mtab-b td{padding:0;border:0}
  .bp-mtab-b>tbody>tr>:nth-child(3),.bp-mtab-b>tr>:nth-child(3){grid-column:2}
}

/* ---------- 知识梳理 (2026-10-12): formulas on their own line, and the lab's graph as a display ---------- */
.primer .bp-prfx{margin:2px 0 14px;padding:.3em 0;overflow-x:auto;overflow-y:hidden}
.primer .bp-prfx math{font-size:1.08em}
.pr-fr.pr-bp{padding:0;min-width:0}
/* on a wide page what each box computes stands beside the graph; on a phone it goes under it, as in the lab */
.primer .pr-bp .bp-gwrap{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 28px;align-items:center;overflow:visible}
.primer .pr-bp .bp-svg{width:380px;max-width:100%;margin:0}
.primer .pr-bp .bp-n{cursor:default}
.primer .pr-bp .bp-ops{width:auto;min-width:0;margin:0;padding:4px 0 4px 22px;border-top:0;border-left:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:8px;font-size:var(--fs-ui)}
.primer .pr-bp .bp-ops-k{flex-basis:auto;font-size:var(--fs-label)}
@media (max-width:760px){
  .primer .pr-bp .bp-gwrap{grid-template-columns:minmax(0,1fr)}
  .primer .pr-bp .bp-svg{margin:0 auto}
  .primer .pr-bp .bp-ops{border-left:0;border-top:1px solid var(--line);padding:8px 0 0;flex-direction:row;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-label)}
  .primer .pr-bp .bp-ops-k{flex-basis:100%}
}

/* polish round 5 (fit): on a wide stage (at least 736 px: the desktop at 1440 and 1280) parts 3–7 ran 153–223 px past the screen at
   1440 × 900: the graph 444 px with what each box computes under it 74, beside it the formula box 252 and the check 300 (the curve
   300 px wide with its numbers under it), then the player 108, the metric cards 96 and the spacing. There the graph's boxes are 46 px
   tall with less room above and below (geom reads --bp-bh, --bp-gt, --bp-gb; rows stay 16 px apart) and “What each box computes”
   starts the first line of its formulas; the check's curve is 190 × 92 px (drawCheck reads --bp-ckw, --bp-ckh), its numbers beside it
   (wide enough for “no gradient: the backward stopped” on one line) and the chips' caption on their row; in part 3 (no check) the
   player goes under the formula box (layout reads --bp-pside); under the graph the player's sentence keeps room for two lines, the most
   any step takes at this width; the metric cards are compact (CONTRACT §19) and the spacing tighter. Every part then fits 1440 × 900
   without scrolling inside, parts 4–7 with about 35 px to spare in Chinese and 13 in English, whose legend takes two lines
   (reviews/r5-fit-roots.md). Part 6 with PyTorch's error: the error box joins the formula box (shorter then) and the check beside the
   graph; with tighter gaps that column stays within the graph's height, so picking this case does not make the stage taller (R7.9; it
   grew 26 px before). Phones and narrower stages keep the layout above. */
@media (min-width:761px){@container (min-width:736px){
  .bp-graph{--bp-pside:1;margin-top:8px;padding:6px 12px 8px;gap:8px}
  .bp-graph>.bp-pwrap{padding-top:6px;gap:6px}
  .bp-stage .bp-svg{--bp-bh:46;--bp-gt:6;--bp-gb:4}
  .bp-stage .bp-ops{margin-top:2px;padding-top:6px}
  .bp-stage .bp-ops-k{flex-basis:auto}
  .bp-stage .bp-check{--bp-ckw:190;--bp-ckh:92;gap:6px}
  .bp-top.bp-two>.bp-side{gap:8px}
  .bp-top.bp-two>.bp-side:has(>.bp-err:not([hidden])){gap:4px}
  .bp-stage .bp-side>.bp-err{padding:5px 10px;line-height:1.35}
  .bp-stage .bp-chips>.bp-sub{flex:0 1 auto;margin-right:4px}
  .bp-graph>.bp-pwrap .bp-read{min-height:2.9em}
  .bp-stage>.legend-row{margin-top:6px}
  .bp-stage>.bp-scope{margin:4px 0 0}
  .bp-stage .bp-metrics{margin-top:4px}
  .bp-stage .bp-metrics .metric .v{line-height:1.25}
  .bp-stage .bp-metrics .metric .sub{line-height:1.25}
  .bp-stage .bp-metrics .metric .d{min-height:13px;line-height:1.1}
  .bp-stage>details.math{margin-top:4px;padding-top:6px}
}}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and parts 4–7 still ran 43 px past it at 1536 × 730; the graph's boxes are 42 px tall (their three lines move
   up with them, as at 46 px), the check's curve 80 px and its numbers' rows closer, and the gaps around them a few px tighter. Same
   pieces, lines and sizes of text */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .bp-stage .bp-svg{--bp-bh:42;--bp-gt:4;--bp-gb:2}
  .bp-stage .bp-check{--bp-ckh:80;gap:4px}
  .bp-stage .bp-cknum{gap:1px}
  .bp-top.bp-two>.bp-side{gap:4px}
  .bp-graph{gap:6px;padding-bottom:6px}
  .bp-graph>.bp-pwrap{padding-top:4px;gap:4px}
  .bp-stage>.legend-row{margin-top:4px}
  .bp-stage>.bp-scope{margin:2px 0 0}
  .bp-stage .bp-metrics{margin-top:2px}
  .bp-stage>details.math{margin-top:2px;padding-top:4px}
}}

/* checkpointing: the loss picture (reference, run, crash, resumed run, red where the resumed run is worse), the checkpoint's
   compartments above it, the files on disk, the wasted-share curves with a 12-hour strip, the player, and the challenge's goal rows.
   Colours (R5.6): grayscale, dashes and hatching; red only for the failure and its cost (R5.11); green and red for the goal rows. */
.ckp-app [hidden]{display:none!important}
.ckp-stage .stage-head{align-items:center}
.ckp-graph{padding:12px 14px 14px;min-width:0}
/* H5/H6 (the owner, 2026-10-09): in the interval picture the curve's legend sits right under the curve, and the sum of the three
   wasted terms is a block of its own under a hairline (before, the curve's legend came after the sum, and the two ran together) */
.ckp-graph:has(>.ckp-terms:not([hidden])){display:flex;flex-direction:column}
.ckp-graph>.ckp-box{order:0}.ckp-graph>.ckp-chart{order:1}.ckp-graph>.ckp-leg{order:2}.ckp-graph>.ckp-terms{order:3}.ckp-graph>.ckp-player{order:4}
.ckp-graph>.ckp-terms:not([hidden]){border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.ckp-chart{min-width:0;overflow:hidden}
.ckp-chart svg{display:block;max-width:100%;overflow:visible}

/* ---------- the checkpoint's compartments ---------- */
.ckp-box{margin:0 0 10px}
.ckp-boxt{font-size:var(--fs-cap);font-weight:650;color:var(--ink);margin-bottom:6px}
.ckp-cells{display:flex;flex-wrap:wrap;gap:6px}
.ckp-cell{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1.5px dashed var(--line);border-radius:4px;font-size:var(--fs-label);color:var(--ink-3);cursor:help;background:var(--surface)}
.ckp-cell i{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);width:1em;text-align:center}
.ckp-cell.on{border:1.5px solid var(--ink);color:var(--ink);background:var(--surface-2)}
.ckp-cell:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ---------- the loss picture ---------- */
.ckp-grid{stroke:var(--line-2);stroke-width:1}
.ckp-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.ckp-r{text-anchor:end}
.ckp-mid{text-anchor:middle}
.ckp-ref{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linejoin:round;opacity:.75}
.ckp-run{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.ckp-res{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:5 3;stroke-linejoin:round}
.ckp-worse{fill:var(--c-oom-soft);stroke:none}
.ckp-ck{fill:var(--surface);stroke:var(--ink);stroke-width:1.4}
.ckp-ck.on{fill:var(--ink)}
.ckp-crashl{stroke:var(--c-oom);stroke-width:1.2;stroke-dasharray:3 3}
.ckp-x{font-family:var(--font-ui);font-size:var(--fs-stage);font-weight:700;fill:var(--c-oom);text-anchor:middle}
.ckp-ax.ckp-bad{fill:var(--c-oom);font-weight:650}
.ckp-badzone{fill:var(--c-oom-soft)}
.ckp-ax.ckp-lref{fill:var(--ink-3)}
.ckp-ax.ckp-lrun,.ckp-ax.ckp-lres{fill:var(--ink);font-weight:650}
.ckp-ax{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}

/* ---------- the files on disk ---------- */
.ckp-fs{display:grid;gap:10px;padding:4px 0}
.ckp-frow{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:12px;align-items:center}
.ckp-ft{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.ckp-files{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.ckp-file{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border:1.5px solid var(--ink);border-radius:4px;background:var(--surface);cursor:help;min-width:0;max-width:100%}
.ckp-file b{font-size:var(--fs-label);overflow-wrap:anywhere}
.ckp-file span{font-size:var(--fs-label);color:var(--ink-2)}
.ckp-file.rec{border-style:dashed;border-color:var(--ink-2)}
.ckp-file.bad{border-color:var(--c-oom);background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 6px,var(--surface) 6px 10px)}
.ckp-file.bad span{color:var(--c-oom)}
.ckp-file:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ckp-verdict{padding:6px 10px;border-radius:4px;font-size:var(--fs-cap);font-weight:650;line-height:1.4}
.ckp-verdict.bad{color:var(--c-oom);background:var(--c-oom-soft);border-left:3px solid var(--c-oom)}
.ckp-verdict.ok{color:var(--c-ok);background:var(--c-ok-soft);border-left:3px solid var(--c-ok)}

/* ---------- the wasted-share picture ---------- */
.ckp-wc{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-linejoin:round}
.ckp-wc.ckp-wca{stroke-dasharray:5 3}
.ckp-wc.on{stroke:var(--ink);stroke-width:2.2}
.ckp-opt{fill:var(--ink-2)}
.ckp-now{fill:var(--surface);fill-opacity:.4;stroke:var(--ink);stroke-width:2.2}
/* the challenge's limits on the curve (R15): the pale range breaks the storage or rollback limit; the green dot is the least within them */
.ckp-nofit{fill:var(--sunken);fill-opacity:.78}
.ckp-best{fill:var(--c-ok);stroke:var(--surface);stroke-width:1.5}
.ckp-best-l{stroke:var(--c-ok);stroke-width:1.2;stroke-dasharray:3 3}
.ckp-ax.ckp-best-t{fill:var(--c-ok);font-weight:650}
.ckp-train{fill:var(--line)}
.ckp-save{fill:var(--ink)}
.ckp-save.ckp-savea{fill:var(--ink-3)}
.ckp-lost{fill:var(--c-oom-soft);stroke:var(--c-oom);stroke-width:1}
/* the restart has its own colour, grey hatching, so that it reads apart from the red lost work (owner b8) */
.ckp-rst{fill:url(#ckp-hatch);stroke:var(--ink-2);stroke-width:1}
.ckp-hbg{fill:var(--surface)}
.ckp-hl{stroke:var(--ink-2);stroke-width:1.5}
.ckp-fail{stroke:var(--c-oom);stroke-width:2}

/* legend beside the picture, under it (R5.9) */
.ckp-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.35;color:var(--ink-2)}
.ckp-leg>span{display:inline-flex;align-items:center;cursor:help}
.ckp-leg .sw{width:14px;height:10px;margin-right:5px;flex:none}
.sw.ckp-sw-ref{background:none;border:0;border-top:2px solid var(--ink-3);height:0;border-radius:0}
.sw.ckp-sw-run,.sw.ckp-sw-sync{background:none;border:0;border-top:2px solid var(--ink);height:0;border-radius:0}
.sw.ckp-sw-res,.sw.ckp-sw-async{background:none;border:0;border-top:2px dashed var(--ink);height:0;border-radius:0}
.sw.ckp-sw-worse{background:var(--c-oom-soft);border-color:var(--c-oom)}
.sw.ckp-sw-ck{width:8px;height:8px;border:1.4px solid var(--ink);border-radius:0;background:var(--surface)}
.sw.ckp-sw-now{width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:transparent}
.sw.ckp-sw-save{background:var(--ink);border-color:var(--ink)}
.sw.ckp-sw-lost{background:var(--c-oom-soft);border-color:var(--c-oom)}
.sw.ckp-sw-rst{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 4px);border-color:var(--ink-2)}
.sw.ckp-sw-savea{background:var(--ink-3);border-color:var(--ink-3);width:4px!important}
.sw.ckp-sw-fail{width:2px;height:12px;background:var(--c-oom);border-color:var(--c-oom);border-radius:0}
.sw.ckp-sw-train{background:var(--line);border-color:var(--line)}
.sw.ckp-sw-nofit{background:var(--sunken);border-color:var(--line)}
.sw.ckp-sw-best{width:9px;height:9px;border-radius:50%;background:var(--c-ok);border-color:var(--c-ok)}

/* ---------- the three terms of the wasted share, under the interval picture (owner b8, part 4) ---------- */
.ckp-terms{margin:8px 0 2px}
.ckp-terms-h{font-size:var(--fs-cap);font-weight:650;color:var(--ink);margin-bottom:5px}
.ckp-tbar{position:relative;display:flex;height:14px;border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden}
.ckp-tbar i{display:block;height:100%;flex:none}
.ckp-tbar .save{background:var(--ink)}
.ckp-tbar .lost{background:var(--c-oom-soft);box-shadow:inset 0 0 0 1px var(--c-oom)}
.ckp-tbar .rst{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 4px);box-shadow:inset 0 0 0 1px var(--ink-2)}
.ckp-tscale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);margin-top:2px}
.ckp-tlist{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.5}
.ckp-tlist>span{display:inline-flex;align-items:center;gap:5px;cursor:help;white-space:nowrap}
.ckp-tlist .sw{width:14px;height:10px;flex:none}
.ckp-tlist b{font-family:var(--font-mono);font-weight:650;color:var(--ink)}
.ckp-tlist .ckp-tsum{color:var(--ink)}
/* the formula's terms with their meaning, in the rail (one row each) */
.ckp-tt{width:100%;border-collapse:collapse;margin:6px 0 8px;font-size:var(--fs-cap);line-height:1.45}
.ckp-tt td{padding:5px 4px;vertical-align:middle;border-top:1px solid var(--line-2)}
.ckp-tt tr:first-child td{border-top:0}
.ckp-tt-k{white-space:nowrap;width:1%}
.ckp-tt-k .sw{display:inline-block;width:12px;height:10px;margin-right:6px;vertical-align:middle;border-width:1px;border-style:solid;border-radius:2px}
.ckp-tt b{display:block;font-weight:650;color:var(--ink)}
.ckp-tt-v{text-align:right;white-space:nowrap;width:1%;font-weight:650;color:var(--ink)}

/* ---------- the data each step reads, under the loss picture (owner b8, scenario 3) ---------- */
.ckp-ep0{fill:var(--line)}
.ckp-ep1{fill:var(--line-2)}
.ckp-epn{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2);text-anchor:middle}
.ckp-twice{fill:var(--c-oom-soft);stroke:var(--c-oom);stroke-width:1.2}
.ckp-never{fill:url(#ckp-nhatch);stroke:var(--c-oom);stroke-width:1;stroke-dasharray:3 2}
.ckp-nbg{fill:var(--surface)}
.ckp-nl{stroke:var(--c-oom);stroke-width:1.2}
.ckp-ax.ckp-dsl{fill:var(--c-oom);font-weight:650}
/* chart text at 11 px on a phone, where the charts are drawn at their real width (readable at 390, R7.8) */
@media (max-width:760px){.ckp-ax,.ckp-ds .ckp-epn{font-size:var(--fs-mark)}}

/* ---------- the player ---------- */
.ckp-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.ckp-player .ctl{display:flex;align-items:center;gap:6px;margin:0}
.ckp-player .ctl>.lbl,.ckp-player .ctl-label{font-size:var(--fs-label);margin:0}
.ckp-player .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
/* H7 (the owner, 2026-10-09, on GRPO's player: “重放按钮和速度按钮没有对齐”): Replay, the step buttons and the speed buttons share one
   height and one centre line */
.ckp-player .btn.sm,.ckp-player .seg-ctl{height:30px;box-sizing:border-box}
.ckp-player .btn.sm{padding-top:0;padding-bottom:0}
.ckp-player .seg-ctl button{padding-top:0;padding-bottom:0}
.ckp-player [data-act="play"]{min-width:96px;justify-content:center}
.ckp-scrub{flex:1 1 160px;min-width:0;width:100%}
.ckp-phase{flex-basis:100%;margin:0;font-size:var(--fs-label);color:var(--ink-2);min-height:1.4em;line-height:1.4}

/* ---------- metric cards ---------- */
.ckp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.ckp-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- rail ---------- */
.ckp-fx{margin:8px 0;overflow-x:auto;max-width:100%}
.ckp-parts{display:grid;gap:6px;margin:8px 0}
.ckp-part{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;text-align:left;padding:7px 9px;border:1.5px dashed var(--line);border-radius:6px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--fs-cap);line-height:1.4;cursor:pointer}
.ckp-part b{display:block;color:var(--ink);font-weight:650}
.ckp-part .small{display:block;color:var(--ink-3)}
.ckp-part.on,.ckp-part[aria-pressed="true"]{border:1.5px solid var(--ink);background:var(--surface-2)}
.ckp-part.fixed{cursor:default}
.ckp-part:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ckp-sw{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--ink-2);border-radius:3px;font-size:var(--fs-label);font-weight:700;color:var(--ink);background:var(--surface)}
.ckp-defs{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.ckp-defs li{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:8px;font-size:var(--fs-cap);line-height:1.45}
/* aligned lists (R2.11): one item per line, the names in one column, what each does in the next, at every width */
.ckp-defs.ckp-al{grid-template-columns:max-content minmax(0,1fr);gap:4px 10px;font-size:var(--fs-cap);line-height:1.45}
/* the lists of real systems pair a long name (PyTorch 分布式存档) with a long file name: in the narrow rail two columns broke both
   mid-word, so each name gets its own line and what it does sits under it, indented (R2.11, R7.8) */
.ckp-defs.ckp-al:not(.ckp-sym){grid-template-columns:minmax(0,1fr);gap:0}
.ckp-defs.ckp-al:not(.ckp-sym) span{padding:0 0 6px .9em}
.ckp-defs.ckp-al li{display:contents}
.ckp-defs.ckp-al b{font-weight:650;color:var(--ink)}
.ckp-defs.ckp-sym b{font-family:var(--font-mono);font-weight:600}
.ckp-remlist{margin:6px 0 10px;padding-left:18px;display:grid;gap:8px}
.ckp-rem{font-size:var(--fs-label);white-space:nowrap}
.ckp-mt{margin-top:10px}
.ckp-lv{margin:8px 0}
.ckp-prod{margin:0;padding-left:18px;display:grid;gap:8px;font-size:var(--fs-cap)}
.ckp-prod code{word-break:break-all}
.ckp-tg{margin:0 6px 6px 0}
/* the Settings toggles (owner b8: hovering a pressed one emptied it). The kit's .btn.ghost:hover sets a light background and is more
   specific than a plain .ckp-tg rule, so the white label vanished on white. These rules out-rank it: a pressed toggle stays dark with a
   light label on hover, focus and press, in both themes; hover darkens it a little instead. */
.btn.ghost.ckp-tg[aria-pressed="true"],.btn.ghost.ckp-tg[aria-pressed="true"]:active,.btn.ghost.ckp-tg[aria-pressed="true"]:focus{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn.ghost.ckp-tg[aria-pressed="true"]:hover{background:var(--ink-2);color:var(--surface);border-color:var(--ink-2)}
.btn.ghost.ckp-tg[aria-pressed="false"]:hover,.btn.ghost.ckp-tg[aria-pressed="false"]:active{background:var(--surface-2);color:var(--ink);border-color:var(--ink)}
.btn.ghost.ckp-tg:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ckp-goal.ckp-miss{border-color:var(--c-oom);background:var(--c-oom-soft)}
.ckp-goal.met{border-color:var(--c-ok);background:var(--c-ok-soft)}
.ckp-ch-res .cmp{margin-top:10px}
/* the challenge's result (R1, as the train-capstone lab): your plan next to the best, shared settings once, the differing ones marked */
.ckp-sum{margin-top:10px;display:grid;gap:8px}
.ckp-sum-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink)}
.ckp-sum-same{margin:0;font-size:var(--fs-label);color:var(--ink-2)}
.ckp-plans{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ckp-plan{border:1px solid var(--line);border-radius:5px;padding:7px 9px;background:var(--surface);display:grid;gap:4px}
.ckp-plan.best{border-color:var(--c-ok)}
.ckp-plan.bad{border-color:var(--c-oom)}
.ckp-plan-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.ckp-plan-t{font-size:var(--fs-cap);font-weight:650;color:var(--ink);margin-right:2px}
.ckp-chip{display:inline-block;padding:1px 7px;border:1px solid var(--line);border-radius:10px;font-size:var(--fs-label);color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
.ckp-chip.on{border-color:var(--ink);color:var(--ink);font-weight:650;background:var(--surface)}
.ckp-plan-m{display:flex;flex-wrap:wrap;gap:2px 12px;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.ckp-plan-m span{white-space:nowrap}
.ckp-plan-m .bad{color:var(--c-oom);font-weight:650}
.ckp-gap,.ckp-next,.ckp-why{margin:0;font-size:var(--fs-cap);line-height:1.5}
details.ckp-all{border-top:1px solid var(--line-2);padding-top:6px}
details.ckp-all summary{cursor:pointer;font-size:var(--fs-cap);font-weight:650;color:var(--ink)}
.ckp-allb{display:grid;gap:6px;margin-top:6px}
.ckp-allb ol{margin:0;padding-left:20px;display:grid;gap:3px;font-size:var(--fs-label)}
.ckp-allb li.me{font-weight:650;color:var(--ink)}

@media (max-width:760px){
  .ckp-frow{grid-template-columns:minmax(0,1fr);gap:6px}
  .ckp-defs li{grid-template-columns:minmax(0,1fr);gap:0}
}

/* long file and option names in the rail wrap instead of widening the rail */
#ckp-rail code{overflow-wrap:anywhere;word-break:break-word;white-space:normal}

/* the compartments say “not saved” in words, not only with ∅ (owner b8, scenario 3) */
.ckp-cell .ckp-no{font-style:normal;color:var(--ink-2);font-weight:650}
.ckp-tlist .ckp-op{font-style:normal;color:var(--ink-3);font-family:var(--font-mono)}

/* Chunking & rerank lab */
.ckr-app [hidden]{display:none!important}
.ckr-stage{container-type:inline-size}
.ckr-head{align-items:flex-start;gap:10px}
.ckr-st-title{font-weight:650;font-size:var(--fs-stage);min-width:0;line-height:1.35}
.ckr-qrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 8px}
.ckr-ql{font-size:var(--fs-label);color:var(--ink-2)}
.ckr-qsel{flex:1 1 220px;min-width:0;max-width:100%;font:inherit;font-size:var(--fs-cap);padding:5px 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink)}
.ckr-qsel:disabled{opacity:.75}
.ckr-pan{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;min-width:0}
.ckr-pt{font-weight:600;font-size:var(--fs-cap);line-height:1.35;margin-bottom:4px;min-width:0}
.ckr-transport{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 0 6px}
.ckr-transport .seg-ctl,.ckr-transport .inline-ctl,.ckr-transport .ctl{margin:0}
.ckr-transport .btn.sm,.ckr-transport .seg-ctl{height:32px;box-sizing:border-box}
.ckr-transport .btn.sm{padding-top:0;padding-bottom:0;line-height:1.2}
.ckr-transport .seg-ctl button{padding:0 10px;font-size:var(--fs-cap);line-height:1.2}
.ckr-transport .inline-ctl{flex:1 1 160px;min-width:140px;border:0;padding:0;background:none}
.ckr-strip{display:block;width:100%;height:auto}
.ckr-scap{font-size:var(--fs-label);color:var(--ink-2);margin:2px 0}
.ckr-docbar{fill:var(--sunken);stroke:var(--line-2);stroke-width:1}
.ckr-ovl{fill:var(--ink-3);opacity:.55}
.ckr-sec{stroke:var(--ink);stroke-width:1.4}
.ckr-ans{fill:var(--ink);fill-opacity:.04;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 2}
.ckr-ans.ok{fill:var(--c-ok);fill-opacity:.22;stroke:none}
.ckr-ans.bad{fill:var(--c-oom);fill-opacity:.25;stroke:none}
.ckr-ch{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1}
.ckr-ch.ok{stroke:var(--c-ok);stroke-width:2.2}
.ckr-ch.bad{stroke:var(--c-oom);stroke-width:2.2}
.ckr-chn{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2);paint-order:stroke;stroke:var(--surface-2);stroke-width:3px;stroke-linejoin:round}
.ckr-chn.out{stroke:var(--surface)}
.ckr-cut{stroke:var(--c-oom);stroke-width:2;stroke-dasharray:3 2}
.ckr-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.ckr-leg{margin:2px 0 6px;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-label)}
.ckr-leg .lg{display:inline-flex;align-items:center;gap:5px}
.sw.ckr-sw-ch{background:var(--surface-2);border:1px solid var(--ink-3);border-radius:3px;width:14px;height:9px}
.sw.ckr-sw-ov{background:var(--ink-3);opacity:.7;width:12px;height:9px}
.sw.ckr-sw-sec{background:var(--ink);width:2px;height:12px}
.sw.ckr-sw-ok{background:var(--c-ok);opacity:.5;width:10px;height:10px}
.sw.ckr-sw-bad{background:var(--c-oom);opacity:.55;width:10px;height:10px}
.sw.ckr-sw-ans{background:transparent;border:1px dashed var(--ink-2);width:12px;height:9px}
.sw.ckr-sw-okb{background:transparent;border:2px solid var(--c-ok);width:10px;height:10px;border-radius:3px}
.sw.ckr-sw-badb{background:transparent;border:2px solid var(--c-oom);width:10px;height:10px;border-radius:3px}
.sw.ckr-sw-k{background:transparent;border-top:1.5px dashed var(--ink-2);height:0;width:14px;align-self:center}
.sw.ckr-sw-also{background:transparent;border:2px solid var(--ink-3);width:10px;height:10px;border-radius:3px}
.sw.ckr-sw-half{background:transparent;border:2px dashed var(--ink-2);width:10px;height:10px;border-radius:3px}
.sw.ckr-sw-cand{background:var(--ink-2);width:3px;height:12px}
.sw.ckr-sw-same{background:var(--sunken);border:1px solid var(--line-2);width:12px;height:10px}
.ckr-text{font-size:var(--fs-cap);line-height:1.5;min-width:0}
.ckr-tx{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;border:1px solid transparent;border-radius:8px;padding:4px 8px;margin:4px 0;background:var(--surface-2)}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.ckr-tx.ok{border-color:var(--c-ok)}
.ckr-tx.bad{border-color:var(--c-oom)}
.ckr-tx p{margin:0;flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.ckr-lab{display:inline;font-size:var(--fs-label);font-weight:600;color:var(--ink-2)}
mark.ckr-m{color:inherit;border-radius:2px;padding:0 1px}
mark.ckr-m.ok{background:color-mix(in srgb,var(--c-ok) 22%,transparent)}
mark.ckr-m.bad{background:color-mix(in srgb,var(--c-oom) 22%,transparent)}
.ckr-bad{color:var(--c-oom);margin:4px 0 0}
.ckr-cols{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:8px 12px;transition:opacity .2s}
.ckr-cols.dim{opacity:.35}
@container (max-width:460px){.ckr-cols{grid-template-columns:minmax(0,1fr)}}
.ckr-cols[data-n="3"] .ckr-sn{display:none}
.ckr-cols[data-n="3"] .ckr-li{grid-template-columns:14px minmax(0,1fr);}
.ckr-col{min-width:0}
.ckr-ch-t{font-size:var(--fs-cap);font-weight:650;margin-bottom:2px}
.ckr-ol{list-style:none;margin:0;padding:0}
.ckr-li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:6px;align-items:start;padding:4px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-label);border-radius:4px;cursor:pointer}
.ckr-li.ok{outline:2px solid var(--c-ok);outline-offset:-2px}
.ckr-li.bad{outline:2px solid var(--c-oom);outline-offset:-2px}
.ckr-li.also{outline:2px solid var(--ink-3);outline-offset:-2px}
.ckr-li.half{outline:2px dashed var(--ink-2);outline-offset:-2px}
.ckr-li.cutk{margin-bottom:7px}
.ckr-li.cutk::after{content:'';position:absolute;left:0;right:0;bottom:-5px;border-top:1.5px dashed var(--ink-2)}
.ckr-li.cand{box-shadow:inset 3px 0 0 var(--line-2)}
.rr-run .ckr-li.cand{box-shadow:inset 3px 0 0 var(--ink-2)}
.ckr-li.same{background:var(--sunken)}
.rr-run .ckr-col[data-c$="1"] .ckr-li{background:var(--surface);z-index:2;box-shadow:0 0 0 1px var(--line-2)}
.ckr-rk{color:var(--ink-3);font-size:var(--fs-label)}
.ckr-nm{min-width:0}
.ckr-nm b{font-weight:600}
.ckr-sn{display:block;font-size:var(--fs-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ckr-sc{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;text-align:right}
.ckr-tp{font-weight:400;color:var(--ink-2)}
.ckr-src{display:block;font-size:var(--fs-label);color:var(--ink-2)}
.ckr-tie{display:block;font-size:var(--fs-mark);color:var(--ink-3);font-family:var(--font-ui)}
.ckr-tie-lg{display:inline-block;margin-right:4px;border:1px solid var(--line-2);border-radius:3px;padding:0 3px}
.ckr-cov{display:block;font-size:var(--fs-label);font-weight:600;color:var(--ink);transition:opacity .15s}
.ckr-beyond{margin:4px 0 0}
.ckr-wait{border:1.5px dashed var(--line-2);border-radius:6px;padding:10px;font-size:var(--fs-label);line-height:1.5;color:var(--ink-2);min-height:96px;margin-top:2px}
.ckr-lhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;margin-bottom:4px}
.ckr-lhead .ckr-pt{flex:1 1 240px;margin-bottom:0}
.ckr-ltools:empty{display:none}
.ckr-sum{margin-top:8px}
.ckr-tbl{border-collapse:collapse;font-size:var(--fs-label);margin:2px 0 4px}
.ckr-tbl caption{text-align:left;font-weight:600;padding-bottom:4px}
.ckr-tbl th,.ckr-tbl td{padding:3px 14px 3px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.ckr-tbl thead th{font-weight:600;color:var(--ink-2)}
.ckr-tbl td{font-family:var(--font-mono);text-align:right}
.ckr-sumnote{margin:4px 0 0}
.ckr-metrics.ckr-pend .v,.ckr-metrics.ckr-pend .d{opacity:.4}
.obs.ckr-pend>*:not(.eyebrow){opacity:.45}
.status.ckr-pend{opacity:.75}
.ckr-chart{display:block;width:100%;height:auto;max-width:560px;overflow:visible}
.ckr-grid{stroke:var(--line-2);stroke-width:1}
.ckr-ln-kw{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-dasharray:5 3}
.ckr-ln-vec{fill:none;stroke:var(--ink-3);stroke-width:1.6}
.ckr-ln-hyb{fill:none;stroke:var(--ink);stroke-width:2.4}
.ckr-dot.ckr-ln-kw{fill:var(--ink-2);stroke:none}.ckr-dot.ckr-ln-vec{fill:var(--ink-3);stroke:none}.ckr-dot.ckr-ln-hyb{fill:var(--ink);stroke:none}
.ckr-lgs{width:26px;height:12px;flex:none;overflow:visible}
.ckr-me{fill:none;stroke:var(--ink);stroke-width:2.2}
.ckr-ctx{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.ckr-cl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.sw.ckr-sw-me{background:transparent;border:2px solid var(--ink);border-radius:50%;width:10px;height:10px}
.ckr-init{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.sw.ckr-sw-init{background:var(--surface);border:1.6px solid var(--ink);width:8px;height:8px;transform:rotate(45deg);margin:0 2px}
.ckr-sep{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 3}
.sw.ckr-sw-sep{background:var(--ink-3);border-radius:50%;width:8px;height:8px}
.ckr-why ul{margin:4px 0 0;padding-left:18px}
.ckr-metrics{margin-top:10px}
.ckr-mb{padding:6px 0;border-bottom:1px solid var(--line);container-type:inline-size}
.ckr-mb:last-child{border-bottom:0}
.ckr-mb-lead{margin:0 0 4px;font-size:var(--fs-cap)}
.ckr-math-line{overflow-x:auto;padding-block:.3em;max-width:100%}
.ckr-prod li{margin:4px 0}
.ckr-dk{height:6px;background:var(--sunken);border-radius:3px;overflow:hidden;min-width:60px}
.ckr-dk i{display:block;height:100%;background:var(--ink-2)}
.goal.over b{color:var(--c-oom)}
.ckr-keep{text-transform:none}
.ckr-cols[data-n="3"] .ckr-sc{grid-column:2;text-align:left}
.ckr-cols[data-n="3"] .ckr-tie{display:inline;margin-left:6px}
/* three metric cards a row on a narrow stage: the fourth (answers cut, “20 个里 6 个”) takes two columns so its value stays on one line */
@container (max-width:559.98px){.ckr-metrics .metric[data-k="spl"]{grid-column:span 2}}

/* a number and its unit stay on one line in the metric cards’ sub lines (N13 of the polish check) */
.ckr-metrics .ckr-nw{white-space:nowrap}

/* phones: the line under a panel that leads back to the conclusion once a playback ends (R3.2; P35 of the polish review) */
.ckr-back{display:block;margin:10px 0 0;font-weight:600;text-align:left}
.ckr-back[hidden]{display:none}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4: “动画播放面板被整体顶得靠下了”) ----------
   At 1440 × 900 the stage had to scroll inside itself on entering part 1 (31 px), part 4 (59 px; English 109 px) and part 6
   (67 px; English 83 px). On a stage at least 736 px wide:
   - “Speed” and “Progress” sit beside their controls, so the cut's player takes one line instead of two (parts 1, 2); the
     percentage keeps the width of “100%”, so the slider does not move while the cut plays; the speed buttons now stand in Cut's
     and Replay's row; their monospace text sat 1 px lower than the buttons' sans text (its box is 3 px taller), so it is raised
     1.25 px (padding below it, the buttons keep their size) and the three keep one baseline;
   - with one search on the stage (parts 1 and 6), a row's short preview of the chunk (or, for hybrid search, where the chunk came
     from) follows the chunk's name on the row's line instead of taking a line of its own, and a “tie” mark follows its score; a
     preview that does not fit moves under the name as before, and none is cut shorter than before;
   - with three searches (part 4) the rows' lines are a little tighter, and the table of the 20 answers and the sentence about it
     sit side by side, the table's lines 1.25 high instead of the page's 1.55;
   - part 6's chart keeps its size and its legend stands in a column beside it, in the room that was empty;
   - the panels sit 2 px closer and the metric cards take CONTRACT §19's compact line heights (value 1.25, change line 13 px).
   Same pieces, same order, same hairlines; phones and narrower stages are unchanged. */
@media (min-width:761px){@container (min-width:736px){
  .ckr-pan{margin-top:6px;padding-top:6px}
  .ckr-qrow{margin:6px 0 6px}
  .ckr-transport{margin:2px 0 4px}
  .ckr-transport #ckr-speed{grid-template-columns:auto auto;align-items:center;column-gap:8px}
  .ckr-transport #ckr-tr-p{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px}
  .ckr-transport #ckr-tr-p output{display:inline-block;min-width:4ch;text-align:right}
  .ckr-cols[data-n="1"] .ckr-sn,.ckr-cols[data-n="1"] .ckr-src{display:inline-block;max-width:100%;margin-left:10px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ckr-cols[data-n="1"] .ckr-tie{display:inline;margin-left:6px}
  .ckr-cols[data-n="3"] .ckr-li{line-height:1.35;padding:3px 4px}
  .ckr-leg{margin:2px 0 4px}
  #ckr-pan-chart{display:grid;grid-template-columns:minmax(0,560px) minmax(140px,1fr);column-gap:16px;align-items:start}
  #ckr-pan-chart>.ckr-pt{grid-column:1/-1}
  #ckr-pan-chart>.ckr-leg{flex-direction:column;align-items:flex-start;margin:8px 0 0;gap:6px}
  .ckr-sum{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start;margin-top:6px}
  .ckr-sum .ckr-sumnote{margin:2px 0 0}
  .ckr-sum .ckr-tbl th,.ckr-sum .ckr-tbl td{line-height:1.25}
  .ckr-metrics{margin-top:8px}
  .ckr-metrics .metric .v{line-height:1.25}
  .ckr-metrics .metric .d{min-height:13px;line-height:13px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 4 and 6 still ran 16 px past the stage (English 32–47).
   The question row and the summary sit 2 px closer, the three lists' items have 2 px of padding instead of 3, and the chart is at most
   520 px wide instead of 560 (it is drawn for at most 440 px and scaled up, so its labels are 13 px instead of 14). In English, whose
   items and notes take more lines, the items' lines are 1.25 apart with 1 px of padding, the chart is at most 480 px wide (labels
   12 px) and the panels and the metric cards sit 2 px closer (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .ckr-qrow{margin:4px 0 4px}
  .ckr-cols[data-n="3"] .ckr-li{padding:2px 4px}
  .ckr-sum{margin-top:4px}
  #ckr-pan-chart{grid-template-columns:minmax(0,520px) minmax(140px,1fr)}
  .ckr-chart{max-width:520px}
  html[lang="en"] .ckr-cols[data-n="3"] .ckr-li{line-height:1.25;padding:1px 4px}
  html[lang="en"] #ckr-pan-chart{grid-template-columns:minmax(0,480px) minmax(140px,1fr)}
  html[lang="en"] .ckr-chart{max-width:480px}
  html[lang="en"] .ckr-pan{margin-top:4px;padding-top:4px}
  html[lang="en"] .ckr-metrics{margin-top:6px}
}}

/* chunked-prefill: the users' and the prompt's timeline (the prefill-decode lab's picture, two rows on one time axis), the two limits of a
   step, the replay controls, and the free-chunk deep dive.
   Colours: tokens only (R5.6). Weights blue, KV cache amber (the memory bars); ticks, chunks, arithmetic, the replay and the deep dive in
   grayscale; green and red only for the challenge's goal. */
.ck-stage .stage-head{align-items:center}
.ck-graph{padding:12px 14px 14px;display:grid;gap:10px}
.ck-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
/* the part's focus lights up on the chart (R3.14) */
.ck-graph[data-focus="tl"] .ck-tl,.ck-graph[data-focus="lim"] .ck-lim,.ck-graph[data-focus="free"] .ck-ph[data-ph="s"]{outline:2px dashed var(--focus-frame);outline-offset:3px;border-radius:4px}

/* ---------- the timeline: the users' row, then the prompt's row ---------- */
.ck-tl{display:grid;gap:2px;min-width:0}
.ck-lh{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:0 10px;font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.35;color:var(--ink-3);margin-top:4px}
.ck-lh b{color:var(--ink);font-weight:600}
.ck-brk{position:relative;height:19px}
.ck-lg,.ck-wt{position:absolute;bottom:1px;height:7px;border:1.5px solid var(--ink);border-bottom:0;border-radius:2px 2px 0 0;min-width:3px}
.ck-lg em,.ck-wt em{position:absolute;bottom:8px;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.1;white-space:nowrap;color:var(--ink);font-weight:600}
.ck-lg.ck-bad{border-color:var(--c-oom)}.ck-lg.ck-bad em{color:var(--c-oom)}
.ck-lg.ck-good{border-color:var(--c-ok)}.ck-lg.ck-good em{color:var(--c-ok)}
.ck-wt{border-color:var(--ink-2)}.ck-wt em{color:var(--ink-2)}
.ck-track{position:relative;height:30px;border-bottom:1px solid var(--line);cursor:help;outline-offset:3px}
.ck-tp{height:24px}
.ck-mk{position:absolute;inset:0}
.ck-tick{position:absolute;top:3px;bottom:3px;width:0;border-left:1.5px solid var(--ink);margin-left:-.75px}
.ck-ptick{position:absolute;top:7px;bottom:7px;width:0;border-left:1.5px solid var(--ink);margin-left:-.75px}
.ck-seg{position:absolute;top:4px;bottom:4px;background:var(--ink-3);min-width:1px}
.ck-seg.odd{background:var(--ink-2)}
.ck-seg[data-tipx]{cursor:help}
.ck-first{position:absolute;top:-5px;bottom:-5px;width:0;border-left:3px solid var(--ink);margin-left:-1.5px}
.ck-pin{position:absolute;top:4px;bottom:4px;display:flex;align-items:center;padding-left:6px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--bg);white-space:nowrap;overflow:hidden;pointer-events:none}
.ck-wfill,.ck-lfill{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--ink) 10%,transparent);pointer-events:none}
.ck-limleg{margin-top:0}
.ck-head{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid var(--ink-2);margin-left:-1px;z-index:2;pointer-events:none}
.ck-tu .ck-head::before{content:'';position:absolute;top:-6px;left:-6px;border:5px solid transparent;border-top:7px solid var(--ink-2)}
.ck-arr{position:relative;height:15px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);margin-top:2px}
.ck-arr span{position:absolute;top:0;white-space:nowrap;line-height:15px}
.ck-arr-a{transform:translateX(-4px)}
.ck-arr-f{transform:translateX(calc(-100% + 4px));font-weight:600;color:var(--ink)}
.ck-axis{position:relative;height:15px;font-size:var(--fs-mark);color:var(--ink-3);margin-top:1px}
.ck-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}

/* ---------- replay ---------- */
.ck-play{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.ck-play input[type=range]{flex:1 1 120px;min-width:90px}
.ck-speed{display:flex;align-items:center;gap:6px;cursor:help}
.ck-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-3)}
.ck-speed .seg-ctl button{padding:4px 8px;font-size:var(--fs-label)}
.ck-pbtn{min-width:98px}
.ck-clock{margin:-2px 0 0;font-size:var(--fs-label);color:var(--ink-2);line-height:1.4;min-height:1.4em}
.ck-prow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- the two limits of a step ---------- */
.ck-lim{display:grid;gap:10px;min-width:0}
.ck-ph{border:1px solid transparent;border-radius:8px;padding:8px 10px 10px;background:var(--surface-2);min-width:0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.ck-ph-h{display:flex;align-items:baseline;gap:2px 10px;flex-wrap:wrap;font-size:var(--fs-cap);margin-bottom:6px}
.ck-ph-h b{font-weight:700}
.ck-ph-d{color:var(--ink-3);font-size:var(--fs-label);flex:1 1 auto;min-width:0}
.ck-ph-t{font-size:var(--fs-cap);font-weight:650;color:var(--ink);white-space:nowrap}
.ck-rows{display:grid;gap:6px;position:relative}
.ck-row{display:grid;grid-template-columns:78px minmax(0,1fr) 72px;align-items:center;gap:8px;cursor:help;border-radius:3px;outline-offset:2px}
html[lang^="zh"] .ck-row{grid-template-columns:64px minmax(0,1fr) 72px}
.ck-rl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.ck-row.ck-set .ck-rl{color:var(--ink);font-weight:650}
.ck-bar{position:relative;height:20px;background:var(--surface);border-radius:2px}   /* inside a soft panel (var(--surface-2)), so a track or a highlight is var(--surface) (精装修 step 2) */
.ck-bar i{position:absolute;top:0;bottom:0;left:0;min-width:2px;transition:width .25s ease-out,left .25s ease-out}
.ck-bu{background:var(--ink-2);border-radius:2px 0 0 2px}
.ck-bch{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--ink-3) 2px 5px)}
.ck-bw{background:var(--c-weights);border-radius:2px 0 0 2px}
.ck-bk{background:var(--c-kv)}
.ck-row.ck-fade .ck-bar i{opacity:.28}
.ck-row.ck-fade .ck-rv{color:var(--ink-3)}
.ck-rv{font-size:var(--fs-label);color:var(--ink);white-space:nowrap;text-align:right}
.ck-settag{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.5;padding:0 6px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--ink);white-space:nowrap}
.ck-goal{position:absolute;top:-5px;bottom:-5px;width:0;border-left:1.5px dashed var(--ink);z-index:1}

/* ---------- deep dive: the free chunk ---------- */
.ck-deep{display:grid;gap:6px;min-width:0}
.ck-dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 12px;flex-wrap:wrap}
.ck-dhead .ck-cap{flex:1 1 260px;min-width:0}
.ck-fsvg{width:100%;height:auto;display:block;overflow:visible}
.ck-fg{stroke:var(--line-2);stroke-width:1}
.ck-ft{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.ck-fax{fill:var(--ink-2)}
.ck-flab{fill:var(--ink-2);font-style:italic}
.ck-fzone{fill:color-mix(in srgb,var(--ink) 7%,transparent)}
.ck-fmem{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.ck-farf{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:3 3}
.ck-ffirst{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.ck-flast{fill:none;stroke:var(--ink-2);stroke-width:2.6;stroke-dasharray:7 4;stroke-linejoin:round}
.ck-fpt{cursor:help}
.ck-fpt circle,.ck-fpt rect{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.ck-fpt.on circle,.ck-fpt.on rect{stroke:var(--ink);stroke-width:1;fill:var(--surface)}
.ck-fleg i{display:inline-block;flex:none;margin-right:5px}
.ck-sw-ff{width:16px;height:0;border-top:2.6px solid var(--ink)}
.ck-sw-fl{width:16px;height:0;border-top:2.6px dashed var(--ink-2)}
.ck-sw-fa{width:16px;height:0;border-top:1.5px dashed var(--ink-2)}
.ck-sw-fm{width:16px;height:0;border-top:1.2px solid var(--ink-3)}
.ck-sw-fz{width:12px;height:10px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.ck-deepbtn{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px}
.ck-deepbtn .lbl{flex-basis:100%;font-size:var(--fs-label);font-weight:600;color:var(--ink-3)}
.ck-deepbtn .btn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ck-seen{color:var(--c-ok)}

/* ---------- legend swatches ---------- */
.sw.ck-sw-tick{width:0;height:11px;border:0;border-left:1.5px solid var(--ink);border-radius:0;margin:0 7px 0 3px}
.sw.ck-sw-brk{width:14px;height:6px;border:1.5px solid var(--ink);border-bottom:0;border-radius:2px 2px 0 0;background:transparent;vertical-align:1px}
.sw.ck-sw-seg{width:16px;height:9px;border:0;background:linear-gradient(90deg,var(--ink-3) 0 50%,var(--ink-2) 50% 100%)}
.sw.ck-sw-first{width:0;height:13px;border:0;border-left:3px solid var(--ink);border-radius:0;margin:0 7px 0 3px;vertical-align:-2px}
.sw.ck-sw-head{width:0;height:13px;border:0;border-left:2px solid var(--ink-2);border-radius:0;margin:0 8px 0 5px;position:relative;vertical-align:-2px}
.sw.ck-sw-head::before{content:'';position:absolute;top:-3px;left:-5px;border:4px solid transparent;border-top:5px solid var(--ink-2)}
.sw.ck-sw-ar{background:var(--ink-2);border-color:transparent}
.sw.ck-sw-arc{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--ink-3) 2px 5px);border-color:transparent}
.sw.ck-sw-fade{background:var(--ink-2);opacity:.3;border-color:transparent}
#ck-legend>span{cursor:help}

/* ---------- metric cards: four in a row on wide stages, two by two on narrow ones ---------- */
.ck-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.ck-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the numbers' scope, right above the metric cards (an estimate for one GPU, no queue or network) */
.ck-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.ck-ch-res{scroll-margin-top:120px}
.goal.ck-over b{color:var(--c-oom)}
.progress.ck-over i{background:var(--c-oom)}
.goal.ck-ch-ttft{margin:-4px 0 12px}
/* the value never breaks inside (“1,511 ms”); the label wraps instead */
#ck-ch-goal>span:last-child,.goal.ck-ch-ttft>span:last-child{white-space:nowrap;flex:none}
.ck-ic-play .ck-prow .seg-ctl button{padding:4px 7px}

/* ---------- settings ---------- */
.ck-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.ck-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.ck-grp .ctl>.lbl{display:block}
.ck-app .ctl-note.warn{color:var(--ink);font-weight:600}
.ck-app .seg-ctl button{padding-inline:4px}

/* ---------- connect ---------- */
.ck-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.ck-prod li{margin-bottom:6px}
.ck-prod code,.refs code{word-break:break-word}

/* ---------- mini result bar ---------- */
.ck-dk{position:relative;height:14px;width:100%;min-width:48px;border-bottom:1px solid var(--line)}
.ck-dk i{position:absolute}
.ck-dk-seg{top:8px;bottom:1px;background:var(--ink-3)}
.ck-dk-seg.odd{background:var(--ink-2)}
.ck-dk-tick{top:1px;height:6px;width:0;border-left:1px solid var(--ink)}
.ck-dk-first{top:0;bottom:-1px;width:0;border-left:2px solid var(--ink);margin-left:-1px}

.ck-app .ctl output{white-space:nowrap}
@media (max-width:760px){
  /* phones: the picture first, its legend right under it, then the numbers (R7.3) */
  .ck-stage{display:flex;flex-direction:column}
  .ck-stage>.stage-head{order:1}
  .ck-stage>.ck-graph{order:2}
  .ck-stage>.legend-row{order:3}
  .ck-stage>.ck-scope{order:4}
  .ck-stage>.metrics{order:5}
  .ck-stage>details.math{order:6}
  .ck-graph{padding:10px 10px 12px}
  /* the first screen shows the users' row: the stage head already says what the chart is, and the usual step's time is in its tooltip */
  .ck-tl>.ck-cap,#ck-lh-u2{display:none}
  .ck-row{grid-template-columns:70px minmax(0,1fr) 64px;gap:6px}
  html[lang^="zh"] .ck-row{grid-template-columns:58px minmax(0,1fr) 64px}
  .ck-speed-l{display:none}
}
@media (prefers-reduced-motion:reduce){.ck-bar i{transition:none}}
/* ticks too close to draw one by one (a long run on a narrow chart): thinner and lighter, so they read as a band */
.ck-tick.d,.ck-ptick.d{border-left-width:1px;border-left-color:var(--ink-3);margin-left:-.5px}
/* the challenge chart: a bar past the scale runs to its edge and carries its value inside */
.ck-ch-res .cmp-row.ck-off .cmp-val{left:auto!important;right:3px;margin-left:0}
.ck-ch-res .cmp-val{white-space:nowrap}
.ck-cmpnote{margin:6px 0 0}
/* desktop: a card in the rail that grows (a verdict in "Can you use it on a new case?", a result) must not make the browser's scroll
   anchoring move the page by the new height (the kit pauses anchoring for taps on phones only); the lab reveals results itself */
#ck-rail{overflow-anchor:none}

/* what one step holds, above the timeline, and the dashed box across both rows (Batch 3 review: one pass, not taking turns) */
.ck-anat{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin:6px 0 2px;font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}
.ck-an-h{font-weight:650;color:var(--ink);padding:1px 6px;border:1.5px dashed var(--ink-2);border-radius:4px;white-space:nowrap}
.ck-an-it{display:inline-flex;align-items:center;gap:5px;cursor:help;white-space:nowrap}
.ck-an-it em{font-style:normal}
.ck-an-sq{display:inline-grid;grid-template-columns:repeat(8,4px);grid-auto-rows:4px;gap:1px}
.ck-an-sq i{background:var(--ink);border-radius:1px}
.ck-an-ch{display:inline-block;width:40px;height:9px;border-radius:1px;background:var(--ink-3)}
.ck-an-op{font-weight:700;color:var(--ink-3)}
.ck-an-pass em{font-weight:600;color:var(--ink)}
.ck-tl{position:relative}
.ck-band{position:absolute;border:1.5px dashed var(--ink-2);border-radius:3px;background:color-mix(in srgb,var(--ink) 4%,transparent);pointer-events:none;z-index:1}
.sw.ck-sw-band{width:13px;height:10px;border:1.5px dashed var(--ink-2);border-radius:2px;background:transparent}
@media (max-width:760px){
  .ck-anat{font-size:var(--fs-mark);gap:2px 5px;margin:3px 0 0}
  .ck-an-h{padding:0 4px}
  .ck-an-sq{grid-template-columns:repeat(8,3px);grid-auto-rows:3px}
  .ck-an-ch{width:24px;height:7px}
}

/* chunks too small (product owner, 29 Sep): the run goes past the right edge. The prompt's bars fade out there, and the first-token
   label sits at the edge, pointing right */
.ck-tp.ck-offr .ck-mk{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.ck-arr-f.off{transform:translateX(-100%)}
/* part 5's “why” for the trade-off, opened by the learner (R3.10) */
.obs details.ck-why{margin:8px 0 0;border-top:1px solid var(--line-2);padding-top:8px}
.obs details.ck-why summary{cursor:pointer;font-weight:650;list-style:none;display:flex;align-items:center;gap:8px;font-size:var(--fs-cap);border-radius:3px}
.obs details.ck-why summary::-webkit-details-marker{display:none}
.obs details.ck-why summary::before{content:"+";flex:none;font-family:var(--font-mono);width:18px;height:18px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:3px;font-size:var(--fs-label)}
.obs details.ck-why[open] summary::before{content:"−"}
.obs details.ck-why p{margin:8px 0 0}
/* eight chunk sizes: each button as wide as its label and never broken into a column (R7.8); 2 px sides fit the eight keys in the 220 px rail card on the refit's key tray */
.ck-app .seg-ctl[data-key="C"] button{flex:1 1 auto;white-space:nowrap;padding-inline:2px}
/* H1/H2 (the owner, 2026-10-09): Show the math in short blocks with a hairline between them; in each block the name and the typeset
   formula, then this run's numbers under the terms they replace, the "=" signs lined up; a table wider than its box is set again by fitMath (below), so nothing scrolls sideways */
.ck-mb{padding:8px 0 10px}
.ck-mb+.ck-mb{border-top:1px solid var(--line)}
.ck-mb .ck-mlead{margin:0 0 4px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5}

.ck-mfx{overflow-x:auto;max-width:100%;padding-block:.3em}
.ck-mt{border-collapse:collapse}
.ck-mt th,.ck-mt td{padding:1px 3px;text-align:center;white-space:nowrap;vertical-align:baseline;font-weight:400;border:0;background:none}
.ck-mt th{font-family:var(--font-ui);text-align:right;white-space:nowrap;padding-right:6px;color:var(--ink-2)}
.ck-mt tr.ck-mname th{color:var(--ink);font-weight:600}
.ck-mt tr.ck-mname:not(:first-child) th,.ck-mt tr.ck-mname:not(:first-child) td{padding-top:8px}
.ck-mt td.ck-mres{text-align:left;white-space:normal}
.ck-mb .ck-mnote{margin:4px 0 0;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}

/* phones ≤ 480 px: the first screen keeps the users' row (R7.3). The breadcrumb row's previous and next links take a line of their own
   on a phone, so in English the row is two lines on a 390 px screen; the stage head and the picture's box sit a little tighter here */
/* Show the math on a box too narrow for its table (the owner's review of 2026-10-09): fitMath sets the block again, the name on its own
   line, the formula broken before an operator with the numbers under the terms they replace, nothing scrolling sideways */
.ck-mtn{border-collapse:collapse}
.ck-mtn th,.ck-mtn td{padding:1px 0;border:0;background:none;font-weight:400;text-align:left;vertical-align:top}
.ck-mtn tr.ck-mname th{font-family:var(--font-ui);font-weight:600;color:var(--ink);white-space:normal;padding:0 0 2px}
.ck-mtn tr.ck-mname:not(:first-child) th{padding-top:8px}
.ck-mtn .ck-mlbl{font-weight:400;color:var(--ink-2)}
.ck-mtn td.ck-meq{width:1%;padding-right:3px;white-space:nowrap}
.ck-mtn td.ck-mres{white-space:normal;padding-left:3px;line-height:1.5}
.ck-mfl{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.ck-mu{display:inline-grid;align-items:center;justify-items:center}
.ck-mc{padding:1px 3px;white-space:normal;line-height:1.5;text-align:center}
.ck-mc0{display:flex;align-items:center;justify-content:center;height:1.9em;white-space:nowrap}
.ck-mtall .ck-mc0{height:3.1em}
@media (max-width:480px){
  #ck-stage{padding-top:12px}
  .ck-stage>.stage-head{row-gap:6px}
  .ck-stage>.ck-graph{margin-top:8px;padding-top:7px}
}
/* ---------- polish r5 (B4, R7.12): every guided part fits a 1440 × 900 screen. The stage stacked the timeline (206 px), the replay,
   the two limits of a step (248 px: the usual step's box over the box of the step being looked at) and four metric cards, so it
   scrolled 22–62 px inside itself; from part 5 on the status also took a line of its own under the title. On a stage at least 736 px
   wide the two boxes stand side by side, the usual step on the left as it read first before, each box's name and time on its first line
   and what the step computes on the second, so a step that changes while the replay plays never moves the box's lines; the status stays
   beside the small title and the subtitle runs under both across the whole head, one line whatever Show me or a scenario card puts in
   it; the legend keeps room for the second line the replay adds to it (R7.9); the metric cards take the tighter value and change lines
   of CONTRACT §19. Same boxes, same order and the same bars; phones (≤ 760 px) and narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .ck-stage>.stage-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:0}
  .ck-stage>.stage-head>div:first-child{display:contents}
  .ck-stage #ck-st-title{grid-area:1/1}
  .ck-stage #ck-st-sub{grid-area:2/1/3/3}
  .ck-stage>.stage-head>.stage-actions{grid-area:1/2}
  /* the replay adds “now” and “waiting” to the legend: two lines in English, and in Chinese too once the chunks' boxes are on */
  .ck-stage>.legend-row{min-height:41px;align-content:flex-start}
  .ck-lim{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .ck-lim>.ck-cap,.ck-lim>.ck-limleg{grid-column:1/-1}
  .ck-ph-h{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:1px}
  .ck-ph-h>b{grid-area:1/1}
  .ck-ph-t{grid-area:1/2}
  .ck-ph-d{grid-area:2/1/3/3}
  .ck-metrics .metric .v{line-height:1.25}
  .ck-metrics .metric .d{min-height:13px;line-height:1.1}
  /* a few gaps tighter, as moe's wide stage */
  .ck-stage>.legend-row{margin-top:10px}
  .ck-graph{margin-top:10px;gap:8px}
  .ck-ph{padding:6px 10px 8px}
  .ck-ph-h{margin-bottom:4px}
  .ck-stage>.ck-scope{margin:8px 0 4px}
  .ck-metrics{margin-top:8px}
  .ck-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.ck-clock,#ck-lim .ck-ph-d,#ck-lim b{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 1–3 still ran 48 px past the stage and parts 4–6
   25, in both languages. The legend, the figure, the scope line, the metric cards and Show the math sit 2–4 px closer to what is above
   them, the figure's and the phases' padding are smaller, and the rows of each phase are 4 px apart */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .ck-stage>.legend-row{margin-top:6px}
  .ck-graph{margin-top:6px;gap:6px;padding-top:6px;padding-bottom:6px}
  .ck-ph{padding:4px 10px 6px}
  .ck-rows{gap:4px}
  .ck-lh{margin-top:2px}
  .ck-stage>.ck-scope{margin:6px 0 2px}
  .ck-metrics{margin-top:6px}
  .ck-stage>details.math{margin-top:6px;padding-top:6px}
}}

/* Contamination lab */
.ctm-app [hidden]{display:none!important}
.ctm-stage{container-type:inline-size}
.ctm-head{align-items:flex-start;gap:10px}
.ctm-st-title{font-weight:650;font-size:var(--fs-stage);min-width:0;line-height:1.35}
.ctm-pan{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;min-width:0}
.ctm-pt{font-weight:600;font-size:var(--fs-cap);line-height:1.35;margin-bottom:4px;min-width:0}
.ctm-pt2{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.ctm-leg{margin:2px 0 6px;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-label)}
.ctm-leg .lg{display:inline-flex;align-items:center;gap:5px}
.ctm-chart,.ctm-grid{display:block;width:100%;height:auto;max-width:600px}
.ctm-gl{stroke:var(--line-2);stroke-width:1}
.ctm-gl.z{stroke:var(--ink-3);stroke-width:1.4}
.ctm-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.ctm-ax.s{font-size:var(--fs-mark)}
.ctm-rl{font-size:var(--fs-label);fill:var(--ink-2)}
.ctm-rl.n{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}   /* a phone: the row's name above its bar, over the grid */
.ctm-vl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.ctm-tl{font-size:var(--fs-mark);fill:var(--ink-2)}
.ctm-bar{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.ctm-bar.bad{stroke:var(--c-oom)}
.ctm-cap{stroke:var(--ink);stroke-width:1.6}
.ctm-dot{fill:var(--ink)}
.ctm-dot.bad{fill:var(--c-oom)}
.ctm-true{stroke:var(--ink-2);stroke-width:1.4;stroke-dasharray:4 3}
.ctm-thr{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:3 2}
rect.ctm-q{fill:var(--sunken);stroke:var(--line-2);stroke-width:.6}
rect.ctm-q.hit{fill:var(--ink);stroke:var(--ink)}
rect.ctm-q.miss{fill:var(--c-oom);stroke:var(--c-oom)}
rect.ctm-q.fa{fill:var(--ink-3);opacity:.55;stroke:var(--ink-3)}
.sw.ctm-sw-hit{background:var(--ink);width:10px;height:10px;border-radius:2px}
.sw.ctm-sw-miss{background:var(--c-oom);width:10px;height:10px;border-radius:2px}
.sw.ctm-sw-fa{background:var(--ink-3);opacity:.6;width:10px;height:10px;border-radius:2px}
.sw.ctm-sw-ok{background:var(--sunken);border:1px solid var(--line-2);width:10px;height:10px;border-radius:2px}
.sw.ctm-sw-bar{background:var(--ink);width:16px;height:3px;align-self:center;border-radius:2px}
.sw.ctm-sw-true{background:transparent;border-left:1.6px dashed var(--ink-2);width:2px;height:12px}
.sw.ctm-sw-thr{background:transparent;border-left:1.6px dashed var(--ink);width:2px;height:12px}
.sw.ctm-sw-sh{background:var(--ink);width:10px;height:10px;border-radius:2px}
.sw.ctm-sw-hd{background:transparent;border:1.4px solid var(--ink-3);width:10px;height:10px;border-radius:2px;box-sizing:border-box}
.sw.ctm-sw-wr{background:var(--c-oom);width:10px;height:10px;border-radius:2px}
.sw.ctm-sw-cur{background:transparent;outline:2px solid var(--ink);outline-offset:1px;width:8px;height:8px;border-radius:1px}
.ctm-gt{display:flex;flex-direction:column;gap:2px}
.ctm-gr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(120px,1.5fr) minmax(0,.9fr);gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.ctm-gn{font-size:var(--fs-label);line-height:1.3;min-width:0}
.ctm-gn b{display:block;font-weight:600}
.ctm-gn span{color:var(--ink-2);font-size:var(--fs-label)}
.ctm-gsvg{display:block;width:100%;height:auto}
.ctm-gv{font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.35;text-align:right;min-width:0}
.ctm-gv.ok{color:var(--ink)}
.ctm-gv.bad{color:var(--c-oom)}
.ctm-verd{margin:6px 0 0;font-size:var(--fs-cap)}
.ctm-verd.bad b{color:var(--c-oom)}
.ctm-strip{margin:6px 0 2px}
.ctm-sl{font-size:var(--fs-label);line-height:1.35}
.ctm-sl span{color:var(--ink-2)}
.ctm-sc{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);margin:2px 0}
.ctm-sc .bad{color:var(--c-oom)}
.ctm-rs{display:block;width:100%;height:auto;max-width:520px}
rect.ctm-run.sh{fill:var(--ink)}
rect.ctm-run.hd{fill:none;stroke:var(--ink-3);stroke-width:1.2}
rect.ctm-run.wr.sh{fill:var(--c-oom)}
rect.ctm-run.wr.hd{fill:var(--c-oom);stroke:var(--c-oom)}
rect.ctm-run.cur{stroke:var(--ink);stroke-width:2.4;paint-order:stroke}
.ctm-psel .inline-ctl{margin:2px 0 6px}
.ctm-pair{font-size:var(--fs-cap);line-height:1.5;min-width:0}
.ctm-tx{border:1px solid transparent;border-radius:8px;padding:6px 8px;margin:6px 0;background:var(--surface-2)}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.ctm-tx.bad{border-color:var(--c-oom)}
.ctm-tx p{margin:2px 0 0;overflow-wrap:anywhere}
.ctm-lab{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:var(--fs-label);font-weight:600;color:var(--ink-2)}
.ctm-leak{font-style:normal;color:var(--c-oom);font-weight:600}
.ctm-cl{font-style:normal;color:var(--ink-3);font-weight:500}
.ctm-gl2{color:var(--ink-3);font-size:var(--fs-label)}
mark.ctm-m{color:inherit;background:color-mix(in srgb,var(--ink) 16%,transparent);border-bottom:2px solid var(--ink-2);border-radius:2px;padding:0 1px}
.ctm-pv{margin:4px 0 0;font-size:var(--fs-label)}
.ctm-pv.bad b{color:var(--c-oom)}
.ctm-metrics{margin-top:10px}
.ctm-mb{padding:6px 0;border-bottom:1px solid var(--line);container-type:inline-size}
.ctm-mb:last-child{border-bottom:0}
.ctm-mb-lead{margin:0 0 4px;font-size:var(--fs-cap)}
.ctm-math-line{overflow-x:auto;padding-block:.3em;max-width:100%}
.ctm-prod li{margin:4px 0}
.ctm-cands{margin:4px 0 8px;padding-left:18px;font-size:var(--fs-cap)}
.ctm-cands li{margin:2px 0}
.ctm-dk{height:6px;background:var(--sunken);border-radius:3px;overflow:hidden;min-width:60px}
.ctm-dk i{display:block;height:100%;background:var(--ink-2)}
.ctm-keep{text-transform:none}
.ctm-lv .levers{margin-top:6px}
@container (max-width:460px){.ctm-gr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ctm-gr .ctm-gsvg{grid-column:1 / -1;grid-row:2}.ctm-gv{text-align:right}}
.ctm-app .seg-ctl[data-key="s"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ctm-why,.ctm-rules{margin:4px 0 8px;padding-left:18px}
.ctm-why li,.ctm-rules li{margin:2px 0}
/* B4 (the owner: "the panel was pushed down, I did not see there was more below"): on a wide desktop stage (>= 736 px) part 7 (the
   score chart, the release gate, the 100 runs and the cards) fits one 1440x900 screen with nothing cut or folded. When the gate is
   shown under it, the score chart keeps its 460 px and its legend moves to its right, still beside the bars it labels (R5.9); each
   gate row's small chart is drawn at most 240 px wide (shorter); the panels' spacing and the cards' padding are tighter, the
   cards' change line keeps 12 px type (CONTRACT §19) and its place. Phones and narrow stages keep the stacked layout. */
@media (min-width:761px){
@container (min-width:736px){
 .ctm-stage:has(>#ctm-pan-gate:not([hidden])) #ctm-pan-score:not([hidden]){display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:16px;align-items:end}
 .ctm-stage:has(>#ctm-pan-gate:not([hidden])) #ctm-pan-score>.ctm-pt{grid-column:1/-1}
 .ctm-stage:has(>#ctm-pan-gate:not([hidden])) #ctm-pan-score>#ctm-s-leg{flex-direction:column;align-items:flex-start;margin:0 0 30px;gap:6px}
 .ctm-gr .ctm-gsvg{max-width:240px;justify-self:center}
 .ctm-pan{padding-top:6px;margin-top:6px}
 .ctm-gr{padding:3px 0}
 .ctm-pt2{margin-top:8px;padding-top:6px}
 .ctm-strip{margin:4px 0 0}
 .ctm-leg{margin:2px 0 4px}
 .ctm-stage>.ctm-metrics{margin-top:8px}
 .ctm-stage>details.math{margin-top:8px}
 .ctm-metrics .metric{padding-block:6px 5px}
 .ctm-metrics .metric .v{line-height:1.25}
 .ctm-metrics .metric .d{min-height:13px;line-height:13px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 5 and 7 still ran 20 and 48 px past the stage
   (English 17 and 63). The panels sit 2 px closer, each gate row's small chart is drawn at its own size (220 px wide instead of 240,
   so its ticks are 11 px as drawn), the question grid and the score chart are at most 570 px wide instead of 600, and in part 7 each
   candidate's two results sit at the right of its name instead of on a line under it (the English name of the new model takes two
   lines there). In English part 7 still runs 15 px past 1536 × 730 */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .ctm-gr .ctm-gsvg{max-width:220px}
  .ctm-pan{padding-top:4px;margin-top:4px}
  .ctm-pt2{margin-top:6px;padding-top:4px}
  .ctm-chart,.ctm-grid{max-width:570px}
  .ctm-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:baseline}
  .ctm-strip>.ctm-sc{margin:0}
  .ctm-strip>.ctm-rs{grid-column:1/-1}
}}

/* context-eng: the context of every model call (canvas bars, stacked by kind) against the window, one row per fact,
   the player, the metric cards. Colours (R5.6): grayscale, hatching and dashes for the data; red only for "over the
   window" and ✗, green only for ✓ and the challenge's goals. */
.cte-stage .stage-head{align-items:center}
.cte-graph{padding:12px 14px 14px;display:grid;gap:8px;min-width:0}
/* R7.9: the caption changes while the run plays: one line, never wrapped; on phones two fixed lines, never cut (R7.8) */
.cte-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.cte-cap{white-space:normal;overflow:visible;text-overflow:clip;min-height:2.7em}}
.cte-legend{margin-top:0}
.cte-legend>span{cursor:help;display:inline-flex;align-items:center}
.cte-okm{color:var(--c-ok);margin-right:2px;font-weight:700}
.cte-badm{color:var(--c-oom);margin-right:6px;font-weight:700}

/* ---------- the bars: one per model call ---------- */
/* the chart's height: drawChart reads --cte-ch; shorter on a wide desktop stage (see the end of this file) */
.cte-chart{--cte-ch:210px;position:relative;min-width:0;min-height:var(--cte-ch);cursor:help;outline-offset:3px;border-radius:2px}
.cte-chart canvas,.cte-lanes canvas{display:block;max-width:100%}
.cte-lanes-h{margin-top:2px;min-width:0;overflow-x:auto}
/* H5 (the owner, 2026-10-09): a hairline between the context chart and the facts’ lanes */
.cte-graph>.cte-chart~.cte-lanes-h:not(:empty):not([hidden]){border-top:1px solid var(--line);padding-top:8px}
/* R2.11: the facts as an aligned list: one per line, the same three fields in the same columns */
.cte-ftab{border-collapse:collapse;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cte-ftab th{font-weight:600;color:var(--ink-3);text-align:left;padding:0 18px 1px 0;white-space:nowrap}
.cte-ftab td{padding:0 18px 0 0;white-space:nowrap}
.cte-ftab td:first-child{color:var(--ink)}
.cte-lanes{position:relative;min-width:0;min-height:56px;cursor:help;outline-offset:3px;border-radius:2px}

/* ---------- legend swatches: the same fills as the bars and the fact rows ---------- */
.sw.cte-sw-h{background:var(--ink);border-color:transparent}
.sw.cte-sw-s{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1px,var(--surface) 1px 3px);border:1px solid var(--ink-2)}
.sw.cte-sw-c{background:var(--ink-3);border-color:transparent}
.sw.cte-sw-t{background:var(--line-2);border-color:transparent}
.sw.cte-sw-o{background:var(--c-oom);border-color:transparent;opacity:.85}
.sw.cte-sw-raw{width:16px;height:6px;border:0;border-radius:0;background:var(--ink)}
.sw.cte-sw-sum{width:16px;height:3px;border:0;border-radius:0;background:repeating-linear-gradient(90deg,var(--ink-2) 0 1.6px,transparent 1.6px 3px)}
.sw.cte-sw-note{width:16px;height:0;border:0;border-radius:0;border-top:1.5px dashed var(--ink-2)}

/* ---------- the player ---------- */
.cte-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.cte-play{min-width:92px}
.cte-speed button{font-size:var(--fs-label);padding:3px 9px}
.cte-scrub{flex:1 1 140px;min-width:120px}
/* the tally keeps two lines' height, so the stage does not jump while the run plays (R7.9) */
.cte-tally{font-size:var(--fs-label);line-height:1.45;color:var(--ink-2);min-height:2.9em}

/* ---------- metric cards: five of them; three then two on a wide stage, two per row (the last one full width) on a narrow one ---------- */
.cte-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (max-width:559.98px){.cte-metrics .metric:last-child:nth-child(odd){grid-column:1/-1}}
@container (min-width:560px){.cte-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.cte-metrics .metric{grid-column:span 2}.cte-metrics .metric:nth-child(n+4){grid-column:span 3}}
/* the sub-labels change while the run plays: two lines reserved, so the cards do not jump (R7.9) */
.cte-metrics .metric .sub{min-height:2.7em}
/* S5: "the last run stopped at step 38" in place of a ▲▼ that would compare part of a run with a whole one */
.cte-metrics .metric .d.cte-dn{font-family:inherit;white-space:nowrap}
.cte-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.cte-fx{margin:8px 0 10px;overflow-x:auto}
.cte-lv{margin-top:6px}
.cte-mt{margin-top:12px}
.cte-ch-res{scroll-margin-top:120px}
.cte-chfacts{margin:6px 0 8px;padding-left:18px;font-size:var(--fs-cap);color:var(--ink-2)}
.cte-chfacts li{margin-bottom:4px}
.cte-app .goal.cte-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.cte-app .goal.cte-goal span:last-child{white-space:normal}
.goal.cte-over b{color:var(--c-oom)}
.cte-app .inline-ctl .seg-ctl{flex-wrap:wrap}
/* B3: the challenge's choices are chips that wrap whole; a label never breaks one character per line (R7.8) */
.cte-app .railcard .inline-ctl .seg-ctl button{flex:1 0 auto;white-space:nowrap;padding:5px 9px}
.cte-remlist li{margin-bottom:8px}
.cte-rem{font-size:var(--fs-label);white-space:nowrap}
.cte-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}

/* ---------- settings ---------- */
.cte-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.cte-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.cte-grp .ctl>.lbl{display:block}
.cte-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.cte-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.cte-prod li{margin-bottom:6px}
.cte-prod code{word-break:break-word}

/* ---------- the dock's mini bar: the largest context against the window ---------- */
.cte-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.cte-dk i{display:block;height:100%;background:var(--ink-2);transition:width .25s}

@media (max-width:760px){
  /* phones: the picture first; its legends sit right under the bars and the rows (R5.9) */
  .cte-stage{display:flex;flex-direction:column}
  .cte-stage>.stage-head{order:1}
  .cte-stage>.cte-graph{order:2}
  .cte-stage>.cte-scope{order:4}
  .cte-stage>.metrics{order:5}
  .cte-stage>details.math{order:6}
  .cte-graph{padding:10px 10px 12px;display:flex;flex-direction:column}
  /* R7.3: the bars on the first screen; each legend right under what it labels; the chart's tooltip says what it shows */
  .cte-graph>.cte-cap{order:1}
  .cte-graph>.cte-chart{order:2}
  .cte-graph>#cte-legend{order:3}
  .cte-graph>.cte-lanes-h{order:4}
  .cte-graph>.cte-lanes{order:5}
  .cte-graph>#cte-legend2{order:6}
  .cte-graph>.cte-player{order:7}
  .cte-graph>.cte-tally{order:8}
  #cte-st-title{display:none}
  .cte-play{min-width:84px}
  .cte-scrub{flex-basis:100%}
}
/* B4 (the owner: "the player was pushed down, I did not see there was more below"): on a wide desktop stage (>= 736 px) the whole
   stage fits one 1440x900 screen with nothing cut: the chart is drawn shorter (180 px, and shorter still on a lower screen, never
   under 120), the line legend sits beside the facts table, right above the rows it labels (R5.9), and the hairline runs on under
   both (H5); the tally keeps one line (it fits on this width, and its height still never changes while the run plays, R7.9); the
   five cards sit in one row. Phones and narrow stages keep the stacked layout. */
@media (min-width:761px){
@container (min-width:736px){
  /* R7.9: the status chip changes its words when a run ends ("Running" -> "Fits; 0 of 3 facts sure"); beside a long English setting
     line it dropped to a row of its own at that moment and pushed the whole stage down 40 px. Here the chip sits at the right of the
     small question line and the setting line under both has the stage's whole width, so the head keeps one height whatever the
     chip says. */
  .stage-head:has(#cte-status){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;align-items:center}
  .stage-head:has(#cte-status)>div:first-child{display:contents}
  #cte-st-title{grid-column:1;grid-row:1}
  .stage-head:has(#cte-status)>.stage-actions{grid-column:2;grid-row:1}
  #cte-st-sub{grid-column:1/-1;grid-row:2}
  .cte-graph{padding:10px 14px;gap:6px 0;grid-template-columns:max-content minmax(0,1fr)}
  .cte-graph>*{grid-column:1/-1}
  .cte-graph>.cte-lanes-h{grid-column:1;grid-row:4}
  .cte-graph>#cte-legend2{grid-column:2;grid-row:4;align-content:flex-end;border-top:1px solid var(--line);padding:8px 0 2px 24px;margin-top:2px}
  .cte-graph>.cte-lanes{grid-row:5}
  .cte-chart{--cte-ch:clamp(120px,calc(100vh - 720px),180px)}
  .cte-tally{min-height:1.45em;white-space:nowrap}
  .cte-metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .cte-metrics .metric,.cte-metrics .metric:nth-child(n+4){grid-column:auto}
  /* the widest change line (“this run stopped at step 38”, one line, S5) still fits inside a card */
  .cte-metrics .metric{padding-inline:5px}
}}
@media (prefers-reduced-motion:reduce){.cte-dk i{transition:none}}
/* owner point 4: each point's sources, small and after its button */
.cte-srcs{font-size:var(--fs-label);color:var(--ink-3)}
.cte-srcs a{color:inherit}

/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.cte-mb{padding:8px 0 10px}
.cte-mb+.cte-mb{border-top:1px solid var(--line)}
.cte-mb>p{margin:0 0 6px}
.cte-mb>p:last-child{margin-bottom:0}
.cte-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.cte-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.cte-eqs-nm{grid-template-columns:max-content max-content}.cte-eqs-nm>.cte-eq-l{grid-column:1/-1;text-align:left}.cte-eqs-nm>.cte-eq-l:empty{display:none}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.cte-cap,#cte-metrics .sub,.cte-runl{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 700 px tall or less (1366 × 650) every part still ran 6 px past the stage (English 23). The figure's
   padding and the space between its rows are smaller, and so are the space above the facts table and the line legend and the space
   round the scope line */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){@container (min-width:736px){
  .cte-graph{padding-top:6px;padding-bottom:6px;row-gap:4px}
  .cte-graph>.cte-chart~.cte-lanes-h:not(:empty):not([hidden]),.cte-graph>#cte-legend2{padding-top:4px}
  .cte-scope{margin:6px 0 2px}
}}

/* ---------- continuous batching lab (prefix cb-) ---------- */
.cb-lab .status.cb-st{color:var(--ink-2);background:var(--surface-2);border-color:var(--line)}
.cb-lab [data-tipx]:not(button){cursor:help}
.cb-legend>span{display:inline-flex;align-items:center;border-radius:2px}
.cb-legend>span[hidden]{display:none}
.cb-sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;flex:none;border:1px solid transparent}
.cb-sw-pf{background:var(--ink)}
.cb-sw-dec{background:var(--ink-3)}
.cb-sw-idle{background:repeating-linear-gradient(135deg,var(--surface) 0 2px,var(--ink-3) 2px 3.2px);border-color:var(--line)}
.cb-sw-emp{background:var(--surface-2);border-color:var(--line)}
.cb-sw-q{background:color-mix(in srgb,var(--ink-3) 38%,transparent)}
.cb-sw-w{background:var(--c-weights)}
.cb-sw-kv{background:var(--c-kv)}
/* line styles in the legend: the dashed comparison line and the thick playhead */
.cb-sw-ghost,.cb-sw-head{width:0;height:12px;border:0;border-radius:0;margin:0 8px 0 4px}
.cb-sw-ghost{border-left:1.5px dashed var(--ink-2)}
.cb-sw-head{border-left:2px solid var(--ink)}

/* playback */
.cb-play{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:10px}
.cb-play .btn{white-space:nowrap}
.cb-play input[type=range]{flex:1 1 110px;min-width:0;width:auto;height:26px}
.cb-clock{flex:1 1 190px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);min-height:1.4em}
/* playback speed: slow / medium / fast (R3.9) */
.cb-speed{display:inline-flex;align-items:center;gap:6px;flex:none;cursor:help}
.cb-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.cb-lab .cb-speed .seg-ctl{display:inline-flex;width:auto}
.cb-lab .cb-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);cursor:pointer}
.cb-sub2{font-size:var(--fs-label);line-height:1.4;color:var(--ink-3);margin-top:1px}
.cb-ic-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}

/* schedule chart: one row per slot, time left to right */
.cb-gantt{--rh:20px;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:6px;position:relative}
.cb-lab-col{display:flex;flex-direction:column;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);text-align:right}
.cb-ql{height:26px;margin-bottom:4px;display:flex;align-items:center;justify-content:flex-end;font-size:var(--fs-mark);line-height:1}
.cb-rl{height:var(--rh);margin-bottom:2px;display:flex;align-items:center;justify-content:flex-end;line-height:1}
.cb-al{height:16px;margin-top:4px;font-size:var(--fs-mark)}
.cb-plot{--cut:0%;position:relative;min-width:0}
.cb-q{height:26px;margin-bottom:4px;position:relative;border-bottom:1px solid var(--line-2)}
.cb-q svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cb-q-area{fill:color-mix(in srgb,var(--ink-3) 38%,transparent)}
.cb-clip{clip-path:inset(0 var(--cut) 0 0)}
.cb-track{position:relative;height:var(--rh);margin-bottom:2px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.cb-trk-in{position:absolute;inset:0}
.cb-req{position:absolute;top:0;bottom:0;display:block;background:var(--ink-3);box-shadow:inset 1.5px 0 0 var(--surface);font-weight:400}
.cb-req:focus{outline:2px solid var(--ink);outline-offset:1px;z-index:2}
.cb-req:hover{background:var(--ink-2)}
.cb-pf{position:absolute;left:0;top:0;bottom:0;background:var(--ink);min-width:2px;max-width:100%}
.cb-idle{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--ink-3) 75%,transparent) 3px 4.2px)}
.cb-axis{position:relative;height:16px;margin-top:4px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.cb-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.cb-axis span.cb-ax-l{transform:none}
.cb-axis span.cb-ax-r{transform:translateX(-100%)}
.cb-ghost{position:absolute;top:0;bottom:20px;width:0;border-left:1.5px dashed var(--ink-2);pointer-events:none;z-index:1}
.cb-ghost span{position:absolute;top:1px;left:5px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.2;color:var(--ink-2);white-space:nowrap;background:var(--surface);padding:1px 3px;border-radius:2px}
.cb-ghost span.cb-gl-l{left:auto;right:5px}
.cb-head{position:absolute;top:0;bottom:20px;width:0;border-left:2px solid var(--ink);pointer-events:none;z-index:2}
#cb-graph{scroll-margin-top:80px}

/* metrics: four cards, two per row on narrow stages; label, value, note and change line up across a row */
.cb-mhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:14px}
.cb-mhead .eyebrow{margin:0}
.cb-mstate{font-size:var(--fs-label);color:var(--ink-3)}
.cb-mhead+.metrics{margin-top:6px}
.metrics.cb-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.metrics.cb-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cb-metrics .metric{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:1px;align-content:start}
.cb-metrics .metric .v{font-size:clamp(15px,3.6cqi,18px)}
.cb-u{font-size:.72em;font-weight:450;color:var(--ink-2)}
/* before the playhead reaches the end, the whole-run values are greyed */
.cb-metrics.cb-pending .metric{background:var(--surface-2)}
.cb-metrics.cb-pending .metric .v,.cb-metrics.cb-pending .metric .cb-u,.cb-metrics.cb-pending .metric .sub{color:var(--ink-3)}
.cb-metrics.cb-pending .metric .v{font-family:var(--font-ui);font-size:var(--fs-cap);font-weight:450;white-space:normal}
/* guided mode: the way back to the step card after a run ends */
.cb-done{display:block;margin:8px 0 0;font-weight:600;text-align:left}
.cb-done[hidden]{display:none}

/* controls */
.cb-locked .cb-lockable{display:none}
.cb-fixed{font-size:var(--fs-label);color:var(--ink);padding:7px 9px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}   /* a soft panel, no frame inside the stage (精装修 step 2) */
#cb-controls .ctl>.lbl output{font-family:var(--font-mono);font-weight:500;color:var(--ink);font-size:var(--fs-cap)}
.cb-g2{margin-top:2px}
.cb-g2 b{font-weight:600}
.cb-subwrap:empty{display:none}
#cb-ch-res{scroll-margin-top:120px;scroll-margin-bottom:12px}

/* step-time chart */
.cb-stc{margin:10px 0 6px}
.cb-stc-title{font-size:var(--fs-cap);font-weight:650;line-height:1.35;margin:0 0 2px}
.cb-stc-row{margin-top:8px}
.cb-stc-lab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font-size:var(--fs-label);line-height:1.3;color:var(--ink-2)}
.cb-stc-lab .mono{font-size:var(--fs-label);color:var(--ink)}
.cb-stc-bar{display:flex;height:11px;margin-top:3px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.cb-stc-bar i{display:block;height:100%}
.cb-stc-w{background:var(--c-weights)}
.cb-stc-kv{background:var(--c-kv)}
.cb-stc-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2)}
.cb-stc-key span{display:inline-flex;align-items:center}
.mathbody+#cb-mathchart{font-family:var(--font-ui)}

/* mini result bar */
.cb-dk{display:flex;height:12px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface-2)}
.cb-dk i{display:block;height:100%}
.cb-dk-b{background:var(--ink-3)}
.cb-dk.met .cb-dk-b{background:var(--c-ok)}

/* home tile teaser */
.tz-cb-g{display:grid;gap:3px;padding:2px 0 0;border-radius:3px}
.tz-cb-row{position:relative;height:18px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tz-cb-req{position:absolute;top:0;bottom:0;background:var(--ink-3);box-shadow:inset 1.5px 0 0 var(--surface);color:var(--surface);font:500 var(--fs-mark)/18px var(--font-mono);text-align:center;overflow:hidden;white-space:nowrap}
.tz-cb-idle{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--ink-3) 75%,transparent) 3px 4.2px)}
.tz-cb-ax{position:relative;height:13px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:13px;color:var(--ink-3);margin-top:1px}
.tz-cb-ax span{position:absolute;top:0;white-space:nowrap}
.tz-cb-0{left:0}
.tz-cb-end{transform:translateX(-50%)}
.tz-cb-end.tz-cb-end-r{transform:translateX(-100%)}
.tz-cb-lg{display:inline-block;min-width:16px;height:12px;margin-right:5px;padding:0 2px;border-radius:2px;background:var(--ink-3);color:var(--surface);font:500 var(--fs-mark)/12px var(--font-mono);font-style:normal;text-align:center}
.tz-cb-sw-idle{display:inline-block;width:12px;height:12px;margin-right:5px;border-radius:2px;border:1px solid var(--line);background:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--ink-3) 75%,transparent) 3px 4.2px),var(--surface-2)}

@media (prefers-reduced-motion:reduce){.cb-stc-bar i,.cb-req{transition:none}}
.cb-glabel{margin:0 0 6px}
.cb-rel{margin-top:10px}
.cb-rel ul{margin:4px 0 0;padding-left:18px}
#cb-ctl-mem .ctl-note p{margin:0}
#cb-ctl-mem .ctl-note p+p{margin-top:6px}
.cb-prod{margin:0;padding-left:18px;font-size:var(--fs-cap);line-height:1.5}
.cb-prod li+li{margin-top:6px}
.cb-prod a{font-family:var(--font-mono);font-size:var(--fs-label)}
.tz-cb-cap{font-size:var(--fs-label);line-height:1.35;color:var(--ink-3);margin-bottom:-4px}
.cb-lab .goal b{font-weight:650}
/* H1/H2 (the owner, 2026-10-09): Show the math in short blocks with a hairline between them; in each block the name and the typeset
   formula, then this run's numbers under the terms they replace, the "=" signs lined up; a table wider than its box is set again by fitMath (below), so nothing scrolls sideways */
.cb-mhead{margin:14px 0 2px!important;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cb-mhead:first-child{margin-top:2px!important}
.cb-mb{padding:8px 0 10px}
.cb-mb+.cb-mb{border-top:1px solid var(--line)}
.cb-mb .cb-mlead{margin:0 0 4px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5}
.cb-fx{overflow-x:auto;max-width:100%}
.cb-mt{border-collapse:collapse}
.cb-mt th,.cb-mt td{padding:1px 3px;text-align:center;white-space:nowrap;vertical-align:baseline;font-weight:400;border:0;background:none}
.cb-mt th{font-family:var(--font-ui);text-align:right;white-space:normal;min-width:4em;max-width:13em;padding-right:6px;color:var(--ink-2)}
.cb-mt tr:first-child th{color:var(--ink);font-weight:600}
.cb-mt td.cb-mres{text-align:left}
.cb-mb .cb-mnote{margin:4px 0 0;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}
.cb-fxl{margin:6px 0;padding-block:.3em;overflow-x:auto;max-width:100%}
/* Show the math on a box too narrow for its table (the owner's review of 2026-10-09): fitMath sets the block again, the name on its own
   line, the formula broken before an operator with the numbers under the terms they replace, nothing scrolling sideways */
.cb-mtn{border-collapse:collapse}
.cb-mtn th,.cb-mtn td{padding:1px 0;border:0;background:none;font-weight:400;text-align:left;vertical-align:top}
.cb-mtn tr.cb-mname th{font-family:var(--font-ui);font-weight:600;color:var(--ink);white-space:normal;padding:0 0 2px}
.cb-mtn tr.cb-mname:not(:first-child) th{padding-top:8px}
.cb-mtn .cb-mlbl{font-weight:400;color:var(--ink-2)}
.cb-mtn td.cb-meq{width:1%;padding-right:3px;white-space:nowrap}
.cb-mtn td.cb-mres{white-space:normal;padding-left:3px;line-height:1.5}
.cb-mfl{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.cb-mu{display:inline-grid;align-items:center;justify-items:center}
.cb-mc{padding:1px 3px;white-space:normal;line-height:1.5;text-align:center}
.cb-mc0{display:flex;align-items:center;justify-content:center;height:1.9em;white-space:nowrap}
.cb-mtall .cb-mc0{height:3.1em}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.cb-clock{font-variant-numeric:tabular-nums}

/* data-pipeline: the funnel (a canvas of 1,000 squares with four bins, labels drawn beside each bin), its player, the MinHash
   curve with one dot per pair, the mix's epochs, the five rule switches. Colours (R5.6): grayscale for the picture; red only for
   a wrong call (R5.11); green and red for the challenge's goals. */
.dl-app [hidden]{display:none!important}
.dl-stage .stage-head{align-items:center}
.dl-graph{padding:12px 14px 14px;display:grid;gap:14px;min-width:0}
.dl-graph>div{min-width:0}
.dl-phone{display:none}
.dl-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}

/* ---------- the funnel ---------- */
.dl-cvwrap{position:relative;width:100%;min-width:0}
.dl-cvwrap canvas{display:block;cursor:crosshair;touch-action:pan-y}
.dl-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.35}
.dl-leg>span{display:inline-flex;align-items:center;gap:6px}
.dl-leg .sw{display:inline-block;width:10px;height:10px;flex:0 0 auto;border-radius:1px}
.dl-sw-in{background:var(--ink-2)}
.dl-sw-out{background:var(--ink-3);opacity:.55}
.dl-sw-red{background:var(--c-oom)}
.dl-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.dl-player .ctl{display:flex;align-items:center;gap:6px;margin:0}
.dl-player .ctl>.lbl{font-size:var(--fs-label)}
.dl-player .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
/* H7 (the owner, 2026-10-09, on GRPO's player: “重放按钮和速度按钮没有对齐”): Replay, the step buttons and the speed buttons share one
   height and one centre line */
.dl-player .btn.sm,.dl-player .seg-ctl{height:30px;box-sizing:border-box}
.dl-player .btn.sm{padding-top:0;padding-bottom:0}
.dl-player .seg-ctl button{padding-top:0;padding-bottom:0}
.dl-play{min-width:92px;justify-content:center}
.dl-scrub{display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:0}
.dl-scrub input{flex:1 1 auto;min-width:0}
.dl-count{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}

/* ---------- hover card for one page ---------- */
.dl-tt{max-width:320px}
.dl-tt p{margin:4px 0}
.dl-tt table{border-collapse:collapse;margin:4px 0;font-size:var(--fs-label)}
.dl-tt th{text-align:left;font-weight:500;padding:1px 10px 1px 0;color:inherit;opacity:.85}
.dl-tt td{text-align:right;padding:1px 0}
.dl-ttr{color:var(--c-oom);font-weight:650}

/* ---------- the MinHash curve; the legend sits beside it ---------- */
.dl-crow{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.dl-curve svg{display:block;width:100%;height:auto;overflow:visible}
.dl-leg-side{margin:8px 0 0}   /* the legend follows the caption and plot (.dl-cmain), 8 px below the plot as before */
.dl-leg-side>span{align-items:flex-start}
.dl-leg-side .sw{margin-top:3px}
.dl-legn{color:var(--ink-3)}
.dl-gl{stroke:var(--line-2);stroke-width:1}
.dl-tk{stroke:var(--line);stroke-width:1}
.dl-ax{font:var(--fs-mark) var(--font-mono);fill:var(--ink-3)}
.dl-axt{font:var(--fs-label) var(--font-ui);fill:var(--ink-2)}
.dl-cur{fill:none;stroke:var(--ink);stroke-width:2.2}
.dl-ref{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:5 4}
.dl-reft{font:var(--fs-mark) var(--font-ui);fill:var(--ink-2)}
.dl-d1{fill:var(--ink-2);opacity:.75}
.dl-d0{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.2}
.dl-dr{fill:var(--c-oom)}
.dl-goalz{fill:var(--c-ok-soft);stroke:var(--c-ok);stroke-width:1;stroke-dasharray:3 2}
.dl-gok{fill:var(--c-ok)}
.dl-gbad{fill:var(--c-oom)}
.dl-gt{font:var(--fs-label) var(--font-mono);fill:var(--ink)}
.dl-sw-cur{height:3px!important;background:var(--ink)}
.dl-sw-ref{height:0!important;border-top:2px dashed var(--ink-3)}
.dl-sw-goal{background:var(--c-ok-soft);border:1px dashed var(--c-ok)}
.dl-sw-d1{border-radius:50%!important;background:var(--ink-2)}
.dl-sw-d0{border-radius:50%!important;border:1.2px solid var(--ink-2);box-sizing:border-box}
.dl-sw-dr{border-radius:50%!important;background:var(--c-oom)}

/* ---------- the mix: epochs per domain ---------- */
.dl-mix{display:grid;gap:10px}
.dl-mrow{display:grid;grid-template-columns:150px minmax(0,1fr) 78px;gap:10px;align-items:center;cursor:help;border-radius:3px;outline-offset:2px}
.dl-ml{font-size:var(--fs-label);color:var(--ink);line-height:1.25}
.dl-ml small{display:block;font-size:var(--fs-mark);color:var(--ink-3)}
.dl-mtrk{position:relative;height:16px;background:var(--surface-2);border-radius:2px}
.dl-mtrk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:2px;transition:width .25s ease-out}
.dl-mtrk i.over{background:var(--c-oom)}
.dl-mtrk b{position:absolute;top:-3px;bottom:-3px;width:0}
.dl-m1{border-left:1.5px solid var(--ink)}
.dl-m3{border-left:1.5px dashed var(--ink)}
.dl-mrow em{font:600 var(--fs-label) var(--font-mono);font-style:normal;text-align:right;color:var(--ink)}
.dl-mrow em.over{color:var(--c-oom)}
.dl-mleg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-label);color:var(--ink-2);margin-top:2px}
.dl-mleg span{display:inline-flex;align-items:center;gap:6px}
.dl-mleg i{display:inline-block;width:0;height:12px}
.dl-m1l{border-left:1.5px solid var(--ink)}
.dl-m3l{border-left:1.5px dashed var(--ink)}
.dl-mol{width:10px!important;height:10px!important;background:var(--c-oom)}

/* ---------- metric cards ---------- */
.dl-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.dl-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- formulas on their own line ---------- */
.dl-fx{margin:8px 0 10px;overflow-x:auto;font-size:var(--fs-stage);line-height:1.3}

/* ---------- rail: rule switches, levers, challenge ---------- */
.dl-rules{display:grid;gap:6px;margin:8px 0 4px}
.dl-sw{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.dl-sw:hover{border-color:var(--ink-3)}
.dl-sw i{position:relative;width:28px;height:16px;border-radius:8px;background:var(--line);transition:background .15s}
.dl-sw i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);transition:left .15s}
.dl-sw[aria-pressed="true"] i{background:var(--ink-2)}
.dl-sw[aria-pressed="true"] i::after{left:14px}
.dl-sw span{display:grid;gap:1px;min-width:0}
.dl-sw b{font-size:var(--fs-cap);font-weight:650}
.dl-sw small{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3}
.dl-sw em{font:600 var(--fs-label) var(--font-mono);font-style:normal;color:var(--ink-2);min-width:24px;text-align:right}
.dl-sw[aria-pressed="false"] b{color:var(--ink-3)}
.dl-lv{margin-top:6px}
.dl-br{margin-top:10px;display:grid;gap:8px}
.dl-br p{margin:0}
.dl-mt{margin-top:12px}
.dl-ch-res{scroll-margin-top:120px}
.goal.dl-over b{color:var(--c-oom)}
.dl-app .goal span:last-child{text-align:right}
.dl-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.dl-app .inline-ctl .seg-ctl button{white-space:nowrap}
.dl-asm{margin:6px 0 12px;padding-left:18px;color:var(--ink-2)}
.dl-asm li{margin-bottom:3px}
.dl-remlist{margin:0 0 10px;padding-left:18px}
.dl-remlist li{margin-bottom:8px}
.dl-rem{margin-left:2px}

/* ---------- settings ---------- */
.dl-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.dl-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.dl-grp .ctl>label{display:flex}
.dl-app .ctl output{white-space:nowrap}
.controls .dl-rules{margin:0}
.controls .dl-sw small{display:none}

/* ---------- connect ---------- */
.dl-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.dl-prod li{margin-bottom:6px}
.dl-prod code,.dl-app .refs code{word-break:break-word}

/* ---------- dock: a tiny bar of the pages left ---------- */
.dl-dk{position:relative;height:10px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.dl-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}

@media (max-width:760px){
  /* phones: the picture first, then the numbers (R7.3) */
  .dl-stage{display:flex;flex-direction:column}
  .dl-stage>.stage-head{order:1}
  .dl-stage>.dl-graph{order:2}
  .dl-stage>.metrics{order:3}
  .dl-stage>details.math{order:4}
  .dl-graph{padding:10px 10px 12px}
  .dl-phone:not(:empty){display:block}
  .dl-mrow{grid-template-columns:104px minmax(0,1fr) 64px;gap:6px}
}
@media (prefers-reduced-motion:reduce){.dl-mtrk i,.dl-sw i,.dl-sw i::after{transition:none}}

/* ---------- fixes after the review (b8v2): the challenge's zoomed strip; a math line inside a paragraph ---------- */
.dl-zf{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3}
.dl-gt{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round} /* a halo, so a curve never strikes through a reading */
.dl-zt{font-size:var(--fs-mark)}
span.dl-fx{display:block}

/* ---------- fixes after review codex-b9v3: the curve laid out for its own width, its axis titles in HTML (应修 4) ---------- */
.dl-cplot{min-width:0}
.dl-axy{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3;margin:0 0 2px}
.dl-axx{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3;text-align:center;margin-top:2px}

/* ---------- part 4's example: three pages, their whole-text hashes and MinHash signatures (应修 3) ---------- */
.dl-xbox{display:grid;gap:10px;min-width:0;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.dl-xbox .dl-cap{margin:0}
.dl-xpgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dl-xpg{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}   /* soft panels, no frame inside the stage (精装修 step 2) */
.dl-xpg.bad{border-color:var(--c-oom);box-shadow:inset 0 0 0 1px var(--c-oom)}
.dl-xh{display:flex;align-items:baseline;gap:6px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.3}
.dl-xk{font:700 var(--fs-cap) var(--font-mono);color:var(--ink)}
.dl-xt{margin:0;font-size:var(--fs-label);line-height:1.55;color:var(--ink)}
.dl-xti{font-weight:700}
/* a run of shaded words: one background, padding that takes room in the line (never a box-shadow, which a later word would paint
   over the glyphs before it; owner's review b8) */
.dl-xon{background:var(--line);border-radius:2px;padding:1px 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dl-xm{font-size:var(--fs-label);color:var(--ink-2);line-height:1.4;text-wrap:balance}   /* two lines split evenly (精装修 step 2: at 12 px “A’s” no longer sits alone) */
.dl-xhash{font:var(--fs-label) var(--font-code);color:var(--ink);background:var(--surface)}   /* a hash is code: one width per character, as wide as it was in IBM Plex Mono; its chip is var(--surface) inside the page's soft panel (精装修 step 2) */
.dl-xv{margin:2px 0 0;font-size:var(--fs-label);line-height:1.4;font-weight:600;color:var(--ink)}
.dl-xv.dl-xbad{color:var(--c-oom)}
.dl-xsig{display:grid;gap:6px;min-width:0}
.dl-xsig.off .dl-xgrid{opacity:.45}
.dl-xsh{font-size:var(--fs-label);color:var(--ink-2);line-height:1.4}
.dl-xgrid{display:grid;grid-template-columns:auto repeat(3,max-content);gap:3px 8px;align-items:center;justify-content:start}
.dl-xrow{display:contents}
.dl-xl{font:700 var(--fs-label) var(--font-mono);color:var(--ink);padding-right:2px}
.dl-xg{display:inline-flex;gap:2px;padding:2px;border:2px solid transparent;border-radius:3px}
.dl-xg.hit{border-color:var(--ink)}
.dl-xax .dl-xg{justify-content:center;padding-block:0;font-size:var(--fs-mark);color:var(--ink-3)}
.dl-xbox .dl-xc{display:inline-block;min-width:26px;padding:2px 0;text-align:center;font:var(--fs-label) var(--font-mono);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:2px;cursor:help}
.dl-xbox .dl-xc.same{background:var(--ink-2);border-color:var(--ink-2);color:var(--surface)}
.dl-xbox .dl-xc:hover,.dl-xbox .dl-xc:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.dl-xbox .dl-xc.same:hover,.dl-xbox .dl-xc.same:focus{background:var(--ink-2)}
.dl-xbox .dl-xc:not(.same):hover,.dl-xbox .dl-xc:not(.same):focus{background:var(--surface)}
.dl-sw-xw{background:var(--line);border:1px solid var(--ink-3)}
.dl-sw-xs{background:var(--ink-2)}
.dl-sw-xg{border:2px solid var(--ink);box-sizing:border-box}
.dl-xtip table{border-collapse:collapse;margin:4px 0;font-size:var(--fs-label)}
.dl-xtip th{text-align:left;font-weight:700;padding:1px 10px 1px 0}
.dl-xtip td{padding:1px 10px 1px 0;vertical-align:top}
.dl-xtip p{margin:4px 0 0}
.dl-xtip .dl-fx{margin:6px 0 2px;font-size:var(--fs-cap);overflow:visible}
@container (max-width:520px){
  .dl-xpgs{grid-template-columns:minmax(0,1fr);gap:8px}
  .dl-xgrid{gap:3px 4px}
  .dl-xg{gap:1px;padding:1px}
  .dl-xbox .dl-xc{min-width:20px;font-size:var(--fs-mark);padding:2px 0}
}

/* ---------- part 4 on a wide stage (polish round 2, 2026-10-15): at 1440 × 900 the example filled the stage and the curve sat
   300 px down inside it, so the card's “a dot under the curve counts as a duplicate” pointed at nothing in view (R7.12). Here the
   three pages run across the top; under them the signatures (left) and the curve (right) sit side by side, each with its own
   caption, and the curve's legend runs under both. Same pieces, same order, same animation; the curve is drawn shorter (--dl-ph,
   read by drawCurve). Phones (≤ 760 px) and narrower stages keep the stacked layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .dl-graph[data-v="dedup"]{grid-template-columns:min-content minmax(0,1fr);gap:8px 16px;padding-top:8px;padding-bottom:8px}
  /* the example spans both columns and lends its rows to its pieces: the caption and the pages full width, the signatures and
     their legend in the left column. The example's line (R7.13) now closes the left column: under the legend, out to the line
     that runs down beside the curve */
  .dl-graph[data-v="dedup"]>.dl-xbox{grid-column:1/-1;grid-row:1/5;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:8px 16px;padding-bottom:0;border-bottom:0}
  .dl-graph[data-v="dedup"]>.dl-xbox>.dl-cap{grid-column:1/-1;grid-row:1}
  .dl-graph[data-v="dedup"]>.dl-xbox>.dl-xpgs{grid-column:1/-1;grid-row:2}
  .dl-graph[data-v="dedup"]>.dl-xbox>.dl-xsig{grid-column:1;grid-row:3;align-self:start}
  .dl-graph[data-v="dedup"]>.dl-xbox>.dl-leg{grid-column:1;grid-row:4;align-self:stretch;margin:0 -16px 0 0;padding:0 16px 6px 0;border-bottom:1px solid var(--line-2)}
  /* the curve's box takes rows 3 to 5 across both columns: its caption and plot in the right column beside the signatures (a line
     between the two), its legend in row 5 under both. Its own box lies over the signatures, so it lets the pointer through to them */
  .dl-graph[data-v="dedup"]>.dl-cbox{grid-column:1/-1;grid-row:3/6;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:8px 16px;pointer-events:none}
  .dl-graph[data-v="dedup"]>.dl-cbox>*{pointer-events:auto}
  .dl-graph[data-v="dedup"]>.dl-cbox>.dl-cmain{grid-column:2;grid-row:1/3;align-self:stretch;border-left:1px solid var(--line-2);padding-left:15px}
  .dl-graph[data-v="dedup"]>.dl-cbox>.dl-leg{grid-column:1/-1;grid-row:3;margin-top:0}
  .dl-graph[data-v="dedup"] #dl-curve{--dl-ph:104}
  /* in English the signatures' legend takes four lines, so the left column is taller and the curve can be too, at no cost */
  html[lang="en"] .dl-graph[data-v="dedup"] #dl-curve{--dl-ph:122}
  /* and a little tighter, so the stage keeps 30 px to spare at 1440 × 900 in Chinese and fits in English: the pages' inner spacing,
     the signature rows (the groups' padding as on a narrow stage), the legends' line gaps. The words' line height stays (a shaded run
     must not cover the line above it) */
  .dl-graph[data-v="dedup"] .dl-xpg{gap:3px;padding-top:7px;padding-bottom:7px}
  .dl-graph[data-v="dedup"] .dl-xv{margin-top:0}
  .dl-graph[data-v="dedup"] .dl-xsh{line-height:1.3}
  .dl-graph[data-v="dedup"] .dl-xsig{gap:4px}
  .dl-graph[data-v="dedup"] .dl-xgrid{row-gap:2px}
  .dl-graph[data-v="dedup"] .dl-xg{padding:1px}
  .dl-graph[data-v="dedup"] .dl-xax .dl-xg{padding-block:0}
  .dl-graph[data-v="dedup"] .dl-leg{row-gap:2px}
}}

/* ---------- the challenge's result after Submit (owner's review b8, R1; as in train-capstone): the verdict, then your setting next to
   the cheapest one (shared settings written once, the differing ones as chips), the one change that helps most, and the settings
   that pass behind a closed disclosure; on the chart, the cheapest setting's curve once it is shown ---------- */
.dl-gap{margin:6px 0 8px}
.dl-sum{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.dl-sumcap{font-size:var(--fs-cap);font-weight:700;color:var(--ink);margin-bottom:2px}
.dl-same{margin:0 0 4px;color:var(--ink-2);line-height:1.45}
.dl-c3{list-style:none;margin:0;padding:0}
.dl-c3r{display:grid;gap:5px;padding:7px 0 8px;border-bottom:1px solid var(--line-2)}
.dl-c3h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.dl-c3t{font-size:var(--fs-cap);font-weight:700;color:var(--ink);margin-right:2px}
.dl-chip{font-size:var(--fs-label);line-height:1.45;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--ink-2);white-space:nowrap}
.dl-chip.on{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.dl-c3v{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dl-c3c{display:grid;gap:1px;min-width:0}
.dl-c3c small{font-size:var(--fs-mark);color:var(--ink-3);line-height:1.3}
.dl-c3c b{font-size:var(--fs-cap);font-weight:650;color:var(--ink)}
.dl-c3c.dl-over b{color:var(--c-oom)}
.dl-next{margin:9px 0 0;font-size:var(--fs-cap);line-height:1.5}
.dl-why{margin:7px 0 0;line-height:1.5;color:var(--ink-2)}
.dl-all{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.dl-all>summary{cursor:pointer;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:4px 0}
.dl-allb>p{margin:6px 0}
.dl-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-label);font-variant-numeric:tabular-nums}
.dl-tbl th{font-weight:650;font-size:var(--fs-label);color:var(--ink);text-align:right;padding:4px 4px;border-bottom:1px solid var(--line);vertical-align:bottom}
.dl-tbl td{text-align:right;padding:3px 4px;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-family:var(--font-mono)}
.dl-tbl th:first-child,.dl-tbl td:first-child{text-align:left;font-family:var(--font-ui,inherit)}
.dl-tbl tr.me td{font-weight:700;color:var(--ink);background:var(--surface-2)}
.dl-bestc{fill:none;stroke:var(--c-ok);stroke-width:1.8;stroke-dasharray:1.5 3;stroke-linecap:round}
.dl-sw-best{height:0!important;border-top:2.5px dotted var(--c-ok)}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 4 still ran 21 px past the stage in Chinese and 75 in
   English. The dedup layout's row gaps and its pages' inner spacing are 1–2 px smaller (the words' line height stays), and the metric
   cards take the kit's tight line heights (a card's change row stays reserved). In English the signatures' legend still takes four
   lines, so part 4 runs 54 px past 1536 × 730 (159 on main): fitting it needs another layout */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .dl-graph[data-v="dedup"]{row-gap:6px;padding-top:6px;padding-bottom:6px}
  .dl-graph[data-v="dedup"]>.dl-xbox,.dl-graph[data-v="dedup"]>.dl-cbox{row-gap:6px}
  .dl-graph[data-v="dedup"] .dl-xpg{gap:2px;padding-top:5px;padding-bottom:5px}
  .dl-metrics .metric .sub{line-height:1.25}
  .dl-metrics .metric .d{min-height:13px;line-height:1.1}
}}

/* ---------- DPO lab (prefix dpo-) ----------
   Answer roles are grayscale (R5.6: blue and amber mean weights and KV cache elsewhere):
   chosen = solid ink, rejected = hatched with an outline, not labeled = gray; the SFT model = dashed outline.
   Green and red appear only for goals (status chip, challenge). */
.dpo-app .stage-head>div:first-child{min-width:0}
.dpo-head{align-items:center}
.dpo-head .dpo-st-title{flex:1 1 auto}
.dpo-st-title{font-weight:680;font-size:var(--fs-stage);line-height:1.3}
.dpo-st-sub{font-size:var(--fs-label);color:var(--ink-2);margin-top:4px;line-height:1.45;overflow-wrap:anywhere;max-width:100%}
/* β with its tooltip: in the step-1 chip and the stage title */
.dpo-bt{cursor:help;white-space:nowrap;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;border-radius:2px}
.dpo-bt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dpo-transport{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.dpo-transport .btn[aria-pressed="true"]{background:var(--ink-2);border-color:var(--ink-2)}
.dpo-tnote{line-height:1.4}
.dpo-tnote:empty{display:none}
.dpo-prompt{margin:12px 0 0;font-size:var(--fs-cap);line-height:1.45;color:var(--ink-2);max-width:100%}
/* playback speed: a small segmented control next to Play (R3.9) */
.dpo-speed{display:inline-flex;align-items:center;gap:6px;flex:none;cursor:help}
.dpo-speed[hidden]{display:none}
.dpo-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.dpo-app .dpo-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);cursor:pointer}

/* role fills, shared by the answer bars, the mini result bar, the tile bars and the legend swatches */
.dpo-c-w .dpo-fill,.dpo-sg.dpo-c-w{background:var(--ink)}
.dpo-c-l .dpo-fill,.dpo-sg.dpo-c-l{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.6px,var(--surface) 1.6px 4.4px);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.dpo-c-o .dpo-fill,.dpo-sg.dpo-c-o{background:var(--ink-3)}
.sw.dpo-sw-w{background:var(--ink);border-color:var(--ink)}
.sw.dpo-sw-l{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.4px,var(--surface) 1.4px 3.6px);border:1.5px solid var(--ink-2)}
.sw.dpo-sw-o{background:var(--ink-3);border-color:var(--ink-3)}
.sw.dpo-sw-ref{background:transparent;border:1.5px dashed var(--ink)}
.dpo-app .legend-row>span{cursor:help}
.dpo-app .legend-row>span[data-jump]{cursor:pointer}

/* answer bars: filled = model now, dashed outline = SFT model */
.dpo-graph{padding:12px 14px 10px}
.dpo-bars{display:grid;gap:9px}
.dpo-row{display:grid;grid-template-columns:minmax(0,1fr) 128px;column-gap:10px;row-gap:3px;align-items:center;min-width:0;border-radius:4px;cursor:help}
.dpo-row>.dpo-rh{grid-column:1 / -1}
.dpo-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dpo-rh{display:flex;align-items:center;gap:7px;min-width:0;font-size:var(--fs-cap);line-height:1.3}
.dpo-let{flex:none;width:19px;height:19px;display:inline-grid;place-items:center;border-radius:3px;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.dpo-c-w .dpo-let{background:var(--ink);color:var(--surface);box-shadow:none}
.dpo-c-l .dpo-let{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.dpo-lab{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.dpo-role{flex:none;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.5;border:1px solid var(--line);border-radius:999px;padding:0 6px;color:var(--ink-2);white-space:nowrap;background:var(--surface)}
.dpo-c-w .dpo-role{color:var(--ink);border-color:var(--ink-3)}
.dpo-val{flex:none;font-size:var(--fs-label);white-space:nowrap;color:var(--ink)}
.dpo-track{position:relative;height:14px;background:var(--surface-2);border-radius:2px;margin-right:2px}
.dpo-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transition:width .14s ease-out}
.dpo-ghost{position:absolute;left:0;top:-3px;bottom:-3px;border:1.5px dashed var(--ink);border-radius:3px;pointer-events:none}
.dpo-foot{font-size:var(--fs-mark);color:var(--ink-3);line-height:1.3;min-height:1.3em;overflow-wrap:anywhere}
@container (max-width:470px){.dpo-row{grid-template-columns:minmax(0,1fr)}.dpo-row>*{grid-column:1 / -1}}
@container (max-width:430px){.dpo-rh{flex-wrap:wrap;row-gap:2px}.dpo-lab{flex-basis:calc(100% - 30px)}.dpo-role{margin-left:26px}.dpo-val{margin-left:auto}}

/* curve over training steps; the key draws each line style with the same classes */
.dpo-curve-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 14px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
.dpo-curve-title{font-size:var(--fs-cap);font-weight:650;line-height:1.35;flex:1 1 220px;min-width:0;cursor:help}
.dpo-curve-head .ctl{gap:3px;flex:0 1 auto;min-width:0}
.dpo-curve-head .ctl>.lbl{font-size:var(--fs-label)}
.dpo-curve-head .seg-ctl button{padding:5px 8px;font-size:var(--fs-label);white-space:nowrap}
.dpo-curve{display:block;width:100%;height:156px;margin-top:6px;overflow:visible}
.dpo-grid{stroke:var(--line-2);stroke-width:1}
.dpo-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.dpo-ref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.dpo-now{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3}
.dpo-ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dpo-l-w{stroke:var(--ink);stroke-width:2.6}
.dpo-l-l{stroke:var(--ink-2);stroke-width:2;stroke-dasharray:7 4;stroke-linecap:butt}
.dpo-l-o{stroke:var(--ink-3);stroke-width:1.5}
.dpo-l-n{stroke:var(--ink);stroke-width:2.2}
.dpo-ln.dpo-lg{stroke:var(--ink-2);stroke-width:2.4;stroke-dasharray:0.1 4.6;stroke-linecap:round}
.dpo-dot{stroke:var(--surface);stroke-width:1.5}
.dpo-d-w,.dpo-d-n{fill:var(--ink)}
.dpo-d-l{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.8}
.dpo-d-o{fill:var(--ink-3)}
.dpo-lbl{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.dpo-curve-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);margin-top:4px}
.dpo-curve-key>span{display:inline-flex;align-items:center;gap:6px}
.dpo-curve-key [data-tip]{cursor:help}
.dpo-ks{display:inline-block;flex:none;overflow:visible}

/* metrics: labels hold Greek letters, so no uppercase (π would turn into Π) */
.dpo-metrics .metric{cursor:help}
.dpo-metrics .metric .k{text-transform:none;letter-spacing:0}
.dpo-metrics .metric .sub{overflow-wrap:anywhere}
.dpo-metrics .metric .d{height:auto;min-height:15px;line-height:1.2}   /* 12 px since kit polish r2 (M1); a line about as tall as before (14.4 px, was 14.3 px) */

/* show the math (H2): short blocks, each a lead line, the formula and the reader's numbers in an aligned display */
.dpo-app .mathbody{font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.55}
.dpo-mh{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.02em;color:var(--ink-2);margin:2px 0 6px;line-height:1.6}
.dpo-mb{border-top:1px solid var(--line);padding:10px 0 8px}
.dpo-ml{margin:0 0 6px;color:var(--ink);font-size:var(--fs-cap);line-height:1.55}
.dpo-mn{margin:6px 0 0;color:var(--ink-2);font-size:var(--fs-cap);line-height:1.5}
/* the owner's review of 2026-10-09 (no Show the math row scrolls sideways): the list's one column is as wide as the box, never as its
   widest formula, and a long formula wraps before an operator (.dpo-fxw) */
.dpo-deriv{margin:6px 0 4px;padding-left:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.dpo-deriv li{padding-left:2px;min-width:0}
.dpo-dk{display:block;font-size:var(--fs-cap);font-weight:650;color:var(--ink-2)}
.dpo-de{display:block;font-size:var(--fs-cap);color:var(--ink-2);line-height:1.5}
.dpo-app .mathbody p{overflow-wrap:anywhere}

/* typeset formulas (H1): inline in a sentence, or on a line of their own with the name in words on the left */
.dpo-m{white-space:nowrap}
.dpo-m mtext,.dpo-fx mtext,.dpo-eq mtext{font-family:var(--font-ui)}
.dpo-fx{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:6px 0;padding-block:.15em;overflow-x:auto;max-width:100%}
.dpo-fx.dpo-fxw{column-gap:0;row-gap:.25em}
.dpo-fxr{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.25em}
.dpo-fxn{flex:none;font-size:var(--fs-cap);font-weight:650;color:var(--ink-2);min-width:5.5em}
.dpo-eq{display:grid;justify-content:start;align-items:baseline;column-gap:.35em;row-gap:.3em;margin:4px 0;padding-block:.2em;overflow-x:auto;max-width:100%;font-size:var(--fs-ui)}
.dpo-el{justify-self:end;white-space:nowrap}
.dpo-eo{justify-self:center}
.dpo-ec{justify-self:start;white-space:nowrap}
.dpo-pl{display:block;margin:.45em 0}
.dpo-pl:first-child{margin-top:0}

/* stage blocks (H5): a small label over the answers and over the picture of where the logits come from */
.dpo-blk-h{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);letter-spacing:.01em;margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.dpo-blk-h+.dpo-prompt{margin-top:4px}
.dpo-wire{margin-top:14px}
.dpo-wire[hidden]{display:none}
.dpo-wire>.dpo-blk-h{margin-top:0}
.dpo-wsrc{display:flex;justify-content:center;margin-top:8px}
.dpo-wsrc>span{font-size:var(--fs-label);padding:3px 10px;border:1.5px solid var(--ink);border-radius:4px;background:var(--surface);color:var(--ink);white-space:nowrap}
.dpo-wsvg{display:block;width:100%;height:24px}
.dpo-wsvg line{stroke:var(--ink-2);stroke-linecap:round}
.dpo-wcells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dpo-wsep{margin-top:8px}
.dpo-wc{border:1px solid transparent;border-radius:8px;padding:5px 4px;text-align:center;background:var(--surface-2);min-width:0}   /* soft panels, no frame inside the stage (精装修 step 2) */
.dpo-wt{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap}
.dpo-wx{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.dpo-wd{font-size:var(--fs-mark);color:var(--ink);margin-top:3px;min-height:1.3em;overflow-wrap:anywhere}
.dpo-wcap{margin:8px 0 0;font-size:var(--fs-cap);line-height:1.5;color:var(--ink-2)}

/* rail extras */
.dpo-tbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-4px 0 4px}
.dpo-live{margin:10px 0 0;padding:6px 9px;border-radius:4px;background:var(--surface-2);font-size:var(--fs-label);line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.dpo-live:empty{display:none}
/* scenario names hold β: no uppercase, or β would turn into Β */
#dpo-insight>.eyebrow{text-transform:none;letter-spacing:.01em}
.dpo-app .obs .mono.small{margin:3px 0;overflow-wrap:anywhere}
.dpo-app .goal+.progress{margin-bottom:8px}
.goal.dpo-over b{color:var(--c-oom)}
.progress.dpo-over i{background:var(--c-oom)}
.dpo-app .preset span{overflow-wrap:anywhere}
.dpo-app .step-b a,.dpo-app .obs a{text-underline-offset:2px}
.dpo-app .ctl-note code,.dpo-app .c-card code{overflow-wrap:anywhere}
.dpo-prod{margin:0 0 8px;padding-left:18px;display:grid;gap:6px;font-size:var(--fs-cap);line-height:1.5}
.dpo-simpl{margin-top:10px}

/* mini result bar: a stacked strip of the four probabilities, same fills as the bars */
.dpo-strip{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.dpo-strip .dpo-sg{display:block;height:100%;box-sizing:border-box}
.dpo-strip .dpo-sg+.dpo-sg{border-left:1px solid var(--surface)}
/* the mini result bar is one line: below 881 px it keeps only the main reading so “Back to the chart” fits */
@media (max-width:880px){.dpo-dk-mem{display:none}}
/* the status in the mini result bar is a sentence with a subject (R6.15); on phones it wraps to two short lines so the reading keeps its room */
@media (max-width:560px){#dock .status.dpo-dk-st{white-space:normal;max-width:12em;line-height:1.25;text-align:left;text-wrap:balance}}
@media (max-width:360px){#dock .status.dpo-dk-st{max-width:8.5em}}

/* home tile teaser */
.dpo-tz{display:grid;gap:5px}
.dpo-tz-row{display:grid;grid-template-columns:16px minmax(0,1fr) 44px;gap:8px;align-items:center}
.dpo-tz-l{font-size:var(--fs-mark);font-weight:700;color:var(--ink-2)}
.dpo-tz-t{position:relative;height:12px;background:var(--surface-2);border-radius:2px}
.dpo-tz-t .dpo-ghost{top:-2px;bottom:-2px}
.dpo-tz-v{font-size:var(--fs-label);text-align:right;color:var(--ink)}
.dpo-tz-out{white-space:nowrap}
.dpo-tz-cap{margin:2px 0 0;font-size:var(--fs-label);line-height:1.35}

/* narrow stages: the four transport buttons fit on one row */
@container (max-width:430px){.dpo-transport{gap:4px}.dpo-transport .btn{padding:6px 7px;font-size:var(--fs-label)}}
@media (prefers-reduced-motion:reduce){.dpo-fill{transition:none}}

/* ---------- 知识梳理: a formula on its own line; its pieces stay close and wrap only between them, so nothing scrolls sideways ---------- */
.primer .dpo-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;row-gap:6px;margin:2px 0 14px;padding-left:1em;font-size:1.06em;line-height:1.3;min-width:0}
.primer .dpo-prfx>span{min-width:0;max-width:100%}
.primer .dpo-prfx math{padding-block:2px}
/* two formulas side by side, under each other in a narrow column */
.primer .dpo-prfx.dpo-prfx2{column-gap:2.2em}
.primer .dpo-nw{white-space:nowrap}
@media (max-width:760px){.primer .dpo-prfx{padding-left:.4em}.primer .dpo-prfx.dpo-prfx2{column-gap:1.6em}}
@media (max-width:380px){.primer .dpo-prfx{font-size:1em}}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4, R7.12): at 1440 × 900 the stage scrolled inside itself at every
   part (40 px at parts 1–2, 53 at 3–6 and 8, 182 at part 7, where “Where the logits come from” joins the answers), and the curve, the
   stage's main figure, started 722 px down, under the answers. On a stage at least 736 px wide (windows from about 1200 px) the curve
   sits beside the answers, at the top of the chart: the answers (and part 7's “Where the logits come from” under them) on the left, the
   curve with its title, switch and key on the right, a line between them (R7.13). Each answer's header takes two lines there, as on a
   narrow stage (its name, then its role and value), the curve's switch keeps its label on its row, and a few gaps and the metric cards'
   line heights are tighter (CONTRACT §19). Same blocks in the same order (left column, then right), same texts and animation; dpo.js
   draws the curve again when the stage changes width. The tighter gaps and metric lines apply on every desktop stage (a narrower one,
   at 900 × 900, keeps the blocks stacked and still scrolls inside: see the review r5-fit-inference-a); phones (≤ 760 px) keep the layout
   above. ---------- */
@media (min-width:761px){
  .dpo-transport{margin-top:8px}
  .dpo-blk-h{margin-top:10px;padding-top:8px}
  .dpo-app .dpo-stage>.legend-row{margin-top:8px}
  .dpo-graph{margin-top:10px;padding:10px 14px 8px}
  .dpo-bars{gap:6px}
  .dpo-wire{margin-top:10px}
  .dpo-wcells.dpo-wsep,.dpo-wcap{margin-top:6px}
  .dpo-metrics{margin-top:10px}
  .dpo-metrics .metric{padding-block:7px}
  .dpo-metrics .metric .k,.dpo-metrics .metric .sub{line-height:1.2}
  .dpo-metrics .metric .v{line-height:1.25}
  .dpo-stage>details.math{margin-top:10px}
}
@media (min-width:761px){@container (min-width:736px){
  .dpo-graph{display:flow-root;position:relative;--dpo-hold:1}
  .dpo-graph::before{content:"";position:absolute;left:50%;top:10px;bottom:8px;border-left:1px solid var(--line-2);pointer-events:none}
  .dpo-graph>.dpo-bars,.dpo-graph>.dpo-wire{float:left;clear:left;width:calc(50% - 12px)}
  .dpo-graph>.dpo-curve-head,.dpo-graph>.dpo-curve-key{margin-left:calc(50% + 12px)}
  .dpo-graph>.dpo-curve{margin-left:calc(50% + 12px);width:calc(50% - 12px)}
  .dpo-rh{flex-wrap:wrap;row-gap:2px}
  .dpo-lab{flex-basis:calc(100% - 30px)}
  .dpo-role{margin-left:26px}
  .dpo-val{margin-left:auto}
  .dpo-curve-head{margin-top:0;padding-top:0;border-top:0;gap:6px 14px}
  .dpo-curve-head .ctl{display:flex;align-items:center;gap:8px}
  /* R7.9: the curve's column sets the chart's height, so switching the view does not move the stage: the title keeps two lines in English
     (the KL view's title needs two there, the others one) and the key two lines (four answers and the current step need two; KL, the
     loss and the push weight one; where β changes, more: below) */
  .dpo-curve-title:lang(en){min-height:2.7em}
  .dpo-curve-key{min-height:38px;align-content:flex-start}
  /* part 6, Settings and the challenge (dpo.js sets .dpo-keyhold), where β changes: the probabilities view's key with the previous setting
     (four answers, “A with the previous setting (β = 0.1)”, the current step) takes four lines in English, so they are kept from the start */
  .dpo-keyhold .dpo-curve-key:lang(en){min-height:80px}
  /* the picture “Where the logits come from” in the left column, a little tighter (it is 368 px wide here): the shared weight's box,
     the lines under it (drawn to the svg's height) and the gaps; each logit keeps two lines (“logit +2.290” wraps at this width, and
     before training the cells are empty), so playing from step 0 does not move the stage. In part 7, Scenarios and Settings dpo.js
     keeps the room of the picture's shared-weight form (--dpo-hold above), unseen while the picture is off (R7.9) */
  .dpo-graph>.dpo-wire{margin-top:8px}
  .dpo-wire>.dpo-blk-h{padding-top:6px}
  .dpo-wsrc{margin-top:4px}
  .dpo-wsrc>span{padding-block:1px}
  .dpo-wsvg{height:14px}
  .dpo-wcells.dpo-wsep,.dpo-wcap{margin-top:4px}
  .dpo-wd{line-height:1.3;min-height:2.6em}
  .dpo-wcap{line-height:1.4}
  .dpo-wire.dpo-held{visibility:hidden}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.dpo-st-title,#dpo-metrics .sub,.dpo-runl{font-variant-numeric:tabular-nums}

/* Embeddings lab */
.emb-app{--emb-t:#138F82;--emb-l:#C2408F;--emb-v:#7D8B12;--emb-a:#1E9BD7;--emb-e:#8B5E34;--emb-w:#5F6B7A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .emb-app{--emb-t:#3CC3B3;--emb-l:#E77BBE;--emb-v:#B5C640;--emb-a:#5EC3F0;--emb-e:#C49563;--emb-w:#9AA6B5}}
:root[data-theme="dark"] .emb-app{--emb-t:#3CC3B3;--emb-l:#E77BBE;--emb-v:#B5C640;--emb-a:#5EC3F0;--emb-e:#C49563;--emb-w:#9AA6B5}
.emb-app [hidden]{display:none!important}
.emb-c-t{--tc:var(--emb-t)}.emb-c-l{--tc:var(--emb-l)}.emb-c-v{--tc:var(--emb-v)}.emb-c-a{--tc:var(--emb-a)}.emb-c-e{--tc:var(--emb-e)}.emb-c-w{--tc:var(--emb-w)}
.emb-stage{container-type:inline-size}
.emb-head{align-items:flex-start;gap:10px;flex-wrap:nowrap}
.emb-st-title{font-weight:650;font-size:var(--fs-stage);line-height:1.35;min-width:0;flex:1 1 auto}
.emb-head .stage-actions{flex:none}
@media (max-width:760px){.emb-st-title{min-height:2.7em}.emb-cfg{display:none}}   /* two lines kept on a phone, and while a run plays only its step count, so the title never pushes the stage down (P10) */
.emb-transport{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:6px 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.emb-transport .seg-ctl,.emb-transport .inline-ctl,.emb-transport .ctl{margin:0}
.emb-transport .btn.sm,.emb-transport .seg-ctl{height:32px;box-sizing:border-box}
.emb-transport .btn.sm{padding-top:0;padding-bottom:0;line-height:1.2}
.emb-transport [data-act="play"]{min-width:6.2em}   /* Train and Pause take the same width, so the controls beside it do not shift when a run starts (R7.9) */
.emb-transport .seg-ctl button{padding:0 10px;font-size:var(--fs-cap);line-height:1.2}
.emb-transport .inline-ctl{flex:1 1 180px;min-width:160px;border:0;padding:0;background:none}
.emb-pan{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;min-width:0}
/* the panels of a part sit in one grid, in the part's order (R7.12): a pair side by side on a wide stage; part 4 puts the table on the
   left and the question's rows over the curve on the right */
.emb-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;align-items:start}
.emb-body>*{grid-column:1 / -1}
.emb-body>.half{grid-column:auto}
@container (max-width:600px){.emb-body>.half{grid-column:1 / -1}}
@container (min-width:640px){
  .emb-body.l3{grid-template-areas:"heat rows" "heat chart" "met met"}
  .emb-body.l3>#emb-pan-heat{grid-area:heat}
  .emb-body.l3>#emb-pan-rows{grid-area:rows}
  .emb-body.l3>#emb-pan-chart{grid-area:chart}
  .emb-body.l3>.emb-metrics{grid-area:met}}
.emb-pan.first{border-top:0;margin-top:0;padding-top:4px}
.emb-frozen .emb-heat,.emb-frozen .emb-rows,.emb-frozen .emb-rres{opacity:.45;transition:opacity .2s}
.emb-pt{font-weight:600;font-size:var(--fs-cap);line-height:1.35;margin-bottom:4px;min-width:0}
.emb-leg{margin:2px 0 6px;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-label)}
.emb-leg .lg{display:inline-flex;align-items:center;gap:5px}
.sw.emb-sw{background:var(--tc);border-radius:50%;width:10px;height:10px}
.sw.emb-sw-p{background:var(--ink-2);border-radius:50%;width:10px;height:10px}
.sw.emb-sw-q{background:var(--surface);border:1.5px solid var(--ink-2);border-radius:50%;width:8px;height:8px}
.sw.emb-sw-me{background:transparent;border:2.5px solid var(--ink);border-radius:50%;width:10px;height:10px}
.sw.emb-sw-ok{background:transparent;border:2px solid var(--c-ok);border-radius:50%;width:10px;height:10px}
.sw.emb-sw-bad{background:transparent;border:2px solid var(--c-oom);border-radius:50%;width:10px;height:10px}
.emb-map{display:block;width:100%;max-width:420px;height:auto}
/* the map alone (part 2): the search list beside it on a wide stage */
@container (min-width:640px){
  #emb-pan-map:not(.half){display:grid;grid-template-columns:minmax(0,376px) minmax(0,1fr);gap:0 18px;align-items:start}   /* 376 px keeps the part's metrics on a 1440 × 900 screen too (P2) */
  #emb-pan-map:not(.half)>.emb-pt{grid-column:1 / -1}
  #emb-pan-map:not(.half)>.emb-side{margin-top:0}}
.emb-note{margin:2px 0 4px}
.emb-legs .legend-row{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:3px 8px;margin:2px 0}
.emb-lgk{font-weight:600;color:var(--ink)}
.emb-lgi{display:flex;flex-wrap:wrap;gap:3px 12px;min-width:0}
.emb-rkl{stroke:var(--ink-2);stroke-width:1}
.emb-frame{fill:none;stroke:var(--line);stroke-width:1}
.emb-pl{stroke:var(--tc);stroke-width:1;opacity:.45}
.emb-tl{stroke:var(--ink);stroke-width:1.3;stroke-dasharray:4 3}
.emb-pd{fill:var(--tc);stroke:var(--surface);stroke-width:1}
.emb-qd{fill:var(--surface);stroke:var(--tc);stroke-width:1.6}
.emb-me{fill:none;stroke:var(--ink);stroke-width:2.6}
.emb-own{fill:none;stroke-width:2.4}
.emb-own.ok{stroke:var(--c-ok)}.emb-own.bad{stroke:var(--c-oom)}
.emb-rk{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.emb-side{min-width:0;font-size:var(--fs-cap);margin-top:4px}
.emb-ql{display:block;font-size:var(--fs-label);color:var(--ink-2);margin-bottom:4px}
.emb-qsel{width:100%;max-width:100%;font:inherit;font-size:var(--fs-cap);padding:5px 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink)}
.emb-top{margin:8px 0 4px;padding-left:20px}
.emb-top li{display:list-item;margin:3px 0}
.emb-top li span:first-child{margin-right:6px}
.emb-top li .mono{color:var(--ink-2);font-size:var(--fs-label)}
.emb-top li.emb-hit span:first-child{font-weight:650}
.emb-miss{margin:4px 0 0}
.emb-miss.ok{color:var(--c-ok)}.emb-miss.bad{color:var(--c-oom)}
.emb-heat{display:block;max-width:100%;height:auto;margin:4px 0}   /* drawn at its own pixel size (R7.14) */
.emb-capon .emb-ht{min-height:2.7em}
.emb-cap{margin:2px 0 4px}
.emb-capon .emb-cap{min-height:4.65em}   /* three lines, its room kept while a run plays (R7.9): an English row caption takes three lines on a phone */
.emb-rowmk{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 2}
.emb-ax.mk{font-weight:700;fill:var(--ink)}
.emb-ar{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.emb-ar.halo{stroke:var(--surface);stroke-width:4.2}
.emb-ar.up{stroke:var(--c-ok)}
.emb-ar.dn{stroke:var(--ink)}
.emb-arw{display:inline-flex;gap:1px;font-weight:700;font-size:var(--fs-cap);line-height:1}
.emb-arw .up{color:var(--c-ok)}.emb-arw .dn{color:var(--ink)}
.emb-cell{fill:var(--ink);stroke:none}
.emb-cell.dg{stroke:var(--ink);stroke-width:2}
.emb-cv{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.emb-cv.inv{fill:var(--surface)}
/* light cells on a dark page: the number turns dark a little earlier (dk), where the two colours read equally well */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .emb-cv.dk{fill:var(--surface)}}
:root[data-theme="dark"] .emb-cv.dk{fill:var(--surface)}
.emb-pbt{fill:var(--sunken);stroke:var(--line-2);stroke-width:.6}
.emb-pb{fill:var(--ink-2)}
.emb-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.sw.emb-sw-cell{background:linear-gradient(90deg,var(--sunken),var(--ink))}
.sw.emb-sw-dg{background:transparent;border:2px solid var(--ink)}
.sw.emb-sw-pb{background:var(--ink-2)}
.emb-chead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px}
.emb-chead .seg-ctl{margin:0}
.emb-chart{display:block;width:100%;height:auto;overflow:visible}   /* its viewBox is its own width in pixels: text stays 11 px (P21) */
.emb-cviews{display:flex;flex-wrap:wrap;gap:6px 12px}
.emb-cviews .ctl{display:flex;align-items:center;gap:6px}
.emb-cviews .seg-ctl button{padding-top:3px;padding-bottom:3px}
.emb-gll{fill:none;stroke:var(--ink-3);stroke-width:.8}
.emb-gld{fill:var(--ink-3)}
.emb-gld.me{fill:var(--ink)}
.emb-glb{fill:var(--surface);fill-opacity:.94}   /* the label of a line that ends inside the plot (N7) */
.emb-grid{stroke:var(--line-2);stroke-width:1}
.emb-line{fill:none;stroke:var(--ink);stroke-width:2.4}
.emb-r5{fill:none;stroke:var(--ink-2);stroke-width:1.3;stroke-dasharray:5 3}
.emb-chance{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:1 3}
.emb-ghost{fill:none;stroke:var(--ink-3);stroke-width:1.3}
.emb-gl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2);paint-order:stroke;stroke:var(--surface);stroke-width:3px}   /* the halo keeps a label legible where another line crosses it (P12) */
.emb-head-l{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.emb-dot{fill:var(--ink)}
.emb-cl{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.sw.emb-sw-line{background:transparent;border-top:2.4px solid var(--ink);height:0;align-self:center}
.sw.emb-sw-r5{background:transparent;border-top:1.5px dashed var(--ink-2);height:0;align-self:center}
.sw.emb-sw-ch{background:transparent;border-top:1.5px dotted var(--ink-3);height:0;align-self:center}
.sw.emb-sw-gh{background:transparent;border-top:1.3px solid var(--ink-3);height:0;align-self:center}
.sw.emb-sw-head{background:transparent;border-left:1px dashed var(--ink-3);width:0;height:10px}
.metrics.emb-metrics{margin-top:10px;grid-template-columns:repeat(var(--emb-mn,4),minmax(0,1fr))}
@container (max-width:560px){.metrics.emb-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the mission question's rows of the table (parts 4 and 8) */
.emb-rsub{margin:0 0 2px}
.emb-rows{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:3px}
.emb-rows li{display:grid;grid-template-columns:12px minmax(3.2em,auto) minmax(60px,1fr) 3.4em;align-items:center;gap:6px;font-size:var(--fs-cap)}
.emb-rm{visibility:hidden;color:var(--ink);font-size:var(--fs-mark);line-height:1}
.emb-rows li.hit .emb-rm{visibility:visible}
.emb-rows li.hit .emb-rt{font-weight:700}
.emb-rt{white-space:nowrap}
.emb-rb{position:relative;height:12px;background:var(--sunken);border-radius:3px}
.emb-rb i.z{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--ink-3)}
.emb-rb i.v{position:absolute;top:2px;bottom:2px;background:var(--ink-2);border-radius:2px}
.emb-rb i.v.neg{background:var(--ink-3)}
.emb-rv{text-align:right;font-size:var(--fs-label)}
.emb-rres{margin:4px 0 0}
.emb-rres.ok{color:var(--c-ok)}.emb-rres.bad{color:var(--c-oom)}
/* part 7: the two sentences' tokens and their average vectors */
.emb-trap{font-size:var(--fs-cap)}
.emb-ts{margin:6px 0 10px}
.emb-chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.emb-chip{display:inline-block;padding:1px 6px;border-radius:4px;border:1px solid var(--line-2);font-size:var(--fs-cap);line-height:1.5;background:var(--surface);color:var(--ink)}
.emb-chip.both{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.emb-chip.only{background:var(--sunken)}
.emb-chip.skip{text-decoration:line-through;color:var(--ink-3);border-style:dashed}
.emb-vrow{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap}
.emb-vec{display:block;max-width:100%;height:auto}
.emb-vz{stroke:var(--ink-3);stroke-width:1}
.emb-vb{fill:var(--ink-2)}
.emb-tres{margin:6px 0;font-size:var(--fs-ui)}
/* phones: a pick in the card links back up to the picture it changed (P20) */
.emb-see{display:none;margin:4px 0 0}
@media (max-width:760px){.emb-see{display:block}}
.emb-pair{display:grid;gap:10px;font-size:var(--fs-ui)}
.emb-pair p{margin:2px 0}
.emb-pq,.emb-pp,.emb-kw{border:1px solid transparent;border-radius:8px;padding:8px 10px;background:var(--surface-2)}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.emb-lab{display:block;font-size:var(--fs-label);color:var(--ink-2);font-weight:600}
.emb-bad{color:var(--c-oom)}
.emb-kw ol{margin:4px 0;padding-left:20px}
.emb-math-line{overflow-x:auto;padding-block:.3em;margin:4px 0}
.emb-mb{border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
.emb-mb:first-child{border-top:0;margin-top:0}
.emb-mb-lead{margin:0 0 2px;font-size:var(--fs-cap)}
.emb-ib{margin:8px 0}
.emb-ul{margin:4px 0;padding-left:18px}
.emb-prod li{margin-bottom:6px}
.emb-dkw{display:flex;align-items:center;gap:6px;min-width:0}
.emb-dkl{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap}
.emb-dk{flex:1 1 auto;height:8px;border-radius:4px;background:var(--sunken);overflow:hidden;min-width:40px}
.emb-dk i{display:block;height:100%;background:var(--ink-2)}
.emb-ch-res .cmp{margin-top:10px}
#emb-c-view .seg-ctl button{white-space:nowrap}
.eyebrow.emb-keep{text-transform:none}   /* scenario names hold τ, which must not turn into a capital Τ */
/* 知识梳理 (2026-10-12): its formula blocks */
.primer .emb-prfx{margin:2px 0 14px;font-size:1.05em}
/* ---------- polish r5 (B4, R7.12): part 4 fits a 1440 × 900 screen in English too. Its right column stacked the question's nine rows
   (339 px with their title, note and result) over the recall curve (299 px), 151 px taller than the table beside them, and the run's
   controls took two lines (69 px), so the English stage scrolled 134 px inside itself. On a stage at least 736 px wide the run's
   controls keep their labels beside them on one line (the step count has a fixed width, so the slider does not move while a run plays,
   R7.9); in part 4 the rows are tighter and the curve is drawn 118 px high instead of 160 (embeddings.js reads --emb-chart-h); the metric
   cards take the tighter value and change lines of CONTRACT §19; a few gaps are tighter. Same pieces in the same places; phones (≤ 760 px)
   and narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .emb-transport{padding-bottom:8px}
  .emb-transport .ctl,.emb-transport .inline-ctl{display:flex;align-items:center;gap:8px}
  .emb-transport .ctl>.lbl,.emb-transport .inline-ctl>label{flex:none}
  .emb-transport .inline-ctl>label{width:5.6em}
  .emb-body.l3{--emb-chart-h:118}
  .emb-body.l3 .emb-rows{gap:1px;margin:4px 0 2px}
  .emb-body.l3 .emb-rows li{line-height:17px}
  .emb-body.l3 .emb-rres{margin-top:2px}
  .emb-body.l3>#emb-pan-chart{margin-top:6px;padding-top:6px}
  .emb-body.l3 .emb-chead{gap:4px 10px}
  .emb-body.l3 .emb-chead>.emb-pt{margin-bottom:2px}
  .emb-body.l3 #emb-c-leg{margin:2px 0;row-gap:2px}
  .emb-body #emb-h-leg{margin-bottom:2px}   /* the table's legend ends the taller column in parts 4-6 in Chinese: 2 px under it instead of 6, so those parts fit a 1280 × 800 screen too */
  .metrics.emb-metrics{margin-top:8px}
  .emb-metrics .metric .v{line-height:1.25}
  .emb-metrics .metric .d{min-height:13px;line-height:1.1}
  .emb-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.emb-st-title,#emb-h-title,#emb-m-title,.emb-miss{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730), in English, part 4 still ran 51 px past the stage. The
   recall curve is drawn 100 px high instead of 118 (embeddings.js reads --emb-chart-h; it is drawn for its height, so its text keeps its
   size), and the gaps under the run's controls, above the curve, above the metric cards and above Show the math are 2 px smaller. In
   English the question's rows are 16 px apart instead of 17, the curve's heading and legend sit 2 px closer, and the gaps under the
   controls and above Show the math are 2 px smaller again (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .emb-transport{padding-bottom:6px}
  .emb-body.l3{--emb-chart-h:100}
  .emb-body.l3>#emb-pan-chart{margin-top:4px;padding-top:4px}
  .metrics.emb-metrics{margin-top:6px}
  .emb-stage>details.math{margin-top:6px;padding-top:6px}
  html[lang="en"] .emb-transport{padding-bottom:4px}
  html[lang="en"] .emb-body.l3 .emb-rows li{line-height:16px}
  html[lang="en"] .emb-body.l3 .emb-chead{gap:2px 10px}
  html[lang="en"] .emb-body.l3 #emb-c-leg{margin:0}
  html[lang="en"] .emb-stage>details.math{padding-top:4px}
}}
/* refit step 2 (2026-10-24): at 700 px tall or less (1366 × 650) part 8 still ran 13 px past the stage in English. The space above
   each panel is 4 px, and in English the space under the player and above the math is smaller (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){@container (min-width:736px){
  .emb-pan{margin-top:4px;padding-top:4px}
  html[lang="en"] .emb-transport{padding-bottom:2px}
  html[lang="en"] .emb-stage>details.math{margin-top:4px}
}}

/* eval-capstone: a forest plot, one row per category (the plan on the left, the difference with its 95% interval in the middle,
   the verdict on the right), a total row on top, the true difference as a hollow diamond. Colours (R5.6): grayscale; red for a
   category that got worse (the loss caught) and for a guardrail alarm, and for the word “wrong”; green only for the challenge's goal.
   Under a judged row: the judge's lean as an arrow from the diamond (part 4), or the bias people measured, taken off the judge's own
   result (part 5); part 3 keeps the 1,000-item intervals as dashed boxes. */
.ecap-stage .stage-head{align-items:center}
.ecap-graph{padding:12px 14px 14px;display:grid;gap:10px;min-width:0}
.ecap-phone:empty{display:none}
@media (min-width:761px){.ecap-phone{display:none}}
.ecap-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.4;margin:0}
.ecap-leg span{display:inline-flex;align-items:center;gap:6px}
.ecap-sw{display:inline-block;position:relative;width:22px;height:10px;flex:none}
.ecap-sw.pt::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--ink-2)}
.ecap-sw.pt::after{content:"";position:absolute;left:7px;top:1px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.ecap-sw.red::before{content:"";position:absolute;left:0;right:0;top:3px;height:4px;border-radius:2px;background:var(--c-oom)}
.ecap-sw.mg{width:0;height:14px;border-left:2px dashed var(--ink-3);margin:0 8px}
.ecap-sw.tru{width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--ink);background:var(--surface);margin:0 4px}
.ecap-sw.gh{height:10px;border:1px dashed var(--ink-2);border-radius:2px;box-sizing:border-box}
/* the swatches of the line under writing's row: the same marks as on the track */
.ecap-sw.bs::before,.ecap-sw.bp::before,.ecap-sw.cor::before{content:"";position:absolute;left:0;right:0;top:3px;height:3px;border-radius:1px}
.ecap-sw.bs::before{background:var(--ink)}
.ecap-sw.bp::before{background:repeating-linear-gradient(90deg,var(--ink-2) 0 4px,transparent 4px 7px)}
.ecap-sw.cor::before{background:var(--ink-2)}
.ecap-sw.bx::before{content:"";position:absolute;left:0;right:0;top:3px;height:0;border-top:2px dotted var(--ink-3)}
.ecap-sw.rw{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink-2);background:var(--surface);box-sizing:border-box;margin:0 6px}
.ecap-wr,.ecap-vd em{font-style:normal;color:var(--c-oom);font-weight:650}

/* ---------- the forest plot ---------- */
.ecap-fp{display:grid;gap:0;min-width:0}
.ecap-row{display:grid;grid-template-columns:minmax(112px,25%) minmax(0,1fr) minmax(84px,17%);align-items:center;column-gap:10px;padding:7px 0;border-top:1px solid var(--line);min-width:0}
.ecap-row:first-child{border-top:0}
.ecap-row.tot{padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.ecap-row.tot+.ecap-row{border-top:0}
.ecap-rn{min-width:0;display:grid;gap:1px;line-height:1.3}
.ecap-rn b{font-size:var(--fs-cap);font-weight:650;color:var(--ink)}
/* a plan's line breaks after its commas, never inside a word such as 校正 (P19) */
.ecap-rn span{font-size:var(--fs-label);color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
.ecap-tr{position:relative;height:26px;min-width:0}
.ecap-row.has-b .ecap-tr{height:34px}
.ecap-tr>i{position:absolute;display:block}
.ecap-zero{top:-7px;bottom:-7px;width:0;border-left:1.5px solid var(--ink-3);transform:translateX(-.75px)}
.ecap-mg{top:-7px;bottom:-7px;width:0;border-left:1.5px dashed var(--ink-3);transform:translateX(-.75px)}
.ecap-bar{top:11px;height:4px;border-radius:2px;background:var(--ink-2)}
/* the interval's ends, so a short interval still shows past its dot */
.ecap-bar::before,.ecap-bar::after{content:"";position:absolute;top:-3px;width:1.5px;height:10px;background:inherit}
.ecap-bar::before{left:0}
.ecap-bar::after{right:0}
.ecap-bar.red{background:var(--c-oom)}
.ecap-pt{top:8px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.ecap-pt.red{background:var(--c-oom)}
.ecap-tru{top:6px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);border:1.5px solid var(--ink);background:transparent;box-sizing:border-box;z-index:1}
.ecap-cut{top:8px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
.ecap-cut.l{left:-2px;border-right:7px solid var(--ink-2)}
.ecap-cut.r{right:-2px;border-left:7px solid var(--ink-2)}
/* part 3: the interval at 1,000 items each, a dashed box behind the bar (P7) */
.ecap-ghost{top:6px;height:14px;border:1px dashed var(--ink-2);border-radius:3px;box-sizing:border-box;opacity:.85}
/* the judge's lean: one lane under the bar, from the diamond to the judge's result (P11) */
.ecap-bs{top:27px;height:3px;border-radius:1px}
.ecap-bs.s{background:var(--ink)}
.ecap-bs.p{background:repeating-linear-gradient(90deg,var(--ink-2) 0 4px,transparent 4px 7px)}
.ecap-bs.x{height:0;border-top:2px dotted var(--ink-3)}
.ecap-bs.cor{background:var(--ink-2)}
.ecap-ah{top:24px;width:0;height:0;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.ecap-ah.r{margin-left:-7px;border-left:7px solid var(--ink)}
.ecap-ah.l{border-right:7px solid var(--ink-2)}
/* part 5: the judge's own result, hollow, and its interval dashed (P15), on a lane of its own above the corrected result, so a corrected
   interval that reaches the judge's point does not cover it (N13): judge's own result, corrected result, the bias taken off */
.ecap-rawp{top:8px;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:1.5px solid var(--ink-2);background:var(--surface);box-sizing:border-box}
.ecap-rawb{top:12px;height:0;border-top:2px dashed var(--ink-3)}
.ecap-row.has-r .ecap-tr{height:42px}
.ecap-row.has-r .ecap-rawp{top:0}
.ecap-row.has-r .ecap-rawb{top:4px}
.ecap-row.has-r .ecap-bar{top:19px}
.ecap-row.has-r .ecap-pt{top:16px}
.ecap-row.has-r .ecap-tru{top:14px}
.ecap-row.has-r .ecap-cut{top:16px}
.ecap-row.has-r .ecap-bs{top:35px}
.ecap-row.has-r .ecap-ah{top:32px}
.ecap-ann{grid-column:2/4;display:flex;flex-wrap:wrap;gap:2px 14px;font-size:var(--fs-label);line-height:1.35;color:var(--ink-2);padding-top:2px;min-width:0}
.ecap-ann span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.ecap-row.wrong .ecap-rn b{color:var(--c-oom)}
.ecap-vd{font-size:var(--fs-cap);font-weight:600;color:var(--ink);line-height:1.3;min-width:0;display:grid}
.ecap-vd.bad{color:var(--c-oom)}
.ecap-vd small{font-weight:400;font-size:var(--fs-mark);color:var(--ink-2);font-variant-numeric:tabular-nums}
.ecap-row.ecap-axis{border-top:0;padding:2px 0 0}
.ecap-axis .ecap-tr{height:16px}
.ecap-axis .ecap-tr span{position:absolute;top:0;transform:translateX(-50%);font-size:var(--fs-mark);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ecap-axis .ecap-tr span:first-child{transform:none}
.ecap-axis .ecap-tr span:last-child{transform:translateX(-100%)}
.ecap-axl{font-size:var(--fs-label);color:var(--ink-2);text-align:center;padding-left:calc(25% + 10px);padding-right:calc(17% + 10px);line-height:1.35}

/* the build-up, about 1 s on one clock (P11, P15): the lean grows from the diamond, preference by preference, then the judge's result
   appears at its tip; in calibration the bias is taken off the judge's own result, leftward, then the corrected result appears.
   Fill backwards only: once played, nothing is left running */
@keyframes ecap-grow-r{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ecap-grow-l{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ecap-in{from{opacity:0}to{opacity:1}}
.ecap-anim.bias .ecap-bs.s{animation:ecap-grow-r .4s ease-out backwards}
.ecap-anim.bias .ecap-bs.p,.ecap-anim.bias .ecap-bs.x{animation:ecap-grow-r .4s ease-out .4s backwards}
.ecap-anim.bias .ecap-ann .a1{animation:ecap-in .3s ease-out backwards}
.ecap-anim.bias .ecap-ann .a2{animation:ecap-in .3s ease-out .4s backwards}
.ecap-anim.bias .ecap-ah,.ecap-anim.bias .ecap-m,.ecap-anim.bias .ecap-vd{animation:ecap-in .2s ease-out .8s backwards}
.ecap-anim.cal .ecap-bs.cor{animation:ecap-grow-l .6s ease-in-out .1s backwards}
.ecap-anim.cal .ecap-ann .a2{animation:ecap-in .3s ease-out .1s backwards}
.ecap-anim.cal .ecap-ah,.ecap-anim.cal .ecap-m,.ecap-anim.cal .ecap-vd{animation:ecap-in .25s ease-out .7s backwards}
/* N10: the badge and the verdict card show the new result when writing's row does, on the same clock */
.ecap-lb{animation:ecap-in .2s ease-out .8s backwards}
.ecap-lc{animation:ecap-in .25s ease-out .7s backwards}
/* N11: on a phone the build-up waits, at its start, while the page brings the stage up */
.ecap-hold .ecap-anim *,.ecap-hold .ecap-lb,.ecap-hold .ecap-lc{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ecap-anim,.ecap-anim *,.ecap-lb,.ecap-lc{animation:none!important}}

/* row tooltips: the fields one per line, names and values in two columns (P20) */
.tip .ecap-tl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 10px;text-align:left;margin-top:4px}
.tip .ecap-tl>div{display:contents}
.tip .ecap-tl span{opacity:.75}
.tip .ecap-tl b{font-weight:600}

/* the verdict card says a short phrase (“No verdict yet”); on a phone it may take two lines rather than leave its card, broken between
   words (“还不能 / 下结论”), or anywhere if a word alone is too wide */
.ecap-metrics .metric .v{white-space:normal;line-height:1.2}
.ecap-metrics .metric[data-k="dec"] .v{word-break:keep-all;overflow-wrap:anywhere}
/* N5: a change that does not fit its line: the change on one line, what it is compared with on the next */
.ecap-metrics .metric .d{white-space:pre-line}

/* ---------- rail ---------- */
.ecap-lv .levers{margin-top:6px}
.ecap-vl,.ecap-pick{margin:4px 0 8px;padding-left:18px;display:grid;gap:2px}
.ecap-pick{font-size:var(--fs-cap);word-break:keep-all;overflow-wrap:anywhere}   /* a plan line breaks after a comma, not inside 校准 (P19) */
.ecap-mt{margin-top:10px}
.ecap-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.ecap-goal.ecap-over b{color:var(--c-oom)}
.ecap-ch-res .cmp{margin-top:10px}
.ecap-chg{display:grid;gap:0;margin:8px 0 4px;border-top:1px solid var(--line)}
.ecap-chg>.ecap-cg{border-bottom:1px solid var(--line);padding:4px 0}
.ecap-cg{display:grid;gap:2px;min-width:0}

/* ---------- settings ---------- */
#ecap-controls .ecap-cg{border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
.ecap-grp{border-top:1px solid var(--line-2);padding-top:8px;margin-top:8px}
.ecap-gh{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);margin-bottom:4px}
.ecap-asm{margin:0;padding-left:16px;display:grid;gap:3px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.ecap-asm b{color:var(--ink);font-weight:600}
.ecap-prod{padding-left:18px;display:grid;gap:6px;min-width:0}
.ecap-prod code,.ecap-prod a{overflow-wrap:anywhere}

/* ---------- Show the math ---------- */
.ecap-mb{padding:8px 0 10px}
.ecap-mb+.ecap-mb{border-top:1px solid var(--line)}
.ecap-mb>p{margin:0 0 6px}
.ecap-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3;max-width:100%}
.ecap-eq-l{text-align:right}
#ecap-mathbody{container-type:inline-size}
@container (max-width:560px){.ecap-eqs-nm{grid-template-columns:max-content max-content}.ecap-eqs-nm>.ecap-eq-l{grid-column:1/-1;text-align:left}.ecap-eqs-nm>.ecap-eq-l:empty{display:none}}
@container (max-width:420px){.ecap-eqs{font-size:var(--fs-cap)}}

/* ---------- mini result bar ---------- */
.ecap-dk{position:relative;height:10px;background:var(--surface-2);border-radius:2px;min-width:60px}
.ecap-dk i{position:absolute;display:block}
.ecap-dk i.z{top:-3px;bottom:-3px;width:0;border-left:1.5px solid var(--ink-3)}
.ecap-dk i.b{top:3px;height:4px;border-radius:2px;background:var(--ink-2)}
.ecap-dk i.b.red{background:var(--c-oom)}

/* ---------- phone (P21, P22): the name and the verdict share the first line, the track takes the row's whole width below them, so a
   1,000-item interval is several times wider than its dot; the legend is smaller, the rows shorter ---------- */
@media (max-width:760px){
  .ecap-graph{padding:10px 10px 12px;gap:8px}
  .ecap-leg{font-size:var(--fs-mark);gap:2px 10px;line-height:1.35}
  .ecap-leg .ecap-sw{width:16px}
  .ecap-leg .ecap-sw.mg{width:0;margin:0 5px}
  .ecap-leg .ecap-sw.tru{width:8px;height:8px}
  .ecap-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rn vd" "tr tr";column-gap:8px;row-gap:1px;padding:5px 0 4px;align-items:baseline}
  .ecap-rn{grid-area:rn;display:block;font-size:var(--fs-cap);line-height:1.3}
  .ecap-rn b{font-size:var(--fs-cap);margin-right:6px}
  .ecap-rn span{font-size:var(--fs-mark)}
  .ecap-tr{grid-area:tr;height:22px}
  .ecap-row.has-b .ecap-tr{height:30px}
  .ecap-bar{top:9px}
  .ecap-pt,.ecap-rawp{top:6px}
  .ecap-tru{top:4px}
  .ecap-ghost{top:4px}
  .ecap-cut{top:6px}
  .ecap-rawb{top:10px}
  .ecap-bs{top:24px}
  .ecap-ah{top:21px}
  .ecap-zero,.ecap-mg{top:-3px;bottom:-3px}
  .ecap-row.has-r .ecap-tr{height:36px}
  .ecap-row.has-r .ecap-rawp{top:0}
  .ecap-row.has-r .ecap-rawb{top:4px}
  .ecap-row.has-r .ecap-bar{top:15px}
  .ecap-row.has-r .ecap-pt{top:12px}
  .ecap-row.has-r .ecap-tru{top:10px}
  .ecap-row.has-r .ecap-cut{top:12px}
  .ecap-row.has-r .ecap-bs{top:30px}
  .ecap-row.has-r .ecap-ah{top:27px}
  .ecap-vd{grid-area:vd;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 6px;text-align:right;font-size:var(--fs-label);max-width:46vw}
  .ecap-ann{grid-column:1/-1;font-size:var(--fs-mark);gap:1px 10px}
  .ecap-row.ecap-axis{padding:0}
  .ecap-row.ecap-axis .ecap-rn,.ecap-row.ecap-axis .ecap-vd{display:none}
  .ecap-axis .ecap-tr{height:15px}
  .ecap-axl{padding-left:0;padding-right:0;font-size:var(--fs-mark)}
  /* the part's control on one line: its name left of the buttons */
  .ecap-phone .inline-ctl{grid-template-columns:minmax(0,max-content) minmax(0,1fr);align-items:center;column-gap:10px;margin:0;padding:6px 8px}
  .ecap-phone .inline-ctl>.lbl{max-width:7.5em;font-size:var(--fs-cap);line-height:1.3}
}

/* part 4: the line above the three ways to grade writing (R2.5), styled like a control's label */
.ecap-lvh{margin:12px 0 6px;font-size:var(--fs-cap);font-weight:620;color:var(--ink-2);line-height:1.4}
/* a tried way's verdict on one line (R6.4, P13), and “wrong” in red under it, as on the chart's rows */
.ecap-lv .lever .lv-r{white-space:normal;text-align:right;line-height:1.3}
.ecap-nw,.ecap-wd{white-space:nowrap}
.ecap-lv .lever .lv-r em.wrong{display:block;font-style:normal;color:var(--c-oom);font-weight:650}

/* ---------- English on a phone (todo 6). English runs longer than Chinese, so the English stage is arranged to fit under the top bar as
   the Chinese one does: the head's question on a line of its own, the plan's cost and the badge under it; a row's name, plan and verdict
   on its first line, the track on the second with the interval's ends beside it (the tracks keep one width, so the rows share a scale);
   the legend reordered so “true difference” and “wrong” share a line (four lines at most); the verdict card a little wider, its phrase set like the Chinese one rather than in the
   numbers' font, so “No verdict yet” stays on one line. The Chinese stage is unchanged. ---------- */
.ecap-vn{display:contents}
/* in English no block ends with one word alone on its line (where the browser can: Chromium, Safari), and the verdict card's and the
   guardrail card's phrase is set in the text's font at every width, so “No verdict yet” stays on one line */
html:not([lang^="zh"]) #ecap-app{text-wrap-style:pretty}
/* text set straight in a flex box (an answer button, a chart's legend entry) has its lines evened out instead */
html:not([lang^="zh"]) #ecap-app .choice,html:not([lang^="zh"]) #ecap-app .cmp-leg>span{text-wrap-style:balance}
html:not([lang^="zh"]) .ecap-metrics .metric[data-k="dec"] .v,html:not([lang^="zh"]) .ecap-metrics .metric[data-k="guard"] .v{font-family:var(--font-ui)}
/* the legend's “wrong: truth disagrees”: the colon right after the word, as in a sentence */
html:not([lang^="zh"]) .ecap-leg .lg-r{gap:0}
@media (max-width:760px){
  html:not([lang^="zh"]) .ecap-stage .stage-head{row-gap:0}
  html:not([lang^="zh"]) .ecap-graph{padding:8px 10px 10px;gap:5px}
  html:not([lang^="zh"]) .ecap-leg{line-height:1.25}
  html:not([lang^="zh"]) .ecap-stage .stage-head>div:first-child{display:contents}
  html:not([lang^="zh"]) #ecap-st-title{flex:1 0 100%;letter-spacing:0}
  html:not([lang^="zh"]) #ecap-st-sub{flex:1 1 auto;min-width:0;margin-top:0}
  html:not([lang^="zh"]) .ecap-leg .lg-t{order:1}
  html:not([lang^="zh"]) .ecap-leg .lg-r{order:2}
  html:not([lang^="zh"]) .ecap-leg .lg-g{order:3}
  html:not([lang^="zh"]) .ecap-leg .lg-w{order:4}
  html:not([lang^="zh"]) .ecap-leg .lg-mg{order:5}
  html:not([lang^="zh"]) .ecap-row{grid-template-columns:minmax(0,1fr) auto 66px;grid-template-areas:"rn vw vw" "tr tr nm";column-gap:6px;align-items:center;padding:4px 0 3px}
  html:not([lang^="zh"]) .ecap-row.tot{padding-bottom:7px}
  html:not([lang^="zh"]) .ecap-row.ecap-axis{padding:0}
  html:not([lang^="zh"]) .ecap-rn b{font-size:var(--fs-label)}
  html:not([lang^="zh"]) .ecap-rn span{font-size:var(--fs-mark)}
  html:not([lang^="zh"]) .ecap-vd{display:contents}
  html:not([lang^="zh"]) .ecap-vw{grid-area:vw;justify-self:end;align-self:start;white-space:nowrap;line-height:1.3}
  html:not([lang^="zh"]) .ecap-vn{grid-area:nm;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right;line-height:1.25;min-width:0}
  html:not([lang^="zh"]) .ecap-vn small{white-space:nowrap}
  html:not([lang^="zh"]) .ecap-metrics[data-n="3"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}
  html:not([lang^="zh"]) .ecap-metrics .metric[data-k="dec"] .v,html:not([lang^="zh"]) .ecap-metrics .metric[data-k="guard"] .v{font-size:var(--fs-ui);line-height:1.3}
  html:not([lang^="zh"]) .ecap-ann .ecap-sw{width:16px}
  html:not([lang^="zh"]) .ecap-ann .ecap-sw.rw{width:10px;margin:0 3px}
}

/* eval-ci: the score axis with A's and B's error bars (labels at the bars' ends), part 2's re-run pile with its player, the size
   slider's benchmark ticks, part 4's answer grid, part 5's mix and answers chart with its floor, and the difference axis with 0.
   Colours (R5.6): grayscale, dashes and hatching only; green and red only for the challenge's goal. */
.evc-app [hidden]{display:none!important}
.evc-stage .stage-head{align-items:center}
.evc-graph{padding:12px 14px 14px;display:grid;gap:14px;min-width:0}
.evc-graph>div{min-width:0}
.evc-phone{display:none}
.evc-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}

/* ---------- score axis: one row per model; the label sits above the bar, at its end ---------- */
.evc-ax,.evc-df{padding:0 14px;min-width:0}
.evc-row{position:relative;height:40px;cursor:help;border-radius:3px;outline-offset:2px}
.evc-row::before{content:"";position:absolute;left:0;right:0;top:28px;border-top:1px solid var(--line-2)}
.evc-bar{position:absolute;top:22px;height:12px;box-sizing:border-box;border-left:2px solid var(--ink-2);border-right:2px solid var(--ink-2);
  background:linear-gradient(var(--ink-2),var(--ink-2)) center/100% 2px no-repeat;transition:left .2s ease-out,width .2s ease-out}
.evc-dot{position:absolute;top:23px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--surface);transition:left .2s ease-out}
.evc-lab{position:absolute;top:2px;z-index:2;padding:0 3px;font:var(--fs-label)/16px var(--font-mono);color:var(--ink);white-space:nowrap;background:var(--surface);border-radius:2px}
.evc-lab.r{text-align:right}
.evc-scale{position:relative;height:18px;border-top:1px solid var(--line);margin-top:2px}
.evc-scale span{position:absolute;top:3px;transform:translateX(-50%);font:var(--fs-mark)/1.2 var(--font-mono);color:var(--ink-3);white-space:nowrap}
.evc-scale span::before{content:"";position:absolute;left:50%;top:-4px;height:3px;border-left:1px solid var(--line)}

/* ---------- part 2: the re-run pile and its player ---------- */
.evc-pilebox{margin-top:6px}
/* H5 (the owner, 2026-10-09): a hairline between the blocks of the stage, none above a block that stands alone */
.evc-pilebox:not([hidden]){border-top:1px solid var(--line);padding-top:8px}
.evc-graph>.evc-axbox:not([hidden])~div:not([hidden]),.evc-graph>.evc-pairbox:not([hidden])~div:not([hidden]){border-top:1px solid var(--line);padding-top:12px}
#evc-kc-cap{border-top:1px solid var(--line);padding-top:10px}
.evc-pile{position:relative;height:110px;margin:8px 14px 24px;border-bottom:1px solid var(--line);cursor:help;outline-offset:3px}
.evc-dots{position:absolute;inset:0}
.evc-dots i{position:absolute;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--ink-2)}
.evc-band{position:absolute;top:-4px;bottom:0;box-sizing:border-box;border-left:1.5px dashed var(--ink-3);border-right:1.5px dashed var(--ink-3);background:rgba(128,128,128,.10);pointer-events:none}
.evc-bandlab{position:absolute;top:100%;margin-top:4px;transform:translateX(-50%);font:var(--fs-mark)/1.2 var(--font-ui);font-style:normal;color:var(--ink-2);white-space:nowrap}
.evc-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.evc-player .ctl{display:flex;align-items:center;gap:6px;margin:0}
.evc-player .ctl>.lbl{font-size:var(--fs-label)}
.evc-player .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
.evc-play{min-width:92px;justify-content:center}
.evc-scrub{display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:0}
.evc-scrub input{flex:1 1 auto;min-width:0}
.evc-count{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}

/* ---------- part 3: the size slider's ticks (three real benchmarks) ---------- */
.evc-ticks{position:relative;height:32px;margin:-4px 8px 0}
.evc-ticks span{position:absolute;top:0;padding-top:6px;transform:translateX(-50%);font:var(--fs-mark)/1.25 var(--font-mono);color:var(--ink-3);text-align:center;white-space:nowrap}
.evc-ticks span::before{content:"";position:absolute;top:0;left:50%;height:4px;border-left:1px solid var(--ink-3)}
.evc-ticks span.l{transform:translateX(-6px);text-align:left}
.evc-ticks span.l::before{left:6px}
.evc-ticks span.r{transform:translateX(calc(-100% + 6px));text-align:right}
.evc-ticks span.r::before{left:auto;right:6px}

/* ---------- part 4: the answer sheet, 2 × 2; a square's area is its share ---------- */
.evc-gridwrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:14px;align-items:center}
/* B4 (the owner: "the player was pushed down, I did not see there was more below"): on a desktop the answer sheet's side follows the
   screen's height (420 px on a tall screen, 320 at 900 px, never under 240), so part 4 fits one screen with nothing cut, also
   once the paired error bar is added under the first one */
@media (min-width:761px){.evc-gridwrap{grid-template-columns:minmax(0,clamp(240px,calc(100vh - 580px),420px)) minmax(0,1fr)}}
.evc-grid{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:5px;align-items:center}
.evc-grh,.evc-gr{font:var(--fs-mark)/1.2 var(--font-mono);color:var(--ink-3);white-space:nowrap}
.evc-grh{text-align:center}
.evc-gr{text-align:right;padding-right:2px}
.evc-cell{position:relative;aspect-ratio:1;min-height:90px;box-sizing:border-box;border:1.5px solid var(--ink-3);border-radius:4px;display:grid;place-items:center;cursor:help;overflow:hidden;outline-offset:2px}
.evc-cell.disc{border-style:dashed;border-color:var(--ink-2)}
.evc-cell i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink-3);opacity:.3;border-radius:2px}
.evc-cell.disc i{background:var(--ink-2);opacity:.45}
.evc-cell span{position:relative;font-size:var(--fs-label);line-height:1.25;text-align:center;color:var(--ink);padding:4px}
.evc-cell b{display:block;font:650 var(--fs-stage)/1.2 var(--font-mono)}
.evc-gleg{display:grid;gap:8px;font-size:var(--fs-label);color:var(--ink-2);align-content:center}
.evc-gleg>span{cursor:help}
.evc-gleg>span:last-child{cursor:default}
.evc-sw-disc{border:1.5px dashed var(--ink-2);background:transparent}
.evc-sw-same{border:1.5px solid var(--ink-3);background:transparent}

/* ---------- part 5: the problems' mix, one labelled row each ---------- */
.evc-mix{display:grid;gap:4px;margin-bottom:12px}
.evc-mrow{display:grid;grid-template-columns:96px minmax(0,1fr) 40px;gap:8px;align-items:center;cursor:help;border-radius:3px;outline-offset:2px}
.evc-ml{font-size:var(--fs-label);color:var(--ink);white-space:nowrap}
.evc-mtrk{position:relative;height:14px;background:var(--surface-2);border-radius:2px}
.evc-mtrk i{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.evc-m1{background:var(--ink-2)}
.evc-m2{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--ink-2)}
.evc-m3{background:var(--ink-3);opacity:.45}
.evc-mrow b{font-size:var(--fs-label);font-weight:600;text-align:right;color:var(--ink)}

/* ---------- part 5: A's error bar against answers per problem; the floor's label sits in the right gutter ---------- */
.evc-kbars{position:relative;height:150px;margin:18px 96px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end}
.evc-kcol{position:relative;height:100%;cursor:help;outline-offset:2px;border-radius:2px}
.evc-kcol i{position:absolute;left:14%;right:14%;bottom:0;background:var(--ink-3);border-radius:2px 2px 0 0;transition:height .2s ease-out}
.evc-kcol.on i{background:var(--ink)}
.evc-kcol em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:2px;font:var(--fs-mark)/1.2 var(--font-mono);font-style:normal;color:var(--ink-2);white-space:nowrap}
.evc-kcol.on em{color:var(--ink);font-weight:650}
.evc-floor{position:absolute;left:0;right:-96px;height:0;border-top:2px dashed var(--ink);z-index:1;cursor:help}
.evc-floor em{position:absolute;right:0;bottom:3px;width:90px;text-align:right;font:650 var(--fs-mark)/1.2 var(--font-mono);font-style:normal;color:var(--ink)}
.evc-floor small{position:absolute;right:0;top:4px;width:90px;text-align:right;font-size:var(--fs-mark);line-height:1.25;color:var(--ink-2)}
.evc-klabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-right:96px;border-top:1px solid var(--line);padding-top:3px}
.evc-klabs span{text-align:center;font:var(--fs-label)/1.3 var(--font-mono);color:var(--ink-2)}
.evc-klabs span.on{color:var(--ink);font-weight:700}
.evc-kx{margin-right:96px;text-align:center;font-size:var(--fs-label);color:var(--ink-3)}

/* ---------- B − A on its own axis, 0 marked ---------- */
.evc-dfin{position:relative;padding-top:20px}
.evc-zero{position:absolute;top:4px;bottom:18px;border-left:1.5px solid var(--ink);z-index:1;pointer-events:none}
.evc-zero em{position:absolute;top:-2px;left:4px;font:var(--fs-mark)/1.2 var(--font-ui);font-style:normal;color:var(--ink-2);white-space:nowrap}
.evc-drow:not(.on){opacity:.5}
.evc-drow.real .evc-bar{border-color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink))}
.evc-drow .evc-lab{font-family:var(--font-ui)}

/* ---------- metric cards ---------- */
.evc-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.evc-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.evc-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* a desktop stage between 480 and 560 px wide (a window about 900 px wide) keeps the four cards in one row too; phones keep two per row */
@media (min-width:761px){@container (min-width:480px){.evc-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}}

/* ---------- formulas on their own line ---------- */
.evc-fx{margin:8px 0 10px;overflow-x:auto;font-size:var(--fs-stage);line-height:1.3}
.evc-fxn{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6em;row-gap:2px}
.evc-fx-nm{font-size:var(--fs-ui);color:var(--ink-2)}
/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.evc-mb{padding:8px 0 10px}
.evc-mb+.evc-mb{border-top:1px solid var(--line)}
.evc-mb>p{margin:0 0 6px}
.evc-mb>p.evc-mb-res{margin:6px 0 0}
.evc-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;font-size:var(--fs-stage);line-height:1.3}
.evc-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.evc-eqs-nm{grid-template-columns:max-content max-content}.evc-eqs-nm>.evc-eq-l{grid-column:1/-1;text-align:left}.evc-eqs-nm>.evc-eq-l:empty{display:none}}
#evc-drill-a .evc-eqs{margin:2px 0 8px}

/* ---------- rail ---------- */
.evc-mt{margin-top:12px}
.evc-ch-res{scroll-margin-top:120px}
.goal.evc-over b{color:var(--c-oom)}
.evc-lv{margin-top:6px}
.evc-app .goal span:last-child{text-align:right}
.evc-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.evc-app .inline-ctl .seg-ctl button{white-space:nowrap}
.evc-asm{margin:6px 0 12px;padding-left:18px;color:var(--ink-2)}
.evc-asm li{margin-bottom:3px}
.evc-remlist{margin:0 0 10px;padding-left:18px}
.evc-remlist li{margin-bottom:8px}
.evc-rem{margin-left:2px}

/* ---------- settings ---------- */
.evc-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.evc-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.evc-grp .ctl>label{display:flex}
.evc-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.evc-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.evc-prod li{margin-bottom:6px}
.evc-prod code,.evc-app .refs code{word-break:break-word}

/* ---------- dock: a tiny copy of the chart ---------- */
.evc-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.evc-dk i{position:absolute;height:4px;background:var(--ink-2);border-radius:1px}
.evc-dk i:nth-of-type(1){top:1px}
.evc-dk i:nth-of-type(2){top:7px}
.evc-dkd i{top:4px!important;height:4px}
.evc-dkd b{position:absolute;top:0;bottom:0;width:1.5px;background:var(--ink)}

@media (max-width:760px){
  /* phones: the picture first, then the numbers (R7.3) */
  .evc-stage{display:flex;flex-direction:column}
  .evc-stage>.stage-head{order:1}
  .evc-stage>.evc-graph{order:2}
  .evc-stage>.metrics{order:3}
  .evc-stage>details.math{order:4}
  .evc-graph{padding:10px 10px 12px}
  .evc-phone:not(:empty){display:block}
  .evc-ax,.evc-df{padding:0 10px}
  .evc-pile{margin:8px 10px 24px}
  .evc-gridwrap{grid-template-columns:minmax(0,1fr)}
  .evc-gleg{display:flex;flex-wrap:wrap;gap:6px 14px}
  .evc-cell{min-height:0}
  .evc-mrow{grid-template-columns:84px minmax(0,1fr) 36px;gap:6px}
  .evc-kbars{margin-right:84px;gap:6px}
  .evc-floor{right:-84px}
  .evc-floor em,.evc-floor small{width:80px}
  .evc-klabs{margin-right:84px;gap:6px}
  .evc-kx{margin-right:84px}
}
@media (prefers-reduced-motion:reduce){.evc-bar,.evc-dot,.evc-kcol i{transition:none}}

/* ---------- 知识梳理: a formula on its own line; separate formulas wrap under each other in a narrow column, the pieces of one formula
   (.one) stay close and wrap only between them, so nothing scrolls sideways ---------- */
.primer .evc-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:2.2em;row-gap:8px;margin:2px 0 14px;padding-left:1em;font-size:1.06em;line-height:1.3;min-width:0}
.primer .evc-prfx.one{column-gap:.35em}
.primer .evc-prfx>span{min-width:0;max-width:100%}
@media (max-width:760px){.primer .evc-prfx{padding-left:.4em;column-gap:1.6em}.primer .evc-prfx.one{column-gap:.35em}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 5 still ran 5 px past the stage, in both languages: the
   figure's padding is 10 px at the top and the bottom instead of 12 and 14 */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .evc-graph{padding-top:10px;padding-bottom:10px}
}}

/* flash-attention: the toy's two lanes (HBM and the chip) with the matrices as grids of grey cells, the transfer line, one row's running
   max and sum, the counter; the real-size bars (hatched: S and P; dotted: K and V again), the curve over context length, the SRAM gauge.
   Colours (R5.6): grayscale, hatching and dots only; red only for "does not fit" and a missed goal, green only for "fits" and a met goal. */
.fa-app [hidden]{display:none!important}
.fa-stage .stage-head{align-items:center}
.fa-stage .stage-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end}
.fa-view button,.fa-pathsw button{font-size:var(--fs-label);padding:3px 9px}
.fa-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.fa-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}

/* ---------- the toy: two lanes ---------- */
.fa-toy{display:grid;gap:8px;min-width:0}
.fa-lane{border:1px solid transparent;border-radius:8px;padding:8px 10px 10px;background:var(--surface-2);min-width:0}   /* soft panels, no frame (精装修 step 2): HBM leaf grey, the chip a shade deeper */
.fa-lane.fa-chip{background:var(--sunken)}
.fa-lh{font-size:var(--fs-label);color:var(--ink-2);margin-bottom:6px;line-height:1.3}
.fa-lh b{color:var(--ink);font-family:var(--font-mono);font-size:var(--fs-label);margin-right:4px}
.fa-mats{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start;min-width:0}
.fa-m{margin:0;display:grid;gap:3px;justify-items:start;align-content:start;cursor:help;border-radius:4px;padding:3px 4px 4px;border:2px solid transparent;outline-offset:2px;min-width:0}
.fa-m figcaption{font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;line-height:1.25}
.fa-m figcaption b{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink)}
.fa-m.fa-on{border-color:var(--ink);background:var(--surface)}
.fa-m.fa-on.fa-in figcaption b::after{content:' ▼';font-size:var(--fs-mark)}
.fa-m.fa-on.fa-out figcaption b::after{content:' ▲';font-size:var(--fs-mark)}
.fa-m.fa-none figcaption b{color:var(--ink-3)}
.fa-grid{--cs:9px;display:grid;grid-template-columns:repeat(var(--c),var(--cs));gap:1px}
.fa-grid i{display:block;width:var(--cs);height:var(--cs);border-radius:1px}
.fa-grid i.fa-e{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.fa-grid i[data-h]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fa-grid.fa-empty{outline:1.5px dashed var(--ink-3);outline-offset:1px;border-radius:1px}
.fa-grid.fa-empty i{background:transparent;box-shadow:none}
.fa-two{display:flex;gap:4px}
.fa-op{align-self:center;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink);padding:5px 8px;border:1px dashed var(--line-2);border-radius:4px;background:var(--surface);max-width:100%}
.fa-never{display:grid;align-content:center;justify-items:center;gap:2px;min-width:92px;min-height:64px;padding:6px 8px;border:1.5px dashed var(--ink-3);border-radius:4px;font-size:var(--fs-label);color:var(--ink-2);cursor:help;align-self:center;outline-offset:2px}
.fa-never b{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-3);text-decoration:line-through}
.fa-mapg{--cs:15px;gap:2px}
.fa-mapg i{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2)}
.fa-mapg i.fa-past{background:color-mix(in srgb,var(--ink-3) 35%,var(--surface))}
.fa-mapg i.fa-now{background:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fa-xfer{font-size:var(--fs-label);line-height:1.45;color:var(--ink);min-height:2.9em;padding:4px 2px 4px 10px;border-left:3px solid var(--ink-3)}
.fa-xs{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);margin-right:4px;white-space:nowrap}

/* one row's running max and sum */
.fa-row{min-width:0;overflow-x:auto}
.fa-rh{font-size:var(--fs-label);font-weight:650;color:var(--ink);margin-bottom:4px}
.fa-rt{border-collapse:collapse;font-family:var(--font-mono);font-size:var(--fs-label);width:100%;max-width:440px}
.fa-rt th{font-weight:600;color:var(--ink-3);font-size:var(--fs-mark);text-align:right;padding:2px 8px;border-bottom:1px solid var(--line)}
.fa-rt td{text-align:right;padding:2px 8px;border-bottom:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.fa-rt th:first-child,.fa-rt td:first-child{text-align:left}
.fa-rt tr.fa-e td{color:var(--ink-3)}
.fa-rt tr.fa-up td{color:var(--ink);font-weight:700;background:var(--surface-2)}

/* the counter: numbers moved so far, on standard attention's scale; hatched = S and P */
.fa-cnt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0}
.fa-cl{font-size:var(--fs-label);color:var(--ink-2)}
.fa-cbar{position:relative;height:14px;background:var(--surface-2);border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2)}
.fa-cbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);transition:width .25s ease-out}
.fa-cbar i.fa-sp{background:repeating-linear-gradient(135deg,var(--ink) 0 1.5px,var(--ink-3) 1.5px 5px)}
.fa-cnt b{font-size:var(--fs-label);color:var(--ink);min-width:3ch;text-align:right}

/* the player (R3.9) */
.fa-player{display:grid;gap:8px;margin-top:10px;min-width:0}
.fa-pbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fa-play{min-width:86px}
.fa-speed{display:inline-flex;cursor:help}
/* H7 (the owner, 2026-10-09): ◂, play and ▸ and the speed buttons share one height and one baseline */
.fa-pbtns>.btn.sm,.fa-speed .seg-ctl{height:32px;box-sizing:border-box}
.fa-speed .seg-ctl button{font-size:var(--fs-label);padding:0 9px;line-height:1.2;display:inline-flex;align-items:center}
.fa-scrub{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-width:0}
.fa-sl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;min-width:86px}
.fa-scrub input{width:100%;min-width:0}
#fa-stplay .fa-player{margin-top:2px;padding-top:8px;border-top:1px solid var(--line-2)}
.fa-done{margin:8px 0 0;font-size:var(--fs-cap)}

/* ---------- real size: the bars ---------- */
.fa-real{display:grid;gap:10px;min-width:0}
.fa-bars{display:grid;gap:8px;min-width:0}
.fa-brow{display:grid;grid-template-columns:112px minmax(0,1fr) 88px;gap:8px;align-items:center;cursor:help;border-radius:3px;outline-offset:2px;min-width:0}
.fa-bl{font-size:var(--fs-label);color:var(--ink);white-space:nowrap}
.fa-btrk{position:relative;height:22px;background:var(--surface-2);border-radius:2px;display:flex;overflow:hidden;min-width:0}
.fa-seg{display:block;height:100%;flex:none;transition:width .25s ease-out;box-sizing:border-box}
.fa-seg.fa-base{background:var(--ink-2)}
.fa-seg.fa-sp{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 5px);box-shadow:inset 0 0 0 1px var(--ink-3)}
.fa-seg.fa-kv{background:radial-gradient(circle,var(--ink-2) 1.1px,transparent 1.4px) 0 0/5px 5px,var(--surface);box-shadow:inset 0 0 0 1px var(--ink-3)}
.fa-bv{font-size:var(--fs-label);text-align:right;white-space:nowrap;color:var(--ink)}
.fa-brow.fa-ghost .fa-btrk{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.fa-brow.fa-ghost .fa-bv{color:var(--ink-3);font-size:var(--fs-mark);white-space:normal;line-height:1.2}
.fa-brow.fa-ghost .fa-bl{color:var(--ink-3)}
.fa-room{margin:0;font-size:var(--fs-label);color:var(--ink-2);line-height:1.45;letter-spacing:-.01em}   /* a hair tighter: in Figtree (2026-10-22 refit) the line keeps to one line, as it did */
.fa-room b{color:var(--ink)}

/* part 5: traffic against context length */
.fa-curve{min-width:0}
.fa-cvcap{font-size:var(--fs-label);color:var(--ink-2);margin-bottom:4px;line-height:1.35}
/* H5 (the owner, 2026-10-09: information runs together without a divider): the growth chart starts a block of its own, under a hairline */
.fa-cvcap{border-top:1px solid var(--line);padding-top:8px;margin-top:10px}
.fa-curve svg{display:block;width:100%;height:auto;overflow:visible}
.fa-curve text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.fa-curve line.fa-cv-grid{stroke:var(--line-2);stroke-width:1}
.fa-curve line.fa-cv-tick{stroke:var(--ink-3);stroke-width:1}
.fa-curve line.fa-cv-now{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:2 3}
.fa-curve polyline{fill:none;stroke-width:2;stroke-linejoin:round}
.fa-curve polyline.fa-cv-std{stroke:var(--ink)}
.fa-curve polyline.fa-cv-fa{stroke:var(--ink-2);stroke-dasharray:6 4}
.fa-curve circle.fa-cv-std{fill:var(--ink)}
.fa-curve circle.fa-cv-fa{fill:var(--surface);stroke:var(--ink-2);stroke-width:2}

/* the SRAM gauge for one tile pair */
.fa-gauge{display:grid;gap:6px;min-width:0}
.fa-gcap{font-size:var(--fs-cap);color:var(--ink);line-height:1.4}
.fa-fit{color:var(--c-ok);white-space:nowrap}
.fa-nofit{color:var(--c-oom);white-space:nowrap}
.fa-gtrk{position:relative;height:20px;background:var(--surface-2);border-radius:2px;display:flex;cursor:help;margin-bottom:16px;outline-offset:3px}
.fa-gtrk>i{display:block;height:100%;flex:none;border-right:1px solid var(--surface);box-sizing:border-box;transition:width .25s ease-out}
.fa-gtrk.fa-over{box-shadow:0 0 0 2px var(--c-oom)}
.fa-g-q{background:var(--ink-2)}
.fa-g-k{background:var(--ink-3)}
.fa-g-s{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 5px)}
.fa-g-o{background:radial-gradient(circle,var(--ink-2) 1.1px,transparent 1.4px) 0 0/5px 5px,var(--surface)}
.fa-glim{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--ink);z-index:1}
.fa-glim em{position:absolute;top:100%;right:3px;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.4;color:var(--ink);white-space:nowrap;font-weight:400}
.fa-gkey{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-label);color:var(--ink-2)}
.fa-gkey span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fa-gkey i{display:inline-block;width:12px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- legend swatches ---------- */
.sw.fa-sw-cell{background:color-mix(in srgb,var(--ink-2) 50%,var(--surface));border-color:transparent}
.sw.fa-sw-on{background:transparent;border:2px solid var(--ink)}
.sw.fa-sw-none{background:transparent;border:1.5px dashed var(--ink-3)}
.sw.fa-sw-base{background:var(--ink-2);border-color:transparent}
.sw.fa-sw-sp{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 4px);border-color:var(--ink-3)}
.sw.fa-sw-kv{background:radial-gradient(circle,var(--ink-2) 1px,transparent 1.3px) 0 0/4px 4px,var(--surface);border-color:var(--ink-3)}
#fa-legend>span{cursor:help}

/* ---------- metric cards ---------- */
.fa-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.fa-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.fa-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fa-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.fa-mt{margin-top:12px}
.fa-ch-res{scroll-margin-top:120px}
.goal.fa-over b{color:var(--c-oom)}
.fa-lv{margin-top:6px}
.fa-lv .lever .lv-r{grid-column:2 / 4;grid-row:2;padding-top:0}
.fa-lv .lever .lv-d{grid-row:3}
.fa-lv .lever .lv-r:empty{display:none}
.fa-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .fa-why{margin-top:6px}
.fa-remlist li{margin-bottom:8px}
.fa-app .goal.fa-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.fa-app .goal.fa-goal span:last-child{white-space:normal}
.fa-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.fa-app .inline-ctl .seg-ctl button{white-space:nowrap}
.fa-app .ctl output{white-space:nowrap}

/* the challenge's chart: a pass shows on the row itself */
#fa-ch-res .cmp-row.ok .cmp-track{background:var(--c-ok-soft);box-shadow:inset 0 0 0 2px var(--c-ok)}
#fa-ch-res .cmp-row.ok.me .cmp-track{box-shadow:inset 0 0 0 2px var(--c-ok),0 0 0 1.5px var(--ink)}
#fa-ch-res .cmp-row.ok .cmp-lab>span:first-child{color:var(--c-ok);font-weight:650}
#fa-ch-res .cmp-leg i.ok{background:var(--c-ok-soft);box-shadow:inset 0 0 0 2px var(--c-ok)}

/* ---------- settings ---------- */
.fa-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.fa-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.fa-grp .ctl>.lbl{display:block}

/* ---------- connect ---------- */
.fa-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.fa-prod li{margin-bottom:6px}
.fa-prod code,.fa-app .refs code{word-break:break-word}

/* ---------- the dock's mini bars ---------- */
.fa-dk{position:relative;height:9px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.fa-dk+.fa-dk{margin-top:3px}
.fa-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}
.fa-dk+.fa-dk i{background:var(--ink-3)}

@media (max-width:760px){
  /* phones: the picture first, its legend right under it (R7.3) */
  .fa-stage{display:flex;flex-direction:column}
  .fa-stage>.stage-head{order:1}
  .fa-stage>.fa-graph{order:2}
  .fa-stage>.legend-row{order:3}
  .fa-stage>.fa-scope{order:4}
  .fa-stage>.metrics{order:4}
  .fa-stage>details.math{order:5}
  .fa-graph{padding:10px 10px 12px}
  .fa-lane{padding:6px 8px 8px}
  .fa-grid{--cs:8px}
  .fa-mapg{--cs:13px}
  .fa-mats{gap:6px 8px}
  .fa-brow{grid-template-columns:100px minmax(0,1fr) 74px;gap:6px}
  .fa-bl{font-size:var(--fs-label)}
  .fa-cnt{grid-template-columns:minmax(0,1fr) auto}
  .fa-cl{grid-column:1 / -1}
  .fa-rt th,.fa-rt td{padding:2px 5px}
}
@media (prefers-reduced-motion:reduce){.fa-seg,.fa-cbar i,.fa-gtrk>i{transition:none}}

/* formulas written out, one per line, and the per-pair comparison of part 5 (Yixiong's review) */
.fa-fx{margin:6px 0;overflow-x:auto;overflow-y:hidden}
.fa-fx math{font-size:1.08em}
.fa-pair{margin:6px 0 8px;padding-left:18px}
.fa-pair li{margin:4px 0}

/* R5.9: each key beside what it labels. The curves are named at their right ends; the bar segments' key sits right under the bars,
   the counter's under the counter, the 227 KiB mark's with the gauge's other keys */
.fa-curve text.fa-cv-lab{font-family:inherit;font-size:var(--fs-label);font-weight:600}
.fa-curve text.fa-cv-lstd{fill:var(--ink)}
.fa-curve text.fa-cv-lfa{fill:var(--ink-2)}
.fa-bkey,.fa-ckey{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);min-width:0}
.fa-bkey>span,.fa-ckey>span{cursor:help;display:inline-flex;align-items:center}
.fa-ckey{grid-column:1/-1}
.fa-gkey i.fa-g-lim{width:0;height:12px;border-radius:0;box-shadow:none;border-left:2px dashed var(--ink);margin:0 2px 0 3px}
.fa-gkey>span[tabindex]{cursor:help}
/* Show the math as short blocks (H2, 2026-10-09): a lead line, then the formula's rows in a grid; blocks are split by a hairline */
.fa-mb{padding:10px 0}
.fa-mb:first-child{padding-top:2px}
.fa-mb+.fa-mb,.fa-mb+p,p+.fa-mb{border-top:1px solid var(--line)}
.mathbody .fa-ml{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5;color:var(--ink-2)}
.fa-mg{display:grid;grid-template-columns:repeat(var(--n),auto);justify-content:start;justify-items:center;align-items:center;column-gap:.35em;row-gap:.45em;overflow-x:auto;padding-block:.3em;margin-bottom:4px;font-size:var(--fs-cap)}
.fa-mg .fa-mn{justify-self:end}
.fa-mg .fa-mw{justify-self:start}
/* a cell never shrinks under its text: a formula with Chinese words in it would otherwise be squeezed and run into the next
   column (H7); a row wider than the panel scrolls instead */
.fa-mg>span{white-space:nowrap;min-width:max-content}
.fa-mg .fa-mh{font-family:'STIX Two Math','Cambria Math','Latin Modern Math','Noto Sans Math',var(--font-ui);font-size:1.08em;white-space:nowrap}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read): a long sum is cut before each “+”
   into pieces, each with the reader's numbers under its terms; the pieces wrap onto the next line, indented under the first term.
   A result in words and numbers wraps at its spaces */
.fa-mg>.fa-sw{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.35em;row-gap:.55em;padding-left:1.3em;min-width:0;white-space:normal}
.fa-sw>.fa-sg:first-child,.fa-sw>.fa-sl{margin-left:-1.3em}
.fa-sw>.fa-sl{flex-basis:100%;min-width:0}
.fa-sg{display:inline-grid;justify-content:start;justify-items:center;align-items:center;column-gap:.35em;row-gap:.45em;grid-auto-rows:minmax(1.9em,auto)}
.fa-sg>span{white-space:nowrap}
.fa-sl{grid-template-columns:auto minmax(0,auto)!important;align-items:baseline}
.fa-sl>.fa-mh,.fa-mg>.fa-mw.fa-mh:not(:has(math)){white-space:normal;min-width:0;justify-self:start}
.fa-mg>.fa-sn{align-self:start;min-height:1.9em;display:flex;align-items:center}
/* a narrow stage (a phone, or the 900 px layout): each name on its own line above its formula, the “=” rows under it */
@container (max-width:540px){
  .fa-mg{grid-template-columns:repeat(var(--n1),auto)}
  .fa-mg>.fa-mn:not(:empty){grid-column:1/-1;justify-self:start}
  .fa-mg>.fa-mn:empty{display:none}
}
.fa-metrics .k{overflow-wrap:anywhere}
/* ---------- a wide stage (polish round 4, 2026-10-16; the owner's B4, R7.12): at 1440 × 900 the 12-token example needed 94 px (part 3)
   and 117 px (part 4) of scrolling inside the stage. On a stage at least 736 px wide (windows from about 1226 px) each lane's name sits
   in a column on its left instead of on a line above its matrices, the player's buttons and its step slider share one row, the metric
   cards' value and change lines are tighter (as spec-decoding's, CONTRACT §19), and a few gaps are tighter. Same pieces in the same
   order, same animation; the chip lane and the transfer line still keep their tallest step's height (R7.9); phones (≤ 760 px) and
   narrower stages keep the layout above.
   R7.9 here: this stage no longer scrolls inside, so it is as tall as its content, and three sub-pixel or 1 px changes during a run,
   hidden before by the scrolling box, would move its bottom edge: the ▼/▲ after a matrix's name (a fallback font) grew its caption by
   0.5 px, a step text with ▼/▲ is 0.25 px taller than the transfer line's reserved height (offsetHeight rounds it down), and the row
   table's “不缩放” (Chinese in the mono table) is a 19 px row among 18 px ones. The arrow's line box is held to its font size, the
   transfer line is held at two lines (its reserved height still wins when larger), and the table's lines have a fixed height (its rows
   18 px, its head 17.5 px), which also keeps the table as tall in a page with a doctype, where a table inherits the stage's taller
   line height, as in the page without one that build.py writes. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .fa-stage>.legend-row{margin-top:8px}
  .fa-graph{margin-top:10px;padding-top:8px;padding-bottom:10px}
  .fa-toy{gap:6px}
  .fa-lane{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:12px;align-items:start;padding:6px 10px 8px}
  .fa-lh{margin:0;padding-top:2px}
  .fa-lh b{display:block;margin:0 0 2px}
  .fa-m figcaption b::after{line-height:1}
  .fa-xfer{padding-top:2px;padding-bottom:2px;height:calc(2.9em + 4px)}
  .fa-rh{margin-bottom:2px}
  .fa-rt th,.fa-rt td{padding-top:1px;padding-bottom:1px}
  .fa-rt th{line-height:14.5px}
  .fa-rt td{line-height:15px}
  #fa-stplay .fa-player{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}
  .fa-scope{margin:8px 0 4px}
  .fa-metrics{margin-top:8px}
  .fa-metrics .metric .v{line-height:1.25}
  .fa-metrics .metric .d{min-height:13px;line-height:1.1}
  .fa-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.fa-runl{font-variant-numeric:tabular-nums}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and parts 3 and 4 (the step-by-step runs) still ran 40–43 px past it at 1536 × 730; there a matrix cell is 8 px
   instead of 9 (the 12-row matrices 12 px shorter) and the lanes' padding and the gaps between the rows are tighter. Same pieces, lines
   and sizes of text */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .fa-graph{padding-top:6px;padding-bottom:6px}
  .fa-toy{gap:4px}
  .fa-lane{padding:4px 10px 6px}
  .fa-stage .fa-grid{--cs:8px}
  #fa-stplay .fa-player{padding-top:6px}
  .fa-scope{margin:6px 0 2px}
}}

/* GQA and MLA lab (prefix gm-) and its home tile (prefix tz-gm-) */
.gm-host{display:block}
.gm-host [data-tipx]:not(button):not(a):not(.def){cursor:help}
/* metrics: four cards, two by two when the stage is narrow */
.gm-host .gm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:520px){.gm-host .gm-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* the heads diagram: one layer's query heads (gray), the keys and values they read (amber), the GPUs (dashed boxes) */
.gm-diag{margin-top:8px;min-height:60px}
.gm-svg{display:block;width:100%;height:auto;overflow:visible}
.gm-svg .gm-q{fill:var(--ink-2)}
.gm-svg .gm-k{fill:var(--c-kv)}
.gm-svg .gm-hatch{fill:url(#gm-hp)}
.gm-svg .gm-hp-l{fill:var(--on-kv);opacity:.55}
.gm-svg .gm-wire{stroke:var(--ink-3);stroke-width:.7}
.gm-svg .gm-fan{stroke:var(--ink-3);stroke-width:.7;stroke-dasharray:2 2}
.gm-svg .gm-gpu{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.gm-svg .gm-gl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.gm-svg .gm-br{fill:none;stroke:var(--ink-2);stroke-width:1.2}
#gm-gpuline{margin-top:6px}

/* legend swatches */
.gm-legend>span{display:inline-flex;align-items:center}
.gm-sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;flex:none}
.gm-sw-q{background:var(--ink-2)}
.gm-sw-k{background:var(--c-kv)}
.gm-sw-l{width:22px;height:9px;background:linear-gradient(90deg,var(--c-kv) 0 78%,transparent 78% 84%,var(--c-kv) 84%)}
.gm-sw-line{width:16px;height:0;border-radius:0;border-top:1px solid var(--ink-3)}
.gm-sw-dash{width:16px;height:0;border-radius:0;border-top:1px dashed var(--ink-3)}
.gm-sw-gpu{background:none;border:1px dashed var(--ink-3)}
.gm-sw-copy,.gm-dk i.cp,.tz-gm-f.cp,.sw.tz-gm-swc{background:repeating-linear-gradient(135deg,transparent 0 2px,rgba(26,18,0,.5) 2px 3px),var(--c-kv)}
.sw.tz-gm-swc{border-color:transparent}

/* the chart: one token's KV cache for each design, in total and on each GPU */
.gm-chart{margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px}
.gm-chart[hidden]{display:none!important}
.gm-ch-title{font-size:var(--fs-cap);font-weight:650;margin:0 0 6px}
.gm-ch-h,.gm-ch-r{display:grid;grid-template-columns:minmax(118px,.85fr) minmax(0,1fr) minmax(0,1fr);gap:4px 12px;align-items:center;padding:3px 6px;border-radius:3px}
.gm-ch-h{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);padding-bottom:2px}
.gm-ch-r{margin-top:2px}
.gm-ch-r.cur{box-shadow:0 0 0 1.5px var(--ink)}
.gm-ch-l{font-size:var(--fs-label);color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0}
.gm-ch-r.cur .gm-ch-l{color:var(--ink);font-weight:650}
/* "Llama-3.1-70B uses it" under a design's name: a quiet note, not part of the name */
.gm-ch-l .gm-uses{font-size:var(--fs-mark);font-weight:500;color:var(--ink-3)}
.gm-ch-l em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:500;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--bg);line-height:1.5}
.gm-cc{display:flex;align-items:center;gap:6px;min-width:0}
.gm-ct{flex:1 1 auto;position:relative;height:10px;background:var(--surface-2);border-radius:2px;overflow:hidden;min-width:24px}
.gm-ct i{position:absolute;left:0;top:0;bottom:0;background:var(--c-kv);border-radius:2px}
.gm-cc b{flex:none;min-width:64px;font-size:var(--fs-mark);font-weight:500;color:var(--ink);white-space:nowrap}
.gm-masked b{color:var(--ink-3)}
.gm-ch-note{font-size:var(--fs-label);color:var(--ink-3);margin:8px 0 0;line-height:1.4}
@container (max-width:470px){
  .gm-ch-h,.gm-ch-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px}
  .gm-ch-h>span:first-child{display:none}
  .gm-ch-l{grid-column:1 / -1}
  .gm-cc b{min-width:58px}
}

/* part 4: the GQA paper's comparison, inside the card */
.gm-t1{width:100%;border-collapse:collapse;margin:2px 0 12px;font-size:var(--fs-cap)}
.gm-t1 caption{caption-side:top;text-align:left;font-size:var(--fs-label);color:var(--ink-3);padding-bottom:4px}
.gm-t1 th,.gm-t1 td{padding:4px 6px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:bottom}
.gm-t1 thead th{font-size:var(--fs-label);font-weight:600;color:var(--ink-2);line-height:1.3}
.gm-t1 td{text-align:right;white-space:nowrap}
.gm-t1 thead th+th{text-align:right}

/* settings: six design buttons in two rows of three */
.gm-seg6 .seg-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.gm-host .inline-ctl .seg-ctl button{white-space:normal;line-height:1.3}
.gm-fx{margin-top:10px}
.gm-fx b{color:var(--ink-2);font-weight:650}
#gm-fixed .gm-fx:first-of-type{margin-top:12px}

/* rail */
.gm-sbnote{margin:2px 0 10px;scroll-margin-top:120px;scroll-margin-bottom:12px}
.gm-pick{margin:4px 0 0}
#gm-chres{scroll-margin-top:120px;scroll-margin-bottom:12px}
.gm-host .step-b .obs{scroll-margin-top:120px}

/* connect */
.gm-prod{margin:0;padding-left:18px;font-size:var(--fs-cap);color:var(--ink-2);display:grid;gap:6px}
.gm-prod code{font-size:.9em;overflow-wrap:anywhere;word-break:break-word}
/* a command-line flag stays on one line ("--enable-dp-attention" broke after its first hyphen at 1440) */
.gm-prod code.gm-nw{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.gm-prod li{min-width:0;overflow-wrap:anywhere}
.gm-see{margin-top:12px}

/* mini result bar: one cell per GPU, filled with what it stores per token */
.gm-dk{display:flex;gap:2px;height:14px}
.gm-dk span{flex:1 1 0;position:relative;background:var(--surface-2);border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.gm-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--c-kv)}

/* home tile */
.tz-gm-vis{display:grid;gap:7px;margin-top:2px}
.tz-gm-row{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:8px}
.tz-gm-l{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);line-height:1.2}
.tz-gm-t{display:block;position:relative;height:12px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.tz-gm-f{position:absolute;left:0;top:0;bottom:0;background:var(--c-kv);transition:width .2s ease-out}
.tz-gm-cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
@media (prefers-reduced-motion:reduce){.tz-gm-f{transition:none}}

/* round 11: which KV head each block is, the line under copies in the legend, the mini result bar's label */
.gm-svg .gm-kl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.gm-sw-br{width:16px;height:5px;border-radius:0;border:1.2px solid var(--ink-2);border-top:0;background:none}
.gm-dkw{display:grid;gap:2px;min-width:0;overflow:hidden}
.gm-dk-l{font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.2;color:var(--ink-2);white-space:nowrap}
.gm-t1 tr.gm-t1-ref th,.gm-t1 tr.gm-t1-ref td{color:var(--ink-3)}
.gm-svg .gm-fan-n{stroke-dasharray:1.5 3.5;stroke-width:.8}
/* Show the math as short blocks (H2, 2026-10-09): a lead line, the formula, then the numbers on rows that line up at “=”;
   blocks are split by a hairline */
.gm-mb{padding:10px 0}
.gm-mb:first-child{padding-top:2px}
.gm-mb+.gm-mb{border-top:1px solid var(--line)}
.mathbody .gm-mb p{margin:0}
.mathbody .gm-ml{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.55;color:var(--ink-2)}
.gm-mg{display:grid;grid-template-columns:auto auto minmax(0,auto);justify-content:start;align-items:center;column-gap:.4em;row-gap:.4em;overflow-x:auto;padding-block:.3em}
.gm-mg .gm-mn{justify-self:end;text-align:right}
.gm-mg .gm-me{white-space:pre}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read): a long formula wraps between its
   pieces (before an operator), the next line indented under its first term */
.gm-mg{align-items:baseline}
.gm-mg .gm-mr{padding-left:1.2em;text-indent:-1.2em}
.gm-fp{display:inline-block;text-indent:0;white-space:nowrap}
/* a narrow stage (a phone, or the 900 px layout): the quantity's name takes its own line, the “=” rows follow under it at full width
   (a container query on the stage, not the window's width) */
@container (max-width:540px){
  .gm-mg{grid-template-columns:auto minmax(0,1fr)}
  .gm-mg .gm-mn{grid-column:1/-1;justify-self:start;text-align:left}
  .gm-mg>span:empty{display:none}
}
/* 精装修 step 2: 820 px tall or less (1536 × 730), the chart sits a little closer to the diagram, and closer again at 700 px or less
   (1366 × 650), so the stage fits without scrolling inside */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){.gm-chart{margin-top:10px;padding-top:8px}}
@media (min-width:761px) and (min-height:600px) and (max-height:700px){.gm-diag{margin-top:4px}.gm-chart{margin-top:8px;padding-top:6px}}
/* in English the subtitle takes two lines and the status a line of its own, and parts 6–7 still ran 29 px past 1536 × 730: the chart's
   rows are 2 px closer to their bars and the gaps between the diagram, the GPU line, the chart and its note a few px smaller */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  html[lang="en"] .gm-ch-h,html[lang="en"] .gm-ch-r{padding-top:2px;padding-bottom:2px}
  html[lang="en"] .gm-ch-h{padding-bottom:1px}
  html[lang="en"] .gm-chart{margin-top:6px;padding-top:6px}
  html[lang="en"] .gm-diag{margin-top:4px}
  html[lang="en"] #gm-gpuline{margin-top:4px}
  html[lang="en"] .gm-ch-note{margin-top:4px}
}

/* GRPO lab */
.grpo-app [hidden]{display:none!important}
.grpo-head{align-items:flex-start;gap:10px}
.grpo-st-title{font-weight:650;font-size:var(--fs-stage);min-width:0}
.grpo-transport{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:6px 0 10px}
.grpo-transport .ctl{margin:0}
.grpo-transport .seg-ctl{margin:0}
.grpo-pan{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;min-width:0}
.grpo-pan:first-of-type{border-top:0}
.grpo-pt{font-weight:600;font-size:var(--fs-cap);line-height:1.35;margin-bottom:4px;min-width:0}
.grpo-leg{margin:2px 0 4px;flex-wrap:wrap}
.grpo-gsvg,.grpo-csvg{display:block;width:100%;overflow:visible}
.grpo-gnote{min-height:2.7em;color:var(--ink-2);margin:2px 0 0}
.grpo-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.grpo-grid{stroke:var(--line-2);stroke-width:1}
.grpo-zero{stroke:var(--ink-3);stroke-width:1}
.grpo-empty{font-size:var(--fs-cap);fill:var(--ink-3)}
.grpo-chip rect{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.grpo-chip.ok rect{fill:var(--ink-2);stroke:var(--ink-2)}
.grpo-chip.no rect{fill:var(--surface);stroke:var(--ink-3);stroke-dasharray:3 2}
.grpo-chip.eq rect{opacity:.45}
.grpo-chip-a{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.grpo-chip.ok .grpo-chip-a,.grpo-chip.ok .grpo-chip-m{fill:var(--surface)}
.grpo-chip-m{font-size:var(--fs-mark);font-weight:700;fill:var(--ink-2)}
.grpo-rdot{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
.grpo-rdot.ok{fill:var(--ink-2)}
.grpo-base{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 4}
.grpo-base-t{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.grpo-adv.up{fill:var(--ink-2)}
/* H6: a negative advantage is the same filled bar as a positive one, pointing down (its direction and its label give the sign), so the
   legend's one bar names every bar; no hollow mark left unnamed */
.grpo-adv.dn{fill:var(--ink-2)}
.grpo-adv-t{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.grpo-adv-t.sm{font-size:var(--fs-mark)}
.grpo-eq-t{font-size:var(--fs-label);font-weight:650;fill:var(--ink-3)}
.sw.grpo-sw-ok{background:var(--ink-2)}
.sw.grpo-sw-no{background:var(--surface);border:1px dashed var(--ink-3)}
.sw.grpo-sw-base{background:transparent;border-top:2px dashed var(--ink);height:0;align-self:center}
.sw.grpo-sw-adv{background:var(--ink-2);width:6px}
.sw.grpo-sw-grad{background:repeating-linear-gradient(45deg,var(--ink-3) 0 2px,var(--surface) 2px 4px)}
.sw.grpo-sw-opt{background:var(--ink-3)}
.grpo-probs{display:grid;gap:3px}
.grpo-prow{display:grid;grid-template-columns:minmax(76px,auto) minmax(0,1fr) 44px 84px;gap:8px;align-items:center;width:100%;background:none;border:1px solid transparent;border-radius:6px;padding:2px 4px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.grpo-prow:hover{background:var(--surface-2)}
.grpo-prow.on{border-color:var(--ink-3);background:var(--surface-2)}
.grpo-pq{font-size:var(--fs-label);white-space:nowrap}
.grpo-ptrack{position:relative;height:12px;background:var(--sunken);border-radius:3px;min-width:0}
.grpo-pfill{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:3px;transition:width .2s}
.grpo-pref{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);z-index:1}
.grpo-pv{font-size:var(--fs-label);text-align:right}
.grpo-ptag{color:var(--ink-3);white-space:nowrap}
.grpo-chead{display:flex;flex-direction:column;gap:4px}
.grpo-chead .grpo-pt{margin:0}
.grpo-chead .ctl,.grpo-chead .seg-ctl{margin:0}
.grpo-line{fill:none;stroke:var(--ink);stroke-width:2}
.grpo-ghost{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:5 4}
.grpo-dot{fill:var(--ink)}
.grpo-cl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.grpo-cl.on{fill:var(--ink);font-weight:650}
.grpo-pq-line{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.grpo-pq-line.on{stroke:var(--ink);stroke-width:2.6}
.grpo-ptick{stroke:var(--ink-2);stroke-width:1.5}
.grpo-ckey{color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 14px}
.grpo-k{display:inline-flex;align-items:center;gap:4px}
.grpo-mem{display:grid;gap:8px;margin-top:4px}
.grpo-mrow{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr) 68px;gap:8px;align-items:center}
.grpo-mname{font-size:var(--fs-label);line-height:1.25}
.grpo-mtot{font-size:var(--fs-label);text-align:right;white-space:nowrap}
.grpo-mtrack{display:flex;gap:2px;min-width:0}
.grpo-mseg{display:flex;flex-direction:column;gap:2px;min-width:0;cursor:help}
.grpo-mbar{display:flex;height:16px;border-radius:3px;overflow:hidden;outline:1px solid var(--surface)}
.grpo-mseg.val .grpo-mbar{outline:2px solid var(--ink);outline-offset:-1px}
.grpo-mb{display:block;height:100%}
.grpo-mb.w{background:var(--c-weights)}
.grpo-mb.grad{background:repeating-linear-gradient(45deg,var(--ink-3) 0 2px,var(--surface) 2px 4px)}
.grpo-mb.opt{background:var(--ink-3)}
.grpo-mlab{font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grpo-mnote{margin:6px 0 0}
.grpo-metrics{margin-top:10px}
.grpo-metrics .metric .sub{font-size:var(--fs-mark)}
.grpo-math-line{margin:8px 0;overflow-x:auto;max-width:100%}
.grpo-ib{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.grpo-ib .inline-ctl{flex:1 1 200px;margin:0}
.grpo-j{cursor:pointer}
.grpo-prod li{margin-bottom:6px}
.grpo-dk{height:8px;background:var(--sunken);border-radius:3px;overflow:hidden;width:60px}
.grpo-dk i{display:block;height:100%;background:var(--ink-2)}
@media (max-width:760px){
  .grpo-prow{grid-template-columns:minmax(64px,auto) minmax(0,1fr) 40px;gap:6px}
  .grpo-ptag{display:none}
  .grpo-mrow{grid-template-columns:minmax(0,80px) minmax(0,1fr) 62px;gap:6px}
  .grpo-mlab{font-size:var(--fs-mark)}
}

.grpo-adv.big{fill:var(--c-oom);stroke:var(--c-oom)}
.grpo-big-t{font-size:var(--fs-mark);font-weight:650;fill:var(--c-oom);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.grpo-mrow .grpo-mfz{grid-column:2 / 4;color:var(--ink-3);margin-top:-4px}
.grpo-chead .seg-ctl button{white-space:nowrap}
.sw.grpo-sw-big{background:var(--c-oom)}
/* batch 9 review fixes: the curves of part 6 told apart by line style (S18), the questions as dots on the chosen curve; the note under
   the group keeps three lines on a phone so the stage does not jump while a run plays (R7.9) */
.grpo-pq-line.g2{stroke-dasharray:6 4}
.grpo-pq-line.g64{stroke-dasharray:1.5 3}
.grpo-pdot{fill:var(--ink);stroke:var(--surface);stroke-width:1.5;cursor:help}
@media (max-width:760px){.grpo-gnote{min-height:4.1em}}
/* the owner's review of 2026-10-09 */
/* 1. one control row: the speed label beside its buttons, every button the same height and the same font, so they share one baseline */
.grpo-transport .ctl{display:flex;align-items:center;gap:6px}
.grpo-transport .ctl>.lbl{font-size:var(--fs-cap);line-height:1.2}
.grpo-transport .btn.sm,.grpo-transport .seg-ctl{height:32px;box-sizing:border-box}
.grpo-transport .btn.sm{padding-top:0;padding-bottom:0;line-height:1.2}
.grpo-transport .seg-ctl button{padding:0 10px;font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.2}
.grpo-transport{padding-bottom:10px;border-bottom:1px solid var(--line)}
/* 2. the link to the advantage bars frames the bars only; a bar that is hovered, clicked or focused gets its own ring */
.grpo-bars-hl{fill:var(--surface-2);stroke:var(--ink);stroke-width:2}
.grpo-adv[data-tipx]{cursor:help}
.grpo-adv[data-tipx]:hover,.grpo-adv:focus{stroke:var(--ink);stroke-width:2.5px;outline:none}
.grpo-leg-hl{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
/* 4. the part of a formula a sentence talks about */
.grpo-mhl{background:var(--surface-2);outline:1.5px solid var(--ink-3);outline-offset:1px;border-radius:2px}
/* 6. the three kinds of groups: all right green, some right blue, all wrong red, in the bars, the legend and the words */
.grpo-prow.k-ok .grpo-pfill,.sw.grpo-sw-k.ok{background:var(--c-ok)}
.grpo-prow.k-mix .grpo-pfill,.sw.grpo-sw-k.mix{background:var(--c-weights)}
.grpo-prow.k-wrong .grpo-pfill,.sw.grpo-sw-k.wrong{background:var(--c-oom)}
.grpo-kt.ok{color:var(--c-ok)}
.grpo-kt.mix{color:var(--c-weights)}
.grpo-kt.wrong{color:var(--c-oom)}
.grpo-kt{font-weight:650}
.sw.grpo-sw-tick{width:2px;height:14px;background:var(--ink);border-radius:0;align-self:center}
.grpo-leg-lead{color:var(--ink-2)}
.grpo-pnote{margin:6px 0 0}
/* Show the math and the drill: a chain broken at “=”, each “=” under the one above */
.grpo-eqs{display:grid;grid-template-columns:max-content max-content minmax(0,max-content);column-gap:.4em;row-gap:.5em;align-items:center;margin:6px 0 10px;padding-block:.3em;overflow-x:auto;max-width:100%}
.grpo-eq-l{justify-self:end}
.grpo-eqs math{font-size:1.05em}
.grpo-mb-lead{margin:14px 0 4px}
.grpo-mb-lead:first-child{margin-top:4px}
.grpo-mb-sub{margin:6px 0 2px;color:var(--ink-2)}
/* Show the math reads as prose with formulas, not as code */
#grpo-mathbody{font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.6}

/* ---------- polish r4 (B4, R7.12): parts 5 and 6 fit a 1440 × 900 screen. Part 5 stacked the group (314 px), the bars (296 px) and
   the chart (282 px), so the stage scrolled 367 px inside itself; part 6's chart started 450 px down. On a stage at least 736 px wide
   the panels a part shows share rows (#grpo-pans[data-lay], set by panelsShow): part 5 the group beside the bars and the chart under
   both, drawn shorter (--grpo-ch, read by drawChart) with its title and its view buttons on one line; part 6 the bars beside the chart.
   A line between the columns and above the chart (R7.13). Same panels, same order, same animation; phones (≤ 760 px), narrower
   stages and the other parts keep the stacked layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .grpo-pans[data-lay]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;padding-top:6px}
  .grpo-pans[data-lay]>.grpo-pan{margin-top:0;padding-top:0;border-top:0}
  .grpo-pans[data-lay="gpc"]>#grpo-pan-probs,.grpo-pans[data-lay="pc"]>#grpo-pan-chart{border-left:1px solid var(--line);padding-left:15px}
  .grpo-pans[data-lay="gpc"]>#grpo-pan-chart{grid-column:1/-1;border-top:1px solid var(--line);padding-top:6px;margin-top:6px;--grpo-ch:120}
  .grpo-pans[data-lay="gpc"] .grpo-chead{flex-direction:row;align-items:center;justify-content:space-between;gap:4px 16px;min-height:36px}
  .grpo-pans[data-lay="gpc"] .grpo-chead .grpo-pt{flex:1 1 auto}
  .grpo-pans[data-lay="gpc"] #grpo-c-view .ctl{display:flex;align-items:center;gap:6px}
  /* part 5: the bars a little tighter, so they are no taller than the group beside them */
  .grpo-pans[data-lay="gpc"] .grpo-probs{gap:2px}
  .grpo-pans[data-lay="gpc"] .grpo-prow{padding-top:1px;padding-bottom:1px}
  .grpo-pans[data-lay="gpc"] #grpo-p-leg{row-gap:2px}
  .grpo-pans[data-lay="gpc"] .grpo-pnote{margin-top:4px}
  /* R7.9: a row keeps one height with and without its kind word; the group's title and note keep the lines their longest text needs
     (Chinese: 1 and 2; English: 2 and 3), so the row does not grow while the run plays */
  .grpo-pans[data-lay] .grpo-ptag{line-height:1.4}
  .grpo-pans[data-lay="gpc"] .grpo-gnote{min-height:3.1em}
  html[lang="en"] .grpo-pans[data-lay="gpc"] .grpo-gnote{min-height:4.65em}
  html[lang="en"] .grpo-pans[data-lay="gpc"] #grpo-g-title,html[lang="en"] .grpo-pans[data-lay="gpc"] #grpo-p-title{min-height:2.7em}
  /* English needs more lines above, so its chart is drawn a little shorter, the legend's lines closer, and part 5's metric cards take
     the line heights tool-scheduling uses (CONTRACT §19) */
  html[lang="en"] .grpo-pans[data-lay="gpc"]>#grpo-pan-chart{--grpo-ch:100}
  .grpo-pans[data-lay="gpc"] #grpo-g-leg{row-gap:2px}
  .grpo-stage[data-lay="gpc"] .grpo-metrics .metric .v{line-height:1.25}
  .grpo-stage[data-lay="gpc"] .grpo-metrics .metric .d{min-height:13px;line-height:1.1}
}}
/* four metric cards in one row of four on a wide stage, not four of five columns (desktop only: ≤ 760 px keeps its layout) */
@media (min-width:761px){@container (min-width:560px){.grpo-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.grpo-st-title,#grpo-g-title,#grpo-p-title,#grpo-g-note,#grpo-mathbody .grpo-mb-sub{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 5 still ran 36 px past the stage in Chinese and 73 in
   English, and part 8 30 px in English. Part 5's chart is drawn 100 px tall in both languages (120 in Chinese before) and part 8's 140
   (170), with their text at its size; the gaps under the buttons, between the panels and above the cards are 2–4 px smaller. The
   group's figure keeps its drawn height, so in English part 5 still runs 57 px past 1536 × 730 (164 on main) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .grpo-transport{margin-bottom:6px;padding-bottom:6px}
  .grpo-pans[data-lay]{padding-top:4px}
  .grpo-pans[data-lay="gpc"]>#grpo-pan-chart{--grpo-ch:100;padding-top:4px;margin-top:4px}
  .grpo-pans:not([data-lay])>#grpo-pan-chart{--grpo-ch:140}
  .grpo-metrics{margin-top:8px}
}}

/* kv-basics: the step × token grid of the toy, the Llama-3.1-8B speed and memory bars, the tile. Colours: tokens only (R5.6):
   computed cells are grayscale, cached cells are amber (KV cache) outlines, the weights are blue, red only for a stale value. */
.kvb-stage .stage-head{align-items:center}
.kvb-vseg{min-width:0}
.kvb-vseg button{padding:5px 9px;font-size:var(--fs-label);white-space:nowrap}

/* ---------- toy: one grid per layer, the tokens as columns, the decode steps as rows ---------- */
.kvb-graph{padding:10px 12px 12px}
.kvb-grid{--kvb-lab:58px;display:grid;gap:2px;min-width:0}
.kvb-row{display:grid;grid-template-columns:var(--kvb-lab) repeat(9,minmax(0,1fr));gap:2px;align-items:center;min-width:0}
.kvb-toks{align-items:end;margin-bottom:2px}
.kvb-tok{display:flex;flex-direction:column;align-items:center;min-width:0;font-family:var(--font-mono);line-height:1.15;padding-bottom:4px}
.kvb-tok i{font-style:normal;font-size:var(--fs-mark);color:var(--ink-3)}
.kvb-tok b{font-weight:600;font-size:var(--fs-label);color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
/* the word the latest decode step wrote (legend: "underlined"): a line along the bottom of its column head, drawn on the cell so the
   word's clipping box cannot cut it off, for words set across and upright alike (r12 N1) */
.kvb-tok.kvb-new{box-shadow:inset 0 -2px 0 var(--ink)}
.kvb-layer{display:grid;gap:2px;margin-top:4px}
.kvb-lcap{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);margin:2px 0 2px}
.kvb-rl{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;overflow:hidden;padding-left:4px;border-radius:2px;line-height:13px}
.kvb-rl[data-tipx]{cursor:help}
.kvb-srow{border-radius:3px}
.kvb-srow.kvb-done .kvb-rl{color:var(--ink-2)}
.kvb-srow.kvb-cur{background:var(--surface-2)}
.kvb-srow.kvb-cur .kvb-rl{color:var(--ink);font-weight:600}
.kvb-c{height:12px;border-radius:2px;box-sizing:border-box;min-width:0}
.kvb-c.kvb-comp{background:var(--ink-2)}
.kvb-c.kvb-read{border:2px solid var(--c-kv);background:transparent}
.kvb-chk{margin-top:2px}
.kvb-chk .kvb-rl{color:var(--ink-2)}
.kvb-d{font-size:var(--fs-mark);text-align:center;color:var(--ink-3);line-height:13px;white-space:nowrap;overflow:hidden;min-width:0}
.kvb-d.kvb-bad{color:var(--c-oom);font-weight:600}
.kvb-note{margin-top:10px}
/* legend swatches */
.sw.kvb-sw-comp{background:var(--ink-2);border-color:transparent}
.sw.kvb-sw-read{background:transparent;border:2px solid var(--c-kv)}
.sw.kvb-sw-cur{background:var(--surface-2);border-color:var(--line)}
.sw.kvb-sw-stale{background:var(--c-oom);border-color:transparent}
.sw.kvb-sw-new{background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0}
/* narrow stages: the English words stand upright so nine columns fit */
@container (max-width:560px){
  .kvb-grid{--kvb-lab:44px}
  .kvb-rl{font-size:var(--fs-mark);padding-left:2px}
  .kvb-d{font-size:var(--fs-mark);letter-spacing:-.02em}
  html[lang="en"] .kvb-tok b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--fs-mark);max-height:64px}
}

/* ---------- Llama-3.1-8B: speed bars and the memory bar ---------- */
.kvb-ctitle{font-size:var(--fs-cap);font-weight:650;margin:2px 0 8px;line-height:1.35}
.kvb-ctitle+.kvb-sp{margin-top:0}
.kvb-sp{display:grid;gap:10px;margin-bottom:14px}
.kvb-sprow{display:grid;gap:3px;border-radius:3px;cursor:help}
.kvb-sph{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:var(--fs-label)}
.kvb-spl{font-weight:600;color:var(--ink)}
.kvb-spv{font-size:var(--fs-label);color:var(--ink-2)}
.kvb-spt{position:relative;height:16px;background:var(--surface-2);border-radius:2px}
.kvb-spt i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:2px;min-width:2px;transition:width .22s ease-out}
.kvb-sprow[data-k="wo"] .kvb-spt i{background:var(--ink-3)}
.kvb-goal{position:absolute;top:-4px;bottom:-4px;width:0;border-left:1.5px dashed var(--ink)}
.kvb-axis{position:relative;height:15px;font-size:var(--fs-mark);color:var(--ink-3);margin-top:2px}
.kvb-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.kvb-axis span:first-child{transform:none}
.kvb-axis span:last-child{transform:translateX(-100%)}
.kvb-axlab{font-size:var(--fs-mark);color:var(--ink-3);text-align:right;margin-top:-2px}
.kvb-mem{position:relative;height:30px;border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden;cursor:help}
.kvb-mem i{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);padding-left:6px;box-sizing:border-box;transition:left .22s ease-out,width .22s ease-out}
.kvb-mw{left:0;background:var(--c-weights);color:var(--on-weights)}
.kvb-mk{background:var(--c-kv);color:var(--on-kv)}
.kvb-mf{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line) 5px 6px);padding:0!important}
.kvb-mem+.kvb-axis span:last-child{transform:translateX(-100%)}

/* ---------- rail ---------- */
.kvb-gen{gap:8px}
.kvb-genrow{display:flex;gap:8px;flex-wrap:wrap}
.kvb-genout{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--fs-cap);font-weight:620;color:var(--ink-2)}
.kvb-genout output{font-weight:500;color:var(--ink);font-size:var(--fs-cap)}
.kvb-genend{margin:0}
/* the “How these times are computed” link follows the part-6 result’s bold sentence, in the same paragraph */
.linkbtn.kvb-how{margin-left:2px}
.kvb-ch-res{scroll-margin-top:120px}

/* ---------- settings ---------- */
.kvb-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.kvb-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
#kvb-ctl-eff .lbl{display:block}

/* ---------- connect ---------- */
.kvb-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.kvb-prod li{margin-bottom:6px}
.kvb-see{margin-top:12px}

/* ---------- mini result bar ---------- */
.kvb-dkg{display:grid;grid-template-columns:repeat(9,5px);gap:1px;width:max-content}
.kvb-dkg i{width:5px;height:3px;border-radius:1px;background:transparent;box-sizing:border-box}
.kvb-dkg i.kvb-comp{background:var(--ink-2)}
.kvb-dkg i.kvb-read{background:var(--c-kv)}
.kvb-dks{display:grid;gap:3px;min-width:48px}
.kvb-dks i{display:block;height:5px;border-radius:2px;background:var(--ink-2);min-width:2px}
.kvb-dks i+i{background:var(--ink-3)}

/* ---------- home tile ---------- */
.kvb-tzv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kvb-tzf{margin:0;display:grid;gap:3px;justify-items:center;min-width:0}
.kvb-tzf figcaption{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2)}
.kvb-tzs{width:100%;max-width:96px;height:auto;display:block}
.kvb-tzbox{fill:none;stroke:var(--line);stroke-width:1}
.kvb-tzc{fill:var(--ink-2)}
.kvb-tzr{fill:none;stroke:var(--c-kv);stroke-width:2.2;stroke-linejoin:round}
.kvb-tzcells .kvb-tzr{stroke-width:1.3}
.kvb-tzn{font-size:var(--fs-mark);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.kvb-spt i,.kvb-mem i{transition:none}}

/* four metric cards: two columns on narrow stages, one row on wide ones */
.kvb-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.kvb-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the challenge shows only the two times */
.kvb-metrics.kvb-m2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* H1 (the owner, 2026-10-09): a formula the reader needs stands on its own line, typeset (A.ui.math); it scrolls sideways on a phone */
.kvb-fx{margin:6px 0;overflow-x:auto;max-width:100%}
/* H1/H2 (the owner, 2026-10-09): Show the math in short blocks with a hairline between them; in each block the name and the typeset
   formula, then this run's numbers under the terms they replace, the "=" signs lined up; a table wider than its box is set again by fitMath (below), so nothing scrolls sideways */
.kvb-mb{padding:8px 0 10px}
.kvb-mb+.kvb-mb{border-top:1px solid var(--line)}
.kvb-mb .kvb-mlead{margin:0 0 4px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5}
.kvb-mb .kvb-mvec{margin:0}
.kvb-fx{overflow-x:auto;max-width:100%}
.kvb-mt{border-collapse:collapse}
.kvb-mt th,.kvb-mt td{padding:1px 3px;text-align:center;white-space:nowrap;vertical-align:baseline;font-weight:400;border:0;background:none}
.kvb-mt th{font-family:var(--font-ui);text-align:right;white-space:nowrap;padding-right:6px;color:var(--ink-2)}
.kvb-mt tr.kvb-mname th{color:var(--ink);font-weight:600}
.kvb-mt tr.kvb-mname:not(:first-child) th,.kvb-mt tr.kvb-mname:not(:first-child) td{padding-top:8px}
.kvb-mt td.kvb-mres{text-align:left;white-space:normal}
.kvb-mb .kvb-mnote{margin:4px 0 0;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}
/* Show the math on a box too narrow for its table (the owner's review of 2026-10-09): fitMath sets the block again, the name on its own
   line, the formula broken before an operator with the numbers under the terms they replace, nothing scrolling sideways */
.kvb-mtn{border-collapse:collapse}
.kvb-mtn th,.kvb-mtn td{padding:1px 0;border:0;background:none;font-weight:400;text-align:left;vertical-align:top}
.kvb-mtn tr.kvb-mname th{font-family:var(--font-ui);font-weight:600;color:var(--ink);white-space:normal;padding:0 0 2px}
.kvb-mtn tr.kvb-mname:not(:first-child) th{padding-top:8px}
.kvb-mtn .kvb-mlbl{font-weight:400;color:var(--ink-2)}
.kvb-mtn td.kvb-meq{width:1%;padding-right:3px;white-space:nowrap}
.kvb-mtn td.kvb-mres{white-space:normal;padding-left:3px;line-height:1.5}
.kvb-mfl{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.kvb-mu{display:inline-grid;align-items:center;justify-items:center}
.kvb-mc{padding:1px 3px;white-space:normal;line-height:1.5;text-align:center}
.kvb-mc0{display:flex;align-items:center;justify-content:center;height:1.9em;white-space:nowrap}
.kvb-mtall .kvb-mc0{height:3.1em}
/* 精装修 step 2: 700 px tall or less (1366 × 650), the grid's frame and its note are tighter so the stage fits without scrolling inside */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){.kvb-graph{padding:4px 10px 4px}.kvb-toks{margin-bottom:0}.kvb-note{margin-top:4px}}

/* llm-judge: one pair of answers with length bars and the judge's verdicts, the 300 verdicts as marks grouped by kind (named beside
   them), and the win-rate bars with people's line. Colours (R5.6): grayscale only; green and red only for the challenge's goal. */
.ljg-stage .stage-head{align-items:center}
.ljg-graph{padding:12px 14px 14px;display:grid;gap:14px;min-width:0}
.ljg-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
/* H5 (the owner, 2026-10-09): a hairline between the verdicts (waffle) and the win-rate bars below them */
.ljg-graph>.ljg-wf:not([hidden])~.ljg-bars:not([hidden]){border-top:1px solid var(--line);padding-top:12px}
.ljg-phone:empty{display:none}
@media (min-width:761px){.ljg-phone{display:none}}

/* ---------- the pair ---------- */
.ljg-pair{border:1px solid transparent;border-radius:8px;padding:9px 11px 10px;background:var(--surface-2);display:grid;gap:7px;min-width:0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.ljg-q{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0}
.ljg-qn{font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap}
.ljg-qt{font-size:var(--fs-cap);color:var(--ink);line-height:1.4}
.ljg-anss{display:grid;gap:5px}
.ljg-ans{display:grid;grid-template-columns:18px minmax(0,1fr) 64px;gap:8px;align-items:center}
.ljg-ans b{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink)}
.ljg-lenbar{position:relative;height:12px;background:var(--surface);border-radius:2px}   /* inside a soft panel (var(--surface-2)), so a track or a highlight is var(--surface) (精装修 step 2) */
.ljg-lenbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px;transition:width .25s ease-out}
.ljg-w{font-size:var(--fs-mark);color:var(--ink-2);text-align:right;white-space:nowrap}
.ljg-vd{display:flex;flex-wrap:wrap;gap:4px 8px}
.ljg-vk{font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.ljg-vres{color:var(--ink);font-weight:650;border-color:var(--ink-3)}
.ljg-lr{margin:0;font-size:var(--fs-label);line-height:1.4}

/* ---------- the 300 verdicts ---------- */
.ljg-wfrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;min-width:0}
.ljg-wfbox{flex:1 1 300px;min-width:0}
.ljg-wfbox svg{display:block;max-width:100%;height:auto}
.ljg-wfleg{list-style:none;margin:0;padding:0;display:grid;gap:4px;flex:0 0 auto;min-width:150px}
.ljg-wfleg li{display:flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.3}
.ljg-wfleg li svg{flex:none}
.ljg-wfleg li b{margin-left:auto;padding-left:8px;font-size:var(--fs-label);color:var(--ink)}
.ljg-mf{fill:var(--ink-2)}
.ljg-mr{fill:none;stroke:var(--ink-2);stroke-width:1.3}
.ljg-md{stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.ljg-mx{stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;fill:none}
.ljg-mon{fill:none;stroke:var(--ink);stroke-width:1.6}
.ljg-svt{font-size:var(--fs-mark);fill:var(--ink-2);font-family:var(--font-mono)}
/* part 5: two 10 × 10 blocks of the 100 labelled pairs, side by side (R5.10) */
.ljg-agw{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-start}
.ljg-agb{margin:0;display:grid;gap:4px;min-width:0}
.ljg-agb figcaption{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3;max-width:180px}
.ljg-agb svg{display:block}

/* ---------- the win-rate bars; people's win rate is a line across them, labelled under the last bar ---------- */
.ljg-brows{display:grid;gap:6px}
.ljg-brow,.ljg-axis{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:10px;align-items:center;min-width:0}
.ljg-brow{border-radius:3px;outline-offset:2px;cursor:help}
.ljg-bl{font-size:var(--fs-label);line-height:1.3;color:var(--ink-2)}
.ljg-brow.on .ljg-bl{color:var(--ink);font-weight:650}
.ljg-bt{position:relative;height:20px;background:var(--surface-2);border-radius:2px;margin-right:42px}
.ljg-axis .ljg-bt{height:16px;background:none}
.ljg-bf{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px;transition:width .25s ease-out}
.ljg-brow.on .ljg-bf{background:var(--ink-2);box-shadow:inset 0 0 0 2px var(--ink)}
.ljg-brow.pp .ljg-bf{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 5px)}
.ljg-ci{position:absolute;top:50%;height:0;border-top:1.5px solid var(--ink);z-index:2}
.ljg-ci::before,.ljg-ci::after{content:'';position:absolute;top:-5px;height:8px;border-left:1.5px solid var(--ink)}
.ljg-ci::before{left:0}.ljg-ci::after{right:0}
.ljg-bv{position:absolute;top:50%;transform:translateY(-50%);margin-left:5px;font-size:var(--fs-label);font-style:normal;color:var(--ink);white-space:nowrap;z-index:3;background:var(--surface);padding:0 2px;border-radius:2px}
.ljg-hl{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--ink);z-index:4}
.ljg-50{position:absolute;top:0;bottom:0;width:0;border-left:1px dotted var(--ink-3);z-index:1}
.ljg-hlab,.ljg-50lab{position:absolute;top:1px;transform:translateX(-50%);font-size:var(--fs-mark);font-style:normal;white-space:nowrap}
.ljg-hlab{color:var(--ink);font-weight:650;background:var(--surface);padding:0 3px;border-radius:2px;z-index:2}
.ljg-50lab{color:var(--ink-3)}

/* ---------- the rail ---------- */
.ljg-lv .levers{margin-top:6px}
.ljg-pairnav{margin-top:6px}
.ljg-remlist{margin:0 0 10px;padding-left:18px;display:grid;gap:8px}
.ljg-remlist li{line-height:1.5}
.ljg-rem{font-size:var(--fs-label)}
.ljg-prac{margin-top:8px;border-top:1px solid var(--line-2);padding-top:6px}
.ljg-prac ul{margin:4px 0 0;padding-left:18px;display:grid;gap:3px}
.ljg-mt{margin-top:10px}
.ljg-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.ljg-goal.ljg-over b{color:var(--c-oom)}
.ljg-goal.met b{color:var(--c-ok)}
.ljg-cost b{color:var(--ink)}
.ljg-ch-res .cmp{margin-top:10px}
.fx{margin:6px 0;overflow-x:auto}

/* ---------- Settings ---------- */
.ljg-grp{border-top:1px solid var(--line-2);padding-top:8px;margin-top:4px}
.ljg-gh{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);margin-bottom:4px}
.ljg-asm{margin:0;padding-left:16px;display:grid;gap:3px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.ljg-asm b{color:var(--ink);font-weight:600}
.ljg-prod{padding-left:18px;display:grid;gap:6px;min-width:0}
.ljg-prod code,.ljg-prod a{overflow-wrap:anywhere}
.ljg-mh{margin:10px 0 2px}
/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.ljg-mb{padding:8px 0 10px}
.ljg-mb+.ljg-mb{border-top:1px solid var(--line)}
.ljg-mb>p{margin:0 0 6px}
.ljg-mb>p:last-child{margin-bottom:0}
.ljg-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.ljg-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.ljg-eqs-nm{grid-template-columns:max-content max-content}.ljg-eqs-nm>.ljg-eq-l{grid-column:1/-1;text-align:left}.ljg-eqs-nm>.ljg-eq-l:empty{display:none}}
/* a term whose tip holds a formula (log-odds, σ): it only explains, so it reads like a .def */
.ljg-app .t.ljg-td,.pop .t.ljg-td{cursor:help}
.ljg-app .t.ljg-td:hover,.ljg-app .t.ljg-td:focus,.pop .t.ljg-td:hover,.pop .t.ljg-td:focus{background:none;border-bottom:1px dotted var(--ink-3)}
.ljg-wait{margin:2px 0 0}

/* ---------- the mini result bar ---------- */
.ljg-dk{position:relative;height:10px;background:var(--surface-2);border-radius:2px;min-width:60px}
.ljg-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:2px}
.ljg-dk b{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--ink)}

@media (max-width:760px){
  .ljg-graph{padding:10px 10px 12px}
  .ljg-brow,.ljg-axis{grid-template-columns:minmax(0,1fr)}
  .ljg-axis .ljg-bl{display:none}
  .ljg-brow{gap:3px}
  .ljg-wfleg{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .ljg-ans{grid-template-columns:16px minmax(0,1fr) 58px}
}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4: “动画播放面板被整体顶得靠下了”) ----------
   At 1440 × 900 (Chinese) part 1 ran 13 px past the stage's 814 px and part 6 11 px, so the stage scrolled inside. Part 1's 300
   verdicts had been drawn before the stage took its width, 20 marks a row; watchStage() in llm-judge.js draws them again when the
   stage's width changes (30 a row, 80 px less). Part 6 shows four metric cards: in the kit's five columns the first card's line
   under the value wrapped (112 px cards). On a stage at least 736 px wide the cards take four columns and CONTRACT §19's compact
   line heights (value 1.25, change line 13 px), and the gaps between the pair, the verdicts and the bars, inside the picture's
   frame and the pair's box, and around the note on the simulation, are 1–5 px tighter. The blocks, their order and the hairline
   stay; phones and narrower stages are unchanged. */
@media (min-width:761px){@container (min-width:736px){
  .ljg-graph{gap:10px;padding:10px 14px 12px}
  .ljg-pair{gap:6px}
  .ljg-graph>.ljg-wf:not([hidden])~.ljg-bars:not([hidden]){padding-top:10px}
  .ljg-stage>.ljg-scope{margin:8px 0}
  .ljg-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}
  .ljg-metrics .metric .v{line-height:1.25}
  .ljg-metrics .metric .d{min-height:13px;line-height:13px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 4 and 6 still ran 5 and 31 px past the stage, in both
   languages. The figure's padding and gaps, the pair's padding and the space above the bars, the scope line, the metric cards and
   Show the math are 2–4 px smaller */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .ljg-graph{gap:6px;padding:8px 14px 8px}
  .ljg-pair{padding:6px 11px 7px}
  .ljg-graph>.ljg-wf:not([hidden])~.ljg-bars:not([hidden]){padding-top:6px}
  .ljg-stage>.ljg-scope{margin:6px 0}
  .ljg-metrics{margin-top:6px}
  .ljg-stage>details.math{margin-top:6px}
}}

/* lora: the memory chart (one main column with its labels beside it, narrow comparison columns, the GPU's dashed line, red hatching
   above it), the matrix picture (W to scale, B and A beside it), the rail's levers, the "remember" items, the challenge's goal rows.
   Colours (R5.6): the weights in the site's weights blue (4-bit weights hatched blue); the trained LoRA parameters in ink; the rest
   grayscale, hatching and dots; red only where memory goes over the GPU (R5.11); green and red only for the challenge's goal rows. */
.lora-app [hidden]{display:none!important}
.lora-stage .stage-head{align-items:center}
.lora-graph{padding:12px 14px 14px;min-width:0}
.lora-vis{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start;min-width:0}
.lora-vis>div{min-width:0}
.lora-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px;min-height:2.7em;text-wrap:balance}   /* a caption that takes two lines splits them evenly (精装修 step 2: at 13 px the last word no longer sits alone on the last line) */
.lora-mem,.lora-mat{min-width:0;overflow:hidden}
.lora-memsvg,.lora-matsvg{display:block;max-width:100%;overflow:visible}

/* ---------- the memory chart ---------- */
.lora-pbg{fill:var(--surface)}
.lora-pln{stroke:var(--ink-2);stroke-width:1.1}
.lora-pdot{fill:var(--ink-2)}
.lora-pq{fill:color-mix(in srgb,var(--c-weights) 22%,var(--surface))}
.lora-pqln{stroke:var(--c-weights);stroke-width:1.6}
.lora-poln{stroke:var(--c-oom);stroke-width:1.4}
.lora-memsvg rect[class^="lora-b-"]{stroke:var(--surface);stroke-width:1;outline:none}
.lora-memsvg rect[class^="lora-b-"][data-tipx]{cursor:help}
.lora-memsvg rect[class^="lora-b-"]:focus-visible{stroke:var(--ink);stroke-width:2}
.lora-b-w,.lora-b-fw{fill:var(--c-weights)}
.lora-b-fb{fill:var(--c-weights);fill-opacity:.6}
.lora-b-q4{fill:url(#lora-p-q)}
.lora-b-g{fill:url(#lora-p-g)}
.lora-b-c{fill:var(--ink-3)}
.lora-b-mv{fill:url(#lora-p-m)}
.lora-b-lr{fill:var(--ink)}
.lora-b-a{fill:var(--line)}
.lora-b-l{fill:url(#lora-p-l)}
.lora-over{fill:url(#lora-p-o);stroke:var(--c-oom);stroke-width:1.5;pointer-events:none}
.lora-brk{fill:none;stroke:var(--surface);stroke-width:3;stroke-linejoin:round;pointer-events:none}
.lora-colbox{fill:none;stroke:var(--ink-3);stroke-width:1;outline:none;cursor:help;pointer-events:all}
.lora-colbox.main{stroke:var(--ink);stroke-width:1.5;pointer-events:stroke}
.lora-colbox:focus-visible{stroke:var(--ink);stroke-width:2.5}
.lora-tot{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--ink)}
.lora-tot.bad{fill:var(--c-oom)}
.lora-mid{text-anchor:middle}
.lora-halo,.lora-capl{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.lora-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.lora-ax.main{fill:var(--ink);font-weight:650}
.lora-bl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.lora-capline{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 3}
.lora-capl{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--ink)}
.lora-oomt{font-family:var(--font-ui);font-size:var(--fs-mark);font-weight:700;fill:var(--c-oom)}

/* legend beside the chart, under it (R5.9) */
.lora-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.35;color:var(--ink-2)}
.lora-leg>span{display:inline-flex;align-items:center;cursor:help}
.lora-leg .sw{width:12px;height:10px;margin-right:5px;flex:none}
.lora-sw-w,.lora-sw-fw{background:var(--c-weights);border-color:transparent}
.lora-sw-fb{background:var(--c-weights);opacity:.6;border-color:transparent}
.lora-sw-q4{background:repeating-linear-gradient(135deg,var(--c-weights) 0 1.5px,color-mix(in srgb,var(--c-weights) 22%,var(--surface)) 1.5px 4px);border-color:var(--c-weights)}
.lora-sw-g{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1px,var(--surface) 1px 4px);border-color:var(--ink-3)}
.lora-sw-c{background:var(--ink-3);border-color:transparent}
.lora-sw-mv{background:radial-gradient(circle,var(--ink-2) 0 1px,transparent 1.3px) 0 0/4px 4px,var(--surface);border-color:var(--ink-3)}
.lora-sw-lr{background:var(--ink);border-color:transparent}
.lora-sw-a{background:var(--line);border-color:var(--ink-3)}
.lora-sw-l{background:repeating-linear-gradient(90deg,var(--ink-2) 0 1px,var(--surface) 1px 4px);border-color:var(--ink-3)}
.lora-sw-cap{background:none;border:0;border-top:2px dashed var(--ink);height:0!important;border-radius:0}
.lora-sw-over{background:repeating-linear-gradient(135deg,var(--c-oom) 0 1.5px,transparent 1.5px 4px);border-color:var(--c-oom)}

/* ---------- the matrix picture ---------- */
.lora-matp .ctl{margin:0 0 6px}
.lora-matp .seg-ctl button{padding:5px 2px;font-size:var(--fs-label)}
.lora-matp .seg-ctl{flex-wrap:wrap}   /* in the narrow column at 761 px the seven keys take two rows instead of running past the panel */
.lora-w{fill:color-mix(in srgb,var(--c-weights) 30%,var(--surface));stroke:var(--c-weights);stroke-width:1;cursor:help;outline:none}
.lora-w.tr{fill:var(--c-weights)}
.lora-w.q4{fill:url(#lora-p-q)}
.lora-w:focus-visible,.lora-ba:focus-visible{stroke:var(--ink);stroke-width:2}
.lora-ba{fill:var(--ink);cursor:help;outline:none}
.lora-bxa{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.75;cursor:help}
.lora-ml{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
/* B·A's label under W's: a small dashed square like the outline drawn inside W (the owner's review of 2026-10-08: every block's shape) */
.lora-ml.lora-mlba{fill:var(--ink-2)}
.lora-bxs{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:2 2;opacity:.75}
.lora-matnote{margin:6px 0 0;font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
.lora-matnote.lora-nolora{color:var(--ink);font-weight:600}

/* ---------- part 1: the idea, two paths (review codex-b9v3 应修 2): W in the weights blue, A and B in ink like the LoRA block ---------- */
.lora-ideasvg{display:block;max-width:100%;overflow:visible;margin:2px auto 0}
.lora-il{font-family:var(--font-ui);font-size:var(--fs-label);fill:var(--ink);pointer-events:none}
.lora-il.m{font-family:var(--font-mono);font-size:var(--fs-mark)}
.lora-il.b{font-weight:700;font-size:var(--fs-cap)}
.lora-il.s{font-size:var(--fs-mark);fill:var(--ink-2)}
.lora-il.in{fill:var(--surface);font-weight:700;font-size:var(--fs-label)}
.lora-iln{fill:none;stroke:var(--ink-3);stroke-width:1.4}
.lora-arrh{fill:var(--ink-3)}
.lora-vec{fill:var(--sunken);stroke:var(--ink-3);stroke-width:1;cursor:help;outline:none}
.lora-plus{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.4;cursor:help;outline:none}
.lora-vec:focus-visible,.lora-plus:focus-visible{stroke:var(--ink);stroke-width:2}

/* ---------- metric cards ---------- */
.lora-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.lora-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- rail ---------- */
.lora-fx{margin:8px 0;overflow-x:auto;max-width:100%}
/* H2 (the owner, 2026-10-09): a formula with its name in words on the left; a chain breaks at “=” onto lines that line up */
.lora-eq{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:.45em;align-items:baseline;margin:8px 0}
.lora-eq-n{max-width:10em;line-height:1.35}
.lora-eq .lora-fx{margin:0}
/* a long line wraps before a top-level “+” or “−” (WRP), each new line under its first term, its “=” on the first line's baseline; on a
   phone-width stage the name goes on its own line above the chain (the owner's review of 2026-10-09: no row scrolls sideways) */
.lora-wr{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.3em}
.lora-wr>span{flex:none}
@container (max-width:480px){.lora-eq{grid-template-columns:auto minmax(0,1fr)}.lora-eq-n{grid-column:1 / -1;max-width:none}.lora-eq-n:empty{display:none}}
/* Show the math: one block per quantity, a hairline between blocks (H5) */
.lora-mh{font-weight:650;color:var(--ink);margin:14px 0 4px;padding-top:10px;border-top:1px solid var(--line)}
.lora-mh:first-child{border-top:0;padding-top:0;margin-top:4px}
.lora-lv{margin:8px 0}
.lora-verdict{margin-top:0}
/* each misconception, then the button that puts its case in the chart, under it (the button names the case, so it needs the width) */
.lora-rem{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 10px;align-items:start;margin:0;padding:10px 0;border-top:1px solid var(--line-2)}
.lora-rem:first-child{border-top:0;padding-top:2px}
.lora-rem p{margin:0;font-size:var(--fs-cap);line-height:1.5}
.lora-remb{white-space:nowrap;justify-self:start}
.lora-mt{margin-top:10px}
.lora-goal.lora-miss{border-color:var(--c-oom);background:var(--c-oom-soft)}
.lora-goal.met{border-color:var(--c-ok);background:var(--c-ok-soft)}
.lora-ch-res .cmp{margin-top:10px}
/* the challenge's summary (review codex-b9v3 应修 5): each memory block with the setting that shrinks it, your plan next to the least */
.lora-sum{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:var(--fs-cap);line-height:1.35}
.lora-sum caption{caption-side:top;text-align:left;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:0 0 4px}
.lora-sum th,.lora-sum td{padding:6px 6px 6px 8px;border-top:1px solid var(--line-2);text-align:left;vertical-align:top}
.lora-sum thead th{border-top:0;font-size:var(--fs-label);font-weight:650;color:var(--ink-2);padding-top:2px;padding-bottom:4px}
.lora-sum tbody th{font-weight:600;color:var(--ink);width:44%}
/* two plans side by side in the 246–266 px rail of wider screens: three columns would push the English table past the card, so each
   block's name takes its own line and the two plans sit under it (grid; the table markup stays) */
@media (min-width:761px){
  .lora-sum.two,.lora-sum.two caption,.lora-sum.two thead,.lora-sum.two tbody{display:block}
  .lora-sum.two tr{display:grid;grid-template-columns:1fr 1fr}
  .lora-sum.two thead th:first-child{display:none}
  .lora-sum.two tbody th{grid-column:1/-1;width:auto;padding-bottom:2px}
  .lora-sum.two tbody td,.lora-sum.two tr.lora-sumtot td{border-top:0;padding-top:2px}
  .lora-sum.two tr.lora-diff{box-shadow:inset 3px 0 0 var(--ink)}
  .lora-sum.two tr.lora-diff th{box-shadow:none}
}
.lora-sum tbody th span{display:block;font-weight:400;font-size:var(--fs-label);color:var(--ink-3)}
.lora-sum td b{font-weight:650;font-size:var(--fs-cap);white-space:nowrap}
.lora-sset{display:block;font-size:var(--fs-label);color:var(--ink-2)}
.lora-sum tr.lora-diff th{box-shadow:inset 3px 0 0 var(--ink)}
.lora-sum tr.lora-diff .lora-sset{color:var(--ink);font-weight:700}
.lora-sum tr.lora-sumtot th,.lora-sum tr.lora-sumtot td{border-top:1.5px solid var(--ink-3)}
.lora-sum td.lora-bad b{color:var(--c-oom)}
.lora-sumkey{margin:2px 0 6px}
.lora-allp{margin:10px 0 0;border-top:1px solid var(--line-2);padding-top:6px}
.lora-allp>summary{cursor:pointer;font-size:var(--fs-cap);font-weight:650;color:var(--ink);padding:4px 0}

/* Settings: the estimation assumptions, closed by default (review codex-b9v3 应修 2) */
.lora-asm{margin:4px 0 0}
.lora-asm>summary{cursor:pointer;font-size:var(--fs-cap);font-weight:650;color:var(--ink-2);padding:4px 0}
.lora-asm[open]>summary{margin-bottom:2px}

/* ---------- Connect ---------- */
.lora-prod{margin:0;padding-left:18px;display:grid;gap:8px;font-size:var(--fs-cap)}
.lora-prod code{word-break:break-all}

/* ---------- the dock (phones) ---------- */
.lora-dk{position:relative;display:flex;height:12px;border:1px solid var(--line);border-radius:2px;background:var(--surface);overflow:hidden}
.lora-dk i{display:block;height:100%}
.lora-dk i.w{background:var(--c-weights)}
.lora-dk i.s{background:var(--ink)}
.lora-dk i.a{background:var(--line)}
.lora-dk b{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--ink)}

@media (max-width:760px){
  .lora-vis{grid-template-columns:minmax(0,1fr);gap:12px}
  .lora-cap{min-height:0}
  .lora-vis.lora-idea .lora-matp{order:-1}
}
/* H5 (the owner, 2026-10-09: “信息过多，需要分割线”): the stage's two blocks, the memory chart and one matrix with its B and A, each keep
   their heading and are separated by a hairline in the kit's line colour: beside each other a vertical one, stacked a horizontal one */
@media (min-width:761px){.lora-vis>.lora-memp:not([hidden])~.lora-matp:not([hidden]){border-left:1px solid var(--line);padding-left:16px}}
@media (max-width:760px){
  .lora-vis:not(.lora-idea)>.lora-memp:not([hidden])~.lora-matp:not([hidden]){border-top:1px solid var(--line);padding-top:12px}
  .lora-vis.lora-idea>.lora-memp:not([hidden]):has(~.lora-matp:not([hidden])){border-top:1px solid var(--line);padding-top:12px}}

/* ---------- MHA lab (prefix mha-) ----------
   Attention weights and tokens are grayscale; blue (--c-weights) only for the weight matrices Wq, Wk, Wv, Wo (R5.6).
   Green and red appear only in the status badge and the challenge (goal met / missed). */
.mha-app .stage-head>div:first-child{min-width:0}
.mha-st-title{font-weight:680;font-size:var(--fs-stage);line-height:1.3;margin-top:3px}
.mha-app .legend-row>span{cursor:help;display:inline-flex;align-items:center}
.mha-app .legend-row>span[data-jump]{cursor:pointer}
/* legend swatches */
.sw.mha-sw-q{background:var(--ink);border-color:var(--ink)}
.sw.mha-sw-bar{background:var(--ink);border-color:var(--ink);width:6px;height:12px;border-radius:1px}
.sw.mha-sw-mask{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.2px,transparent 1.2px 3.6px);border-color:var(--line)}
.sw.mha-sw-need{background:transparent;border:1.5px dashed var(--ink)}
.sw.mha-sw-off{background:var(--ink-3);border-color:var(--ink-3);opacity:.45}
.sw.mha-sw-w{background:var(--c-weights);border-color:transparent}

/* the attention grid: token boxes on top, one row of bars per head; columns are as wide as the words need */
.mha-graph{padding:12px 14px 12px}
.mha-grid{display:grid;gap:8px;min-width:0}
.mha-toks,.mha-cells{display:grid;grid-template-columns:var(--mha-cols);column-gap:4px;min-width:0}
.mha-tok{position:relative;min-width:0;height:30px;padding:0 2px;border:1px solid var(--line);border-radius:4px;background:var(--surface);
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:28px;text-align:center}
.mha-tok:hover{border-color:var(--ink)}
.mha-tok.q{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.mha-tok.later{color:var(--ink-3);border-style:dotted}
.mha-tok.need{outline:1.5px dashed var(--ink);outline-offset:2px}
.mha-tok.q.need{outline-color:var(--ink)}
.mha-tok:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mha-idx{display:grid;grid-template-columns:var(--mha-cols);column-gap:4px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);text-align:center;margin-top:-4px}
.mha-row{display:grid;gap:3px;border-radius:4px;padding:2px 0}
.mha-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mha-rlab{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);line-height:1.35;overflow-wrap:anywhere;cursor:help;text-wrap:balance}
.mha-rlab b{color:var(--ink);font-weight:650}
.mha-cell{display:grid;grid-template-rows:14px 32px;min-width:0;cursor:help}
.mha-cell .mha-pv{text-align:center;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:14px;color:var(--ink);white-space:nowrap;overflow:visible;pointer-events:none}
.mha-bz{position:relative;background:var(--surface-2);border-radius:2px;min-width:0}
.mha-bar{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(22px,64%);background:var(--ink);border-radius:2px 2px 0 0;transition:height .18s ease-out}
.mha-cell.masked .mha-bz{background:repeating-linear-gradient(135deg,var(--line) 0 1.2px,transparent 1.2px 5px);box-shadow:inset 0 0 0 1px var(--line-2)}
.mha-row.off .mha-cells,.mha-row.off .mha-rlab{opacity:.42}
.mha-row.off .mha-bar{background:var(--ink-3)}
/* a head this part does not show yet: its label and a thin empty track */
.mha-row.dim{gap:2px}
.mha-row.dim .mha-rlab{color:var(--ink-3)}
.mha-row.dim .mha-rlab b{color:var(--ink-3)}
.mha-row.dim .mha-cell{grid-template-rows:0 8px;cursor:default}
.mha-row.dim .mha-cells{opacity:.6}
.mha-q-mark{font-size:var(--fs-mark)}
.mha-cap{font-size:var(--fs-cap);color:var(--ink-2);margin:10px 0 0;line-height:1.45}
.mha-masknote{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);background:var(--surface-2);border-radius:4px;padding:10px 12px;line-height:1.45}
/* narrow stages: smaller words and numbers so all 9 columns fit */
@container (max-width:470px){.mha-tok{font-size:var(--fs-mark);height:26px;line-height:24px}.mha-cell{grid-template-rows:13px 28px}.mha-cell .mha-pv{font-size:var(--fs-mark);line-height:13px}.mha-rlab{font-size:var(--fs-mark)}.mha-toks,.mha-cells,.mha-idx{column-gap:2px}.mha-bar{width:min(16px,70%)}}

/* the four weight matrices (blue); ink lines mark where the numbers split into heads */
.mha-mats{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.mha-mats-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end}
.mha-mat{display:grid;justify-items:center;gap:3px;cursor:help;border-radius:3px}
.mha-mat:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mha-mat svg{display:block;overflow:visible}
.mha-mat .mc{fill:var(--c-weights)}
.mha-mat .mn{fill:var(--surface);stroke:var(--c-weights);stroke-width:1}
.mha-mat .mz{fill:var(--surface-2)}
.mha-mat .ms{stroke:var(--ink);stroke-width:1.6}
.mha-mat .mf{fill:none;stroke:var(--line);stroke-width:1}
.mha-mat span{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2)}
.mha-mats .mha-cap{margin-top:8px}
.mha-mleg{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);margin-top:6px}
.mha-mleg>span{display:inline-flex;align-items:center;gap:5px;cursor:help}
.mha-mleg i{display:inline-block;width:10px;height:10px;border-radius:1px}
.mha-mleg .k1{background:var(--c-weights)}
.mha-mleg .k2{background:var(--surface);box-shadow:inset 0 0 0 1px var(--c-weights)}
.mha-mleg .k3{width:14px;height:0;border-top:1.6px solid var(--ink)}

/* metrics: four cards */
.mha-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:520px){.mha-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mha-metrics .metric{cursor:help}
.mha-metrics .metric .k{text-transform:none;letter-spacing:0}
.mha-metrics .metric .sub{overflow-wrap:anywhere}
.mha-metrics .metric .d{height:auto;min-height:15px;line-height:1.2}   /* 12 px since kit polish r2 (M1); a line about as tall as before (14.4 px, was 14.3 px) */

/* the word picker (a single choice among the 9 words) and the head switches (several can be on) */
.mha-words{display:flex;flex-wrap:wrap;gap:4px}
.mha-words button{flex:0 0 auto;min-width:34px;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.mha-words button:hover{border-color:var(--ink)}
.mha-words button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.mha-onbtns{display:flex;flex-wrap:wrap;gap:5px}
.mha-onbtns button{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.mha-onbtns button::before{content:"";width:13px;height:13px;border:1.5px solid var(--ink-3);border-radius:2px;box-sizing:border-box;flex:none}
.mha-onbtns button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.mha-onbtns button[aria-pressed="true"]::before{border-color:var(--ink);background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/10px no-repeat}
.mha-onlist{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.mha-app .inline-ctl .ctl-note{margin-top:1px}

/* show the math */
.mha-app .mathbody p{overflow-wrap:anywhere}
.mha-mh{font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.02em;color:var(--ink-3);margin:8px 0 4px}
.mha-mtab{overflow-x:auto;margin:6px 0}
.mha-mtab table{border-collapse:collapse;font-family:var(--font-mono);font-size:var(--fs-label);min-width:100%}
.mha-mtab th,.mha-mtab td{padding:3px 7px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-2)}
.mha-mtab th{font-weight:600;color:var(--ink-2);text-align:right;vertical-align:bottom}
.mha-mtab td:first-child,.mha-mtab th:first-child{text-align:left}
.mha-mtab tr.best td{font-weight:650;color:var(--ink)}
.mha-mhp{margin:8px 0 2px}
.mha-mhp .seg-ctl{max-width:320px}
.mha-mhp .seg-ctl button{padding:5px 6px;font-size:var(--fs-label)}
.mha-mxs{margin-top:10px}
.mha-mxs summary{cursor:pointer;font-family:var(--font-ui);font-size:var(--fs-cap);font-weight:620}
.mha-mx{border-collapse:collapse;font-family:var(--font-mono);font-size:var(--fs-mark);margin:4px 0 10px}
.mha-mx td,.mha-mx th{padding:1px 5px;text-align:right;white-space:nowrap}
.mha-mx th{color:var(--ink-3);font-weight:500}
.mha-mx tr.split td{border-top:1.5px solid var(--ink)}

/* rail extras */
.mha-app .obs .mono.small{margin:3px 0;overflow-wrap:anywhere}
.mha-app .step-b a,.mha-app .obs a{text-underline-offset:2px}
#mha-insight>.eyebrow{text-transform:none;letter-spacing:.01em}
.mha-app .goal+.progress{margin-bottom:8px}
.goal.mha-bad b{color:var(--c-oom)}
.progress.mha-bad i{background:var(--c-oom)}
.mha-app .preset span{overflow-wrap:anywhere}
#mha-ch-res{scroll-margin-top:120px;scroll-margin-bottom:12px}
/* the challenge chart: two bars per choice of heads ("because" and "cat"), the 80% goal dashed */
.mha-cmp{margin:14px 0 6px}
.mha-cmp .cmp-title{font-size:var(--fs-cap);font-weight:650;margin:0 0 2px}
.mha-cr{margin-top:10px}
.mha-cr .cmp-lab{margin-bottom:3px}
.mha-cb{display:grid;grid-template-columns:4.6em minmax(0,1fr);align-items:center;gap:6px;margin-top:3px}
.mha-cb>span:first-child{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mha-cr .cmp-track{margin:0 38px 0 0}
.mha-cr.ok .cmp-track i{background:var(--c-ok)}
.mha-cr:not(.ok) .cmp-track i{background:var(--ink-3)}
.mha-cr.me .cmp-track{box-shadow:0 0 0 1.5px var(--ink)}
.mha-cr.me .cmp-lab{color:var(--ink);font-weight:650}
.mha-cmp .cmp-axis{margin:5px 38px 0 calc(4.6em + 6px)}
.mha-cmp .cmp-leg i.ok{background:var(--c-ok)}

/* mini result bar: the best head's weight on each of the 9 words */
.mha-strip{display:flex;align-items:flex-end;gap:2px;height:22px;min-width:48px}   /* no wider than the kit's .dk-bar minimum, so it never runs into the sentence */
.mha-strip i{flex:1 1 0;background:var(--ink);border-radius:1px 1px 0 0;min-height:1px}
.mha-strip i.m{background:var(--line);min-height:22px;opacity:.5}
@media (max-width:880px){.mha-dk-mem{display:none}}
@media (max-width:560px){#dock .status.mha-dk-st{white-space:normal;max-width:11em;line-height:1.25;text-align:left;text-wrap:balance}}
/* on phones the challenge sentence (with the heads-off count, N6) wraps to three lines: keep a little air above and below it */
@media (max-width:760px){#dock .dock-in:has(.mha-dk-st){padding-top:5px;padding-bottom:5px}}

/* connect */
.mha-prod{margin:0 0 8px;padding-left:18px;display:grid;gap:6px;font-size:var(--fs-cap);line-height:1.5}
.mha-app .c-card code{overflow-wrap:anywhere}

/* home tile */
.mha-tz{display:grid;gap:4px}
.mha-tz .mha-toks,.mha-tz .mha-cells{column-gap:2px}
.mha-tz .mha-tok{height:22px;line-height:20px;font-size:var(--fs-mark);cursor:default;padding:0 1px}
.mha-tz .mha-cell{grid-template-rows:12px 24px;cursor:default}
.mha-tz .mha-cell .mha-pv{font-size:var(--fs-mark);line-height:12px}
.mha-tz .mha-rlab{font-size:var(--fs-mark);cursor:default}
.mha-tz-cap{margin:0;font-size:var(--fs-label);line-height:1.35;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.mha-cell .mha-bar{transition:none}}
/* challenge goal lines: the label can wrap; the value keeps to one line and moves under it on phones */
.mha-app .goal.mha-goal{flex-wrap:wrap}
.mha-app .goal.mha-goal>span:last-child{margin-left:auto;white-space:nowrap}
/* the word picker inside a part card: a little tighter, so the card and its result fit one screen at 1440 × 1000 (R3.10) */
.mha-app .inline-ctl .mha-words button{padding:3px 8px}

/* part 3 keeps “it” for part 4: its buttons look unavailable and say why on hover */
.mha-app .mha-words button.mha-later,.mha-app .mha-tok.mha-later{opacity:.45;cursor:not-allowed}

.mha-app .mha-nw{white-space:nowrap}
/* Show the math as a few blocks (the owner, 2026-10-09, H1/H2): a lead line in words, the formula typeset, then the numbers; a hairline
   between blocks */
.mha-app .mha-mb{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.mha-app .mha-mlead{font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.5;color:var(--ink-2);margin:2px 0 4px}
.mha-app .mha-math-line{overflow-x:auto;max-width:100%;margin:4px 0;font-size:var(--fs-stage)}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read). A formula: the name with “=” first; the
   right-hand side beside it while its widest term fits there, else on its own line, indented under the name; its terms wrap onto the
   next line under its first term. The two tables: a key k wraps between its numbers, and on a phone-wide stage the columns sit closer */
.mha-app .mha-fw{display:flex;flex-wrap:wrap;align-items:baseline;padding-left:1.4em}
.mha-app .mha-fwn{flex:none;margin-left:-1.4em;white-space:nowrap}
.mha-app .mha-fwr{flex:1 1 0%;min-width:min-content}
.mha-app .mha-fg{display:inline-block;max-width:100%}
.mha-app .mha-fp{display:inline-block;white-space:nowrap}
.mha-mtab-s table,.mha-mtab-w table{min-width:0}
.mha-mtab td.mha-k,.mha-mtab th.mha-k{white-space:normal;text-align:left;text-wrap:balance}
.mha-mtab td.mha-k{color:var(--ink-2)}
.mha-mtab th.mha-aw{white-space:normal}
@container (max-width:480px){.mha-mtab th,.mha-mtab td{padding:3px 4px}}
.mha-mtab th math{font-size:var(--fs-label)}
/* ---------- polish r5 (B4, R7.12): parts 7 and 8 fit a 1440 × 900 screen. With four heads the stage stacked the words and the four
   head rows (336 px), the four weight matrices with their legend and caption under them (141 px) and four metric cards, so it scrolled
   26 px inside itself (English 82: there the status took a line of its own under the title). On a stage at least 736 px wide the
   matrices' legend and caption stand beside the matrices (they used about 300 px of the row), the status stays beside the title and the
   kicker wraps under it instead, the metric cards take the tighter value line of CONTRACT §19, and a few gaps are tighter, as moe's.
   Same pieces in the same order, the hairline over the matrices kept; phones (≤ 760 px) and narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .mha-stage>.stage-head{flex-wrap:nowrap}
  .mha-stage>.stage-head>.stage-actions{flex:none}
  .mha-stage>.legend-row{margin-top:8px}
  .mha-graph{margin-top:10px}
  .mha-mats{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;margin-top:10px;padding-top:10px}
  .mha-mats-row{grid-row:1/3}
  .mha-mleg{margin-top:0;align-self:end}
  .mha-mats .mha-cap{margin-top:6px;align-self:start}
  .mha-metrics{margin-top:8px}
  .mha-metrics .metric .v{line-height:1.25}
  .mha-stage>details.math{margin-top:8px;padding-top:8px}
}}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and parts 7 and 8 still ran 35 px past it at 1536 × 730; each head's row of weights is 4 px shorter (bars 28 px,
   the numbers keep their 14 px line), the gaps around the matrices are tighter, and the figure's padding is 8 px top and bottom (the
   English legend takes two lines) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  .mha-stage .mha-grid{gap:6px}
  .mha-stage .mha-row{padding:1px 0}
  .mha-stage .mha-cell{grid-template-rows:14px 28px}
  .mha-stage .mha-cap{margin-top:6px}
  .mha-stage .mha-mats{margin-top:6px;padding-top:6px}
  .mha-stage .mha-graph{padding-top:8px;padding-bottom:8px}
}

/* model-parallel: the pipeline Gantt chart (one row per GPU, outlined forwards, solid backwards, hatched idle time; red outline while
   the bubble is the point), its player; the layer view (the MLP's two weight matrices in blue, cut by columns and rows, the partial
   results and the all-reduce) with the layer's timeline; the cluster grid and the memory bar per GPU.
   Colours (R5.6): grayscale; blue only for weights; red only for waiting that is the failure (bubble in parts 1–3, all-reduces over
   InfiniBand, memory over 80 GB); green only for the challenge's goal. */
.mp-app [hidden]{display:none!important}
.mp-stage .stage-head{align-items:center}
.mp-graph{padding:12px 14px 14px;display:grid;gap:14px;min-width:0}
.mp-graph>div{min-width:0}
/* H5 (the owner, 2026-10-09: “需要分割线之类”): the stage's blocks (the cluster, the pipeline picture, one layer) and the parts inside
   them (the layout and the memory bar; the MLP block and its timeline) are set off by hairlines in the kit's line colour */
.mp-graph>.mp-clbox:not([hidden])~.mp-gbox:not([hidden]),.mp-graph>.mp-clbox:not([hidden])~.mp-lbox:not([hidden]),.mp-graph>.mp-gbox:not([hidden])~.mp-lbox:not([hidden]){border-top:1px solid var(--line);padding-top:14px}
#mp-lt-cap{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.mp-phone{display:none}
.mp-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px;text-wrap:balance}   /* a caption that takes two lines splits them evenly (精装修 step 2) */

/* ---------- the Gantt chart: a 96 px label column, then the track ---------- */
.mp-gantt{--mp-lab:96px;position:relative;min-width:0;cursor:help;outline-offset:3px}
.mp-grows{position:relative;display:grid;gap:4px}
.mp-grow{display:grid;grid-template-columns:var(--mp-lab) minmax(0,1fr);align-items:center;min-height:30px}
.mp-glab{font:600 var(--fs-label)/1.15 var(--font-ui);color:var(--ink);padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-glab small{display:block;font:var(--fs-mark)/1.2 var(--font-mono);font-weight:400;color:var(--ink-3)}
.mp-gtrk{position:relative;height:22px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.mp-gtrk i{position:absolute;top:0;bottom:0;box-sizing:border-box;font:600 var(--fs-mark)/20px var(--font-mono);font-style:normal;text-align:center;overflow:hidden;white-space:nowrap}
.mp-cf{background:var(--surface);border:1.5px solid var(--ink-2);color:var(--ink-2);border-radius:2px}
.mp-cb{background:var(--ink-2);border:1.5px solid var(--ink-2);color:var(--surface);border-radius:2px}
.mp-ci{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px)}
.mp-ci.red{border:1.5px solid var(--c-oom);background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 3px,transparent 3px 5px);border-radius:2px}
/* owner b8 (2), (4): a block of 1F1B's alternation (forwards and backwards in turn) is half outlined, half solid; outlines shrink
   with the block (o1: 1 px, o0: none) so that thin blocks do not turn into one dark bar */
.mp-cm{background:linear-gradient(to bottom,var(--surface) 0 50%,var(--ink-2) 50% 100%);border:1.5px solid var(--ink-2);border-radius:2px}
.mp-gtrk i.o1{border-width:1px;line-height:20px}
.mp-gtrk i.o0{border-width:0;border-radius:1px}
.mp-gtrk i.mp-cf.o0{background:var(--ink-3)}
.sw.mp-sw-m{background:linear-gradient(to bottom,var(--surface) 0 50%,var(--ink-2) 50% 100%);border:1.5px solid var(--ink-2)}
.mp-gleg .mp-gn{font-weight:650;color:var(--ink)}
.mp-grows.dense{gap:2px}
.mp-grows.dense .mp-grow{min-height:14px}
.mp-grows.dense .mp-gtrk{height:12px}
.mp-grows.dense .mp-glab{font-size:var(--fs-mark)}
.mp-grows.dense .mp-gtrk i{font-size:0}
/* the playhead: the mask hides what has not happened yet */
.mp-mask{position:absolute;top:0;bottom:0;right:0;background:var(--surface);opacity:.88;pointer-events:none}
.mp-head{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px solid var(--ink);pointer-events:none}
.mp-gleg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-label);color:var(--ink-2);margin-bottom:8px}
.mp-gleg span{cursor:help;white-space:nowrap}
.mp-ltleg span,.mp-mleg span{white-space:nowrap}
.sw.mp-sw-f{background:var(--surface);border:1.5px solid var(--ink-2)}
.sw.mp-sw-b{background:var(--ink-2);border-color:var(--ink-2)}
.sw.mp-sw-i{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px)}
.sw.mp-sw-i.red{border:1.5px solid var(--c-oom);background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 3px,transparent 3px 5px)}
.sw.mp-sw-cmp{background:var(--ink-3);border-color:var(--ink-3)}
.sw.mp-sw-ar{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface) 2px 4px);border-color:var(--ink-2)}
.sw.mp-sw-ar.red{background:var(--c-oom);border-color:var(--c-oom)}
.sw.mp-sw-ref{background:transparent;border:1.5px dashed var(--ink-3)}
.sw.mp-sw-w{background:var(--c-weights);border-color:transparent}
.sw.mp-sw-o{background:var(--ink-3);border-color:transparent}
.sw.mp-sw-a{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface-2) 2px 4px);border-color:var(--ink-3)}

/* ---------- the player ---------- */
.mp-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.mp-player .ctl{display:flex;align-items:center;gap:6px;margin:0}
.mp-player .ctl>.lbl{font-size:var(--fs-label)}
.mp-player .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
/* H7 (the owner, 2026-10-09, on GRPO's player: “重放按钮和速度按钮没有对齐”): Replay, the step buttons and the speed buttons share one
   height and one centre line */
.mp-player .btn.sm,.mp-player .seg-ctl{height:30px;box-sizing:border-box}
.mp-player .btn.sm{padding-top:0;padding-bottom:0}
.mp-player .seg-ctl button{padding-top:0;padding-bottom:0}
.mp-play{min-width:92px;justify-content:center}
.mp-scrub{display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:0}
.mp-scrub input{flex:1 1 auto;min-width:0}
.mp-count{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}

/* ---------- parts 4–5: the MLP block cut across t GPUs ---------- */
.mp-tp{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 8px;padding:4px 0 2px;margin-bottom:16px}
.mp-blk{display:inline-flex;flex-direction:column;align-items:center;gap:5px;cursor:help;outline-offset:3px;border-radius:3px}
.mp-bl{font-size:var(--fs-label);line-height:1.25;color:var(--ink-2);text-align:center;max-width:150px}
.mp-op{align-self:center;font:600 var(--fs-body)/1 var(--font-mono);color:var(--ink-3);padding-bottom:4px}
.mp-act{display:block;width:34px;height:64px;background:var(--surface-2);border:1.5px solid var(--ink-3);border-radius:2px}
.mp-mat{display:grid;gap:2px;width:112px;height:64px}
.mp-mat.cols{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.mp-mat.rows{width:64px;height:112px;grid-template-rows:repeat(var(--n),minmax(0,1fr))}
.mp-st{display:grid;place-items:center;background:var(--c-weights);border-radius:2px;min-width:0;min-height:0;font-style:normal}
.mp-st b{font:600 var(--fs-mark)/1 var(--font-mono);color:var(--on-weights)}
.mp-parts{position:relative;display:block;width:44px;height:64px;margin:22px 22px 0 0}
.mp-parts i{position:absolute;inset:0;box-sizing:border-box;background:var(--surface);border:1.5px solid var(--ink-2);border-radius:2px}
.mp-parts i:nth-child(2){transform:translate(3px,-3px)}
.mp-parts i:nth-child(3){transform:translate(6px,-6px)}
.mp-parts i:nth-child(4){transform:translate(9px,-9px)}
.mp-parts i:nth-child(5){transform:translate(12px,-12px)}
.mp-parts i:nth-child(6){transform:translate(15px,-15px)}
.mp-parts i:nth-child(7){transform:translate(18px,-18px)}
.mp-parts i:nth-child(8){transform:translate(21px,-21px)}
.mp-sum{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--ink-2);border-radius:50%;font:600 var(--fs-big)/1 var(--font-mono);color:var(--ink)}
.mp-blk.ar.red .mp-sum{border-color:var(--c-oom);color:var(--c-oom);background:var(--c-oom-soft)}
.mp-blk.ar.red .mp-bl{color:var(--c-oom);font-weight:650}

/* the layer's timeline, to one scale; the dashed outline is the layer on one GPU */
.mp-lt{margin-top:2px}
.mp-ltbar{position:relative;height:30px}
.mp-ltref{position:absolute;left:0;top:0;bottom:0;box-sizing:border-box;border:1.5px dashed var(--ink-3);border-radius:3px;cursor:help}
.mp-ltsegs{position:absolute;left:0;right:0;top:5px;bottom:5px;display:flex;pointer-events:none}
.mp-ltsegs i{display:block;height:100%;min-width:1px;pointer-events:auto;cursor:help;box-sizing:border-box}
.mp-cmp{background:var(--ink-3)}
.mp-cmp.b{background:var(--ink-2)}
.mp-ar{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface) 2px 4px);border-top:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2)}
.mp-ar.red{background:var(--c-oom);border-color:var(--c-oom)}
.mp-ltax{display:flex;justify-content:space-between;font:var(--fs-mark)/1.4 var(--font-mono);color:var(--ink-3);border-top:1px solid var(--line);margin-top:3px}
/* S13: the per-GPU layer zoomed to its own length; kept (invisible) at one GPU so that the box does not change height */
.mp-ltz{margin-top:10px}
.mp-ltz[aria-hidden="true"]{visibility:hidden}
.mp-ltzc{font-size:var(--fs-label);line-height:1.45;color:var(--ink-2);margin-bottom:3px;min-height:1.45em}
.mp-ltbar.z{height:26px}
.mp-ltbar.z .mp-ltsegs{top:3px;bottom:3px}
@media (max-width:760px){.mp-ltzc{min-height:2.9em}}
.mp-ltleg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-label);color:var(--ink-2);margin-top:8px}

/* ---------- part 6, Scenarios, challenge: the cluster and the memory bar ---------- */
.mp-clg{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:4px}
.mp-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:4px 2px;border:1px solid var(--line);border-radius:3px;background:var(--surface);cursor:help;outline-offset:2px}
.mp-cell small{font:var(--fs-mark)/1.2 var(--font-mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* R7.4: the short form of the machine label (only its number) when “machine 3” does not fit; none when even that does not fit */
.mp-cell small .s,.mp-clg.short .mp-cell small .l,.mp-clg.none .mp-cell small{display:none}
.mp-clg.short .mp-cell small .s{display:inline}
.mp-gp{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;width:100%;max-width:56px}
.mp-gp i{display:block;width:calc(25% - 2px);min-width:3px;aspect-ratio:1;background:var(--ink-2);border-radius:1px}
.mp-more{margin:6px 0 0}
.mp-mem{margin-top:12px}
.mp-mem:not(:empty){border-top:1px solid var(--line);padding-top:12px}
.mp-mcap{font-size:var(--fs-label);color:var(--ink-2);margin-bottom:5px}
.mp-mbar{position:relative;display:flex;height:18px;background:var(--surface-2);border-radius:2px;margin-bottom:20px}
.mp-mbar i{display:block;height:100%;cursor:help;min-width:0}
.mp-mbar.over{box-shadow:0 0 0 1.5px var(--c-oom)}
.mp-mw{background:var(--c-weights)}
.mp-mo{background:var(--ink-3)}
.mp-ma{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface-2) 2px 4px)}
.mp-mlim{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid var(--ink);pointer-events:none}
.mp-mlim em{position:absolute;top:100%;left:0;transform:translateX(-50%);margin-top:2px;font:var(--fs-mark)/1.2 var(--font-mono);font-style:normal;color:var(--ink-2);white-space:nowrap}
.mp-mleg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-label);color:var(--ink-2)}
.mp-mtot{font-family:var(--font-mono);color:var(--ink);font-weight:650}
.mp-mtot.bad{color:var(--c-oom)}

/* ---------- metric cards ---------- */
.mp-metrics[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.mp-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.mp-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.mp-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- formulas on their own line ---------- */
.mp-fx{margin:8px 0 10px;overflow-x:auto;font-size:var(--fs-stage);line-height:1.3}

/* ---------- rail ---------- */
.mp-mt{margin-top:12px}
.mp-ch-res{scroll-margin-top:120px}
.goal.mp-over b{color:var(--c-oom)}
.mp-lv{margin-top:6px}
.mp-app .goal span:last-child{text-align:right}
.mp-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.mp-app .inline-ctl .seg-ctl button{white-space:nowrap}
.mp-app .seg-ctl button:disabled{opacity:.38;cursor:not-allowed}
.mp-asm{margin:6px 0 12px;padding-left:18px;color:var(--ink-2)}
.mp-asm li{margin-bottom:3px}
.mp-ul{margin:0 0 10px;padding-left:18px}
.mp-ul li{margin-bottom:6px}
.mp-remlist{margin:0 0 10px;padding-left:18px}
.mp-remlist li{margin-bottom:8px}

/* ---------- settings ---------- */
.mp-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.mp-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.mp-grp .ctl>label{display:flex}
.mp-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.mp-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.mp-prod li{margin-bottom:6px}
.mp-prod code,.mp-app .refs code{word-break:break-word}

/* ---------- dock: a tiny bar ---------- */
.mp-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.mp-dk i{position:absolute;left:0;top:3px;height:6px;background:var(--ink-2);border-radius:1px}
.mp-dk.bad i{background:var(--c-oom)}

@media (max-width:760px){
  /* phones: the picture first, then the numbers (R7.3) */
  .mp-stage{display:flex;flex-direction:column}
  .mp-stage>.stage-head{order:1}
  .mp-stage>.mp-graph{order:2}
  .mp-stage>.metrics{order:3}
  .mp-stage>details.math{order:4}
  .mp-graph{padding:10px 10px 12px}
  .mp-phone:not(:empty){display:block}
  /* the label column keeps 96 px: “layers 111–126” must fit (R7.8) */
  .mp-glab{font-size:var(--fs-mark);padding-right:6px}
  .mp-glab small{font-size:var(--fs-mark)}
  .mp-mat{width:84px;height:52px}
  .mp-mat.rows{width:52px;height:84px}
  .mp-act{width:26px;height:52px}
  .mp-parts{width:36px;height:52px;margin:22px 22px 0 0}
  .mp-sum{width:38px;height:38px;font-size:var(--fs-lead)}
  .mp-bl{max-width:110px;font-size:var(--fs-mark)}
  .mp-tp{gap:8px 6px}
  .mp-clg{gap:3px}
  .mp-cell{padding:3px 1px}
}
@media (prefers-reduced-motion:reduce){.mp-head,.mp-mask{transition:none}}

/* owner b8 (5): part 2's worked examples of the bubble formula, one row per m tried */
.mp-wx{border-collapse:collapse;margin:4px 0 10px;font-size:var(--fs-label);width:100%}
.mp-wx th{font-weight:600;text-align:left;color:var(--ink-2);border-bottom:1px solid var(--line);padding:3px 8px 3px 0}
.mp-wx td{font-family:var(--font-mono);font-size:var(--fs-label);padding:3px 8px 3px 0;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.mp-wx td:first-child{white-space:nowrap}
.mp-wx tr.cur td{color:var(--ink);font-weight:650}

/* R1 (owner b8): the challenge's summary: your layout next to the fastest, a bar of the step split by where the time goes */
.mp-chsum{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.mp-c3cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);margin-bottom:4px}
.mp-same{margin:0 0 8px;color:var(--ink-2);line-height:1.45}
.mp-c3{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mp-c3r{display:grid;gap:4px;min-width:0}
.mp-c3h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:var(--fs-label)}
.mp-c3t{font-weight:650;color:var(--ink);margin-right:2px}
.mp-chip{font:var(--fs-label)/1.35 var(--font-mono);padding:0 6px;border:1px solid var(--line);border-radius:9px;color:var(--ink-2);white-space:nowrap}
.mp-chip.on{border-color:var(--ink);color:var(--ink);font-weight:650}
.mp-c3b{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.mp-c3trk{position:relative;height:14px;background:var(--surface-2);border-radius:2px;overflow:hidden;min-width:0}
.mp-c3fill{display:flex;height:100%}
.mp-c3fill i{display:block;height:100%;cursor:help;box-sizing:border-box}
.mp-c3d{font-size:var(--fs-label);white-space:nowrap}
.mp-c3s{font-size:var(--fs-label);color:var(--ink-2)}
.mp-c3x{font-size:var(--fs-cap);font-weight:650;color:var(--c-oom)}
.mp-c3d.bad,.mp-c3m.bad{color:var(--c-oom)}
.mp-sg.u,.mp-sw3.u{background:var(--ink-3)}
.mp-sg.tp,.mp-sw3.tp{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface) 2px 4px)}
.mp-sg.bb,.mp-sw3.bb{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--ink-3) 3px 4px);box-shadow:inset 0 0 0 1px var(--line)}
.mp-sg.dp,.mp-sw3.dp{background:var(--line)}
.mp-sw3{display:inline-block;width:12px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.mp-c3leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;color:var(--ink-2)}
.mp-gap,.mp-next{margin:10px 0 0;font-size:var(--fs-cap)}
.mp-all{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.mp-all>summary{cursor:pointer;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:4px 0}
.mp-allb{padding-top:4px}
.mp-pass{margin:4px 0 8px;padding-left:18px;font-size:var(--fs-cap)}
.mp-pass li{margin-bottom:4px}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
#mp-metrics .sub{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 6 still ran 35 px past the stage in Chinese and 57 in
   English (its legend takes two lines there). The gaps round the hairlines and under the captions are 2–6 px smaller, the timeline's
   rows 2 px closer, the metric cards take the kit's tight line heights (as parallelism; a card's change row stays reserved). Same blocks,
   lines and texts */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  .mp-graph{padding:10px 12px 10px;gap:8px}
  .mp-graph>.mp-clbox:not([hidden])~.mp-gbox:not([hidden]),.mp-graph>.mp-clbox:not([hidden])~.mp-lbox:not([hidden]),.mp-graph>.mp-gbox:not([hidden])~.mp-lbox:not([hidden]){padding-top:10px}
  .mp-mem{margin-top:8px}
  .mp-mem:not(:empty){padding-top:8px}
  .mp-mcap{margin-bottom:3px}
  .mp-more{margin-top:4px}
  .mp-gleg{margin-bottom:4px}
  .mp-grow{min-height:24px}
  .mp-grows:not(.dense){gap:2px}
  .mp-player{margin-top:6px}
  .mp-metrics .metric .sub{line-height:1.25}
  .mp-metrics .metric .d{min-height:13px;line-height:1.1}
}

/* moe: tokens → router → experts, the parameters held vs used, what a decode step reads, the step time against the batch,
   and part 6's GPUs waiting for the busiest. Colours: tokens only (R5.6). Experts are weights, so blue (a filled expert is read,
   an outlined one is not); KV cache amber; tokens, the router, lines and times in grayscale; green and red only for success and failure. */
.moe-stage .stage-head{align-items:center}
.moe-graph{padding:12px 14px 14px;display:grid;gap:14px}
.moe-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;text-wrap:balance}
.moe-cap2{font-size:var(--fs-label);color:var(--ink-2);line-height:1.35}
.moe-cap-row{display:flex;align-items:flex-start;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.moe-cap-row .moe-cap{flex:1 1 240px;min-width:0}
.moe-badge{font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.5;padding:0 7px;border-radius:999px;border:1px dashed var(--ink-3);color:var(--ink-2);white-space:nowrap;cursor:help}
/* R3.20: the routing dots play once per new picture; this replays them. Same height as the badge, so showing it moves nothing */
.moe-cap-side{display:inline-flex;align-items:center;gap:6px;flex:none}
.moe-replay{font:inherit;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.5;padding:0 7px;margin:0;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);white-space:nowrap;cursor:pointer}
.moe-replay:hover{border-color:var(--ink-3);color:var(--ink)}
.moe-replay:focus-visible{outline:2px solid var(--accent,var(--ink-2));outline-offset:1px}
.moe-replay[hidden]{display:none}
/* the part's focus lights up on the chart (R3.14) */
.moe-graph[data-focus="flow"] .moe-flow,.moe-graph[data-focus="par"] .moe-par,.moe-graph[data-focus="read"] .moe-read,.moe-graph[data-focus="ep"] .moe-ep{outline:2px dashed var(--focus-frame);outline-offset:3px;border-radius:4px}
.moe-flow,.moe-par,.moe-read,.moe-ep{display:grid;gap:6px;min-width:0}
.moe-svgbox{min-width:0;cursor:help}
.moe-svg{width:100%;height:auto;display:block;overflow:visible}
/* the router picture */
.moe-ln{stroke:var(--line-2);stroke-width:1.2;fill:none}
.moe-ln-cur{stroke:var(--ink-2)}
.moe-chip rect{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1}
.moe-chip text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.moe-chip-cur rect{fill:var(--ink-3);stroke:var(--ink)}
.moe-chip-cur text{fill:var(--bg);font-weight:600}
.moe-chip-wait rect{fill:transparent;stroke-dasharray:3 3}
.moe-chip-wait text{fill:var(--ink-3)}
.moe-chip-more rect{fill:transparent;stroke-dasharray:2 2}
.moe-router rect:first-child{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
.moe-rname{font-family:var(--font-mono);font-size:var(--fs-label);fill:var(--ink);font-weight:600}
.moe-rlabel{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.moe-sh{fill:var(--ink-3);opacity:.55}
.moe-sh.on{fill:var(--ink);opacity:1}
.moe-ex rect:first-child{fill:transparent;stroke:var(--c-weights);stroke-width:1.5}
.moe-ex.on rect:first-child{fill:var(--c-weights)}
.moe-exname{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.moe-ex.on .moe-exname{fill:var(--on-weights,#fff);font-weight:600}
.moe-excnt{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink);font-weight:600}
.moe-ex.on .moe-excnt{fill:var(--on-weights,#fff)}
.moe-ex.past rect:first-child{fill:var(--c-weights);fill-opacity:.35}
.moe-ex.past .moe-exname{fill:var(--ink);font-weight:600}
.moe-dots circle{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
/* parameters: held vs used, one scale */
.moe-prows{display:grid;gap:6px}
.moe-prow{display:grid;grid-template-columns:118px minmax(0,1fr) 58px;align-items:center;gap:8px}
html[lang^="zh"] .moe-prow{grid-template-columns:104px minmax(0,1fr) 58px}
.moe-pl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);line-height:1.2;overflow-wrap:anywhere}
.moe-pv{font-size:var(--fs-label);color:var(--ink);text-align:right;white-space:nowrap}
.moe-pbar{position:relative;height:20px;background:var(--surface-2);border-radius:2px}
.moe-pbar i{position:absolute;top:0;bottom:0;cursor:help}
.moe-pw{background:var(--c-weights)}
.moe-pe{box-shadow:inset -1px 0 0 var(--surface)}
.moe-po{border:1.5px dashed var(--c-weights);border-radius:2px;background:transparent;opacity:.75}
.moe-gpu{display:grid;gap:4px;margin-top:4px;min-width:0}
.moe-membar{margin-top:2px;height:16px;cursor:help}
/* no KV cache is drawn in this bar: the kit's empty KV segment would still show its 6 px padding as an amber sliver */
.moe-membar .seg.kv{padding:0}
/* what one decode step reads */
.moe-rbar{position:relative;height:22px;background:var(--surface-2);border-radius:2px;cursor:help}
.moe-rbar i{position:absolute;top:0;bottom:0;transition:width .25s ease-out,left .25s ease-out}
.moe-rw{background:var(--c-weights)}
.moe-re{box-shadow:inset 1px 0 0 var(--surface)}
.moe-ro{border:1.5px dashed var(--c-weights);border-left:0;background:transparent;opacity:.7}
.moe-rk{background:var(--c-kv)}
.moe-rlab{font-size:var(--fs-label);color:var(--ink-2);line-height:1.35;text-wrap:balance}   /* a caption or a note that takes two lines splits them evenly (精装修 step 2: at 12 px a unit no longer sits alone on the last line) */
.moe-cg{stroke:var(--line-2);stroke-width:1}
.moe-ct{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.moe-cax{fill:var(--ink-2)}
.moe-cref{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:1.5 3;fill:none}
.moe-cmoe{stroke:var(--ink);stroke-width:2.5;fill:none}
.moe-cpt{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.moe-clab{fill:var(--ink);font-weight:600}
.moe-cgoal{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:6 4}
.moe-cgl{fill:var(--ink)}
/* Llama 2 70B's weights alone, for comparison (R6.26); a ring marks the point a click or the arrow keys move */
.moe-c70{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:7 3 1.5 3;fill:none}
.moe-c70l{fill:var(--ink-2)}
.moe-c70e{fill:var(--ink-2)}
.moe-cring{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.45}
/* part 6: each GPU's time */
.moe-eprows{display:grid;gap:4px}
.moe-eprow{display:grid;grid-template-columns:48px minmax(0,1fr) 62px;align-items:center;gap:8px;cursor:help;border-radius:3px;outline-offset:2px}
.moe-epl{font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap}
.moe-epv{font-size:var(--fs-label);color:var(--ink);text-align:right;white-space:nowrap}
.moe-eptrack{position:relative;height:14px;background:var(--surface-2);border-radius:2px}
.moe-eptrack i{position:absolute;top:0;bottom:0}
.moe-epbusy{left:0;background:var(--ink-2);border-radius:2px 0 0 2px}
.moe-epidle{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--ink-3) 3px 4px);opacity:.8}
.moe-epbal{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px dashed var(--ink)}
/* part 6: Mixtral next to dense models; the pair compared in full, the others faded */
.moe-cmp{display:grid;gap:8px;min-width:0}
#moe-cmp-body{display:grid;gap:12px;min-width:0}
.moe-cm-blk{display:grid;gap:4px;min-width:0}
.moe-cm-h{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);line-height:1.35}
.moe-cm-blk .ctl{margin:0 0 2px}
.moe-cm-blk .seg-ctl{flex-wrap:wrap}
.moe-cm-row{display:grid;grid-template-columns:112px minmax(0,1fr) 116px;align-items:center;gap:8px;cursor:help;border-radius:3px;outline-offset:2px;opacity:.38}
.moe-cm-row.on{opacity:1}
.moe-cm-n{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moe-cm-row.on .moe-cm-n{color:var(--ink);font-weight:650}
.moe-cm-bar{position:relative;height:14px;background:var(--surface-2);border-radius:2px;min-width:0}
.moe-cm-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px 0 0 2px}
.moe-cm-bar em{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap}
.moe-cm-q,.moe-cm-f{background:var(--ink-2)}
.moe-cm-row.mx .moe-cm-q,.moe-cm-row.mx .moe-cm-f{background:var(--ink)}
.moe-cm-w{background:var(--c-weights)}
.moe-cm-bar i.moe-cm-b2{background:transparent;border:1.5px solid var(--c-weights);border-radius:2px}
.moe-cm-v{font-size:var(--fs-label);color:var(--ink);text-align:right;white-space:nowrap;line-height:1.3}
.moe-cm-v small{display:block;font-size:var(--fs-mark);color:var(--ink-2);font-weight:400}
.moe-cm-row.m7{opacity:.55}
.moe-cm-row.m7 .moe-cm-n{font-style:italic}
.moe-cm-note{margin:2px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-3);text-wrap:pretty}
.moe-app .sw.moe-sw-q{background:var(--ink-2);border-color:transparent}
.moe-app .sw.moe-sw-pair{background:var(--ink-2);opacity:.38;border-color:transparent}
.moe-app .sw.moe-sw-mx{background:var(--ink);border-color:transparent}
.moe-dk2{display:block;position:relative;background:var(--surface-2);border-radius:2px}
.moe-dk-f{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:2px}
/* the curve: a marker follows the pointer; a click sets the batch when it can change */
.moe-svgbox.moe-can{cursor:pointer}
.moe-cmk{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.moe-cmd{fill:var(--surface);stroke:var(--ink);stroke-width:2}
/* legend swatches of our own */
.moe-app .sw.moe-sw-chip{background:var(--surface-2);border:1px solid var(--ink-3);border-radius:6px;width:16px}
.moe-app .sw.moe-sw-out{background:transparent;border:1.5px solid var(--c-weights)}
.moe-app .sw.moe-sw-past{background:var(--c-weights);opacity:.35;border-color:transparent}
.moe-app .sw.moe-sw-po{background:transparent;border:1.5px dashed var(--c-weights)}
.moe-app .sw.moe-sw-line{width:16px;height:0;border:0;border-top:2.5px solid var(--ink);border-radius:0;vertical-align:3px}
.moe-app .sw.moe-sw-ref{width:16px;height:0;border:0;border-top:1.5px dotted var(--ink-3);border-radius:0;vertical-align:3px}
.moe-app .sw.moe-sw-busy{background:var(--ink-2);border-color:transparent}
.moe-app .sw.moe-sw-idle{background:repeating-linear-gradient(135deg,transparent 0 2px,var(--ink-3) 2px 3px)}
.moe-app .sw.moe-sw-70{width:18px;height:1.5px;border:0;border-radius:0;vertical-align:3px;background:linear-gradient(90deg,var(--ink-2) 0 7px,transparent 7px 9px,var(--ink-2) 9px 10.5px,transparent 10.5px 12px,var(--ink-2) 12px 18px)}
.moe-lgx{font-size:var(--fs-mark);font-weight:650;color:var(--ink);margin-right:5px}
/* rail pieces */
.moe-rt{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:6px 0 2px}
.moe-bctl .moe-brow{display:flex;align-items:center;gap:8px}
.moe-bctl .moe-brow input{flex:1 1 auto;min-width:0}
.moe-bstep{min-width:30px;padding-left:0;padding-right:0}
.moe-grp{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.moe-gh{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);margin-bottom:6px}
/* H5 (the owner, 2026-10-09: information runs together): each assumed value is its own block, spaced from the one before */
.moe-grp .ctl+.ctl{margin-top:12px}
.moe-metrics .metric.moe-hid .v{color:var(--ink-3)}
.moe-ch-res .cmp{margin-top:12px}
/* the chart's values stay on one line (R7.8); the scale leaves them room (max 50 ms) */
.moe-ch-res .cmp-val{white-space:nowrap}
.goal.moe-over,.progress.moe-over{color:var(--c-oom)}
.progress.moe-over i{background:var(--c-oom)}
.moe-prod li{margin-bottom:8px}
.moe-app .connect .c-card p,.moe-app .connect .c-card li,.moe-app .connect code{overflow-wrap:anywhere}
/* round 1 */
.moe-nw{white-space:nowrap}
/* why Next is greyed out (R2.4): under the buttons and on the phone's part bar */
.moe-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .moe-why{margin-top:6px}
.moe-why-off{display:none}
/* the options: the result stays on the title row when it fits and moves under the title when it does not, so the title never wraps
   because of it (R3.17, R7.8) */
.moe-app .levers .lever{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px;row-gap:1px}
.moe-app .levers .lever::before{flex:none}
.moe-app .levers .lever .lv-t b{flex:0 1 auto;min-width:0}
.moe-app .levers .lever .lv-r{order:2;margin-left:auto;white-space:nowrap}
.moe-app .levers .lever .lv-d{order:3;flex:1 0 100%;padding-left:24px}
.moe-app .levers .lever .lv-r:empty{display:none}
/* What to remember: a small picture per point (R6.23) */
.moe-rm{list-style:none;padding:0;margin:4px 0 12px;display:grid;gap:10px}
.moe-rm li{display:flow-root;margin:0}
.moe-rm-t{min-width:0}
.moe-rm-pic{float:left;width:66px;box-sizing:border-box;display:grid;gap:3px;padding:5px;margin:3px 10px 4px 0;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:help}
.moe-rm-cap{font-size:var(--fs-mark);color:var(--ink-2);text-align:center;line-height:1.2;white-space:nowrap}
.moe-rm-bar{position:relative;display:block;height:10px;margin:2px 0;background:var(--surface-2);border-radius:2px}
.moe-rm-bar i{position:absolute;top:0;bottom:0}
.moe-rm-bar i.moe-rm-w{left:0;background:var(--c-weights);border-radius:2px 0 0 2px}
.moe-rm-bar i.moe-over{background:var(--c-oom)}
.moe-rm-bar b{position:absolute;top:-2px;bottom:-2px;width:0;border-left:1.5px dashed var(--ink)}
.moe-rm-bar u{position:absolute;top:-2px;bottom:-2px;width:0;border-left:1px solid var(--ink-2)}
.moe-rm-row{display:flex;align-items:center;gap:4px}
.moe-rm-row em{font-style:normal;font-size:var(--fs-mark);color:var(--ink-2);min-width:14px;text-align:right}
.moe-rm-ex{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1.5px;flex:1}
.moe-rm-ex i{height:8px;border:1px solid var(--c-weights);border-radius:1px;box-sizing:border-box}
.moe-rm-ex i.on{background:var(--c-weights)}
.moe-rm-f{flex:1;position:relative;height:7px;background:var(--surface-2);border-radius:1px}
.moe-rm-f i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:1px}
.moe-rm-f i.mx{background:var(--ink)}
/* the mini result bar: the 8 experts of one layer */
.moe-dk{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;width:100%;height:12px}
.moe-dk-e{border:1px solid var(--c-weights);border-radius:2px;background:transparent}
.moe-dk-e.on{background:var(--c-weights)}
@media (max-width:760px){
  /* the why line keeps its height when it goes away, so nothing jumps */
  .moe-why-off{display:block;visibility:hidden}
  /* a long status wraps inside the stage instead of running past it (R7.8) */
  .moe-stage .stage-head .status{white-space:normal;text-align:left;max-width:100%}
  /* phones: the picture first, its legend right under it, so the first screen shows the router picture (R7.3) */
  .moe-stage{display:flex;flex-direction:column}
  .moe-stage>.stage-head{order:1}
  .moe-stage>.stage-graph{order:2}
  .moe-stage>.legend-row{order:3;margin-top:0}
  .moe-stage>.moe-scope{order:4}
  .moe-stage>.metrics{order:5}
  .moe-stage>details.math{order:6}
  .moe-prow{grid-template-columns:86px minmax(0,1fr) 50px;gap:6px}
  html[lang^="zh"] .moe-prow{grid-template-columns:78px minmax(0,1fr) 50px}
  .moe-pl{font-size:var(--fs-mark);white-space:normal;line-height:1.2}
  .moe-eprow{grid-template-columns:42px minmax(0,1fr) 56px;gap:6px}
  .moe-cm-row{grid-template-columns:86px minmax(0,1fr) 92px;gap:6px}
  .moe-cm-n{font-size:var(--fs-mark)}
  .moe-cm-v{font-size:var(--fs-mark)}
}
/* Show the math as short blocks (H2, 2026-10-09): a lead line, then the formula's rows in a grid; blocks are split by a hairline */
.moe-mb{padding:10px 0}
.moe-mb:first-child{padding-top:2px}
.moe-mb+.moe-mb{border-top:1px solid var(--line)}
.mathbody .moe-ml{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.55;color:var(--ink-2)}
.moe-mg{display:grid;justify-content:start;justify-items:center;align-items:center;column-gap:.35em;row-gap:.45em;overflow-x:auto;padding-block:.3em;margin-bottom:6px;font-size:var(--fs-cap)}
.moe-mg .moe-mn{justify-self:end}
.moe-mg .moe-mw{justify-self:start}
/* a cell never shrinks under its text: a formula with Chinese words in it would otherwise be squeezed and run into the next
   column (H7); a row wider than the panel scrolls instead */
.moe-mg>span{white-space:nowrap;min-width:max-content}
.moe-mg .moe-mh{font-family:'STIX Two Math','Cambria Math','Latin Modern Math','Noto Sans Math',var(--font-ui);font-size:1.08em;white-space:nowrap}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read): what follows “=” starts at the left
   like the lines of a worked example; the reader's numbers wrap at their spaces and a long formula before each “+” or “−”, the next
   line indented under the first term */
.moe-mg{grid-template-columns:repeat(var(--n),auto);align-items:baseline}
.moe-mg>.moe-mc:not(.moe-mn){justify-self:start}
.moe-mg>.moe-mh:not(:has(math)),.moe-mg>.moe-fxc{white-space:normal;min-width:0;padding-left:1.2em;text-indent:-1.2em}
.moe-fp{display:inline-block;text-indent:0;white-space:nowrap}
/* a narrow stage (a phone, or the 900 px layout): each name on its own line above its formula, the “=” rows under it */
@container (max-width:540px){
  .moe-mg{grid-template-columns:repeat(var(--n1),auto)}
  .moe-mg>.moe-mn:not(:empty){grid-column:1/-1;justify-self:start}
  .moe-mg>.moe-mn:empty{display:none}
}
.moe-fxp{margin:6px 0;overflow-x:auto}
/* ---------- a wide stage (polish round 4, 2026-10-16; the owner's B4, R7.12): at 1440 × 900 parts 5 and 8 needed 39 px of scrolling
   inside the stage and part 6 343 px, so on reaching “代价是显存” in part 6 the GPU-memory block and the metric cards were under the
   stage's edge (the first reader of round 4). On a stage at least 736 px wide (windows from about 1226 px) part 6's four comparison
   blocks sit two by two, read left to right as before (quality and arithmetic, then reads and memory), with their rows' name and value
   columns narrower; its stage head keeps the status beside the title and the subtitle under both, and the benchmark's label sits beside
   its buttons. The batch curve is drawn a little shorter (drawCurve reads --moe-ch); the metric cards share the row by their number (it
   was five columns, the rest empty) with the value and change lines tighter (as spec-decoding's, CONTRACT §19); a few gaps are tighter.
   Same pieces in the same order, same animation; phones (≤ 760 px) and narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .moe-stage>.legend-row{margin-top:8px}
  .moe-graph{margin-top:10px;padding:8px 12px;gap:10px}
  .moe-flow,.moe-par,.moe-read,.moe-ep{gap:5px}
  #moe-curve{--moe-ch:136}
  .moe-stage>.moe-scope{margin-top:8px;margin-bottom:8px}
  .moe-metrics{margin-top:8px}
  .moe-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .moe-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .moe-metrics .metric .v{line-height:1.25}
  .moe-metrics .metric .d{min-height:13px;line-height:1.1}
  .moe-stage>details.math{margin-top:8px;padding-top:8px}
  /* part 6: the title and the status on one line, the subtitle across under them (the subtitle and the status did not fit side by side,
     so the status took a line of its own). The title keeps room for two lines, centred beside the status: a longer status (“Same
     arithmetic; Mixtral +21.3 points on HumanEval”) narrows its column and wraps it, and the head, with the benchmark's buttons under
     it, must not move when a button is pressed (R7.9) */
  .moe-stage:has(#moe-cmp:not([hidden]))>.stage-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;align-items:center}
  .moe-stage:has(#moe-cmp:not([hidden]))>.stage-head>div:first-child{display:contents}
  .moe-stage:has(#moe-cmp:not([hidden])) #moe-st-title{min-height:2lh;display:flex;align-items:center}
  .moe-stage:has(#moe-cmp:not([hidden])) #moe-st-sub{grid-column:1/-1;grid-row:2}
  #moe-cmp-body{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:12px;align-items:start}
  .moe-cm-row{grid-template-columns:84px minmax(0,1fr) 104px}
  #moe-bench{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px}
}}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and parts 5 and 8 still ran 39 px past it at 1536 × 730; the batch curve is drawn 116 px tall instead of 136
   (its labels keep their size) and a few gaps are tighter */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .moe-stage>.legend-row{margin-top:6px}
  .moe-graph{gap:6px}
  .moe-flow,.moe-par,.moe-read,.moe-ep{gap:3px}
  #moe-curve{--moe-ch:116}
  .moe-stage>.moe-scope{margin-top:6px;margin-bottom:4px}
}}

/* multi-gpu-serving: tensor, pipeline and expert parallelism for serving */
.mgs-graph{display:flex;flex-direction:column;gap:0}
.mgs-blk{padding:4px 0}
.mgs-blk+.mgs-blk{border-top:1px solid var(--line)}
.mgs-bh{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);margin:0 0 4px;min-height:1.35em;overflow-wrap:anywhere}
.mgs-gpus{width:100%;min-width:0}
.mgs-svg{display:block;max-width:100%;height:auto}
.mgs-svg text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.mgs-svg .mgs-gn{font-size:var(--fs-mark);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}   /* a halo: the number sits on the weights or the KV cache */
.mgs-svg .mgs-bt{font-size:var(--fs-mark);fill:var(--ink-2)}
.mgs-svg .mgs-bt.off{opacity:0}
.mgs-svg .mgs-hop{font-size:var(--fs-mark);fill:var(--ink);font-weight:600;opacity:0}
.mgs-svg .mgs-hop.on{opacity:1}
.mgs-svg .mgs-ibt{font-size:var(--fs-mark);fill:var(--ink-3)}
.mgs-node{fill:none;stroke:var(--line);stroke-width:1}
.mgs-gbox{fill:var(--sunken);stroke:var(--ink-3);stroke-width:.8}
.mgs-gbox.bad{stroke:var(--c-oom);stroke-width:1.6}
.mgs-gpu.off .mgs-gbox{stroke-dasharray:3 2;opacity:.6}
.mgs-m.w{fill:var(--c-weights)}
.mgs-m.kv{fill:var(--c-kv)}
.mgs-m.oh{fill:var(--c-overhead)}
.mgs-m.over{fill:var(--c-oom)}
.mgs-br{fill:none;stroke:var(--ink-3);stroke-width:1}
.mgs-ib{stroke:var(--ink-3);stroke-width:2;stroke-dasharray:4 3}
.mgs-ib.bad{stroke:var(--c-oom)}
.mgs-ibl{fill:none;stroke:var(--ink-3);stroke-width:1;opacity:.35}
.mgs-ibl.bad{stroke:var(--c-oom)}
.mgs-ibl.on{opacity:1;stroke-width:1.5}
.mgs-ibp{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.3;opacity:0}
.mgs-ibp.on{opacity:1}
.mgs-sw.ibl{width:14px;height:0;border-top:1.5px solid var(--ink-3);border-radius:0}
.mgs-legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:3px 0 1px;font-size:var(--fs-label);line-height:1.35}
.mgs-legend>span,.mgs-leg>span{display:inline-flex;align-items:center;gap:6px;cursor:help}
.mgs-sw{display:inline-block;width:14px;height:10px;border-radius:2px;flex:none}
.mgs-sw.w{background:var(--c-weights)}
.mgs-sw.kv{background:var(--c-kv)}
.mgs-sw.oh{background:var(--c-overhead)}
.mgs-sw.bad{background:var(--c-oom)}
.mgs-sw.ep{background:var(--ink-3)}
/* one layer, played */
.mgs-layer{width:100%;min-width:0}
.mgs-lbar{position:relative;height:22px;background:var(--sunken);border-radius:4px;overflow:hidden}
.mgs-seg{position:absolute;top:0;bottom:0;display:block;cursor:help;font-style:normal}
.mgs-seg.cm{background:var(--ink-3)}
.mgs-seg.ar{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--sunken) 2px 5px)}
.mgs-seg.ar.bad{background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,var(--c-oom-soft) 2px 5px)}
.mgs-head{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.mgs-nofit{margin:4px 0;color:var(--c-oom);font-weight:600}
.mgs-run{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:4px 0 2px}
.mgs-run .btn{min-height:30px}
.mgs-speed{display:inline-flex;align-items:center;gap:6px;flex:none}
.mgs-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.mgs-app .mgs-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);min-height:26px}   /* the kit's tray adds 3 px above and below its keys (2026-10-22 refit), so a 26 px key keeps the control 32 px tall, as before */
.mgs-prog{flex:1 1 120px;min-width:80px}
.mgs-sum{margin:2px 0 0;font-size:var(--fs-cap)}
/* the TP sweep */
.mgs-swp{display:flex;flex-direction:column;gap:4px}
.mgs-swp{gap:1px}
.mgs-sw-row{display:grid;grid-template-columns:minmax(0,9em) minmax(60px,1fr) minmax(0,7em);gap:8px;align-items:center;font-size:var(--fs-label);padding:0 4px;border-radius:4px;line-height:1.3}
.mgs-sw-row.on{background:var(--sunken);font-weight:600}
.mgs-sw-l{font-family:var(--font-mono);font-size:var(--fs-label);overflow-wrap:anywhere}
.mgs-sw-tr{display:flex;height:12px;background:var(--sunken);border-radius:3px;overflow:hidden;min-width:0}
.mgs-sw-row.on .mgs-sw-tr{background:var(--bg,transparent);outline:1px solid var(--line)}
.mgs-sw-tr i{display:block;height:100%}
.mgs-sw-tr i.cm{background:var(--ink-3)}
.mgs-sw-tr i.ar{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,transparent 2px 4px)}
.mgs-sw-tr i.ar.bad{background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,var(--c-oom-soft) 2px 4px)}
.mgs-sw-v{font-size:var(--fs-label);text-align:right;white-space:nowrap}
@media (max-width:560px){.mgs-sw-row{grid-template-columns:minmax(0,7em) minmax(40px,1fr) max-content}}
/* challenge */
.mgs-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.mgs-goal.mgs-over b{color:var(--c-oom)}
.mgs-goal.met b{color:var(--c-ok)}
.mgs-ch-res{margin-top:10px}
.mgs-app .seg-ctl[data-key="chpp"] button:disabled{opacity:.4;cursor:not-allowed}
/* text lists */
.mgs-prod li{margin:4px 0}
.mgs-prod code{overflow-wrap:anywhere;word-break:break-word}
.mgs-rem{margin:4px 0 0;padding-left:20px}
.mgs-rem>li{margin:0 0 8px}
.mgs-rem>li>p{margin:0 0 4px}
.mgs-sys{margin:4px 0 8px;padding-left:18px}
.mgs-sys li{margin:3px 0}
/* dock */
.mgs-dk{display:flex;height:8px;background:var(--sunken);border-radius:4px;overflow:hidden;min-width:60px}
.mgs-dk i{display:block;height:100%}
.mgs-dk i.cm{background:var(--ink-3)}
.mgs-dk i.ar{background:var(--ink-2)}
.mgs-dk i.ar.bad{background:var(--c-oom)}
/* show the math */
.mgs-mb{padding:8px 0 10px}
.mgs-mb+.mgs-mb{border-top:1px solid var(--line)}
.mgs-mb>p{margin:0 0 6px}
.mgs-mb-res{margin-bottom:0}
.mgs-eqs{display:grid;grid-template-columns:max-content max-content minmax(0,max-content);justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.35em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3;max-width:100%}
.mgs-eq-l{text-align:right}
.mathbody{container-type:inline-size}
@container (max-width:560px){.mgs-eqs{grid-template-columns:max-content minmax(0,1fr)}.mgs-eqs>.mgs-eq-l{grid-column:1/-1;text-align:left}.mgs-eqs>.mgs-eq-l:empty{display:none}.mgs-eq-r{min-width:0;overflow-x:auto}}
.drill-a .mgs-eqs{font-size:var(--fs-ui)}
/* metric values fit their box at every width (S22): a smaller number, the unit smaller still */
.mgs-metrics .metric .v{font-size:clamp(14px,3.6cqi,17px)}
.mgs-metrics .metric .v .u{font-size:max(11px,.76em);color:var(--ink-2)}
/* a stage of 480–560 px keeps the five numbers in one row (the stage must fit the screen at 900 px wide), with a smaller number */
@container (min-width:480px) and (max-width:559.98px){.mgs-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}.mgs-metrics .metric{padding:8px 7px}.mgs-metrics .metric .v{font-size:var(--fs-stage)}}
.mgs-sw-note{margin:2px 0 0;line-height:1.35}
/* dock in the MoE part: one bar per GPU */
.mgs-dk.mgs-dk-ep{align-items:flex-end;gap:2px;height:14px;background:none}
.mgs-dk.mgs-dk-ep i{flex:1;border-radius:1px}
.mgs-dk.mgs-dk-ep i.bad{background:var(--c-oom)}
.mgs-metrics .metric .v.txt{white-space:normal;font-size:var(--fs-ui);line-height:1.25}
/* one layer, under each GPU: this layer's bytes (a bar that empties as it is read), the flow into the compute units, the result vector,
   the merge's arrows around each group's ring; red arrows when the merges take half the step or more */
.mgs-sl0{fill:none;stroke:var(--line);stroke-width:1}
.mgs-sl.w{fill:var(--c-weights)}
.mgs-sl.kv{fill:var(--c-kv)}
.mgs-fl{fill:none;stroke-width:2.6;stroke-dasharray:3 3;opacity:0}
.mgs-fl.w{stroke:var(--c-weights)}
.mgs-fl.kv{stroke:var(--c-kv)}
.mgs-fl.on{opacity:1}
.mgs-chip{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.mgs-chip.on{fill:var(--ink-2);stroke:var(--ink)}
.mgs-svg .mgs-chipt{font-size:var(--fs-mark);fill:var(--ink-3);pointer-events:none}
.mgs-svg .mgs-chipt.on{fill:var(--surface);font-weight:600}
.mgs-cell{fill:none;stroke:var(--ink-3);stroke-width:.8;stroke-dasharray:1.5 1.5}
.mgs-cell.p{fill:color-mix(in srgb,var(--ink-3) 22%,transparent);stroke-dasharray:none}
.mgs-cf{fill:var(--ink-3)}
.mgs-cf.full{fill:var(--ink)}
.mgs-arw{fill:none;stroke:var(--ink-2);stroke-width:1.2;opacity:.3}
.mgs-arw.bad{stroke:var(--c-oom)}
.mgs-arw.on{opacity:1;stroke-width:1.5}
.mgs-pk{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.6;opacity:0}
.mgs-pk.f{fill:var(--ink);stroke:var(--ink)}
.mgs-pk.on{opacity:1}
.mgs-svg .mgs-mk{font-size:var(--fs-label);fill:var(--ink-3);opacity:.55}
.mgs-svg .mgs-mk.on{fill:var(--ink);opacity:1;font-weight:700}
.mgs-ahp{fill:var(--ink-2)}
.mgs-ahp.bad{fill:var(--c-oom)}
.mgs-ib.on{stroke-width:3.5}
/* the pipeline: one band per stage under its GPUs; batch A solid, batch B outlined */
.mgs-band{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 2}
.mgs-svg .mgs-band-t{font-size:var(--fs-mark);fill:var(--ink-3)}
.mgs-bandg.on .mgs-band{stroke-dasharray:none;stroke:var(--ink-2)}
.mgs-bandg.off{opacity:0}
.mgs-bandg.on.mbA .mgs-band{fill:var(--ink-2)}
.mgs-bandg.on.mbA .mgs-band-t{fill:var(--surface);font-weight:600}
.mgs-bandg.on.mbB .mgs-band{fill:var(--surface);stroke-width:1.6}
.mgs-bandg.on.mbB .mgs-band-t{fill:var(--ink);font-weight:600}
.mgs-gantt{overflow:visible}
.mgs-svg .mgs-gl{font-size:var(--fs-mark);fill:var(--ink-2)}
.mgs-gtr{fill:var(--sunken)}
.mgs-gidle{fill:var(--surface);stroke:var(--line);stroke-dasharray:3 2}
.mgs-svg .mgs-git{font-size:var(--fs-mark);fill:var(--ink-3)}
.mgs-gb{cursor:help}
.mgs-gb rect{stroke:var(--ink-2);stroke-width:1}
.mgs-gb.mbA rect{fill:var(--ink-2)}
.mgs-gb.mbB rect{fill:var(--surface);stroke-width:1.6}
.mgs-svg .mgs-gb text{font-size:var(--fs-mark);pointer-events:none}
.mgs-svg .mgs-gb.mbA text{fill:var(--surface);font-weight:600}
.mgs-svg .mgs-gb.mbB text{fill:var(--ink);font-weight:600}
.mgs-gb.now rect{stroke:var(--ink);stroke-width:2}
.mgs-ghand{fill:none;stroke:var(--ink);stroke-width:1.4;cursor:help}
.mgs-gax{stroke:var(--line);stroke-width:1}
.mgs-gtok{fill:var(--ink);cursor:help}
.mgs-gbr{fill:none;stroke:var(--ink-3);stroke-width:1}
.mgs-svg .mgs-gbt{font-size:var(--fs-mark);fill:var(--ink-2)}
.mgs-gph{stroke:var(--ink);stroke-width:2;opacity:0}
.mgs-gph.on{opacity:1}
/* the time bar: each phase named inside it; the phase playing now outlined */
.mgs-seg span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1;white-space:nowrap;overflow:hidden;color:var(--surface);pointer-events:none}
.mgs-seg.ar span{left:50%;right:auto;transform:translate(-50%,-50%);max-width:calc(100% - 2px);box-sizing:border-box;padding:2px 3px;border-radius:3px;background:var(--surface);color:var(--ink)}
.mgs-seg.ar.bad span{color:var(--c-oom)}
.mgs-seg.now{box-shadow:inset 0 0 0 2px var(--ink)}
.mgs-sum.mgs-cap{color:var(--ink);min-height:2.7em}
/* legend swatches of the moving parts */
.mgs-lbr{flex-basis:100%;height:0}
.mgs-sw.sl{background:linear-gradient(90deg,var(--c-weights) 0 50%,var(--c-kv) 50% 100%);height:6px}
.mgs-sw.chip{background:var(--ink-3);border:1px solid var(--ink);height:9px}
.mgs-sw.pr{background:linear-gradient(to top,var(--ink-3) 0 4px,color-mix(in srgb,var(--ink-3) 22%,transparent) 2px);border:1px solid var(--ink-3)}
.mgs-swsvg{flex:none;display:block}
.mgs-sw.fr{background:var(--ink)}
.mgs-sw.bandA,.mgs-sw.mbA{background:var(--ink-2)}
.mgs-sw.mbB{background:var(--surface);border:1.6px solid var(--ink-2)}
.mgs-sw.idle{background:var(--surface);border:1px dashed var(--ink-3)}
.mgs-sw.hand{height:0;border-top:2px solid var(--ink);border-radius:0;width:12px}
.mgs-sw.tokm{width:8px;height:8px;background:var(--ink);transform:rotate(45deg);border-radius:0}
/* MoE: one MoE layer on 8 GPUs, its four steps */
.mgs-ep-steps{display:flex;flex-wrap:wrap;gap:4px 6px;margin:2px 0 6px}
.mgs-st4{font-family:var(--font-mono);font-size:var(--fs-mark);padding:2px 7px;border:1px solid var(--line);border-radius:999px;color:var(--ink-3)}
.mgs-st4.on{color:var(--surface);background:var(--ink);border-color:var(--ink)}
.mgs-ep-host{width:100%;min-width:0}
.mgs-ep-card{fill:var(--surface);stroke:var(--line);stroke-width:1}
.mgs-svg .mgs-ep-gn{font-size:var(--fs-mark);fill:var(--ink);font-weight:600}
.mgs-svg .mgs-ep-rg{font-size:var(--fs-mark);fill:var(--ink-3)}
.mgs-ep-tok{fill:var(--ink-3)}
.mgs-ep-tok.ex.on{fill:var(--ink);stroke:var(--ink);stroke-width:1;outline:none}
.mgs-ep-tok.ex.on{filter:drop-shadow(0 0 1.5px var(--ink))}
.mgs-ep-x{fill:none;stroke:var(--c-weights);stroke-width:.7}
.mgs-ep-x.on{fill:var(--c-weights)}
.mgs-ep-x.pk{stroke:var(--ink);stroke-width:1.6}
.mgs-ep-pick{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:2 2;opacity:0}
.mgs-ep-pick.on{opacity:1}
.mgs-ep-mesh{stroke:var(--ink-3);opacity:0;stroke-linecap:round}
.mgs-ep-mesh.to-busy{stroke:var(--c-oom)}
.mgs-ep-mesh.on{opacity:.45}
.mgs-ep-dot{fill:var(--ink-2);opacity:0}
.mgs-ep-dot.to-busy{fill:var(--c-oom)}
.mgs-ep-dot.on{opacity:.85}
.mgs-ep-exd{opacity:0}
.mgs-ep-exd.on{opacity:1}
.mgs-ep-exd rect{fill:var(--surface);stroke:var(--ink);stroke-width:1.2}
.mgs-svg .mgs-ep-exd text{font-size:var(--fs-mark);fill:var(--ink);font-weight:700}
.mgs-ep-slot{fill:none;stroke:var(--line-2);stroke-width:1}
.mgs-ep-todo{fill:color-mix(in srgb,var(--ink-3) 25%,transparent);stroke:var(--ink-3);stroke-width:1}
.mgs-ep-pile{fill:var(--ink-3)}
.mgs-ep-pile.bad{fill:var(--c-oom)}
.mgs-ep-idlebg{fill:var(--surface)}
.mgs-ep-idleln{stroke:var(--ink-3);stroke-width:1.4}
.mgs-ep-idle{stroke:var(--ink-3);stroke-width:1}
.mgs-sw.epidle{background:repeating-linear-gradient(45deg,var(--ink-3) 0 1.3px,var(--surface) 1.3px 4px);border:1px solid var(--ink-3)}
.mgs-ep-avg{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 3}
.mgs-svg .mgs-ep-v{font-size:var(--fs-mark);fill:var(--ink)}
.mgs-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:var(--fs-label)}
.mgs-leg>span{display:inline-flex;align-items:center;gap:6px}
.mgs-sw.tok{width:8px;height:8px;background:var(--ink-3)}
.mgs-sw.xp{width:10px;height:6px;background:var(--c-weights);border-radius:0}
.mgs-sw.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-2)}
.mgs-sw.avgl{width:14px;height:0;border-top:2px dashed var(--ink);border-radius:0}
/* the pipeline's hand-offs: a batch's hidden vectors travelling to the next stage (batch A dark, batch B light), the new token back to stage 1 */
.mgs-hpk{opacity:0;pointer-events:none}
.mgs-hpk.on{opacity:1}
.mgs-hpk rect{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.mgs-svg .mgs-hpk text{font-size:var(--fs-mark);fill:var(--surface);font-weight:700}
.mgs-hpk.mbB rect{fill:var(--surface);stroke:var(--ink)}
.mgs-svg .mgs-hpk.mbB text{fill:var(--ink)}
.mgs-hpk.tok rect{rx:7px}
.mgs-bandg.wait .mgs-band{stroke:var(--ink);stroke-width:1.4}
.mgs-svg .mgs-bandg.wait .mgs-band-t{fill:var(--ink);font-weight:600}
.mgs-ghand.now{stroke-width:2.8}
.mgs-gtok.now{stroke:var(--ink);stroke-width:3}
.mgs-sw.hpk{width:14px;height:11px;background:var(--ink);border-radius:3px}
.mgs-sw.hpkt{width:13px;height:13px;background:var(--ink);border-radius:50%}
.mgs-sw.pkl{width:14px;height:0;border-top:1.5px dashed var(--ink);border-radius:0}
.mgs-sw.exd{width:11px;height:11px;border:1.2px solid var(--ink);background:var(--surface);border-radius:2px}
.mgs-sw.mesh{width:14px;height:0;border-top:2px solid var(--ink-3);border-radius:0}
.mgs-sw.todo{background:color-mix(in srgb,var(--ink-3) 25%,transparent);border:1px solid var(--ink-3)}

/* number-formats: one value in each format (bit boxes, stored value, error), the range strips on a log axis, the number lines
   near 1.0, and one training step (the gradient's and the update's paths, the weight over 40 updates).
   Colours (R5.6): grayscale and hatching only; red only for a lost or overflowing value, green only for a kept one or the goal. */
.nf-stage .stage-head{align-items:center}
.nf-stage .stage-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end}
.nf-view button{font-size:var(--fs-label);padding:3px 9px;white-space:nowrap}
.nf-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.nf-a,.nf-b,.nf-c{display:grid;gap:12px;min-width:0}
.nf-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.nf-sub,.nf-sub2{font-size:var(--fs-label);color:var(--ink-2);line-height:1.35}
/* H5 (the owner, 2026-10-09: information runs together without a divider): the step chart starts a block of its own under a hairline */
#nf-chart-cap{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.nf-graph[data-focus="bits"] .nf-rows,.nf-graph[data-focus="range"] .nf-range,.nf-graph[data-focus="zoom"] .nf-zoom,.nf-graph[data-focus="recipe"] .nf-paths{outline:2px dashed var(--focus-frame);outline-offset:4px;border-radius:4px}

/* ---------- one row per format: name, stored value, error; the bit boxes ---------- */
.nf-rows{display:grid;gap:9px;min-width:0}
.nf-row{display:grid;gap:3px;min-width:0}
.nf-rh{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;min-width:0}
.nf-fn{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:650;color:var(--ink);min-width:78px;outline-offset:2px}
.nf-rh .nf-fn{cursor:help}
.nf-fn em{font-style:normal;font-weight:400;color:var(--ink-2)}
.nf-val{font-size:var(--fs-label);color:var(--ink)}
.nf-err{font-size:var(--fs-label);color:var(--ink-2)}
.nf-err.nf-bad{color:var(--c-oom);font-weight:650}
.nf-bits{display:flex;flex-wrap:nowrap;gap:0 5px;min-width:0;max-width:100%;overflow:hidden;cursor:help;outline-offset:2px}
.nf-fld{display:inline-flex}
.nf-bit{display:inline-block;flex:none;height:19px;line-height:17px;box-sizing:border-box;text-align:center;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink);border:1px solid var(--line-2);margin-right:-1px;background:var(--surface);overflow:hidden}
.nf-bit.nf-sgn{border:1.5px solid var(--ink);margin-right:0}
.nf-bit.nf-exp{background:repeating-linear-gradient(135deg,var(--surface) 0 3px,var(--line-2) 3px 4.5px)}
.nf-bit.nf-man{background:var(--surface)}
.nf-row.nf-bad .nf-bit{color:var(--ink-3)}
.nf-row.nf-bad .nf-fn{color:var(--c-oom)}

/* ---------- the range strips on a log axis ---------- */
.nf-range{--nf-sl:82px;display:grid;gap:4px;min-width:0}
.nf-range[hidden]{display:none}
.nf-tens{margin-left:var(--nf-sl);display:grid;gap:2px;min-width:0}
.nf-trow{position:relative;height:17px}
.nf-band{position:absolute;bottom:0;height:7px;background:var(--surface-2);border:1px solid var(--ink-3);border-radius:2px;box-sizing:border-box;cursor:help;outline-offset:2px}
.nf-band em,.nf-tmark em{position:absolute;bottom:7px;left:0;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.1;color:var(--ink-2);white-space:nowrap}
.nf-band.nf-right em{left:auto;right:0}
.nf-tmark{position:absolute;bottom:0;height:9px;width:0;border-left:2px solid var(--ink-2);cursor:help;outline-offset:2px}
.nf-tmark em{left:3px;bottom:3px}
.nf-strips{position:relative;display:grid;gap:5px;min-width:0;padding:3px 0}
.nf-strip{display:grid;grid-template-columns:var(--nf-sl) minmax(0,1fr);align-items:center;min-width:0}
.nf-sl{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.nf-st{position:relative;height:15px;background:var(--surface-2);border-radius:2px;cursor:help;outline-offset:2px}
.nf-st i{position:absolute;top:0;bottom:0;display:block}
.nf-st i.nf-norm{background:var(--ink-3)}
.nf-st i.nf-sub{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px)}
.nf-more{position:absolute;top:0;line-height:15px;font-weight:400;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--surface);padding:0 4px;white-space:nowrap;z-index:1}
.nf-more.nf-left{left:0}
.nf-more.nf-right{right:0}
.nf-more.nf-short span{display:none}   /* the value's dot sits near this end: the arrow only, the strip's tooltip has the number */
.nf-dot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);box-sizing:border-box;z-index:3}
.nf-dot.nf-bad{background:var(--c-oom-soft);border-color:var(--c-oom)}
.nf-vline{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px solid var(--ink);z-index:2;pointer-events:none}
.nf-axis{position:relative;height:14px;margin-left:var(--nf-sl)}
.nf-axis span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap}
.nf-axis span:first-child{transform:none}

/* ---------- the update view: number lines near 1.0 ---------- */
.nf-zoom{display:grid;gap:12px;min-width:0}
.nf-zr{display:grid;gap:2px;min-width:0}
.nf-zhd{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.nf-zl{position:relative;height:24px;margin:0 6px;border-bottom:1.5px solid var(--ink-3);cursor:help;outline-offset:3px}
.nf-zl i{position:absolute;bottom:0;display:block;font-style:normal}
.nf-zt{height:11px;width:0;border-left:1.5px solid var(--ink-2)}
.nf-dense{left:0;right:0;height:11px;background:repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px 3px)}
.nf-zh{height:17px;width:0;border-left:1.5px dashed var(--ink-3)}
.nf-zx{position:absolute;top:0;width:0;height:0;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--ink);z-index:2}
.nf-zs{position:absolute;bottom:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--ink);z-index:3}
.nf-zs.nf-bad{background:var(--c-oom)}
.nf-zr.nf-bad .nf-fn{color:var(--c-oom)}
.nf-zaxis{margin:0 6px}

/* ---------- the recipe view: the two paths and the weight over 40 updates ---------- */
.nf-paths{display:grid;gap:8px;min-width:0}
.nf-pline{display:flex;flex-wrap:wrap;align-items:center;gap:5px 4px;min-width:0}
.nf-pl{font-size:var(--fs-label);font-weight:650;color:var(--ink);min-width:74px}
.nf-step{font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.3;padding:2px 6px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--ink);white-space:nowrap;cursor:help;outline-offset:2px}
.nf-step.nf-ok{border-color:var(--c-ok);color:var(--c-ok);background:var(--c-ok-soft)}
.nf-step.nf-bad{border-color:var(--c-oom);color:var(--c-oom);background:var(--c-oom-soft)}
.nf-ar{color:var(--ink-3);font-size:var(--fs-label)}
.nf-chart{min-width:0}
.nf-chart svg{display:block;max-width:100%;height:auto;overflow:visible}
.nf-chart .nf-ax{stroke:var(--line-2);stroke-width:1}
.nf-chart .nf-lx{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:2 3}
.nf-chart .nf-lm{fill:none;stroke:var(--ink);stroke-width:3}
.nf-chart .nf-lc{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.nf-chart .nf-lo{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:7 4}
.nf-chart text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}

/* ---------- legend swatches ---------- */
.sw.nf-sw-s{background:var(--surface);border:1.5px solid var(--ink)}
.sw.nf-sw-e{background:repeating-linear-gradient(135deg,var(--surface) 0 2px,var(--ink-3) 2px 3px);border-color:var(--line-2)}
.sw.nf-sw-m{background:var(--surface);border-color:var(--line-2)}
.sw.nf-sw-bad{background:var(--c-oom-soft);border-color:var(--c-oom)}
.sw.nf-sw-ok{background:var(--c-ok-soft);border-color:var(--c-ok)}
.sw.nf-sw-sub{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border-color:var(--line)}
.sw.nf-sw-v{width:0;height:13px;border:0;border-left:1.5px solid var(--ink);border-radius:0;margin:0 7px 0 3px}
.sw.nf-sw-band{background:var(--surface-2);border:1px solid var(--ink-3);height:7px}
.sw.nf-sw-t{width:0;height:11px;border:0;border-left:1.5px solid var(--ink-2);border-radius:0;margin:0 7px 0 3px}
.sw.nf-sw-h{width:0;height:13px;border:0;border-left:1.5px dashed var(--ink-3);border-radius:0;margin:0 7px 0 3px}
.sw.nf-sw-x{width:0;height:0;border:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--ink);border-radius:0;vertical-align:1px}
.sw.nf-sw-d{border-radius:50%;background:var(--ink);border-color:transparent;width:9px;height:9px}
.sw.nf-sw-lx{width:16px;height:0;border:0;border-top:1.5px dotted var(--ink-3);border-radius:0;vertical-align:3px}
.sw.nf-sw-lm{width:16px;height:0;border:0;border-top:3px solid var(--ink);border-radius:0;vertical-align:3px}
.sw.nf-sw-lc{width:16px;height:0;border:0;border-top:1.5px solid var(--ink-2);border-radius:0;vertical-align:3px}
.sw.nf-sw-lo{width:16px;height:0;border:0;border-top:3px dashed var(--ink);border-radius:0;vertical-align:3px}
#nf-legend>span{cursor:help}

/* ---------- metric cards ---------- */
.nf-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.nf-metrics .metric .v{overflow-wrap:anywhere}

/* ---------- rail ---------- */
.nf-mt{margin-top:12px}
.nf-ch-res{scroll-margin-top:120px}
.nf-app .goal.nf-over b{color:var(--c-oom)}
.nf-app .goal.nf-goal span:first-child{white-space:normal}
.nf-checks{margin-top:10px}
.nf-lv,.nf-chlv{margin-top:6px}
.nf-lv .lever .lv-r,.nf-chlv .lever .lv-r{grid-column:2 / 4;grid-row:2;padding-top:0}
.nf-lv .lever .lv-d,.nf-chlv .lever .lv-d{grid-row:3}
.nf-lv .lever .lv-r:empty,.nf-chlv .lever .lv-r:empty{display:none}
.nf-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .nf-why{margin-top:6px}
.nf-phone{display:none}
.nf-remlist li{margin-bottom:8px}
.nf-rem{font-size:var(--fs-label);white-space:nowrap}
.nf-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}
.nf-app .inline-ctl .seg-ctl{flex-wrap:wrap}

/* ---------- settings ---------- */
.nf-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.nf-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.nf-grp .ctl>.lbl{display:block}
.nf-app .ctl output{white-space:nowrap}
.nf-app .seg-ctl{flex-wrap:wrap}

/* ---------- connect ---------- */
.nf-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.nf-prod li{margin-bottom:6px}
.nf-prod code{word-break:break-word}

/* the mini result bar: this lab draws no chips there (review A3), so its empty visual slot gives the sentence the room */
body:has(#nf-app) #dkVis:empty{display:none}

/* ---------- the challenge's comparison chart (kit .cmp, scoped to this lab's result box) ---------- */
.nf-ch-res .cmp-val{white-space:nowrap}
.nf-whyd{margin:10px 0 4px}
.nf-whyd>summary{cursor:pointer;font-size:var(--fs-cap);font-weight:650;color:var(--ink)}

@media (max-width:760px){
  /* phones: the picture first, its legend right under it (R7.3) */
  .nf-stage{display:flex;flex-direction:column}
  .nf-stage>.stage-head{order:1}
  .nf-stage>.nf-graph{order:2}
  .nf-stage>.legend-row{order:3}
  .nf-stage>.metrics{order:4}
  .nf-stage>details.math{order:5}
  .nf-graph{padding:10px 10px 12px}
  .nf-range{--nf-sl:66px}
  .nf-fn{min-width:66px}
  .nf-phone:not(:empty){display:block}
  .nf-pl{min-width:0;width:100%}
  .nf-more span{display:none}   /* phones: the arrows only, so the value's dot never covers a number; the strip's tooltip has both ends */
}
@media (max-width:420px){.nf-app .pb-dots{gap:3px}}

/* R5.9: each sub-chart's key sits right under it */
.nf-key{margin:6px 0 10px}
/* Show the math as short blocks (H2, 2026-10-09): a lead line, then the formula's rows in a grid; blocks are split by a hairline */
.nf-mb{padding:10px 0}
.nf-mb:first-child{padding-top:2px}
.nf-mb+.nf-mb{border-top:1px solid var(--line)}
.mathbody .nf-ml{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.55;color:var(--ink-2)}
.nf-mg{display:grid;justify-content:start;justify-items:center;align-items:center;column-gap:.35em;row-gap:.45em;overflow-x:auto;padding-block:.3em;margin-bottom:4px;font-size:var(--fs-cap)}
.nf-mg .nf-mn{justify-self:end}
.nf-mg .nf-mw{justify-self:start}
/* a cell never shrinks under its text: a formula with Chinese words in it would otherwise be squeezed and run into the next
   column (H7); a row wider than the panel scrolls instead */
.nf-mg>span{white-space:nowrap;min-width:max-content}
.nf-mg .nf-mh{font-family:'STIX Two Math','Cambria Math','Latin Modern Math','Noto Sans Math',var(--font-ui);font-size:1.08em;white-space:nowrap}

/* ---------- 知识梳理: formulas on their own line, wrapping under each other in a narrow column so nothing scrolls sideways; the FP32
   bit pattern of −0.8125 in the lab's own bit cells, each field named under it (the mantissa field moves to its own line on a phone) ---------- */
.primer .nf-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:2.2em;row-gap:8px;margin:2px 0 14px;padding-left:1em;font-size:1.06em;line-height:1.3;min-width:0}
.primer .nf-prfx>span{min-width:0;max-width:100%}
.primer .nf-prbits{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;margin:4px 0 14px;padding-left:1em;min-width:0}
.primer .nf-prb{display:grid;gap:5px;justify-items:start;min-width:0}
.primer .nf-prbits .nf-bit{width:17px;height:23px;line-height:21px;font-size:var(--fs-label)}
.primer .nf-prb em{font-style:normal;font-size:var(--fs-ui);line-height:1.3;color:var(--ink-2);white-space:nowrap}
@media (max-width:760px){.primer .nf-prfx{padding-left:.4em;column-gap:1.6em}.primer .nf-prbits{padding-left:.4em}}
@media (max-width:480px){.primer .nf-prbits .nf-bit{width:12px;height:21px;line-height:19px;font-size:var(--fs-mark)}}
/* 精装修 step 2: 700 px tall or less (1366 × 650), the keys under the two figures sit closer so the stage fits without scrolling inside */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){.nf-key{margin:4px 0 6px}}

/* optimizers: the valley seen from above with each optimizer's path, the size of the chosen step in x and in y, and the loss on a log scale.
   Colours (R5.6): grayscale and line styles only (solid SGD, dashed momentum, dotted Adam, dash-dot Adam without bias correction);
   green and red only for the challenge's goal and a run that diverges. */
.op-graph{padding:12px 14px 14px;display:grid;gap:8px;min-width:0}
.op-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;text-wrap:balance}
.op-cap+svg,.op-cap+.op-bars{margin-top:-2px}

/* ---------- the valley ---------- */
.op-map,.op-loss{display:block;width:100%;height:auto;cursor:help;border-radius:3px;outline-offset:3px}
.op-bg{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.op-ct{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.op-ct.in{stroke:var(--ink-3)}
.op-path,.op-lline{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.op-path.op-s0,.op-lline.op-s0,.op-swl.op-s0{stroke:var(--ink)}
.op-path.op-s1,.op-lline.op-s1,.op-swl.op-s1{stroke:var(--ink-2)}
.op-path.op-s2,.op-lline.op-s2,.op-swl.op-s2{stroke:var(--ink)}
.op-path.op-s3,.op-lline.op-s3,.op-swl.op-s3{stroke:var(--ink-3)}
.op-arrow{stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.op-ahd{fill:var(--ink)}
.op-dot{fill:var(--ink)}
.op-start{fill:var(--surface);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.op-min{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.op-tl{font-family:var(--font-mono);font-size:var(--fs-cap);fill:var(--ink-2);paint-order:stroke;stroke:var(--surface);stroke-width:3px}

/* ---------- the player: play / pause / replay and the speed first, then the step slider with back and forward (R3.9) ---------- */
.op-player{display:grid;gap:6px;min-width:0;margin:2px 0 4px}
.op-prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.op-play{min-width:7.5em;justify-content:center}
.op-spd{display:inline-flex;cursor:help;border-radius:3px}
.op-spd .seg-ctl button{white-space:nowrap}
.op-scrub{display:flex;align-items:center;gap:8px;min-width:0}
.op-scrub input[type=range]{flex:1 1 auto;min-width:0}
.op-scrub .btn{padding:4px 10px;flex:none}
.op-scrub output{font-size:var(--fs-label);color:var(--ink);white-space:nowrap;min-width:5.5em;text-align:right}

/* ---------- the size of the chosen step in x and y ---------- */
.op-bars{display:grid;gap:8px;min-width:0}
.op-brow{display:grid;grid-template-columns:minmax(0,190px) 14px minmax(0,1fr) 62px;gap:3px 8px;align-items:center;min-width:0;cursor:help;border-radius:3px;outline-offset:2px}
.op-bl{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.op-bk{font-size:var(--fs-label);color:var(--ink-3);text-align:center}
.op-bv{font-size:var(--fs-label);color:var(--ink);text-align:right;white-space:nowrap}
.op-bnone{grid-column:2/-1}
.op-btr{position:relative;height:10px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.op-b{position:absolute;left:0;top:0;bottom:0;display:block;transition:width .2s ease-out}
.op-b.op-s0{background:var(--ink)}
.op-b.op-s1{background:repeating-linear-gradient(90deg,var(--ink-2) 0 7px,transparent 7px 11px)}
.op-b.op-s2{background:repeating-linear-gradient(90deg,var(--ink) 0 2.5px,transparent 2.5px 5.5px)}
.op-b.op-s3{background:repeating-linear-gradient(90deg,var(--ink-3) 0 9px,transparent 9px 12px,var(--ink-3) 12px 14px,transparent 14px 17px)}

/* ---------- part 7: the share of each weight that weight decay removes per step ---------- */
.op-wd{display:none;min-width:0}
.op-graph.op-wdmode>*{display:none}
.op-graph.op-wdmode>.op-wd{display:grid;gap:12px}
.op-wgrp{display:grid;gap:6px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:var(--surface-2);min-width:0}   /* soft panels (精装修 step 2); the group in play keeps its ring; bars inside turn white */
.op-wgrp .op-btr{background:var(--surface)}
.op-wgrp.on{border-color:var(--ink-2)}
.op-wh{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.op-wrow{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr) 62px;gap:8px;align-items:center;min-width:0;cursor:help;border-radius:3px;outline-offset:2px}
.op-wl{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3;min-width:0}
.op-swb{position:static;display:inline-block;width:22px;height:9px;border-radius:2px;flex:none}

/* ---------- the loss chart ---------- */
.op-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.op-dv{fill:var(--ink);font-weight:600}
/* R5.9: names on the charts: the loss lines at their ends, the goal on its line, the paths on the map */
.op-ll{fill:var(--ink-2);font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.op-gl{fill:var(--ink-3);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.op-pl{fill:var(--ink);font-weight:600}
.op-goal{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.op-kline{stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}

/* ---------- legend ---------- */
#op-legend>span{display:inline-flex;align-items:center;gap:6px;cursor:help}
.op-sw{flex:none;overflow:visible}
.op-swl{stroke-width:2.2;fill:none}
.op-swl.op-s2{stroke-width:2.6;stroke-linecap:round}
.op-swg{stroke:var(--ink-3);stroke-width:1.2}
.op-swa{font-size:var(--fs-cap);color:var(--ink);line-height:1}
.op-dk{display:block;width:100%;max-width:120px;height:24px;overflow:hidden}

/* ---------- metric cards ---------- */
.op-metrics[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.op-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.op-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.op-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.op-metrics .metric{cursor:help}
.op-metrics .metric .v{white-space:normal}

/* ---------- rail ---------- */
.op-mt{margin-top:12px}
.op-ch-res{scroll-margin-top:120px}
.goal.op-over b{color:var(--c-oom)}
.op-app .goal.op-chgoal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.op-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.op-app .inline-ctl .seg-ctl button{white-space:nowrap}
.op-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.op-remlist{padding-left:18px}
.op-remlist li{margin-bottom:8px}
.op-prod li{margin-bottom:8px}
.op-app .mathbody p{overflow-x:auto;max-width:100%}
/* a formula's symbols explain themselves on hover (R1.4) */
.op-app .mathbody .op-sym{cursor:help;text-decoration:underline dotted var(--ink-3);text-underline-offset:3px;border-radius:2px}
.op-app .mathbody .op-sym:focus-visible{outline:2px solid var(--ink-3);outline-offset:1px}
/* parts 6 and 7: the result goes under the title, so the title is never squeezed into a narrow column (R3.17, R7.8) */
#op-ic-bc .lever .lv-r,#op-ic-wd .lever .lv-r{grid-column:2 / 4;grid-row:2;padding-top:0}
#op-ic-bc .lever .lv-r:empty,#op-ic-wd .lever .lv-r:empty{display:none}
#op-ic-bc .lever .lv-d,#op-ic-wd .lever .lv-d{grid-row:3}
/* the arithmetic behind an explanation, folded away (R6.27) */
.op-more{margin:8px 0 0;border-top:1px solid var(--line);padding-top:6px}
.op-more>summary{cursor:pointer;font-size:var(--fs-cap);color:var(--ink-2);font-weight:600;width:fit-content}
.op-more>summary:focus-visible{outline:2px solid var(--ink-3);outline-offset:2px}
.op-more>p{margin:6px 0 0}
/* the challenge's six learning rates: two rows of three, never one option alone on a row (R7.8) */
.op-app #op-ic-chL .seg-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:560px){
  .op-brow{grid-template-columns:14px minmax(0,1fr) 58px}
  .op-bl{grid-column:1/-1}
  .op-brow>span:empty{display:none}
  .op-bnone{grid-column:1/-1}
  .op-tl{font-size:var(--fs-big)}
  .op-ax{font-size:var(--fs-body)}
  .op-metrics[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-metrics[data-n="3"] .metric:last-child{grid-column:1 / -1}
  .op-wrow{grid-template-columns:minmax(0,84px) minmax(0,1fr) 56px}
  /* refit step 3: the loss curve drawn for the phone's width, one unit to a pixel (drawLoss, --op-lh), its labels at 11 px, not 600
     units scaled to 296 px with 7.9 px labels */
  .op-loss{--op-lh:130}
  .op-loss .op-ax{font-size:var(--fs-mark)}
}
@media (prefers-reduced-motion:reduce){.op-b{transition:none}}
/* H1 (2026-10-09): a typeset formula on its own line (the interview drill) */
.op-fx{overflow-x:auto;max-width:100%;margin:4px 0}
/* H5 (the owner's decision of 2026-10-09): a hairline between the kinds of information on the stage, the path on the map, the step
   sizes and the loss curve; static, so the stage keeps its height while it plays (R7.9) */
#op-bars-cap,#op-loss-cap{border-top:1px solid var(--line);padding-top:8px}


/* polish round 5 (fit): on a wide stage (at least 736 px: the desktop at 1440 and 1280) the stage ran 137–194 px past the screen at
   1440 × 900 in parts 1–6 and 8: the valley 253 px, the player in two rows 71, the step sizes 40–96 and the loss chart 190 under one
   another. There the player takes one row and the hairline under it; the step sizes and the loss curve sit side by side below it, a
   hairline between them (H5, R7.13), each caption right above its chart in a row two lines tall (the English caption of the step sizes
   takes one or two lines as the step number grows, R7.9); the loss curve is drawn for its column at --op-lh px (drawLoss),
   its labels at the size they had; the metric cards are compact (CONTRACT §19); the spacing is tighter. The valley keeps its size and
   stays on top (R7.12). The row keeps its height while the paths play (R7.9): three moving runs' step sizes (136 px) are shorter than
   the loss curve, and a run that has stopped keeps its row as tall as a moving one (two lines of 18.6 px, the values' line height), so
   the rows under it do not move up. Phones and narrower stages keep the layout above. */
@media (min-width:761px){@container (min-width:736px){
  .op-graph{margin-top:10px;padding:8px 12px 10px;grid-template-columns:minmax(0,1.2fr) 1px minmax(0,1fr);column-gap:12px;row-gap:6px;
    grid-template-rows:auto auto auto minmax(34px,auto) auto}
  .op-graph.op-wdmode{grid-template-rows:none}
  .op-graph>#op-map-cap,.op-graph>#op-map,.op-graph>#op-player,.op-graph>#op-wd{grid-column:1/-1}
  .op-player{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:20px;margin:0;padding-bottom:8px;border-bottom:1px solid var(--line)}
  #op-bars-cap,#op-loss-cap{border-top:0;padding-top:0;grid-row:4;align-self:end}
  #op-bars-cap,#op-bars{grid-column:1}
  #op-loss-cap,#op-loss{grid-column:3}
  #op-bars,#op-loss{grid-row:5;align-self:start}
  .op-brow{grid-template-rows:repeat(2,minmax(18.6px,auto))}
  .op-bnone{grid-row:1/3;align-self:center}
  .op-graph::after{content:'';grid-column:2;grid-row:4/6;background:var(--line)}
  .op-graph.op-wdmode::after{content:none}
  .op-stage .op-loss{--op-lh:150}
  .op-stage .op-loss .op-ax{font-size:var(--fs-cap)}
  .op-metrics{margin-top:8px}
  .op-metrics .metric .v{line-height:1.25}
  .op-metrics .metric .sub{line-height:1.25}
  .op-metrics .metric .d{min-height:13px;line-height:1.1}
  .op-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* a formula's paragraph in “Show the math” scrolls sideways when it must; its typeset symbols reach a few px below the last line, which
   made each paragraph scroll 2–6 px up and down as well (the stage's inner scroll in part 7); the 6 px between paragraphs are now inside
   each paragraph, so they read as before (refit step 3: on phones too, where the SGD, Momentum and Adam lines still scrolled 6 px) */
.op-app .mathbody p{margin:0;padding-bottom:6px}.op-app .mathbody p:first-child{margin-top:6px}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
#op-bars-cap,#op-metrics .k{font-variant-numeric:tabular-nums}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and parts 1–6 and 8 still ran 40 px past it at 1536 × 730: there the valley is drawn at most 216 px tall
   (257 at this width), so its labels are about 11 px; it stays on top (R7.12) and the rest keeps its size */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .op-stage .op-map{max-height:216px}
}}

/* ---------- PagedAttention lab (prefix pa-) ---------- */
.pa-host{display:block}
.pa-host .stage-head .meter-sub{font-size:var(--fs-ui)}
.pa-wl{font-size:var(--fs-label);color:var(--ink-2);margin-top:8px;cursor:pointer}
/* legend swatches: the same fills as the pool cells and the bars */
.pa-sw{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;margin-right:6px;border:1px solid var(--line)}
.pa-f-tok{background:var(--c-kv);border-color:transparent}
.pa-f-resv{background:var(--line)}
.pa-f-intf{background:repeating-linear-gradient(135deg,var(--surface-2) 0 2px,var(--ink-3) 2px 3px)}
.pa-f-ext{background:radial-gradient(circle,var(--ink-2) 0 .8px,transparent 1.1px) 0 0/4px 4px,var(--surface)}
.pa-f-free{background:var(--surface)}
.pa-sw.pa-f-start{width:4px;height:14px;border:0;border-radius:1px;background:var(--ink);margin:0 9px 0 4px;vertical-align:-3px}
.pa-legend [data-jump]{cursor:pointer}
.pa-legend [data-jump][aria-pressed="true"]>span:last-child{text-decoration:underline;text-underline-offset:3px;color:var(--ink);font-weight:600}
.pa-legend>[hidden]{display:none}
#pa-lg-start{cursor:help}
/* the pool */
.pa-pool{position:relative;margin-top:6px}
.pa-canvas{display:block;width:100%;height:auto;cursor:help;border-radius:2px;touch-action:manipulation}
.pa-canvas:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pa-anchor{position:absolute;pointer-events:none;width:1px;height:1px}
.pa-lab{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;align-items:baseline}
.pa-lab b{font-weight:600;color:var(--ink)}
/* time controls (stage and inline) */
.pa-time{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.pa-time input[type=range]{flex:1 1 150px;min-width:0;width:auto}
.pa-time .btn{flex:none}
.pa-play{min-width:78px;justify-content:center}
/* playback speed: a small segmented control next to Play */
.pa-speed{display:inline-flex;align-items:center;gap:6px;flex:none;cursor:help}
.pa-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.pa-host .pa-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);cursor:pointer}
.pa-tread{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);margin-top:4px}
.pa-tread b{color:var(--ink);font-weight:600}
.inline-ctl .pa-time{margin-top:2px}
.pa-live{font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.45;color:var(--ink-2);margin:0 0 10px}
.pa-live:empty{display:none}
/* stacked share bars under the pool */
.pa-bars{margin-top:10px;display:grid;gap:6px}
.pa-brow{display:grid;grid-template-columns:minmax(0,12.5em) minmax(0,1fr);gap:10px;align-items:center}
.pa-bl{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);cursor:help;line-height:1.3}
.pa-bar{position:relative;height:18px;border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden}
.pa-sg{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-mark);padding-left:5px;transition:left .22s ease-out,width .22s ease-out}
.pa-sg.pa-f-tok{color:var(--on-kv);font-weight:600}
.pa-sg.pa-f-resv{color:var(--ink)}
.pa-ghost{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--ink);opacity:0;pointer-events:none}
.pa-barwrap{position:relative}
.pa-gleg{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.35;color:var(--ink-3)}
.pa-ghostsw{display:inline-block;flex:none;width:0;height:12px;border-left:2px dashed var(--ink);margin:0 5px 0 3px}
.pa-note{font-size:var(--fs-label);color:var(--ink-2);margin:10px 0 0;line-height:1.45}
.pa-dkbar{margin-top:0;height:14px}
/* metrics: five cards, all about the whole run, so they are greyed and titled */
.pa-mhead{font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.02em;color:var(--ink-3);margin:14px 0 -4px}
.pa-whole .metric{background:var(--surface-2);border-color:var(--line-2)}
/* labels now wrap to different heights ("Stores tokens while requests wait"): a subgrid keeps each row (label, value, note, change) aligned across the cards */
.pa-whole{row-gap:8px}
.pa-whole .metric{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
.pa-whole .metric>*{align-self:start}
.pa-host .metric .v{white-space:nowrap}
.pa-host .metric .sub b{font-weight:600;color:var(--ink-2)}
/* rail */
/* lever results are short sentences here ("24.8% stores tokens while requests wait"): each goes on its own line under the description */
/* PagedAttention's results are sentences: they go on their own row under the description */
.pa-host .lever{row-gap:3px}
.pa-host .levers .lv-r{grid-column:2 / 4;grid-row:3;padding-top:0;text-align:left;white-space:normal;font-size:var(--fs-label);line-height:1.3}
/* kit round K: levers are a flex row now; keep the result on its own line after the description */
.pa-host .levers .lv-r{order:4;flex:1 0 100%;margin-left:0;padding-left:24px}
.pa-host .levers .lv-r:empty{display:none}
.pa-quote{margin:8px 0 0;padding:6px 0 6px 10px;border-left:2px solid var(--line);font-size:var(--fs-cap);color:var(--ink-2)}
.pa-goal2{margin-top:10px}
.pa-host .goal{align-items:baseline}
.pa-why{font-size:var(--fs-label);color:var(--ink-3);margin:6px 0 10px;line-height:1.45}
.pa-host #pa-chres{scroll-margin-top:120px}
.pa-cmpwrap{overflow:hidden}
/* step 6: tried block sizes keep their results under their buttons */
.pa-btried{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:2px;text-align:center;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.3;color:var(--ink-2)}
.pa-btried span{display:grid;min-width:0;padding:2px 0;border-radius:3px}
.pa-btried span.on{background:var(--surface-2)}
.pa-btried b{font-weight:600;color:var(--ink)}
.pa-btried i{font-style:normal;color:var(--ink-3)}
.pa-btcap{font-size:var(--fs-label);color:var(--ink-3);margin-top:3px}
/* controls */
.pa-host details.adv p{font-size:var(--fs-label);color:var(--ink-2);margin:10px 0 0;line-height:1.45}
.pa-host .seg-ctl button{padding-inline:3px;min-width:0}
/* connect */

.pa-host .refs code{font-size:.9em}
.pa-prod p{font-size:var(--fs-ui)}
.pa-prod ul{margin:0 0 10px;padding-left:18px;font-size:var(--fs-cap);color:var(--ink-2)}
.pa-prod li{margin-bottom:6px}
.pa-host .drill-a p{margin:3px 0}
/* teaser: one bar per request, at its final length */
.tz-pa-cap{font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}
.tz-pa-rows{display:grid;gap:4px}
.tz-pa-row{position:relative;height:9px}
.tz-pa-row i{position:absolute;top:0;bottom:0;left:0;border-radius:2px}
.tz-pa-row .tz-pa-held{background:var(--line)}
.tz-pa-row .tz-pa-used{background:var(--c-kv)}
.tz-pa-row .tz-pa-wait{border:1px dashed var(--ink-3);box-sizing:border-box}
.tz-leg .sw.tz-pa-swheld{background:var(--line);border-color:transparent}
.tz-leg .sw.tz-pa-swwait{background:none;border:1px dashed var(--ink-3)}
@media (max-width:760px){.pa-time input[type=range]{flex-basis:100%;order:3}}
@media (prefers-reduced-motion:reduce){.pa-sg{transition:none}}
.pa-host [data-jump]:not(button){cursor:pointer}
.pa-host .pa-wl:hover{text-decoration:underline;text-underline-offset:3px}
/* mini result bar: the reading shrinks with an ellipsis on wide screens and wraps to at most three lines on narrow ones
   (the met challenge needs three in EN at 390: both numbers) */
.pa-dk{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.pa-dk{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:normal}}
/* the run ended while part 3's card is off screen: a line under the pool leads back to it */
.pa-done{display:block;margin:8px 0 0;font-weight:600;text-align:left}
.pa-done[hidden]{display:none}
html[lang^="zh"] .pa-host .meter-title{text-transform:none}
@media (max-width:520px){.pa-brow{grid-template-columns:minmax(0,1fr);gap:3px}.pa-bars{gap:8px}}
/* the badge can hold a full sentence while part 3 runs: let it wrap instead of overflowing on phones */
.pa-host #pa-status{white-space:normal;max-width:100%}
/* the three allocation strategies keep their full names, so they stack as a single-choice list instead of one row */
.pa-host .seg-ctl[data-key="strat"]{flex-direction:column}
.pa-host .seg-ctl[data-key="strat"] button{text-align:left;padding:7px 10px;line-height:1.3}
/* the scenario result sits right under the list and reads as the result of the click */
.pa-host .pa-sbnote{margin:8px 0 12px;padding:8px 10px;border-left:2px solid var(--ink-3);background:var(--surface-2);border-radius:3px;line-height:1.45;color:var(--ink)}
.pa-host .pa-sbnote:empty{display:none}
/* H1/H2 (the owner, 2026-10-09): Show the math in short blocks with a hairline between them; in each block the name and the typeset
   formula, then this run's numbers under the terms they replace, the "=" signs lined up; a table wider than its box is set again by fitMath (below), so nothing scrolls sideways */
.pa-mb{padding:8px 0 10px}
.pa-mb+.pa-mb{border-top:1px solid var(--line)}
.pa-mb .pa-mlead{margin:0 0 4px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5}

.pa-mfx{overflow-x:auto;max-width:100%;padding-block:.3em}
.pa-mt{border-collapse:collapse}
.pa-mt th,.pa-mt td{padding:1px 3px;text-align:center;white-space:nowrap;vertical-align:baseline;font-weight:400;border:0;background:none}
.pa-mt th{font-family:var(--font-ui);text-align:right;white-space:nowrap;padding-right:6px;color:var(--ink-2)}
.pa-mt tr.pa-mname th{color:var(--ink);font-weight:600}
.pa-mt tr.pa-mname:not(:first-child) th,.pa-mt tr.pa-mname:not(:first-child) td{padding-top:8px}
.pa-mt td.pa-mres{text-align:left;white-space:normal}
.pa-mb .pa-mnote{margin:4px 0 0;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}
.pa-mb .pa-mnote .muted{color:inherit}
/* Show the math on a box too narrow for its table (the owner's review of 2026-10-09): fitMath sets the block again, the name on its own
   line, the formula broken before an operator with the numbers under the terms they replace, nothing scrolling sideways */
.pa-mtn{border-collapse:collapse}
.pa-mtn th,.pa-mtn td{padding:1px 0;border:0;background:none;font-weight:400;text-align:left;vertical-align:top}
.pa-mtn tr.pa-mname th{font-family:var(--font-ui);font-weight:600;color:var(--ink);white-space:normal;padding:0 0 2px}
.pa-mtn tr.pa-mname:not(:first-child) th{padding-top:8px}
.pa-mtn .pa-mlbl{font-weight:400;color:var(--ink-2)}
.pa-mtn td.pa-meq{width:1%;padding-right:3px;white-space:nowrap}
.pa-mtn td.pa-mres{white-space:normal;padding-left:3px;line-height:1.5}
.pa-mfl{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.pa-mu{display:inline-grid;align-items:center;justify-items:center}
.pa-mc{padding:1px 3px;white-space:normal;line-height:1.5;text-align:center}
.pa-mc0{display:flex;align-items:center;justify-content:center;height:1.9em;white-space:nowrap}
.pa-mtall .pa-mc0{height:3.1em}
/* polish round 5 (2026-10-17, the owner's B4, R7.12): on a desktop the stage fits 1440 × 900 at every part without scrolling inside
   (before: English 35–68 px over at parts 2–7, Chinese 18 px to spare at parts 4–7). The same blocks in the same order with the same
   hairlines: the spacing between them tighter, the metric cards set with tighter line heights (§19 M1: sizes unchanged), and on a stage
   wide enough for 48 cells of about 14 px the pool's cells drawn 0.8 as tall as they are wide (drawPool reads --pa-ch and watchStage
   draws the pool again when the stage changes width). Phones (≤ 760 px) keep their layout */
@media (min-width:761px){
  .pa-host .pa-wl{line-height:1.4}
  .pa-host .pa-legend{margin-top:8px;row-gap:4px}
  .pa-host #pa-graph{margin-top:10px;padding-block:10px}
  .pa-host .pa-timebox .pa-time{margin-top:8px}
  .pa-host .pa-bars{margin-top:8px}
  .pa-host .pa-mhead{margin-top:10px}
  .pa-host .pa-whole{margin-top:10px}
  .pa-host .pa-whole .metric{padding-block:7px}
  .pa-host .pa-whole .metric .k,.pa-host .pa-whole .metric .sub{line-height:1.2}
  .pa-host .pa-whole .metric .v{line-height:1.25}
  .pa-host #pa-math{margin-top:10px}
  @container (min-width:736px){.pa-host .pa-pool{--pa-ch:.8}}
}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730), in English, every part still ran 24–60 px past the stage (in
   Chinese they fitted, but at 1366 × 650 parts 1–7 ran 25–54 px past). The blocks sit 6 px apart, the figure's padding is 8 px, and the
   pool's cells are drawn 0.7 as tall as they are wide instead of 0.8 (drawPool reads --pa-ch; the cells hold no text); in English
   0.64 (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .pa-host .pa-legend{margin-top:6px}
  .pa-host #pa-graph{margin-top:6px;padding-block:8px}
  .pa-host .pa-bars{margin-top:6px}
  .pa-host .pa-mhead{margin-top:6px}
  .pa-host .pa-whole{margin-top:6px}
  .pa-host #pa-math{margin-top:6px}
  .pa-host .pa-pool{--pa-ch:.7}
  html[lang="en"] .pa-host .pa-pool{--pa-ch:.64}
}}
/* refit step 2 (2026-10-24): at 700 px tall or less (1366 × 650) parts 4–7 still ran 8 px past the stage (English, every part: 36–72,
   now 10 px less). The space above the requests line, inside the figure and above the cards is smaller */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){@container (min-width:736px){
  .pa-host .pa-wl{margin-top:6px}
  .pa-host #pa-graph{padding-block:6px}
  .pa-host .pa-mhead{margin-top:4px}
  .pa-host .pa-whole{margin-top:4px}
}}

/* parallelism: eight GPU memory columns (blocks in training-memory's order and names: weights, gradients, FP32 copy, m, v, then
   activations; sharded blocks carry "3/8"; what is above the 80 GB line red), then one GPU's training step as two rows (compute,
   transfer) with a curtain, a playhead and the waiting gaps in red; metric cards below; the dock's mini bar.
   Every class on the lab's own elements carries the zr- prefix.
   Colours (R5.6): blue = weights (and the all-gathers that carry them), grayscale and hatching for the rest; red only for what does
   not fit and for waiting; green only for the challenge's goal. */
.zr-app [hidden]{display:none!important}
.zr-stage .stage-head{align-items:center}
.zr-graph{padding:12px 14px 14px;display:grid;gap:16px;min-width:0}
.zr-graph>div{min-width:0}
.zr-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:8px}

/* ---------- memory columns, legend beside them ---------- */
.zr-membox{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cap cap" "cols leg";column-gap:14px;min-width:0}
.zr-membox>.zr-cap{grid-area:cap}
.zr-cols{grid-area:cols;min-width:0}
.zr-colsin{position:relative;display:flex;gap:6px;height:236px;min-width:0}
.zr-col{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.zr-colin{position:relative;flex:1 1 auto;background:var(--surface-2);border:1px solid var(--line);border-bottom-color:var(--ink-3);border-radius:3px 3px 0 0;overflow:hidden}
.zr-gl{flex:0 0 22px;line-height:22px;text-align:center;font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;overflow:hidden}
.zr-blk{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 var(--surface);cursor:help;transition:bottom .25s ease-out,height .25s ease-out}
.zr-blk em{font:600 var(--fs-mark)/1 var(--font-mono);font-style:normal;color:var(--ink);background:var(--surface);padding:1px 3px;border-radius:2px;white-space:nowrap}
.zr-b-w,.zr-sw-w{background:var(--c-weights)}
.zr-b-g,.zr-sw-g{background:var(--ink-2)}
.zr-b-c,.zr-sw-c{background:var(--ink-3)}
.zr-b-m,.zr-sw-m{background:repeating-linear-gradient(135deg,var(--ink-3) 0 2px,var(--surface-2) 2px 5px)}
.zr-b-v,.zr-sw-v{background:repeating-linear-gradient(45deg,var(--ink-3) 0 2px,var(--surface-2) 2px 5px)}
.zr-b-inf,.zr-sw-inf{background:repeating-linear-gradient(90deg,var(--c-weights) 0 2px,var(--surface-2) 2px 5px)}
.zr-b-act,.zr-sw-act{background:radial-gradient(var(--ink-3) 1px,transparent 1.3px) 0 0/5px 5px,var(--sunken)}
.zr-sw-sh{background:var(--surface);border:1px solid var(--ink-2)}
.zr-sw-ovr{background:repeating-linear-gradient(135deg,var(--c-oom) 0 3px,var(--c-oom-soft) 3px 5px);border-color:var(--c-oom)}
.zr-ovr{position:absolute;left:0;right:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(135deg,var(--c-oom) 0 3px,transparent 3px 6px);border-bottom:2px solid var(--c-oom);opacity:.85}
.zr-col.over .zr-colin{border-color:var(--c-oom)}
.zr-clip{position:absolute;top:3px;left:0;right:0;z-index:3;text-align:center;font:600 var(--fs-mark)/1.2 var(--font-mono);color:var(--c-oom)}
.zr-clip::first-letter{font-size:var(--fs-mark)}
.zr-q{position:absolute;inset:0;display:grid;place-items:center;font:600 var(--fs-big)/1 var(--font-mono);color:var(--ink-3)}
.zr-cap80{position:absolute;left:0;right:0;height:0;border-top:2px dashed var(--ink);z-index:4;pointer-events:none}
.zr-cap80 span{position:absolute;right:2px;bottom:3px;font:600 var(--fs-mark)/1.2 var(--font-ui);color:var(--ink);background:var(--surface);padding:1px 4px;border-radius:2px;white-space:nowrap}
.zr-more{margin-top:6px;font-size:var(--fs-label);color:var(--ink-2)}
#zr-mem-leg{grid-area:leg;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding-bottom:24px;font-size:var(--fs-label);color:var(--ink-2);min-width:0}
.zr-leg>span{white-space:nowrap;cursor:help;outline-offset:2px}
.zr-leg .sw{border-color:transparent}

/* ---------- the timeline of one step ---------- */
.zr-tlbox{min-width:0}
/* H5 (the owner, 2026-10-09: “需要分割线之类”): the memory chart and the timeline are two blocks, a hairline between them; the
   timeline's legend and its player sit under a second hairline, apart from the sentence about the step */
.zr-membox+.zr-tlbox{border-top:1px solid var(--line);padding-top:14px}
#zr-tl-leg{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.zr-tl{position:relative;margin-left:66px;display:flex;flex-direction:column;gap:5px;min-width:0}
.zr-rowlab{position:absolute;left:-66px;width:60px;height:18px;line-height:18px;text-align:right;font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.zr-tl>.zr-rowlab:nth-child(1){top:0}
.zr-tl>.zr-rowlab:nth-child(3){top:23px}
.zr-row{position:relative;height:18px;background:var(--surface-2);border-radius:2px;cursor:help;outline-offset:2px}
.zr-e{position:absolute;top:0;bottom:0;box-shadow:inset -1px 0 0 var(--surface)}
.zr-e-F,.zr-sw-F{background:var(--ink-3)}
.zr-e-B,.zr-sw-B{background:var(--ink-2)}
.zr-e-AG,.zr-e-AGb,.zr-sw-AG{background:var(--c-weights)}
.zr-e-RS,.zr-sw-RS{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface-2) 2px 4px)}
.zr-e-AR,.zr-sw-AR{background:var(--ink)}
.zr-e-ARx,.zr-sw-ARx{background:repeating-linear-gradient(90deg,var(--ink) 0 2px,var(--surface-2) 2px 4px)}
.zr-e.zr-wait,.zr-sw-wait{background:var(--c-oom)}
.zr-e.zr-wait{top:-2px;bottom:-2px;z-index:1;box-shadow:none}
.zr-sw-head{background:var(--ink);width:3px!important;border-radius:0}
.zr-cur{position:absolute;top:-3px;height:47px;z-index:2;pointer-events:none;background:var(--surface);opacity:.78}
.zr-head{position:absolute;top:-4px;height:49px;width:2px;margin-left:-1px;z-index:3;pointer-events:none;background:var(--ink)}
.zr-ax{position:relative;height:16px;margin-top:2px;border-top:1px solid var(--line)}
.zr-ax span{position:absolute;top:3px;transform:translateX(-50%);font:var(--fs-mark)/1.2 var(--font-mono);color:var(--ink-3);white-space:nowrap}
.zr-ax span:first-child{transform:none}
.zr-ax span:last-child{transform:translateX(-100%)}
/* the caption above the legend: a fixed box of three lines (R7.9). The first line (time, pass, layer, time waited) never wraps;
   the second may take two lines on a phone. Its sentences stay put for a whole pass; only the numbers change (tabular figures,
   so the line does not jitter) */
.zr-now{height:calc(3 * 1.4em);margin-top:8px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);overflow:hidden}
.zr-nl-c{white-space:nowrap;overflow:hidden;color:var(--ink)}
.zr-nn{font-variant-numeric:tabular-nums}
.zr-waitn{color:var(--c-oom);font-weight:600;margin-left:.25em}
html[lang^="zh"] .zr-waitn{margin-left:0}
#zr-tl-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:var(--fs-label);color:var(--ink-2)}
.zr-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px}
.zr-player .ctl{display:flex;align-items:center;gap:6px;margin:0}
.zr-player .ctl>.lbl{font-size:var(--fs-label)}
.zr-player .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
/* H7 (the owner, 2026-10-09, on GRPO's player: “重放按钮和速度按钮没有对齐”): Replay, the step buttons and the speed buttons share one
   height and one centre line */
.zr-player .btn.sm,.zr-player .seg-ctl{height:30px;box-sizing:border-box}
.zr-player .btn.sm{padding-top:0;padding-bottom:0}
.zr-player .seg-ctl button{padding-top:0;padding-bottom:0}
.zr-play{min-width:92px;justify-content:center}
.zr-stp{min-width:34px;justify-content:center}
.zr-scrub{display:flex;align-items:center;flex:1 1 160px;min-width:0}
.zr-scrub input{flex:1 1 auto;min-width:0;width:100%}

/* ---------- metric cards ---------- */
/* the owner's review of 2026-10-07: “等数据的时间” fell to a second row and off the screen. The four cards sit in one row
   whenever the stage is beside the step card (1440, 1280, 900), and in two rows of two on phones (720, 390) */
.zr-metrics.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.zr-metrics .metric.zr-bad .v{color:var(--c-oom)}

/* ---------- rail ---------- */
.zr-ic{margin:10px 0 4px}
.zr-lv{margin:10px 0 4px}
.zr-fx{margin:10px 0;overflow-x:auto;max-width:100%}
/* a named formula: “name =” and the right-hand side side by side, the right-hand side under the name when the card is narrow */
.zr-fxn{display:flex;flex-wrap:wrap;align-items:center;column-gap:.3em;row-gap:4px}
.zr-fxn>math{margin:0;display:inline-block}
.zr-numl{margin:2px 0 12px;padding-left:1.4em;overflow-x:auto;max-width:100%}
.zr-remlist{margin:0 0 10px;padding-left:18px}
.zr-remlist li{margin:0 0 8px}
.zr-rem{margin-left:4px;font-size:var(--fs-label)}
.zr-asm{margin:6px 0 10px;padding-left:18px;color:var(--ink-2)}
.zr-asm li{margin:0 0 4px}
.zr-goal.zr-over b{color:var(--c-oom)}
.zr-ch-res{margin-top:6px}
/* the challenge's result (the owner's review of 2026-10-07, R1, after the train-capstone lab): your setting beside the best one,
   the differing settings as chips (bold where yours differs), what fails in red; the settings that pass behind a closed disclosure */
.zr-sum{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.zr-sumcap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:4px}
.zr-same{margin:0 0 4px;color:var(--ink-2);line-height:1.45}
.zr-c2,.zr-pass{list-style:none;margin:0;padding:0}
.zr-c2r{padding:7px 0 8px;border-bottom:1px solid var(--line-2)}
.zr-c2h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.zr-c2t{font-size:var(--fs-cap);font-weight:700;color:var(--ink);margin-right:2px}
.zr-chip{font-size:var(--fs-label);line-height:1.45;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--ink-2);white-space:nowrap;margin-left:4px}
.zr-c2h .zr-chip{margin-left:0}
.zr-chip.on{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.zr-c2v{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px;font-size:var(--fs-label);color:var(--ink)}
.zr-sv:not(.zr-bad){white-space:nowrap}
.zr-sv.zr-bad{color:var(--c-oom);font-weight:650}
.zr-gap,.zr-next{margin:9px 0 0;font-size:var(--fs-cap);line-height:1.5}
.zr-all{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.zr-all>summary{cursor:pointer;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:4px 0}
.zr-allb>p{margin:6px 0}
.zr-pass li{padding:6px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-cap);line-height:1.5}
.zr-pass li .zr-sv{margin-right:14px;font-size:var(--fs-label)}
.zr-pass li.me b{text-decoration:underline;text-underline-offset:3px}
.zr-mt{margin-top:10px}
.zr-prod{margin:0;padding-left:18px}
.zr-prod li{margin:0 0 8px}
.zr-grp{margin-top:6px;padding:8px 10px 2px;border:1px dashed var(--line);border-radius:6px}
.zr-gh{font-size:var(--fs-mark);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}

/* ---------- dock mini bar ---------- */
.zr-dk{position:relative;width:100%;min-width:48px;height:12px;box-sizing:border-box;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.zr-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}
.zr-dk i.over{background:var(--c-oom)}
.zr-dk b{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--ink)}

/* ---------- phone ---------- */
@media (max-width:760px){
  .zr-metrics.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zr-graph{padding:10px 10px 12px}
  .zr-membox{grid-template-columns:minmax(0,1fr);grid-template-areas:"cap" "cols" "leg"}
  .zr-colsin{gap:3px;height:200px}
  .zr-gl{font-size:var(--fs-mark)}
  .zr-blk em{font-size:var(--fs-mark);padding:0 1px}
  #zr-mem-leg{flex-direction:row;flex-wrap:wrap;gap:4px 12px;padding-bottom:0;margin-top:8px}
  .zr-tl{margin-left:54px}
  .zr-rowlab{left:-54px;width:48px;font-size:var(--fs-mark)}
  .zr-cap80 span{font-size:var(--fs-mark)}
}

/* the challenge's six token counts wrap in the narrow rail instead of running past it */
#zr-rail .seg-ctl[data-key="cht"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* the five ways to split, in two rows in the Settings panel (“Data parallel” is long in English) */
#zr-controls .seg-ctl[data-key="st"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.zr-b-lg,.zr-sw-lg{background:repeating-linear-gradient(0deg,var(--ink-3) 0 1px,var(--sunken) 1px 4px)}
.zr-netl{margin:4px 0 6px;padding-left:16px}
.zr-netl li{margin:0 0 2px}
.zr-prod .zr-sub{margin:6px 0 0;padding-left:16px}
.zr-prod .zr-sub li{margin:0 0 4px}

/* ---------- 知识梳理: formula blocks side by side, wrapping under each other in a narrow column (as eval-ci's), never scrolling ---------- */
.primer .zr-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:2.2em;row-gap:8px;margin:2px 0 14px;padding-left:1em;font-size:1.06em;line-height:1.3;min-width:0}
.primer .zr-prfx.one{column-gap:.35em}
.primer .zr-prfx>span{min-width:0;max-width:100%}
@media (max-width:760px){.primer .zr-prfx{padding-left:.4em;column-gap:1.6em}.primer .zr-prfx.one{column-gap:.35em}}

/* ---------- polish round 5 (B4, 2026-10-17): the stage fits 1440 × 900 ----------
   In English, parts 5 and 6 (the ZeRO-3 timeline) ran 8 and 14 px past the stage's 814 px at 1440 × 900, and in Chinese they left
   only 8 and 3 px. On a desktop stage at least 736 px wide (1440 and 1280 px windows) the metric cards take the kit's tight line
   heights (CONTRACT §19; a card name stays 12 px) and a few gaps are tighter. Same blocks in the same order, the same lines between
   them (R7.13), the same texts and animation; phones (≤ 760 px) and narrower stages keep the layout above */
@media (min-width:761px){@container (min-width:736px){
  .zr-graph{margin-top:10px;padding:8px 12px 10px;gap:12px}
  .zr-membox+.zr-tlbox{padding-top:10px}
  #zr-tl-leg{padding-top:8px}
  .zr-player{margin-top:8px}
  .zr-metrics{margin-top:8px}
  .zr-metrics .metric .v{line-height:1.25}
  .zr-metrics .metric .sub{line-height:1.25}
  .zr-metrics .metric .d{min-height:13px;line-height:1.1}
  .zr-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.zr-nl{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 2–7 still ran 14–39 px past the stage in Chinese and
   29–54 in English. On a wide stage the caption's second line never wraps (nowFit, every setup), so its fixed box holds two lines here
   instead of three; the columns are 26 px shorter, so a block's label sits in its block without the 1 px pads above and below it (the
   label's own size is kept); the legend beside them is 3 px tighter per item; a few gaps are 2–4 px smaller. Same blocks, lines and texts */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .zr-now{height:calc(2 * 1.4em)}
  .zr-colsin{height:210px}
  .zr-blk em{padding-top:0;padding-bottom:0}
  #zr-mem-leg{gap:2px}
  .zr-graph{gap:8px}
  .zr-membox+.zr-tlbox{padding-top:8px}
  #zr-tl-leg{margin-top:4px;padding-top:6px}
  .zr-player{margin-top:6px}
}}

/* pass-k: the grid of tries (columns are tasks, rows are tries), its player, and the chart of pass@k and pass^k against k.
   Colours (R5.6): grayscale only; green and red only for the challenge's goal. */
.pak-graph{padding:12px 14px 14px;display:grid;gap:16px;min-width:0}
.pak-gridbox,.pak-chartbox{min-width:0}
/* H5 (the owner, 2026-10-09): a hairline between the tries grid and the chart; none when the chart stands alone (challenge) */
.pak-graph>.pak-gridbox:not([hidden])~.pak-chartbox:not([hidden]){border-top:1px solid var(--line);padding-top:14px}
.pak-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
/* the legend sits beside what it labels: on the grid's caption line (R5.9) */
.pak-leg{display:inline-flex;flex-wrap:wrap;gap:4px 12px;font-weight:400;font-size:var(--fs-label);color:var(--ink-2)}
.pak-leg>span{display:inline-flex;align-items:center;gap:5px;cursor:help;outline-offset:2px}
.pak-sw{display:inline-block;width:10px;height:10px;border-radius:2px;box-sizing:border-box}
.pak-sw.pass{background:var(--ink-2)}
.pak-sw.fail{background:var(--surface);border:1px solid var(--ink-3)}

/* ---------- the grid ---------- */
.pak-grid,.pak-chart{display:block;max-width:100%;height:auto;overflow:visible}
.pak-sq{transition:fill .15s}
.pak-sq.pass{fill:var(--ink-2)}
.pak-sq.fail{fill:var(--surface);stroke:var(--ink-3);stroke-width:.7}
.pak-sq.wait{fill:none;stroke:var(--line-2);stroke-width:.7;stroke-dasharray:1.5 1.5}
.pak-rl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.pak-gb{cursor:help;outline:none}
.pak-gb:focus-visible .pak-br{stroke:var(--ink);stroke-width:2}
.pak-gb:hover .pak-br{stroke:var(--ink)}
.pak-br{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.pak-hit{fill:transparent}
.pak-gl{font-size:var(--fs-mark);fill:var(--ink-2)}

/* ---------- the player: play / pause, three speeds, one try back or forward, a slider ---------- */
.pak-player{margin-top:10px;display:grid;gap:8px}
.pak-prow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pak-play{min-width:104px}
.pak-spd{display:inline-flex;outline-offset:2px}
.pak-spd .seg-ctl button{font-size:var(--fs-label);padding:3px 10px}
.pak-scrub{display:flex;align-items:center;gap:6px;min-width:0}
.pak-scrub input[type=range]{flex:1 1 auto;min-width:0;width:auto}
.pak-scrub output{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;min-width:84px;text-align:right}

/* ---------- the chart against k ---------- */
.pak-gridl{stroke:var(--line-2);stroke-width:1}
.pak-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.pak-ln{fill:none;stroke-width:2;stroke-linejoin:round}
.pak-ln.at{stroke:var(--ink)}
.pak-ln.hat{stroke:var(--ink-2)}
.pak-ln.ref{stroke:var(--ink-3);stroke-width:1.3;stroke-dasharray:4 3}
.pak-ln.dim,.pak-dot.dim{opacity:.32}
.pak-dot{fill:var(--ink)}
.pak-dot.sq{fill:var(--ink-2)}
.pak-tau{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.pak-taul{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.pak-kl{stroke:var(--ink-3);stroke-width:1.3;stroke-dasharray:1.5 3}
.pak-goalln{stroke:var(--ink-2);stroke-width:1.4;stroke-dasharray:6 3}
.pak-vl{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.pak-q{font-size:var(--fs-big);font-weight:700;fill:var(--ink-2)}
.pak-wait{font-size:var(--fs-label);fill:var(--ink-3)}
.pak-end{font-family:var(--font-mono);font-size:var(--fs-mark)}
.pak-end.a{fill:var(--ink);font-weight:650}
.pak-end.h{fill:var(--ink-2);font-weight:650}
.pak-end.r,.pak-end.g{fill:var(--ink-3)}
.pak-chart-note{margin:6px 0 0;line-height:1.5}
.pak-chart-note>span{cursor:help;border-bottom:1px dotted var(--line-2);outline-offset:2px}

/* ---------- metric cards ---------- */
.pak-metrics[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.pak-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.pak-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.pak-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.metric.pak-wait .v{color:var(--ink-3)}

/* ---------- rail ---------- */
.pak-fx{margin:8px 0;max-width:100%;overflow-x:auto}
/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.pak-mb{padding:8px 0 10px}
.pak-mb+.pak-mb{border-top:1px solid var(--line)}
.pak-mb>p{margin:0 0 6px}
.pak-mb>p.pak-mb-res{margin:6px 0 0}
.pak-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.pak-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.pak-eqs-nm{grid-template-columns:max-content max-content}.pak-eqs-nm>.pak-eq-l{grid-column:1/-1;text-align:left}.pak-eqs-nm>.pak-eq-l:empty{display:none}}
.pak-remlist{margin:0 0 12px;padding-left:18px}
.pak-remlist li{margin-bottom:8px}
.pak-rem{font-size:var(--fs-label);white-space:nowrap}
.pak-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}
.pak-mt{margin-top:12px}
.pak-ch-res{scroll-margin-top:120px}
.pak-app .goal.pak-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.goal.pak-over b{color:var(--c-oom)}
.pak-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.pak-app .inline-ctl .seg-ctl button{white-space:nowrap}

/* ---------- settings ---------- */
.pak-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.pak-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.pak-grp .ctl>.lbl{display:block}
#pak-ctl-seed .ctl{display:grid;gap:6px;justify-items:start}
.pak-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.pak-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.pak-prod li{margin-bottom:6px}
.pak-prod code{word-break:break-word}

/* ---------- the dock's mini bar ---------- */
.pak-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.pak-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}

@media (max-width:760px){
  .pak-graph{padding:10px 10px 12px}
  .pak-play{min-width:92px}
  .pak-scrub output{min-width:0}
}
@media (prefers-reduced-motion:reduce){.pak-sq{transition:none}}
/* part 6: the answer to the lab's title question, after the three lines */
.pak-answer{margin:12px 0}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4: “动画播放面板被整体顶得靠下了”) ----------
   At 1440 × 900 parts 2–6 ran 11 px past the stage's 814 px (English parts 5–6, whose chart note takes two lines: 31 px), so the
   stage scrolled inside. On a stage at least 736 px wide the player's two rows share one: play and the speeds on the left, the
   ◂ slider ▸ and the count taking the rest of the row (39 px less); the grid and the chart sit 4 px closer, with 2 px less under
   the hairline between them; the metric cards take CONTRACT §19's compact line heights (value 1.25, change line 13 px). The grid,
   its player, the chart and the cards keep their order and their sizes; phones and narrower stages are unchanged. */
@media (min-width:761px){@container (min-width:736px){
  .pak-graph{gap:12px}
  .pak-graph>.pak-gridbox:not([hidden])~.pak-chartbox:not([hidden]){padding-top:12px}
  .pak-player{grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
  .pak-metrics .metric .v{line-height:1.25}
  .pak-metrics .metric .d{min-height:13px;line-height:13px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 2–6 still ran 26 px past the stage (English 26–46).
   The figure's gaps and padding and the space above the chart, the player and the chart's note are smaller. In English, where the
   chart's note takes two lines, the chart is drawn 176 px high instead of 196, as on a phone (chartSVG reads --pak-ch; it is drawn for
   its height, so its text keeps its size) (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .pak-graph{gap:8px;padding-top:8px;padding-bottom:8px}
  .pak-graph>.pak-gridbox:not([hidden])~.pak-chartbox:not([hidden]){padding-top:8px}
  #pak-player{margin-top:6px}
  .pak-chart-note{margin-top:4px}
  html[lang="en"] #pak-chartbox{--pak-ch:176}
}}

/* pd-disagg: P/D disaggregation lab */
.pdd-graph{display:flex;flex-direction:column;gap:0}
.pdd-blk{padding:8px 0}
.pdd-blk+.pdd-blk,.pdd-wcap+.pdd-blk{border-top:1px solid var(--line)}
.pdd-bh{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);margin:0 0 6px;min-height:1.35em;overflow-wrap:anywhere}
.pdd-tl{width:100%;min-width:0}
.pdd-svg{display:block;max-width:100%;height:auto}
.pdd-svg text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.pdd-svg .pdd-rk{font-size:var(--fs-mark);fill:var(--ink-3)}
.pdd-svg .pdd-at{font-size:var(--fs-mark);fill:var(--ink-3)}
.pdd-row{fill:var(--sunken)}
.pdd-pf{fill:var(--ink-2)}
.pdd-dc{fill:var(--ink-3);opacity:.75}
.pdd-st{fill:var(--c-oom)}
.pdd-kv{stroke:var(--c-kv);stroke-width:.8;opacity:.4}   /* light, so the prefill blocks under them stay visible (O12) */
.pdd-ax{stroke:var(--ink-3)}
.pdd-ph{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 2}
.pdd-wt{fill:none;stroke:var(--ink-3);stroke-dasharray:3 2}
.pdd-wg{fill:var(--sunken);stroke:var(--ink-2)}
.pdd-wg.bad{fill:var(--c-oom);stroke:var(--c-oom);opacity:.85}
.pdd-tk{stroke:var(--c-weights);stroke-width:1}
/* the followed chat, in blue on the lanes: in a GPU's batch (outline), waiting (dashed), its KV transfer, where it is now (dot) */
.pdd-wbox{fill:none;stroke:var(--c-weights);stroke-width:2}
.pdd-wq{stroke:var(--c-weights);stroke-width:1.6;stroke-dasharray:3 3}
.pdd-wkv{stroke:var(--c-weights);stroke-width:1.8}
.pdd-wdot{fill:var(--c-weights);stroke:var(--surface);stroke-width:1.5}
.pdd-warr{stroke:var(--ink-3)}
.pdd-svg .pdd-wlab{fill:var(--c-weights);font-weight:600}
.pdd-svg .pdd-on{fill:var(--c-weights);font-weight:700}
.pdd-sw.wr{background:transparent;box-shadow:inset 0 0 0 2px var(--c-weights)}
.pdd-wcap{margin:0 0 6px;font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}   /* 11.75 px: Figtree (2026-10-22 refit) is about 2% wider, and at this size the caption keeps the one line it was fitted to */
.pdd-svg .pdd-wl.bad{fill:var(--c-oom)}
.pdd-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 4px;font-size:var(--fs-label)}
.pdd-legend>span{display:inline-flex;align-items:center;gap:6px;cursor:help}
.pdd-sw{display:inline-block;width:14px;height:10px;border-radius:2px}
.pdd-sw.pf{background:var(--ink-2)}
.pdd-sw.dc{background:var(--ink-3);height:4px;opacity:.75}
.pdd-sw.st{background:var(--c-oom)}
.pdd-sw.kv{background:var(--c-kv);height:2px}
.pdd-run{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:6px 0 0}
.pdd-run .btn{min-height:30px}
.pdd-speed{display:inline-flex;align-items:center;gap:6px;flex:none}
.pdd-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.pdd-app .pdd-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);min-height:26px}   /* the kit's tray adds 3 px above and below its keys (2026-10-22 refit), so a 26 px key keeps the control 32 px tall, as before */
/* the progress bar sits under the time axis: drawTimeline sets its left padding and width so the thumb's centre is the playhead */
.pdd-scrub{padding:0}
.pdd-app input[type=range].pdd-prog{display:block;width:100%;margin:0;padding:0;border:0}
.pdd-app input[type=range].pdd-prog::-webkit-slider-thumb{width:14px;box-sizing:border-box}
.pdd-app input[type=range].pdd-prog::-moz-range-thumb{width:14px;box-sizing:border-box}
.pdd-metrics.pdd-wait .metric{opacity:.55}
.pdd-scope{margin:6px 0 0}
.pdd-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.pdd-goal.pdd-over b{color:var(--c-oom)}
.pdd-goal.met b{color:var(--c-ok)}
.pdd-ch-res{margin-top:10px}
.pdd-verdict p{margin:0 0 8px}
.pdd-links{margin:4px 0 8px;padding-left:18px}
.pdd-links li{margin:2px 0}
.pdd-prod li{margin:4px 0}
.pdd-rem{margin:4px 0 0;padding-left:20px}
.pdd-rem>li{margin:0 0 8px}
.pdd-rem>li>p{margin:0 0 4px}
.pdd-sys{margin:4px 0 8px;padding-left:18px}
.pdd-sys li{margin:3px 0}
.pdd-dk{height:8px;background:var(--sunken);border-radius:4px;overflow:hidden;min-width:60px}
.pdd-dk i{display:block;height:100%;background:var(--ink-2)}
.pdd-mb{padding:8px 0 10px}
.pdd-mb+.pdd-mb{border-top:1px solid var(--line)}
.pdd-mb>p{margin:0 0 6px}
.pdd-mb-res{margin-bottom:0}
.pdd-eqs{display:grid;grid-template-columns:max-content max-content minmax(0,max-content);justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.35em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3;max-width:100%}
.pdd-eq-l{text-align:right}
.mathbody{container-type:inline-size}
@container (max-width:560px){.pdd-eqs{grid-template-columns:max-content minmax(0,1fr)}.pdd-eqs>.pdd-eq-l{grid-column:1/-1;text-align:left}.pdd-eqs>.pdd-eq-l:empty{display:none}.pdd-eq-r{min-width:0;overflow-x:auto}}
.pdd-app .seg-ctl[data-key="p7"]{flex-wrap:wrap}
.pdd-app .seg-ctl[data-key="p7"] button{flex:1 0 auto;white-space:nowrap;padding:7px 4px}
.pdd-app .seg-ctl[data-key="p7"] button[data-v="0"]{flex-basis:100%}
/* part 7's goodput bars: on a wide screen each label sits left of its bar, so all nine rows fit on the first screen under the timeline
   (a first-time reader, 2026-10-14: at 1440x900 the last three needed scrolling) */
@media (min-width:900px){
  #pdd-gp .cmp-row{display:grid;grid-template-columns:minmax(150px,30%) minmax(0,1fr);align-items:center;column-gap:10px;margin-top:6px}
  #pdd-gp .cmp-track{margin:0 28px 0 0}
}
/* ---------- a wide stage (polish round 3, 2026-10-16; the owner's B4, R7.12): at 1440 × 900 part 7 needed 122 px of scrolling inside
   the stage (English: 196). On a stage at least 736 px wide (windows from about 1226 px) more than four lanes are drawn shorter
   (--pdd-rh, --pdd-gap, read by drawTimeline), the goodput bars sit closer, the metric cards share the row by their number (it was five
   columns, the last empty) with the value and change lines tighter (as tool-scheduling's, CONTRACT §19), and a few gaps are tighter.
   In English the status badge sits beside the subtitle instead of taking a line of its own (40 px). Same pieces in the same order,
   same animation; phones (≤ 760 px) and narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  html:not([lang^="zh"]) .pdd-stage>.stage-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center}
  html:not([lang^="zh"]) .pdd-stage>.stage-head>div:first-child{display:contents}
  html:not([lang^="zh"]) #pdd-st-title{grid-column:1/-1;grid-row:1}
  html:not([lang^="zh"]) #pdd-st-sub{grid-column:1;grid-row:2}
  html:not([lang^="zh"]) .pdd-stage>.stage-head>.stage-actions{grid-column:2;grid-row:2}
  #pdd-graph{margin-top:10px;padding-top:6px;padding-bottom:6px}
  .pdd-blk{padding:6px 0}
  .pdd-bh{margin-bottom:4px}
  #pdd-tl{--pdd-rh:14;--pdd-gap:2}
  .pdd-app input[type=range].pdd-prog{height:24px}
  .pdd-run{padding-top:4px}
  .pdd-legend{margin:2px 0}
  .pdd-wcap{margin-bottom:4px}
  #pdd-gp .cmp{margin:6px 0 0}
  #pdd-gp .cmp-row{margin-top:2px}
  /* while part 7's sweep is computed (about a second after the lab opens) its line takes the chart's height, so the stage does not
     grow under the reader when the chart comes (it pushed the stage's top under the top bar) */
  #pdd-gp>.pdd-gp-wait{margin:6px 0 0;min-height:184.4px}
  .pdd-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}
  .pdd-metrics:has(>.metric:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .pdd-metrics:has(>.metric:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
  .pdd-metrics .metric .v{line-height:1.25}
  .pdd-metrics .metric .d{min-height:13px;line-height:1.1}
  .pdd-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 7 still ran 51 px past the stage (English 76). More
   than four lanes are drawn 12 px tall instead of 14 (drawTimeline reads --pdd-rh; the lanes' names keep their size), the goodput bars
   sit 2 px closer (the line shown while the sweep is computed takes the chart's new height, so nothing moves when the chart comes,
   R7.9), and the gaps around the blocks, the legend, the chat's caption and the metric cards are 2 px smaller. In English, where the
   subtitle and the chat's caption take a line more, part 7 still runs 24 px past 1536 × 730 */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  #pdd-graph{margin-top:8px}
  .pdd-blk{padding:4px 0}
  #pdd-tl{--pdd-rh:12;--pdd-gap:2}
  .pdd-legend{margin:0}
  .pdd-wcap{margin-bottom:2px}
  #pdd-gp .cmp{margin:4px 0 0}
  #pdd-gp .cmp-row{margin-top:0}
  #pdd-gp>.pdd-gp-wait{margin:4px 0 0;min-height:168.4px}
  .pdd-metrics{margin-top:6px}
}}

/* post-capstone: the task card, the decision strip (data → method → parameters trained → passes → result), memory per GPU,
   GPU hours against the budget, and the metric against its target with the error bar.
   Colours (R5.6): grayscale; blue only for weights (BF16 solid, 4-bit hatched, the frozen reference or reward model dotted); red only
   for what failed: a method the data cannot run, memory over 80 GB, GPU hours over the budget; green only for a metric that reached
   its target. The stage is split into labelled blocks with a hairline between them (H5, the owner, 2026-10-09). */
.pcap-app [hidden]{display:none!important}
.pcap-app{--pcl:118px;--pcv:124px}
.pcap-stage .stage-head{align-items:center}
.pcap-graph{padding:12px 14px 14px;display:grid;gap:14px;min-width:0}
.pcap-graph>*{min-width:0}
.pcap-phone{display:none}
.pcap-phone .pcap-ph{margin:0 0 6px;color:var(--ink-2)}
.pcap-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
.pcap-capsub{display:block;font-weight:400;color:var(--ink-2);font-size:var(--fs-label);margin-top:2px}
/* the blocks of the stage (H5): the setting, memory, GPU hours and budget, the result, the tags; each has a label and a hairline above */
.pcap-blk{border-top:1px solid var(--line);padding-top:10px}
.pcap-bl{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);letter-spacing:.02em;line-height:1.3;margin-bottom:6px}
p.pcap-blk{margin:0}

/* ---------- the task card (folded to one line on a phone after part 1) ---------- */
.pcap-cardd>summary{cursor:pointer;font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.4}
.pcap-cardd[open]>summary{margin-bottom:8px}
.pcap-card{border:1px solid transparent;border-radius:8px;padding:10px 12px;background:var(--surface-2)}   /* soft panels, no frame inside the stage (精装修 step 2) */
.pcap-ct{font-size:var(--fs-ui);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pcap-ex{font-size:var(--fs-mark);font-weight:500;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:0 7px;cursor:help}
.pcap-dl{margin:0;display:grid;gap:4px;font-size:var(--fs-cap)}
.pcap-dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px}
.pcap-dl dt{color:var(--ink-2);margin:0}
.pcap-dl dd{margin:0;color:var(--ink)}

/* ---------- the decision strip ---------- */
.pcap-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px}
.pcap-chip{border:1px solid transparent;border-radius:8px;padding:6px 8px;display:grid;gap:1px;background:var(--surface-2);font-size:var(--fs-cap);min-width:0}
.pcap-chip b{font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.pcap-chh{font-size:var(--fs-mark);color:var(--ink-2)}
.pcap-chs{font-size:var(--fs-label);color:var(--ink-2);text-wrap:balance}   /* two lines split evenly (精装修 step 2) */
.pcap-chip.pcap-good{border-color:var(--ink-3)}
.pcap-chip.pcap-bad{border-color:var(--c-oom);background:var(--c-oom-soft)}
.pcap-chip.pcap-bad .pcap-chs,.pcap-chip.pcap-bad b{color:var(--c-oom)}

/* ---------- memory per GPU ---------- */
.pcap-track{position:relative;height:22px;background:var(--surface-2);border-radius:3px;margin:8px 0 4px}
.pcap-mb{position:absolute;top:0;bottom:0;display:block;transition:left .25s ease,width .25s ease}
.pcap-mb.w,.pcap-sw.w{background:var(--c-weights)}
.pcap-mb.q4,.pcap-sw.q4{background:repeating-linear-gradient(135deg,var(--c-weights) 0 3px,var(--surface) 3px 5px)}
.pcap-mb.g,.pcap-sw.g{background:var(--ink-2)}
.pcap-mb.o,.pcap-sw.o{background:var(--ink-3)}
.pcap-mb.lr,.pcap-sw.lr{background:repeating-linear-gradient(45deg,var(--ink) 0 2px,var(--surface-2) 2px 4px)}
.pcap-mb.a,.pcap-sw.a{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-2)}
.pcap-mb.l,.pcap-sw.l{background:var(--line)}
.pcap-mb.fz,.pcap-sw.fz{background:radial-gradient(circle,var(--c-weights) 1.3px,transparent 1.8px) 0 0/5px 5px,var(--surface);box-shadow:inset 0 0 0 1px var(--c-weights)}
.pcap-mb.over{background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 2px var(--c-oom);z-index:1}
.pcap-cap80{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1px;background:var(--ink);z-index:2}
.pcap-list{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:3px 14px;font-size:var(--fs-label);color:var(--ink-2)}
.pcap-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:6px;align-items:center}
.pcap-list b{font-weight:600;color:var(--ink);white-space:nowrap}
.pcap-list li.pcap-overl,.pcap-list li.pcap-overl b{color:var(--c-oom);font-weight:650}
.pcap-leg{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.pcap-leg li{grid-template-columns:12px minmax(0,1fr)}

/* swatches */
.pcap-sw{display:inline-block;width:11px;height:11px;border-radius:2px;box-sizing:border-box}
.pcap-sw.line{width:3px;border-radius:0;background:var(--ink);justify-self:center}
.pcap-sw.over{background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,transparent 2px 5px);border:1.5px solid var(--c-oom)}
.pcap-sw.dash{width:0;height:12px;border-radius:0;border-left:2px dashed var(--ink);justify-self:center}
.pcap-sw.c-train,.pcap-cs.train{background:var(--ink-2)}
.pcap-sw.c-frozen,.pcap-cs.frozen{background:var(--ink-3)}
.pcap-sw.c-gen,.pcap-cs.gen{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface) 2px 4px)}
.pcap-sw.c-rm,.pcap-cs.rm{background:var(--line);box-shadow:inset 0 0 0 1px var(--ink-3)}
.pcap-sw.mf{background:var(--ink-2)}
.pcap-sw.mf.ok{background:var(--c-ok)}
.pcap-sw.mb{background:transparent;border:1.5px solid var(--ink)}
.pcap-sw.m0{width:3px;border-radius:0;background:var(--ink-3);justify-self:center}
.pcap-sw.zdot{width:9px;height:9px;border-radius:50%;background:var(--ink);justify-self:center}
.pcap-sw.overb{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--c-oom)}

/* ---------- GPU hours against the budget ---------- */
.pcap-cwrap{position:relative}
.pcap-crow{display:grid;grid-template-columns:var(--pcl) minmax(0,1fr) var(--pcv);align-items:center;font-size:var(--fs-cap);margin:6px 0}
.pcap-cl{padding-right:8px;color:var(--ink-2);overflow-wrap:anywhere}
.pcap-crow.me .pcap-cl{color:var(--ink);font-weight:650}
.pcap-ctrack{display:flex;height:16px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.pcap-cs{display:block;height:100%;flex:none;transition:width .25s ease}
.pcap-cv{padding-left:8px;font-weight:650;color:var(--ink);white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-label)}
.pcap-crow.pcap-overb .pcap-cv{color:var(--c-oom)}
.pcap-crow.pcap-overb .pcap-ctrack{box-shadow:inset 0 0 0 2px var(--c-oom)}
.pcap-budget{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--ink);margin-left:-1px}
/* how the GPU hours are counted (H9): the tokens, the work per token, the assumed speed and the measured check */
.pcap-hw{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.pcap-hh{font-size:var(--fs-label);font-weight:650;color:var(--ink);margin-bottom:4px}
.pcap-how{margin:0;display:grid;gap:4px;font-size:var(--fs-label);line-height:1.45}
.pcap-how>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px}
.pcap-how dt{margin:0;color:var(--ink-2)}
.pcap-how dd{margin:0;color:var(--ink)}

/* ---------- the metric against its target ---------- */
.pcap-mtrack{position:relative;height:18px;background:var(--surface-2);border-radius:2px;margin:8px 0 2px}
.pcap-mfill{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:2px 0 0 2px;transition:width .25s ease}
.pcap-mfill.ok{background:var(--c-ok)}
.pcap-mband{position:absolute;top:-3px;bottom:-3px;border:1.5px solid var(--ink);border-radius:2px;box-sizing:border-box}
.pcap-m0{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:var(--ink-3)}
.pcap-mt{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--ink);margin-left:-1px}
.pcap-mscale{display:flex;justify-content:space-between;font-size:var(--fs-mark);color:var(--ink-3);font-family:var(--font-mono);margin-top:5px}
/* the zoomed strip around the target (R5.10): the error bar, the score as a dot, the target; the part of the bar below the target red */
.pcap-zoom{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.pcap-ztrack{position:relative;height:14px;background:var(--surface-2);border-radius:2px;margin:8px 0 2px}
.pcap-zband{position:absolute;top:-3px;bottom:-3px;border:1.5px solid var(--ink);border-radius:2px;box-sizing:border-box}
.pcap-zbad{position:absolute;top:-3px;bottom:-3px;background:var(--c-oom);opacity:.85;border-radius:2px 0 0 2px}
.pcap-zdot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.pcap-zcap{margin:4px 0 0;font-size:var(--fs-label);color:var(--ink-2);line-height:1.4}
.pcap-sw.zbad{background:var(--c-oom)}
li.pcap-zbadl span{color:var(--c-oom)}

/* ---------- tags ---------- */
.pcap-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pcap-tag{border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink-2);font-size:var(--fs-label);cursor:help}

/* ---------- metric cards ---------- */
.pcap-metrics[data-n="1"]{grid-template-columns:minmax(0,220px)}
.pcap-metrics[data-n="2"]{grid-template-columns:repeat(2,minmax(0,220px))}
.pcap-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.pcap-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- formulas on their own line ---------- */
.pcap-fx{margin:6px 0 8px;padding:4px 0;overflow-x:auto;overflow-y:hidden;font-size:var(--fs-stage);line-height:normal}
.pcap-app .mathbody .pcap-fx{margin-top:12px}
/* Show the math (H2): short blocks, each a lead line, the formula, the same formula with the numbers, the result; the “=” signs line up */
.pcap-mblk{padding:10px 0 4px;border-top:1px solid var(--line-2)}
.pcap-mblk:first-child{border-top:0;padding-top:2px}
.pcap-mblk>.small{margin:4px 0 6px}
.pcap-ml{margin:0 0 6px}
.pcap-eq{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:.45em;row-gap:.45em;align-items:center;margin:6px 0;padding:4px 0;overflow-x:auto;overflow-y:hidden;font-size:var(--fs-stage);line-height:normal}
.pcap-eqn{text-align:right;white-space:nowrap}
.pcap-eqr{min-width:0}
.pcap-eqr b{font-weight:650;color:var(--ink)}

/* ---------- rail ---------- */
.pcap-defs{margin:6px 0 10px;padding-left:18px}
.pcap-defs li{margin-bottom:6px}
.pcap-defs .lablink,.pcap-defs a{margin-left:2px}
/* the lead-in above a group of options: what to pick and what to watch (the owner, 2026-10-08, rule G1) */
.pcap-lead{margin:8px 0 4px}
.pcap-lv{margin-top:6px}
.pcap-ul{margin:0 0 10px;padding-left:18px}
.pcap-ul li{margin-bottom:6px}
.pcap-mis{margin:0 0 10px}
.pcap-li2{margin:6px 0 0;color:var(--ink-2)}
.pcap-pl{margin:4px 0 2px;padding-left:16px}
.pcap-pl li{margin-bottom:3px}
.pcap-mis p{margin:0 0 6px}
.pcap-ch-res{scroll-margin-top:120px}
.pcap-sub{margin-top:4px}
/* the challenge's failing checks, one per line (R2.11), each label in red (R5.11) */
.pcap-badchk{margin:4px 0 8px;padding-left:0;list-style:none;font-size:var(--fs-ui);line-height:1.55}
.pcap-badchk li{margin-bottom:4px}
.pcap-badchk li b{color:var(--c-oom);font-weight:650}
/* the challenge chart: a pick the team's data cannot run has no bar; it is drawn as failing with a red ring (the pick's ink outline
   kept), red words and a legend swatch of its own (rule G8, R5.6, R5.7) */
.pcap-ch-res .cmp-row.pcap-norun .cmp-track{height:20px;box-shadow:inset 0 0 0 2px var(--c-oom),0 0 0 1.5px var(--ink)}
/* the words sit inside the ring: no white box over it, the UI font at the labels' size (words, no digits), so the English fits the
   narrow rail at 900 px with room to spare */
.pcap-ch-res .cmp-row.pcap-norun .cmp-val{color:var(--c-oom);font-family:var(--font-ui);font-size:var(--fs-label);background:none;margin-left:7px}
.pcap-ch-res .cmp-leg i.pcap-leg-norun{background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--c-oom)}
.pcap-nw{white-space:nowrap}
.goal.pcap-over b{color:var(--c-oom)}
.pcap-app .goal span:last-child{text-align:right}
.pcap-app .inline-ctl .seg-ctl{flex-wrap:wrap}

/* ---------- settings ---------- */
.pcap-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.pcap-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.pcap-grp .ctl .lbl{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}

/* ---------- connect ---------- */
.pcap-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.pcap-prod li{margin-bottom:6px}
.pcap-prod code{word-break:break-word}

/* ---------- dock: memory of 80 GB as a tiny bar ---------- */
.pcap-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.pcap-dk i{position:absolute;left:0;top:3px;height:6px;background:var(--ink-2);border-radius:1px}
.pcap-dk.bad i{background:var(--c-oom)}

@media (max-width:760px){
  /* phones: the picture first, then the numbers (R7.3) */
  .pcap-app{--pcl:86px;--pcv:112px}
  .pcap-stage{display:flex;flex-direction:column}
  .pcap-stage>.stage-head{order:1}
  .pcap-stage>.pcap-graph{order:2}
  .pcap-stage>.metrics{order:3}
  .pcap-stage>details.math{order:4}
  .pcap-graph{padding:10px 10px 12px;gap:12px}
  .pcap-phone:not(:empty){display:block}
  .pcap-dl>div{grid-template-columns:84px minmax(0,1fr)}
  .pcap-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcap-list,.pcap-leg{grid-template-columns:minmax(0,1fr)}
  .pcap-how>div{grid-template-columns:minmax(0,1fr);gap:0}
  .pcap-how dt{font-weight:600}
  /* a phone: the name on its own line, each “= …” step under it */
  .pcap-eq{grid-template-columns:minmax(0,1fr)}
  .pcap-eqn{text-align:left}
  .pcap-eqn:empty{display:none}
  .pcap-eqr{padding-left:1em}
  .pcap-metrics[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* “0.028 GPU hours” is 4 px wider than the 112 px value column (kit_text_bounds, 390 en, part 5 and the challenge) */
  html[lang="en"] .pcap-app{--pcv:120px}
}
@media (prefers-reduced-motion:reduce){.pcap-mb,.pcap-cs,.pcap-mfill{transition:none}}
/* Settings: four task names do not fit one row of the 254 px panel; let the buttons wrap (R7.8) */
.pcap-app .controls .seg-ctl{flex-wrap:wrap}
.pcap-app .controls .seg-ctl button{flex:1 1 auto}

/* ---------- polish r4 (B4, R7.12): parts 4–6 fit a 1440 × 900 screen. The blocks were stacked one under the other, full width: the
   task card 166 px, the decision strip 102, memory 183, GPU hours 219–262, the result 227, so the stage scrolled 218–282 px inside
   itself (part 7, all five blocks, 501). On a stage at least 760 px wide the graph is a grid of 12 columns and two neighbouring blocks
   share a row, the wider column for the block with the longer lines: the task card (7) beside the decision strip (5), its steps one
   per line; memory (5) beside GPU hours (7) when the result is not shown (parts 4 and 6); GPU hours (7) beside the result (5) when it
   is (part 5, part 7, the scenarios, the challenge). A pair is joined by the hairline above it and a line between its two columns
   (R7.13). The task card's names, the GPU-hour rows' name and value and the “how they are counted” names take narrower columns, and
   the spacing inside the blocks is a little tighter. Same blocks, same order (row by row), nothing hidden; phones (≤ 760 px) and
   narrower stages keep the layout above. Part 7 shows all five blocks and still scrolls (see reviews/r4-fit-post-b.md). ---------- */
@media (min-width:761px){@container (min-width:760px){
  .pcap-graph{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:10px;padding:8px 14px 10px}
  .pcap-graph>*{grid-column:1/-1}
  .pcap-graph>#pcap-card{grid-column:1/span 7}
  .pcap-graph>#pcap-setbox{grid-column:8/span 5}
  .pcap-graph:has(>#pcap-metbox[hidden]):not(:has(>#pcap-membox[hidden])):not(:has(>#pcap-costbox[hidden]))>#pcap-membox{grid-column:1/span 5;margin-right:-8px;padding-right:8px}
  .pcap-graph:has(>#pcap-metbox[hidden]):not(:has(>#pcap-membox[hidden])):not(:has(>#pcap-costbox[hidden]))>#pcap-costbox{grid-column:6/span 7;margin-left:-8px;padding-left:15px;border-left:1px solid var(--line)}
  .pcap-graph:not(:has(>#pcap-metbox[hidden])):not(:has(>#pcap-costbox[hidden]))>#pcap-costbox{grid-column:1/span 7;margin-right:-8px;padding-right:8px}
  .pcap-graph:not(:has(>#pcap-metbox[hidden])):not(:has(>#pcap-costbox[hidden]))>#pcap-metbox{grid-column:8/span 5;margin-left:-8px;padding-left:15px;border-left:1px solid var(--line)}
  /* a little tighter inside the blocks */
  .pcap-graph .pcap-blk{padding-top:8px}
  .pcap-graph .pcap-bl{margin-bottom:4px}
  .pcap-graph .pcap-cap{margin-bottom:4px}
  .pcap-graph .pcap-track{margin:6px 0 3px}
  .pcap-graph .pcap-list{margin-top:4px;row-gap:1px}
  .pcap-graph .pcap-list li{line-height:1.35}
  .pcap-graph .pcap-leg{display:flex;flex-wrap:wrap;column-gap:16px}
  .pcap-graph .pcap-crow{margin:3px 0}
  .pcap-graph #pcap-costbox{--pcl:100px;--pcv:116px}
  html[lang="en"] .pcap-graph #pcap-costbox{--pcl:128px;--pcv:124px}
  .pcap-graph .pcap-hw{margin-top:6px;padding-top:6px}
  .pcap-graph .pcap-hh{margin-bottom:3px}
  .pcap-graph .pcap-how{gap:3px;line-height:1.35}
  .pcap-graph .pcap-how>div{grid-template-columns:122px minmax(0,1fr);column-gap:5px}   /* Figtree (2026-10-22 refit) is a little wider: “训练一个 token 的计算” needs 120.3 px and the first value 309.9 px, so each keeps one line */
  .pcap-graph .pcap-zoom{margin-top:8px;padding-top:6px}
  /* the task card: a narrower names column */
  .pcap-graph>#pcap-card{padding:8px 12px}
  .pcap-graph>#pcap-card .pcap-ct{margin-bottom:4px}
  .pcap-graph>#pcap-card .pcap-dl{gap:2px;line-height:1.4}
  .pcap-graph>#pcap-card .pcap-dl>div{grid-template-columns:64px minmax(0,1fr)}
  html[lang="en"] .pcap-graph>#pcap-card .pcap-dl>div{grid-template-columns:100px minmax(0,1fr)}
  html[lang="en"] .pcap-graph .pcap-how>div{grid-template-columns:136px minmax(0,1fr)}
  /* the decision strip beside the card: one step per line, its name, value and note in a row */
  .pcap-graph>#pcap-setbox .pcap-strip{grid-template-columns:minmax(0,1fr);gap:4px}
  .pcap-graph>#pcap-setbox .pcap-chip{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:4px 8px}
  /* the metric cards take the line heights tool-scheduling uses (CONTRACT §19) */
  .pcap-stage .pcap-metrics .metric .v{line-height:1.25}
  .pcap-stage .pcap-metrics .metric .d{min-height:13px;line-height:1.1}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 5 and 6 still ran 6 and 8 px past the stage in
   Chinese and 57 and 43 in English. The grid's row gaps and padding, the blocks' top padding, the run card's padding and the gap above
   “how it is counted” are 2–4 px smaller; the metric cards take the kit's tight line heights (a card's change row stays reserved). In
   English parts 5 and 6 still run 34 and 18 px past 1536 × 730 (153 and 122 on main). Part 7 adds the memory block under the run
   card and runs about 190 px past it in Chinese (313 on main): fitting it needs another layout */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:760px){
  .pcap-graph{row-gap:6px;padding-top:6px;padding-bottom:6px}
  .pcap-graph .pcap-blk{padding-top:6px}
  .pcap-card{padding-top:6px;padding-bottom:6px}
  .pcap-graph .pcap-hw{margin-top:4px;padding-top:4px}
  .pcap-metrics .metric .sub{line-height:1.25}
  .pcap-metrics .metric .d{min-height:13px;line-height:1.1}
}}

/* ---------- PPO lab (prefix ppo-) ----------
   Grayscale for roles: the policy = solid ink, the SFT model (reference) = dashed outline, E (the reward model's gap) = hatched.
   Red only for the failure moment (E taking over a prompt, quality falling while the score rises, a ratio running off);
   green only for goals (status chip, challenge). */
.ppo-app .stage-head>div:first-child{min-width:0}
.ppo-st-title{font-weight:680;font-size:var(--fs-stage);line-height:1.3}
.ppo-app [data-tipx]{cursor:help}
.ppo-app [data-jump],.ppo-app button[data-tipx]{cursor:pointer}
.ppo-app [hidden]{display:none!important}

/* the RL loop: one step for the three prompts, phase by phase */
.ppo-loop{margin-top:10px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}   /* soft panels, no frame inside the stage (精装修 step 2) */
.ppo-loop-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.ppo-phases{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:var(--fs-label);min-width:0}
.ppo-ph-k{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);margin-right:4px;white-space:nowrap}
.ppo-ph{padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3);background:var(--surface);white-space:nowrap}
.ppo-ph.done{color:var(--ink-2);border-color:var(--ink-3)}
.ppo-ph.on{color:var(--surface);background:var(--ink);border-color:var(--ink);font-weight:650}
.ppo-ph-a{color:var(--ink-3);font-size:var(--fs-mark)}
.ppo-loop-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ppo-rows{display:grid;gap:6px;margin-top:9px}
.ppo-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.ppo-rq{display:flex;flex-direction:column;gap:1px;font-size:var(--fs-label);line-height:1.25;min-width:0;border-radius:3px}
.ppo-rq:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ppo-rv{font-size:var(--fs-mark);color:var(--ink-2);min-height:1.25em;white-space:nowrap}
.ppo-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;min-width:0}
.ppo-chip{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4px;align-items:baseline;padding:4px 6px 6px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font-size:var(--fs-label);line-height:1.3;min-width:0;overflow:hidden;transition:opacity .25s}
.ppo-chip:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ppo-chip.ppo-hide{opacity:0;visibility:hidden}
.ppo-chip-gap{background:repeating-linear-gradient(135deg,var(--surface) 0 4px,var(--surface-2) 4px 7px)}
.ppo-cl{grid-column:1 / -1;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppo-cs{color:var(--ink-2)}
.ppo-ca{text-align:right;white-space:nowrap;color:var(--ink-3)}
.ppo-ca.up{color:var(--ink);font-weight:650}
.ppo-ca.dn{color:var(--ink-2)}
.ppo-cbar{position:absolute;left:0;bottom:0;height:3px;background:var(--ink);transition:width .3s ease-out}
.ppo-cbar.dn{background:repeating-linear-gradient(90deg,var(--ink-2) 0 3px,transparent 3px 5px)}
.ppo-speed{display:inline-flex;align-items:center;gap:6px;flex:none}
.ppo-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.ppo-app .ppo-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);cursor:pointer}
@container (max-width:560px){.ppo-row{grid-template-columns:minmax(0,1fr)}.ppo-rq{flex-direction:row;gap:8px;align-items:baseline}.ppo-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* legend swatches */
.ppo-legend>span{display:inline-flex;align-items:center}
.ppo-sw{display:inline-block;flex:none;width:11px;height:11px;border-radius:2px;margin-right:6px;box-sizing:border-box;vertical-align:-1px}
.ppo-sw-pi{background:var(--ink)}
.ppo-sw-ref{border:1.5px dashed var(--ink)}
.ppo-sw-gap{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.6px,var(--surface) 1.6px 4px);border:1px solid var(--ink-2)}
.ppo-sw-band{background:var(--surface-2);border:1px solid var(--line)}
.ppo-sw-bad{background:var(--c-oom);border-radius:50%}
.ppo-sw-t{background:var(--ink)}
.ppo-sw-f{background:var(--ink-3)}

/* per-prompt bars: filled = the policy now, dashed outline = the SFT model */
.ppo-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin-top:10px}
.ppo-bg{min-width:0}
.ppo-bt{font-size:var(--fs-cap);font-weight:650;line-height:1.3;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:3px}
/* H7 (the owner, 2026-10-09): a long prompt wraps onto a second line inside its box instead of running past it; every column keeps two lines,
   so the three bar groups stay level */
.ppo-bt{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.6em}
.ppo-bt span{font-weight:400;color:var(--ink-2)}
.ppo-bt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ppo-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-items:end}
.ppo-col{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;border-radius:3px}
.ppo-col:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ppo-cv{font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap}
.ppo-ct{position:relative;width:100%;max-width:30px;height:96px;background:var(--surface-2);border-radius:2px 2px 0 0;border-bottom:1px solid var(--ink-3)}
.ppo-fill{position:absolute;left:0;right:0;bottom:0;background:var(--ink);border-radius:2px 2px 0 0;transition:height .12s ease-out}
.ppo-ghost{position:absolute;left:-2px;right:-2px;bottom:0;border:1.5px dashed var(--ink);border-bottom:0;border-radius:3px 3px 0 0;pointer-events:none}
.ppo-gapc .ppo-fill{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface) 2px 5px);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.ppo-hot .ppo-fill{background:repeating-linear-gradient(135deg,var(--c-oom) 0 2.5px,var(--c-oom-soft) 2.5px 5px);box-shadow:inset 0 0 0 1.5px var(--c-oom)}
.ppo-hot .ppo-cv,.ppo-hot .ppo-cx{color:var(--c-oom);font-weight:700}
.ppo-cx{font-size:var(--fs-mark);font-weight:650;color:var(--ink-2)}
.ppo-kinds{margin-top:6px;line-height:1.4}
@container (max-width:560px){.ppo-bars{gap:10px 8px}.ppo-bt span{display:none}.ppo-ct{height:80px}.ppo-cols{gap:2px}.ppo-cv{font-size:var(--fs-mark)}}

/* the training run */
.ppo-run{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px}

/* curves */
.ppo-curve-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.ppo-curve-title{font-size:var(--fs-cap);font-weight:650;line-height:1.35;flex:1 1 220px;min-width:0}
.ppo-curve-head .ctl{gap:3px;flex:0 1 auto;min-width:0}
.ppo-curve-head .ctl>.lbl{font-size:var(--fs-label)}
.ppo-curve-head .seg-ctl button{padding:5px 8px;font-size:var(--fs-label);white-space:nowrap}
.ppo-curve{display:block;width:100%;height:170px;margin-top:6px;overflow:visible}
.ppo-grid{stroke:var(--line-2);stroke-width:1}
.ppo-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.ppo-ref{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:1.5 3}
.ppo-now{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3}
.ppo-band{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.ppo-ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ppo-l-rm{stroke:var(--ink);stroke-width:2.2}
.ppo-l-q{stroke:var(--ink-2);stroke-width:2.4;stroke-dasharray:6 4;stroke-linecap:butt}
.ppo-l-hack{stroke:var(--c-oom);stroke-width:3;stroke-dasharray:none}
.ppo-l-max{stroke:var(--ink);stroke-width:1.8}
.ppo-l-min{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 3;stroke-linecap:butt}
.ppo-l-fan{stroke:var(--ink-3);stroke-width:1.2}
.ppo-bad{fill:var(--c-oom);stroke:var(--surface);stroke-width:1.5}
.ppo-badt{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--c-oom);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.ppo-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);margin-top:4px}
.ppo-key>span{display:inline-flex;align-items:center;gap:6px}
.ppo-ks{display:inline-block;flex:none;overflow:visible}

/* memory of the four models */
.ppo-mem{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.ppo-mem-t{font-size:var(--fs-cap);line-height:1.4;margin-bottom:6px}
.ppo-mem.ppo-mem-top{margin:10px 0 4px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}
.ppo-mem.ppo-mem-top .ppo-mbar{height:30px}
.ppo-mbar{display:flex;gap:2px;height:24px;min-width:0}
.ppo-mb{display:flex;align-items:center;min-width:3px;border-radius:2px;overflow:hidden;font-family:var(--font-mono);font-size:var(--fs-mark);white-space:nowrap}
.ppo-mb>span{padding:0 6px;overflow:hidden;text-overflow:ellipsis}
.ppo-mb-t{background:var(--ink);color:var(--surface)}
.ppo-mb-f{background:var(--ink-3);color:var(--surface)}
.ppo-mb-f>span{display:none}
.ppo-mb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ppo-mem-k{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:5px;line-height:1.4}
.ppo-mem-k>span{display:inline-flex;align-items:center}
@container (max-width:560px){.ppo-mb-t>span{font-size:var(--fs-mark);padding:0 4px}}

/* metrics: labels hold Greek letters, so no uppercase */
.ppo-metrics{margin-top:14px}
.ppo-metrics .metric{cursor:help}
.ppo-metrics .metric .k{text-transform:none;letter-spacing:0}
.ppo-metrics .metric .sub{overflow-wrap:anywhere}
.ppo-metrics .metric .d{height:auto;min-height:15px;line-height:1.2}   /* 12 px since kit polish r2 (M1); a line about as tall as before (14.4 px, was 14.3 px) */
/* a value in words (“about 3300 times”, the largest ratio) ran 19–51 px past its card in the challenge (900 and 390 px, English): it is
   set smaller and may wrap, as the text values of other labs' cards (kit polish r2) */
.ppo-metrics .metric .v.ppo-vlong{font-size:var(--fs-ui);line-height:1.25;white-space:normal}

/* show the math */
.ppo-fx{margin:6px 0 8px;overflow-x:auto;overflow-y:hidden;max-width:100%}
.ppo-app .mathbody .ppo-defs{font-size:var(--fs-label);line-height:1.5;color:var(--ink-2);margin:0 0 10px}
.ppo-mh{font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.02em;color:var(--ink-3);margin:8px 0 4px}
.ppo-app .mathbody p{overflow-wrap:anywhere}
.ppo-app .mathbody .t{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}

/* rail extras */
.ppo-tbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0}
.ppo-app .goal+.progress{margin-bottom:8px}
.ppo-app .preset span{overflow-wrap:anywhere}
#ppo-insight>.eyebrow{text-transform:none;letter-spacing:.01em}
.ppo-app .step-b a,.ppo-app .obs a{text-underline-offset:2px}
.ppo-app .c-card code{overflow-wrap:anywhere}
.ppo-prod{margin:0 0 8px;padding-left:18px;display:grid;gap:6px;font-size:var(--fs-cap);line-height:1.5}

/* mini result bar */
.ppo-dk{position:relative;height:12px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.ppo-dk-q{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}

/* home tile teaser */
.ppo-tz{display:block;width:100%;height:auto;overflow:visible}
.ppo-tz-ax{stroke:var(--line);stroke-width:1}
.ppo-tz-l{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ppo-tz-l.ppo-tz-rm{stroke:var(--ink)}
.ppo-tz-l.ppo-tz-q{stroke:var(--ink-2);stroke-dasharray:5 3;stroke-linecap:butt}
.ppo-tz-l.ppo-tz-bad{stroke:var(--c-oom);stroke-width:2.6;stroke-dasharray:none}
.ppo-tz-sw{display:inline-block;width:14px;height:0;margin-right:5px;border-top:2px solid var(--ink)}
.ppo-tz-sw.ppo-tz-q{border-top:2px dashed var(--ink-2)}
.ppo-tz-sw.ppo-tz-bad{border-top:2.5px solid var(--c-oom)}

@media (prefers-reduced-motion:reduce){.ppo-fill,.ppo-cbar,.ppo-chip{transition:none}}

/* review b9v1 fixes */
/* B1: a rail card never grows wider than the rail (a long result line or formula wraps or scrolls inside it) */
#ppo-rail .steps{grid-template-columns:minmax(0,1fr)}
#ppo-rail .step,#ppo-rail .step-b,#ppo-rail .railcard,#ppo-rail .levers,#ppo-rail .lever{min-width:0;max-width:100%}
#ppo-rail .lever .lv-r{white-space:normal;overflow-wrap:anywhere}
#ppo-rail .ppo-fx{max-width:100%;overflow-x:auto}
/* S4: the note under the bars when the three prompts have settled on the same distribution */
.ppo-same{margin:6px 0 0;line-height:1.45;color:var(--ink-2)}
/* S13: the tile draws 6 seeds; their lines are thin and solid, the SFT model dotted */
.ppo-tz-l.ppo-tz-q{stroke:var(--ink-2);stroke-width:1.3;stroke-dasharray:none;opacity:.85}
.ppo-tz-l.ppo-tz-ref{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:1.5 3}
.ppo-tz-sw.ppo-tz-q{border-top:1.5px solid var(--ink-2)}
.ppo-tz-sw.ppo-tz-ref{border-top:1.5px dotted var(--ink-3)}
.tz .seg-ctl[data-key="tzset"] button{padding-inline:6px;white-space:nowrap}

/* review codex-b9v3 */
/* item 2: Settings lists the knobs later parts introduce, as an aligned list (R2.11) */
.ppo-later{line-height:1.45;color:var(--ink-2)}
.ppo-later-h{font-weight:650;color:var(--ink);margin-bottom:4px}
.ppo-later ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 10px}
.ppo-later li{display:contents}
.ppo-later li b{font-weight:600;color:var(--ink);white-space:nowrap}
/* item 7: part 6's picture of step 1's batch, one panel per sign of the advantage */
.ppo-clip{margin-top:10px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}
.ppo-clip-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 14px}
.ppo-clip-t{font-size:var(--fs-cap);font-weight:650;line-height:1.35;flex:1 1 240px;min-width:0}
.ppo-clip-head .ctl{gap:3px;flex:0 1 auto;min-width:0}
.ppo-clip-head .ctl>.lbl{font-size:var(--fs-label)}
.ppo-clip-head .seg-ctl button{padding:5px 8px;font-size:var(--fs-label);white-space:nowrap}
.ppo-cps{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 16px;margin-top:8px}
@container (min-width:560px){.ppo-cps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ppo-cp{min-width:0;background:var(--surface);border:1px solid transparent;border-radius:6px;padding:6px 6px 2px}
.ppo-cp-t{font-size:var(--fs-cap);font-weight:650;line-height:1.3;padding:0 4px}
.ppo-cp-svg{display:block;width:100%;height:156px;overflow:visible}
.ppo-cp-slope{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ppo-cp-flat{fill:none;stroke:var(--ink-3);stroke-width:3.4;stroke-dasharray:6 3;stroke-linecap:butt}
.ppo-cp-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke}
.ppo-cp-z{font-size:var(--fs-mark);fill:var(--ink-2);font-weight:600}
.ppo-cp-z.ppo-cp-zf{fill:var(--ink-3);font-weight:500}
.ppo-cd{cursor:help}
.ppo-cd:focus{outline:none}
.ppo-cd:focus circle,.ppo-cd:hover circle{stroke:var(--ink);stroke-width:2.4}
.ppo-cd-on{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.ppo-cd-flat{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.8}
.ppo-cd-bad{fill:var(--c-oom);stroke:var(--surface);stroke-width:1.5}
.ppo-cd-end{fill:var(--ink-2);stroke:var(--surface);stroke-width:1.5}
.ppo-cd-arr{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ppo-cd-arr.bad{stroke:var(--c-oom)}
.ppo-cd-lead{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 2}
.ppo-cd-v{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.ppo-cd-v.bad{fill:var(--c-oom)}
.ppo-cp-key{margin-top:6px}
.ppo-cp-cap{margin:6px 0 0;line-height:1.45;color:var(--ink-2)}
/* the hover of a response in part 6's picture: an aligned list (R2.11) */
.tip .ppo-tl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 10px;text-align:left}
.tip .ppo-tl>div{display:contents}
.tip .ppo-tl span{opacity:.75}
.tip .ppo-tl b{font-weight:600}
.ppo-cp-svg .ppo-ax{font-size:var(--fs-mark)}
.ppo-cd-ex{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:3 2}
.ppo-cd-arr.ex{stroke:var(--ink-2)}
.ppo-cg{cursor:help}

/* the owner's review of batch 9, item 3: part 6's picture plays step 1's batch pass by pass. Each frame's title, legend and caption are
   stacked in one grid cell and only the current one is visible, so the panel keeps its height while the passes play (R7.9). */
.ppo-stk{display:grid;min-width:0}
.ppo-stk>[data-f]{grid-area:1 / 1;visibility:hidden;min-width:0}
.ppo-stk>[data-f].on{visibility:visible}
.ppo-clip-tw{flex:1 1 260px;min-width:0}
.ppo-clip-s{margin:3px 0 0;line-height:1.45;color:var(--ink-2)}
.ppo-clip-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
/* H2 (the owner, 2026-10-09): a formula with its name in words on the left; a chain breaks at “=” onto lines that line up */
.ppo-eq{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:.45em;align-items:center;margin:6px 0 8px}
.ppo-eq-n{max-width:10em;line-height:1.35}
.ppo-eq>.ppo-fx{margin:0}
/* Show the math: one block per quantity, a hairline between blocks (H5) */
.mathbody .ppo-mh{border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
.mathbody .ppo-mh:first-child{border-top:0;padding-top:0;margin-top:0}
/* H7 (the owner, 2026-10-09: GRPO's 重放 and speed buttons did not line up): in a row with the speed buttons, the play or replay button
   and the speed buttons share one height and one centre line, and the label 速度 sits beside its buttons */
#ppo-app .ctl:has(>.seg-ctl[data-key$="pd"]),#ppo-app .ctl:has(.seg-ctl[data-key$="pd"]){display:flex;align-items:center;gap:6px;margin:0}
#ppo-app .ctl:has(.seg-ctl[data-key$="pd"])>.lbl{margin:0}
#ppo-app .seg-ctl[data-key$="pd"] button{height:26px;padding-top:0;padding-bottom:0}   /* the kit's tray adds 3 px above and below its keys (2026-10-22 refit): 26 px keys keep the control 32 px tall, as tall as the button beside it */
#ppo-app :has(>.ctl .seg-ctl[data-key$="pd"])>.btn{height:32px;padding-top:0;padding-bottom:0}

/* ---------- 知识梳理: a formula on its own line; its pieces stay close and wrap only between them, so nothing scrolls sideways ---------- */
.primer .ppo-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;row-gap:6px;margin:2px 0 14px;padding-left:1em;font-size:1.06em;line-height:1.3;min-width:0}
.primer .ppo-prfx>span{min-width:0;max-width:100%}
.primer .ppo-nw{white-space:nowrap}
@media (max-width:760px){.primer .ppo-prfx{padding-left:.4em}}
@media (max-width:380px){.primer .ppo-prfx{font-size:1em}}
/* ---------- a wide stage (polish round 4, 2026-10-17; the owner's B4, R7.12): at 1440 × 900 parts 6, 7 and 8 needed 43, 126 and 115 px
   of scrolling inside the stage, and entering part 7 from part 6 left the stage's top 42 px under the top bar (fixed in ppo.js). On a
   stage at least 736 px wide (windows from about 1200 px) the curve and part 6's two panels are drawn shorter (--ppo-ch, --ppo-cph, read
   by drawCurve and drawCP), the bars are shorter, the curve's switch keeps its label on its row, the three prompts' titles share one row
   that is one line when all three fit on one and two when one needs two (a subgrid, so the three bar groups stay level, H7), the metric
   cards share the row by their number with the value and change lines tighter (CONTRACT §19), and a few gaps are tighter. Same blocks in
   the same order, same texts and animation; phones (≤ 760 px) and narrower stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .ppo-curve{--ppo-ch:124;height:124px}
  .ppo-cp-svg{--ppo-cph:126;height:126px}
  .ppo-legend{margin-top:8px}
  .ppo-bars{grid-template-rows:auto auto;row-gap:4px;margin-top:8px;--ppo-hold:1}
  .ppo-bg{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  .ppo-bt{min-height:0;margin-bottom:0;align-self:end}
  .ppo-ct{height:72px}
  .ppo-kinds{margin-top:4px}
  /* --ppo-hold (on the bars): in parts 5 and 6, Scenarios and Settings ppo.js keeps the note on one distribution in its place, unseen,
     while it does not apply (R7.9) */
  .ppo-same{margin-top:4px}
  .ppo-same.ppo-held{visibility:hidden;min-height:2.9em}
  .ppo-run{margin-top:8px}
  .ppo-curve-head{margin-top:10px;padding-top:10px;align-items:center}
  .ppo-curve-head .ctl{display:flex;align-items:center;gap:8px}
  /* with the switch on the title's row, the ratio view's English title takes two lines where the others take one: the title keeps two
     lines in English, so the stage does not move by 5 px when the view changes (R7.9) */
  .ppo-curve-title:lang(en){min-height:2.7em}
  .ppo-curve{margin-top:4px}
  .ppo-mem{margin-top:10px;padding-top:10px}
  .ppo-mem.ppo-mem-top{margin:8px 0 2px;padding:8px 12px}
  .ppo-clip{margin-top:8px;padding:8px 12px}
  .ppo-clip-ctl,.ppo-cps{margin-top:6px}
  /* part 6 (R7.9): the line under the panel's title keeps two lines (one beside the switch of a single pass, two beside the five-pass
     one) and the caption the lines of the longest of the three levers' captions (two in Chinese, three in English), so picking a
     lever does not move the stage */
  .ppo-clip-s{min-height:2.9em}
  .ppo-cp-cap{min-height:2.9em}
  .ppo-cp-cap:lang(en){min-height:4.35em}
  /* one column per card shown, all as wide: ppo.js shows and hides a card by its hidden attribute, and a :has() count of the shown
     cards was not always restyled by Chromium (entering part 7 from part 6, its fourth card went to a second row: 97 px) */
  .ppo-metrics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:10px}
  .ppo-metrics .metric .v{line-height:1.25}
  .ppo-metrics .metric .d{min-height:13px;line-height:1.1}
  .ppo-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* R6.37 (polish round 4, 2026-10-17): in the 280 px rail (windows 761–1180 px) a named formula's name takes its own line above the
   formula, so the formula has the card's whole width and nothing scrolls sideways (part 8's “reward after the KL penalty” scrolled 51 px
   at 900 px in English); the chain still lines up at “=” */
@media (min-width:761px) and (max-width:1180px){
  #ppo-rail .ppo-eq{grid-template-columns:auto minmax(0,1fr)}
  #ppo-rail .ppo-eq-n{grid-column:1 / -1;max-width:none}
  #ppo-rail .ppo-eq-n:empty{display:none}
}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.ppo-st-title{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 6–8 still ran 36–50 px past the stage in Chinese and
   56–85 in English. The curve and part 6's two panels are drawn 20 and 16 px shorter (their text keeps its size: they are drawn for
   their height), the bars 10 px shorter, and the gaps between the blocks and inside the clip panel 2–4 px smaller. In English the
   prompts' titles and the panels' captions take a line more (35, 15 and 10 px past 1536 × 730 with the rules above; 138–167 on main), so
   there the two clip panels are drawn 84 px tall, the bars 54 and the curve 96 (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .ppo-curve{--ppo-ch:104;height:104px}
  .ppo-cp-svg{--ppo-cph:110;height:110px}
  .ppo-ct{height:62px}
  .ppo-legend{margin-top:6px}
  .ppo-bars{margin-top:6px}
  .ppo-clip{margin-top:6px;padding-top:6px;padding-bottom:6px}
  .ppo-clip-ctl,.ppo-cps{margin-top:4px}
  .ppo-mem.ppo-mem-top{margin-top:6px;padding-top:6px;padding-bottom:6px}
  .ppo-run{margin-top:6px}
  .ppo-curve-head{margin-top:8px;padding-top:8px}
  .ppo-metrics{margin-top:8px}
  .ppo-cp{padding-top:4px}
  .ppo-cp-cap{margin-top:4px}
  .ppo-kinds,.ppo-same{margin-top:2px}
  html[lang="en"] .ppo-cp-svg{--ppo-cph:84;height:84px}
  html[lang="en"] .ppo-ct{height:54px}
  html[lang="en"] .ppo-curve{--ppo-ch:96;height:96px}
}}

/* prefill-decode: one request's timeline, the two limits of each phase, the GPU memory of a batch, the roofline deep dive.
   Colours: tokens only (R5.6). Weights blue, KV cache amber, runtime overhead violet (the kit's memory bar); prefill, arithmetic, ticks
   and the roofline in grayscale; green and red only for the challenge's goal. */
.pd-stage .stage-head{align-items:center}
.pd-graph{padding:12px 14px 14px;display:grid;gap:14px}
.pd-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
/* the part's focus lights up on the chart (R3.14) */
.pd-graph[data-focus="tl"] .pd-tl,.pd-graph[data-focus="pre"] .pd-ph[data-ph="pre"],.pd-graph[data-focus="dec"] .pd-ph[data-ph="dec"]{outline:2px dashed var(--focus-frame);outline-offset:3px;border-radius:4px}

/* ---------- the timeline ---------- */
.pd-tl{display:grid;gap:4px;min-width:0}
.pd-tl-labs{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}
.pd-tl-lpre{font-weight:600;color:var(--ink)}
.pd-tl-track{position:relative;height:34px;border-bottom:1px solid var(--line);cursor:help;outline-offset:3px}
.pd-tl-pre{position:absolute;left:0;top:5px;bottom:5px;background:var(--ink-3);border-radius:3px 0 0 3px;overflow:hidden;display:flex;align-items:center;transition:width .25s ease-out}
.pd-tl-pin{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--bg);white-space:nowrap;padding-left:6px;font-style:normal}
.pd-tl-first{position:absolute;top:0;bottom:-5px;width:0;border-left:3px solid var(--ink);margin-left:-1.5px;transition:left .25s ease-out}
.pd-tl-ticks i{position:absolute;top:9px;bottom:9px;width:0;border-left:1.5px solid var(--ink);margin-left:-.75px}
.pd-tl-mask{position:absolute;top:5px;bottom:5px;border:1.5px dashed var(--line);border-left:0;border-radius:0 3px 3px 0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;overflow:hidden}
.pd-tl-axis{position:relative;height:15px;font-size:var(--fs-mark);color:var(--ink-3)}
.pd-tl-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.pd-tl-axis span:first-child{transform:none}

/* ---------- the two limits of each phase ---------- */
.pd-lim{display:grid;gap:10px;min-width:0}
.pd-ph{border:1px solid transparent;border-radius:8px;padding:8px 10px 10px;background:var(--surface-2);min-width:0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.pd-ph-h{display:flex;align-items:baseline;gap:2px 10px;flex-wrap:wrap;font-size:var(--fs-cap);margin-bottom:6px}
.pd-ph-h b{font-weight:700}
.pd-ph-d{color:var(--ink-3);font-size:var(--fs-label);flex:1 1 auto;min-width:0}
.pd-ph-t{font-size:var(--fs-cap);font-weight:650;color:var(--ink);white-space:nowrap}
.pd-rows{display:grid;gap:6px;position:relative}
.pd-row{display:grid;grid-template-columns:78px minmax(0,1fr) 68px;align-items:center;gap:8px;cursor:help;border-radius:3px;outline-offset:2px}
html[lang^="zh"] .pd-row{grid-template-columns:64px minmax(0,1fr) 68px}
.pd-rl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.pd-row.pd-set .pd-rl{color:var(--ink);font-weight:650}
.pd-bar{position:relative;height:20px;background:var(--surface);border-radius:2px}   /* inside a soft panel (var(--surface-2)), so a track or a highlight is var(--surface) (精装修 step 2) */
.pd-bar i{position:absolute;top:0;bottom:0;left:0;min-width:2px;transition:width .25s ease-out,left .25s ease-out}
.pd-bc{background:var(--ink-2);border-radius:2px}
.pd-bw{background:var(--c-weights);border-radius:2px 0 0 2px}
.pd-bk{background:var(--c-kv)}
.pd-row.pd-fade .pd-bar i{opacity:.28}
.pd-row.pd-fade .pd-rv{color:var(--ink-3)}
.pd-rv{font-size:var(--fs-label);color:var(--ink);white-space:nowrap;text-align:right}
.pd-settag{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.5;padding:0 6px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--ink);white-space:nowrap}
.pd-goal{position:absolute;top:-5px;bottom:-5px;width:0;border-left:1.5px dashed var(--ink);z-index:1}
.pd-mask{position:absolute;inset:-3px -2px;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:4px;background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-3)}

/* ---------- the GPU memory a batch takes (the kit's bar, as in the KV cache memory lab) ---------- */
.pd-mem{display:grid;gap:5px;min-width:0}
.pd-mem .bar.thin{margin-top:4px;height:16px;cursor:help}
.pd-memleg{margin-top:2px}

/* ---------- deep dive: the roofline ---------- */
.pd-roof{display:grid;gap:6px;min-width:0}
.pd-rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 12px;flex-wrap:wrap}
.pd-rhead .pd-cap{flex:1 1 260px;min-width:0}
.pd-rsvg{width:100%;height:auto;display:block;overflow:visible}
.pd-rg{stroke:var(--line-2);stroke-width:1}
.pd-rt{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.pd-rax{fill:var(--ink-2)}
.pd-rreg{fill:var(--ink-3);font-style:italic}
.pd-rroof{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.pd-rridge{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 3}
.pd-rhit{stroke:transparent;stroke-width:12}
.pd-rrg,.pd-rpt{cursor:help}
.pd-rpt circle,.pd-rpt rect{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.pd-rlab{fill:var(--ink);font-weight:600}
.pd-rleg i{display:inline-block;flex:none;margin-right:5px}
.pd-sw-roof{width:14px;height:0;border-top:2.4px solid var(--ink)}
.pd-sw-dot{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.pd-sw-sq{width:9px;height:9px;background:var(--ink)}

/* ---------- legend swatches ---------- */
.sw.pd-sw-pre{background:var(--ink-3);border-color:transparent}
.sw.pd-sw-first{width:0;height:13px;border:0;border-left:3px solid var(--ink);border-radius:0;margin:0 7px 0 3px;vertical-align:-2px}
.sw.pd-sw-tick{width:0;height:11px;border:0;border-left:1.5px solid var(--ink);border-radius:0;margin:0 7px 0 3px}
.sw.pd-sw-ar{background:var(--ink-2);border-color:transparent}
.sw.pd-sw-fade{background:var(--ink-2);opacity:.3;border-color:transparent}
#pd-legend>span{cursor:help}

/* ---------- metric cards: five on wide stages, three per row on narrow ones; the challenge's four in one row, or two by two ---------- */
.metric.pd-hid .v{color:var(--ink-3)}
.pd-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.pd-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- rail ---------- */
.pd-bctl .pd-brow{display:flex;align-items:center;gap:6px}
.pd-bctl .pd-brow input{flex:1 1 auto;min-width:0}
.pd-bstep{padding:2px 10px;font-size:var(--fs-stage);line-height:1.2;font-family:var(--font-mono)}
.pd-deep{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px}
.pd-deep .lbl{flex-basis:100%;font-size:var(--fs-label);font-weight:600;color:var(--ink-3)}
.pd-deep .btn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pd-seen{color:var(--c-ok)}
.pd-ch-res{scroll-margin-top:120px}
.goal.pd-over b{color:var(--c-oom)}
.progress.pd-over i{background:var(--c-oom)}

/* ---------- settings ---------- */
.pd-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.pd-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.pd-grp .ctl>.lbl{display:block}

/* ---------- connect ---------- */
.pd-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.pd-prod li{margin-bottom:6px}
.pd-prod code,.refs code{word-break:break-word}

/* ---------- mini result bar ---------- */
.pd-dk{position:relative;height:14px;width:100%;min-width:48px;border-bottom:1px solid var(--line)}
.pd-dk i{position:absolute}
.pd-dk-pre{left:0;top:3px;bottom:3px;background:var(--ink-3)}
.pd-dk-first{top:0;bottom:-1px;width:0;border-left:2px solid var(--ink);margin-left:-1px}
.pd-dk-tick{top:4px;bottom:4px;width:0;border-left:1px solid var(--ink)}

.pd-bctl output,.pd-app .ctl output{white-space:nowrap}
@media (max-width:760px){
  /* phones: the picture first, its legend right under it, so the timeline is on the first screen (R7.3) */
  .pd-stage{display:flex;flex-direction:column}
  .pd-stage>.stage-head{order:1}
  .pd-stage>.pd-graph{order:2}
  .pd-stage>.legend-row{order:3}
  .pd-stage>.pd-scope{order:4}
  .pd-stage>.metrics{order:4}
  .pd-stage>details.math{order:5}
  .pd-graph{padding:10px 10px 12px}
  .pd-row{grid-template-columns:70px minmax(0,1fr) 62px;gap:6px}
  html[lang^="zh"] .pd-row{grid-template-columns:58px minmax(0,1fr) 62px}
}
@media (prefers-reduced-motion:reduce){.pd-bar i,.pd-tl-pre,.pd-tl-first{transition:none}}
/* the numbers' scope, right above the metric cards (an estimate for one GPU, no queue or network) */
.pd-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- part 6, the experiment: the same request on three GPUs, on one time scale (the original's whole answer) ----------
   Each row is also the control that picks its GPU (single choice, radio dot); the GPU picked is drawn in full, the others faded.
   Grayscale only, as the single timeline (R5.6). */
.pd-graph[data-focus="xa"] .pd-xa{outline:2px dashed var(--focus-frame);outline-offset:3px;border-radius:4px}
.pd-xa{display:grid;gap:6px;min-width:0}
.pd-xa-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.pd-xa-ideal{font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.4;color:var(--ink-2);border:1px dashed var(--line);border-radius:4px;padding:1px 8px;cursor:help;max-width:100%}
.pd-xrows{display:grid;gap:4px;min-width:0}
.pd-xrow{display:grid;gap:1px;width:100%;min-width:0;margin:0;padding:3px 8px 4px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:opacity .2s ease-out}
.pd-xrow:hover{border-color:var(--ink-3)}
.pd-xrow.pd-xsel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pd-xrow.pd-xoff{opacity:.5}
.pd-xrow.pd-xoff:hover,.pd-xrow.pd-xoff:focus-visible{opacity:.8}
.pd-xrow.pd-xhid{cursor:pointer}
.pd-xrow-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1px 12px;font-size:var(--fs-cap);line-height:1.35;min-width:0}
.pd-xrow-n{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pd-xrow-n b{font-weight:650}
.pd-xdot{display:inline-block;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink-3);box-sizing:border-box;flex:none}
.pd-xrow[aria-pressed="true"] .pd-xdot{border-color:var(--ink);background:radial-gradient(circle,var(--ink) 0 3px,transparent 3.5px)}
.pd-xrow-v{display:inline-flex;flex-wrap:wrap;gap:0 12px;font-size:var(--fs-label);color:var(--ink-2)}
.pd-xrow-e{color:var(--ink);font-weight:600}
.pd-xtrack{position:relative;display:block;height:23px;border-bottom:1px solid var(--line)}
.pd-xtrack>i{position:absolute;display:block}
.pd-xband{top:8px;bottom:8px;left:0;width:0;background:var(--surface-2);transition:left .25s ease-out,width .25s ease-out}
.pd-xpre{left:0;top:3px;bottom:3px;width:0;background:var(--ink-3);border-radius:3px 0 0 3px;transition:width .25s ease-out}
.pd-xfirst{top:0;bottom:-4px;left:0;width:0;border-left:3px solid var(--ink);margin-left:-1.5px;transition:left .25s ease-out}
.pd-xticks i{position:absolute;display:block;top:6px;bottom:6px;width:0;border-left:1.5px solid var(--ink);margin-left:-.75px}
.pd-xmask{position:absolute;inset:3px 0;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:3px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;overflow:hidden}
.pd-xaxis{position:relative;display:block;height:15px;margin:0 9px;font-size:var(--fs-mark);color:var(--ink-3)}
.pd-xaxis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.pd-xaxis span:first-child{transform:none}
/* the original's bars as dashed outlines, on the same scale */
.pd-ghost{position:absolute;top:0;bottom:0;left:0;border-radius:2px;pointer-events:none;background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 5px);opacity:.7;transition:width .25s ease-out}
.sw.pd-sw-ghost{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border-color:var(--line)}
.sw.pd-sw-xoff{background:var(--ink-3);opacity:.45;border-color:transparent}
.sw.pd-sw-tick+span{white-space:nowrap}
/* the GPU options in the card: each one's whole answer on its title row, right-aligned under the column's name (R3.6) */
.pd-xlv{margin-top:6px}
.pd-xlv-h{display:flex;justify-content:space-between;gap:10px;padding:0 13px 0 36px;font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.02em;color:var(--ink-3)}
.pd-xlv .levers{margin-top:3px}
.pd-xl-note{display:block}
.pd-xrow.pd-xhid .pd-xtrack>i{display:none}
/* part 6's three cards in one row */
.pd-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .pd-xrow{padding:3px 7px 4px}
  .pd-xaxis{margin:0 8px}
}
/* seven parts: the part bar's dots and Next stay on one line on a 390 px phone, in Chinese too (24 px dots, the WCAG minimum target) */
@media (max-width:420px){.pd-app .pb-dots{gap:3px}.pd-app .pb-dot{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.pd-xpre,.pd-xband,.pd-xfirst,.pd-ghost,.pd-xrow{transition:none}}

/* part 6 (review r1): the question as the way in on a phone's first screen, before the prediction (R7.3) */
.pd-xgo{display:none;justify-self:start;margin-top:2px}
@media (max-width:760px){.pd-xgo:not([hidden]){display:inline-flex}}
/* the first token, zoomed in (the chat's prefill is a sliver of the time scale): three thin bars on their own 0–100 ms axis */
.pd-xzoom{display:grid;gap:2px;margin-top:2px;padding:5px 8px 3px;border-top:1px solid var(--line-2);min-width:0}
.pd-xzoom-cap{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2)}
.pd-xzrow{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:8px;min-width:0}
html[lang^="zh"] .pd-xzrow{grid-template-columns:70px minmax(0,1fr)}
.pd-xzrow.pd-xoff{opacity:.5}
.pd-xzrow.pd-xsel .pd-xzn{color:var(--ink);font-weight:650}
.pd-xzn{font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-xztrack{position:relative;display:block;height:12px}
.pd-xztrack>i{position:absolute;display:block}
.pd-xzpre{left:0;top:2px;bottom:2px;width:0;background:var(--ink-3);border-radius:2px 0 0 2px;transition:width .25s ease-out}
.pd-xzfirst{top:0;bottom:0;left:0;width:0;border-left:2.5px solid var(--ink);margin-left:-1.25px;transition:left .25s ease-out}
.pd-xzv{position:absolute;top:50%;transform:translateY(-50%);font-size:var(--fs-mark);line-height:1;color:var(--ink);white-space:nowrap}
.pd-xzaxis{position:relative;display:block;height:13px;margin-left:104px;font-size:var(--fs-mark);color:var(--ink-3)}
html[lang^="zh"] .pd-xzaxis{margin-left:78px}
.pd-xzaxis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.pd-xzaxis span:first-child{transform:none}
.pd-xzaxis span:last-child{transform:translateX(-100%)}
/* the phone's mini result bar in part 6: the original's timeline (faded, above) and the GPU picked (below) */
.pd-dkx .pd-dk-o{opacity:.4}
.pd-dkx .pd-dk-pre.pd-dk-o{top:1px;bottom:8px}.pd-dkx .pd-dk-tick.pd-dk-o{top:1px;bottom:8px}.pd-dkx .pd-dk-first.pd-dk-o{top:0;bottom:7px}
.pd-dkx .pd-dk-pre.pd-dk-v{top:8px;bottom:1px}.pd-dkx .pd-dk-tick.pd-dk-v{top:8px;bottom:1px}.pd-dkx .pd-dk-first.pd-dk-v{top:7px;bottom:-1px}
@media (prefers-reduced-motion:reduce){.pd-xzpre,.pd-xzfirst{transition:none}}
/* H1 (the owner, 2026-10-09): a formula the reader needs stands on its own line, typeset (A.ui.math); it scrolls sideways on a phone */
.pd-fx{margin:6px 0;overflow-x:auto;max-width:100%}
/* H1/H2 (the owner, 2026-10-09): Show the math in short blocks with a hairline between them; in each block the name and the typeset
   formula, then this run's numbers under the terms they replace, the "=" signs lined up; a table wider than its box is set again by fitMath (below), so nothing scrolls sideways */
.pd-mb{padding:8px 0 10px}
.pd-mb+.pd-mb{border-top:1px solid var(--line)}
.pd-mb .pd-mlead{margin:0 0 4px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5}
.pd-mb .pd-mvs{margin:0}
.pd-mfx{overflow-x:auto;max-width:100%;padding-block:.3em}
.pd-mt{border-collapse:collapse}
.pd-mt th,.pd-mt td{padding:1px 3px;text-align:center;white-space:nowrap;vertical-align:baseline;font-weight:400;border:0;background:none}
.pd-mt th{font-family:var(--font-ui);text-align:right;white-space:nowrap;padding-right:6px;color:var(--ink-2)}
.pd-mt tr.pd-mname th{color:var(--ink);font-weight:600}
.pd-mt tr.pd-mname:not(:first-child) th,.pd-mt tr.pd-mname:not(:first-child) td{padding-top:8px}
.pd-mt td.pd-mres{text-align:left;white-space:normal}
.pd-mb .pd-mnote{margin:4px 0 0;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}
/* Show the math on a box too narrow for its table (the owner's review of 2026-10-09): fitMath sets the block again, the name on its own
   line, the formula broken before an operator with the numbers under the terms they replace, nothing scrolling sideways */
.pd-mtn{border-collapse:collapse}
.pd-mtn th,.pd-mtn td{padding:1px 0;border:0;background:none;font-weight:400;text-align:left;vertical-align:top}
.pd-mtn tr.pd-mname th{font-family:var(--font-ui);font-weight:600;color:var(--ink);white-space:normal;padding:0 0 2px}
.pd-mtn tr.pd-mname:not(:first-child) th{padding-top:8px}
.pd-mtn .pd-mlbl{font-weight:400;color:var(--ink-2)}
.pd-mtn td.pd-meq{width:1%;padding-right:3px;white-space:nowrap}
.pd-mtn td.pd-mres{white-space:normal;padding-left:3px;line-height:1.5}
.pd-mfl{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.pd-mu{display:inline-grid;align-items:center;justify-items:center}
.pd-mc{padding:1px 3px;white-space:normal;line-height:1.5;text-align:center}
.pd-mc0{display:flex;align-items:center;justify-content:center;height:1.9em;white-space:nowrap}
.pd-mtall .pd-mc0{height:3.1em}
/* 知识梳理 (2026-10-12): a formula on its own line, as the architecture primer sets them */
.primer .pd-prfx{display:block;max-width:100%;overflow-x:auto;padding:.3em 0;font-size:1.05em}
/* ---------- polish r5 (B4, R7.12): part 6 fits a 1440 × 900 screen. Its stage stacked the three GPUs' timelines (275 px), the two
   limits of each phase (221 px: prefill's box over the decode step's) and three metric cards, so it scrolled 49 px inside itself. On a
   stage at least 736 px wide the two phases' boxes stand side by side, prefill on the left as it read first before, each box's name and
   time on its first line and what the step computes on the second, so a longer time (“30.0 ms（原版 60.0 ms）”) never moves the
   box's lines; when one box is hidden (the challenge shows only the decode step) the other keeps the whole width. The metric cards take
   the tighter value and change lines of CONTRACT §19. Same boxes, same order and the same bars; phones (≤ 760 px) and narrower stages
   keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .pd-lim:not(:has(>.pd-ph[hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .pd-lim:not(:has(>.pd-ph[hidden]))>.pd-cap{grid-column:1/-1}
  .pd-lim:not(:has(>.pd-ph[hidden])) .pd-ph-h{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:1px}
  .pd-lim:not(:has(>.pd-ph[hidden])) .pd-ph-h>b{grid-area:1/1}
  .pd-lim:not(:has(>.pd-ph[hidden])) .pd-ph-t{grid-area:1/2}
  .pd-lim:not(:has(>.pd-ph[hidden])) .pd-ph-d{grid-area:2/1/3/3}
  .pd-metrics .metric .v{line-height:1.25}
  .pd-metrics .metric .d{min-height:13px;line-height:1.1}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 6 still ran 24 px past the stage, in both languages.
   The legend, the scope line, the metric cards and Show the math sit 6 px under what is above them, and the figure's and the phases'
   padding are smaller */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .pd-stage>.legend-row{margin-top:6px}
  .pd-graph{padding-top:8px;padding-bottom:8px}
  .pd-ph{padding-top:6px;padding-bottom:8px}
  .pd-stage>.pd-scope{margin-top:6px}
  .pd-metrics{margin-top:6px}
  .pd-stage>details.math{margin-top:6px}
}}

/* prefix-caching: the requests in order, the block strip of one prompt, its time to first token with and without the cache.
   Colours: tokens only (R5.6). Cached blocks amber (they are KV cache); computed blocks, prefill and the timeline in grayscale;
   hatching for "same tokens after a different prefix"; green and red only for the challenge's goal. */
.px-stage .stage-head{align-items:center}
.px-graph{padding:12px 14px 14px;display:flex;flex-direction:column;gap:16px}
.px-graph>*{min-width:0}
.px-graph[data-lead="strip"] .px-stripbox{order:1}.px-graph[data-lead="strip"] .px-tl{order:2}.px-graph[data-lead="strip"] .px-rowsbox{order:3}
.px-graph[data-lead="rows"] .px-rowsbox{order:1}.px-graph[data-lead="rows"] .px-stripbox{order:2}.px-graph[data-lead="rows"] .px-tl{order:3}
.px-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
/* the part's focus lights up on the chart (R3.14) */
.px-graph[data-focus="tl"] .px-tl,.px-graph[data-focus="strip"] .px-stripbox,.px-graph[data-focus="rows"] .px-rowsbox{outline:2px dashed var(--focus-frame);outline-offset:4px;border-radius:4px}

/* ---------- block states: cached (amber), computed (gray), computed although the same tokens are cached after another prefix (hatched) ---------- */
.px-s0{background:var(--c-kv)}
.px-s1{background:var(--ink-3)}
.px-s2{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.6px,var(--surface-2) 1.6px 3.6px)}

/* ---------- the requests in order ---------- */
.px-rows{display:grid;gap:3px}
.px-row{display:grid;grid-template-columns:86px minmax(0,1fr) 68px;align-items:center;gap:8px;width:100%;padding:3px 6px;border:1px solid transparent;border-radius:4px;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.px-rows-ch .px-row{grid-template-columns:104px minmax(0,1fr) 68px}
html[lang^="zh"] .px-rows-ch .px-row{grid-template-columns:92px minmax(0,1fr) 68px}
.px-row:hover{border-color:var(--line)}
.px-row.on{border-color:var(--ink);background:var(--surface-2)}
.px-rl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-rl b{font-weight:700;color:var(--ink)}
.px-row.on .px-rl{color:var(--ink);font-weight:650}
.px-rt{position:relative;height:14px;min-width:0}
.px-rbar{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:2px;overflow:hidden}
.px-runs{display:flex;height:100%;width:100%}
.px-runs i{display:block;height:100%;min-width:1px}
.px-rbar b{position:absolute;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:var(--surface)}
.px-rv{font-size:var(--fs-label);text-align:right;white-space:nowrap;color:var(--ink)}
.px-row-wait{cursor:default}
.px-rwait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:2px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap;overflow:hidden}
.px-row-wait .px-rv{color:var(--ink-3)}
.px-sum{margin-top:6px;color:var(--ink-2);line-height:1.45}

/* ---------- the block strip of the selected prompt: its parts on a band, one cell per block (or group of blocks) ---------- */
.px-strip{position:relative;padding-top:2px}
.px-band{position:relative;height:18px;margin-bottom:3px}
.px-bs{position:absolute;top:0;bottom:0;border:1px solid var(--line);border-radius:2px;background:var(--surface-2);overflow:hidden;cursor:help;display:flex;align-items:center}
.px-bs.px-alt{background:var(--surface)}
.px-bs em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap;padding:0 5px;line-height:1}
.px-cells{display:flex;gap:1px;height:24px;cursor:help;outline-offset:3px}
.px-cell{flex:1 1 0;min-width:0;display:flex;border-radius:1px;overflow:hidden}
.px-cell i{display:block;height:100%}
.px-cells.px-sweep .px-s0{transition:background-color .28s ease-out;transition-delay:calc(var(--i) * 9ms)}
.px-cells.px-pre-sweep .px-s0{background:var(--ink-3)}
.px-miss{position:absolute;top:-2px;bottom:-5px;width:0;border-left:3px solid var(--ink);margin-left:-1.5px;z-index:2;pointer-events:none}
/* labels of parts too narrow for their own: under the strip (or above it), each on a short leader line to its part */
.px-pins{position:relative;height:0}
.px-pins>i{position:absolute;width:0;border-left:1px solid var(--ink-2)}
.px-pin{position:absolute;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:15px;padding:0 3px;color:var(--ink-2);background:var(--surface);border-radius:2px;cursor:help}
.px-strip-foot{margin-top:8px;color:var(--ink-2);line-height:1.45}
.px-strip-foot .muted{display:block;margin-top:2px}

/* ---------- time to first token: without and with the cache, one time scale ---------- */
.px-tl{display:grid;gap:6px;min-width:0}
.px-tlrow{display:grid;gap:2px;min-width:0}
.px-tll{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}
.px-tlv{color:var(--ink);font-weight:600}
.px-track{position:relative;height:28px;border-bottom:1px solid var(--line);cursor:help;outline-offset:3px}
.px-pre{position:absolute;left:0;top:5px;bottom:5px;min-width:2px;background:var(--ink-3);border-radius:3px 0 0 3px;transition:width .5s ease-out}
.px-first{position:absolute;top:0;bottom:-5px;width:0;border-left:3px solid var(--ink);margin-left:-1.5px;transition:left .5s ease-out}
.px-ticks i{position:absolute;top:8px;bottom:8px;width:0;border-left:1.5px solid var(--ink);margin-left:-.75px;transition:left .5s ease-out}
.px-axis{position:relative;height:15px;font-size:var(--fs-mark);color:var(--ink-3)}
.px-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.px-axis span:first-child{transform:none}

/* ---------- legend swatches ---------- */
.sw.px-sw-comp{background:var(--ink-3);border-color:transparent}
.sw.px-sw-same{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.6px,var(--surface-2) 1.6px 3.6px);border-color:var(--ink-3)}
.sw.px-sw-first,.sw.px-sw-miss{width:0;height:13px;border:0;border-left:3px solid var(--ink);border-radius:0;margin:0 7px 0 3px;vertical-align:-2px}
.sw.px-sw-tick{width:0;height:11px;border:0;border-left:1.5px solid var(--ink);border-radius:0;margin:0 7px 0 3px}
#px-legend>span{cursor:help}

/* ---------- metric cards: five on wide stages, three per row on narrow ones; the challenge's four in one row, or two by two ---------- */
.px-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.px-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.px-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.px-send{display:flex;justify-content:flex-start}
.px-ch-res{scroll-margin-top:120px}
/* kit gap: when the capability card grows after a pick, Chrome anchors the scroll to the next-lab footer below it and pushes the
   picked option under the top bar (prefill-decode fails the same check in tests/exits_flow.py); the footer is no scroll anchor here */
.px-app .rail .next-lab{overflow-anchor:none}
.px-order{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:5px}
.px-part{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}
.px-pnum{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:var(--fs-mark)}
.px-pt{display:grid;gap:1px;min-width:0}
.px-pt b{font-size:var(--fs-cap);font-weight:650}
.px-pt span{font-size:var(--fs-label);color:var(--ink-3);line-height:1.35}
.px-pbtns{display:flex;gap:4px}
.px-pbtns .btn.sm{padding:4px 8px;font-size:var(--fs-label);line-height:1.1}
.px-moves{margin:0 0 10px}

/* ---------- settings ---------- */
.px-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.px-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.px-grp .ctl>.lbl{display:block}
.px-app .seg-ctl[data-key="change"],.px-app .seg-ctl[data-key="mem"]{flex-wrap:wrap}
.px-app .seg-ctl[data-key="change"] button,.px-app .seg-ctl[data-key="mem"] button{flex:1 1 30%}
.px-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.px-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.px-prod li{margin-bottom:6px}
.px-prod code,.refs code{word-break:break-word}

/* ---------- mini result bar ---------- */
.px-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.px-dk .px-runs{height:100%}
.px-dk-kv{position:absolute;left:0;top:0;bottom:0;background:var(--c-kv)}
.px-dk-goal{position:absolute;top:-2px;bottom:-2px;width:0;border-left:1.5px dashed var(--ink)}

@media (max-width:760px){
  /* phones: the picture first, its legend right under it (R7.3) */
  .px-stage{display:flex;flex-direction:column}
  .px-stage>.stage-head{order:1}
  .px-stage>.px-graph{order:2}
  .px-stage>.legend-row{order:3}
  .px-stage>.px-scope{order:4}
  .px-stage>.metrics{order:5}
  .px-stage>details.math{order:6}
  .px-graph{padding:10px 10px 12px}
  .px-row{grid-template-columns:34px minmax(0,1fr) 62px;gap:6px;padding:3px 4px}
  .px-rw{display:none}
  .px-rows-ch .px-row{grid-template-columns:84px minmax(0,1fr) 62px}
  html[lang^="zh"] .px-rows-ch .px-row{grid-template-columns:80px minmax(0,1fr) 62px}
  .px-rows-apps .px-row{grid-template-columns:34px minmax(0,1fr) 50px 62px}
  .px-part{grid-template-columns:22px minmax(0,1fr) auto;gap:6px}
}
/* part 5 on a phone: the headline names the changed token once one is picked, a second line in Chinese; keep room for it, so a pick in
   the chart does not move the chart (m2) */
@media (max-width:760px){#px-st-sub.px-sub2{min-height:2.9em}}
/* part 5 (Batch 3 review): what the cache holds after each request, and the requests arriving one at a time */
.px-rows-apps .px-row{grid-template-columns:86px minmax(0,1fr) 52px 68px}
.px-rc{display:inline-flex;gap:2px;justify-content:center}
.px-rc i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:3px;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:700;line-height:1;color:var(--ink-3);border:1px solid var(--line)}
.px-rc i.on{background:var(--c-kv);border-color:var(--c-kv);color:var(--on-kv)}
.px-rc i.ev{text-decoration:line-through;color:var(--ink-2);border-style:dashed;border-color:var(--ink-3)}
.px-row.px-new{animation:px-in .6s ease-out}
@keyframes px-in{from{background:color-mix(in srgb,var(--c-kv) 24%,transparent)}to{background:transparent}}
.px-rcap{display:block;font-weight:500;font-size:var(--fs-label);color:var(--ink-3);margin-top:2px}
.px-replay{font-size:var(--fs-label);margin-top:2px}
@media (prefers-reduced-motion:reduce){.px-pre,.px-first,.px-ticks i,.px-cells.px-sweep .px-s0{transition:none}.px-row.px-new{animation:none}}

/* ---------- part 5 (Batch 4): request 1 and request 2 block by block; where the miss starts and that it runs to the end; the keys ---------- */
.px-pairbox{display:none}
.px-graph[data-lead="pair"] .px-pairbox{display:block}
.px-graph[data-lead="pair"] .px-rowsbox,.px-graph[data-lead="pair"] .px-stripbox,.px-graph[data-lead="pair"] .px-tl{display:none}
.px-stage[data-part="onetoken"] .px-metrics{display:none}
.px-graph[data-focus="pair"] .px-pairbox{outline:2px dashed var(--focus-frame);outline-offset:4px;border-radius:4px}
.px-pair{display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:8px;align-items:center}
.px-plab{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink);font-weight:600;white-space:nowrap}
.px-plab3{font-weight:400;color:var(--ink-2);font-size:var(--fs-mark);white-space:normal;line-height:1.2;align-self:end;padding-bottom:6px}
.px-pcol{position:relative;min-width:0}
.px-ppins{position:relative;height:0}
.px-ppins>i{position:absolute;bottom:0;height:5px;width:0;border-left:1px solid var(--ink-2)}
.px-ppins .px-pin{top:0}
.px-ptrack{position:relative;height:24px;cursor:help;outline-offset:3px}
.px-pcells{display:flex;gap:1px;height:100%}
.px-pcells .px-cell{min-width:0;display:flex;border-radius:1px;overflow:hidden}
.px-pcells .px-cell i{display:block;height:100%}
.px-s3{background:var(--line-2)}
/* the part not looked up yet: blank, its left edge the lookup's front; before the prediction a dashed outline with a word */
.px-pcover{position:absolute;top:-1px;bottom:-1px;right:-1px;background:var(--surface);border:1px dashed var(--line);border-left:2px solid var(--ink);border-radius:0 2px 2px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2}
.px-pcover.wait{border:1.5px dashed var(--line);border-radius:2px}
.px-pcover span{font-family:var(--font-mono);font-size:var(--fs-mark);line-height:12px;color:var(--ink-3);white-space:nowrap;align-self:flex-start;margin-top:1px;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis}   /* the tick uses the lower part */
.px-pmiss{position:absolute;top:-21px;bottom:-3px;width:0;border-left:3px solid var(--ink);margin-left:-1.5px;z-index:3;pointer-events:none}
.px-ptick{position:absolute;top:62%;bottom:-8px;width:0;border-left:2px solid var(--ink);margin-left:-1px;z-index:4;pointer-events:none}
/* between the strips: an "=" and a "≠" pair of keys (request 1's on top, request 2's below), and the arrow from the first miss to the end */
.px-lane{position:relative;height:42px}
.px-larrow{position:absolute;top:50%;height:0;border-top:2px solid var(--ink);margin-top:-1px;z-index:1}
.px-larrow.end::after{content:"";position:absolute;right:-2px;top:-6px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink)}
.px-kp{position:absolute;top:1px;bottom:1px;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-items:center;padding:0 5px;background:var(--surface);border:1px solid var(--line);border-radius:3px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1;color:var(--ink-2);cursor:help;z-index:2}
.px-kp b{font-weight:600}
.px-kp i{font-style:normal;font-size:var(--fs-cap);font-weight:700;color:var(--ink);line-height:1}
.px-kp.ne{border-color:var(--ink)}
/* the three positions under request 2, each with a caret at its token */
.px-ppos{position:relative;height:36px}
.px-pcaret{position:absolute;top:1px;width:0;height:0;margin-left:-4.5px;border-style:solid;border-width:0 4.5px 6px 4.5px;border-color:transparent transparent var(--line) transparent}
.px-pcaret.on{border-bottom-color:var(--ink)}
.px-pbtn{position:absolute;top:8px;height:27px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-2);font:600 var(--fs-label)/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.px-pbtn:hover{border-color:var(--ink);color:var(--ink)}
.px-pbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.px-same{display:flex;align-items:center;gap:6px;margin:6px 0 0;color:var(--ink-2);min-height:19px;line-height:1.35}
.px-same .sw{margin-right:0;flex:none}
.px-ne{font-size:var(--fs-cap);color:var(--ink);flex:none}
/* the three counters, each with a bar: tokens recomputed and the time (gray, of the prompt and of no cache), new blocks (amber: KV cache) */
.px-ctrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.px-ctr{border:1px solid var(--line-2);border-radius:4px;padding:8px 9px;background:var(--surface);min-width:0;cursor:help}
/* a counter's name as a metric card's (kit polish r2, M1): 12 px in the text's font (was 10.5 px, and 10 px on phones, in the numbers' font) */
.px-ctr .k{font-family:var(--font-ui);font-size:var(--fs-label);color:var(--ink-3);line-height:1.2}
.px-ctr .v{font-size:clamp(15px,4cqi,18px);font-weight:500;margin-top:2px;white-space:nowrap}
.px-cbar{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin:5px 0 4px}
.px-cbar i{display:block;height:100%;width:0;background:var(--ink-3)}
.px-ctr[data-k="nw"] .px-cbar i{background:var(--c-kv)}
.px-ctr .sub{font-size:var(--fs-label);color:var(--ink-3);line-height:1.35}
.px-pfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;margin-top:8px;min-height:32px}
.px-prog{color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-label);min-width:0;flex:1 1 180px}
.px-otstep{margin-left:auto;white-space:nowrap}
/* the lookup's two controls (R3.20: ↻ Replay, then Block by block) stay together at the right, on the first line or both on the next */
.px-otbtns{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 8px}
.px-otreplay{white-space:nowrap}
.sw.px-sw-chg{width:0;height:0;border-style:solid;border-width:0 5px 8px 5px;border-color:transparent transparent var(--ink) transparent;border-radius:0;vertical-align:1px;margin:0 6px 0 1px}
.sw.px-sw-key{width:auto;height:auto;padding:0 3px;border-color:var(--line);font:600 var(--fs-mark)/12px var(--font-mono);color:var(--ink-2);font-style:normal;vertical-align:0}
.sw.px-sw-key::before{content:"#"}
.px-otq{margin:12px 0 0}
.px-otqn{margin:2px 0 6px}
/* the question sits in the card on a wide screen and in the chart, under the positions, on a phone (review r1 #1, #2) */
.px-otqs{display:none}
.px-otqs .px-otq{margin-top:10px;font-size:var(--fs-ui);line-height:1.45}
/* the pair's caption explains the chart in two sentences: normal weight, so it stays short on a phone */
#px-pair-cap{font-weight:400;color:var(--ink-2)}
.px-nw{white-space:nowrap}
/* part 5's options: the conclusion stays on the title row when it fits and moves under the title when it does not, so the title never
   turns into a column of single words (R3.17, R7.8) */
.px-otlv .lever{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px;row-gap:1px}
.px-otlv .lever::before{flex:none}
.px-otlv .lever .lv-t b{flex:0 1 auto;min-width:0}
.px-otlv .lever .lv-r{order:2;margin-left:auto;white-space:nowrap;font-weight:600}
.px-otlv .lever .lv-d{order:3;flex:1 0 100%;padding-left:24px}
.px-otlv .lever .lv-r:empty{display:none}
.px-otres{font-size:var(--fs-label)}
.px-app .linkbtn[data-otrail]{text-align:left}
@media (max-width:760px){
  /* on a phone the card comes first in the page's order but sits under the chart: without this, the browser keeps the card still while the
     chart above it grows or shrinks during the lookup, and the chart slides under the top bar */
  #px-rail,#px-rail *{overflow-anchor:none}
  .px-otqs{display:flex;flex-direction:column}
  .px-otqs .px-otq{order:1}
  .px-otqs .px-otch{order:2}
  .px-otqs .px-otqn{order:3;margin:6px 0 0}                     /* on a phone the note follows the choices, so the first choice is in view */
  #px-rail .px-otqc{display:none}
  .px-pair{grid-template-columns:52px minmax(0,1fr);column-gap:6px}
  .px-plab{font-size:var(--fs-mark);white-space:normal;line-height:1.2}
  .px-pbtn{padding:0 8px;font-size:var(--fs-label)}
  .px-pw{display:none}
  .px-same{font-size:var(--fs-mark);gap:4px}
  .px-ctrs{gap:6px}
  .px-ctr{padding:7px 7px}
  .px-ctr .sub{font-size:var(--fs-mark)}
}

/* phones with seven parts: the dots and the Back and Next buttons share one line, also in Chinese (review r1 #10) */
@media (max-width:420px){
  .px-app .pbar .pb-dots{gap:3px}
  .px-app .pbar .pb-dot{width:23px;height:23px;font-size:var(--fs-mark)}
  .px-app .pbar .pb-nav .btn.sm{padding:7px 9px}
}
@media (max-width:380px){
  .px-app .pbar .pb-dots{gap:2px}
  .px-app .pbar .pb-dot{width:21px;height:21px;font-size:var(--fs-mark)}
  .px-app .pbar .pb-nav .btn.sm{padding:6px 7px}
}
/* the challenge's reveal (GPT-6 review of v9, #2): Alice's day 1 (in the cache) against her day 2 (the new prompt), part by part, on
   shared rows; amber = the same part at the same place (read from the cache), a thick line at the first difference, then day 1's parts
   dashed amber (still cached, no longer a match) and day 2's hatched (cached after other parts) or gray (new); a bracket groups day 2's
   chat history */
/* the side-by-side, closed by default under the answer (the owner's review of batch 8), styled like the kit's “See all” disclosure */
.px-alx{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.px-alx>summary{cursor:pointer;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:4px 0}
.px-al{margin:14px 0 4px;display:grid;gap:10px;scroll-margin-top:72px}
@media (max-width:760px){.px-al{scroll-margin-top:118px}}
.px-al-q{margin:0;font-size:var(--fs-cap);font-weight:650;line-height:1.4;color:var(--ink)}
.px-al-leg{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}
.px-al-fig{margin:0;padding:8px 8px 7px;border:1px solid transparent;border-radius:8px;background:var(--surface-2);min-width:0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.px-al-fig.me{border-color:var(--ink)}
.px-al-fig figcaption{display:flex;align-items:flex-start;gap:6px 8px;margin-bottom:6px;font-size:var(--fs-cap);line-height:1.3;color:var(--ink)}
.px-al-t{display:grid;gap:1px;flex:1 1 0;min-width:0}
.px-al-k{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);font-size:var(--fs-mark);font-weight:700;line-height:1}
.px-al-avg{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2)}
.px-al-avg .cmp-you{white-space:nowrap}
.px-al-go{margin:8px 0 0}
.px-al-ns{flex-basis:100%;color:var(--ink-3)}
.px-al-g{display:grid;grid-template-columns:minmax(0,1fr) 5px minmax(0,1fr) 18px;row-gap:3px;align-items:stretch}
.px-al-ch{font-size:var(--fs-mark);line-height:1.3;color:var(--ink-2);padding-bottom:1px;min-width:0;overflow-wrap:anywhere;align-self:end}
.px-al-p{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;height:18px;padding:0 4px;border-radius:3px;font-size:var(--fs-mark);line-height:1;cursor:help;outline-offset:2px}
.px-al-p b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.px-al-p em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);flex-shrink:0}
.px-al-p.px-s0{color:var(--on-kv)}
.px-al-p.px-s1{color:var(--surface)}
.px-al-p.px-s2 b,.px-al-p.px-s2 em{background:var(--surface);color:var(--ink);padding:2px 2px;border-radius:2px}
.px-al-held{background:var(--surface);border:1.5px dashed var(--c-kv);color:var(--ink-2)}
.px-al-cut{position:relative;display:flex;align-items:center;justify-content:center;height:15px}
.px-al-cut::before{content:'';position:absolute;left:0;right:0;top:50%;margin-top:-1.25px;border-top:2.5px solid var(--ink)}
.px-al-cut>span{position:relative;padding:0 6px;background:var(--surface);font-size:var(--fs-mark);font-weight:650;line-height:1;color:var(--ink);white-space:nowrap}
.px-al-br{position:relative;width:5px;margin-left:3px;border:1.5px solid var(--ink-2);border-left:0;border-radius:0 3px 3px 0}
.px-al-br>span{position:absolute;left:6px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:var(--fs-mark);line-height:1;color:var(--ink-2);white-space:nowrap}
.px-al .px-al-foot{margin:6px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.sw.px-sw-held{background:transparent;border:1.5px dashed var(--c-kv)}
.sw.px-sw-cut{width:13px;height:0;border:0;border-top:2.5px solid var(--ink);border-radius:0;vertical-align:3px}
/* H1/H2 (the owner, 2026-10-09): Show the math in short blocks with a hairline between them; in each block the name and the typeset
   formula, then this run's numbers under the terms they replace, the "=" signs lined up; a table wider than its box is set again by fitMath (below), so nothing scrolls sideways */
.px-mb{padding:8px 0 10px}
.px-mb+.px-mb{border-top:1px solid var(--line)}
.px-mb .px-mlead{margin:0 0 4px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5}

.px-mfx{overflow-x:auto;max-width:100%;padding-block:.3em}
.px-mt{border-collapse:collapse}
.px-mt th,.px-mt td{padding:1px 3px;text-align:center;white-space:nowrap;vertical-align:baseline;font-weight:400;border:0;background:none}
.px-mt th{font-family:var(--font-ui);text-align:right;white-space:nowrap;padding-right:6px;color:var(--ink-2)}
.px-mt tr.px-mname th{color:var(--ink);font-weight:600}
.px-mt tr.px-mname:not(:first-child) th,.px-mt tr.px-mname:not(:first-child) td{padding-top:8px}
.px-mt td.px-mres{text-align:left;white-space:normal}
.px-mb .px-mnote{margin:4px 0 0;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}
/* Show the math on a box too narrow for its table (the owner's review of 2026-10-09): fitMath sets the block again, the name on its own
   line, the formula broken before an operator with the numbers under the terms they replace, nothing scrolling sideways */
.px-mtn{border-collapse:collapse}
.px-mtn th,.px-mtn td{padding:1px 0;border:0;background:none;font-weight:400;text-align:left;vertical-align:top}
.px-mtn tr.px-mname th{font-family:var(--font-ui);font-weight:600;color:var(--ink);white-space:normal;padding:0 0 2px}
.px-mtn tr.px-mname:not(:first-child) th{padding-top:8px}
.px-mtn .px-mlbl{font-weight:400;color:var(--ink-2)}
.px-mtn td.px-meq{width:1%;padding-right:3px;white-space:nowrap}
.px-mtn td.px-mres{white-space:normal;padding-left:3px;line-height:1.5}
.px-mfl{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.px-mu{display:inline-grid;align-items:center;justify-items:center}
.px-mc{padding:1px 3px;white-space:normal;line-height:1.5;text-align:center}
.px-mc0{display:flex;align-items:center;justify-content:center;height:1.9em;white-space:nowrap}
.px-mtall .px-mc0{height:3.1em}
/* ---------- polish r5 (B4, R7.12): part 6 fits a 1440 × 900 screen. Its stage stacked the eight requests (318 px with their caption), the
   block strip of the picked request (138 px), its time to first token (147 px), the scope line and five metric cards (112 px), so it
   scrolled 166 px inside itself (English 192). On a stage at least 736 px wide, when the requests lead the chart (part 6, Scenarios with
   more than two requests, the challenge), the strip and the timeline stand side by side under them, with a hairline between them (R7.13),
   read left to right as they read top to bottom before; the requests' "Send them again" sits at the right of their note, so the caption
   keeps its height while they play (R7.9); the rows, the metric cards (CONTRACT §19) and a few gaps are tighter. Same pieces in the same
   order; the strip and the timeline are drawn for their column's width (the strip's caption names the blocks per cell it draws, 16 at
   this width instead of 8) and again when the stage changes width (watchStage in prefix-caching.js); phones (≤ 760 px) and narrower
   stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  /* the status stays beside the title and a long subtitle wraps under it, instead of the status taking a line of its own (R7.9: part 4's
     levers and the Scenarios change the subtitle) */
  .px-stage>.stage-head{flex-wrap:nowrap}
  .px-stage>.stage-head>div:first-child{flex:1 1 auto;min-width:0}
  .px-stage>.stage-head>.stage-actions{flex:none}
  .px-stage>.legend-row{margin-top:10px}
  .px-graph{margin-top:10px;padding:10px 14px 12px;gap:12px}
  .px-graph[data-lead="rows"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 0}
  .px-graph[data-lead="rows"]>.px-rowsbox{grid-column:1/-1}
  .px-graph[data-lead="rows"]>.px-stripbox{padding-right:16px}
  .px-graph[data-lead="rows"]>.px-tl{align-content:start;border-left:1px solid var(--line);padding-left:16px}
  /* the "with the cache" label takes two lines in this narrower column for request 1 ("nothing cached yet"): its room is kept while the
     requests arrive, so the stage keeps its height (R7.9) */
  .px-graph[data-lead="rows"] .px-tlrow[data-k="w"] .px-tll{min-height:calc(2.7em + 2px);align-content:flex-end}
  #px-rows-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:end}
  #px-rows-cap .px-rcap{grid-column:1}
  #px-rows-cap .px-replay{grid-column:2;grid-row:2;margin-top:0;white-space:nowrap}
  .px-rows{gap:2px}
  /* while the requests of part 6 arrive and after each memory pick, the line under them changes between one line and two (the last
     request's summary): two lines kept, so the stage keeps its height (R7.9) */
  .px-rows-apps+.px-sum{min-height:2.9em}
  .px-row{padding-top:1px;padding-bottom:1px}
  .px-stage>.px-scope{margin:8px 0 4px}
  .px-metrics{margin-top:8px}
  .px-metrics .metric .v{line-height:1.25}
  .px-metrics .metric .d{min-height:13px;line-height:1.1}
  /* the cached-tokens card's line takes two lines in Chinese for a hit ("… 个 block，每个 16 个 token") and one for a miss: two kept (R7.9) */
  html[lang^="zh"] .px-metrics .metric[data-k="hit"] .sub{min-height:2.7em}
  /* parts 3 and 4: the line under the strip takes two lines when some computed blocks hold tokens cached after another prefix (part 4's
     levers): two kept, with the parts' line under them (R7.9) */
  .px-graph[data-focus="strip"] .px-strip-foot{min-height:calc(4.35em + 2px)}
  /* Scenarios: in the strip's narrower column the parts' line takes two lines for the multi-turn chat: two kept (R7.9) */
  #px-app:has(#px-rail [data-preset]) .px-graph[data-lead="rows"] .px-strip-foot .muted{min-height:2.9em}
  .px-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
#px-sum,#px-strip-cap,#px-tl-cap,#px-metrics .sub,#px-mathbody .px-mlead{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 3, 4 and 6 still ran 10–44 px past the stage
   (English 17–51). The legend, the figure, the scope line, the metric cards and Show the math sit 2–4 px closer to what is above
   them, the figure's padding and gaps are 8 px, and the request rows lose their 3 px of vertical padding. In English, whose legend
   takes two lines, it sits 4 px under the head (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .px-stage>.legend-row{margin-top:6px}
  .px-graph{margin-top:6px;padding:8px 14px 8px;gap:8px}
  .px-graph[data-lead="rows"]{gap:8px 0}
  .px-cap{margin-bottom:4px}
  .px-row{padding-top:0;padding-bottom:0}
  .px-stage>.px-scope{margin:4px 0 2px}
  .px-metrics{margin-top:6px}
  .px-stage>details.math{margin-top:6px;padding-top:6px}
  html[lang="en"] .px-stage>.legend-row{margin-top:4px}
}}
/* refit step 2 (2026-10-24): at 700 px tall or less (1366 × 650) parts 1, 2 and 7 still ran 18 px past the stage (English 22). The
   space above the legend, the figure's padding and the gaps between its blocks, and the space round the scope line, above the cards
   and above the math are smaller (parts 3, 4 and 6 still run past) */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){@container (min-width:736px){
  .px-stage>.legend-row{margin-top:4px}
  .px-graph{padding-top:4px;padding-bottom:4px;gap:6px}
  .px-graph[data-lead="rows"]{gap:6px 0}
  .px-stage>.px-scope{margin:2px 0 2px}
  .px-metrics{margin-top:4px}
  .px-stage>details.math{margin-top:4px;padding-top:4px}
}}

/* ---------- Product capstone lab (prefix pdz-) ----------
   Colours: red = the component during which the time passes the budget, an answer shown before it is checked, a design that misses a
   goal (failure, R5.11); green = within budget (success). Everything else is grayscale: the model's queue + prefill dark, the other
   components mid-grey, decode light with a tick per token, the hold for the output check hatched, each check dark; the large model's GPUs
   dark, the small model's light, the output checks hatched, the small model's GPUs on hard messages red. Blue, amber and violet are not
   used (they mean weights, KV cache and runtime overhead elsewhere). */
.pdz-app .stage-head>div:first-child{min-width:0}
.pdz-st-title{font-weight:680;font-size:var(--fs-stage);line-height:1.3;min-height:2.6em}
.pdz-app [data-tipx]{cursor:help}
.pdz-app [data-jump],.pdz-app button[data-tipx]{cursor:pointer}
.pdz-app [hidden]{display:none!important}
.pdz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pdz-main{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.pdz-main>.pdz-blk{order:2}.pdz-main>#pdz-trace{order:0}
.pdz-main>#pdz-metrics{order:3;margin-top:0}.pdz-main.pdz-mup>#pdz-metrics{order:1}
.pdz-blk{border:1px solid transparent;border-radius:8px;padding:10px 12px;background:var(--surface-2);min-width:0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.pdz-ch-t{font-size:var(--fs-cap);font-weight:620;line-height:1.35;margin-bottom:6px}
.pdz-svg{display:block;width:100%;height:auto;overflow:visible}
.pdz-svg text{font-family:var(--font-mono);fill:var(--ink-2);font-size:var(--fs-label)}
.pdz-svg .pdz-rl{fill:var(--ink);font-family:var(--font-ui);font-size:var(--fs-label)}
.pdz-row.on .pdz-rl{font-weight:700}
.pdz-row .pdz-hit{fill:transparent}
.pdz-row.on .pdz-hit{fill:var(--sunken)}
.pdz-row:focus{outline:none}.pdz-row:focus .pdz-hit{fill:var(--sunken)}
.pdz-bar.cmp{fill:var(--ink-3)}
.pdz-bar.mdl{fill:var(--ink)}
.pdz-bar.dec{fill:var(--line-2)}
.pdz-bar.hold{fill:url(#pdz-hatch);stroke:var(--ink-2);stroke-width:1}
.pdz-hb{fill:var(--surface-2)}.pdz-hp{stroke:var(--ink-3);stroke-width:2}
.pdz-bar.chk{fill:var(--ink)}
.pdz-bar.red{fill:var(--c-oom)!important;stroke:none}
.pdz-tok{stroke:var(--ink-3);stroke-width:1}
.pdz-tok.full{stroke:var(--ink);stroke-width:1.6}
.pdz-goal{stroke:var(--ink-2);stroke-width:2;stroke-dasharray:6 3}
.pdz-vis{stroke:var(--ink);stroke-width:2.5}
.pdz-cur{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:2 2}
.pdz-ax{stroke:var(--line-2);stroke-width:1}
.pdz-svg .pdz-tk{font-size:var(--fs-mark);fill:var(--ink-3)}
.pdz-svg .pdz-gl{font-size:var(--fs-mark);fill:var(--ink-2)}
.pdz-svg .pdz-note{font-size:var(--fs-mark);fill:var(--ink-3);font-style:italic;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.pdz-svg .pdz-note.bad,.pdz-svg .pdz-dur.bad{fill:var(--c-oom);font-style:normal;font-weight:650}
.pdz-svg .pdz-dur{font-size:var(--fs-mark);fill:var(--ink-2)}
.pdz-leg{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 14px}
.pdz-leg>span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label)}
.pdz-sw{display:inline-block;width:14px;height:10px;border-radius:2px;flex:none;background:var(--ink-3)}
.pdz-sw-cmp{background:var(--ink-3)}.pdz-sw-mdl{background:var(--ink)}.pdz-sw-dec{background:var(--line-2);height:6px}
.pdz-sw-hold{background:repeating-linear-gradient(45deg,var(--ink-3) 0 2px,var(--surface-2) 2px 4px);border:1px solid var(--ink-2)}
.pdz-sw-dec{background:repeating-linear-gradient(90deg,var(--line-2) 0 3px,var(--ink-3) 3px 4px)}
.pdz-sw-chk{width:5px;height:12px;background:var(--ink)}
.pdz-sw-goal{height:0;width:14px;border-top:2px dashed var(--ink-2);background:none;transform:rotate(90deg)}
.pdz-sw-vis{width:3px;height:14px;background:var(--ink)}
.pdz-sw-bad{background:var(--c-oom)}
.pdz-sw-hit{background:repeating-linear-gradient(45deg,var(--line-2) 0 3px,var(--surface) 3px 6px);border:1px dashed var(--ink-3)}
.pdz-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.pdz-ib{min-width:32px;padding-left:0;padding-right:0}
.pdz-speed{display:inline-flex;align-items:center;gap:6px;flex:none}
.pdz-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.pdz-player .btn{height:30px;padding-top:0;padding-bottom:0}
/* the slider sits under the time axis, its ends at the axis' 0 and end (set by alignScrub); the play button keeps one width (P20, P22) */
.pdz-scrub{display:block;margin-top:3px}
.pdz-scrub input{display:block;width:100%;max-width:100%;height:24px}
.pdz-player #pdz-play{min-width:7.4em;justify-content:center}
.pdz-tbtns{margin:8px 0 4px}
/* prompt bar */
.pdz-pbar{display:flex;width:100%;height:30px;border-radius:4px;overflow:hidden;border:1px solid var(--line-2)}
/* every part prefill computes has the same colour as “computed in prefill”; the cached part is hatched; a thin gap separates the parts (P29) */
.pdz-ps{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;min-width:0;background:var(--ink-3)}
.pdz-ps+.pdz-ps{border-left:2px solid var(--surface)}
.pdz-ps.sys.hit{background:repeating-linear-gradient(45deg,var(--line-2) 0 3px,var(--surface) 3px 6px);color:var(--ink)}
.pdz-pl{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-label);margin-top:6px}
.pdz-pl>span{display:inline-flex;align-items:center;gap:6px}
/* fleet */
.pdz-fg{padding:6px 0;border-top:1px solid var(--line)}
.pdz-fg:first-of-type{border-top:none}
.pdz-fl{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-label);margin-bottom:4px}
.pdz-fl b{font-family:var(--font-mono);font-weight:650;white-space:nowrap}
.pdz-sqs{display:flex;flex-wrap:wrap;gap:2px}
.pdz-sq{display:block;width:11px;height:11px;border-radius:1.5px}
.pdz-sq.l{background:var(--ink)}.pdz-sq.s{background:var(--ink-3)}
.pdz-sq.f{background:repeating-linear-gradient(45deg,var(--ink-3) 0 1.5px,var(--surface) 1.5px 3px);box-shadow:inset 0 0 0 1px var(--ink-3)}
.pdz-sq.hard{background:var(--c-oom)}
.pdz-sqh{display:flex;flex-wrap:wrap;gap:2px;margin-left:4px}
.pdz-fkey{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:var(--fs-label);color:var(--ink-2);margin:0 0 4px}
.pdz-fkey>span{display:inline-flex;align-items:center;gap:5px}
.pdz-sqk{display:inline-block;width:11px;height:11px;border-radius:1.5px;background:var(--ink);flex:none}
.pdz-sqk.hard{background:var(--c-oom)}
.pdz-fh{margin-top:4px}
/* Scenarios and Settings: the prompt bar and the sizing sheet fold (P15) */
.pdz-more>summary{cursor:pointer;margin-bottom:0}
.pdz-more[open]>summary{margin-bottom:6px}
/* sizing sheet */
.pdz-tw{overflow-x:auto}
.pdz-tab{width:100%;border-collapse:collapse;font-size:var(--fs-label)}
.pdz-tab th,.pdz-tab td{text-align:left;padding:5px 6px;border-top:1px solid var(--line);vertical-align:top}
.pdz-tab tr:first-child th,.pdz-tab tr:first-child td{border-top:none}
.pdz-tab th{font-weight:600;white-space:nowrap}
.pdz-tab td.mono{text-align:right;white-space:nowrap;font-weight:650}
.pdz-tab td:nth-child(2){color:var(--ink-2)}
/* metrics, rail: four cards in one row, two by two on phones (P35) */
.pdz-app .pdz-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.pdz-app .pdz-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pdz-metrics .metric.pdz-mbad .v{color:var(--c-oom)}
/* what the ▲▼ lines are compared with, once above the cards (N13): the line sits in the gap above the cards and takes no room of its
   own, so the cards stay put when it comes and goes; the gap grows by 4 px (12 to 16) to hold it. The cards stay whole in the sticky
   stage (P15; the tightest case, part 7 with 10 million users in English at 1440x900, keeps 1.9 px) */
.pdz-main>#pdz-metrics{margin-top:4px}
.pdz-metrics{position:relative}
.pdz-metrics>.pdz-mvs{position:absolute;left:0;right:0;top:-14px;height:12px;font-size:var(--fs-mark);line-height:12px;white-space:nowrap;color:var(--ink-2);opacity:0;transition:opacity .35s;pointer-events:none}
.pdz-metrics>.pdz-mvs.on{opacity:1}
#pdz-ctls{display:grid;gap:15px}
/* the challenge readout: one line per goal (P32) */
.pdz-chg{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:3px 8px;font-size:var(--fs-cap);margin-top:10px;align-items:baseline}
.pdz-chg .mono{font-size:var(--fs-label)}
.pdz-chm{font-weight:700}
.pdz-chp{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.pdz-chp .progress{flex:1;margin:0}
.pdz-chp span{white-space:nowrap;color:var(--ink-2)}
.pdz-ok{color:var(--c-ok)}.pdz-bad{color:var(--c-oom)}
.pdz-prod li{margin-bottom:6px}
.pdz-sub{margin-top:6px}
/* show the math: a name column and a formula column; narrow boxes put the name above (R6.37) */
.pdz-mb{padding:8px 0;border-top:1px solid var(--line)}
.pdz-mb:first-child{border-top:none}
.pdz-mb p{margin:0 0 6px}
.pdz-mb .pdz-mb-res{color:var(--ink-2);font-size:var(--fs-label);margin-top:6px}
.pdz-eqs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 8px;align-items:baseline;container-type:inline-size;padding-block:.3em}
.pdz-eq-l{text-align:right;white-space:nowrap}
.pdz-eq-r{min-width:0;overflow-x:auto;padding-block:.3em}
@container (max-width:520px){.pdz-eqs{grid-template-columns:minmax(0,1fr)}.pdz-eq-l{text-align:left}}
@media (max-width:560px){.pdz-eqs{grid-template-columns:minmax(0,1fr)}.pdz-eq-l{text-align:left}}
/* dock */
.pdz-dk{position:relative;height:8px;border-radius:4px;background:var(--line);overflow:visible}
.pdz-dk i{display:block;height:100%;border-radius:4px;background:var(--ink-2)}
.pdz-dk b{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink)}
/* the stage title changes during a play; the picture under it must not move (N5). Phones: the badge always has its own row under the
   title. Wider screens: the badge stays right of the title, which wraps inside its two lines */
@media (max-width:760px){.pdz-st-title{font-size:var(--fs-ui)}.pdz-app .stage-head>div:first-child{flex:1 1 100%}}
@media (min-width:761px){.pdz-app .stage-head{flex-wrap:nowrap}.pdz-app .stage-head>.stage-actions{flex:none}}
@media (min-width:761px) and (max-width:1023px){.pdz-app .stage-head .status{white-space:normal;max-width:15em;line-height:1.15}}
.pdz-prod code{overflow-wrap:anywhere;word-break:break-all}
.pdz-app .seg-ctl[data-key="filt"]{flex-wrap:wrap}
.pdz-app .seg-ctl[data-key="filt"] button{flex:1 0 auto;min-width:2.8em}
/* R13: the three ways in words on the first row, the four chunk sizes two to a row below; a long name wraps inside its button */
.pdz-app .seg-ctl[data-key="filt"]{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.pdz-app .seg-ctl[data-key="filt"] button{grid-column:span 3;min-width:0;padding:6px 3px;font-size:var(--fs-label);line-height:1.3}
.pdz-app .seg-ctl[data-key="filt"] button[data-v="off"],.pdz-app .seg-ctl[data-key="filt"] button[data-v="after"],.pdz-app .seg-ctl[data-key="filt"] button[data-v="whole"]{grid-column:span 2}
@media (max-width:560px){.pdz-tab{font-size:var(--fs-label)}.pdz-tab th{white-space:normal;min-width:5.5em}.pdz-tab th,.pdz-tab td{padding:4px 4px}}
.pdz-eq1{grid-template-columns:minmax(0,1fr);margin:.2em 0 .6em;font-size:.85em}

/* ---------- a wide stage (polish round 5, 2026-10-17; the owner's B4: “动画播放面板被整体顶得靠下了”) ----------
   Part 8 (the message and the GPUs, nothing else) ran 85 px past the stage's 814 px at 1440 × 900 (English 107 px): the message,
   the metric cards and the GPUs stood one under the other, each across the whole stage. On a stage at least 736 px wide the
   message keeps the whole width at the top; under it the cards, two by two, sit on the left and the GPUs on the right, read in
   the same order as before (product-design.js marks part 8's layout with data-lay="tf"). The message's rows are drawn 21 px apart
   instead of 23 (wfSVG reads --pdz-rh; the ResizeObserver on #pdz-main draws it again when the stage's width changes), the player
   and the legend sit 4 and 2 px closer, and the cards take CONTRACT §19's compact line heights (value 1.25, change line 13 px), which
   every part's cards share. Phones and narrower stages are unchanged. */
@media (min-width:761px){@container (min-width:736px){
  #pdz-wf{--pdz-rh:21}
  .pdz-player{margin-top:6px}
  .pdz-leg{margin-top:6px}
  .pdz-main[data-lay="tf"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px}
  .pdz-main[data-lay="tf"]>#pdz-trace{grid-column:1/-1;grid-row:1}
  .pdz-main[data-lay="tf"]>#pdz-metrics{grid-column:1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));align-self:start}
  .pdz-main[data-lay="tf"]>#pdz-fleet{grid-column:2;grid-row:2;margin-top:4px}
  .pdz-metrics .metric .v{line-height:1.25}
  .pdz-metrics .metric .d{min-height:13px;line-height:13px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 7 and 8 still ran 48 and 30 px past the stage
   (English 40 and 27). The blocks' gap and padding and the form groups' and the table cells' vertical padding are smaller, and the
   waterfall's rows are drawn 19 px tall instead of 21 (wfSVG reads --pdz-rh; the rows' text keeps its size) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .pdz-main{gap:8px}
  .pdz-blk{padding:8px 12px}
  .pdz-fg{padding:4px 0}
  .pdz-tab th,.pdz-tab td{padding-top:4px;padding-bottom:4px}
  #pdz-wf{--pdz-rh:19}
}}

/* prompt-injection: the tools row, one task replayed (what the model reads beside what the agent does), the 100 tasks as cells,
   then the metric cards, compact, under the picture (R7.12). Colours (R5.6, R5.11): grayscale, hatching, outlines and dots; red only
   for the injected instruction and a harmful action, each with ⚠ or ✗ and a word beside it; green only for a goal met. */
.pin-stage .stage-head{align-items:center}
.pin-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.pin-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.pin-sub{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);margin-bottom:4px}
.pin-legend{margin-top:6px}
:where(html[lang^="zh"]) #pin-log-leg{font-size:var(--fs-mark)}   /* the log's key is 221 px wide: in Chinese its first line holds three marks only at the size it was fitted to */
.pin-legend>span{cursor:help;display:inline-flex;align-items:center}

/* ---------- the tools row ---------- */
.pin-tools{display:grid;gap:4px;min-width:0}
.pin-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pin-chip{display:inline-grid;gap:1px;border:1.5px solid var(--ink);border-radius:4px;padding:4px 8px;background:var(--surface);cursor:help;min-width:0}
.pin-chip code{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink)}
.pin-chip>span{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3}
.pin-chip.off{border-style:dashed;border-color:var(--ink-3);background:transparent}
.pin-chip.off code{text-decoration:line-through;color:var(--ink-3)}
.pin-chip.off>span{color:var(--ink-3)}
.pin-plus{color:var(--ink-3);font-weight:700}
.pin-tw{font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);min-height:1.4em}
.pin-tw.on{color:var(--ink);font-weight:650}

/* ---------- the replay: context beside actions. Each box gets one height per replay from the script (the whole replay, capped by
   max-height), so it does not jump while it plays (R7.9) and a short replay leaves no empty box; the newest block scrolls into view ---------- */
.pin-rp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;min-width:0}
.pin-ctx-w,.pin-log-w{min-width:0;display:flex;flex-direction:column}
.pin-ctx{max-height:286px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding:6px;border:1px solid transparent;border-radius:8px;background:var(--surface-2);cursor:help;outline-offset:2px}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.pin-blk{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px;align-items:baseline;padding:5px 7px;border:1px solid var(--ink-3);border-radius:3px;background:var(--surface);font-size:var(--fs-label);line-height:1.4;flex:none}
.pin-role{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.pin-bt{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.pin-blk.un{border-color:var(--line);background:repeating-linear-gradient(135deg,var(--line-2) 0 1px,var(--surface) 1px 6px)}
.pin-blk.pv{border:1.5px dotted var(--ink-2)}
.pin-blk.call{background:var(--surface-2);border-color:var(--line)}
.pin-blk.call .pin-bt{font-family:var(--font-mono);font-size:var(--fs-label)}
.pin-blk.call.inj{border-left:3px dashed var(--ink)}
.pin-blk.held{border-style:dashed;color:var(--ink-3)}
.pin-blk.held .pin-bt{color:var(--ink-2);font-style:italic}
.pin-blk.ans{border-color:var(--ink-2)}
.pin-blk.wait{display:block;border:1px dashed var(--line);color:var(--ink-3);font-size:var(--fs-label)}
mark.pin-hid{background:var(--c-oom-soft);color:var(--c-oom);font-weight:600;padding:1px 3px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pin-tag{color:var(--c-oom);font-weight:700;white-space:nowrap}
/* the harmful action, where it happens: the assistant's call in the context and its line in the log */
.pin-blk.harm{border:1.5px solid var(--c-oom);background:var(--c-oom-soft)}
.pin-blk.call.inj.harm{border-left:3px dashed var(--c-oom)}
.pin-blk.harm .pin-bt{color:var(--ink)}
.pin-hx{background:var(--c-oom-soft);border-radius:2px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* the moment the replay reaches a red mark: one short pulse */
@keyframes pinHot{0%{box-shadow:0 0 0 0 var(--c-oom)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
.pin-blk.harm.pin-now,.pin-li.harm.pin-now,.pin-hx.pin-now,.pin-now mark.pin-hid{animation:pinHot 1s ease-out 1}
.pin-ctx.pin-one{display:block}
.pin-stream{margin:0;font-size:var(--fs-label);line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
.pin-tok{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.pin-more{color:var(--ink-3)}

.pin-log{list-style:none;margin:0;padding:6px;max-height:286px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.pin-li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;align-items:baseline;padding:5px 7px;border:1px solid var(--line-2);border-radius:3px;font-size:var(--fs-label);line-height:1.4;flex:none}
.pin-li>b{font-weight:700;color:var(--ink-2)}
.pin-li code{font-family:var(--font-mono);font-size:var(--fs-label);overflow-wrap:anywhere;background:var(--surface)}   /* the log is a soft panel (var(--surface-2)), so a code chip in it is var(--surface) (精装修 step 2) */
.pin-li.blk>b,.pin-li.no>b{color:var(--ink)}
.pin-li.harm{border:1.5px solid var(--c-oom);background:var(--c-oom-soft)}
.pin-li.harm>b{color:var(--c-oom)}
.pin-li.inj{border-left:3px dashed var(--ink)}
.pin-li.none{display:block;border-style:dashed;color:var(--ink-3)}
.pin-ms{font-weight:700;margin-right:5px;color:var(--ink-2)}
.pin-ms.blk{color:var(--ink)}
.pin-ms.harm{color:var(--c-oom)}

/* ---------- legend swatches (the same marks as in the picture) ---------- */
.sw.pin-sw-tr{background:var(--surface);border:1px solid var(--ink-3)}
.sw.pin-sw-un{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1px,var(--surface) 1px 3.5px);border-color:var(--line)}
.sw.pin-sw-hid{background:var(--c-oom-soft);border:1.5px solid var(--c-oom)}
.sw.pin-sw-hx{background:var(--c-oom-soft);border:1.5px solid var(--c-oom);border-radius:2px}
.sw.pin-sw-pv{background:var(--surface);border:1.5px dotted var(--ink-2)}
.sw.pin-sw-inj{width:14px;background:var(--surface-2);border:1px solid var(--line);border-left:3px dashed var(--ink);border-radius:0}
.sw.pin-sw-done{background:var(--ink-3);border-color:var(--ink-3)}
.sw.pin-sw-fail{background:var(--surface);border:1px solid var(--ink-3)}
.sw.pin-sw-poi{background:var(--surface);border:2px solid var(--ink)}
.sw.pin-sw-harm{background:var(--c-oom);border:2px solid var(--ink)}
.sw.pin-sw-ask{background:radial-gradient(circle,var(--ink) 0 2.3px,transparent 2.6px),var(--surface);border:1px solid var(--ink-3)}
.sw.pin-sw-smp{background:var(--surface);border:1px solid var(--ink-3);outline:2px solid var(--ink);outline-offset:1px;margin-left:3px}

/* ---------- the player ---------- */
.pin-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.pin-play{min-width:92px}
.pin-speed button{font-size:var(--fs-label);padding:3px 9px}
.pin-scrub{flex:1 1 140px;min-width:120px}

/* ---------- the 100 tasks ---------- */
.pin-gridw{display:grid;gap:4px;min-width:0}
/* H5 (the owner, 2026-10-09): a hairline between the stage’s three blocks: the tools, the replay of one task, the 100 tasks */
.pin-graph>.pin-tools:not(:empty)~#pin-rp-cap,.pin-graph>.pin-rp~.pin-gridw{border-top:1px solid var(--line);padding-top:12px}
.pin-grid{cursor:help;outline-offset:3px;border-radius:2px;min-width:0}
.pin-strips{display:grid;gap:6px}
.pin-strip{display:grid;gap:3px;min-width:0}
.pin-sl{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3}
.pin-cells{display:flex;flex-wrap:wrap;gap:3px}
.pin-c{position:relative;display:block;width:12px;height:12px;box-sizing:border-box;border:1px solid var(--ink-3);border-radius:2px;background:var(--surface)}
.pin-c.done{background:var(--ink-3)}
.pin-c.poi{border:2px solid var(--ink)}
.pin-c.harm{background:var(--c-oom)}
.pin-c.ask::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--surface)}
.pin-c.smp{outline:2px solid var(--ink);outline-offset:1px}
.pin-c.wait{background:var(--surface-2);border-color:var(--line-2)}

/* ---------- metric cards and the math: the cards sit under the picture and stay small (R7.12). The replay, the status chip and
   the 100 tasks show a change first; at 1440 × 900 the cards are in the sticky stage's own scroll, under the 100 tasks ---------- */
.pin-stage>.pin-metrics{margin:10px 0 4px;gap:6px}
.pin-metrics .metric{padding:5px 8px 4px}
.pin-metrics .metric .k{line-height:1.14}   /* 12 px (kit polish r2, M1; was 10.5 px), each line as tall as before */
.pin-metrics .metric .v{font-size:var(--fs-body);line-height:1.2;margin-top:1px}
.pin-metrics .metric .sub{font-size:var(--fs-mark);line-height:1.3}
.pin-metrics .metric .d{min-height:13px;line-height:1.1}
.metric.pin-bad .v{color:var(--c-oom)}
.pin-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}
.pin-fx{margin:8px 0 10px;overflow-x:auto}

/* ---------- rail ---------- */
.pin-lv{margin-top:6px}
.pin-tri{margin:6px 0 8px;padding-left:18px}
.pin-tri li{margin-bottom:4px}
.pin-teams{margin:6px 0 8px;padding-left:18px}
.pin-teams li{margin-bottom:7px}
.pin-remlist li{margin-bottom:8px}
.pin-mt{margin-top:12px}
.pin-ch-res{scroll-margin-top:120px}
.pin-app .goal.pin-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.pin-app .goal.pin-goal span:last-child{white-space:normal}
.goal.pin-over b{color:var(--c-oom)}
.pin-app .inline-ctl .seg-ctl{flex-wrap:wrap}

/* ---------- settings ---------- */
.pin-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.pin-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.pin-grp .ctl>.lbl{display:block}
.pin-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.pin-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.pin-prod li{margin-bottom:6px}
.pin-prod code,.pin-prod a{overflow-wrap:anywhere;word-break:break-word}
.pin-out{margin-top:6px}

/* ---------- the dock's mini bar: tasks done, harmful ---------- */
.pin-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden;display:flex}
.pin-dk i{display:block;height:100%}
.pin-dk i.dn{background:var(--ink-3)}
.pin-dk i.hm{background:var(--c-oom)}

/* side by side while the stage has room (1440 has it); stacked below that */
@container (max-width:540px){
  .pin-rp{grid-template-columns:minmax(0,1fr)}
  .pin-ctx{max-height:200px}
  .pin-log{max-height:176px}
}
@media (max-width:760px){
  /* phones: the same order as wide screens (the replay, the 100 tasks, then the cards); each legend sits under what it labels (R5.9) */
  .pin-graph{padding:10px 10px 12px}
  .pin-play{min-width:84px}
  .pin-scrub{flex-basis:100%}
  .pin-blk{grid-template-columns:54px minmax(0,1fr)}
  /* the three tools fit one row: the names stay, what each brings is in the chip's tooltip and the warning line */
  .pin-chip>span{display:none}
  .pin-chip{padding:2px 5px}
  .pin-chip code{font-size:var(--fs-mark)}
  .pin-chips{gap:4px}
  .pin-tools{gap:2px}
}
/* B4 (the owner: "the player was pushed down, I did not see there was more below"): on a wide desktop stage (>= 736 px) the whole
   stage fits one 1440x900 screen with nothing cut or folded. The tools sit at the left of the replay's caption and player (a
   hairline at the right of the tools and under them, H5); the model's context gets the wider column and its blocks (and the log's lines) are packed
   tighter, so a replay needs about 100 px less; each row of the 100 tasks has its name at the left of its cells; the line on the
   assumed rates sits at the right of "Show the math"; the spacing is tighter. The context box keeps its rule (one height per
   replay, the newest block in view when the replay is longer than the box); on a desktop its cap follows the screen's height:
   at 900 px 300 px in Chinese (the whole replay of every guided part) and 286 px in English, whose legends and player take
   more lines; never under 164 / 160 px. (Refit step 2, 2026-10-24: the top bar scrolls away on a lab page, so the stage is 58 px
   taller and the box takes those 58 px: 240 px in English at 900 px before; at 730 px 188 px in Chinese instead of 164.) */
@media (min-width:761px){.pin-stage{padding-block:12px}}   /* the stage is its own container, so this one is a plain media rule */
@media (min-width:761px){
@container (min-width:736px){
  .pin-stage .stage-graph{margin-top:6px}
  .pin-graph{padding:10px 14px;row-gap:6px;column-gap:0;grid-template-columns:max-content minmax(0,1fr)}
  .pin-graph>*{grid-column:1/-1}
  /* the tools block keeps its hairlines on the sides that face the replay: at its right (the caption and the player) and under it (the context) */
  .pin-graph>.pin-tools:not(:empty){grid-column:1;grid-row:1 / span 2;padding:0 14px 4px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);align-self:stretch;gap:3px}
  .pin-graph>.pin-tools:not(:empty)~#pin-rp-cap{grid-column:2;grid-row:1;border-top:0;padding:0 0 0 14px}
  .pin-graph>.pin-tools:not(:empty)~.pin-player{grid-column:2;grid-row:2;padding-left:14px;align-self:end;gap:6px}
  .pin-play{min-width:80px}
  .pin-scrub{flex:1 1 96px;min-width:96px}
  .pin-rp{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:10px}
  .pin-ctx,.pin-log{gap:3px;padding:4px}
  .pin-blk,.pin-li{padding:3px 6px;line-height:1.35}
  .pin-graph>.pin-rp~.pin-gridw{padding-top:8px}
  .pin-ctx{max-height:clamp(160px,calc(100vh - 602px),286px)}
  html[lang^="zh"] .pin-ctx{max-height:clamp(164px,calc(100vh - 542px),300px)}
  .pin-legend{row-gap:3px}
  .pin-strips{grid-template-columns:max-content minmax(0,1fr);column-gap:10px;row-gap:6px}
  .pin-strip{grid-column:1/-1;grid-template-columns:subgrid;align-items:start}
  .pin-stage>.pin-metrics{margin:8px 0 0;gap:5px}
  .pin-metrics .metric{padding-inline:6px}
  /* the scope line floats at the right of the math drawer's summary (its text level with the summary's); the math opens below both */
  .pin-stage>.pin-scope{float:right;margin:20px 0 0 16px;max-width:60%}
  .pin-stage>details.math{margin-top:8px}
  .pin-stage>details.math>.mathbody{clear:both}
}}
/* phones: the context and the log were boxes 200 and 176 px tall that scrolled inside the stage; they now show the whole replay
   (fitBox gives each box the replay's full height up front, so the stage still does not jump while it plays, R7.9) */
@media (max-width:760px){.pin-ctx,.pin-log{max-height:none}}
@media (prefers-reduced-motion:reduce){.pin-dk i{transition:none}.pin-blk.harm.pin-now,.pin-li.harm.pin-now,.pin-hx.pin-now,.pin-now mark.pin-hid{animation:none}}
/* the four sending rules are long: two per row, so no label is clipped in the narrow Settings column or the task card */
.pin-app .seg-ctl[data-key="rule"],.pin-app .seg-ctl[data-key="chR"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pin-app .seg-ctl[data-key="rule"] button,.pin-app .seg-ctl[data-key="chR"] button{line-height:1.35;overflow-wrap:anywhere}

/* Show the math in short blocks (the owner, 2026-10-09): a hairline between blocks; a chain's “=” signs in one column */
.pin-mb{padding:8px 0 10px}
.pin-mb+.pin-mb{border-top:1px solid var(--line)}
.pin-mb>p{margin:0 0 6px}
.pin-mb>p:last-child{margin-bottom:0}
.pin-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.pin-eq-l{text-align:right}
/* on a phone a chain with a named quantity puts the name on its own line, then “= …” lines, so the chain fits its box instead of scrolling sideways */
@media (max-width:560px){.pin-eqs-nm{grid-template-columns:max-content max-content}.pin-eqs-nm>.pin-eq-l{grid-column:1/-1;text-align:left}.pin-eqs-nm>.pin-eq-l:empty{display:none}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) the English stage still ran 13 px past at 1536 × 730, its
   context box already at the 160 px floor (Chinese fits). In English the figure's padding and the gaps between its rows are 2 px
   smaller, and so are the space above the 100 tasks and above the cards; where the window has room for more the box takes those
   14 px (212 px at 800 px instead of 198) (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  html[lang="en"] .pin-graph{padding-top:8px;padding-bottom:8px;row-gap:4px}
  html[lang="en"] .pin-graph>.pin-rp~.pin-gridw{padding-top:6px}
  html[lang="en"] .pin-stage>.pin-metrics{margin-top:6px}
  html[lang="en"] .pin-ctx{max-height:clamp(160px,calc(100vh - 588px),286px)}
}}

/* quantization: one block of 32 weights on a number line (before / after rounding, the grid of stored values, the weights that
   become 0), the schemes as rows (bits per weight, output error, same pick as BF16), and the serving view (step times split into
   reading weights / KV cache / compute, and the weights against 70 GiB lines). Colours (R5.6): weights blue, KV cache amber,
   red only for the outlier that wipes out its block (R5.11) and the challenge's over-budget memory; green only for the goal. */
.qz-stage .stage-head{align-items:center}
.qz-stage .stage-head>div:first-child{min-width:0}
.qz-stage .meter-title{overflow-wrap:anywhere}
#qz-ctl-sch-wrap .seg-ctl button{padding:7px 2px}
.qz-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.qz-graph>[hidden]{display:none!important}
.qz-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
.qz-phone:empty{display:none}
@media (min-width:761px){.qz-phone{display:none}}
.qz-graph>.qz-blockv:not([hidden])~.qz-chart:not([hidden]){border-top:1px solid var(--line);padding-top:10px}

/* ---------- the block of weights ---------- */
.qz-blockv{min-width:0;display:grid;gap:5px}
.qz-tp{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;min-width:0}
.qz-tp:empty{display:none}
.qz-phs{display:flex;flex-wrap:wrap;gap:4px}
.qz-ph{font:inherit;font-size:var(--fs-label);padding:3px 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.qz-ph:hover{border-color:var(--ink-3);color:var(--ink)}
.qz-ph.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.qz-tbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qz-speed{display:inline-flex;gap:6px;align-items:center}
.qz-speed-l{font-size:var(--fs-label);color:var(--ink-3)}
.qz-speed .seg{margin:0}
.qz-svg{display:block;width:100%;height:auto;overflow:visible;max-width:100%}
.qz-plot{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.qz-ax{stroke:var(--line);stroke-width:1}
.qz-zero{stroke:var(--ink-3);stroke-width:1}
.qz-yl,.qz-xl,.qz-yt{font-size:var(--fs-mark);fill:var(--ink-3);font-family:var(--font-mono)}
.qz-xl,.qz-yt{font-family:var(--font-ui)}
/* round 1 polish (P6, P9): the grid of each block, the half step around 0 that rounds to 0, the part too dense to draw, and the sum
   one weight carries through each phase */
.qz-band{fill:var(--ink);fill-opacity:.08;stroke:none}
.qz-hl{stroke:var(--ink-3);stroke-width:1}
.qz-dense{stroke:none;opacity:.55}
.qz-gtl{font-size:var(--fs-mark);fill:var(--ink-2);font-family:var(--font-mono);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.qz-call{font-size:var(--fs-mark);font-weight:650;fill:var(--ink);font-family:var(--font-mono)}
/* round 1 polish check (N3): the callout sits on a backing of its own, so the points under it do not show through */
.qz-callbg{fill:var(--surface);fill-opacity:.94;stroke:var(--line-2);stroke-width:1}
.qz-seg{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1}
.qz-seg2{fill:var(--sunken)}
.qz-grid{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.qz-mv{stroke:var(--ink-3);stroke-width:1.2}
.qz-orig{fill:none;stroke:var(--c-weights);stroke-width:1.6}
.qz-orig.qz-set{stroke-width:2.4}
.qz-q{fill:var(--c-weights);stroke:none}
.qz-x{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.qz-x.qz-xs{stroke-width:1.6}
.qz-ol{font-size:var(--fs-mark);fill:var(--ink-2);font-family:var(--font-mono)}
.qz-orig.qz-red{stroke:var(--c-oom)}
.qz-q.qz-red{fill:var(--c-oom)}
.qz-mv.qz-red{stroke:var(--c-oom)}
.qz-redt{fill:var(--c-oom);font-weight:650}
.qz-legend{flex-wrap:wrap;gap:4px 14px}
.qz-blockv .qz-legend{margin-top:0}
.qz-sw{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:5px;vertical-align:-2px;font-style:normal;text-align:center;line-height:12px;font-size:var(--fs-label)}
.qz-sw-o{border:1.6px solid var(--c-weights);border-radius:50%;box-sizing:border-box}
.qz-sw-q{background:var(--c-weights);border-radius:50%;transform:scale(.8)}
.qz-sw-x{color:var(--ink);font-weight:700}
.qz-sw-g{border-top:1px dashed var(--ink-3);height:0;width:14px;vertical-align:3px;border-radius:0}
.qz-sw-r{border:1.6px solid var(--c-oom);border-radius:50%;box-sizing:border-box}
.qz-sw-set{border:2.6px solid var(--c-weights);border-radius:50%;box-sizing:border-box}
.qz-sw-mv{width:0;border-left:1.5px solid var(--ink-3);border-radius:0;margin:0 10px 0 5px}
.qz-sw-band{background:var(--ink);opacity:.14}
.qz-sw-hatch{background:repeating-linear-gradient(45deg,var(--ink-3) 0 1px,transparent 1px 4px);opacity:.75}
.qz-sw-b{background:var(--surface-2);border:1px solid var(--line-2)}
.qz-sw-w{background:var(--c-weights)}
.qz-sw-kv{background:var(--c-kv)}
.qz-sw-c{background:var(--ink-3)}
.qz-sw-long{border:2px solid var(--ink);box-sizing:border-box}
.qz-sw-gl{border-left:2px dashed var(--ink);width:0;height:12px;border-radius:0}
.qz-note{color:var(--ink-2);line-height:1.45;min-height:1.45em;display:grid}
.qz-note:empty{display:none}
/* the note of every phase sits in one cell and only the current one shows, so the height holds through the replay (R7.9) */
.qz-nt{grid-area:1/1;min-width:0}
.qz-nt.off{visibility:hidden}

/* ---------- the schemes ---------- */
.qz-chart{min-width:0}
.qz-crows{display:grid;gap:2px}
.qz-crow,.qz-chdr{display:grid;grid-template-columns:minmax(0,1.6fr) 44px minmax(60px,2fr) 50px 58px;gap:8px;align-items:center;padding:2px 6px;border-radius:4px;font-size:var(--fs-label);line-height:1.35;min-width:0}
/* the columns' names (P13) */
.qz-chdr{align-items:end;padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid var(--line);border-radius:0;font-size:var(--fs-mark);color:var(--ink-3);line-height:1.25}
.qz-chdr>span{min-width:0}
.qz-chdr>span:nth-child(2),.qz-chdr>span:nth-child(4){text-align:right}
.qz-chdr>span:nth-child(3){grid-column:span 2}
.qz-crow.me{background:var(--surface-2);outline:1px solid var(--line-2)}
.qz-cl{color:var(--ink);min-width:0;overflow-wrap:anywhere;line-height:1.3}
.qz-cl em{font-style:normal;font-size:var(--fs-mark);color:var(--ink-3);margin-left:6px;white-space:nowrap}
.qz-cb,.qz-cv,.qz-ca{font-family:var(--font-mono);font-size:var(--fs-label);text-align:right;color:var(--ink-2);white-space:nowrap}
.qz-crow.me .qz-cl{font-weight:650}
.qz-ct{position:relative;height:12px;background:var(--surface-2);border-radius:2px;min-width:0}
.qz-ct i{position:absolute;left:0;top:0;bottom:0;background:var(--c-weights);border-radius:2px;transition:width .25s ease-out}
@media (max-width:480px){.qz-crow,.qz-chdr{grid-template-columns:minmax(0,1.4fr) 36px minmax(36px,1.2fr) 44px 46px;gap:5px;padding:3px 2px;font-size:var(--fs-label)}.qz-chdr{font-size:var(--fs-mark)}.qz-cl em{display:block;margin-left:0}}

/* ---------- step times and memory ---------- */
.qz-serve{display:flex;flex-direction:column;gap:14px;min-width:0}
.qz-serve.qz-memfirst .qz-mem{order:-1}
.qz-serve>*+*{border-top:1px solid var(--line);padding-top:12px}
.qz-serve.qz-memfirst .qz-mem{border-top:0;padding-top:0}
.qz-serve.qz-memfirst .qz-steps{border-top:1px solid var(--line);padding-top:12px}
.qz-steps{display:grid;gap:10px;min-width:0}
.qz-sk{display:grid;gap:3px;min-width:0}
.qz-skh{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:var(--fs-label)}
.qz-skh b{font-weight:650;color:var(--ink)}
.qz-skh span{font-family:var(--font-mono);color:var(--ink)}
.qz-skh em{font-style:normal;color:var(--ink-3);margin-left:8px}
.qz-skr{display:grid;grid-template-columns:76px minmax(0,1fr) 56px;gap:8px;align-items:center;font-size:var(--fs-label)}
.qz-skl{color:var(--ink-3)}
.qz-skr.long .qz-skl{color:var(--ink);font-weight:650}
.qz-skt{position:relative;height:12px;background:var(--surface-2);border-radius:2px;display:flex;overflow:hidden;min-width:0}
.qz-skr.long .qz-skt{outline:2px solid var(--ink);outline-offset:0}
.qz-skt i{display:block;height:100%;flex:none;transition:width .25s ease-out}
.qz-w{background:var(--c-weights)}
.qz-kv{background:var(--c-kv)}
.qz-c{background:var(--ink-3)}
.qz-skv{font-family:var(--font-mono);text-align:right;color:var(--ink-2);white-space:nowrap}
.qz-mem{min-width:0}
.qz-mrows{display:grid;gap:5px}
.qz-mrow{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;grid-template-areas:"l t v" ". n n";gap:2px 8px;align-items:center;padding:3px 6px;border-radius:4px;font-size:var(--fs-label)}
.qz-mrow.me{background:var(--surface-2);outline:1px solid var(--line-2)}
.qz-ml{grid-area:l;color:var(--ink)}
.qz-mrow.me .qz-ml{font-weight:650}
.qz-mt{grid-area:t;position:relative;height:12px;background:var(--surface-2);border-radius:2px;min-width:0}
.qz-mt i{position:absolute;left:0;top:0;bottom:0;background:var(--c-weights);border-radius:2px;transition:width .25s ease-out}
.qz-mt i.qz-kv{background:var(--c-kv);border-radius:0 2px 2px 0}
.qz-gl{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--ink);z-index:1}
.qz-mv2{grid-area:v;font-family:var(--font-mono);text-align:right;color:var(--ink);white-space:nowrap}
.qz-mn{grid-area:n;color:var(--ink-3);font-size:var(--fs-mark)}
.qz-gls{position:relative;height:16px;margin:2px 0 0 110px;margin-right:78px}
.qz-gls span{position:absolute;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-mark)}
/* a wide stage puts each format's GPUs on its bar's line (P35) */
@container (min-width:640px){.qz-mrow{grid-template-columns:96px minmax(0,1fr) 64px 176px;grid-template-areas:"l t v n";padding:2px 6px}.qz-mn{white-space:nowrap}.qz-gls{margin-right:262px}}

/* ---------- rail ---------- */
.qz-lead{margin:6px 0 4px}
.qz-lv .levers{margin-top:6px}
.qz-ic{margin-top:8px}
.qz-saved{margin:6px 0 0;color:var(--ink-3)}
/* part 2: the three steps of quantization, in the card's own font (S1) */
.qz-steps3{margin:6px 0 8px;padding-left:20px;display:grid;gap:4px;font:inherit}
.qz-steps3 li{line-height:1.5}
.qz-rem{margin:0 0 10px;padding-left:18px;display:grid;gap:8px}
.qz-rem li{line-height:1.5}
.qz-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.qz-goal.qz-over b{color:var(--c-oom)}
.qz-goal.met b{color:var(--c-ok)}
.qz-ch-sub{margin-top:8px}
.qz-ch-res .cmp{margin-top:10px}

/* ---------- Settings ---------- */
.qz-grp{border-top:1px solid var(--line-2);padding-top:8px;margin-top:4px}
.qz-gh{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);margin-bottom:4px}
.qz-asm{margin:0;padding-left:16px;display:grid;gap:3px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.qz-asm b{color:var(--ink);font-weight:600}
.qz-prod{padding-left:18px;display:grid;gap:6px;min-width:0}
.qz-prod code,.qz-prod a{overflow-wrap:anywhere}
.qz-app .t.qz-td,.pop .t.qz-td{cursor:help}

/* ---------- Show the math: short blocks, a chain's “=” signs in one column ---------- */
.qz-mb{padding:8px 0 10px}
.qz-mb+.qz-mb{border-top:1px solid var(--line)}
.qz-mb>p{margin:0 0 6px}
.qz-mb>p:last-child{margin-bottom:0}
.qz-eqs{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;align-items:baseline;column-gap:.4em;row-gap:.25em;overflow-x:auto;padding-block:.3em;margin:4px 0 8px;font-size:var(--fs-stage);line-height:1.3}
.qz-eq-l{text-align:right}
@media (max-width:560px){.qz-eqs-nm{grid-template-columns:max-content max-content}.qz-eqs-nm>.qz-eq-l{grid-column:1/-1;text-align:left}.qz-eqs-nm>.qz-eq-l:empty{display:none}}

/* ---------- the mini result bar (dock) ---------- */
.qz-dk{position:relative;height:10px;background:var(--surface-2);border-radius:2px;min-width:60px}
.qz-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--c-weights);border-radius:2px}
.qz-dk b{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--ink)}
/* up to five cards share the row: the change note under a value wraps inside its card */
.qz-metrics .metric .d{white-space:normal;overflow-wrap:anywhere}
/* the stage shows two to five cards (P3, P32): as many columns as cards, four in two rows on a narrow stage */
.qz-metrics[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.qz-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.qz-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.qz-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 4 and 7 still ran 36 px past the stage (English 54).
   The figure's padding and gap, the space above the table, its header's padding and the gaps between its rows are smaller. In English,
   where the note under the block takes two lines, the block is drawn 188 px high instead of 206 with the table under it (drawBlock
   reads --qz-bh; it is drawn for its height, so its text keeps its size) (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .qz-graph{padding:8px 14px 8px;gap:8px}
  .qz-graph>.qz-blockv:not([hidden])~.qz-chart:not([hidden]){padding-top:6px}
  .qz-crows{gap:0}
  .qz-chdr{padding-bottom:2px}
  html[lang="en"] #qz-blockv{--qz-bh:188}
}}

/* RAG failure lab */
.rgf-app [hidden]{display:none!important}
.rgf-stage{container-type:inline-size}
.rgf-head{align-items:flex-start;gap:6px 10px;flex-wrap:wrap}
.rgf-st-title{font-weight:650;font-size:var(--fs-stage);min-width:0;line-height:1.35;flex:1 1 200px}
.rgf-head .status{justify-content:center;box-sizing:border-box}
.rgf-pan{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;min-width:0}
.rgf-pt{font-weight:600;font-size:var(--fs-cap);line-height:1.35;margin-bottom:6px;min-width:0}
/* the run's controls in one row on wide stages: the run, Play, the speed, Replay, the progress (round-1 polish P2) */
.rgf-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.rgf-qrow{display:flex;align-items:center;gap:4px 8px;margin:0;flex:1 1 150px;min-width:0}
.rgf-ql{font-size:var(--fs-label);color:var(--ink-2)}
.rgf-rsel{flex:1 1 120px;min-width:0;max-width:100%;font:inherit;font-size:var(--fs-cap);padding:5px 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink)}
.rgf-rsel:disabled{opacity:.75}
.rgf-transport{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0;flex:0 1 auto;min-width:0}
.rgf-transport .seg-ctl,.rgf-transport .inline-ctl,.rgf-transport .ctl{margin:0}
.rgf-transport .btn.sm,.rgf-transport .seg-ctl{height:32px;box-sizing:border-box}
.rgf-transport .btn.sm{padding-top:0;padding-bottom:0;line-height:1.2}
.rgf-transport .seg-ctl button{padding:0 10px;font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.2}
.rgf-transport .inline-ctl{flex:1 1 140px;min-width:130px;border:0;padding:0;background:none;display:flex;align-items:center;gap:8px}
.rgf-transport .inline-ctl>label{flex:none;gap:6px;font-size:var(--fs-label)}
.rgf-transport .inline-ctl>input{flex:1 1 auto;min-width:60px}
.rgf-transport .ctl{display:flex;align-items:center;gap:6px}
.rgf-transport .ctl>.lbl{font-size:var(--fs-label)}
/* the progress readout keeps the width of 100% (set from the text), right-aligned, so nothing in the row moves while the run plays (P4) */
.rgf-transport .inline-ctl output{text-align:right;font-variant-numeric:tabular-nums}
/* Play and Pause keep one width (set from the wider label), so the row never shifts (P4) */
.rgf-play{justify-content:center}
/* the run, one stage per block */
.rgf-flow{display:flex;flex-direction:column;gap:6px;min-width:0}
.rgf-stg{display:grid;grid-template-columns:118px minmax(0,1fr);gap:4px 10px;border:1px solid transparent;border-radius:8px;padding:6px 8px;background:var(--surface-2);min-width:0;position:relative}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.rgf-stg.bad{border-color:var(--c-oom);box-shadow:inset 3px 0 0 var(--c-oom)}
.rgf-stg.nolog{background:var(--sunken)}
.rgf-sl{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);line-height:1.35;min-width:0}
.rgf-stg.bad .rgf-sl{color:var(--c-oom)}
.rgf-sn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--ink-3);font-size:var(--fs-mark);margin-right:5px;font-weight:600}
.rgf-sb{min-width:0;font-size:var(--fs-cap);line-height:1.45}
.rgf-sb p{margin:0}
.rgf-qt{font-weight:600}
.rgf-nolog{color:var(--ink-3);font-style:italic}
.rgf-ol{list-style:none;margin:0;padding:0}
.rgf-li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:start;padding:3px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-label);border-radius:4px;transition:opacity .2s}
/* a part of the record waits for its beat: hidden but in place, so the record never changes height (R7.9) */
.rgf-w{visibility:hidden;opacity:0}
.rgf-li,.rgf-bl,.rgf-miss,.rgf-cl,.rgf-truth,.rgf-verdict,.rgf-nolog,.rgf-chip{transition:opacity .3s,background-color .45s,color .45s,transform .35s}
.rgf-li.below{color:var(--ink-3);background:var(--sunken)}
.rgf-li.cutk{border-bottom:2px dashed var(--ink);padding-bottom:2px}
.rgf-li.gold b{font-weight:700}
.rgf-li.bad{outline:2px solid var(--c-oom);outline-offset:-2px}
.rgf-rk{color:var(--ink-3);font-size:var(--fs-label)}
.rgf-nm{min-width:0}
.rgf-nm b{font-weight:600}
.rgf-tx{font-size:var(--fs-label);color:var(--ink-2);overflow-wrap:anywhere}
.rgf-li.below .rgf-tx{color:var(--ink-3)}
.rgf-sc{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;font-family:var(--font-mono)}
.rgf-tag{display:inline-block;margin-left:6px;font-size:var(--fs-mark);border:1px solid var(--ink-3);border-radius:4px;padding:0 4px;color:var(--ink-2);font-weight:500}
.rgf-li.bad .rgf-tag{border-color:var(--c-oom);color:var(--c-oom)}
.rgf-bl{font-size:var(--fs-label);color:var(--ink-2);margin:4px 0 0!important}
.rgf-bl.rgf-w{transform:translateY(-8px)}
.rgf-miss{font-size:var(--fs-label);margin-top:4px!important;padding:3px 6px;border:1px dashed var(--ink-3);border-radius:4px}
/* the red ring keeps the box's outer size, so the record does not grow when the verdict shows (R7.9) */
.rgf-miss.bad{border:2px solid var(--c-oom);color:var(--c-oom);padding:2px 5px}
.rgf-chips{display:flex;flex-wrap:wrap;gap:4px 6px}
.rgf-chip{font-size:var(--fs-label);border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;background:var(--surface-2)}
.rgf-chip.rgf-fly{position:relative;z-index:3;transition:none;box-shadow:0 2px 6px rgba(0,0,0,.18);border-color:var(--ink-3)}
.rgf-chip.gold{font-weight:650}
/* while the chips fly into the context, the rows under the budget line and its notes step back (N10 of the round-1 check) */
.rgf-flow.rgf-flying .rgf-li.below,.rgf-flow.rgf-flying .rgf-bl,.rgf-flow.rgf-flying .rgf-miss{opacity:.2}
.rgf-at{font-size:var(--fs-cap)}
.rgf-cl{border-radius:3px;padding:0 1px}
.rgf-cl.bad{background:color-mix(in srgb,var(--c-oom) 18%,transparent);box-shadow:inset 0 -2px 0 var(--c-oom)}
.rgf-src{font-size:var(--fs-mark);color:var(--ink-3);margin-left:3px;vertical-align:baseline}
.rgf-cl.bad .rgf-src{color:var(--c-oom)}
.rgf-truth{margin-top:4px!important;font-size:var(--fs-label);color:var(--ink-2)}
.rgf-pills{display:flex;flex-wrap:wrap;gap:4px 6px}
.rgf-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-label);border:1px solid var(--line-2);border-radius:999px;padding:1px 9px;background:var(--surface)}
.rgf-pill b{font-family:var(--font-mono);min-width:9px;text-align:center}
.rgf-pill.wait{opacity:.35}
.rgf-pill.yes b{color:var(--c-ok)}
.rgf-pill.no{border-color:var(--ink-3)}
.rgf-pill.bad{border:2px solid var(--c-oom);color:var(--c-oom);padding:0 8px}
.rgf-verdict{margin-top:5px!important;font-size:var(--fs-label);color:var(--c-oom)}
.rgf-verdict.ok,.rgf-verdict.nt{color:var(--ink-2)}
/* on phones a new run waits for ▶ (P2): the button sits over the empty record */
.rgf-flowbox{position:relative}
.rgf-go{position:absolute;left:50%;top:150px;transform:translateX(-50%);z-index:4;box-shadow:var(--shadow)}
/* phones: one column per stage and a tighter record, so a whole run, question to verdict, fits a 390×844 screen in both languages (B4) */
@container (max-width:460px){.rgf-stg{grid-template-columns:minmax(0,1fr);gap:2px 10px;padding:5px 7px}.rgf-flow{gap:5px}.rgf-li{padding:2px 4px;line-height:1.35}.rgf-li.cutk{padding-bottom:1px}.rgf-sb{line-height:1.4}}
/* the failure breakdown */
.rgf-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;margin:0 0 8px;font-size:var(--fs-label)}
.rgf-sum-t{height:12px;border-radius:3px;background:var(--sunken);overflow:hidden;display:flex;border:1px solid var(--line-2)}
.rgf-sum-t i{display:block;height:100%}
.rgf-sum-t i.ok{background:var(--c-ok);opacity:.75}
.rgf-sum-t i.fx{background:repeating-linear-gradient(135deg,var(--c-ok) 0 3px,transparent 3px 6px)}
.rgf-tb{display:flex;flex-direction:column;min-width:0}
.rgf-tr{display:grid;grid-template-columns:minmax(92px,150px) minmax(60px,1fr) repeat(4,minmax(36px,52px));gap:0 6px;align-items:center;padding:4px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-label);min-width:0;transition:opacity .2s}
.rgf-th{font-size:var(--fs-label);color:var(--ink-2);font-weight:600;align-items:end}
.rgf-tr.dim{opacity:.35}
.rgf-tr.cur .rgf-kn{font-weight:700}
.rgf-tr.cur .rgf-kn::before{content:'▸ '}
.rgf-kn{min-width:0;line-height:1.3}
.rgf-bc{display:flex;align-items:center;gap:6px;min-width:0}
.rgf-bt{flex:1 1 auto;height:12px;display:flex;min-width:20px;background:var(--sunken);border-radius:3px;overflow:hidden}
.rgf-bt i{display:block;height:100%}
.rgf-bt i.lf{background:var(--ink-3)}
.rgf-bt i.fx{background:repeating-linear-gradient(135deg,var(--c-ok) 0 3px,transparent 3px 6px);border-left:1px solid var(--surface)}
.rgf-bn{font-family:var(--font-mono);font-size:var(--fs-label);white-space:nowrap}
.rgf-cc{text-align:center;font-family:var(--font-mono);min-width:0;overflow-wrap:anywhere}
.rgf-th .rgf-cc{font-family:inherit;font-size:var(--fs-mark);line-height:1.2}
.rgf-cc.on{background:var(--sunken);font-weight:700;border-radius:3px}
.rgf-x{font-family:var(--font-mono);font-weight:700}
@container (max-width:420px){.rgf-tr{grid-template-columns:minmax(78px,1.1fr) minmax(48px,1fr) repeat(4,30px);gap:0 3px;font-size:var(--fs-label)}.rgf-th .rgf-cc{font-size:var(--fs-mark)}}
.rgf-leg{margin:4px 0 4px;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-label)}
.rgf-leg .lg{display:inline-flex;align-items:center;gap:5px}
.sw.rgf-sw-ok{background:var(--c-ok);opacity:.75;width:12px;height:10px}
.sw.rgf-sw-fx{background:repeating-linear-gradient(135deg,var(--c-ok) 0 3px,transparent 3px 6px);border:1px solid var(--c-ok);width:12px;height:10px}
.sw.rgf-sw-lf{background:var(--ink-3);width:12px;height:10px}
.sw.rgf-sw-bl{background:transparent;border-top:2px dashed var(--ink);height:0;width:16px;align-self:center}
.sw.rgf-sw-below{background:var(--sunken);border:1px solid var(--line-2);width:14px;height:10px}
.sw.rgf-sw-bad{background:transparent;border:2px solid var(--c-oom);width:12px;height:10px;border-radius:3px}
.rgf-metrics{margin-top:10px}
.rgf-mb{padding:6px 0;border-bottom:1px solid var(--line);container-type:inline-size}
.rgf-mb:last-child{border-bottom:0}
.rgf-mb-lead{margin:0 0 4px;font-size:var(--fs-cap)}
.rgf-math-line{overflow-x:auto;padding-block:.3em;max-width:100%}
.rgf-prod li{margin:4px 0}
.rgf-ul{padding-left:18px;margin:6px 0}
.rgf-ul li{margin:3px 0}
.rgf-trinav{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.rgf-trinav .btn[aria-pressed="true"]{border-color:var(--ink);font-weight:650}
.rgf-tri{margin-top:6px}
/* part 3: each kind with its short definition; after a wrong pick the right one gets a green ring (P8, P9) */
.rgf-tri .choice{align-items:flex-start;padding:7px 12px}
.rgf-tri .choice::before{margin-top:3px}
.rgf-ch{display:flex;flex-direction:column;gap:1px;min-width:0}
.rgf-ch b{font-weight:650}
.rgf-kd{font-size:var(--fs-label);line-height:1.35;color:var(--ink-3)}
.rgf-tri .choice[aria-pressed="true"] .rgf-kd{color:inherit;opacity:.8}
.rgf-tri .choice.right{border-color:var(--line);box-shadow:inset 0 0 0 2px var(--c-ok)}
.rgf-verd{margin-top:8px}
.rgf-fxs{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.rgf-fxb{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;font:inherit;font-size:var(--fs-cap);padding:7px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
.rgf-fxb span{font-size:var(--fs-label);color:var(--ink-2)}
.rgf-fxb[aria-pressed="true"]{border:2px solid var(--ink);padding:6px 9px}
.rgf-fxb[aria-pressed="true"] b::before{content:'✓ '}
.rgf-fxb:disabled{opacity:.5;cursor:not-allowed}
.goal.over b{color:var(--c-oom)}
.rgf-subw{margin:6px 0 0}
/* the dock's bar is the breakdown's top bar in small: correct, repaired (hatched), still wrong (P18) */
.rgf-dk{height:10px;background:var(--sunken);border:1px solid var(--line-2);border-radius:3px;overflow:hidden;min-width:60px;display:flex}
.rgf-dk i{display:block;height:100%}
.rgf-dk i.ok{background:var(--c-ok);opacity:.75}
.rgf-dk i.fx{background:repeating-linear-gradient(135deg,var(--c-ok) 0 3px,transparent 3px 6px)}
.rgf-keep{text-transform:none}
/* the four checks in one card: two per row when the card is narrow */
.rgf-app .rail .seg-ctl[data-key="met"]{flex-wrap:wrap}
.rgf-app .rail .seg-ctl[data-key="met"] button{flex:1 1 45%;min-width:0}
.rgf-ln{display:block}
.rgf-do{border-bottom:1px dotted var(--ink-3);cursor:help}
.lever[aria-pressed="true"] .rgf-do{border-bottom-color:currentColor}
.rgf-fe{color:var(--ink-2)}
.lever[aria-pressed="true"] .rgf-fe{color:inherit}
/* after a click that scrolled the page, no hover frame on the option that slid under the pointer (P15) */
.rgf-app .rail.rgf-nohov .choice:not([aria-pressed="true"]):hover{border-color:var(--line)}
/* the check picked in part 5: its card is marked like its column (P23) */
.rgf-metrics .metric.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* the four cards two by two on a narrow stage; where a change badge can show (Scenarios, Settings, part 6) its two lines are kept, so
   the cards and what is under them keep their place when it shows and when it goes (P18; the round-1 check's to-do 6) */
@container (max-width:559.98px){.rgf-stage .rgf-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rgf-metrics.rsv .metric .d{min-height:30px}
/* phones: the scenario buttons (in Settings, the fix buttons) under the cards (P18) */
.rgf-pk{display:none}
@media (max-width:760px){.rgf-pk:not([hidden]){display:block}}
#rgf-app .bench[data-flow="free"] .rgf-pk-sc,#rgf-app .bench:not([data-flow="free"]) .rgf-pk-fx{display:none}
.rgf-pk-g{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rgf-pk-l{font-size:var(--fs-cap);font-weight:600;color:var(--ink-2);margin-right:2px}
.rgf-pkb{font:inherit;font-size:var(--fs-cap);line-height:1.25;padding:5px 11px;min-height:32px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.rgf-pkb[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* part 4: two numbers (P11) */
.rgf-two{display:grid;gap:12px;padding:4px 0 6px}
.rgf-tw-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-cap);font-weight:600}
.rgf-tw-h b{font-size:var(--fs-lead);font-weight:600}
.rgf-tw-t{height:14px;margin:5px 0 4px;background:var(--sunken);border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.rgf-tw-t i{display:block;height:100%}
.rgf-tw-t i.ok{background:var(--c-ok);opacity:.75}
.rgf-tw-t i.rc{background:var(--ink-2)}
.rgf-tw-s{font-size:var(--fs-label);color:var(--ink-2);line-height:1.4}
/* Scenarios: the run record waits closed under the cards (P18) */
.rgf-runtog{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:var(--fs-cap);font-weight:620;color:var(--ink);background:none;border:0;padding:4px 0;cursor:pointer}
.rgf-runtog::before{content:'▸';font-size:var(--fs-label);color:var(--ink-2)}
.rgf-runtog[aria-expanded="true"]::before{content:'▾'}
.rgf-runtog:hover{text-decoration:underline;text-underline-offset:3px}
.rgf-sbx .rgf-runbody{margin-top:6px}
.rgf-pan{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){.rgf-li,.rgf-bl,.rgf-miss,.rgf-cl,.rgf-truth,.rgf-verdict,.rgf-nolog,.rgf-chip{transition:none}}
.rgf-fxb span{display:block}
.rgf-mk{margin:4px 0}
.rgf-mk .rgf-math-line{padding-block:.1em}
.rgf-rnote{margin:0 0 6px;font-size:var(--fs-label);line-height:1.4}
.rgf-lh{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-mark);color:var(--ink-3);padding:0 4px 2px 26px;border-bottom:1px solid var(--line)}
.rgf-lhs{border-bottom:1px dotted var(--ink-3);cursor:help}
/* refit step 2 (2026-10-24): at 700 px tall or less (1366 × 650) part 1 still ran 10 px past the stage in English. The space above
   each panel and above the math is 4 px */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){@container (min-width:736px){
  .rgf-pan{margin-top:4px;padding-top:4px}
  .rgf-stage>details.math{margin-top:4px}
}}

/* reward-model: one preference pair with its scores, the σ curve, the reward model's weights as bars, the training curves with
   play / pause / speed, and best-of-n as two charts on a log axis. Colours (R5.6): grayscale only; red (--c-oom) only for the
   moment that goes wrong (the score still rises, the true quality falls, R5.11); green only for the challenge's goal. */
.rm-stage .stage-head{align-items:center}
.rm-graph{padding:12px 14px 14px;display:grid;gap:14px;min-width:0}
.rm-graph>[hidden]{display:none}
.rm-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
.rm-phone:empty{display:none}
@media (min-width:761px){.rm-phone{display:none}}

/* ---------- the pair ---------- */
.rm-pair{border:1px solid transparent;border-radius:8px;padding:9px 11px 10px;background:var(--surface-2);min-width:0}   /* soft panels, no frame inside the stage (精装修 step 2) */
.rm-anss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rm-ans{border:1px solid transparent;border-radius:6px;padding:7px 9px 8px;display:grid;gap:5px;min-width:0;align-content:start;background:var(--surface)}   /* the answer the labeller picked keeps its ring */
.rm-ans.rm-chosen{border-color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--ink-3)}
.rm-ah{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.rm-ah>b{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink)}
.rm-tag{font-size:var(--fs-mark);line-height:1.4;border:1px solid var(--ink-3);border-radius:999px;padding:0 7px;color:var(--ink);white-space:nowrap}
.rm-tag-r{border-style:dashed;color:var(--ink-2)}
.rm-sc{margin-left:auto;font-size:var(--fs-cap);color:var(--ink);font-weight:650;white-space:nowrap}
.rm-at{margin:0;font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
.rm-len{display:flex;align-items:center;gap:8px;min-width:0}
.rm-lbar{position:relative;flex:1 1 auto;height:8px;background:var(--surface-2);border-radius:2px;min-width:30px}
.rm-lbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px}
.rm-len .mono{white-space:nowrap;color:var(--ink-2)}
.rm-foot{margin:8px 0 0;color:var(--ink-2);line-height:1.45}
/* the reward model's verdict on the pair, a line of its own under the person's choice (Codex review b9v3, 可选 9) */
.rm-verdict{margin:8px 0 0;font-size:var(--fs-cap);line-height:1.45;font-weight:650;color:var(--ink)}
.rm-verdict+.rm-foot{margin-top:2px}
.rm-tag[data-tipx]{cursor:help}

/* ---------- charts ---------- */
.rm-graph svg{display:block;max-width:100%;height:auto;overflow:visible}
.rm-ax{stroke:var(--ink-3);stroke-width:1}
.rm-grid{stroke:var(--line);stroke-width:1}
.rm-tk{font-size:var(--fs-mark);fill:var(--ink-3);font-family:var(--font-mono)}
.rm-lab{font-size:var(--fs-label);fill:var(--ink);font-family:var(--font-mono);font-weight:650}
.rm-line{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rm-line.rm-bad{stroke:var(--c-oom);stroke-width:2.6}
.rm-guide{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.rm-dot{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.rm-dot.rm-bad{fill:var(--c-oom)}
.rm-goalln{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:6 4}
.rm-axl{margin-top:2px;text-align:center}
.rm-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.rm-fig,.rm-fig1{margin:0;min-width:0}
.rm-fig figcaption,.rm-fig1 figcaption{font-size:var(--fs-label);color:var(--ink-2);line-height:1.35;margin-bottom:3px}
.rm-fig1+.rm-fig1{margin-top:8px}
.rm-bleg{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--ink-2)}
.rm-bleg li{display:flex;align-items:center;gap:6px;line-height:1.35}
.rm-sw{display:inline-block;width:16px;height:0;border-top:2px solid var(--ink-2);flex:none}
.rm-sw.rm-bad{border-top:2.6px solid var(--c-oom)}
.rm-sw.rm-gsw{border-top:1.5px dashed var(--ink)}

/* ---------- the weights ---------- */
.rm-wrows{display:grid;gap:5px}
.rm-wrow{display:grid;grid-template-columns:64px minmax(0,1fr) 52px;gap:8px;align-items:center;border-radius:3px;cursor:help}
.rm-wl{font-size:var(--fs-label);color:var(--ink-2)}
.rm-wt{position:relative;height:14px;background:var(--surface-2);border-radius:2px}
.rm-wt i{position:absolute;top:0;bottom:0;background:var(--ink-3);border-radius:2px}
.rm-wt i.neg{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,var(--surface-2) 1.5px 5px)}
.rm-w0{position:absolute;left:50%;top:-3px;bottom:-3px;width:0;border-left:1px solid var(--ink-2);z-index:1}
.rm-wrow em{font-style:normal;font-size:var(--fs-label);color:var(--ink);text-align:right}
.rm-wrow.on .rm-wl{color:var(--ink);font-weight:650}
.rm-wrow.on .rm-wt i{background:var(--ink-2);box-shadow:inset 0 0 0 2px var(--ink)}
.rm-wleg{margin-top:5px;line-height:1.4}

/* ---------- the player ---------- */
.rm-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.rm-player .ctl{margin:0}
.rm-scrub{display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:0}
.rm-scrub input{flex:1 1 auto;min-width:0}
.rm-count{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.rm-cplay{margin-top:8px}
.rm-scope{margin:0 14px 8px;line-height:1.4}

/* ---------- the rail ---------- */
.rm-lv .levers{margin-top:6px}
.rm-remlist{margin:0 0 10px;padding-left:18px;display:grid;gap:8px}
.rm-remlist li{line-height:1.5}
.rm-mt{margin-top:10px}
.rm-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.rm-goal.rm-over b{color:var(--c-oom)}
.rm-goal.met b{color:var(--c-ok)}
.rm-ch-res .cmp{margin-top:10px}
/* G5 (2026-10-08): a scrolling formula box keeps vertical room, so a tall fraction is never clipped */
.rm-app .fx{margin:6px 0;padding:.35em 0;overflow-x:auto}

/* ---------- Settings ---------- */
.rm-grp{border-top:1px solid var(--line-2);padding-top:8px;margin-top:4px}
.rm-gh{font-size:var(--fs-label);font-weight:650;color:var(--ink-2);margin-bottom:4px}
.rm-asm{margin:0;padding-left:16px;display:grid;gap:3px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.rm-asm b{color:var(--ink);font-weight:600}
.rm-prod{padding-left:18px;display:grid;gap:6px;min-width:0}
.rm-prod code,.rm-prod a{overflow-wrap:anywhere}
.rm-mh{margin:10px 0 2px}
/* the symbols of a formula in Show the math, and the three features in part 5's term tip: one per line, names aligned (R2.11) */
.rm-defs,.rm-tipl{list-style:none;margin:4px 0 6px;padding:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 10px;line-height:1.45}
.rm-defs li,.rm-tipl li{display:contents}
.rm-defs b{font-weight:650;color:var(--ink)}
.rm-tipl b{font-weight:650;color:inherit}   /* the tooltip is dark: keep its own text colour */
.rm-tipl{margin-top:6px}
/* a term whose tip holds a formula (σ): it only explains, so it reads like a .def */
.rm-app .t.rm-td,.pop .t.rm-td{cursor:help}
.rm-app .t.rm-td:hover,.rm-app .t.rm-td:focus,.pop .t.rm-td:hover,.pop .t.rm-td:focus{background:none;border-bottom:1px dotted var(--ink-3)}

/* ---------- the mini result bar in the dock ---------- */
.rm-dk{position:relative;height:10px;background:var(--surface-2);border-radius:2px;min-width:60px}
.rm-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:2px}
.rm-dk b{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--ink)}

@media (max-width:760px){
  .rm-graph{padding:10px 10px 12px}
  .rm-anss{grid-template-columns:minmax(0,1fr)}
  .rm-charts{grid-template-columns:minmax(0,1fr)}
  .rm-wrow{grid-template-columns:52px minmax(0,1fr) 46px}
  .rm-scope{margin:0 10px 8px}
  .rm-graph.rm-runfirst>.rm-tr{order:-1}   /* G6: part 3's run is on screen when it starts playing */
}
/* H2 (the owner, 2026-10-09): a formula with its name in words on the left; a chain breaks at “=” onto lines that line up */
.rm-eq{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:.45em;align-items:baseline;margin:6px 0}
.rm-eq-n{max-width:10em;line-height:1.35}
.rm-eq>.fx{margin:0;overflow-x:auto}
/* a long line wraps before a top-level “+” or “−” (WRP), each new line under its first term, its “=” on the first line's baseline
   (.rm-eq lines up baselines); on a phone-width stage the name goes on
   its own line above the chain, so the formula has the whole width (the owner's review of 2026-10-09: no row scrolls sideways) */
.rm-wr{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.3em}
.rm-wr>span{flex:none}
@container (max-width:480px){.rm-eq{grid-template-columns:auto minmax(0,1fr)}.rm-eq-n{grid-column:1 / -1;max-width:none}.rm-eq-n:empty{display:none}}
/* Show the math: one block per quantity, a hairline between blocks (H5) */
.mathbody .rm-mh{border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
.mathbody .rm-mh:first-child{border-top:0;padding-top:0;margin-top:4px}
/* H7 (the owner, 2026-10-09: GRPO's 重放 and speed buttons did not line up): in a row with the speed buttons, the play or replay button
   and the speed buttons share one height and one centre line, and the label 速度 sits beside its buttons */
#rm-app .ctl:has(>.seg-ctl[data-key$="pd"]),#rm-app .ctl:has(.seg-ctl[data-key$="pd"]){display:flex;align-items:center;gap:6px;margin:0}
#rm-app .ctl:has(.seg-ctl[data-key$="pd"])>.lbl{margin:0}
#rm-app .seg-ctl[data-key$="pd"] button{height:26px;padding-top:0;padding-bottom:0}   /* the kit's tray adds 3 px above and below its keys (2026-10-22 refit): 26 px keys keep the control 32 px tall, as tall as the button beside it */
#rm-app :has(>.ctl .seg-ctl[data-key$="pd"])>.btn{height:32px;padding-top:0;padding-bottom:0}
/* H5 (the owner, 2026-10-09: “信息过多，需要分割线”): the stage's blocks (the example pair, the σ curve, the weights, the training curves
   with their player, best-of-n) each keep their bold heading and are separated by a hairline in the kit's line colour; the framed pair
   keeps its own frame */
.rm-graph>div:not([hidden]):not(.rm-phone)~div:not([hidden]):not(.rm-pair){border-top:1px solid var(--line);padding-top:12px}
.rm-graph.rm-runfirst>.rm-tr{border-top:0;padding-top:0}
/* Codex R10B (round 3): in the challenge's pass state the fixed example, when the reward model still judges it wrong, says so on itself */
.rm-tag.rm-wrong{border-color:var(--c-oom);color:var(--c-oom);font-weight:650;margin-left:6px;vertical-align:1px}
/* G5: the gradient step's \big brackets reached 1 px past its formula box in Chinese (the text 选中 / 落选 inside the formula); a little
   room above and below the formula keeps it whole */
.rm-app .fx math{padding-block:2px}
/* the same formula in the 13.5 px Show the math (2026-10-22 refit): the “←” comes from a fallback font whose text box, at the inherited
   1.6 line height, reached past the bottom padding in Chinese, so the box scrolled by 1 px; an operator's text box is its glyph's height,
   which changes nothing on screen */
.rm-app .fx mo{line-height:1}
/* 知识梳理 (2026-10-12): formulas on their own line, side by side, wrapping under each other in a narrow column (as eval-ci's primer
   sets them), with room above and below for the \big brackets around Chinese text */
.primer .rm-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:2.2em;row-gap:8px;margin:2px 0 14px;padding-left:1em;font-size:1.06em;line-height:1.3;min-width:0}
.primer .rm-prfx>span{min-width:0;max-width:100%}
.primer .rm-prfx math{padding-block:2px}
@media (max-width:760px){.primer .rm-prfx{padding-left:.4em;column-gap:1.6em}}
/* ---------- a wide stage (polish round 4, 2026-10-17; the owner's B4, R7.12): at 1440 × 900 parts 3 and 5–8 needed 24–415 px of
   scrolling inside the stage, and entering parts 7 and 8 best-of-n's charts were below the screen. On a stage at least 736 px wide
   (windows from about 1200 px), whenever the training curves or best-of-n are on it (parts 3 and 5–8, Scenarios, the submitted
   challenge), its blocks sit in two columns with a hairline between them: the example pair and the weights on the left, the training
   curves with their player and best-of-n on the right, each column stacked as before (a multi-column box, so the DOM order is kept).
   In the left column the pair's two answers sit one above the other and the pair and the weights have a little less padding, so that
   column is no taller than the right one (in English too). Best-of-n's two charts sit side by side, the charts are drawn shorter
   (--rm-trh, --rm-bsh, --rm-bqh, --rm-bcols, read by drawTr and drawBon), and the captions of two charts side by side share one row,
   so the charts stay level. The metric cards share the row by their number with the value and change lines tighter (as admission's,
   CONTRACT §19), and a few gaps are tighter. Same blocks, same texts and animation; phones (≤ 760 px) and narrower stages keep one
   column. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .rm-graph{margin-top:10px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden]))){display:block;columns:2;column-gap:29px;column-rule:1px solid var(--line);padding:8px 14px 10px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>div{break-inside:avoid}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair{padding:6px 10px 6px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair .rm-anss{grid-template-columns:minmax(0,1fr);gap:6px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair .rm-ans{padding:5px 9px 5px;gap:4px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair .rm-verdict{margin-top:5px}
  /* lines that change while a run plays keep the room of their longest form in these narrower columns (R7.9): the gap line under the
     verdict (“−1.41” and “0.58” made it two lines or one in Chinese and English), and in English the verdict (“…gives the two responses
     the same score.”, for a moment while the scores cross, needs two lines where the others need one) and the weights' title (two lines
     from step 10 on); without this the stage moved by 19–36 px while a run played */
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair .rm-foot{min-height:2.9em}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair .rm-verdict:lang(en){min-height:2.9em}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-w>.rm-cap:lang(en){min-height:2.7em}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-w{margin-top:8px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-w .rm-wrows{gap:4px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-w .rm-wleg{margin-top:4px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-tr{break-before:column;border-top:0;padding-top:0}
  .rm-graph:has(>#rm-tr:not([hidden]))>#rm-bon{margin-top:10px}
  .rm-graph:not(:has(>#rm-tr:not([hidden])))>#rm-bon{break-before:column;border-top:0;padding-top:0}
  .rm-graph>div:not([hidden]):not(.rm-phone)~div:not([hidden]):not(.rm-pair){padding-top:9px}
  #rm-tr-charts{--rm-trh:92;grid-template-rows:auto auto;row-gap:0}
  #rm-tr-charts>.rm-fig{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  #rm-bon{--rm-bcols:2;--rm-bsh:92;--rm-bqh:92;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:12px;align-items:start}
  #rm-bon>.rm-cap,#rm-bon>.rm-bleg{grid-column:1 / -1}
  /* best-of-n's key keeps three lines (R7.9): its red item (“the score still rises, the true quality falls (after n = …)”) is there
     only when the two part ways, and without it the key takes one line; where best-of-n sits under the training curves (Scenarios,
     Settings) that column is the taller one in Chinese, so the stage moved by 18 px from one scenario to the next */
  #rm-bon>.rm-bleg{min-height:calc(3 * 1.35em + 8px);align-content:flex-start}
  #rm-bon>.rm-fig1{display:grid;grid-row:span 2;grid-template-rows:subgrid;margin:0}
  .rm-fig>figcaption,.rm-fig1>figcaption{align-self:end}
  .rm-player{margin-top:6px}
  .rm-scope{margin-bottom:6px}
  /* one column per card shown, all as wide (no :has() count: Chromium does not always restyle it when a card is shown or hidden) */
  .rm-metrics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:8px}
  .rm-metrics .metric .v{line-height:1.25}
  .rm-metrics .metric .d{min-height:13px;line-height:1.1}
  .rm-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
#rm-pair .rm-foot,.rm-cap,#rm-tr-charts figcaption,#rm-bon figcaption,#rm-metrics .sub{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730), in English, parts 3 and 5–8 still ran 32–61 px past the
   stage. The two columns' padding, the gaps inside the pair's panel and above the weights, the weights' rows and the line under the
   scope note are 2–4 px smaller, and the metric cards take the kit's tight line heights (a card's change row stays reserved). The left
   column still holds the pair and the weights, so in English parts 6–8 run 29 px and part 5 11 px past 1536 × 730 (129–147 on main) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden]))){padding-top:6px;padding-bottom:6px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair{padding-top:4px;padding-bottom:4px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair .rm-ans{padding-top:3px;padding-bottom:3px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-pair .rm-verdict{margin-top:3px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-w{margin-top:4px;padding-top:6px}
  .rm-graph:is(:has(>#rm-tr:not([hidden])),:has(>#rm-bon:not([hidden])))>#rm-w .rm-wrows{gap:2px}
  .rm-scope{margin-bottom:4px}
  .rm-metrics .metric .sub{line-height:1.25}
  .rm-metrics .metric .d{min-height:13px;line-height:1.1}
}}

/* rlvr: one problem with its group of 8 answers (way of writing, length, final answer, verdict, advantage), the training run
   (shares of the four ways, right-in-one-try, length) and pass@k. Colours (R5.6): grayscale for the four ways, the candidates way
   hatched; red (--c-oom) only where the loose checker is gamed; green only for the challenge's goal. */
.rlvr-stage .stage-head{align-items:center}
.rlvr-graph{padding:12px 14px 14px;display:grid;gap:16px;min-width:0}
.rlvr-graph [hidden]{display:none!important}
/* once a run is on the stage, its charts come first in the stage's scroll box (parts 4–8, scenarios, challenge); pass@k first in parts 7–8 */
.rlvr-graph.rlvr-runfirst .rlvr-run{order:-2}
.rlvr-graph.rlvr-runfirst .rlvr-pk{order:-1}
.rlvr-graph.rlvr-pkfirst .rlvr-pk{order:-3}
.rlvr-ct{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
/* H5 (the owner's message of 2026-10-09): each block of the stage (the training run, one group of answers, pass@k) is a framed sub-panel
   whose heading line says what it shows, set off from the content by a hairline */
.rlvr-blk{border:1px solid transparent;border-radius:8px;padding:9px 11px 10px;background:var(--surface-2);min-width:0}   /* 精装修 step 2: a soft panel instead of a frame inside the stage; the heading keeps its hairline, and what was light grey inside turns white */
.rlvr-bh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding-bottom:8px;border-bottom:1px solid var(--line);min-width:0}
.rlvr-bt{margin:0;font-size:var(--fs-cap);font-weight:650;line-height:1.35;color:var(--ink);min-width:0}
/* H8, R7.9: the stage head holds the sentence of every phase in one grid cell and shows the current one */
.rlvr-stk{display:grid}
.rlvr-stk>[data-ph]{grid-area:1/1;visibility:hidden}
.rlvr-stk>[data-ph].on{visibility:visible}

/* the four ways of writing: swatches, areas, mini bar */
.rlvr-w0{--rlvr-c:color-mix(in srgb,var(--ink) 22%,var(--surface))}
.rlvr-w1{--rlvr-c:color-mix(in srgb,var(--ink) 48%,var(--surface))}
.rlvr-w2{--rlvr-c:color-mix(in srgb,var(--ink) 82%,var(--surface))}
.rlvr-w3{--rlvr-c:var(--ink-2)}
.rlvr-sw{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none;background:var(--rlvr-c);vertical-align:-1px;margin-right:5px}
.rlvr-sw.rlvr-w3,.rlvr-dk i.rlvr-w3{background:repeating-linear-gradient(45deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 4px);box-shadow:inset 0 0 0 1px var(--ink-2)}
.rlvr-sw.rlvr-w3.red,.rlvr-endl .red .rlvr-sw.rlvr-w3,.rlvr-dk i.rlvr-w3.red{background:repeating-linear-gradient(45deg,var(--c-oom) 0 1.5px,var(--surface) 1.5px 4px);box-shadow:inset 0 0 0 1px var(--c-oom)}
.rlvr-a{fill:var(--rlvr-c);stroke:var(--surface);stroke-width:.6}
.rlvr-a.rlvr-w3{fill:url(#rlvr-hatch)}
.rlvr-hbg{fill:var(--surface)}
.rlvr-hl{stroke:var(--ink-2);stroke-width:2}
.rlvr-a.rlvr-w3.red{stroke:var(--c-oom);stroke-width:1.2}

/* ---------- the group of 8 ---------- */
.rlvr-grp{display:grid;gap:8px;container:rlvr-grp/inline-size}
.rlvr-q{font-size:var(--fs-cap);color:var(--ink);line-height:1.45;min-width:0;overflow-wrap:anywhere}
.rlvr-tag{display:inline-block;font-size:var(--fs-mark);color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:0 7px;margin-right:4px;white-space:nowrap;vertical-align:1px}
.rlvr-ref{white-space:nowrap;font-size:var(--fs-label);color:var(--ink-2);margin-left:6px}
.rlvr-ref b{color:var(--ink)}
.rlvr-gstat{color:var(--ink-2);line-height:1.4;font-variant-numeric:tabular-nums}
.rlvr-gfx{display:inline-block;vertical-align:middle;max-width:100%;overflow-x:auto}
.rlvr-rows{display:grid;gap:3px;min-width:0}
.rlvr-row{display:grid;grid-template-columns:16px minmax(164px,1.5fr) minmax(40px,1fr) minmax(56px,auto) 74px 82px;gap:8px;align-items:center;
  width:100%;text-align:left;font:inherit;font-size:var(--fs-label);color:var(--ink-2);background:none;border:1px solid transparent;border-radius:4px;
  padding:3px 6px;cursor:pointer;min-width:0;transition:opacity .2s}
.rlvr-row:hover{border-color:var(--line)}
.rlvr-row.on{border-color:var(--ink-3);background:var(--surface);color:var(--ink)}
.rlvr-row.wait{opacity:.35;cursor:default}
.rlvr-row:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.rlvr-row.red{border-color:var(--c-oom)}
.rlvr-n{font-size:var(--fs-mark);color:var(--ink-3);text-align:right}
.rlvr-way{display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlvr-lenb{position:relative;height:10px;background:var(--surface);border-radius:2px;min-width:0;margin-right:30px}
.rlvr-lenb i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px}
.rlvr-lenb em{position:absolute;left:100%;margin-left:4px;top:-3px;width:26px;font-style:normal;font-size:var(--fs-mark);line-height:16px;color:var(--ink-2)}
.rlvr-fa{font-size:var(--fs-label);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlvr-ok,.rlvr-no{font-size:var(--fs-label);white-space:nowrap}
.rlvr-ok{color:var(--ink);font-weight:650}
.rlvr-no{color:var(--ink-3)}
.rlvr-row.red .rlvr-ok{color:var(--c-oom)}
.rlvr-adv{font-size:var(--fs-label);white-space:nowrap;text-align:right;color:var(--ink-3)}
.rlvr-adv.up{color:var(--ink);font-weight:650}
.rlvr-adv.dn{color:var(--ink-2)}
/* the selected answer, under a hairline; all 8 answers share one grid cell and only the selected one shows (R7.9) */
.rlvr-sel{min-width:0;display:grid;border-top:1px solid var(--line);padding-top:8px}
.rlvr-sela{grid-area:1/1;display:grid;gap:5px;align-content:start;min-width:0;visibility:hidden}
.rlvr-sela.on{visibility:visible}
.rlvr-seltxt{font-size:var(--fs-label);line-height:1.5;color:var(--ink-2);background:var(--surface);border-radius:4px;padding:7px 9px;min-width:0;overflow-wrap:anywhere}
.rlvr-seltxt p{margin:4px 0 0}
.rlvr-fin{background:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink);font-weight:650;border-radius:2px;padding:0 2px}
.rlvr-why{color:var(--ink-2);line-height:1.45}
.rlvr-why.red{color:var(--c-oom)}

/* ---------- part 2: one answer read by the strict and the loose checker, side by side (codex-b9v3 #1) ---------- */
.rlvr-chk{border:1px solid transparent;border-radius:8px;padding:9px 11px 10px;background:var(--surface-2);display:grid;gap:8px;min-width:0}
.rlvr-cwho{font-size:var(--fs-cap);color:var(--ink);line-height:1.4}
.rlvr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.rlvr-col{border:1px solid transparent;border-radius:6px;padding:8px 10px 9px;display:grid;gap:6px;align-content:start;min-width:0;background:var(--surface)}
.rlvr-col.red{border-color:var(--c-oom);box-shadow:inset 0 0 0 1px var(--c-oom)}
.rlvr-ckh{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.3}
.rlvr-crule{font-size:var(--fs-label);color:var(--ink-3);line-height:1.35;margin-top:-4px}
.rlvr-ctext{margin:0;font-size:var(--fs-cap);line-height:1.8;color:var(--ink);background:var(--surface-2);border-radius:4px;padding:5px 8px;min-width:0;overflow-wrap:anywhere}
.rlvr-ctext .ln{display:block}
.rlvr-ctext .fl{font-family:var(--font-mono);font-size:var(--fs-label)}
.rlvr-ctext .skip{color:var(--ink-3)}
.rlvr-num{border:1px solid var(--ink-3);border-radius:3px;padding:0 3px;margin:0 1px;font-variant-numeric:tabular-nums}
.rlvr-num.hit{border:2px solid var(--ink);font-weight:700;padding:0 2px}
.rlvr-num.hit.red{border-color:var(--c-oom);color:var(--c-oom)}
.rlvr-cres{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.rlvr-ccmp{font-size:var(--fs-label);color:var(--ink-2)}
.rlvr-cv{font-size:var(--fs-stage);font-weight:700;white-space:nowrap;color:var(--ink)}
.rlvr-cv.no{color:var(--ink-3)}
.rlvr-cv.red{color:var(--c-oom)}
.rlvr-cnote{margin:0;font-size:var(--fs-label);line-height:1.4}
.rlvr-cnote.red{color:var(--c-oom)}
.rlvr-chk .rlvr-leg{margin:0}
.rlvr-chk.bump .rlvr-col{animation:rlvr-in .5s ease-out}
@keyframes rlvr-in{from{opacity:.25}to{opacity:1}}

/* players: play / replay, speed, scrubber. H7: the replay button and the speed buttons share one height and one baseline */
.rlvr-pl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.rlvr-pl .seg-ctl{margin:0;height:32px;box-sizing:border-box}
.rlvr-pl .seg-ctl button{display:inline-flex;align-items:center;justify-content:center;padding:0 9px;font-size:var(--fs-label);line-height:1}
.rlvr-pl .btn.sm{height:32px;box-sizing:border-box;padding-block:0;line-height:1;font-size:var(--fs-label)}
.rlvr-scrub{flex:1 1 140px;min-width:100px;accent-color:var(--ink)}
.rlvr-plnote{white-space:nowrap}

/* ---------- the run ---------- */
.rlvr-run{display:grid;gap:12px;container:rlvr-run/inline-size}
.rlvr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0;border-top:1px solid var(--line);padding-top:10px}
.rlvr-ch{min-width:0}
.rlvr-plot{position:relative;height:150px;margin-right:112px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.rlvr-plot.small{height:120px;margin-left:36px;margin-right:86px}
/* the shares chart: a y axis, and the full name of each way at the end of its band (wraps on a narrow stage) */
.rlvr-plot.rlvr-mixp{margin-left:36px;margin-right:150px}
.rlvr-mixp .rlvr-endl span{white-space:normal;width:144px;align-items:flex-start;line-height:1.25}
.rlvr-mixp .rlvr-endl b{font-weight:inherit;min-width:0;word-break:keep-all}
.rlvr-mixp .rlvr-endl .rlvr-sw{margin-top:2px}
.rlvr-svg{display:block;width:100%;height:100%;overflow:visible}
.rlvr-ln{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rlvr-ln.dash{stroke:var(--ink-2);stroke-dasharray:5 4;stroke-width:1.6}
.rlvr-ln.red{stroke:var(--c-oom);stroke-width:2.4}
.rlvr-ln.other{stroke:var(--ink-3);stroke-width:1.2}
/* step-10 marks (part 6): a dot on each line with its value beside it */
.rlvr-mk{position:absolute;width:0;height:0;cursor:help}
.rlvr-mk i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--surface)}
.rlvr-mk.other i{background:var(--ink-3)}
.rlvr-mk em{position:absolute;left:7px;top:-8px;font-style:normal;font-size:var(--fs-mark);line-height:16px;white-space:nowrap;color:var(--ink);background:color-mix(in srgb,var(--surface) 85%,transparent);padding:0 2px;border-radius:2px}
.rlvr-mk.other em{color:var(--ink-2)}
.rlvr-base{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.rlvr-endl{position:absolute;left:100%;top:0;bottom:0;width:0}
.rlvr-endl span{position:absolute;left:6px;transform:translateY(-50%);white-space:nowrap;font-size:var(--fs-label);line-height:1.2;color:var(--ink-2);display:flex;align-items:center;cursor:help}
.rlvr-endl span.red{color:var(--c-oom);font-weight:650}
.rlvr-yax{position:absolute;right:100%;top:0;bottom:0;width:36px;display:flex;flex-direction:column;justify-content:space-between;font-size:var(--fs-mark);color:var(--ink-3);text-align:right;padding-right:4px;box-sizing:border-box}
.rlvr-yax span{line-height:1;transform:translateY(-1px)}
.rlvr-yax span:last-child{transform:translateY(1px)}
.rlvr-xax{display:flex;justify-content:space-between;font-size:var(--fs-mark);color:var(--ink-3);margin:3px 112px 0 0}
.rlvr-plot.small+.rlvr-xax,.rlvr-pk .rlvr-xax{margin:3px 86px 0 36px}
.rlvr-mixp+.rlvr-xax{margin:3px 150px 0 36px}
.rlvr-leg{margin:4px 0 0;line-height:1.4}
/* H6: legend items, each with a sample of its mark */
.rlvr-legs{display:flex;flex-wrap:wrap;gap:2px 12px}
.rlvr-li{display:inline-flex;align-items:center;gap:5px;min-width:0}
.rlvr-lsw{width:18px;height:10px;flex:none;overflow:visible}
.rlvr-ldot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
/* R7.9: an item or a note that only applies later in the run keeps its place, hidden, so the legend does not grow while the run plays */
.rlvr-li.off,.rlvr-lnote.off{visibility:hidden}
.rlvr-pk{max-width:560px}
@container rlvr-run (max-width:520px){
  .rlvr-plot.rlvr-mixp{margin-right:116px}
  .rlvr-mixp .rlvr-endl span{width:110px}
  .rlvr-mixp+.rlvr-xax{margin-right:116px}
}
.rlvr-scope{margin:2px 14px 8px}

/* ---------- rail ---------- */
.rlvr-lv{margin:8px 0}
.rlvr-rem{padding-left:20px;display:grid;gap:6px;margin:6px 0}
.rlvr-def{padding-left:18px;display:grid;gap:4px;margin:6px 0}
.rlvr-jl{text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer;color:var(--ink)}
.rlvr-goal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.rlvr-goal.met b{color:var(--c-ok)}
.rlvr-ch-res .cmp{margin-top:10px}
.rlvr-app .fx{margin:6px 0;overflow-x:auto}

/* ---------- Settings, Connect ---------- */
/* codex-b9v3 #2: the assumed values sit in a closed block (kit's details.adv) */
.rlvr-asmd summary{font-size:var(--fs-cap);line-height:1.35;align-items:flex-start}
.rlvr-asmd summary::before{flex:none}
.rlvr-gh{font-size:var(--fs-label);color:var(--ink-3)}
.rlvr-asm{display:grid;gap:8px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);min-width:0;margin-top:8px}
.rlvr-asm p{margin:0}
.rlvr-at{border-collapse:collapse;width:100%;font-size:var(--fs-label);line-height:1.3}
.rlvr-at caption{text-align:left;font-weight:600;color:var(--ink);padding-bottom:3px}
.rlvr-at th,.rlvr-at td{padding:2px 4px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap}
.rlvr-at th[scope=row],.rlvr-at tr:first-of-type th:first-child{text-align:left;white-space:normal;font-weight:500;color:var(--ink)}
.rlvr-at th[scope=col]{font-weight:500;color:var(--ink-3);font-size:var(--fs-mark)}
.rlvr-at td{color:var(--ink-2)}
.rlvr-prod{padding-left:18px;display:grid;gap:6px;min-width:0}
.rlvr-prod code,.rlvr-prod a{overflow-wrap:anywhere}

/* ---------- the dock's mini bar: shares of the four ways ---------- */
.rlvr-dk{display:flex;height:10px;border-radius:2px;overflow:hidden;min-width:60px;background:var(--surface-2)}
.rlvr-dk i{display:block;height:100%;background:var(--rlvr-c)}

/* the owner's review of 2026-10-09: on a stage narrower than one row needs (761–930 px wide windows), “优势” ran past the panel's right
   edge. The row now follows the width of its own panel: two lines whenever the panel is narrower than the one-line row (about 490 px). */
@container rlvr-grp (max-width:500px){
  .rlvr-row{grid-template-columns:16px minmax(0,1fr) auto auto;grid-template-areas:"n way way adv" ". len fa vd";gap:2px 8px;padding:4px 5px}
  .rlvr-n{grid-area:n}.rlvr-way{grid-area:way}.rlvr-lenb{grid-area:len}.rlvr-fa{grid-area:fa}.rlvr-ok,.rlvr-no{grid-area:vd}.rlvr-adv{grid-area:adv}
}
@media (max-width:760px){
  .rlvr-graph{padding:10px 10px 12px}
  .rlvr-two{grid-template-columns:minmax(0,1fr)}
  .rlvr-endl span{font-size:var(--fs-mark)}
  .rlvr-ref{display:block;margin:2px 0 0}
  .rlvr-chk{padding:8px 8px 9px}
  .rlvr-cols{gap:7px}
  .rlvr-col{padding:7px 7px 8px}
  .rlvr-ctext{padding:4px 6px}
}

/* ---------- Show the math (H2, the owner's message of 2026-10-09): short blocks under small headings, a hairline between blocks, the
   formula with its name in words on the left, the substituted lines in a two-column grid (words, formula) ---------- */
.rlvr-mb{padding:10px 0 4px;border-top:1px solid var(--line);min-width:0}
.rlvr-mh{margin:0 0 4px;font-size:var(--fs-cap);font-weight:650;line-height:1.35;color:var(--ink)}
.rlvr-mb p{margin:4px 0}
.rlvr-app .rlvr-mf{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:4px 0}
.rlvr-mn{font-size:var(--fs-label);color:var(--ink-3);min-width:5em}
.rlvr-ms{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 12px;align-items:center;margin:2px 0 6px;min-width:0}
.rlvr-msw{font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}
.rlvr-app .rlvr-ms .fx{margin:0}
@media (max-width:760px){
  .rlvr-ms{grid-template-columns:minmax(0,1fr);gap:0}
  .rlvr-msw{margin-top:4px}
}

/* ---------- polish r4 (B4, R7.12): parts 4–8 on a 1440 × 900 screen. The run (505 px: its player on a row of its own, the shares chart
   150 px tall, the two line charts 120 px), the group of 8 (468–486 px) and, in parts 7–8, pass@k (228 px) were stacked, so the stage
   scrolled 469–731 px inside itself. Side by side they do not fit a 790 px stage: the group's one-line rows need 486 px and the run's
   charts their full width, so on a stage at least 760 px wide (the group and the run then 706 px or more inside) the stage is made
   shorter instead: the run's player sits in its heading line, right of the title (as the group's does), at a fixed width so the title
   never rewraps while the button's word and the step change (R7.9); the charts are drawn shorter (their SVGs stretch to the box); the
   gaps, the rows' padding and the metric cards' line heights are a little tighter. Same blocks, same order, same animation; phones
   (≤ 760 px) and narrower stages keep the layout above. The block the card talks about (the run in parts 4–6, pass@k in parts 7–8)
   comes first and is whole on entry; what is left to scroll is the rest of the group, the metric cards and “Show the math”. ---------- */
@media (min-width:761px){
  @container (min-width:760px){
    .rlvr-graph{gap:12px;padding:10px 14px 12px}
    .rlvr-run{gap:8px;grid-template-columns:minmax(0,1fr) auto;column-gap:0}
    .rlvr-grp{gap:6px}
    .rlvr-pk .rlvr-plot.small{height:92px}
    .rlvr-metrics .metric .v{line-height:1.25}
    .rlvr-metrics .metric .d{min-height:13px;line-height:1.1}
  }
  @container rlvr-run (min-width:706px){
    .rlvr-run>*{grid-column:1/-1}
    .rlvr-run>.rlvr-bh{grid-column:1;grid-row:1}
    /* the heading's hairline runs on under the player (R7.13) */
    .rlvr-run>#rlvr-rpl{grid-column:2;grid-row:1;width:var(--rlvr-rplw,400px);box-sizing:border-box;flex-wrap:nowrap;padding:0 0 8px 12px;border-bottom:1px solid var(--line)}
    #rlvr-rpl>.btn,#rlvr-rpl>.seg-ctl,#rlvr-rpl>#rlvr-tlab{flex:none;white-space:nowrap}
    #rlvr-rpl>.rlvr-scrub{flex:1 1 60px;min-width:60px}
    .rlvr-plot.rlvr-mixp{height:112px}
    .rlvr-plot.small{height:92px}
    .rlvr-two{padding-top:8px}
  }
  /* English: longer speed words, so a wider player and a two-line title */
  html[lang="en"] #rlvr-rpl{--rlvr-rplw:480px}
  @container rlvr-grp (min-width:706px){
    .rlvr-rows{gap:2px}
    .rlvr-row{padding-top:2px;padding-bottom:2px}
    .rlvr-sel{padding-top:6px}
  }
}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
#rlvr-st-sub,#rlvr-mix .rlvr-ct,#rlvr-mix b,#rlvr-p1 span,#rlvr-len span{font-variant-numeric:tabular-nums}

/* roofline: the roofline on log-log axes (one thick roof, the ridge dashed, kernels as dots, a dashed ring before the last change, the
   previous GPU's roof thin and dashed), two lanes per kernel on one time axis (memory: blue for weights, amber for the KV cache, dotted
   otherwise; computing: solid gray; the shorter lane's idle rest hatched), metric cards, the dock's mini bar.
   Every class on the lab's own elements carries the rf- prefix (R9.1: the kit styles .cmp, .w, .kv …).
   Colours (R5.6): blue = weights, amber = KV cache, grayscale for the rest; green and red only for the challenge's goal. */
.rf-stage .stage-head{align-items:center}
.rf-graph{padding:10px 12px 12px;display:grid;gap:10px;min-width:0}
.rf-plot{min-width:0;overflow:hidden}
.rf-svg{display:block;max-width:100%;height:auto;overflow:visible}

/* ---------- the chart ---------- */
.rf-svg .rf-grid{stroke:var(--line-2);stroke-width:1}
.rf-svg text{font-family:var(--font-mono)}
.rf-svg .rf-tick{font-size:var(--fs-mark);fill:var(--ink-3)}
.rf-svg .rf-ax{font-size:var(--fs-mark);fill:var(--ink-2)}
.rf-svg .rf-reg{font-size:var(--fs-mark);fill:var(--ink-3)}
.rf-svg .rf-roof{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.rf-svg .rf-rooflab{font-size:var(--fs-mark);fill:var(--ink);font-weight:600}
.rf-svg .rf-ghost{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:5 4}
.rf-svg .rf-glab{font-size:var(--fs-mark);fill:var(--ink-3)}
.rf-svg .rf-ridge{stroke:var(--ink-2);stroke-width:1.4;stroke-dasharray:4 4}
.rf-svg .rf-rlab{font-size:var(--fs-mark);fill:var(--ink-2)}
.rf-svg .rf-hit{stroke:transparent;stroke-width:14;fill:transparent;pointer-events:all}
.rf-svg .rf-rg,.rf-svg .rf-dot{cursor:help;outline:none}
.rf-svg .rf-rg:focus-visible .rf-ridge{stroke:var(--ink);stroke-width:2.4}
.rf-svg .rf-dot circle:first-child{fill:var(--ink);stroke:var(--surface);stroke-width:2;transition:cx .25s ease-out,cy .25s ease-out}
.rf-svg .rf-dot:hover circle:first-child,.rf-svg .rf-dot:focus-visible circle:first-child{stroke:var(--ink);stroke-width:3}
.rf-svg .rf-dot.rf-map circle:first-child{fill:var(--ink-2)}
.rf-svg .rf-lead{stroke:var(--ink-3);stroke-width:1}
.rf-svg .rf-prev{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:3 3}
.rf-svg .rf-dlab{font-size:var(--fs-mark);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}

/* ---------- the two lanes ---------- */
.rf-time{display:grid;gap:10px;min-width:0}
/* H5 (the owner, 2026-10-09: information runs together without a divider): the lanes start a block of their own under a hairline */
.rf-time:not(:empty){border-top:1px solid var(--line);padding-top:10px}
.rf-tk{display:grid;gap:4px;min-width:0}
.rf-tcap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.rf-lane{display:grid;grid-template-columns:128px minmax(0,1fr) 70px;gap:8px;align-items:center;min-width:0}
.rf-ln{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-lval{font-size:var(--fs-label);color:var(--ink);text-align:right;white-space:nowrap}
.rf-trk{position:relative;height:16px;background:var(--surface-2);border-radius:2px;cursor:help;outline-offset:2px}
.rf-trk i{position:absolute;top:0;bottom:0;display:block;transition:width .25s ease-out,left .25s ease-out}
.rf-bar{left:0;border-radius:2px 0 0 2px}
.rf-bar.rf-mem.rf-w{background:var(--c-weights)}
.rf-bar.rf-mem.rf-kv{background:var(--c-kv)}
/* memory traffic that is neither weights nor KV cache: dotted, so it never reads as the solid gray of computing (R5.7) */
.rf-bar.rf-mem.rf-x{background:radial-gradient(circle,var(--ink-2) 1.1px,transparent 1.5px) 0 0/4px 4px,var(--surface);box-shadow:inset 0 0 0 1px var(--ink-2)}
.rf-bar.rf-cmp{background:var(--ink-2)}
.rf-idle{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.2px,transparent 1.2px 5px);opacity:.75;border-radius:0 2px 2px 0}
.rf-mapnote{margin:0;color:var(--ink-2)}

/* ---------- the keys: one under the roofline, one under the lanes (review 2026-10-03: no legend above the chart) ---------- */
.rf-key{margin-top:8px}
.rf-key>span{cursor:help}
.rf-svg .rf-axx{cursor:help}
.sw.rf-sw-roof{width:16px;height:0;border:0;border-top:3px solid var(--ink);border-radius:0;margin:0 6px 3px 0}
.sw.rf-sw-ridge{width:0;height:12px;border:0;border-left:1.5px dashed var(--ink-2);border-radius:0;margin:0 7px 0 4px}
.sw.rf-sw-dot{width:10px;height:10px;border-radius:50%;background:var(--ink);border-color:transparent}
.sw.rf-sw-prev{width:11px;height:11px;border-radius:50%;background:transparent;border:1.5px dashed var(--ink-2)}
.sw.rf-sw-ghost{width:16px;height:0;border:0;border-top:1.5px dashed var(--ink-3);border-radius:0;margin:0 6px 3px 0}
.sw.rf-sw-w{background:var(--c-weights);border-color:transparent}
.sw.rf-sw-kv{background:var(--c-kv);border-color:transparent}
.sw.rf-sw-cmp{background:var(--ink-2);border-color:transparent}
.sw.rf-sw-x{background:radial-gradient(circle,var(--ink-2) 1.1px,transparent 1.5px) 0 0/4px 4px,var(--surface);border-color:var(--ink-2)}
.sw.rf-sw-idle{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.2px,transparent 1.2px 4px);border-color:var(--line)}

/* ---------- metric cards ---------- */
.rf-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.rf-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rf-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}
.rf-mh{margin-top:10px}
.rf-mh:first-child{margin-top:0}
/* Show the math as short blocks (H2, 2026-10-09): a lead line, then the formula's rows in a grid; blocks are split by a hairline */
.rf-mb{padding:10px 0}
.rf-mb:first-child{padding-top:2px}
.rf-mb+.rf-mb{border-top:1px solid var(--line)}
.mathbody .rf-ml{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5;color:var(--ink-2)}
.rf-mg{display:grid;grid-template-columns:repeat(var(--n),auto);justify-content:start;justify-items:center;align-items:center;column-gap:.3em;row-gap:.45em;overflow-x:auto;padding-block:.3em;margin-bottom:4px;font-size:var(--fs-cap)}
.rf-mg .rf-mn{justify-self:end}
.rf-mg .rf-mw{justify-self:start}
/* a cell never shrinks under its text: a formula with Chinese words in it would otherwise be squeezed and run into the next
   column (H7); a row wider than the panel scrolls instead */
.rf-mg>span{white-space:nowrap;min-width:max-content}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read): a long sum is cut before each “+”
   into pieces, each with the reader's numbers under its terms; the pieces wrap onto the next line, indented under the first term */
.rf-mg>.rf-sw{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.3em;row-gap:.55em;padding-left:1.3em;min-width:0;white-space:normal}
.rf-sw>.rf-sg:first-child,.rf-sw>.rf-sl{margin-left:-1.3em}
.rf-sw>.rf-sl{flex-basis:100%}
.rf-sg{display:inline-grid;justify-content:start;justify-items:center;align-items:center;column-gap:.3em;row-gap:.45em;grid-auto-rows:minmax(1.8em,auto)}
.rf-sg>span{white-space:nowrap}
.rf-mg>.rf-sn{align-self:start;min-height:1.8em;display:flex;align-items:center}
/* a narrow stage (a phone, or the 900 px layout): each name on its own line above its formula, the “=” rows under it */
@container (max-width:540px){
  .rf-mg{grid-template-columns:repeat(var(--n1),auto)}
  .rf-mg>.rf-mn:not(:empty){grid-column:1/-1;justify-self:start}
  .rf-mg>.rf-mn:empty{display:none}
}

/* ---------- rail ---------- */
.rf-mt{margin-top:12px}
.rf-ch-res{scroll-margin-top:120px}
.goal.rf-over b{color:var(--c-oom)}
.rf-app .goal.rf-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.rf-app .goal.rf-goal span:last-child{white-space:normal}
.rf-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.rf-app .inline-ctl .seg-ctl button{white-space:nowrap}
.rf-lv{margin-top:6px}
/* R7.8: an option's result goes on its own line under the title */
.rf-lv .lever .lv-r{grid-column:2 / 4;grid-row:2;padding-top:0}
.rf-lv .lever .lv-d{grid-row:3}
.rf-lv .lever .lv-r:empty{display:none}
.rf-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .rf-why{margin-top:6px}
.rf-remlist li{margin-bottom:8px}
/* the challenge's options: a pass shows on the row itself */
#rf-ch-res .cmp-row.ok .cmp-track{box-shadow:inset 0 0 0 2px var(--c-ok)}
#rf-ch-res .cmp-row.ok .cmp-lab>span:first-child{color:var(--c-ok);font-weight:650}

/* ---------- settings ---------- */
.rf-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.rf-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.rf-grp .ctl>.lbl{display:block}
.rf-app .ctl output{white-space:nowrap}
.rf-pnote{margin-top:4px}

/* ---------- connect ---------- */
.rf-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.rf-prod li{margin-bottom:6px}

/* ---------- mini result bar (dock): the share of the peak, the goal's tick in the challenge ---------- */
.rf-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.rf-dk i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}
.rf-dk b{position:absolute;top:-1px;bottom:-1px;width:0;border-left:2px solid var(--ink)}

/* phones: the part's one control at the top of the chart */
.rf-phone{display:none}
@media (max-width:760px){
  /* the picture first, each sub-chart's key right under it (R7.3) */
  .rf-stage{display:flex;flex-direction:column}
  .rf-stage>.stage-head{order:1}
  .rf-stage>.rf-graph{order:2}
  .rf-stage>.rf-scope{order:4}
  .rf-stage>.metrics{order:4}
  .rf-stage>details.math{order:5}
  .rf-graph{padding:8px 8px 10px}
  .rf-phone:not(:empty){display:block}
  .rf-lane{grid-template-columns:104px minmax(0,1fr) 62px;gap:6px}
  .rf-ln,.rf-lval{font-size:var(--fs-label)}
  .rf-tcap{font-size:var(--fs-label)}
}
@media (prefers-reduced-motion:reduce){.rf-trk i,.rf-svg .rf-dot circle:first-child{transition:none}}
/* Settings: the five kernels wrap onto two or three rows instead of overflowing the column (R7.8) */
#rf-ctl-k-wrap .seg-ctl{flex-wrap:wrap}
#rf-ctl-k-wrap .seg-ctl button{flex:1 1 auto;min-width:max-content;white-space:nowrap}
/* phones: the status badge beside the stage's title, so the chart starts higher (R7.3) */
@media (max-width:760px){
  .rf-stage>.stage-head{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px}
  /* a long status chip (part 5) drops below the title instead of squeezing it */
  .rf-stage>.stage-head>div:first-child{flex:1 1 200px;min-width:0}
  .rf-stage .meter-sub{font-size:var(--fs-cap)}
  .rf-stage .stage-actions{flex:none}
}
.rf-app .railcard .obs+.small{margin-top:10px}

/* v6 fixes: a term whose hover holds a formula (kit .t with an HTML tip) keeps the definition look; a formula inside an answer sits on its own line */
.t.rf-dfx{cursor:help}
.rf-fxl{display:block;margin:6px 0}
/* the roofline formula needs the kit's wide tooltip width (the size of the kit's .tip.wide) */
.tip:has(.rf-fxw){max-width:min(380px,calc(100vw - 16px))}
/* a formula on its own line in a card body or a note (R6.29, H1 2026-10-09) */
.rf-fxp{margin:6px 0;overflow-x:auto}
/* the matmul formula breaks at each “=”, the chain indented under its name (H2: chains break at “=”, aligned) */
.rf-fxp .rf-fxr{padding-left:1.5em}
.rf-mg .rf-par{font-family:'STIX Two Math','Cambria Math','Latin Modern Math',serif;font-size:2.1em;line-height:1;font-weight:300;color:var(--ink)}

/* 知识梳理 (primer, 2026-10-12): a formula on its own line; the lab's roofline as a display, without a kernel and without controls */
.primer .rf-prx{display:block;padding:.3em 0;font-size:1.05em;max-width:100%}
.pr-fr.rf-prfig{min-width:0}
.primer .pr-rfbox{overflow:visible}
.primer .pr-rfbox .rf-key{margin-top:6px}
.primer .pr-rfbox .rf-key>span,.primer .pr-rfbox .rf-svg :is(.rf-axx,.rf-rg){cursor:default}
.primer .rf-prfig :is(button,input,select,.ctl){display:none!important}

/* ---------- polish round 5 (B4, 2026-10-17): the stage fits 1440 × 900 ----------
   Part 5 (a decode step and a prefill: the roofline, two kernels' lanes, a two-line scope note, four metric cards) ran 33 px past the
   stage's 814 px at 1440 × 900 in Chinese, 49 in English. On a desktop stage at least 736 px wide (1440 and 1280 px windows) the
   roofline is drawn 260 px high instead of 300 (roofline.js reads --rf-ph when it draws; the same axes, ticks and labels), the metric
   cards take the kit's tight line heights (CONTRACT §19; a card name stays 12 px) and a few gaps are tighter. Same blocks in the same
   order, the same hairline over the lanes (R7.13), the same texts; phones (≤ 760 px) and narrower stages keep the layout above */
@media (min-width:761px){@container (min-width:736px){
  .rf-stage .rf-plot{--rf-ph:260}
  .rf-graph{margin-top:10px;padding:8px 12px 10px;gap:8px}
  .rf-time{gap:8px}
  .rf-time:not(:empty){padding-top:8px}
  .rf-key{margin-top:6px}
  .rf-stage>.rf-scope{margin:8px 0 4px}
  .rf-metrics{margin-top:8px}
  .rf-metrics .metric .v{line-height:1.25}
  .rf-metrics .metric .sub{line-height:1.25}
  .rf-metrics .metric .d{min-height:13px;line-height:1.1}
  .rf-stage>details.math{margin-top:8px;padding-top:8px}
}}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and part 5 still ran 18 px past it at 1536 × 730; the roofline plot is drawn 242 px tall instead of 260 (its
   labels keep their size) and two gaps are tighter */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  .rf-stage .rf-plot{--rf-ph:242}
  .rf-stage .rf-time{gap:6px}
  .rf-stage>.rf-scope{margin:6px 0 2px}
  /* in English two metric cards and the note under the lanes take a line more, and part 5 still ran 25 px past 1536 × 730: the plot is
     214 px tall there */
  html[lang="en"] .rf-stage .rf-plot{--rf-ph:214}
}

/* rope: grayscale only (R5.6); line style and weight carry the meaning (R5.7). Solid = query, dashed = key, dotted = before the turn,
   thick gray bar = the shadow (one pair's share of the score), thick box = where the position enters, dots = turns over the text,
   hollow = turns at the training length, thick stem = past the angles met in training. Green and red appear only for the challenge's
   goal (the kit's .goal and cmpChart). Every element with cursor:help carries a tooltip (R1.1). */
.rp-graph{padding:10px 12px 12px;min-width:0}
.rp-vis{min-width:0;overflow:hidden}
.rp-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin:0 0 6px}
.rp-note{margin:6px 0 0;font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
.rp-note b{color:var(--ink);font-weight:650}
.rp-note .rp-cond{color:var(--ink-3)}
.rp-svg{display:block;max-width:100%;height:auto;overflow:hidden}
.rp-svg text{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.rp-svg text.rp-b{fill:var(--ink);font-weight:650}
.rp-svg text.rp-mut{fill:var(--ink-3)}
.rp-svg text.rp-num{font-size:var(--fs-label);fill:var(--ink)}
.rp-svg text.rp-sm{font-size:var(--fs-mark)}
/* dials and arrows */
.rp-dial{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.rp-dial.rp-on{stroke:var(--ink);stroke-width:2.6}
.rp-q{stroke:var(--ink);stroke-width:3;stroke-linecap:round;fill:none}
.rp-qs{stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;fill:none}
.rp-k{stroke:var(--ink-2);stroke-width:3;stroke-dasharray:6 4;fill:none}
.rp-c{stroke:var(--ink-3);stroke-width:2;stroke-dasharray:1.5 3.5;stroke-linecap:round;fill:none}
.rp-svg .rp-hd{stroke-dasharray:none;stroke-width:1;stroke-linejoin:round}
.rp-q.rp-hd{fill:var(--ink);stroke:var(--ink)}
.rp-qs.rp-hd{fill:var(--ink-2);stroke:var(--ink-2)}
.rp-k.rp-hd{fill:var(--ink-2);stroke:var(--ink-2)}
.rp-c.rp-hd{fill:var(--ink-3);stroke:var(--ink-3)}
.rp-arc{fill:none;stroke:var(--ink-2);stroke-width:1.4}
.rp-arc.rp-arcb{stroke:var(--ink);stroke-width:2}
.rp-shadow{stroke:var(--ink-3);stroke-opacity:.55;stroke-width:7;stroke-linecap:butt}
.rp-drop{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:2 3}
.rp-hand{stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round}
.rp-hbar{fill:var(--ink-3);fill-opacity:.75}
.rp-mask{cursor:help}
.rp-maskc{fill:var(--sunken);stroke:var(--line);stroke-width:1.4;stroke-dasharray:5 4}
/* part 2: the 128 numbers, the brackets of the 64 pairs */
.rp-numc{fill:var(--ink);stroke:none}
.rp-numc.rp-p0{stroke:var(--ink);stroke-width:2}
.rp-brk{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.rp-brk.on{stroke:var(--ink);stroke-width:2.2}
/* parts 1 and 7: score grids */
.rp-cell{fill:var(--ink);stroke:var(--line);stroke-width:1}
.rp-cell.rp-hot{stroke:var(--ink);stroke-width:2.6}
/* part 4's curve, the turns chart */
.rp-axis{stroke:var(--line);stroke-width:1}
.rp-curve{fill:none;stroke:var(--ink-2);stroke-width:2}
.rp-dot{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.rp-dotw{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.rp-wrapbg{fill:var(--ink);fill-opacity:.06}
.rp-one{stroke:var(--ink);stroke-width:2}
.rp-grid{stroke:var(--line);stroke-width:1;stroke-opacity:.7}
.rp-trn{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
.rp-stem{stroke:var(--ink);stroke-width:3;stroke-linecap:butt}
.rp-hit{fill:transparent;pointer-events:all}
.rp-dot2{fill:var(--ink);stroke:var(--surface);stroke-width:1}
.rp-pt .rp-dot2{pointer-events:none}
.rp-pt:hover .rp-dot2{stroke:var(--ink);stroke-width:2}
.rp-mini,.rp-big,.rp-cellg,.rp-pt{cursor:help}
.rp-big:focus{outline:none}
.rp-big:focus-visible .rp-dial{stroke:var(--ink);stroke-width:3}
/* part 2: "added at the input" next to "turned inside attention" */
.rp-cmp{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.rp-cmp-t{font-size:var(--fs-cap);font-weight:650;color:var(--ink);margin:0 0 4px}
.rp-cmp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rp-col{border:1px solid transparent;border-radius:8px;padding:7px 9px 9px;background:var(--surface-2);min-width:0}   /* soft panels, no frame (精装修 step 2: one frame per figure) */
.rp-col-h{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.3}
.rp-col-s{font-size:var(--fs-label);color:var(--ink-3);line-height:1.3;margin:1px 0 6px;text-wrap:balance}
.rp-box{border:1px solid transparent;border-radius:6px;padding:4px 7px;font-size:var(--fs-label);line-height:1.3;color:var(--ink-2);background:var(--surface);text-align:center;overflow-wrap:anywhere;text-wrap:balance}
.rp-box.rp-posbox{border:2.5px solid var(--ink);color:var(--ink);font-weight:650}
.rp-op{text-align:center;font-size:var(--fs-label);line-height:1.2;color:var(--ink-3);margin:1px 0}
.rp-row{display:flex;align-items:center;gap:4px}
.rp-row>.rp-box{flex:1 1 0;min-width:0}
.rp-row>.rp-op{margin:0;flex:none}
/* the metric cards: three per row at every width, short values (R7.8) */
.metrics.rp-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
/* legend swatches (grayscale; line style and weight carry the meaning, R5.7) */
.rp-sw{display:inline-block;flex:none;margin-right:6px;vertical-align:middle}
.rp-sw-q{width:16px;height:0;border-top:3px solid var(--ink)}
.rp-sw-k{width:16px;height:0;border-top:3px dashed var(--ink-2)}
.rp-sw-c{width:16px;height:0;border-top:2px dotted var(--ink-3)}
.rp-sw-arc{width:12px;height:12px;border:2px solid transparent;border-top-color:var(--ink);border-radius:50%}
.rp-sw-dot{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.rp-sw-dot2{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.rp-sw-cell{width:12px;height:12px;background:var(--ink);opacity:.3;border-radius:2px}
.rp-sw-hot{width:12px;height:12px;border:2.5px solid var(--ink);border-radius:2px;box-sizing:border-box}
.rp-sw-brk{width:14px;height:5px;border:1.5px solid var(--ink-3);border-top:none;box-sizing:border-box}
.rp-sw-pos{width:16px;height:11px;border:2.5px solid var(--ink);border-radius:3px;box-sizing:border-box}
.rp-sw-shadow{width:16px;height:0;border-top:7px solid var(--ink-3);opacity:.55}
.rp-sw-one{width:16px;height:0;border-top:2px solid var(--ink)}
.rp-sw-wrap{width:12px;height:12px;border:1px solid var(--line);box-sizing:border-box;position:relative;overflow:hidden}
.rp-sw-wrap::before{content:'';position:absolute;inset:0;background:var(--ink);opacity:.1}
.rp-sw-trn{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-2);background:var(--surface);box-sizing:border-box}
.rp-sw-stem{width:3px;height:13px;background:var(--ink)}
#rp-legend>span{cursor:help}
.rp-lv .levers{margin-top:4px}
.rp-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.rp-prod li{margin-bottom:6px}
.rp-prod code{overflow-wrap:anywhere;word-break:break-word}
.rp-ch-res .cmp{margin-top:10px}
.rp-dk{display:block;flex:none}
.rp-dk .rp-dial{fill:none;stroke:var(--ink-3)}
#rp-ch-goal.rp-over b{color:var(--c-oom)}
.rp-scope{margin:6px 12px 0;cursor:help}
/* round 1 of the reviews: the row of "bites" (A2), each arrow's turn (A4), the previous state of the chart (A6), the mini bar (A12),
   why Next is greyed out (A13), the legend under the chart on phones (O14), the base options in two rows (A14) */
.rp-rowbox{fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-dasharray:4 3;pointer-events:none}
.rp-turnq{fill:none;stroke:var(--ink-2);stroke-width:1.6}
.rp-turnk{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:4 3}
.rp-svg .rp-ah{stroke:none;stroke-dasharray:none}
.rp-turnq.rp-ah{fill:var(--ink-2)}
.rp-turnk.rp-ah{fill:var(--ink-3)}
.rp-hbar.rp-top{stroke:var(--ink);stroke-width:2}
.rp-prev{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-opacity:.55;pointer-events:none}
.rp-dkc{fill:var(--ink-3);fill-opacity:.35}
.rp-dkc.on{fill:var(--ink);fill-opacity:1}
.rp-dkone{stroke:var(--ink);stroke-width:1.2}
.rp-dkline{fill:none;stroke:var(--ink-2);stroke-width:1.6}
.rp-dk .rp-dial{fill:none;stroke:var(--ink-3)}
.rp-dkk{stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:3 2}
.rp-sw-row{width:16px;height:11px;border:1.4px dashed var(--ink-2);border-radius:3px;box-sizing:border-box}
.rp-sw-turn{width:14px;height:8px;border:1.6px solid var(--ink-2);border-bottom:none;border-radius:8px 8px 0 0;box-sizing:border-box}
.rp-sw-bar{width:16px;height:9px;background:var(--ink-3);opacity:.8;outline:2px solid var(--ink);outline-offset:-1px;border-radius:2px}
.rp-sw-prev{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-3);opacity:.7;box-sizing:border-box}
.rp-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .rp-why{margin-top:6px}
.rp-why-off{display:none}
#rp-ctl-base .seg-ctl{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:760px){
  .rp-why-off{display:block;visibility:hidden}
  .rp-stage{display:flex;flex-direction:column}
  .rp-stage>.stage-head{order:1}
  .rp-stage>.rp-graph{order:2}
  .rp-stage>#rp-legend{order:3;margin-top:10px}
  .rp-stage>.rp-scope{order:4}
  .rp-stage>.rp-metrics{order:5}
  .rp-stage>.math{order:6}
}
.rp-lk{display:inline;white-space:normal;text-align:inherit}
.rp-lk:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Show the math as a few blocks (the owner, 2026-10-09, H1/H2): a lead line in words, the formula typeset, then the numbers; a hairline
   between blocks */
#rp-mathbody .rp-mb+.rp-mb{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
#rp-mathbody .rp-mlead{font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.5;color:var(--ink-2);margin:2px 0 4px}
.rp-math-line{overflow-x:auto;max-width:100%;margin:4px 0;font-size:var(--fs-stage)}
/* a formula that does not fit its box (the owner's review of 2026-10-09, R6.37): the name with “=” first; the right-hand side beside it
   while its widest term fits there, else on its own line, indented under the name; its terms wrap onto the next line under its first term */
#rp-mathbody .rp-fw{display:flex;flex-wrap:wrap;align-items:baseline;padding-left:1.4em}
#rp-mathbody .rp-fwn{flex:none;margin-left:-1.4em;white-space:nowrap}
#rp-mathbody .rp-fwr{flex:1 1 0%;min-width:min-content}
#rp-mathbody .rp-fg{display:inline-block;max-width:100%}
#rp-mathbody .rp-fp{display:inline-block;white-space:nowrap}
#rp-mathbody .rp-fq{margin-right:1em}
#rp-mathbody .rp-msub{font-family:var(--font-ui);font-weight:600;color:var(--ink-2);margin:8px 0 2px}
/* 精装修 step 2: 700 px tall or less (1366 × 650), the spacing round the two columns under the drawing is tighter (the drawing and the
   text keep their sizes) so the stage fits without scrolling inside */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){.rp-graph{padding:4px 10px 4px}.rp-cap{margin-bottom:3px}.rp-cmp-t{margin-bottom:2px}.rp-op{margin:0}.rp-cmp{margin-top:3px;padding-top:4px}.rp-col{padding:5px 8px 6px}.rp-col-s{margin-bottom:3px}.rp-stage>.rp-scope{margin-top:2px}}

/* sampling: the next-word bars (after the temperature, dashed; after the cut, solid; cut words hatched), the chances laid end to end
   with top-p's and top-k's lines, the draw with one tick per run, the 20 runs, part 4's two lists, and the sentence tree.
   Colours (R5.6): grayscale and hatching only; green and red only for the challenge's goal. */
.sp-stage .stage-head{align-items:center}
.sp-stage .stage-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end}
.sp-view button{font-size:var(--fs-label);padding:3px 9px}
.sp-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.sp-a,.sp-b,.sp-duo{display:grid;gap:12px;min-width:0}
.sp-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;text-wrap:balance}
.sp-sub{font-size:var(--fs-label);color:var(--ink-2);line-height:1.35;margin-bottom:4px;text-wrap:balance}
/* the part's focus lights up on the chart (R3.14) */
.sp-graph[data-focus="strip"] .sp-strip,.sp-graph[data-focus="bars"] .sp-rows,.sp-graph[data-focus="duo"] .sp-duo,.sp-graph[data-focus="tree"] .sp-tree{outline:2px dashed var(--focus-frame);outline-offset:4px;border-radius:4px}

/* ---------- the bars: one row per word ---------- */
.sp-rows{display:grid;gap:4px;min-width:0}
.sp-hd,.sp-row{display:grid;grid-template-columns:92px 34px minmax(0,1fr) 58px;gap:8px;align-items:center;min-width:0}
.sp-hd{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.sp-hd span:nth-child(2){text-align:right}
.sp-row{cursor:help;border-radius:3px;outline-offset:2px}
.sp-w{font-size:var(--fs-cap);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-z{font-size:var(--fs-label);color:var(--ink-3);text-align:right}
.sp-v{font-size:var(--fs-label);color:var(--ink);text-align:right;white-space:nowrap}
.sp-trk{position:relative;height:17px;background:var(--surface-2);border-radius:2px}
.sp-trk i{position:absolute;left:0;top:0;bottom:0;display:block;transition:width .25s ease-out}
.sp-fin{background:var(--ink-2);border-radius:2px}
.sp-pre{border:1.5px dashed var(--ink-3);border-radius:2px;box-sizing:border-box;z-index:1}
.sp-hatch{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 5px);opacity:.8}
.sp-row.cut .sp-w{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}
.sp-row.cut .sp-v{color:var(--ink-3)}
.sp-row.bad .sp-w{font-style:italic}

/* ---------- the chances laid end to end: top-p's and top-k's lines; the draw with one tick per run ---------- */
.sp-cum{min-width:0}
.sp-bar{position:relative;height:26px;background:var(--surface-2);border-radius:3px;cursor:help;outline-offset:3px}
.sp-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink-3);border-right:1.5px solid var(--surface);box-sizing:border-box;transition:left .25s ease-out,width .25s ease-out}
.sp-seg:nth-child(even){background:var(--ink-2)}
.sp-seg span{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.sp-seg.cut{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,var(--surface-2) 1.5px 5px)}
.sp-seg.cut span{color:var(--ink-2)}
.sp-pline,.sp-kline{position:absolute;top:-6px;bottom:-2px;width:0;z-index:2}
.sp-pline{border-left:2px dashed var(--ink)}
.sp-kline{border-left:2px dotted var(--ink)}
.sp-pline em,.sp-kline em{position:absolute;top:-15px;left:4px;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink);white-space:nowrap;background:var(--surface);padding:0 3px;border-radius:2px}
.sp-kline em{left:auto;right:4px}
.sp-pline.l em{left:auto;right:4px}
.sp-kline.r em{right:auto;left:4px}
.sp-cum+.sp-cum{margin-top:2px}
#sp-draw .sp-sub{margin-bottom:15px}
#sp-cum .sp-sub{margin-bottom:18px}
#sp-cum.ch .sp-sub{margin-bottom:26px}
#sp-cum{padding-top:12px}
/* the draw's ticks run above the bar only, so they never cross the word labels (review A O1) */
.sp-tick{position:absolute;top:-9px;height:9px;width:0;border-left:1.5px solid var(--ink);z-index:2;margin-left:-.75px}
.sp-tick::before{content:'';position:absolute;top:-3px;left:-3.5px;width:5px;height:5px;border-radius:50%;background:var(--ink)}

/* ---------- the 20 runs ---------- */
.sp-chips{display:flex;flex-wrap:wrap;gap:4px}
.sp-chip{font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.5;padding:0 6px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--surface);white-space:nowrap}

/* ---------- part 4: one rule, two lists ---------- */
.sp-duo{grid-template-columns:minmax(0,1fr)}
.sp-duo-p{display:grid;gap:6px;min-width:0;border:1px solid transparent;border-radius:8px;padding:8px 10px 10px;background:var(--surface-2)}   /* soft panels, no frame (精装修 step 2); their bars turn white */
.sp-duo-p :is(.sp-bar,.sp-trk,.sp-colb){background:var(--surface)}
.sp-keep{font-size:var(--fs-label);color:var(--ink-2)}
@container (min-width:720px){.sp-duo{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-duo .sp-hd,.sp-duo .sp-row{grid-template-columns:76px 30px minmax(0,1fr) 52px}}

/* ---------- the sentence tree: three columns, a block's height is its chance ---------- */
.sp-tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0}
.sp-col{display:grid;gap:4px;min-width:0}
.sp-colh{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.sp-colb{position:relative;background:var(--surface-2);border-radius:3px;overflow:visible}
.sp-blk{position:absolute;left:0;right:0;box-sizing:border-box;border:1px solid var(--line);border-top-width:0;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 5px;overflow:hidden;cursor:help;transition:top .25s ease-out,height .25s ease-out}
.sp-blk:first-child{border-top-width:1px}
.sp-blk span{font-size:var(--fs-mark);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.sp-blk.on{background:var(--ink-3);border:2px solid var(--ink);z-index:1}
.sp-blk.on span{color:var(--bg);font-weight:650}
.sp-n{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);flex:none}
.sp-u{position:absolute;left:-3px;right:-3px;height:0;border-top:2px solid var(--ink);z-index:3;pointer-events:none}
.sp-u em{position:absolute;right:2px;top:-15px;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.3;color:var(--ink);background:var(--surface);padding:0 3px;border-radius:2px;white-space:nowrap;pointer-events:auto;cursor:help;border-bottom:1px dotted var(--ink-3)}
.sp-tag{position:absolute;left:0;transform:translateY(-100%);margin-top:-2px;font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;line-height:1.3;color:var(--ink);background:var(--surface);border:1px solid var(--ink);border-radius:3px;padding:0 4px;white-space:nowrap;z-index:4;pointer-events:none}
.sp-sent{margin:0;font-size:var(--fs-cap);line-height:1.45;color:var(--ink-2)}
.sp-sent b{color:var(--ink)}
.sp-pr{color:var(--ink-2)}

/* ---------- legend swatches ---------- */
.sw.sp-sw-fin{background:var(--ink-2);border-color:transparent}
.sw.sp-sw-pre{background:transparent;border:1.5px dashed var(--ink-3)}
.sw.sp-sw-cut{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border-color:var(--line)}
.sw.sp-sw-pl{width:0;height:13px;border:0;border-left:2px dashed var(--ink);border-radius:0;margin:0 7px 0 3px}
.sw.sp-sw-kl{width:0;height:13px;border:0;border-left:2px dotted var(--ink);border-radius:0;margin:0 7px 0 3px}
.sw.sp-sw-tick{width:0;height:11px;border:0;border-left:1.5px solid var(--ink);border-radius:0;margin:0 7px 0 3px}
.sw.sp-sw-bad{display:none}
.sw.sp-sw-blk{background:var(--surface);border:1px solid var(--line)}
.sw.sp-sw-on{background:var(--ink-3);border:2px solid var(--ink)}
.sw.sp-sw-u{width:14px;height:0;border:0;border-top:2px solid var(--ink);border-radius:0;margin:0 6px 3px 0}
#sp-legend>span{cursor:help}

/* ---------- metric cards ---------- */
.sp-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.sp-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sp-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.sp-mt{margin-top:12px}
.sp-ch-res{scroll-margin-top:120px}
.goal.sp-over b{color:var(--c-oom)}
.sp-lv{margin-top:6px}
.sp-app .goal span:last-child{white-space:nowrap}
.sp-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.sp-app .inline-ctl .seg-ctl button{white-space:nowrap}

/* ---------- settings ---------- */
.sp-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.sp-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.sp-grp .ctl>.lbl{display:block}
.sp-seedrow .ctl{display:grid;gap:6px;justify-items:start}
.sp-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.sp-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.sp-prod li{margin-bottom:6px}
.sp-prod code,.refs code{word-break:break-word}

/* ---------- mini result bar ---------- */
.sp-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.sp-dk i{position:absolute;top:0;bottom:0;background:var(--ink-3);border-right:1px solid var(--surface)}
.sp-dk i:nth-child(even){background:var(--ink-2)}

@media (max-width:760px){
  /* phones: the picture first, its legend right under it (R7.3) */
  .sp-stage{display:flex;flex-direction:column}
  .sp-stage>.stage-head{order:1}
  .sp-stage>.sp-graph{order:2}
  .sp-stage>.legend-row{order:3}
  .sp-stage>.sp-scope{order:4}
  .sp-stage>.metrics{order:4}
  .sp-stage>details.math{order:5}
  .sp-graph{padding:10px 10px 12px}
  .sp-hd,.sp-row{grid-template-columns:78px 30px minmax(0,1fr) 54px;gap:6px}
  .sp-chip{font-size:var(--fs-mark);padding:0 5px}
}
@media (max-width:420px){.sp-app .pb-dots{gap:3px}}
/* ---------- round 1 (reviews A and B) ---------- */
/* A5: the logits divided by the temperature, next to the bars */
.sp-hd.sc,.sp-row.sc{grid-template-columns:92px 34px 40px minmax(0,1fr) 58px}
.sp-hd.sc span:nth-child(3){text-align:right}
.sp-zh{cursor:help;justify-self:end;border-bottom:1px dotted var(--ink-3);outline-offset:2px}
.sp-zs{font-size:var(--fs-label);color:var(--ink);font-weight:600;text-align:right}
/* A4, A9: running totals under a bar of chances laid end to end; ✓ where top-p stops; top-k's bracket */
.sp-marks{position:relative;height:16px;margin-top:3px}
.sp-marks:empty{display:none}
.sp-marks.two{height:31px}
.sp-marks.kb{height:24px}
.sp-marks[data-tipx]{cursor:help;outline-offset:2px}
.sp-mk{position:absolute;top:0;transform:translateX(-100%);font-family:var(--font-mono);font-size:var(--fs-mark);line-height:15px;color:var(--ink-2);white-space:nowrap;padding:0 3px 0 2px;border-right:1.5px solid var(--ink-3)}
.sp-mk.lo{top:15px}
.sp-mk.on{color:var(--ink);font-weight:650;border-right-color:var(--ink)}
.sp-mk.bad{transform:none;left:auto;right:0;border-right:0;padding:0;letter-spacing:1px}
.sp-kbr{position:absolute;left:0;top:1px;height:6px;border:1.5px solid var(--ink);border-top:0;box-sizing:border-box}
.sp-kbr em{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:15px;color:var(--ink);white-space:nowrap}
.sp-dstrip{margin-top:18px;min-width:0}
.sp-bar.sp-mini{height:20px}
.sp-dstrip .sp-sub{margin:3px 0 0}
/* A9: the challenge's three top-p choices, dotted ticks above the bar */
.sp-otick{position:absolute;top:-9px;height:9px;width:0;border-left:1.5px dotted var(--ink-2);z-index:1}
.sp-otick em{position:absolute;bottom:9px;left:0;transform:translateX(-50%);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.2;color:var(--ink-3);white-space:nowrap}
.sw.sp-sw-ot{width:0;height:11px;border:0;border-left:1.5px dotted var(--ink-2);border-radius:0;margin:0 7px 0 3px}
.sp-sw-n{font-style:normal;margin-right:0}
/* A1: a pass shows on the row itself, since a passing bar is 0% wide; the goal label starts at the goal line, inside the plot */
#sp-ch-res .cmp-row.ok .cmp-track{background:var(--c-ok-soft);box-shadow:inset 0 0 0 2px var(--c-ok)}
#sp-ch-res .cmp-row.ok.me .cmp-track{box-shadow:inset 0 0 0 2px var(--c-ok),0 0 0 1.5px var(--ink)}
#sp-ch-res .cmp-row.ok .cmp-lab>span:first-child{color:var(--c-ok);font-weight:650}
#sp-ch-res .cmp-leg i.ok{background:var(--c-ok-soft);box-shadow:inset 0 0 0 2px var(--c-ok)}
#sp-ch-res .cmp-axis span{transform:none;padding-left:4px}
/* R7.8: a rule's result goes on its own line under the title, so the title is never squeezed into a column */
.sp-lv .lever .lv-r{grid-column:2 / 4;grid-row:2;padding-top:0}
.sp-lv .lever .lv-d{grid-row:3}
.sp-lv .lever .lv-r:empty{display:none}
/* A16: why Next is greyed out */
.sp-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .sp-why{margin-top:6px}
/* A14: phones, the part's one control at the top of the chart */
.sp-phone{display:none}
/* A6: what to remember, each line with its picture */
.sp-remlist li{margin-bottom:8px}
.sp-rem{font-size:var(--fs-label);white-space:nowrap}
.sp-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}
/* A17 / O8: the challenge's live progress, label above the value */
.sp-app .goal.sp-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.sp-app .goal.sp-goal span:last-child{white-space:normal}
.sp-nw{white-space:nowrap}
.sp-ord{font-style:normal}
/* re-review N1: a block label moved off a random number's line */
.sp-blk>span.sp-mv{position:absolute;left:5px;right:5px;line-height:14px}
.sp-mh{margin-top:10px}
/* S6: every logit of the tree, under Assumed values */
.sp-zlist{margin-top:6px;font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
.sp-zlist summary{cursor:pointer;color:var(--ink)}
.sp-zlist p{margin:6px 0 4px}
.sp-zlist ul{margin:0;padding-left:16px}
.sp-zlist li{margin-bottom:4px}
@media (max-width:760px){
  .sp-hd.sc,.sp-row.sc{grid-template-columns:70px 28px 36px minmax(0,1fr) 54px;gap:6px}
  .sp-phone:not(:empty){display:block}
  .sp-colb.tagged .sp-ord{display:none}
  .sp-otick em{display:none}
}
@media (prefers-reduced-motion:reduce){.sp-trk i,.sp-seg,.sp-blk{transition:none}}
/* Show the math as short blocks (H2, the owner's decision of 2026-10-09): a lead line in words, the formula with its name on the left,
   the numbers under it; blocks are separated by a hairline, and the "=" of a chain sit in one column */
.sp-mblk{padding:8px 0 6px;border-top:1px solid var(--line-2)}
.sp-mblk:first-child{border-top:0;padding-top:0}
.sp-mblk .sp-mblk{padding-bottom:0}
.sp-mlead,.sp-msym,.sp-mblk>p{font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.55}
.sp-fxl{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .6em;overflow-x:auto;max-width:100%;margin:4px 0}
.sp-fxn{font-family:var(--font-ui);font-size:var(--fs-cap)}
.sp-eq{display:grid;grid-template-columns:max-content max-content;column-gap:.3em;row-gap:.6em;align-items:center;overflow-x:auto;max-width:100%;margin:4px 0}
.sp-eq-l{justify-self:end}
.sp-mtab-w{overflow-x:auto;max-width:100%;padding-block:.3em}
.sp-mtab{border-collapse:collapse;font-size:var(--fs-label);margin:2px 0}
.sp-mtab th,.sp-mtab td{padding:2px 12px 2px 0;text-align:right;white-space:nowrap}
.sp-mtab th:first-child,.sp-mtab td:first-child{text-align:left}
.sp-mtab th{font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--line)}
.sp-mtab tr.sp-sumrow td{border-top:1px solid var(--line)}
.sp-mtab tr.sp-cutrow td{color:var(--ink-3)}
/* H5 (the owner's decision of 2026-10-09): the chart's blocks (the chances, the bar laid end to end, the draw, the 20 runs; the tree and
   its sentence) are separated by a hairline in the kit's line colour, each under its own caption */
.sp-a>.sp-cum,.sp-a>.sp-strip{border-top:1px solid var(--line);padding-top:10px}
.sp-b>.sp-sent{border-top:1px solid var(--line);padding-top:10px}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and parts 1–3, 5 and 6 still ran 11–22 px past it at 1536 × 730; the figure's padding and the gaps between its
   blocks are a few px tighter. Same blocks, lines and sizes of text */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  .sp-stage .sp-graph{padding:8px 12px 10px}
  .sp-a,.sp-b{gap:9px}
  .sp-a>.sp-cum,.sp-a>.sp-strip{padding-top:8px}
  .sp-stage>.sp-scope{margin:8px 0 4px}
}

/* scaling-law: one log-axis chart in three views (parameters and tokens with budget diagonals; iso-FLOP curves; training plus
   serving compute by size), part 3's loss-terms bar, the legend beside the chart.
   Colours (R5.6): grayscale, dashes and rings only; green only for a plan that meets the challenge's goal, red only when it fails. */
.sl-app [hidden]{display:none!important}
.sl-stage .stage-head{align-items:center}
.sl-graph{padding:12px 14px 12px;display:grid;gap:10px;min-width:0}
.sl-graph>div{min-width:0}
.sl-vsw .ctl{margin:0}
.sl-vsw .seg-ctl{flex-wrap:wrap}
.sl-chart{min-width:0;width:100%}
.sl-svg{display:block;width:100%;height:auto;overflow:visible}

/* ---------- chart strokes ---------- */
.sl-gl{stroke:var(--line-2);stroke-width:1}
.sl-tk{font:var(--fs-mark) var(--font-mono);fill:var(--ink-3)}
.sl-al{font:var(--fs-label) var(--font-ui);fill:var(--ink-2)}
.sl-lab{font:var(--fs-mark) var(--font-mono);fill:var(--ink-2)}
.sl-iso{stroke:var(--ink-3);stroke-width:1;fill:none;opacity:.55}
.sl-iso.on{stroke:var(--ink);stroke-width:2.5;opacity:1}
.sl-isol{fill:var(--ink-3)}
.sl-isol.on{fill:var(--ink);font-weight:700}
.sl-r20{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:6 4;fill:none}
.sl-goalc{stroke:var(--ink);stroke-width:2;stroke-dasharray:7 4;fill:none}
.sl-goall{fill:var(--ink);font-family:var(--font-ui)}
.sl-cap{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:2 3;fill:none}
.sl-capl{fill:var(--ink);font-family:var(--font-ui)}
.sl-real{cursor:help;outline:none}
.sl-real circle{fill:var(--surface);stroke:var(--ink-2);stroke-width:2}
.sl-real:focus-visible circle{stroke:var(--ink);stroke-width:3}
.sl-reall{fill:var(--ink);font-family:var(--font-ui)}
.sl-me{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.sl-me.ok{fill:var(--c-ok)}
.sl-me.bad{fill:var(--c-oom)}
.sl-mel{fill:var(--ink);font-family:var(--font-ui);font-weight:650}
.sl-lead{stroke:var(--ink-2);stroke-width:1}
.sl-cur{stroke:var(--ink-3);stroke-width:1.2;fill:none;opacity:.6}
.sl-cur.on{stroke:var(--ink);stroke-width:2.6;opacity:1}
.sl-cur.sl-dotted{stroke-dasharray:1.5 4;stroke-linecap:round}
.sl-minp{stroke:var(--ink-2);stroke-width:1.3;stroke-dasharray:5 4;fill:none}
.sl-min{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.8;cursor:help;outline:none}
.sl-min.on{stroke:var(--ink);stroke-width:2.6}
.sl-minl{fill:var(--ink-2);font-family:var(--font-ui)}
.sl-trn{stroke:var(--ink-2);stroke-width:1.8;stroke-dasharray:6 4;fill:none}
.sl-tot{stroke:var(--ink);stroke-width:2.6;fill:none}
.sl-trnl{fill:var(--ink-2);font-family:var(--font-ui)}
.sl-totl{fill:var(--ink);font-family:var(--font-ui);font-weight:650}

/* ---------- legend, beside the chart ---------- */
.sl-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-label);color:var(--ink-2)}
.sl-leg:empty{display:none}
.sl-leg>span{display:inline-flex;align-items:center;gap:6px;cursor:help;border-radius:3px;outline-offset:2px}
.sl-sw{display:inline-block;width:20px;height:0;flex:none}
.sl-sw.iso,.sl-sw.cur{border-top:2.5px solid var(--ink)}
.sl-sw.r20,.sl-sw.minp,.sl-sw.trn{border-top:2px dashed var(--ink-2)}
.sl-sw.goal{border-top:2px dashed var(--ink)}
.sl-sw.dot{border-top:2.5px dotted var(--ink)}
.sl-sw.tot{border-top:2.6px solid var(--ink)}
.sl-sw.real,.sl-sw.min{width:10px;height:10px;border:2px solid var(--ink-2);border-radius:50%;box-sizing:border-box}
.sl-sw.me{width:11px;height:11px;border-radius:50%;background:var(--ink)}

/* ---------- part 3: the loss as three stacked parts ---------- */
.sl-terms{display:grid;gap:10px;padding:4px 0 2px}
.sl-tcap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.sl-trows{display:grid;gap:6px}
.sl-trow{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 52px;gap:10px;align-items:center;cursor:help;border-radius:3px;outline-offset:2px}
.sl-tn{font-size:var(--fs-label);color:var(--ink);line-height:1.3}
.sl-ttr{position:relative;height:16px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.sl-ttr i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transition:width .2s ease-out}
.sl-trow.n .sl-ttr i{background:var(--ink-2)}
.sl-trow.d .sl-ttr i{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.sl-trow.e .sl-ttr{background:none;height:auto}
.sl-trow.e .sl-ttr em{font-size:var(--fs-label);font-style:normal;color:var(--ink-3);line-height:1.3}
.sl-trow b{font-size:var(--fs-cap);text-align:right;color:var(--ink)}
/* H5 (2026-10-09): the total under the three terms, set off by a hairline like a sum */
.sl-tsum{font-size:var(--fs-cap);color:var(--ink-2);border-top:1px solid var(--line);padding-top:6px}
.sl-tn math{font-size:1em}
.sl-tsum b{color:var(--ink)}
.sl-tsl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sl-tsl .inline-ctl{margin:0}

/* ---------- metric cards ---------- */
.sl-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.sl-metrics[data-n="4"],.sl-metrics[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.sl-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.sl-metrics[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- formulas on their own line ---------- */
.sl-fx{margin:6px 0 8px;padding:6px 2px;overflow-x:auto;overflow-y:hidden;font-size:var(--fs-stage);line-height:normal}
/* a chain wraps before its “=” (M; the owner's review of 2026-10-09: no Show the math row scrolls sideways): the left side, then the
   steps, each new line under the previous “=”; formulas side by side wrap between them */
.sl-ch{display:flex;align-items:baseline}
.sl-chl{flex:none}
.sl-wr{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.4em;min-width:0}
.sl-ch>.sl-wr{flex:1 1 0}
.sl-wr>span{flex:none}
.sl-fx.sl-wq{column-gap:1.1em}

/* ---------- rail ---------- */
.sl-plans{margin:4px 0 10px;padding-left:18px}
.sl-plans li{margin-bottom:3px}
.sl-mt{margin-top:12px}
.sl-ch-res{scroll-margin-top:120px}
.goal.sl-over b{color:var(--c-oom)}
.sl-lv{margin-top:6px}
.sl-app .goal span:last-child{text-align:right}
.sl-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.sl-app .inline-ctl .seg-ctl button{white-space:nowrap}
.sl-asm{margin:6px 0 12px;padding-left:18px;color:var(--ink-2)}
.sl-asm li{margin-bottom:3px}
.sl-remlist{margin:0 0 10px;padding-left:18px}
.sl-remlist li{margin-bottom:8px}
.sl-rem{margin-left:2px}

/* ---------- part 3: the three terms named before their symbols ---------- */
.sl-terml{margin:4px 0 10px;padding-left:18px}
.sl-terml li{margin-bottom:6px}

/* ---------- Show the math: a label over a line of numbers ---------- */
.sl-mlab{margin:8px 0 0;color:var(--ink-2);font-size:var(--fs-cap)}
.mathbody .sl-fx{margin:2px 0 6px}
.mathbody .sl-fx.sl-fxc{margin-top:-4px;padding-left:1.6em}

/* ---------- the challenge's result: your plan, the cheapest, a counterexample (R1, after train-capstone) ---------- */
.sl-hint{margin:6px 0 8px}
.sl-sum{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.sl-scap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
.sl-same{margin:0 0 4px;color:var(--ink-2);line-height:1.45}
.sl-c3{list-style:none;margin:0;padding:0}
.sl-c3r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 0 8px;border-bottom:1px solid var(--line-2)}
.sl-c3h{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.sl-c3t{font-size:var(--fs-cap);font-weight:700;color:var(--ink);margin-right:2px}
.sl-chip{font-size:var(--fs-label);line-height:1.45;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--ink-2);white-space:nowrap}
.sl-chip.on{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.sl-c3trk{position:relative;height:14px;background:var(--surface-2);border-radius:2px;min-width:0}
.sl-sg{position:absolute;top:0;bottom:0;left:0;cursor:help;outline-offset:1px}
.sl-sg.tr{background:var(--ink-2);border-radius:2px 0 0 2px}
.sl-sg.sv{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.sl-c3d{font-size:var(--fs-cap);font-weight:650;color:var(--ink);white-space:nowrap;text-align:right;min-width:4.6em;cursor:help}
.sl-c3s{grid-column:1/-1;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.sl-c3leg{display:flex;flex-wrap:wrap;gap:3px 12px;margin:7px 0 2px;color:var(--ink-2);font-size:var(--fs-label)}
.sl-c3leg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sl-sw2{display:inline-block;width:14px;height:10px;border-radius:2px;flex:none}
.sl-sw2.tr{background:var(--ink-2)}
.sl-sw2.sv{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.sl-gap,.sl-next{margin:9px 0 0;font-size:var(--fs-cap);line-height:1.5}
.sl-why{margin:7px 0 0;line-height:1.5;color:var(--ink-2)}
.sl-all{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.sl-all>summary{cursor:pointer;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:4px 0}
.sl-allb>p{margin:6px 0}
.sl-tblw{max-width:100%;overflow-x:auto}
.sl-tbl{border-collapse:collapse;font-size:var(--fs-label);width:100%}
.sl-tbl th,.sl-tbl td{padding:3px 4px;text-align:right;border-bottom:1px solid var(--line-2);white-space:nowrap}
.sl-tbl th{font-weight:650;color:var(--ink-2);font-size:var(--fs-label);vertical-align:bottom;white-space:normal;line-height:1.25}
.sl-tbl th:first-child,.sl-tbl td:first-child{text-align:left}
.sl-tbl tr.me td{font-weight:750;color:var(--ink)}
.sl-tbl tr.ok td:last-child{color:var(--ink)}

/* ---------- settings ---------- */
.sl-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.sl-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.sl-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.sl-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.sl-prod li{margin-bottom:6px}
.sl-prod code,.sl-app .refs code{word-break:break-word}

/* ---------- dock: the size on a 100M–1T track; ring = the best size, dot = the current one ---------- */
.sl-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px}
.sl-dk b{position:absolute;top:1px;width:10px;height:10px;margin-left:-5px;box-sizing:border-box;border:2px solid var(--ink-2);border-radius:50%}
.sl-dk i{position:absolute;top:2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink)}

@media (max-width:760px){
  /* phones: the picture first, then the numbers (R7.3) */
  .sl-stage{display:flex;flex-direction:column}
  .sl-stage>.stage-head{order:1}
  .sl-stage>.sl-graph{order:2}
  .sl-stage>.metrics{order:3}
  .sl-stage>details.math{order:4}
  .sl-graph{padding:10px 10px 10px}
  .sl-tsl{grid-template-columns:minmax(0,1fr)}
  .sl-trow{grid-template-columns:minmax(0,1fr) 52px;gap:4px 10px}
  .sl-trow .sl-tn{grid-column:1/-1}
  .sl-trow .sl-ttr{grid-column:1}
  .sl-leg{gap:5px 12px;font-size:var(--fs-label)}
}
@media (prefers-reduced-motion:reduce){.sl-ttr i{transition:none}}
@media (max-width:760px){.mathbody .sl-fx{font-size:var(--fs-math)}}

/* serving-capstone: one chat service, three linked views (the live strip, the KV pool, the timeline), the metrics and a request's trace.
   Colours (R5.6): KV cache amber (the pool; shared prompts a deeper amber, idle ones hatched amber, free grey); green and red only for goals;
   each kind of request has its own colour, the same in every view (short chat slate, document ink, and one per app). */
.sc-app{--sc-chat:#A3A8AF;--sc-doc:var(--ink);--sc-support:#0B7D8A;--sc-manual:#0B7D8A;--sc-policy:#DA86B4;--sc-codebase:#5A616C;--sc-paper:#A8326E;--sc-code:#A8326E;--sc-contracts:#62B9C2;--sc-kvd:#9A5B00;--sc-warn:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 16%,transparent) 0 3px,transparent 3px 7px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sc-app{--sc-chat:#7D838C;--sc-support:#3DBAC6;--sc-manual:#3DBAC6;--sc-policy:#F2A6CD;--sc-codebase:#C3C9D2;--sc-paper:#E8639F;--sc-code:#E8639F;--sc-contracts:#1E8791;--sc-kvd:#B8790E}}
:root[data-theme="dark"] .sc-app{--sc-chat:#7D838C;--sc-support:#3DBAC6;--sc-manual:#3DBAC6;--sc-policy:#F2A6CD;--sc-codebase:#C3C9D2;--sc-paper:#E8639F;--sc-code:#E8639F;--sc-contracts:#1E8791;--sc-kvd:#B8790E}

/* a wide stage: the rail above Settings on the left, the stage on the right (the kit's 761–1180 px layout, at every desktop width) */
@media (min-width:1181px){.sc-app .bench{grid-template-columns:318px minmax(0,1fr)}.sc-app .bench>.rail{grid-column:1;grid-row:1}.sc-app .bench>.controls{grid-column:1;grid-row:2}.sc-app .bench>.stage{grid-column:2;grid-row:1 / span 2}}
.sc-stage .stage-head{align-items:center}
.sc-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.sc-cfgrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 14px;margin:6px 0 2px}
.sc-pills{display:flex;flex-wrap:wrap;gap:4px}
.sc-pill{font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.2;padding:2px 7px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--surface);cursor:help;white-space:nowrap}
.sc-pill.on{border-color:var(--ink);color:var(--ink);font-weight:650}
.sc-stage .meter-sub{font-size:var(--fs-ui)}
.sc-kinds{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:var(--fs-label);color:var(--ink-2)}
.sc-kinds>span{display:inline-flex;align-items:center;gap:5px;cursor:help}
.sc-sw{display:inline-block;width:11px;height:11px;border-radius:2px;flex:none;vertical-align:-1px}
.sc-sw-ok{background:var(--c-ok)}
.sc-graph{padding:10px 12px 12px;display:grid;gap:10px}
.sc-graph[data-focus="strip"] .sc-strip,.sc-graph[data-focus="mem"] .sc-mem,.sc-graph[data-focus="tl"] .sc-tlw{outline:2px dashed var(--focus-frame);outline-offset:3px;border-radius:4px}

/* ---------- the live strip: queue → GPU step → tokens out ---------- */
.sc-strip{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1.75fr) 14px minmax(0,1fr);align-items:stretch;gap:0 4px}
.sc-arr{display:grid;place-items:center;color:var(--ink-3);font-size:var(--fs-stage)}
.sc-box{border:1px solid transparent;border-radius:8px;background:var(--surface-2);padding:7px 8px 8px;min-width:0;display:flex;flex-direction:column;gap:5px;transition:border-color .2s,box-shadow .2s}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.sc-box.hot{border-color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 18%,transparent)}
.sc-bh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 6px;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.sc-bh b{color:var(--ink);font-weight:650;font-size:var(--fs-cap)}
.sc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:3px 4px;height:34px;overflow:hidden;align-content:flex-start}
.sc-qg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px}
.sc-qw{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink);padding:0 5px 0 3px;border:1px solid var(--line);border-radius:999px;cursor:help;white-space:nowrap}
.sc-q .sc-qg[data-why="cap"] .sc-qw,.sc-q .sc-qg[data-why="budget"] .sc-qw,.sc-q .sc-qg[data-why="memory"] .sc-qw{border-color:var(--ink)}
.sc-chip{width:12px;height:12px;padding:0;border:0;border-radius:3px;background:var(--k);cursor:pointer}
.sc-chip.sel,.sc-dot.sel{outline:2px solid var(--ink);outline-offset:1px}
.sc-chip.rel,.sc-dot.rel{outline:1.5px dashed var(--ink);outline-offset:1px}
.sc-more{font-size:var(--fs-mark);color:var(--ink-2)}
.sc-empty{font-size:var(--fs-label);color:var(--ink-3)}
.sc-meters{display:flex;flex-wrap:wrap;gap:3px 10px}
.sc-meter{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-mark);color:var(--ink-2);cursor:help;border-radius:3px;padding:0 2px}
.sc-meter i{display:inline-block;width:46px;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.sc-meter i b{display:block;height:100%;background:var(--ink-3)}
.sc-meter em{font-style:normal;color:var(--ink);font-size:var(--fs-mark)}
.sc-meter.hot{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}
.sc-meter.hot i b{background:var(--ink)}
.sc-gbar{position:relative;height:30px;background:var(--surface);border-radius:3px;overflow:hidden}   /* inside a soft panel (var(--surface-2)), so a track or a highlight is var(--surface) (精装修 step 2) */
.sc-gbar i{position:absolute;top:0;bottom:0;display:block}
.sc-sl{background:var(--k);cursor:pointer}
.sc-pb{background:var(--k);cursor:pointer;display:flex!important;align-items:center;overflow:hidden}
.sc-pb em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--bg);padding-left:6px;white-space:nowrap;font-weight:600}
.sc-sl.sel,.sc-pb.sel{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3px var(--bg)}
.sc-sl.rel,.sc-pb.rel{box-shadow:inset 0 0 0 1.5px var(--bg)}
.sc-gbar i.sc-sweep{left:0;top:auto;bottom:0;height:4px;background:var(--ink);box-shadow:0 -1px 0 var(--bg);pointer-events:none;z-index:1}
.sc-idle{display:grid;place-items:center;height:100%;font-size:var(--fs-label);color:var(--ink-3)}
.sc-gpu.warn{border:2px dashed var(--ink);padding:6px 7px 7px}
.sc-gpu.warn .sc-gbar::after{content:'';position:absolute;inset:0;background:var(--sc-warn);pointer-events:none}
.sc-gdur{display:flex;align-items:center;gap:8px;min-height:16px;font-size:var(--fs-label);color:var(--ink-2);flex-wrap:wrap}
.sc-dt{font-size:var(--fs-cap);font-weight:650;color:var(--ink)}
.sc-elap{font-size:var(--fs-label);color:var(--ink-2)}
.sc-gauge{position:relative;width:64px;height:6px;background:var(--surface-2);border-radius:3px;cursor:help;flex:none}
.sc-gauge i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:3px}
.sc-gpu.warn .sc-gauge i{background:var(--ink)}
.sc-gauge b{position:absolute;left:50%;top:-3px;bottom:-3px;border-left:1.5px dashed var(--ink)}
.sc-warn{font-weight:650;color:var(--ink);font-size:var(--fs-label)}
.sc-dnote{color:var(--ink-3)}
.sc-dots{display:flex;flex-wrap:wrap;gap:3px;height:28px;overflow:hidden;align-content:flex-start;align-items:center}
.sc-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--k);cursor:pointer;animation:scpop .32s ease-out}
.sc-dot.f{width:11px;height:11px;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--k)}
@keyframes scpop{from{transform:scale(.2);opacity:.2}to{transform:scale(1);opacity:1}}
.sc-onote{font-size:var(--fs-label);color:var(--ink-3);height:32px;overflow:hidden;line-height:16px}
.sc-out.hot .sc-onote{color:var(--ink);font-weight:650}

/* ---------- playback ---------- */
.sc-play{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.sc-play input[type=range]{flex:1 1 140px;min-width:100px}
.sc-pbtn{min-width:92px}
.sc-ls{display:none}
.sc-speed button{padding:4px 7px;font-size:var(--fs-label)}
.sc-speed{cursor:help}
.sc-clock{margin:-4px 0 0;font-size:var(--fs-label);color:var(--ink-2);line-height:1.4;height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- the timeline ---------- */
.sc-tlw{display:grid;gap:3px;min-width:0}
.sc-tlbox{position:relative;min-width:0}
.sc-tlbox canvas{display:block;width:100%;cursor:pointer;border-radius:2px}
.sc-tlbox canvas:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sc-stall{position:absolute;z-index:2;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1;padding:3px 7px;border:1.5px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:650;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow)}
.sc-stall:hover{background:var(--surface-2)}
.sc-stall.sc-pulse{animation:scpulse .7s ease-in-out 3}
@keyframes scpulse{50%{transform:scale(1.14);box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 22%,transparent)}}
.sc-axis{position:relative;height:14px;font-size:var(--fs-mark);color:var(--ink-3)}
.sc-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.sc-axis span.sc-ax-r{transform:translateX(-100%)}
.sc-axis span.sc-ax-l{transform:none}
.sc-maxis{margin-top:1px}
.sc-tlleg,.sc-mleg{margin-top:0;font-size:var(--fs-label)}
.sw.sc-sw-wait{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border:0}
.sw.sc-sw-pre{background:var(--ink-3)}
.sw.sc-sw-first{width:3px;background:var(--ink);border-radius:0}
.sw.sc-sw-dec{height:2px;background:var(--ink-3);opacity:.85}
.sw.sc-sw-hol{height:6px;border:1px dashed var(--ink-2);background:transparent}
.sw.sc-sw-band{background:color-mix(in srgb,var(--ink) 9%,transparent);border:1.5px dashed var(--ink-2);border-top:0;border-bottom:0}
.sw.sc-sw-goal{background:linear-gradient(90deg,var(--c-ok) 50%,var(--c-oom) 50%)}
.sw.sc-sw-head{width:2px;background:var(--ink);border-radius:0}

/* ---------- the KV pool ---------- */
.sc-mem{display:grid;gap:2px;min-width:0;border-radius:4px;transition:box-shadow .2s}
.sc-mem.hot{box-shadow:0 0 0 2px var(--ink)}
.sc-memh{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
@media (max-width:760px){.sc-memh{display:grid;gap:0}.sc-memv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:1.4em}}
.sc-memv{font-size:var(--fs-label);color:var(--ink-2)}
.sc-mlab{position:relative;height:17px}
/* the memory bar's labels; .sc-mb is also a Show the math block, so these rules stay inside #sc-mlab (the owner's review of 2026-10-09) */
.sc-mlab .sc-mb{position:absolute;bottom:1px;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1;padding:2px 5px;border-radius:999px;background:var(--surface);color:var(--ink);border:1.5px solid var(--k);font-weight:650;z-index:1}
.sc-mlab .sc-mb-idle{font-weight:500;border-style:dashed;color:var(--ink-2)}
.sc-mlab .sc-mb-ev{border:1.5px dashed var(--ink);color:var(--ink)}
.sc-mbar{position:relative;height:26px;background:var(--surface-2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.sc-ms{position:absolute;top:0;bottom:0;display:block;min-width:1px}
.sc-ms-sh{background:var(--sc-kvd);box-shadow:inset 0 4px 0 var(--k),inset -1px 0 0 var(--bg);cursor:help}
.sc-ms-own{background:var(--c-kv);box-shadow:inset 0 4px 0 var(--k),inset -1px 0 0 color-mix(in srgb,var(--bg) 55%,transparent);cursor:pointer}
.sc-ms-idle{background:repeating-linear-gradient(135deg,var(--c-kv) 0 2px,transparent 2px 5px);box-shadow:inset 0 4px 0 color-mix(in srgb,var(--k) 55%,transparent);cursor:help}
.sc-ms-resv{border:1.5px dashed var(--c-kv);border-left-width:0;background:color-mix(in srgb,var(--c-kv) 10%,transparent);cursor:help}
.sc-ms-ev{border:1.5px dashed var(--ink);background:color-mix(in srgb,var(--ink) 12%,transparent);z-index:2}
.sc-ms.sel{outline:2px solid var(--ink);outline-offset:-2px;z-index:3}
.sc-ms.rel{outline:1.5px dashed var(--ink);outline-offset:-2px;z-index:3}
.sw.sc-sw-sh{background:var(--sc-kvd)}
.sw.sc-sw-own{background:var(--c-kv);box-shadow:inset 0 3px 0 var(--ink-3)}
.sw.sc-sw-idle{background:repeating-linear-gradient(135deg,var(--c-kv) 0 2px,transparent 2px 4.5px)}
.sw.sc-sw-resv{border:1.5px dashed var(--c-kv);background:transparent}
.sw.sc-sw-free{background:var(--surface-2);border:1px solid var(--line)}
.sw.sc-sw-ev{border:1.5px dashed var(--ink);background:transparent}

/* ---------- metrics and the trace ---------- */
.sc-low{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
.sc-low.has-trace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@container (max-width:640px){.sc-low.has-trace{grid-template-columns:minmax(0,1fr)}}
.sc-trace.sc-trempty{border:0;padding:0;background:none}
.sc-trhint{margin:0}
.sc-tab tr.sc-grp th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.05em;color:var(--ink-3);font-weight:600;padding-top:7px;border-bottom:1px solid var(--line)}
.sc-tab{width:100%;border-collapse:collapse;font-size:var(--fs-label);margin-top:4px}
.sc-tab th,.sc-tab td{padding:3px 6px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap}
.sc-tab thead th{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:600;color:var(--ink-3);border-bottom:1px solid var(--line)}
.sc-tab thead th[data-tipx]{cursor:help}
.sc-tab tbody th{text-align:left;font-weight:500;color:var(--ink-2);white-space:normal;cursor:help;padding-left:10px}
.sc-tab td{color:var(--ink)}
.sc-dd{color:var(--ink-2)!important;font-size:var(--fs-label)}
.sc-okc{color:var(--c-ok)!important;font-weight:650}
.sc-badc{color:var(--c-oom)!important;font-weight:650}
.sc-m2{display:none}
.sc-trace{min-width:0;border:1px solid transparent;border-radius:8px;padding:8px 10px;background:var(--surface-2)}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.sc-trh{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-bottom:4px}
.sc-trh b{font-size:var(--fs-cap)}
.sc-unsel{margin-left:auto}
.sc-tr{list-style:none;margin:4px 0 0;padding:0 0 0 2px;font-size:var(--fs-label);line-height:1.4}
.sc-tr li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;padding:2px 0 3px 12px;position:relative;border-left:2px solid var(--line)}
.sc-tr li::before{content:'';position:absolute;left:-5px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.sc-tr li.sc-tr-w::before{background:var(--surface);border:1.5px solid var(--ink-3);width:5px;height:5px}
.sc-trt{color:var(--ink-3);font-size:var(--fs-label)}
.sc-scope{margin:8px 0 0;cursor:help}
/* the whole-run table's button reads as Show the math's summary does (the kit's details.math summary: a boxed + that turns to −) */
.sc-rtbtn{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:var(--fs-ui);font-weight:650;cursor:pointer;text-align:left}
.sc-rtbtn::before{content:"+";font-family:var(--font-mono);font-weight:650;width:18px;height:18px;flex:0 0 18px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:3px;font-size:var(--fs-label)}
.sc-rtbtn[aria-expanded="true"]::before{content:"−"}
.sc-stage>.sc-mtw{margin-top:8px}
.sc-hint{display:none}
.sc-simpl ul{margin:4px 0 0;padding-left:18px}
.sc-simpl li{margin-bottom:3px}

/* ---------- rail: goals, levers, the challenge ---------- */
.sc-goalcard,.sc-load{border:1px solid transparent;border-radius:8px;padding:8px 10px;background:var(--surface-2);margin:8px 0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.sc-gc-h{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.04em;color:var(--ink-2);margin-bottom:4px}
.sc-lock{display:inline-grid;place-items:center;color:var(--ink)}
.sc-goalcard ul{list-style:none;margin:0;padding:0;font-size:var(--fs-cap);line-height:1.45}
.sc-goalcard li{display:flex;gap:7px;align-items:baseline;margin:3px 0}
.sc-goalcard li .sc-sw{flex:none;transform:translateY(1px)}
.sc-ic-play .sc-prow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.sc-lvlead{margin:10px 0 4px}
.sc-hits{margin-top:10px}
.sc-hits .cmp-val{white-space:nowrap}
.sc-hitleg{margin-top:4px}
.sc-hitleg .sc-dash{display:inline-block;width:14px;height:0;border-top:2px dashed var(--ink);vertical-align:middle;margin-right:5px}
.sc-fb{margin:6px 0 0;padding-left:18px;font-size:var(--fs-cap);line-height:1.45}
.sc-fb li{margin-bottom:4px}
.sc-ldstrip{position:relative;height:22px;margin:6px 0 0;border-bottom:1px solid var(--ink-3)}
.sc-ldstrip i{position:absolute;bottom:3px;width:5px;height:12px;border-radius:1.5px;transform:translateX(-50%)}
.sc-ldstrip i.sc-ld-doc{width:7px;height:19px;bottom:1px;border-radius:1px}
.sc-ldaxis{position:relative;height:13px;font-size:var(--fs-mark);color:var(--ink-3)}
.sc-ldaxis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.sc-ldaxis span:first-child{transform:none}.sc-ldaxis span:last-child{transform:translateX(-100%)}
.sc-ldleg{margin-top:4px}
.sc-load p{margin:0;font-size:var(--fs-cap);line-height:1.45}
.sc-chh{font-weight:650;font-size:var(--fs-cap);margin:12px 0 4px}
.sc-chset .inline-ctl{margin:6px 0}
.sc-chset .seg-ctl button{padding:5px 8px;font-size:var(--fs-label)}
.sc-chrun{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.sc-dirty{margin:6px 0 0;color:var(--ink);font-weight:600}
.sc-ch-res{margin-top:8px}
.sc-plan{margin-top:12px}
.sc-plantext{white-space:pre-wrap;font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.45;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:8px 10px;margin:0 0 6px;max-height:260px;overflow:auto}
.sc-jobs ul{list-style:none;margin:4px 0 0;padding:0;font-size:var(--fs-cap)}
.sc-jobs li{margin:0 0 8px;display:grid;gap:2px}
.sc-jobs li a{font-weight:650}
.sc-jobs li span{color:var(--ink-2);line-height:1.45}
.sc-rem{display:grid;gap:10px;margin:6px 0 10px}
.sc-rem-i{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center}
.sc-rem-i p{margin:0;font-size:var(--fs-cap);line-height:1.45}
.sc-rem-pic svg{display:block}
.sc-grp{margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px}
.sc-gh{font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.06em;color:var(--ink-3);margin-bottom:6px}
.sc-prod li{margin-bottom:6px}
.sc-prod code,.refs code{word-break:break-word}
.sc-cl{display:inline}
#sc-rail{overflow-anchor:none}

/* ---------- mini result bar ---------- */
.sc-dk{position:relative;display:flex;height:10px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:visible}
.sc-dk i{display:block;height:100%}
.sc-dk i.ok{background:var(--c-ok)}
.sc-dk i.bad{background:var(--c-oom)}
.sc-dk b{position:absolute;top:-3px;bottom:-3px;border-left:1.5px dashed var(--ink)}

/* ---------- phones: the strip, a control and the timeline on the first screen (R7.3); the numbers as two lines ---------- */
@media (max-width:760px){
  .sc-stage{display:flex;flex-direction:column}
  .sc-stage>.stage-head{order:1}
  .sc-stage>.sc-cfgrow{order:2;margin:4px 0 0}
  .sc-kinds{font-size:var(--fs-mark);gap:2px 8px}
  .sc-pill{font-size:var(--fs-mark);padding:1px 4px}
  .sc-stage>.sc-graph{order:3}
  .sc-stage>.sc-m2{order:4}
  .sc-stage>.sc-low{order:5}
  .sc-stage>.sc-foot{order:6;display:flex;flex-direction:column}
  .sc-foot>.sc-scope{order:-1}
  .sc-rtbtn{display:none}
  .sc-graph{padding:8px 0 10px;gap:7px}
  .sc-graph>.sc-strip{order:1}.sc-graph>.sc-play{order:2}.sc-graph>.sc-tlw{order:3}.sc-graph>.sc-mem{order:4}.sc-graph>.sc-clock{order:5}
  .sc-stage{padding:10px 10px 12px}
  .sc-stage .meter-title{display:none}
  .sc-stage .meter-sub{font-size:var(--fs-cap);margin-top:0}
  .sc-stage>.stage-head{flex-wrap:nowrap;align-items:center}
  .sc-stage .status{padding:3px 6px;font-size:var(--fs-mark)}
  .sc-cfgrow{justify-content:flex-start;gap:3px 8px}
  .sc-of,.sc-elap{display:none}
  .sc-strip{grid-template-columns:minmax(0,.9fr) 9px minmax(0,1.5fr) 9px minmax(0,.9fr);gap:0 1px}
  .sc-arr{font-size:var(--fs-mark)}
  /* refit step 2 (2026-10-24): the headers and the queue's reason pills are 11 px now (10.5 and 9.5 before); at 390 px “GPU：空闲，请求
     全部完成” ran 4 px past the GPU box and “等这步结束” or “memory full” past the queue. The boxes' sides are 3 px instead of 5 and the
     strip's gaps 1 px instead of 2, so each box has 5–6 px more inside; with the 2 px dashed frame of a long step the GPU box keeps the
     same inner size (it took the desktop's padding and lost 6 px) */
  .sc-box{padding:5px 3px 6px;gap:3px}
  .sc-gpu.warn{padding:4px 2px 5px}
  .sc-bh{font-size:var(--fs-mark)}
  .sc-bh b{font-size:var(--fs-label)}
  .sc-meters{display:none}
  .sc-gbar{height:24px}
  .sc-pb em{font-size:var(--fs-mark);padding-left:3px}
  .sc-gdur .sc-dnote,.sc-gdur .sc-gauge{display:none}
  .sc-warn{font-size:var(--fs-mark)}
  /* refit step 3 (2026-10-25): at 375 and 360 px “whole batch”, “memory full” and “等这步结束” ran 5–11 px past the queue box (“whole
     batch” 3 px at 390). On a phone a reason pill shows its words without the 10 px icon, so each fits on one line down to 360 px;
     narrower, it takes two balanced lines (“whole / batch”) at 11 px. One line keeps its 19 px */
  .sc-qw{font-size:var(--fs-mark);padding:1.5px 3px 1.5px 2px;line-height:14px;white-space:normal;text-wrap:balance;border-radius:9px}
  .sc-qw svg{display:none}
  .sc-chip{width:10px;height:10px}
  .sc-dot{width:8px;height:8px}
  .sc-onote{font-size:var(--fs-mark);height:28px;line-height:14px}
  /* the chips under a pill were cut in half (a 19 px pill, then 10 px chips from 22 px down, in 28 px), and a second reason with its
     chips did not show at all. The queue box has room below them (the tokens-out box sets the strip's height): 64 px hold two reasons
     with their chips, 2 px between rows, and the strip keeps its height */
  .sc-chips{height:64px;row-gap:2px}
  .sc-qg{row-gap:2px}
  .sc-q{padding-bottom:4px}
  .sc-more{line-height:10px}   /* “+2” on a row of its own after two reasons is as tall as a row of chips, so it fits the 64 px */
  .sc-dots{height:24px}
  .sc-pills{flex-wrap:nowrap;overflow:hidden;max-width:100%}
  .sc-m2l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .sc-clock{font-size:var(--fs-label)}
  .sc-play{gap:5px}
  .sc-play .btn.sm{padding:5px 8px}
  .sc-pbtn{min-width:70px}
  .sc-speed button{padding:4px 5px;font-size:var(--fs-mark)}
  .sc-play input[type=range]{flex:1 1 50px;min-width:50px}
  .sc-rt,.sc-lw{display:none}
  .sc-ls{display:inline}
  .sc-stage .meter-sub{display:none}
  .sc-stage>.stage-head{display:none}
  .sc-cfgrow{min-height:22px}
  .sc-tlw>.sc-cap,.sc-tlleg{display:none}
  .sc-mlab{height:16px}
  .sc-mlab .sc-mb{font-size:var(--fs-mark);padding:1px 4px}
  .sc-mleg{font-size:var(--fs-mark)}
  .sc-m2{display:grid;gap:3px;margin-top:8px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}   /* a soft panel, no frame inside the stage (精装修 step 2) */
  .sc-m2l{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-label);color:var(--ink-2)}
  .sc-m2l b{color:var(--ink);white-space:nowrap}
  .sc-m2n{text-align:right;font-size:var(--fs-mark)}
  .sc-low{grid-template-columns:minmax(0,1fr)}
  .sc-mtw{display:none}
  .sc-rem-i{grid-template-columns:72px minmax(0,1fr)}
  .sc-rem-pic svg{width:72px;height:auto}
}
@media (prefers-reduced-motion:reduce){.sc-dot{animation:none}.sc-stall.sc-pulse{animation:none;outline:2px solid var(--ink)}.sc-box,.sc-mem{transition:none}}

/* the trace card on a desktop: beside the selected row of the timeline (review r1, A1) */
.sc-tcard{position:absolute;z-index:4;width:min(380px,56%);max-height:236px;overflow:auto;background:var(--surface);border:1.5px solid var(--ink);border-radius:8px;box-shadow:var(--shadow);padding:6px 10px;font-size:var(--fs-label);line-height:1.4}
.sc-tcard .sc-tr li{padding-bottom:2px}
.sc-tcard .sc-trh{margin-bottom:4px}
.sc-tcard .sc-tr{margin:0}
@media (max-width:760px){.sc-tcard{display:none!important}}
.sc-trace{scroll-margin-top:120px}

/* the two-line comparison beside the status badge on a desktop (review r1, S15); phones have #sc-m2 under the stage */
.sc-stage .stage-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sc-m2d{min-width:230px;font-size:var(--fs-label);line-height:1.35}
.sc-m2d .sc-m2l{display:flex;justify-content:space-between;gap:10px}
.sc-m2d .sc-m2l b{font-weight:650;white-space:nowrap}
.sc-m2d .sc-m2n{text-align:right;font-size:var(--fs-mark)}
@media (max-width:760px){.sc-m2d{display:none}}

/* part 5: each option's result carries its bar (review r1, S1/S13); part 6: two-line results */
.sc-lvbar{display:block;position:relative;height:6px;margin-top:4px;background:var(--line);border-radius:2px;min-width:90px}
.sc-lvbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px}
.lever[aria-pressed="true"] .sc-lvbar i{background:var(--ink)}
.sc-lvbar b{position:absolute;top:-2px;bottom:-2px;width:0;border-left:1.5px dashed var(--ink)}
.sc-lvs{display:block;font-size:var(--fs-mark);color:var(--ink-2);margin-top:2px;white-space:normal}
.sc-polres{margin:4px 0 0;min-height:1em}
.sc-barleg{margin-top:6px}

.sc-pb.sc-anon{background:var(--ink-3)}
.lever[aria-pressed="true"] .sc-lvbar{background:color-mix(in srgb,var(--bg) 35%,transparent)}
.lever[aria-pressed="true"] .sc-lvbar i{background:var(--bg)}
.lever[aria-pressed="true"] .sc-lvbar b{border-left-color:var(--bg)}
.lv-r:has(.sc-lvbar){min-width:110px}
.sc-app .lever .lv-r{white-space:normal;max-width:52%;text-align:right}
.sc-m2{grid-template-columns:minmax(0,1fr)}
.sc-m2l,.sc-m2l span{min-width:0}
/* review r2: an option's result never breaks inside a word (N5); the trace card grows with its text, or sits under the timeline (N4) */
.sc-lv1{display:block;white-space:nowrap}
.sc-app .lever .lv-r{word-break:keep-all;overflow-wrap:normal}
.sc-tcard{max-height:none;overflow:visible}
.sc-tcard.sc-below{position:relative;left:auto;top:auto;width:auto;margin-top:6px;box-shadow:none}
.sc-app .lever .lv-r:not(:empty){min-width:min(150px,45%)}
.lever[aria-pressed="true"] .sc-lvs{color:inherit;opacity:.85}
/* review r2: results that grow when a run ends (the option rows' two lines, the result box) must not let the browser's scroll anchoring
   move the page; the kit pauses anchoring only right after a tap, and a run can end 15 s later */
.sc-app{overflow-anchor:none}

/* review r3 (R3.17, R7.8): an option's result sits on its own line under the title and description, so the title always stays horizontal;
   the selected token's ring stays inside its box; a segmented control wraps instead of hiding its last option */
.sc-app .lever .lv-r{grid-column:2 / 4;grid-row:3;text-align:left;max-width:none;min-width:0;white-space:normal;padding-top:2px;font-weight:650}
/* kit round K: levers are a flex row now; keep the result on its own line after the description */
.sc-app .lever .lv-r{order:4;flex:1 0 100%;margin-left:0;padding-left:24px}
.sc-app .lever .lv-r:empty{display:none}
.sc-dots{padding:4px 3px;height:36px;box-sizing:border-box}
@media (max-width:760px){.sc-dots{height:32px}}
.sc-app .seg-ctl{flex-wrap:wrap}
.sc-app .seg-ctl button{flex:1 1 auto;min-width:0;white-space:nowrap}
/* R5.8: the label beside a prefill that blocks others */
.sc-pflab{position:absolute;z-index:2;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1;padding:2px 5px;border:1px solid var(--ink);border-radius:3px;background:var(--surface);color:var(--ink);white-space:nowrap;pointer-events:none}
.sc-pflab.sc-pf2{line-height:1.3;text-align:right}
.sc-pflab.sc-pfband{text-align:left}
.sc-app .seg-ctl[data-key="ch-cb"] button{flex:1 1 30%}   /* 3 + 2 rows, never one option alone (review B4, N8) */

/* part 3's "Why a middle budget works best": the trade-off behind an expander, so the result box fits one screen (GPT review of B4 v4, P3; R3.10, R2.6) */
.obs details.sc-why{margin:8px 0 0;border-top:1px solid var(--line-2);padding-top:8px}
.obs details.sc-why summary{cursor:pointer;font-weight:650;list-style:none;display:flex;align-items:center;gap:8px;font-size:var(--fs-cap);border-radius:3px}
.obs details.sc-why summary::-webkit-details-marker{display:none}
.obs details.sc-why summary::before{content:"+";flex:none;font-family:var(--font-mono);width:18px;height:18px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:3px;font-size:var(--fs-label)}
.obs details.sc-why[open] summary::before{content:"−"}
.obs details.sc-why summary:hover{text-decoration:underline;text-underline-offset:3px}
.obs details.sc-why summary:focus-visible{outline:2px solid var(--ink,currentColor);outline-offset:2px}
.obs details.sc-why>p{margin:8px 0 0}

/* the live strip keeps one height while it plays (product owner, 29 Sep: "the animation keeps bouncing"): the GPU box has fixed rows;
   its duration row and its warning/contents row are one line each, and the header and meters never wrap */
.sc-gpu .sc-bh{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.sc-meters{flex-wrap:nowrap;white-space:nowrap;min-height:17px;overflow:hidden}
.sc-gdur{display:grid;grid-template-rows:17px 17px;row-gap:2px;align-items:center;flex-wrap:nowrap}
.sc-gr1,.sc-gr2{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.sc-gr2 .sc-warn,.sc-gr2 .sc-dnote{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:760px){.sc-gdur{grid-template-rows:15px 15px;row-gap:1px}}
/* refit step 3: at 375 and 360 px “GPU：空闲，请求全部完成” (132 px) is wider than the GPU box; once the GPU is idle the header may take
   two balanced lines, and the duration rows, empty while it is idle, give it their room, so the strip keeps its height */
@media (max-width:760px){.sc-gpu:has(.sc-idle) .sc-bh{white-space:normal;text-wrap:balance}.sc-gpu:has(.sc-idle) .sc-gdur{grid-template-rows:0 0;row-gap:0}}
/* part 7: the scheduler's code, synced with the playhead. One row per line, a fixed height, no wrapping: nothing moves while it plays (R7.9) */
.sc-wc{border:1px solid transparent;border-radius:8px;background:var(--surface-2);padding:7px 10px 6px;min-width:0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.sc-wc[hidden]{display:none}
.sc-graph[data-focus="code"] .sc-wc{outline:2px dashed var(--focus-frame);outline-offset:3px}
.sc-wch{display:flex;align-items:center;height:20px;overflow:hidden;white-space:nowrap}
.sc-wch .sc-cap{overflow:hidden;text-overflow:ellipsis}
/* the legend under the header, so it is on screen with the code (review A, finding 3); its items never change, so its height is fixed */
.sc-wc .sc-wleg{margin:3px 0 5px;gap:4px 14px;font-size:var(--fs-mark)}
.sc-wcb{font-family:var(--font-mono);font-size:var(--fs-label);line-height:14px}
/* refit step 2 (2026-10-24, the owner's choice on a decision card): on a desktop the box shows 14 of the 28 lines, so the queue, the GPU
   box and the code fit on screen together; followCode keeps the step's lines in view and the reader can scroll the rest. A faded edge
   says more lines are there (data-more). Phones keep all 28 lines: the page scrolls there */
@media (min-width:761px){
  .sc-wcb{height:calc(14 * 14px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .sc-wcb[data-more="up"]{-webkit-mask-image:linear-gradient(transparent,#000 10px);mask-image:linear-gradient(transparent,#000 10px)}
  .sc-wcb[data-more="down"]{-webkit-mask-image:linear-gradient(#000 calc(100% - 10px),transparent);mask-image:linear-gradient(#000 calc(100% - 10px),transparent)}
  .sc-wcb[data-more="both"]{-webkit-mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 10px),transparent)}
}
/* one row per line, 14 px, never wrapping: nothing moves while it plays (R7.9) */
.sc-wl{display:grid;grid-template-columns:2.6ch minmax(0,52ch) minmax(12ch,1fr);column-gap:10px;align-items:center;height:14px;border-radius:2px;padding-right:4px}
.sc-wn{color:var(--ink-3);text-align:right;font-size:var(--fs-mark)}
.sc-wx{font:inherit;white-space:pre;overflow:hidden;text-overflow:ellipsis;padding:0 0 0 calc(var(--i) * 4ch);color:var(--ink);background:none;border:0}
.sc-wcm{color:var(--ink-3)}
.sc-wv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:650;font-size:var(--fs-mark);text-align:left}
.sc-wv[data-tipx]{cursor:help}
.sc-wl.ran{background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:inset 3px 0 var(--ink-2)}
.sc-wl.now{background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* runs at the step's end: a dashed bar, less faded than a skipped line (review A, finding 12) */
.sc-wl.next{background:linear-gradient(var(--ink-2) 55%,transparent 0) 0 0/3px 5px repeat-y}
.sc-wl.next .sc-wx,.sc-wl.next .sc-wn{opacity:.55}
.sc-wl.skip{opacity:.38}
.sc-wl.stop{background:color-mix(in srgb,var(--c-oom) 14%,transparent);box-shadow:inset 3px 0 var(--c-oom)}
.sc-wl.stop .sc-wv{color:var(--c-oom)}
/* the line that decides the moment's step: a heavier bar and bold code (review A, suggestion 1) */
.sc-wl.key .sc-wx{font-weight:700}
.sc-wl.key .sc-wn{color:var(--ink);font-weight:700}
.sc-wl.ran.key{box-shadow:inset 5px 0 var(--ink)}
.sc-wl.stop.key{box-shadow:inset 5px 0 var(--c-oom)}
@keyframes scwlf{from{background-color:color-mix(in srgb,var(--ink) 30%,transparent)}}
.sc-wl.ran.sc-wlf{animation:scwlf .8s ease-out}
@media (prefers-reduced-motion:reduce){.sc-wl.sc-wlf{animation:none}}
.sw.sc-sw-wran{background:color-mix(in srgb,var(--ink) 14%,transparent);border:0;box-shadow:inset 3px 0 var(--ink-2)}
.sw.sc-sw-wnow{background:transparent;border:1.5px solid var(--ink)}
.sw.sc-sw-wnext{background:linear-gradient(var(--ink-2) 55%,transparent 0) 0 0/3px 5px repeat-y;border:0}
.sw.sc-sw-wskip{background:transparent;border:1px solid var(--ink-3);opacity:.5}   /* a faded, empty line (review B, B15) */
.sw.sc-sw-wstop{background:color-mix(in srgb,var(--c-oom) 30%,transparent);border:0;box-shadow:inset 3px 0 var(--c-oom)}
.sc-momok{font-weight:650}
/* a phone's line under the code to the card's observation (review B, B10) */
.sc-wobs{margin:6px 0 0}
/* narrower desktop stages: the GPU box's two meters keep their numbers and short bars, their names in the tooltips (review B, B13) */
@media (min-width:761px) and (max-width:1240px){.sc-meter>span{display:none}.sc-meter i{width:24px}}
@media (min-width:761px) and (max-width:899px){.sc-meter i{display:none}}
/* ... and below 1,000 px the GPU box's header drops “of 1,126” (the code panel's header keeps it), so “, done” fits in both languages */
@media (min-width:761px) and (max-width:1000px){.sc-of{display:none}}
@media (min-width:761px) and (max-width:840px){.sc-gpu .sc-bh{letter-spacing:0;font-size:var(--fs-mark)}}
/* narrower stages: a 2-space indent, so the longest line fits beside the values (review A, finding 4) */
@media (max-width:1180px){.sc-wx{padding-left:calc(var(--i) * 2ch)}}
@media (max-width:760px){
  .sc-graph>.sc-wc{order:3}.sc-graph>.sc-tlw{order:4}.sc-graph>.sc-mem{order:5}.sc-graph>.sc-clock{order:6}
  .sc-wc{padding:6px 5px 5px;margin:0 -6px}
  .sc-wc .sc-wleg{font-size:var(--fs-mark);gap:3px 10px;margin:2px 0 4px}
  .sc-wcb{font-size:var(--fs-mark);line-height:14px}
  .sc-wl{grid-template-columns:minmax(0,1fr) 13ch;column-gap:5px;height:14px;padding:0 2px 0 4px}   /* 13ch: “淘汰 1,536 块” fits at 390 */
  .sc-wn{display:none}
  .sc-wx{padding-left:calc(var(--i) * 2ch)}
  .sc-wv{font-size:var(--fs-mark)}
  /* phones drop the three loops' trailing comments, so every statement shows in full */
  .sc-wl:not([data-k="h"]) .sc-wcm{display:none}
  .sc-wl.ran.key{box-shadow:inset 4px 0 var(--ink)}
}

/* ---------- the home tile (sc-tz-): every request of the mission load as one thin row; grey met, red missed, the document boxed (R5.6) ---------- */
.sc-tz-vis{min-width:0}
.sc-tz-svg{display:block;width:100%;overflow:visible}
.sc-tz-svg .sc-tz-met{fill:var(--ink-3)}
.sc-tz-svg .sc-tz-miss{fill:var(--c-oom)}
.sc-tz-svg .sc-tz-w{opacity:.8}
.sc-tz-svg .sc-tz-box{fill:none;stroke:var(--ink);stroke-width:1}
.sc-tz-svg text.sc-tz-lab{fill:var(--ink);font-size:var(--fs-mark)}
.sc-tz-svg .sc-tz-base,.sc-tz-svg .sc-tz-tk{fill:var(--line)}
.sc-tz-svg .sc-tz-ax text{fill:var(--ink-3);font-size:var(--fs-mark)}
.sc-tz-svg text.sc-tz-cap{fill:var(--ink-3);font-size:var(--fs-mark)}
.sc-tz-rd{display:grid}
.sc-tz-rd>p{grid-area:1/1;min-width:0}
.sc-tz-twin{visibility:hidden;margin:0;font-size:var(--fs-cap);line-height:1.45}
.sc-tz-twin b{font-weight:650}
.sc-tz-leg>span[data-tipx]{cursor:help}
.sc-tz-sw{display:inline-block;flex:none;width:14px;height:10px;margin-right:5px}
.sc-tz-sw-w{background:linear-gradient(var(--ink-3),var(--ink-3)) center/100% 1px no-repeat}
.sc-tz-sw-t{background:linear-gradient(var(--ink-3),var(--ink-3)) center/100% 4px no-repeat}
.sc-tz-sw-miss,.sc-tz-sw-met{width:10px;border-radius:2px;background:var(--c-oom)}
.sc-tz-sw-met{background:var(--ink-3)}
.sc-tz-sw-box{height:9px;border:1px solid var(--ink);border-radius:2px}
/* H1/H2 (the owner, 2026-10-09): Show the math in short blocks with a hairline between them; in each block the name and the typeset
   formula, then this run's numbers under the terms they replace, the "=" signs lined up; a table wider than its box is set again by fitMath (below), so nothing scrolls sideways */
.mathbody .sc-mb{padding:8px 0 10px}
.mathbody .sc-mb+.sc-mb{border-top:1px solid var(--line)}
.sc-mb .sc-mlead{margin:0 0 4px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5}

.sc-mfx{overflow-x:auto;max-width:100%;padding-block:.3em}
.sc-mt{border-collapse:collapse}
.sc-mt th,.sc-mt td{padding:1px 3px;text-align:center;white-space:nowrap;vertical-align:baseline;font-weight:400;border:0;background:none}
.sc-mt th{font-family:var(--font-ui);text-align:right;white-space:nowrap;padding-right:6px;color:var(--ink-2)}
.sc-mt tr.sc-mname th{color:var(--ink);font-weight:600}
.sc-mt tr.sc-mname:not(:first-child) th,.sc-mt tr.sc-mname:not(:first-child) td{padding-top:8px}
.sc-mt td.sc-mres{text-align:left;white-space:normal}
.sc-mb .sc-mnote{margin:4px 0 0;font-family:var(--font-ui);font-size:var(--fs-label);line-height:1.5;color:var(--ink-2)}
/* Show the math on a box too narrow for its table (the owner's review of 2026-10-09): fitMath sets the block again, the name on its own
   line, the formula broken before an operator with the numbers under the terms they replace, nothing scrolling sideways */
.sc-mtn{border-collapse:collapse}
.sc-mtn th,.sc-mtn td{padding:1px 0;border:0;background:none;font-weight:400;text-align:left;vertical-align:top}
.sc-mtn tr.sc-mname th{font-family:var(--font-ui);font-weight:600;color:var(--ink);white-space:normal;padding:0 0 2px}
.sc-mtn tr.sc-mname:not(:first-child) th{padding-top:8px}
.sc-mtn .sc-mlbl{font-weight:400;color:var(--ink-2)}
.sc-mtn td.sc-meq{width:1%;padding-right:3px;white-space:nowrap}
.sc-mtn td.sc-mres{white-space:normal;padding-left:3px;line-height:1.5}
.sc-mfl{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.sc-mu{display:inline-grid;align-items:center;justify-items:center}
.sc-mc{padding:1px 3px;white-space:normal;line-height:1.5;text-align:center}
.sc-mc0{display:flex;align-items:center;justify-content:center;height:1.9em;white-space:nowrap}
.sc-mtall .sc-mc0{height:3.1em}


/* review r5 (B4; the owner: "the playback panel was pushed down, at first I did not see there was more below"): on a desktop the stage is
   taller than the window in every part. Its spacing is tightened, the table's rows set closer (CONTRACT §19's line heights, the same
   12.5 px text) and the timeline drawn shorter (drawTL reads --sc-tlh, the most height its rows may take: 300 px before), so the block each
   part's card talks about fits on the first screen; on entering a part that block is brought fully on screen (fitFocus in the JS). The
   rest of the stage (the table of the whole run, Show the math) still scrolls. Every height here is fixed, so nothing moves while a run
   plays (R7.9); phones keep their layout */
@media (min-width:761px){
  .sc-app{--sc-tlh:200}   /* rows of 5 px for the 37 requests of parts 1-3, 7, 8; 4 px for the 48 of parts 4-6 (8 and 6 before round 5, 6 and 5 before
                             the table folded); the challenge's 66 keep 4 */
  .sc-stage .stage-actions{gap:2px}
  .sc-m2d{line-height:1.25}
  .sc-cfgrow{margin:4px 0 0}
  .sc-stage>.sc-graph{margin-top:10px}
  .sc-graph{padding:8px 10px 10px;gap:6px}
  .sc-box{padding:5px 7px 6px;gap:3px}
  .sc-gpu.warn{padding:4px 6px 5px}
  .sc-gbar{height:24px}
  .sc-tlw{gap:2px}
  .sc-tlleg,.sc-mleg{row-gap:2px}
  .sc-mem{gap:1px}
  .sc-mbar{height:20px}
  .sc-low{margin-top:8px;gap:6px}
  .sc-tab th,.sc-tab td{padding-block:1.5px;line-height:1.25}
  .sc-tab tr.sc-grp th{padding-top:5px}
  /* the owner, 2026-10-22 ("收起来"): the whole-run table (about 350 px) folds under a button, and the button and the scope note sit in
     Show the math's row, its line above them all; an open Show the math takes the whole row and the other two go under its body. It may
     shrink to the stage (min-width:0): as a flex item it kept its widest formula row, 127 px past the stage at 900 px */
  .sc-foot{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;row-gap:8px;margin-top:6px;border-top:1px solid var(--line-2);padding-top:8px}
  .sc-foot>details.math{margin:0;border-top:0;padding-top:0;min-width:0}
  .sc-foot>details.math[open]{flex:1 0 100%}
  .sc-foot>.sc-scope{margin:0 0 0 auto}
  /* on a wide stage the trace hint moves from its own row under the stage into the head, under the subtitle, where the head had room
     beside the status and the two-line comparison; a narrower stage (a 900 px window) keeps it under the stage */
  @container (min-width:736px){
    .sc-stage>.stage-head{flex-wrap:nowrap}
    .sc-stage>.stage-head>.sc-hl{flex:1 1 0;min-width:0}
    .sc-stage .stage-actions{flex:0 0 auto}
    .sc-hint{display:block}
    .sc-hint .sc-trhint{margin:4px 0 0;line-height:1.4}
    .sc-stage>.sc-low{display:none}
  }
}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.sc-clock,.sc-onote,.sc-gdur,#sc-wct,.sc-runl{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 1–3 and 8 still ran 27 px past the stage and parts
   4–6 34 (English 22–48). The timeline's rows may take at most 160 px instead of 200 (drawTL reads --sc-tlh: rows of 4 px for the 37
   requests of parts 1–3, 7 and 8 instead of 5; the 48 of parts 4–6 keep 4), and the gaps and padding of the configuration row, the
   figure, its three boxes, the trace hint and the footer are 2–4 px smaller. In English part 5 still runs 15 px past 1536 × 730, whose
   memory legend takes two lines, and part 7 still scrolls 140–216 px inside the stage, its timeline and memory bar below the 14-line
   code box */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  .sc-app{--sc-tlh:160}
  .sc-cfgrow{margin:2px 0 0}
  .sc-stage>.sc-graph{margin-top:6px}
  .sc-graph{padding:6px 10px 4px;gap:4px}
  .sc-box{padding:4px 7px 4px}
  .sc-hint .sc-trhint{margin-top:2px}
  .sc-foot{margin-top:4px;padding-top:4px}
}

/* sft: the conversation as a strip of token chips (prompt part hatched, response part plain, each with its label underneath), the
   toy model's generation with its player, a bar of the counted tokens, metric cards below (R7.12). Colours (R5.6): grayscale for
   the picture; red only where the end token lost its label and where the model should have stopped (R5.11); green where it wrote
   the end token and stopped. */
.sft-app [hidden]{display:none!important}
.sft-stage .stage-head{align-items:center}
.sft-graph{padding:12px 14px 14px;display:grid;gap:16px;min-width:0}
.sft-graph>div{min-width:0}
.sft-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:8px;text-wrap:balance}   /* a caption that wraps splits its lines evenly (精装修 step 2) */
.sft-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.35}
.sft-leg>span{display:inline-flex;align-items:center;gap:6px}
.sft-leg .sw,.sft-bar-l .sw{display:inline-block;width:12px;height:12px;flex:0 0 auto;margin:0;border-radius:2px}
.sft-sw-p{background:repeating-linear-gradient(135deg,var(--surface) 0 3px,var(--line) 3px 4px);border:1px solid var(--ink-3)!important}
.sft-sw-r{background:var(--surface);border:1px solid var(--ink-3)!important}
.sft-sw-bad{background:var(--surface);border:2px solid var(--c-oom)!important}
.sft-sw-stop{background:var(--surface);border:2px solid var(--c-ok)!important}
.sft-sw-x{background:var(--surface);border:1px dashed var(--ink-3)!important}

/* ---------- the token strip ---------- */
.sft-strip{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-start}
.sft-grp{min-width:0;max-width:100%}
.sft-grp-t{font-size:var(--fs-mark);font-weight:650;letter-spacing:.02em;color:var(--ink-2);margin-bottom:4px}
.sft-chips{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.sft-tk{display:inline-flex;flex-direction:column;align-items:stretch;min-width:0;max-width:100%;border:1px solid var(--ink-3);border-radius:4px;background:var(--surface);cursor:help;overflow:hidden}
.sft-tk:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.sft-tp{background:repeating-linear-gradient(135deg,var(--surface) 0 4px,var(--line) 4px 5.5px)}
.sft-tr{background:var(--surface)}
.sft-tpad{border-style:dashed;background:var(--surface-2)}
.sft-tt{display:block;padding:3px 6px 2px;font-size:var(--fs-label);line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.sft-tt.mono{font-size:var(--fs-mark);font-family:var(--font-mono)}
.sft-tp .sft-tt{background:transparent;text-shadow:0 0 2px var(--surface),0 0 2px var(--surface)}
.sft-tx .sft-tt{font-style:italic}
.sft-lb{display:block;padding:1px 6px 2px;font-size:var(--fs-mark);line-height:1.3;text-align:center;border-top:1px solid var(--line);background:var(--surface);color:var(--ink)}
.sft-lb.ign,.sft-lb.none{color:var(--ink-3)}
.sft-lb.ok{font-weight:650}
.sft-bad{border:2px solid var(--c-oom)}
.sft-bad .sft-lb{color:var(--c-oom);font-weight:650}

/* ---------- the generation and its player ---------- */
.sft-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.sft-player .ctl{display:flex;align-items:center;gap:6px;margin:0}
.sft-player .ctl>.lbl{font-size:var(--fs-label)}
.sft-player .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
.sft-player [data-act="play"]{min-width:92px;justify-content:center}
.sft-scrub{display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:0}
.sft-scrub input{flex:1 1 auto;min-width:0}
.sft-cnt{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.sft-gen{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:flex-start;min-height:44px}
.sft-gt{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;min-width:0;max-width:100%;border:1px solid var(--ink-3);border-radius:4px;background:var(--surface);cursor:help}
.sft-gt .sft-tt{padding:3px 5px 1px}
.sft-pr{display:block;padding:0 5px 2px;font-size:var(--fs-mark);line-height:1.3;color:var(--ink-2);text-align:center}   /* 5 px sides (6 before the 2026-10-22 refit): in Figtree a written-out run of 16 tokens keeps to the rows it was fitted to */
.sft-stop{border:2px solid var(--c-ok)}
.sft-red{border:2px solid var(--c-oom);background:var(--c-oom-soft)}
.sft-extra{border-style:dashed}
.sft-redt{display:block;padding:0 6px 2px;font-size:var(--fs-mark);font-weight:650;line-height:1.3;color:var(--c-oom);text-align:center;white-space:nowrap}
.sft-more{align-self:center;padding:0 4px}

/* ---------- the counted tokens ---------- */
.sft-bar{display:flex;height:16px;border:1px solid var(--ink-3);border-radius:3px;overflow:hidden;background:var(--surface)}
.sft-bar i{display:block;height:100%;min-width:0}
.sft-bp{background:repeating-linear-gradient(135deg,var(--surface) 0 4px,var(--line) 4px 6px)}
.sft-br{background:var(--ink-2)}
.sft-bar-l{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;color:var(--ink-2)}
.sft-bar-l>span{display:inline-flex;align-items:center;gap:6px}
.sft-bar-l .sft-sw-r{background:var(--ink-2)}
.sft-hide{padding:4px 0}

/* ---------- the batch in part 5: why padding exists (the owner's review of batch 9, item 4) ---------- */
.sft-batch{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.sft-batch .sft-cap{margin-bottom:6px}
.sft-brows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center}
.sft-brow-t{font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap}
.sft-bcells{display:flex;gap:2px;min-width:0}
.sft-bc{display:block;flex:0 1 auto;min-width:0;width:10px;height:13px;border:1px solid var(--ink-3);border-radius:2px;background:var(--surface)}
/* refit step 3: a row of the batch is 21 cells, 250 px; on a phone the column beside the English row names is 196–226 px (360–390 px
   windows), so the rows ran past the stage and, at 360 px, the page scrolled sideways. A cell may narrow to fit (the gaps narrow first, on
   phones); where there is room it stays 10 px */
@media (max-width:760px){.sft-bcells{gap:1px}}
.sft-bc-p,.sft-batch .sft-sw-p{background:repeating-linear-gradient(135deg,var(--surface) 0 2px,var(--line) 2px 3.5px)}
.sft-bc-e,.sft-sw-e{border:2px solid var(--ink)!important}
.sft-bc-x,.sft-sw-x2{border:1px dashed var(--ink-3)!important;background:var(--surface-2)}
.sft-bc-e.sft-bad{border-color:var(--c-oom)!important;background:var(--c-oom-soft)}

/* ---------- the rail and the math ---------- */
/* overflow-x:auto clips vertically too: the padding keeps a tall fraction's numerator inside the box (the owner's review of
   batch 9, item 1: the top of 120 over 1,919 was cut off; G5) */
.sft-math-line{margin:8px 0;padding:.35em 0;overflow-x:auto;max-width:100%}
.sft-mh{font-size:var(--fs-label);font-weight:650;color:var(--ink);margin:12px 0 4px}
/* H2 (the owner, 2026-10-09): a formula with its name in words on the left; a chain breaks at “=” onto lines that line up */
.sft-eq{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:.45em;align-items:center;margin:8px 0}
.sft-eq-n{max-width:9em;line-height:1.35}
.sft-eq .sft-math-line{margin:0}
/* Show the math: a hairline between its blocks (H5) */
.mathbody .sft-mh{border-top:1px solid var(--line);padding-top:10px;margin-top:14px}
.sft-al{margin:6px 0 10px;padding-left:18px}
.sft-al li{margin:3px 0}
.sft-rem{padding-left:18px}
.sft-rem li{margin:6px 0}
.sft-prod li{margin:6px 0}
.sft-tbl{border-collapse:collapse;width:100%;margin:8px 0;font-size:var(--fs-label);line-height:1.55}   /* the stage's line height, said here too: a page without a doctype (the flow test's) resets a table's to normal, and Figtree's normal line is shorter than a Chinese font's, so rows with Chinese tokens came out 3 px taller */
.sft-tbl th,.sft-tbl td{padding:3px 8px 3px 0;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.sft-tbl th:first-child,.sft-tbl td:first-child{text-align:left;white-space:normal}
.sft-tbl th{font-weight:600;color:var(--ink-2);font-size:var(--fs-label)}
.sft-tbl tfoot td{border-bottom:0;padding-top:5px}
.sft-tbl tfoot td:first-child{text-align:left}
.sft-ch-res{min-width:0}

@media (max-width:760px){
  .sft-graph{padding:10px 10px 12px;gap:14px}
  .sft-strip{gap:8px 10px}
  .sft-tt{font-size:var(--fs-label)}
  .sft-tt.mono{font-size:var(--fs-mark)}
  .sft-tbl{font-size:var(--fs-label)}
}
/* H5 (the owner, 2026-10-09: “信息过多，需要分割线”): the stage's blocks (the conversation as tokens, what the model writes, the share
   of the counted tokens) each keep their bold heading and are separated by a hairline in the kit's line colour */
.sft-graph>.sft-box:not([hidden])~.sft-box:not([hidden]){border-top:1px solid var(--line);padding-top:14px}
/* H7 (the owner, 2026-10-09: GRPO's 重放 and speed buttons did not line up): in a row with the speed buttons, the play or replay button
   and the speed buttons share one height and one centre line, and the label 速度 sits beside its buttons */
#sft-app .ctl:has(>.seg-ctl[data-key$="pd"]),#sft-app .ctl:has(.seg-ctl[data-key$="pd"]){display:flex;align-items:center;gap:6px;margin:0}
#sft-app .ctl:has(.seg-ctl[data-key$="pd"])>.lbl{margin:0}
#sft-app .seg-ctl[data-key$="pd"] button{height:26px;padding-top:0;padding-bottom:0}   /* the kit's tray adds 3 px above and below its keys (2026-10-22 refit): 26 px keys keep the control 32 px tall, as tall as the button beside it */
#sft-app :has(>.ctl .seg-ctl[data-key$="pd"])>.btn{height:32px;padding-top:0;padding-bottom:0}
/* part 6 (Codex R11, round 3): the calculation on the stage. The stepper and its buttons share a row; the table never wraps a cell (on a
   phone it scrolls sideways inside its own box); the current token's row and the cells the current step adds are highlighted */
.sft-dp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:2px 0 10px}
.sft-dp-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.sft-dp-steps>.lbl{font-size:var(--fs-label);font-weight:650;color:var(--ink-2)}
.sft-dp-steps .seg-ctl button{white-space:nowrap;font-size:var(--fs-label);padding:4px 10px}
.sft-dp-btns{display:flex;gap:8px;flex-wrap:wrap}
.sft-dp-tw{overflow-x:auto;max-width:100%}
.sft-dp-tbl{width:auto;min-width:min(100%,420px);margin:0 0 6px;font-size:var(--fs-cap)}
.sft-dp-tbl th,.sft-dp-tbl td,.sft-dp-tbl th:first-child,.sft-dp-tbl td:first-child{white-space:nowrap;padding:4px 14px 4px 6px}
.sft-dp-tbl tbody tr.sft-dp-cur td{background:var(--surface-2)}
.sft-dp-tbl tbody tr.sft-dp-cur td:first-child{box-shadow:inset 3px 0 0 var(--ink)}
.sft-dp-tbl td.sft-dp-new{font-weight:700;color:var(--ink)}
.sft-dp-rb{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.sft-dp-tbl tbody tr:hover td{background:var(--surface-2)}
.sft-dp-rb.mono{font-family:var(--font-mono);font-size:var(--fs-label)}
.sft-dp-rb[aria-pressed="true"]{font-weight:700}
.sft-dp-rb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sft-dp-tok{display:inline-block;padding:0 5px;border:1px solid var(--ink-3);border-radius:4px;font-size:.95em;line-height:1.35;white-space:nowrap}
.sft-dp-tok.mono{font-family:var(--font-mono);font-size:.85em}
.sft-dp-now{font-size:var(--fs-cap);line-height:1.55;max-width:62em}
.sft-dp-now p{margin:6px 0}
/* Codex R10A (round 3): which data a box shows, on its own first line (Scenarios and Settings): the counts come from the scenario's
   example (solid rule), the small model from its fixed 6 conversations (dashed rule) */
.sft-scope{width:fit-content;max-width:100%;margin:0 0 6px;padding:1px 8px;font-size:var(--fs-label);font-weight:650;line-height:1.4;color:var(--ink-2);border:1px solid var(--ink-3);border-radius:4px;background:var(--surface)}
.sft-scope-m{border-style:dashed}
/* a narrow stage (a phone, a 900 px window): the 4 steps in two rows of two */
@container (max-width:540px){
  .sft-dp-steps .seg-ctl{display:grid;grid-template-columns:1fr 1fr;width:100%}
}
/* 知识梳理: a formula on its own line; its pieces wrap under each other at “=” in a narrow column, so nothing scrolls sideways */
.primer .sft-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;row-gap:6px;margin:2px 0 14px;padding-left:1em;font-size:1.06em;line-height:1.3;min-width:0}
.primer .sft-prfx>span{min-width:0;max-width:100%}
@media (max-width:760px){.primer .sft-prfx{padding-left:.4em}}
/* ---------- a wide stage (polish round 4, 2026-10-17; the owner's B4, R7.12): at 1440 × 900 part 5 needed 151 px of scrolling inside
   the stage and part 7 22 px. On a stage at least 736 px wide (windows from about 1200 px): in part 5 the batch sits beside the response
   and padding groups, with its dashed rule on its left; the prompt part keeps the full width above, and the strip's legend stays under its
   groups with room for two lines, so the stage keeps its height when the pad setting adds the red item, and the box of the model's
   writing keeps the room the taller pad setting needs (sft.js, R7.9). Where the model's writing and the share of the counted tokens
   are both on the stage (parts 4, 5, 7, Scenarios, the challenge) they sit side by side with a hairline between them.
   The metric cards share the row by their number with the value and change lines tighter (CONTRACT §19), and a few gaps are tighter.
   Same blocks in the same order, same texts and animation; phones (≤ 760 px) and narrower stages keep one column. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .sft-graph{margin-top:10px;padding:10px 14px 12px;gap:12px}
  .sft-graph>.sft-box:not([hidden])~.sft-box:not([hidden]){padding-top:10px}
  .sft-cap{margin-bottom:6px}
  .sft-leg{margin-top:6px}
  .sft-player{margin-bottom:6px}
  /* --sft-hold: in part 5 sft.js keeps the stage at the height the taller pad setting needs, with room under the writing (R7.9) */
  .sft-gen{row-gap:4px;--sft-hold:1}
  /* part 5: the batch beside the response and padding groups; 364 px holds a row of the batch in English (“the one above” and its 21
     cells, 327 px) beside the dashed rule */
  #sft-stripbox:has(>#sft-batch:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 364px;align-items:start}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>.sft-strip{display:contents}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>.sft-scope{grid-column:1 / -1;grid-row:1}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>#sft-strip-cap{grid-column:1 / -1;grid-row:2}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>.sft-strip>.sft-g-p{grid-column:1 / -1;grid-row:3}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>.sft-strip>.sft-g-r{grid-column:1;grid-row:4;margin-top:10px}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>.sft-strip>.sft-g-pad{grid-column:1;grid-row:5;margin-top:10px}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>#sft-strip-leg{grid-column:1;grid-row:6;min-height:calc(2.7em + 6px);align-content:flex-start}
  #sft-stripbox>#sft-batch:not([hidden]){grid-column:2;grid-row:4 / span 3;margin:10px 0 0 16px;padding:0 0 0 16px;border-top:0;border-left:1px dashed var(--line)}
  /* in this column the Chinese caption broke inside “（示意）”; it breaks at a space or after punctuation instead (still two lines) */
  #sft-stripbox>#sft-batch:not([hidden])>.sft-cap{word-break:keep-all}
  /* the model's writing and the share of the counted tokens side by side */
  .sft-graph:has(>#sft-genbox:not([hidden])):has(>#sft-sharebox:not([hidden])){grid-template-columns:minmax(0,1fr) 220px;column-gap:0}
  .sft-graph:has(>#sft-genbox:not([hidden])):has(>#sft-sharebox:not([hidden]))>.sft-box{grid-column:1 / -1}
  .sft-graph:has(>#sft-genbox:not([hidden])):has(>#sft-sharebox:not([hidden]))>#sft-genbox{grid-column:1;padding-right:16px}
  .sft-graph:has(>#sft-genbox:not([hidden])):has(>#sft-sharebox:not([hidden]))>#sft-sharebox{grid-column:2;border-left:1px solid var(--line);padding-left:16px}
  /* there the “still going” note takes two short lines beside the last tokens when a whole line no longer fits after them (part 5's
     end-token run), instead of a row of its own */
  .sft-graph:has(>#sft-genbox:not([hidden])):has(>#sft-sharebox:not([hidden])) .sft-more{flex:1 1 96px;min-width:0}
  /* one column per card shown, all as wide (no :has() count: Chromium does not always restyle it when a card is shown or hidden) */
  .sft-metrics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:8px}
  .sft-metrics .metric .v{line-height:1.25}
  .sft-metrics .metric .d{min-height:13px;line-height:1.1}
  .sft-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 5 still ran 45 px past the stage in Chinese and 85 in
   English. The gaps under the captions and the group titles, round the hairlines and between the groups are 2–4 px smaller, and a
   token's text and its label sit 1 px closer to the token's edges (their size is kept). In English the captions beside the writing take
   three and four lines, so part 5 still runs 31 px past 1536 × 730 (163 on main) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .sft-graph{padding-top:8px;padding-bottom:8px;gap:8px}
  .sft-graph>.sft-box:not([hidden])~.sft-box:not([hidden]){padding-top:8px}
  .sft-cap{margin-bottom:4px}
  .sft-leg{margin-top:4px}
  .sft-player{margin-bottom:4px}
  .sft-grp-t{margin-bottom:2px}
  #sft-stripbox:has(>#sft-batch:not([hidden]))>.sft-strip>.sft-g-r,#sft-stripbox:has(>#sft-batch:not([hidden]))>.sft-strip>.sft-g-pad{margin-top:6px}
  .sft-tt{padding-top:2px;padding-bottom:1px}
  .sft-lb{padding-top:0;padding-bottom:1px}
  .sft-metrics .metric .sub{line-height:1.25}
}}

/* softmax-numerics: the number line with the format's safe window of exp, the table of e^z and the two columns of chances, the three
   loss bars, the online softmax's four blocks. Colours (R5.6): grayscale; red only for an overflow, an all-zero underflow and NaN or Inf
   (failure); green only for the challenge's goal. */
.sm-app [hidden]{display:none!important}
.sm-stage .stage-head{align-items:center}
.sm-graph{padding:12px 14px 14px;display:grid;gap:14px;min-width:0}
.sm-nl,.sm-tab,.sm-ce,.sm-on{display:grid;gap:6px;min-width:0}
/* H5 (the owner, 2026-10-09: information runs together without a divider): the table or the loss bars start a block of their own
   under a hairline below the strip of scores */
.sm-nl:not([hidden])~.sm-tab:not([hidden]),.sm-nl:not([hidden])~.sm-ce:not([hidden]){border-top:1px solid var(--line);padding-top:10px}
.sm-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
.sm-sum{margin-top:2px;font-size:var(--fs-label);line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;text-wrap:balance}

/* ---------- the number line: the safe window, the logits as given and minus the max ---------- */
.sm-line{position:relative;margin-left:96px;padding:16px 0 18px}
.sm-band{position:absolute;top:15px;bottom:17px;background:var(--surface-2);border-left:1.5px dashed var(--ink-3);border-right:1.5px dashed var(--ink-3);box-sizing:border-box;cursor:help}
.sm-zero{position:absolute;top:15px;bottom:17px;width:0;border-left:1px dotted var(--ink-3);pointer-events:none}
.sm-lrow{position:relative;height:30px}
.sm-lrow[data-r="raw"]{height:36px}
.sm-rl{position:absolute;right:calc(100% + 10px);bottom:4px;width:88px;text-align:right;font-size:var(--fs-label);line-height:1.15;color:var(--ink-2)}
.sm-dot{position:absolute;bottom:8px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink-2);border:1.5px solid var(--surface);box-sizing:content-box;cursor:help;z-index:1;transition:left .2s ease-out}
.sm-dot.sm-hol{background:var(--surface);border-color:var(--ink-2)}
.sm-dot.sm-bad{background:var(--c-oom);border-color:var(--surface)}
.sm-dot.sm-off{border-radius:2px}
.sm-mx{position:absolute;top:1px;transform:translateX(-50%);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.3;color:var(--ink);background:var(--surface);padding:0 3px;border-radius:2px;white-space:nowrap;z-index:2;pointer-events:none;transition:left .2s ease-out}
.sm-mx.sm-l{transform:translateX(calc(-100% + 8px))}
.sm-mx.sm-r{transform:translateX(-8px)}
.sm-ticks{position:absolute;inset:0;pointer-events:none}
.sm-ticks span{position:absolute;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.2;color:var(--ink-3);white-space:nowrap}
.sm-ticks .sm-w{top:0;color:var(--ink-2)}
.sm-ticks .sm-z,.sm-ticks .sm-e0,.sm-ticks .sm-e1{bottom:0}
.sm-ticks .sm-e0{left:0!important;transform:none}
.sm-ticks .sm-e1{left:auto;right:0;transform:none}

/* ---------- the table: one row per token ---------- */
.sm-tr{display:grid;grid-template-columns:84px 104px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.sm-th{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
.sm-th span:nth-child(2){text-align:right}
.sm-tk{font-size:var(--fs-cap);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-ez{font-size:var(--fs-label);color:var(--ink-2);text-align:right;white-space:nowrap}
.sm-ez.sm-bad{color:var(--c-oom);font-weight:700}
.sm-c{position:relative;display:flex;align-items:center;height:20px;background:var(--surface-2);border-radius:2px;cursor:help;min-width:0;overflow:hidden}
.sm-c i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px;transition:width .25s ease-out}
.sm-c b{position:relative;margin-left:4px;padding:0 4px;font-size:var(--fs-mark);font-weight:600;line-height:16px;color:var(--ink);background:var(--surface);border-radius:2px;white-space:nowrap}
.sm-c.sm-nan{background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 3px,transparent 3px 6px),var(--c-oom-soft);box-shadow:inset 0 0 0 1.5px var(--c-oom)}
.sm-c.sm-nan i{display:none}
.sm-c.sm-nan b{color:var(--c-oom);font-weight:700}

/* ---------- the three loss bars ---------- */
.sm-lr{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.sm-ll{font-size:var(--fs-label);color:var(--ink-2);line-height:1.3}
.sm-lb{position:relative;display:flex;align-items:center;height:24px;background:var(--surface-2);border-radius:2px;cursor:help;min-width:0}
.sm-lb i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px;transition:width .25s ease-out}
.sm-lb b{position:relative;z-index:1;margin-left:4px;padding:0 4px;font-size:var(--fs-label);font-weight:600;line-height:17px;color:var(--ink);background:var(--surface);border-radius:2px;white-space:nowrap}
.sm-lb .sm-lx{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid var(--ink);z-index:2;margin-left:-1px}
.sm-lb.sm-nan{background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 3px,transparent 3px 6px),var(--c-oom-soft);box-shadow:inset 0 0 0 1.5px var(--c-oom)}
.sm-lb.sm-nan i{display:none}
.sm-lb.sm-nan b{color:var(--c-oom);font-weight:700}

/* ---------- online softmax: eight cells in four blocks, the running max and sum, the two results ---------- */
.sm-cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:3px;min-width:0}
.sm-oc{display:grid;justify-items:center;gap:1px;padding:4px 2px;border:1.5px dashed var(--line-2);border-radius:3px;cursor:help;min-width:0}
.sm-oc.sm-bs:not(:first-child){margin-left:6px}
.sm-oc em{font-style:normal;font-size:var(--fs-mark);color:var(--ink-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-oc b{font-size:var(--fs-label);color:var(--ink-3)}
.sm-oc.sm-rd{border-style:solid;border-color:var(--ink-3);background:var(--surface-2)}
.sm-oc.sm-rd em{color:var(--ink-2)}
.sm-oc.sm-rd b{color:var(--ink)}
.sm-oc.sm-cur{border:2px solid var(--ink)}
.sm-oc s{display:block;height:12px;font-size:var(--fs-mark);line-height:12px;text-decoration:none;font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.sm-oc.sm-omx{background:var(--surface);box-shadow:inset 0 -3px 0 var(--ink)}
/* the running sum s: one piece per score read, drawn to one scale (1.5 = the full bar) */
.sm-sumbox{display:grid;gap:5px;margin-top:10px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}   /* a soft panel, no frame (精装修 step 2); its bars turn white */
.sm-sumbox .sm-sbar{background:var(--surface)}
.sm-scap{color:var(--ink-2);line-height:1.4}
.sm-srow{display:grid;grid-template-columns:118px minmax(0,1fr) 74px;gap:8px;align-items:center;min-width:0}
.sm-sl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.sm-srow>b{font-size:var(--fs-label);color:var(--ink);text-align:right;white-space:nowrap}
.sm-srow-old>b{color:var(--ink-3);font-weight:500}
.sm-sbar{display:flex;height:22px;background:var(--surface-2);border-radius:2px;overflow:hidden;min-width:0}
.sm-pc{display:flex;align-items:center;justify-content:center;flex:none;height:100%;box-sizing:border-box;background:var(--surface);border:1.5px solid var(--ink-3);border-left-width:0;cursor:help;overflow:hidden;transition:width .25s ease-out}
.sm-pc:first-child{border-left-width:1.5px}
.sm-pc.sm-pn{background:var(--ink-2);border-color:var(--ink-2)}
.sm-pc em{font-style:normal;font-size:var(--fs-mark);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.sm-pc.sm-pn em{color:var(--surface)}
.sm-sold{background:none;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.sm-sold .sm-pc{background:none;border:1.5px dashed var(--ink-3)}
.sm-sold .sm-pc em{color:var(--ink-2)}
.sm-sres{margin-left:126px;color:var(--ink-2);line-height:1.35}
.sm-fx{margin:6px 0;overflow-x:auto;overflow-y:hidden}
.sm-fx math{font-size:1.08em}
.sm-tr.sm-or{grid-template-columns:84px minmax(0,1fr) minmax(0,1fr)}
.sm-onwait{margin:2px 0 0}
.sm-onbtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sm-onbtns .btn{min-width:44px}
.sm-onpos{font-size:var(--fs-label);color:var(--ink-2)}
.sm-onctl .lbl{display:block;margin-bottom:6px}

/* ---------- legend swatches ---------- */
.sw.sm-sw-band{background:var(--surface-2);border:1.5px dashed var(--ink-3)}
.sw.sm-sw-dot{border-radius:50%;background:var(--ink-2);border-color:transparent}
.sw.sm-sw-bad{border-radius:50%;background:var(--c-oom);border-color:transparent}
.sw.sm-sw-hol{border-radius:50%;background:var(--surface);border:1.5px solid var(--ink-2)}
.sw.sm-sw-bar{background:var(--ink-3);border-color:transparent}
.sw.sm-sw-nan,.sw.sm-sw-inf{background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 2px,transparent 2px 4px),var(--c-oom-soft);border:1.5px solid var(--c-oom)}
.sw.sm-sw-ex{width:0;height:13px;border:0;border-left:2px solid var(--ink);border-radius:0;margin:0 7px 0 3px}
.sw.sm-sw-cur{background:var(--surface-2);border:2px solid var(--ink)}
.sw.sm-sw-omx{background:var(--surface);border:1.5px solid var(--ink-3);box-shadow:inset 0 -3px 0 var(--ink)}
.sw.sm-sw-pn{background:var(--ink-2);border-color:transparent}
.sw.sm-sw-old{background:none;border:1.5px dashed var(--ink-3)}
#sm-legend>span{cursor:help}

/* ---------- metric cards ---------- */
.sm-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:760px){.sm-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sm-metrics .v{overflow-wrap:anywhere;white-space:normal}
.sm-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.sm-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .sm-why{margin-top:6px}
.sm-phone{display:none}
.sm-remlist{padding-left:18px}
.sm-remlist li{margin-bottom:8px}
.sm-rem{font-size:var(--fs-label);white-space:nowrap}
.sm-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}
.sm-mt{margin-top:12px}
.sm-ch-res{scroll-margin-top:120px}
.sm-lv{margin-top:6px}
.sm-lv .lever .lv-r:empty{display:none}
.sm-app .goal.sm-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.sm-app .goal.sm-goal span:last-child{white-space:normal}
.goal.sm-over b{color:var(--c-oom)}
.sm-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.sm-app .inline-ctl .seg-ctl button{white-space:nowrap}
#sm-controls .seg-ctl{flex-wrap:wrap}
#sm-controls .seg-ctl button{white-space:nowrap}
.sm-nw{white-space:nowrap}

/* ---------- settings ---------- */
.sm-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.sm-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.sm-grp .ctl>.lbl{display:block}
.sm-app .ctl output{white-space:nowrap}
#sm-zlist{font-size:var(--fs-label);line-height:1.45}
.sm-app sup{font-size:.72em;line-height:0}

/* ---------- the challenge chart (A1, A19): labels on one line (the kit places them); NaN is red hatched ---------- */
#sm-ch-res .cmp-val{white-space:nowrap}
#sm-ch-res .cmp-row.sm-cmp-nan .cmp-track i,#sm-ch-res .cmp-leg i.sm-leg-nan{background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 3px,transparent 3px 6px),var(--c-oom-soft);box-shadow:inset 0 0 0 1.5px var(--c-oom)}
#sm-ch-res .cmp-row.sm-cmp-nan .cmp-val{color:var(--c-oom);font-weight:700}

/* ---------- connect and the dock ---------- */
.sm-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.sm-prod li{margin-bottom:6px}
.sm-dk{position:relative;height:12px;min-width:0;width:100%;background:var(--surface-2);border-radius:2px;overflow:hidden}
.sm-dk i{position:absolute;top:0;bottom:0;background:var(--ink-3);border-right:1px solid var(--surface);box-sizing:border-box}
.sm-dk i:nth-child(even){background:var(--ink-2)}
.sm-dk.sm-nan{background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 3px,transparent 3px 6px),var(--c-oom-soft);box-shadow:inset 0 0 0 1.5px var(--c-oom)}

@container (max-width:520px){
  .sm-tr{grid-template-columns:62px 84px minmax(0,1fr) minmax(0,1fr);gap:6px}
  .sm-tr.sm-or{grid-template-columns:62px minmax(0,1fr) minmax(0,1fr)}
  .sm-tk{font-size:var(--fs-label)}
  .sm-ez{font-size:var(--fs-mark)}
  .sm-line{margin-left:74px}
  .sm-rl{width:68px;right:calc(100% + 6px);font-size:var(--fs-mark)}
  .sm-lr{grid-template-columns:minmax(0,1fr);gap:3px}
  .sm-oc.sm-bs:not(:first-child){margin-left:4px}
  .sm-oc{padding:4px 0}
  .sm-cells{column-gap:2px}
  .sm-oc b{font-size:var(--fs-mark)}
  .sm-srow{grid-template-columns:76px minmax(0,1fr) 62px;gap:6px}
  .sm-sl{font-size:var(--fs-mark)}
  .sm-srow>b{font-size:var(--fs-mark)}
  .sm-sres{margin-left:0}
  .sm-sumbox{padding:8px}
}
@media (max-width:760px){
  .sm-phone:not(:empty){display:block}
  .sm-phone .inline-ctl{margin:0}
}
@media (prefers-reduced-motion:reduce){.sm-dot,.sm-mx,.sm-c i,.sm-lb i,.sm-pc{transition:none}}

/* R5.9: the bars' keys sit right under (or, for the running sum, right above) the bars they label; the top legend keys the number line */
.sm-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-2);margin:6px 0 2px;min-width:0}
.sm-key>span{cursor:help;display:inline-flex;align-items:center}
.sm-sumbox .sm-key{margin:0}
/* Show the math as short blocks (H2, 2026-10-09): a lead line, then the formula's rows in a grid; blocks are split by a hairline */
.sm-mb{padding:10px 0}
.sm-mb:first-child{padding-top:2px}
.sm-mb+.sm-mb{border-top:1px solid var(--line)}
.mathbody .sm-ml{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.5;color:var(--ink-2)}
.sm-mg{display:grid;grid-template-columns:repeat(var(--n),auto);justify-content:start;justify-items:center;align-items:center;column-gap:.35em;row-gap:.45em;overflow-x:auto;padding-block:.3em;margin-bottom:4px;font-size:var(--fs-cap)}
.sm-mg .sm-mn{justify-self:end}
.sm-mg .sm-mw{justify-self:start}
/* a cell never shrinks under its text: a formula with Chinese words in it would otherwise be squeezed and run into the next
   column (H7); a row wider than the panel scrolls instead */
.sm-mg>span{white-space:nowrap;min-width:max-content}
.sm-mg .sm-mh{font-family:'STIX Two Math','Cambria Math','Latin Modern Math','Noto Sans Math',var(--font-ui);font-size:1.08em;white-space:nowrap}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read): the reader's numbers (a cell with no
   formula in it) wrap at their spaces, the next line indented; in the online blocks each block's label goes above its rows when the
   stage is narrow (a phone, or the 900 px layout) */
.sm-mg>.sm-mh:not(.sm-mn):not(:has(math)){white-space:normal;min-width:0;padding-left:1.2em;text-indent:-1.2em}
.sm-mg.sm-nm{align-items:baseline}
.sm-nm>.sm-mh:not(.sm-mn){justify-self:start}
@container (max-width:540px){
  .sm-mg.sm-nm{grid-template-columns:repeat(var(--n1),auto)}
  .sm-nm>.sm-mn:not(:empty){grid-column:1/-1;justify-self:start}
  .sm-nm>.sm-mn:empty{display:none}
}
/* 精装修 step 2: 700 px tall or less (1366 × 650), the figure's own spacing is tighter so the stage fits without scrolling inside */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){.sm-graph{padding:8px 12px 8px;gap:10px}.sm-scope{margin:6px 0 4px}}

/* ---------- Speculative decoding lab (prefix spd-) ----------
   Colours: blue = time reading weights, amber = time reading the KV cache (R5.6); green = an accepted guess (success), red = a rejected
   guess, a thrown-away draft step, a setting slower than plain decode, an output that no longer follows the target (failure, R5.11).
   Everything else is grayscale: the target model's steps dark, the draft model's light, a guess dashed. */
.spd-app .stage-head>div:first-child{min-width:0}
.spd-st-title{font-weight:680;font-size:var(--fs-stage);line-height:1.3;min-height:2.6em}
.spd-app [data-tipx]{cursor:help}
.spd-app [data-jump],.spd-app button[data-tipx]{cursor:pointer}
.spd-app [hidden]{display:none!important}
.spd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spd-main{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.spd-blk{border:1px solid transparent;border-radius:8px;padding:10px 12px;background:var(--surface-2);min-width:0}   /* a soft panel, no frame inside the stage (精装修 step 2) */
.spd-ch-t{font-size:var(--fs-cap);font-weight:620;line-height:1.35;margin-bottom:6px}
.spd-svg{display:block;width:100%;height:auto;overflow:visible}
.spd-axl{margin:2px 0 0}
.spd-leg{margin-top:8px;flex-wrap:wrap;gap:4px 14px}
.spd-leg>span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label)}
.spd-sw{display:inline-block;width:14px;height:10px;border-radius:2px;flex:none;background:var(--ink-3)}
.spd-sw-w{background:var(--c-weights)}.spd-sw-kv{background:var(--c-kv)}.spd-sw-c{background:var(--ink-3)}
.spd-sw-end{width:3px;height:14px;background:var(--ink)}
.spd-sw-q{background:var(--line-2)}
.spd-sw-pt{height:3px;background:var(--ink)}
.spd-sw-ok{background:var(--c-ok)}
.spd-sw-rs{background:color-mix(in srgb,var(--ink-3) 55%,transparent)}   /* as the redrawn segment of the bars (.spd-rsb) */
.spd-sw-bad{background:var(--c-oom)}
.spd-sw-line{height:3px;background:var(--ink-3)}
.spd-sw-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-2)}
.spd-sw-cur{height:3px;background:var(--ink)}
.spd-sw-up{height:0;border-top:2px dashed var(--ink-3);background:none}
.spd-sw-ng{height:0;border-top:2px dotted var(--ink-2);background:none}
.spd-sw-d1{height:3px;background:var(--ink)}
.spd-sw-d3{height:0;border-top:2px dashed var(--ink-2);background:none}
.spd-sw-one{height:0;border-top:2px dashed var(--ink-3);background:none}
.spd-sw-me{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:none}
.spd-sw-tgt{background:var(--ink-2)}
.spd-sw-drf{background:var(--line-2);height:7px}
.spd-sw-waste{background:var(--line-2);height:7px;outline:2px solid var(--c-oom);outline-offset:-1px}
.spd-sw-cnt{width:auto;height:auto;background:none;font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink);font-style:normal}
.spd-sw-cnt::before{content:"3"}
/* svg marks */
.spd-svg text{font-family:var(--font-mono);fill:var(--ink-2)}
.spd-tl{font-size:var(--fs-label);fill:var(--ink)!important}
.spd-tl2{font-size:var(--fs-mark)}
.spd-tk{font-size:var(--fs-mark)}
.spd-tv{font-size:var(--fs-label);font-weight:650;fill:var(--ink)!important}
.spd-tv2{font-size:var(--fs-mark);fill:var(--ink)!important}
.spd-cnt{font-size:var(--fs-mark);fill:var(--ink)!important}
.spd-ax{stroke:var(--ink-3);stroke-width:1}
.spd-grid{stroke:var(--line);stroke-width:1}
.spd-w{fill:var(--c-weights)}
.spd-kv{fill:var(--c-kv)}
.spd-cmp{fill:var(--ink-3)}
.spd-endl{stroke:var(--ink);stroke-width:3}
.spd-on .spd-tl{font-weight:700}
.spd-q{fill:var(--line-2)}
.spd-okb{fill:var(--c-ok)}
.spd-badb{fill:var(--c-oom)}
.spd-rsb{fill:var(--ink-3);fill-opacity:.55}
.spd-pt{stroke:var(--ink);stroke-width:3}
.spd-up{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:5 4;fill:none}
.spd-kl{stroke:var(--ink-3);stroke-width:1.5;fill:none}
.spd-kl.spd-cur{stroke:var(--ink);stroke-width:3}
.spd-dot{fill:var(--ink-3)}
.spd-dot.spd-cur{fill:var(--ink)}
.spd-kmark{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
.spd-me{fill:none;stroke:var(--ink);stroke-width:2.5}
.spd-me-bad{stroke:var(--c-oom)}
.spd-slow{fill:var(--c-oom);fill-opacity:.07}
.spd-one{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:6 4}
.spd-bl{fill:none;stroke-width:2}
.spd-bl-ngram{stroke:var(--ink-2);stroke-dasharray:1.5 3.5;stroke-linecap:round}
.spd-bl-d1{stroke:var(--ink);stroke-width:2.5}
.spd-bl-d3{stroke:var(--ink-2);stroke-dasharray:7 4}
.spd-bl.spd-cur{stroke-width:3.5}
.spd-baddot{fill:var(--c-oom)}
.spd-tgt{fill:var(--ink-2)}
.spd-drf{fill:var(--line-2)}
.spd-waste{stroke:var(--c-oom);stroke-width:1.5}
.spd-tnote{margin:6px 0 0}
.spd-acc-ctx{margin:0 0 4px}
/* the round replay: rows of chips; every row keeps its height while it plays (R7.9) */
.spd-ctx{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:6px}
.spd-ctx .spd-rl{margin:0}
.spd-ctxt{font-family:var(--font-mono);font-size:var(--fs-label);padding:2px 8px;border-radius:4px;background:var(--sunken);color:var(--ink)}
.spd-rl{font-size:var(--fs-label);color:var(--ink-2);margin:8px 0 4px;min-height:1.4em}
.spd-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px}
.spd-chip{display:flex;align-items:center;justify-content:center;height:28px;border-radius:5px;font-size:var(--fs-label);font-family:var(--font-mono);border:1.5px solid transparent;min-width:0;overflow:hidden;white-space:nowrap;padding:0 2px;color:var(--ink);transition:background .2s,border-color .2s}
.spd-ph{border:1px dashed var(--line);background:none}
.spd-ghost{visibility:hidden}
.spd-g{border:1.5px dashed var(--ink-3);background:var(--surface)}
.spd-ok{background:color-mix(in srgb,var(--c-ok) 22%,var(--surface));border-color:var(--c-ok)}
.spd-bad{background:color-mix(in srgb,var(--c-oom) 16%,var(--surface));border-color:var(--c-oom);text-decoration:line-through}
.spd-drop{background:repeating-linear-gradient(45deg,var(--sunken) 0 3px,transparent 3px 6px);border:1px dashed var(--line-2);color:var(--ink-3);text-decoration:line-through}
.spd-tg{background:var(--sunken);border-color:var(--line-2)}
.spd-own{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.spd-na{background:var(--sunken);color:var(--ink-3);border-color:var(--line)}
.spd-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px}
.spd-ib{min-width:32px;padding-left:0;padding-right:0}
.spd-speed{display:inline-flex;align-items:center;gap:6px;flex:none}
.spd-speed-l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2)}
.spd-app .spd-speed .seg-ctl button{flex:none;padding:4px 9px;font-size:var(--fs-label);cursor:pointer}
.spd-player .btn{height:30px;padding-top:0;padding-bottom:0}
.spd-scrub{flex:1 1 140px;min-width:120px;display:flex;align-items:center}
.spd-scrub input{width:100%}
.spd-tbtns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
@container (max-width:460px){.spd-chip{font-size:var(--fs-mark);height:26px;padding:0 1px}.spd-row{gap:3px}.spd-ctxt{font-size:var(--fs-label)}
  .spd-row.spd-wide{grid-template-columns:repeat(5,minmax(0,1fr))}}   /* k = 8 on a phone: two lines of 5, so every word fits */
/* metric cards */
.spd-metrics .metric.spd-mbad .v{color:var(--c-oom)}
/* formulas: the name on its own line, then the chain broken at “=” (R6.37) */
.spd-eq{margin:6px 0 8px}
.spd-eq-n{font-size:var(--fs-label);color:var(--ink-2);margin-bottom:2px}
.spd-fx{overflow-x:auto;overflow-y:hidden;max-width:100%;padding-block:.3em;padding-left:.2em}
.mathbody .spd-mh{font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.02em;color:var(--ink-3);border-top:1px solid var(--line);padding-top:8px;margin:12px 0 4px}
.mathbody .spd-mh:first-child{border-top:0;padding-top:0;margin-top:0}
.spd-sub{margin:8px 0 0}
#spd-rail .lever .lv-r{white-space:normal;overflow-wrap:anywhere}
.spd-prod li{margin-bottom:6px}
/* the mini result bar */
.spd-dk{height:8px;border-radius:4px;background:var(--sunken);overflow:hidden;min-width:60px}
.spd-dk i{display:block;height:100%;background:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.spd-chip{transition:none}}
/* part 2: what one step holds (requests × tokens each) and what each position sees */
.spd-stepin{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line-2)}
.spd-cap{margin:4px 0 0}
.spd-card{fill:var(--surface);stroke:var(--line);stroke-width:1}
.spd-shadow{fill:var(--surface-2)}
.spd-cxc{fill:color-mix(in srgb,var(--c-kv) 22%,var(--surface));stroke:var(--c-kv);stroke-width:1}
.spd-tin{fill:var(--sunken);stroke:var(--ink-3);stroke-width:1}
.spd-hid{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 2;stroke-opacity:.7}
.spd-tout{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.spd-svg .spd-ct{font-size:var(--fs-mark);fill:var(--ink)}
.spd-svg .spd-cto{font-weight:650}
.spd-svg .spd-tsub{font-size:var(--fs-mark);fill:var(--ink-2)}
.spd-rowbg{fill:var(--sunken);fill-opacity:.75}
.spd-sw-cxc{background:color-mix(in srgb,var(--c-kv) 22%,var(--surface));border:1px solid var(--c-kv)}
.spd-sw-tin{background:var(--sunken);border:1px solid var(--ink-3)}
.spd-sw-hid{background:none;border:1px dashed var(--ink-3)}
.spd-sw-tout{background:var(--surface);border:1.5px solid var(--ink)}
.spd-svg .spd-ct.spd-ctn{font-size:var(--fs-mark)}
/* part 3: the round's three stages, highlighted in the order the card tells them (① guess, ② one check, ③ keep) */
.spd-3s{margin:6px 0 8px;padding-left:0;list-style:none}
.spd-3s li{margin:0 0 6px}
.spd-stg{margin-top:8px}
.spd-stl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:var(--fs-label);line-height:1.4;color:var(--ink-3);margin:0 0 5px;padding:3px 6px 3px 8px;border-left:3px solid transparent;border-radius:2px;transition:color .2s,border-color .2s,background-color .2s}
.spd-stl b{font-weight:650}
.spd-stl .spd-stx{font-size:var(--fs-label)}
.spd-stn{font-weight:700}
.spd-stl.on{color:var(--ink);border-left-color:var(--ink);background:var(--sunken)}
.spd-stl.done{color:var(--ink-2)}
.spd-brk{position:relative;height:14px;margin:10px 2px 4px;border:1.5px solid var(--ink-2);border-bottom:0;border-radius:3px 3px 0 0;visibility:hidden;display:flex;justify-content:center}
.spd-brk span{position:relative;top:-9px;height:16px;background:var(--surface-2);padding:0 6px;font-size:var(--fs-label);font-family:var(--font-mono);color:var(--ink);line-height:16px;white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}   /* the label hides the bracket's line behind it, so it takes the soft panel's colour (精装修 step 2) */
.spd-brk.on{visibility:visible}
.spd-agree{border-color:var(--c-ok)}
.spd-na{text-decoration:line-through}
.spd-rleg{margin-top:10px}
.spd-rleg .spd-sw-ok{background:color-mix(in srgb,var(--c-ok) 22%,var(--surface));border:1.5px solid var(--c-ok)}
.spd-rleg .spd-sw-bad{background:color-mix(in srgb,var(--c-oom) 16%,var(--surface));border:1.5px solid var(--c-oom)}
.spd-sw-own{background:var(--ink)}
.spd-sw-drop{background:repeating-linear-gradient(45deg,var(--sunken) 0 2px,transparent 2px 4px);border:1px dashed var(--ink-3)}
.spd-rcost{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2)}
.spd-rnote{margin:6px 0 0}
.spd-rnote.spd-later{visibility:hidden}
.spd-rcost .spd-drf{stroke:var(--ink-3);stroke-width:.8}
/* folds in the guided cards (owner review 2026-10-14): the card says the point in a sentence or two; the detail and the formulas are one click away */
.spd-more{margin:8px 0 0}
.spd-more>summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-cap);font-weight:600;color:var(--ink-2);width:fit-content;max-width:100%}
.spd-more>summary::-webkit-details-marker{display:none}
.spd-more>summary::before{content:"+";flex:none;font-family:var(--font-mono);width:16px;height:16px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:3px;font-size:var(--fs-mark);margin-top:1px}
.spd-more[open]>summary::before{content:"−"}
.spd-more>summary:hover{color:var(--ink)}
.spd-more>summary:focus-visible{outline:2px solid var(--ink-3);outline-offset:2px}
.spd-more-b{margin:6px 0 0 7px;padding-left:12px;border-left:2px solid var(--line-2)}
.spd-more-b>p{margin:6px 0 0}
.spd-more-b>p:first-child{margin-top:0}
/* 知识梳理: two schematic pictures in the text's own symbols (HTML grids that size to the figure), formulas on a line of their own.
   Section 2: one forward pass, row i sees x₁…xᵢ (solid cells; dashed: after it) and gives p(· | x₁, …, xᵢ) */
.spd-prf{container-type:inline-size}
.primer .spd-prg{display:grid;grid-template-columns:auto repeat(5,minmax(26px,44px)) auto auto;gap:6px;align-items:center;justify-content:start;font-size:var(--fs-stage);line-height:1.2}
.primer .spd-prg-h,.primer .spd-prg-i,.primer .spd-prr-l,.primer .spd-prr-n{font-size:var(--fs-cap);color:var(--ink-2);white-space:nowrap}
.primer .spd-prg-hc{grid-column:2 / span 5;text-align:center}
.primer .spd-prg-i,.primer .spd-prr-n{text-align:center}
.primer .spd-prg-c{height:30px;display:grid;place-items:center;border-radius:4px;border:1px dashed var(--line-2);min-width:0}
.primer .spd-prg-c.spd-seen{background:var(--sunken);border:1px solid var(--ink-3)}
.primer .spd-prg-a{color:var(--ink-3)}
.primer .spd-prg-o{justify-self:start;white-space:nowrap;padding:3px 8px;border:1.5px solid var(--ink);border-radius:4px}
/* section 3: one round, the guesses d₁…d₄ against the target's ŷ₁…ŷ₅ in the lab's chip colours, the verdict under them in words */
.primer .spd-prr{display:grid;grid-template-columns:auto repeat(5,minmax(0,76px));gap:6px 8px;align-items:center;justify-content:start;font-size:var(--fs-stage);line-height:1.2}
.primer .spd-prr-l{padding-right:4px}
.primer .spd-prc{height:30px;display:grid;place-items:center;border-radius:5px;border:1.5px solid transparent;min-width:0}
.primer .spd-prm{text-align:center;font-size:var(--fs-cap);font-weight:600;white-space:nowrap}
.primer .spd-pm-ok{color:var(--c-ok)}
.primer .spd-pm-bad{color:var(--c-oom)}
.primer .spd-pm-void{color:var(--ink-3)}
@container (max-width:420px){.primer .spd-prg{gap:5px 4px;font-size:var(--fs-ui)}.primer .spd-prg-c{height:28px}.primer .spd-prg-o{padding:2px 5px}
  .primer .spd-prr{gap:5px 5px;font-size:var(--fs-ui)}.primer .spd-prc{height:28px}.primer .spd-prm{font-size:var(--fs-label)}}
.primer .spd-prfx{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;row-gap:6px;margin:2px 0 14px;padding-left:1em;font-size:1.05em;line-height:1.3;min-width:0}
.primer .spd-prfx>span{min-width:0;max-width:100%}
@media (max-width:760px){.primer .spd-prfx{padding-left:.4em}}
/* ---------- a wide stage (polish round 3, 2026-10-16; the owner's B4, R7.12): at 1440 × 900 parts 5 and 7 needed 126 and 56 px of
   scrolling inside the stage, and on entering part 7, the stage pushed up at the end of the bench, the batch curve began under the top
   bar. On a stage at least 736 px wide (windows from about 1226 px) the k curve, the batch curve and the timeline have their legend in a
   column on their right (the plots drawn as much narrower, at the same scale, and the two curves a little shorter: plotBox reads
   --spd-legw and --spd-ch), the metric cards share the row by their number with the value and change lines tighter (as
   tool-scheduling's, CONTRACT §19), a Chinese title keeps one line (every Chinese title fits on one line here, so it never grows while
   a round plays, R7.9), and a few gaps are tighter. Same pieces in the same order, same animation; phones (≤ 760 px) and narrower
   stages keep the layout above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  html[lang^="zh"] .spd-st-title{min-height:1.3em}
  .spd-main{gap:8px}
  .spd-blk{padding-top:8px;padding-bottom:8px}
  .spd-ch-t{margin-bottom:4px}
  .spd-axl{margin-top:0}
  .spd-leg{margin-top:4px}
  .spd-stepin{padding-bottom:8px;margin-bottom:8px}
  /* the legend beside its plot: the title across the top, the plot (and its axis note) on the left, the legend on the right */
  #spd-kcurve,#spd-bcurve,#spd-time{display:grid;grid-template-columns:minmax(0,1fr) var(--spd-legw);column-gap:16px;align-items:start;--spd-legw:212px}
  #spd-kcurve{--spd-ch:176}
  #spd-bcurve{--spd-ch:160}
  :is(#spd-kcurve,#spd-bcurve,#spd-time)>.spd-ch-t{grid-column:1/-1}
  :is(#spd-kcurve,#spd-bcurve,#spd-time)>.spd-svg{grid-column:1;grid-row:2}
  :is(#spd-kcurve,#spd-bcurve)>.spd-axl{grid-column:1;grid-row:3}
  :is(#spd-kcurve,#spd-bcurve,#spd-time)>.spd-leg{grid-column:2;grid-row:2/span 2;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:5px;margin-top:0}
  #spd-time>.spd-leg{grid-row:2}
  #spd-time>.spd-tnote{grid-column:1/-1;grid-row:3}
  /* the round: the same rows, a little closer */
  .spd-ctx{margin-bottom:4px}
  .spd-stg{margin-top:6px}
  .spd-stl{margin-bottom:3px}
  .spd-chip{height:26px}
  .spd-brk{margin-top:8px;margin-bottom:2px}
  .spd-rleg{margin-top:6px}
  .spd-player{margin-top:8px}
  /* the metric cards share the row: three columns for up to three cards, else one per card (it was five columns, the rest empty) */
  .spd-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}
  .spd-metrics:has(>.metric:nth-child(4 of :not([hidden]))){grid-template-columns:repeat(4,minmax(0,1fr))}
  .spd-metrics:has(>.metric:nth-child(5 of :not([hidden]))){grid-template-columns:repeat(5,minmax(0,1fr))}
  .spd-metrics .metric .v{line-height:1.25}
  .spd-metrics .metric .d{min-height:13px;line-height:1.1}
  .spd-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.spd-st-title{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) part 5 still ran 41 px past the stage (English: parts 2 and
   5, 16 and 48). The k curve is drawn 140 px high instead of 176 (plotBox reads --spd-ch; its text keeps its size), the blocks sit 6 px
   apart and their vertical padding is 6 px. In English, whose legend takes two lines, the blocks' vertical padding is 4 px and the
   space under the step's picture and above the legend is smaller (R7.16) */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  #spd-kcurve{--spd-ch:140}
  .spd-main{gap:6px}
  .spd-blk{padding-top:6px;padding-bottom:6px}
  html[lang="en"] .spd-blk{padding-top:4px;padding-bottom:4px}
  html[lang="en"] .spd-stepin{padding-bottom:4px}
  html[lang="en"] .spd-leg{margin-top:2px}
}}
/* refit step 2 (2026-10-24): at 700 px tall or less (1366 × 650) part 7 still ran 10 px past the stage (English 11). The blocks sit
   4 px apart with 4 px vertical padding, and the space above the cards and above the math is 6 px (parts 2 and 5 still run 43–71 px
   past) */
@media (min-width:761px) and (min-height:600px) and (max-height:700px){@container (min-width:736px){
  .spd-main{gap:4px}
  .spd-blk{padding-top:4px;padding-bottom:4px}
  .spd-metrics{margin-top:6px}
  .spd-stage>details.math{margin-top:6px;padding-top:6px}
}}

/* tensors: broadcasting's axis boxes lined up from the right (stretched axes dashed, a mismatch outlined in red), the small arrays with
   their numbers and ghost copies, einsum's letter table (a summed letter grey with a slash), and 1-NN's bars on one log axis with the H100 line.
   Colours (R5.6): grayscale and dashes only; red only for an error or an array that does not fit; green only for the challenge's goal. */
.ts-stage .stage-head{align-items:center}
.ts-stage .stage-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end}
.ts-view button{font-size:var(--fs-label);padding:3px 9px;white-space:nowrap}
.ts-graph{padding:12px 14px 14px;display:grid;gap:12px;min-width:0}
.ts-bc,.ts-es,.ts-nn{display:grid;gap:10px;min-width:0}
.ts-graph>[hidden]{display:none}
.ts-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35}
/* A3: what X and Y are, and the inserted axes of the broadcast version */
.ts-sub2{font-size:var(--fs-label);color:var(--ink-2);line-height:1.4;margin-top:-6px}
.ts-nnshape{display:grid;gap:8px;min-width:0}
.ts-nnshape .ts-sub2{margin-top:0}
.ts-nnshape .ts-axes{max-width:460px}
.ts-nnshape .ts-ax{height:26px;font-size:var(--fs-label)}
.ts-rl .ts-code1{font-size:var(--fs-label);color:var(--ink)}
/* the part's focus lights up on the chart (R3.14) */
.ts-graph[data-focus="bc"] .ts-axes,.ts-graph[data-focus="es"] .ts-ltw,.ts-graph[data-focus="nn"] .ts-nnrows{outline:2px dashed var(--focus-frame);outline-offset:4px;border-radius:4px}

/* ---------- broadcasting: one row of axis boxes per operand, lined up from the right ---------- */
.ts-axes{display:grid;gap:6px;align-items:center;min-width:0;max-width:560px}
.ts-axh{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ts-rl{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;padding-right:4px}
.ts-rl .mono{font-size:var(--fs-label);color:var(--ink-3)}
.ts-rout{font-weight:650;color:var(--ink)}
.ts-ax{display:flex;align-items:center;justify-content:center;min-width:0;height:30px;padding:0 4px;box-sizing:border-box;border:1.5px solid var(--ink-2);border-radius:4px;background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help;outline-offset:2px}
.ts-ax.ts-ghost{border-style:dashed;border-color:var(--ink-3);background:transparent;color:var(--ink-2)}
.ts-ax.ts-none{border:1px dotted var(--line-2);background:transparent;color:var(--ink-3)}
.ts-ax.ts-out{background:var(--surface-2);font-weight:650;cursor:default}
.ts-ax.ts-out[data-tipx]{cursor:help}
.ts-ax.ts-q{border-color:var(--line-2);background:var(--sunken);color:var(--ink-3);cursor:default}
.ts-ax.ts-bad{border:2px solid var(--c-oom);color:var(--c-oom)}
.ts-ax.ts-bad.ts-x{background:transparent;font-weight:650}
.ts-err{margin:0;font-size:var(--fs-cap);line-height:1.45;color:var(--c-oom)}
.ts-res{margin:0;font-size:var(--fs-cap);line-height:1.45;color:var(--ink)}
/* the small arrays: real numbers solid, stretched ones dashed and grey (read again, not copied) */
.ts-nums{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
/* H5 (the owner, 2026-10-09: information runs together without a divider): the worked numbers start a block of their own under a hairline */
.ts-nums{border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
.ts-gw{display:grid;gap:3px;justify-items:center;min-width:0}
.ts-gcap{font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap}
.ts-grid{display:grid;gap:2px}
.ts-c{display:flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 3px;box-sizing:border-box;border:1px solid var(--line);border-radius:2px;background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink)}
.ts-c.ts-ghost{border-style:dashed;border-color:var(--ink-3);background:transparent;color:var(--ink-3)}
.ts-c.ts-out{background:var(--surface-2);cursor:help;outline-offset:1px}
.ts-op{font-family:var(--font-mono);font-size:var(--fs-body);color:var(--ink-2)}
.ts-qbox{display:flex;align-items:center;justify-content:center;width:64px;height:48px;border:1.5px solid var(--line-2);background:var(--sunken);border-radius:3px;font-family:var(--font-mono);font-size:var(--fs-lead);color:var(--ink-3)}

/* ---------- einsum: the letter table ---------- */
.ts-ltw{max-width:100%;overflow-x:auto;justify-self:start}
.ts-lt{border-collapse:collapse;font-size:var(--fs-label)}
.ts-lt th,.ts-lt td{border:1px solid var(--line);padding:4px 8px;text-align:center}
.ts-lt thead th{font-size:var(--fs-ui);color:var(--ink);vertical-align:top}
.ts-lt thead th[data-tipx]{cursor:help}
.ts-lt thead th.ts-sum{background:var(--surface-2)}
/* A2: each letter with its name under it */
.ts-lchar{display:block;font-family:var(--font-mono);font-size:var(--fs-ui);line-height:1.2}
.ts-lname{display:block;font-size:var(--fs-mark);font-weight:500;line-height:1.2;color:var(--ink-3);white-space:nowrap}
.ts-lt tbody th{text-align:left;font-weight:500;color:var(--ink-2)}
.ts-lt tbody th .mono{display:block;font-size:var(--fs-label);color:var(--ink-3)}
.ts-lt td.ts-no{color:var(--ink-3)}
.ts-lt tr.ts-out th{color:var(--ink);font-weight:650}
/* round 3 (review 2026-10-03, R5.10): a summed letter's output cell is grey with a diagonal slash and says so in words; a strike-through
   on a one-letter cell read as a smudge on the screen */
.ts-lt td.ts-x{color:var(--ink-2);white-space:nowrap;cursor:help;font-size:var(--fs-label);
  background:linear-gradient(to top right,transparent calc(50% - .75px),var(--ink-3) calc(50% - .75px),var(--ink-3) calc(50% + .75px),transparent calc(50% + .75px)),var(--sunken)}
.ts-lt td.ts-x span{background:var(--sunken);padding:0 3px;border-radius:2px}
/* on a narrow screen “summed away” may break between its words, never inside one */
.ts-lt td.ts-x{white-space:normal}
.ts-lt td.ts-x span{white-space:nowrap}

/* ---------- 1-NN: rows on one log axis, the H100 line ---------- */
.ts-nnrows{display:grid;gap:10px;min-width:0;overflow-x:clip;padding-top:2px}
.ts-nnr{display:grid;gap:3px;min-width:0;cursor:help;border-radius:3px;outline-offset:2px}
.ts-nnh{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:var(--fs-cap);color:var(--ink)}
.ts-shp{font-size:var(--fs-label);color:var(--ink-3)}
.ts-code1{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);background:none;padding:0;white-space:normal;overflow-wrap:anywhere}
.ts-trk{position:relative;height:18px;background:var(--surface-2);border-radius:2px}
.ts-bar{position:absolute;left:0;top:0;bottom:0;display:block;background:var(--ink-2);border-radius:2px;transition:width .25s ease-out}
.ts-nnr.ts-over .ts-bar{background:var(--c-oom)}
.ts-hl{position:absolute;top:-4px;bottom:-4px;width:0;border-left:3px solid var(--ink);margin-left:-1.5px;z-index:2}
.ts-bv{position:absolute;top:50%;transform:translateY(-50%);margin-left:6px;font-size:var(--fs-label);color:var(--ink);white-space:nowrap;z-index:3}
.ts-bv.ts-in{transform:translate(-100%,-50%);margin-left:-6px;color:var(--bg)}
.ts-it{color:var(--ink-2);font-size:var(--fs-label)}
.ts-axis{position:relative;height:34px;border-top:1px solid var(--line);margin-top:2px}
.ts-axis span{position:absolute;top:3px;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap}
.ts-axis span:first-child{transform:none}
.ts-axis span:nth-child(5){transform:translateX(-100%)}
.ts-axis .ts-hlab{top:18px;color:var(--ink);font-weight:650}

/* ---------- legend ---------- */
.sw.ts-sw-ax{background:var(--surface);border:1.5px solid var(--ink-2)}
.sw.ts-sw-gh{background:transparent;border:1.5px dashed var(--ink-3)}
.sw.ts-sw-bad{background:transparent;border:2px solid var(--c-oom)}
.sw.ts-sw-col{background:var(--surface);border:1px solid var(--line)}
.sw.ts-sw-sum{background:linear-gradient(to top right,transparent calc(50% - .75px),var(--ink-3) calc(50% - .75px),var(--ink-3) calc(50% + .75px),transparent calc(50% + .75px)),var(--sunken);border:1px solid var(--line)}
.sw.ts-sw-bar{background:var(--ink-2)}
.sw.ts-sw-hl{width:3px;background:var(--ink);border-radius:0}
.sw.ts-sw-over{background:var(--c-oom)}
#ts-legend>span{cursor:help}

/* ---------- metric cards ---------- */
.ts-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ts-metrics .metric .v{overflow-wrap:anywhere}
.ts-scope{margin:10px 0 6px;font-size:var(--fs-label);line-height:1.45;width:max-content;max-width:100%;cursor:help;border-bottom:1px dotted var(--line-2)}

/* ---------- rail ---------- */
.ts-mt{margin-top:12px}
.ts-ch-res{scroll-margin-top:120px}
.goal.ts-over b{color:var(--c-oom)}
.ts-lv{margin-top:6px}
.ts-lv .lever .lv-r{grid-column:2 / 4;grid-row:2;padding-top:0}
.ts-lv .lever .lv-d{grid-row:3;font-family:var(--font-mono);font-size:var(--fs-label);overflow-wrap:anywhere}
.ts-lv .lever .lv-r:empty{display:none}
.ts-app .goal span:last-child{white-space:nowrap}
.ts-app .goal.ts-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.ts-app .goal.ts-goal span:last-child{white-space:normal}
.ts-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.ts-app .inline-ctl .seg-ctl button{white-space:nowrap}
.ts-fx{margin:8px 0;font-size:var(--fs-body);overflow-x:auto}
/* A16: why Next is greyed out */
.ts-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .ts-why{margin-top:6px}
/* A6: what to remember, each line with its picture */
.ts-remlist{padding-left:18px}
.ts-remlist li{margin-bottom:8px}
.ts-rem{font-size:var(--fs-label);white-space:nowrap}
.ts-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}
/* A14: phones, the part's one control at the top of the chart */
.ts-phone{display:none}

/* ---------- settings ---------- */
.ts-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.ts-grp[hidden]{display:none}
.ts-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.ts-grp .ctl>.lbl{display:block}
.ts-grp .seg-ctl{flex-wrap:wrap}
.ts-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.ts-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.ts-prod li{margin-bottom:6px}
.ts-prod code,.ts-app .refs code{word-break:break-word}

/* ---------- mini result bar ---------- */
.ts-dk{font-size:var(--fs-label);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.ts-dkb{display:grid;gap:2px;width:100%;min-width:48px}
.ts-dkb i{display:block;height:4px;background:var(--ink-2);border-radius:1px}
.ts-dkb i.ts-over{background:var(--c-oom)}

@media (max-width:760px){
  /* phones: the picture first, its legend right under it (R7.3) */
  .ts-stage{display:flex;flex-direction:column}
  .ts-stage>.stage-head{order:1}
  .ts-stage>.ts-graph{order:2}
  .ts-stage>.legend-row{order:3}
  .ts-stage>.ts-scope{order:4}
  .ts-stage>.metrics{order:4}
  .ts-stage>details.math{order:5}
  .ts-graph{padding:10px 10px 12px}
  .ts-phone:not(:empty){display:block}
  .ts-ax{font-size:var(--fs-label);height:28px}
  .ts-axh{font-size:var(--fs-mark)}
  .ts-c{min-width:26px;font-size:var(--fs-mark);height:20px}
  .ts-lt th,.ts-lt td{padding:3px 4px}
  .ts-lt{font-size:var(--fs-label)}
  .ts-metrics .metric .v{font-size:var(--fs-body)}
}
@media (prefers-reduced-motion:reduce){.ts-bar{transition:none}}
/* first look: chips on one line each, the bar's value above the H100 line, long shapes in the metric cards */
.ts-grp .seg-ctl button,.ts-app .inline-ctl .seg-ctl button{white-space:nowrap;flex:1 0 auto}
.ts-bv.ts-in{background:var(--ink-2);padding:0 4px;border-radius:2px}
.ts-nnr.ts-over .ts-bv.ts-in{background:var(--c-oom)}
.ts-metrics .metric.ts-long .v{font-size:var(--fs-stage);white-space:normal}
/* the mini result bar: one small box per axis (red: the axis that does not match) or per einsum letter (dashed: summed) */
.ts-dkx{display:flex;gap:2px;align-items:center}
.ts-dkx i{display:block;width:8px;height:12px;border:1.5px solid var(--ink-2);border-radius:2px;box-sizing:border-box}
.ts-dkx i.ts-bad{border-color:var(--c-oom)}
.ts-dkx i.ts-sum{border-style:dashed;border-color:var(--ink-3)}

/* A8: in the narrow rail the comparison chart's values sit on their own line under each bar, never in a column right of a long bar */
.ts-ch-res .cmp-track{margin-bottom:17px}
.ts-ch-res .cmp-val{left:0!important;top:calc(100% + 3px);transform:none;margin-left:0;white-space:nowrap;background:none;padding:0}
/* A6: why the challenge limits the loop */
.ts-goalwhy{margin:6px 0 10px;color:var(--ink-2);line-height:1.45}
@media (max-width:760px){
  /* A24: long values such as (32, 4096) or 5,722 GiB fit their card on phones */
  .ts-metrics .metric .v{font-size:var(--fs-ui);white-space:normal}
  .ts-metrics .metric.ts-long .v{font-size:var(--fs-cap)}
}
/* phones: the X/Y note goes under the chart, so the bars start on the first screen (R7.3) */
@media (max-width:760px){.ts-nn>.ts-xy{order:1;margin-top:0}}
/* a value label sits on a halo of the track's colour, so the H100 line never runs through its text */
.ts-bv:not(.ts-in){background:var(--surface-2);padding:0 3px;margin-left:3px;border-radius:2px}

/* ---------- round 3 (review 2026-10-03) ---------- */
/* part 4: the single-choice note sits right above the strings (R2.5), not in the prose */
.ts-one{margin:12px 0 0}
/* part 5: each way of writing the distance, term by term: what it computes, its shape, its memory at the current sizes (R6.29) */
.ts-terms{display:grid;gap:10px;margin:10px 0 12px}
.ts-tw{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);min-width:0}
.ts-th{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.4;margin-bottom:2px}
.ts-th code{display:block;font-size:var(--fs-label);font-weight:400;color:var(--ink-2);white-space:normal;overflow-wrap:anywhere}
.ts-tw .ts-fx{margin:0 0 4px;font-size:var(--fs-stage)}
.ts-tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;align-items:center;padding:5px 0;border-top:1px solid var(--line);font-size:var(--fs-label);line-height:1.4}
.ts-tt{grid-column:1;min-width:0;color:var(--ink-2)}
.ts-tt math{font-size:var(--fs-ui);color:var(--ink)}
.ts-ts{grid-column:1;font-size:var(--fs-mark);color:var(--ink-3);white-space:nowrap}
.ts-tb{grid-column:2;grid-row:1 / 3;min-width:62px;text-align:right;font-size:var(--fs-label);color:var(--ink);white-space:nowrap}
.ts-tr.ts-over .ts-tb{color:var(--c-oom)}
.ts-tnote{padding-top:5px;border-top:1px solid var(--line);font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
/* part 5's picture: each axis named by what it indexes, and the pairs the broadcast makes */
.ts-nnshape .ts-axh{white-space:normal;font-family:inherit;font-size:var(--fs-mark);line-height:1.2;align-self:end}
.ts-pair{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0}
.ts-pgrid{display:grid;grid-template-columns:auto repeat(4,auto);gap:2px;font-family:var(--font-mono);font-size:var(--fs-label)}
.ts-ph{display:flex;align-items:center;justify-content:center;min-height:20px;padding:0 4px;color:var(--ink-3)}
.ts-pc{display:flex;align-items:center;justify-content:center;min-height:20px;padding:0 5px;border:1px solid var(--line);border-radius:2px;background:var(--surface-2);color:var(--ink);white-space:nowrap}
.ts-pc.ts-pe{border-color:transparent;background:none;color:var(--ink-3)}
.ts-pgrid sub,.ts-pcap sub{font-size:.75em;line-height:0}
.ts-pcap{margin:0;flex:1 1 220px;max-width:340px;color:var(--ink-2);line-height:1.45}
@media (max-width:760px){
  .ts-nnshape .ts-axh{font-size:var(--fs-mark)}
  .ts-nnshape .ts-rl{display:flex;flex-direction:column;white-space:normal;line-height:1.25}
  .ts-nnshape .ts-rl>*{white-space:nowrap}
  .ts-pgrid{font-size:var(--fs-mark)}
  .ts-pc{padding:0 3px}
}

/* review v6 TS-S7: the bars' legend sits right above the bars when the axis picture is shown */
.ts-nnleg{margin:4px 0 0}
/* Show the math as short blocks (H2, 2026-10-09): a lead line, then the formula's rows in a grid; blocks are split by a hairline */
.ts-mb{padding:10px 0}
.ts-mb:first-child{padding-top:2px}
.ts-mb+.ts-mb{border-top:1px solid var(--line)}
.mathbody .ts-ml{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-math);line-height:1.55;color:var(--ink-2)}
.ts-mg{display:grid;grid-template-columns:repeat(var(--n),auto);justify-content:start;justify-items:center;align-items:center;column-gap:.35em;row-gap:.45em;overflow-x:auto;padding-block:.3em;margin-bottom:4px;font-size:var(--fs-cap)}
.ts-mg .ts-mn{justify-self:end}
.ts-mg .ts-mw{justify-self:start}
.ts-mg .ts-mh{font-family:'STIX Two Math','Cambria Math','Latin Modern Math','Noto Sans Math',var(--font-ui);font-size:1.08em;white-space:nowrap}
/* a cell never wraps or shrinks under its text (a long name scrolls the grid instead of being cut); chain grids put each name on its
   own line above its “=” steps at phone width (H2) */
.ts-mg>.ts-mc{white-space:nowrap;min-width:max-content}
/* the owner's review of 2026-10-09 (R6.37: a row the reader has to scroll sideways is not read): words and numbers with no formula in
   them wrap at their spaces (the next line indented), and the chain grids put their names above their steps when the stage is
   narrow (a phone, or the 900 px layout: a container query on the stage, not the window's width) */
.ts-mg>.ts-mh:not(:has(math)){white-space:normal;min-width:0}
.ts-mg>.ts-mh:not(.ts-mn):not(:has(math)){padding-left:1.2em;text-indent:-1.2em}
@container (max-width:540px){
  .ts-mg.ts-chain{grid-template-columns:auto minmax(0,1fr)}
  .ts-mg.ts-chain .ts-mn{grid-column:1/-1;justify-self:start}
  .ts-mg.ts-chain>.ts-mc:not(.ts-mn){justify-self:start}
  .ts-mg.ts-chain>span:empty{display:none}
}
/* the pairing picture's cells hold typeset x_i − y_j at the text size (H1, 2026-10-09) */
.ts-pgrid math.tex{font-size:1em}


/* ---------- polish round 5 (B4, 2026-10-17): the stage fits 1440 × 900 ----------
   Part 5 (the 1-NN rewrite: the broadcast's axes, the pairs it makes, then the three ways on the log axis) ran 147 px past the stage's
   814 px at 1440 × 900. On a desktop stage at least 736 px wide (1440 and 1280 px windows):
   - the table of pairs (x_i − y_j) stands right of the axes picture, which keeps its 460 px, and its caption runs across under both
     (it had a row of its own under the axes, with the caption beside it in 340 px). The pair box is display:contents, so the
     order is the page's: the note, the axes, the table, the caption;
   - in each row of the bars the Python-loop count stands right of the bar instead of on a line under it; the bars and the axis under
     them share the column left of it, so the axis still reads the bars;
   - the metric cards take the kit's tight line heights (CONTRACT §19; a card name stays 12 px) and a few gaps are tighter.
   Same blocks in the same order, the same lines, texts and colours; phones (≤ 760 px) and narrower stages keep the layout above */
@media (min-width:761px){@container (min-width:736px){
  .ts-graph{margin-top:10px;padding:8px 12px 10px}
  .ts-nn{gap:8px}
  .ts-nnshape{grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:24px;row-gap:8px;align-items:center}
  .ts-nnshape>.ts-sub2{grid-column:1/-1}
  .ts-nnshape .ts-axes{max-width:none}
  .ts-pair{display:contents}
  .ts-pgrid{grid-column:2;justify-self:start}
  .ts-pcap{grid-column:1/-1;max-width:none}
  .ts-nnrows{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:8px}
  .ts-nnr{grid-column:1/-1;grid-template-columns:subgrid;row-gap:3px}
  .ts-nnr>.ts-nnh,.ts-nnr>.ts-code1{grid-column:1/-1}
  .ts-nnr>.ts-trk{grid-column:1}
  .ts-nnr>.ts-it{grid-column:2;align-self:center;white-space:nowrap}
  .ts-axis{grid-column:1}
  .ts-stage>.ts-scope{margin:8px 0 4px}
  .ts-metrics{margin-top:8px}
  .ts-metrics .metric .v{line-height:1.25}
  .ts-metrics .metric .sub{line-height:1.25}
  .ts-metrics .metric .d{min-height:13px;line-height:1.1}
  .ts-stage>details.math{margin-top:8px;padding-top:8px}
}}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and part 5 (the 1-NN rewrite) still ran 41 px past it at 1536 × 730; the gaps between its blocks, the axes
   picture's rows and the rows of bars are a few px tighter. Same blocks, lines and sizes of text */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){
  .ts-nn{gap:4px}
  .ts-nnshape{row-gap:5px}
  .ts-nnshape .ts-ax{height:22px}
  .ts-nnrows{row-gap:5px}
  .ts-nnr{row-gap:2px}
  .ts-axis{height:30px}
  .ts-stage .ts-graph{padding-top:6px;padding-bottom:6px}
  .ts-stage>.ts-scope{margin:6px 0 2px}
}

/* tokenization-cost: two sentences as strips of byte cells whose boxes (tokens) merge as the merges grow, the merges as a row of ticks
   with the last three listed, and the cost of each sentence. Grayscale and hatching only (R5.6: blue, amber and violet belong to
   weights, KV cache and runtime overhead); green and red only for the challenge's goal. */
.tk-stage .stage-head{align-items:center}
.tk-graph{padding:12px 14px 14px;display:grid;gap:16px}
.tk-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
/* the part's focus lights up on the chart (R3.14) */
.tk-graph[data-focus="strips"] .tk-strips,.tk-graph[data-focus="merges"] .tk-merges,.tk-graph[data-focus="cost"] .tk-cost{outline:2px dashed var(--focus-frame);outline-offset:4px;border-radius:4px}

/* ---------- the strips: one cell per byte, a box per token ---------- */
.tk-strips{display:grid;gap:10px;min-width:0}
.tk-strip{display:grid;gap:3px;min-width:0}
.tk-sh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--fs-cap)}
.tk-sh b{font-weight:650}
.tk-sn{font-size:var(--fs-cap);font-weight:600;color:var(--ink);white-space:nowrap}
.tk-track{position:relative;height:50px;max-width:100%;outline-offset:3px}
.tk-glyphs{position:absolute;left:0;right:0;top:0;height:20px}
.tk-glyphs .tk-g{position:absolute;top:0;height:20px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-cap);line-height:1;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--line);cursor:help}
/* parts 1 and 2: the Chinese sentence as plain text over a dashed box, without its byte cells (R3.8, review A1) */
.tk-glyphs .tk-gplain{position:absolute;left:0;top:0;height:20px;display:flex;align-items:center;font-size:var(--fs-ui);line-height:1;color:var(--ink);white-space:nowrap;letter-spacing:.04em}
.tk-mask{position:absolute;left:0;right:0;top:0;height:22px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 6px;border:1.5px dashed var(--ink-3);border-radius:3px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1;color:var(--ink-2);white-space:nowrap;overflow:hidden;cursor:help;outline-offset:2px}
.tk-track.tk-masked .tk-boxes{background:none}
.tk-glyphs em{font-style:normal;color:var(--ink-3)}
.tk-boxes{position:absolute;left:0;right:0;top:23px;height:22px;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--cw,14px) - 1px),var(--line-2) calc(var(--cw,14px) - 1px) var(--cw,14px))}
.tk-tok{position:absolute;top:0;height:22px;box-sizing:border-box;border-radius:3px;border:1.5px solid var(--ink-2);background:var(--surface-2);transition:left .28s ease-out,width .28s ease-out,opacity .28s ease-out;outline-offset:1px;cursor:help}
.tk-tok:not(.tk-one){background:var(--ink-3);border-color:var(--ink)}
.tk-tok.tk-one{background:repeating-linear-gradient(135deg,var(--surface) 0 2px,var(--ink-3) 2px 3px);border-color:var(--ink-3);border-width:1px}
.tk-tok.tk-new{opacity:0}
.tk-tok.tk-gone{opacity:0;pointer-events:none}
.tk-hex{position:absolute;left:0;right:0;top:47px;height:20px}
.tk-hex span{position:absolute;top:0;display:grid;justify-items:center;font-size:var(--fs-mark);line-height:9px;color:var(--ink-2)}
.tk-hex b{font-weight:500}
.tk-track:has(.tk-hex:not([hidden])){height:70px}
.tk-hexcap{margin:0;color:var(--ink-2);line-height:1.4}
/* part 3: starting from bytes against starting from whole characters (R6.25, review A19) */
.tk-vs{display:grid;gap:8px;margin-top:4px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}   /* a soft panel, no frame (精装修 step 2) */
.tk-vs .tk-cap{margin-bottom:0}
.tk-vsrow{display:grid;grid-template-columns:minmax(0,150px) max-content minmax(0,1fr);align-items:center;gap:4px 12px}
.tk-vsl{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.3}
.tk-vsfig{display:flex;align-items:center;gap:3px}
.tk-vc{font-style:normal;font-size:var(--fs-stage);line-height:1;color:var(--ink);padding:0 2px}
.tk-vb{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;box-sizing:border-box;padding:0 3px;border:1.5px solid var(--ink-2);border-radius:3px;background:var(--surface-2)}
.tk-vb.tk-one{background:repeating-linear-gradient(135deg,var(--surface) 0 2px,var(--ink-3) 2px 3px);border:1px solid var(--ink-3)}
.tk-vb b{font-weight:500;font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.2;color:var(--ink);background:var(--surface);padding:0 2px;border-radius:2px}
.tk-vb:not(.tk-one) b{font-family:inherit;font-size:var(--fs-ui);background:none}
.tk-vsn{font-size:var(--fs-label);color:var(--ink-2);line-height:1.4;min-width:0}
.tk-vsnote{margin:0;color:var(--ink-3);line-height:1.4}

/* ---------- the merges: one tick per merge (tall: Chinese bytes; short: ASCII), then the last three ---------- */
.tk-merges{display:grid;gap:4px;min-width:0}
.tk-ticks{height:32px;cursor:help;border-bottom:1px solid var(--line);outline-offset:3px}
.tk-ticks svg{display:block;width:100%;height:30px}
.tk-tz{fill:var(--ink)}
.tk-te{fill:var(--ink-3)}
.tk-tu{fill:var(--line)}
.tk-mg-sum{font-size:var(--fs-label);color:var(--ink-2)}
.tk-mg-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px;min-width:0}
.tk-mg-list li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:var(--fs-label);line-height:1.4;min-width:0;cursor:help}
.tk-mg-list li.tk-mg-h,.tk-mg-list li.tk-mg-none{font-size:var(--fs-label);color:var(--ink-3);cursor:default}
.tk-mg-n{font-size:var(--fs-mark);color:var(--ink-3);min-width:34px}
.tk-pc{font-family:var(--font-mono);font-size:var(--fs-label);padding:0 5px;border:1px solid var(--line);border-radius:3px;background:var(--surface);white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;min-width:0}
.tk-where{font-size:var(--fs-label);color:var(--ink-2)}
.tk-mg-first{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:var(--fs-label);line-height:1.4;min-width:0}
.tk-mg-first:empty{display:none}
.tk-mg-fl{font-size:var(--fs-label);color:var(--ink-3)}
.tk-mg-first .tk-mg-n{min-width:0}
.tk-mg-hexnote{margin:2px 0 0;color:var(--ink-2);line-height:1.4}
.tk-pc.tk-hx{font-size:var(--fs-mark);color:var(--ink-2);border-style:dashed}
.tk-pc.tk-hx[data-tipx]{cursor:help}
.tk-op{color:var(--ink-3);font-family:var(--font-mono);font-size:var(--fs-label)}
.tk-mg-c{font-size:var(--fs-mark);color:var(--ink-2)}
.tk-chip{font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.5;padding:0 6px;border-radius:999px;border:1px solid var(--ink-3);color:var(--ink-2)}

/* ---------- the cost: tokens on one scale, the bytes dashed ---------- */
.tk-cost{display:grid;gap:6px;min-width:0}
.tk-crow{display:grid;grid-template-columns:64px minmax(0,1fr) 86px;align-items:center;gap:8px}
html[lang^="zh"] .tk-crow{grid-template-columns:40px minmax(0,1fr) 86px}
.tk-cl{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.tk-cbar{position:relative;height:16px;background:var(--surface-2);border-radius:2px;cursor:help;outline-offset:2px}
.tk-cfill{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:2px;transition:width .28s ease-out}
.tk-crow[data-l="zh"] .tk-cfill{background:var(--ink-3)}
.tk-cghost{position:absolute;left:0;top:-3px;bottom:-3px;border:1.5px dashed var(--ink-3);border-radius:3px;pointer-events:none}
.tk-cv{font-size:var(--fs-label);color:var(--ink);white-space:nowrap;text-align:right}
.tk-ctx{margin:4px 0 0;color:var(--ink-2);line-height:1.45}
.tk-ctx p{margin:0}
.tk-ctx p+p{margin-top:2px}

/* ---------- legend swatches ---------- */
.sw.tk-sw-one{background:repeating-linear-gradient(135deg,var(--surface) 0 2px,var(--ink-3) 2px 3px);border-color:var(--ink-3)}
.sw.tk-sw-tok{background:var(--ink-3);border:1.5px solid var(--ink)}
.sw.tk-sw-tall{width:3px;height:13px;border:0;border-radius:0;background:var(--ink);margin:0 8px 0 4px;vertical-align:-2px}
.sw.tk-sw-short{width:3px;height:6px;border:0;border-radius:0;background:var(--ink-3);margin:0 8px 0 4px;vertical-align:0}
.sw.tk-sw-ghost{background:transparent;border:1.5px dashed var(--ink-3)}
.tk-sw-dot{display:inline-block;width:11px;margin-right:6px;text-align:center;font-weight:700;font-size:var(--fs-ui);line-height:11px;color:var(--ink)}
#tk-legend>span{cursor:help}

/* ---------- metric cards: four in a row on wide stages, two by two on narrow ones ---------- */
.metric.tk-hidm .v{color:var(--ink-3)}
.tk-metrics[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.tk-metrics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- rail ---------- */
.tk-kctl .tk-krow{display:flex;align-items:center;gap:6px}
.tk-kctl .tk-krow input{flex:1 1 auto;min-width:0}
.tk-kstep{padding:2px 10px;font-size:var(--fs-cap);line-height:1.2;font-family:var(--font-mono)}
.tk-app .seg-ctl button{line-height:1.25;white-space:normal}
.tk-app .seg-ctl[data-key="mix"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tk-lv{margin-top:6px}
.tk-lv-h{display:flex;justify-content:space-between;gap:10px;padding:0 13px 0 36px;font-family:var(--font-mono);font-size:var(--fs-mark);letter-spacing:.02em;color:var(--ink-3)}
.tk-lv .levers{margin-top:3px}
.tk-goals{margin:4px 0 10px;padding-left:18px;font-size:var(--fs-ui)}
.tk-goals li{margin-bottom:3px}
/* part 7: each point with a button that shows its example on the chart (R6.23, as in Sampling) */
.tk-remlist li{margin-bottom:8px}
.tk-rem{font-size:var(--fs-label);white-space:nowrap}
.tk-rem[aria-pressed="true"]{font-weight:650;text-decoration:none}
.tk-ch-res{scroll-margin-top:120px}
.goal.tk-over b{color:var(--c-oom)}
.progress.tk-over i{background:var(--c-oom)}

/* ---------- settings ---------- */
.tk-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.tk-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.tk-grp .ctl>.lbl{display:block}
.tk-kctl output{white-space:nowrap}

/* ---------- connect ---------- */
.tk-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.tk-prod li{margin-bottom:6px}
.tk-prod code,.refs code{word-break:break-word}
#tk-drill-a ol{margin:6px 0 0;padding-left:20px}

/* ---------- mini result bar: the two sentences' tokens on one scale ---------- */
.tk-dk{position:relative;height:14px;width:100%;min-width:48px;display:grid;gap:2px}
.tk-dk i{display:block;height:6px;border-radius:1px}
.tk-dk-en{background:var(--ink-2)}
.tk-dk-zh{background:var(--ink-3)}

@media (max-width:760px){
  /* phones: the strips first, their legend right under them (R7.3) */
  .tk-stage{display:flex;flex-direction:column}
  .tk-stage>.stage-head{order:1}
  .tk-stage>.tk-graph{order:2}
  .tk-stage>.legend-row{order:3}
  .tk-stage>.metrics{order:4}
  .tk-stage>details.math{order:5}
  .tk-graph{padding:10px 10px 12px}
  .tk-glyphs .tk-g{font-size:var(--fs-mark)}
  .tk-glyphs .tk-gplain{font-size:var(--fs-cap)}
  .tk-vsrow{grid-template-columns:max-content minmax(0,1fr)}
  .tk-vsl{grid-column:1/-1}
  .tk-crow{grid-template-columns:56px minmax(0,1fr) 78px}
  html[lang^="zh"] .tk-crow{grid-template-columns:34px minmax(0,1fr) 78px}
}
/* seven parts: the part bar's dots and Next stay on one line on a 390 px phone */
@media (max-width:420px){.tk-app .pb-dots{gap:3px}.tk-app .pb-dot{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.tk-tok,.tk-cfill{transition:none}}
/* Show the math as a few blocks (the owner, 2026-10-09, H1/H2): a lead line in words, the formula typeset, then the numbers; a hairline
   between blocks */
#tk-mathbody .tk-mb+.tk-mb{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
#tk-mathbody .tk-mlead{font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.5;color:var(--ink-2);margin:2px 0 4px}
#tk-mathbody .tk-math-line{overflow-x:auto;max-width:100%;margin:4px 0;font-size:var(--fs-stage)}
/* a formula that does not fit its box (the owner's review of 2026-10-09, R6.37): the name with “=” first; the right-hand side beside it
   while its widest term fits there, else on its own line, indented under the name; its terms wrap onto the next line under its first term */
#tk-mathbody .tk-fw{display:flex;flex-wrap:wrap;align-items:baseline;padding-left:1.4em}
#tk-mathbody .tk-fwn{flex:none;margin-left:-1.4em;white-space:nowrap}
#tk-mathbody .tk-fwr{flex:1 1 0%;min-width:min-content}
#tk-mathbody .tk-fg{display:inline-block;max-width:100%}
#tk-mathbody .tk-fp{display:inline-block;white-space:nowrap}
/* the stage's three blocks (strips, merges, cost), each under its own label, get a hairline between them, drawn in the gap so the
   stage keeps its height (the owner, 2026-10-09, H5). Next to the part's dashed focus frame the frame already separates, so the
   hairline there turns transparent */
.tk-graph>.tk-merges,.tk-graph>.tk-cost{position:relative}
.tk-graph>.tk-merges::before,.tk-graph>.tk-cost::before{content:"";position:absolute;left:0;right:0;top:-8px;border-top:1px solid var(--line);pointer-events:none}
.tk-graph[data-focus="strips"]>.tk-merges::before,.tk-graph[data-focus="merges"]>.tk-merges::before,.tk-graph[data-focus="merges"]>.tk-cost::before,.tk-graph[data-focus="cost"]>.tk-cost::before{border-top-color:transparent}
/* ---------- polish r5 (B4, R7.12): parts 1, 3, 5 and 6 fit a 1440 × 900 screen. The stage stacked the two sentences' strips (189 px;
   part 3 adds the bytes-against-characters box, 352 px), the merges (194 px with the last three listed) and the cost (123 px) over four
   metric cards, so it scrolled 41–101 px inside itself (English 88–141: there the status also took a line of its own). On a stage at
   least 736 px wide the merges and the cost stand side by side under the strips, with a hairline between them (R7.13), read left to
   right as they read top to bottom before. The merges take the wider column (the row of ticks is drawn at its width, 478 px instead of
   760, still wider than on a phone); in the narrower cost column each sentence's label and count share a line and its bar spans the
   column under them (in part 3, which lists no merges yet, the cost takes the wider column and keeps its one-line rows). Next to the
   dashed focus frame the hairline turns transparent, as the others do. The merges' lines change with the training text, so where one
   control switches between a known set of settings they keep the room of the tallest (R7.9, holdMerges in tokenization-cost.js reads
   --tk-hold). The status stays beside the title and the subtitle wraps under it; the metric cards take the tighter value and change
   lines of CONTRACT §19; a few gaps are tighter. Same pieces in the same order; phones (≤ 760 px) and narrower stages keep the layout
   above. ---------- */
@media (min-width:761px){@container (min-width:736px){
  .tk-stage>.stage-head{flex-wrap:nowrap}
  .tk-stage>.stage-head>div:first-child{flex:1 1 auto;min-width:0}
  .tk-stage>.stage-head>.stage-actions{flex:none}
  .tk-stage>.legend-row{margin-top:8px}
  .tk-graph{margin-top:8px;padding:10px 14px 12px;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:12px 0;--tk-hold:1}
  /* part 3 lists no merges yet, so its cost takes the wider column */
  .tk-graph:has(>.tk-strips>.tk-vs:not([hidden])){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .tk-strips{grid-column:1/-1;gap:6px}
  .tk-vs{padding:8px 12px;gap:6px}
  .tk-vsrow{grid-template-columns:minmax(0,190px) max-content minmax(0,1fr)}
  .tk-merges{align-content:start;gap:3px;padding-right:16px}
  .tk-mg-list{margin-top:2px}
  .tk-cost{align-content:start;border-left:1px solid var(--line);padding-left:16px}
  .tk-graph[data-focus="merges"]>.tk-cost,.tk-graph[data-focus="cost"]>.tk-cost{border-left-color:transparent}
  .tk-graph:not(:has(>.tk-strips>.tk-vs:not([hidden]))) .tk-crow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "b b";row-gap:3px}
  .tk-graph:not(:has(>.tk-strips>.tk-vs:not([hidden]))) .tk-crow>.tk-cl{grid-area:l}
  .tk-graph:not(:has(>.tk-strips>.tk-vs:not([hidden]))) .tk-crow>.tk-cbar{grid-area:b}
  .tk-graph:not(:has(>.tk-strips>.tk-vs:not([hidden]))) .tk-crow>.tk-cv{grid-area:v}
  .tk-metrics{margin-top:8px}
  .tk-metrics .metric .v{line-height:1.25}
  .tk-metrics .metric .d{min-height:13px;line-height:1.1}
  .tk-stage>details.math{margin-top:8px;padding-top:8px}
}}

/* 精装修 step 2: a short desktop window (820 px tall or less; 1536 × 730 is a 15-inch laptop's browser). With the top bar scrolled away
   the stage gains 58 px, and part 3 (bytes against characters) still ran 36 px past it at 1536 × 730; the figure's padding and the gaps
   between the strips, the box and the two columns are a few px tighter (the hairline over the columns stays in its gap). Same pieces,
   lines and sizes of text */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .tk-stage>.legend-row{margin-top:6px}
  .tk-graph{margin-top:6px;padding:6px 14px 6px;row-gap:8px}
  .tk-graph>.tk-merges::before,.tk-graph>.tk-cost::before{top:-4px}
  .tk-strips{gap:4px}
  .tk-strip{gap:2px}
  .tk-vs{padding:6px 12px;gap:4px}
  .tk-metrics{margin-top:6px}
  .tk-stage>details.math{margin-top:6px;padding-top:6px}
}}

/* Tool scheduling lab */
.tls-app [hidden]{display:none!important}
.tls-stage{container-type:inline-size}
.tls-head{align-items:flex-start;gap:10px}
.tls-st-title{font-weight:650;font-size:var(--fs-stage);min-width:0;line-height:1.35}
.tls-pan{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;min-width:0}
.tls-pan:first-of-type{border-top:0;margin-top:2px;padding-top:2px}
.tls-pt{font-weight:600;font-size:var(--fs-cap);line-height:1.35;margin-bottom:4px;min-width:0}
.tls-transport{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 0 6px}
.tls-transport .seg-ctl,.tls-transport .inline-ctl,.tls-transport .ctl{margin:0}
.tls-transport .btn.sm,.tls-transport .seg-ctl{height:32px;box-sizing:border-box}
.tls-transport .btn.sm{padding-top:0;padding-bottom:0;line-height:1.2}
.tls-transport .seg-ctl button{padding:0 10px;font-size:var(--fs-cap);line-height:1.2}
.tls-transport .inline-ctl{flex:1 1 160px;min-width:140px;border:0;padding:0;background:none}
.tls-ph{border:1px dashed var(--line-2);border-radius:8px;padding:28px 12px;text-align:center;color:var(--ink-2);font-size:var(--fs-cap);margin:4px 0}
.tls-gantt,.tls-graph{display:block;width:100%;height:auto}
.tls-grid{stroke:var(--line);stroke-width:1}
.tls-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.tls-rl{font-size:var(--fs-label);fill:var(--ink-2)}
.tls-rl.b{font-weight:650;fill:var(--ink)}
.tls-mc{fill:var(--ink)}
.tls-mcn{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--surface);font-weight:650}
.tls-bar{fill:var(--ink-3);stroke:none}
.tls-bar.crit{stroke:var(--ink);stroke-width:2.2}
.tls-bar.bad{fill:var(--c-oom);stroke:var(--c-oom);stroke-width:1.5}
.tls-hang{fill:url(#tls-hatch);stroke:var(--ink-3);stroke-width:1}
.tls-hbg{fill:var(--surface)}
.tls-hl{stroke:var(--ink-3);stroke-width:1.6}
.tls-wait{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:1.5 3}
.tls-x{font-size:var(--fs-label);font-weight:700;fill:var(--c-oom)}
.tls-head-l{stroke:var(--ink);stroke-width:1.4}
.tls-node rect{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.2}
.tls-nt{font-size:var(--fs-label);fill:var(--ink)}
.tls-ns{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.tls-node.run rect{fill:var(--sunken);stroke:var(--ink);stroke-width:2}
.tls-node.done rect{fill:var(--ink-3);stroke:var(--ink-3)}
.tls-node.done .tls-nt,.tls-node.done .tls-ns{fill:var(--surface)}
.tls-node.bad rect{fill:var(--c-oom);stroke:var(--c-oom)}
.tls-node.bad .tls-nt,.tls-node.bad .tls-ns{fill:var(--bg)}   /* the page colour: white on the light theme's red, near black on the dark theme's lighter red */
.tls-node.sel rect{stroke:var(--ink);stroke-width:2.6}
.tls-node.up rect{stroke:var(--ink);stroke-width:1.8;fill:var(--sunken)}
.tls-edge{fill:none;stroke:var(--ink-3);stroke-width:1.3}
.tls-edge.dash{stroke-dasharray:5 3}
.tls-edge.hi{stroke:var(--ink);stroke-width:2.2}
.tls-ahp{fill:var(--ink-3)}
.tls-conf{stroke:var(--ink-2);stroke-width:1.6;stroke-dasharray:3 3}
.tls-conf.hi{stroke:var(--ink);stroke-width:2.4}
.tls-cl{font-size:var(--fs-mark);fill:var(--ink-2)}
.tls-leg{margin:4px 0 6px;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-label)}
.tls-leg .lg{display:inline-flex;align-items:center;gap:5px}
.sw.tls-sw-arr{width:16px;height:0;border-top:1.5px solid var(--ink-3);background:none}
.sw.tls-sw-dash{width:16px;height:0;border-top:1.5px dashed var(--ink-3);background:none}
.sw.tls-sw-conf{width:16px;height:0;border-top:1.8px dotted var(--ink-2);background:none}
.sw.tls-sw-run{width:14px;height:9px;background:var(--sunken);border:2px solid var(--ink);border-radius:3px;box-sizing:border-box}
.sw.tls-sw-done{width:14px;height:9px;background:var(--ink-3);border-radius:3px}
.sw.tls-sw-bad{width:14px;height:9px;background:var(--c-oom);border-radius:3px}
.sw.tls-sw-mc{width:14px;height:9px;background:var(--ink);border-radius:2px}
.sw.tls-sw-bar{width:14px;height:9px;background:var(--ink-3);border-radius:2px}
.sw.tls-sw-crit{width:14px;height:9px;background:var(--ink-3);border:2px solid var(--ink);border-radius:2px;box-sizing:border-box}
.sw.tls-sw-wait{width:16px;height:0;border-top:2px dotted var(--ink-3);background:none}
.sw.tls-sw-hang{width:14px;height:9px;border:1px solid var(--ink-3);border-radius:2px;background:repeating-linear-gradient(45deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px)}
.tls-metrics .metric.tls-bad .v{color:var(--c-oom)}
.tls-mb{padding:6px 0;border-bottom:1px solid var(--line);container-type:inline-size}
.tls-mb:last-child{border-bottom:0}
.tls-mb-lead{margin:0 0 4px;font-size:var(--fs-cap)}
.tls-math-line{overflow-x:auto;padding-block:.3em;max-width:100%}
.tls-eq{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;row-gap:2px;align-items:baseline}
.tls-eq-l{text-align:right;white-space:nowrap}
.tls-eq-r{min-width:0;overflow-x:auto;padding-block:.3em}
@container (max-width:420px){.tls-eq{grid-template-columns:minmax(0,1fr)}.tls-eq-l{text-align:left}.tls-eq-l:empty{display:none}.tls-eq-r{padding-left:10px}}
.tls-chrows .inline-ctl{margin:6px 0}
.tls-chrows .seg-ctl button{min-width:30px}
.tls-ch-res{margin-top:4px}
.tls-prod li{margin:4px 0}
.tls-times{list-style:none;margin:2px 0 8px;padding:0;font-size:var(--fs-label);columns:2;column-gap:14px}
.tls-times li{display:flex;justify-content:space-between;gap:6px;break-inside:avoid;color:var(--ink-2)}
.tls-assumed{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.tls-assumed .ctl-title{font-weight:600;font-size:var(--fs-cap);margin-bottom:2px}
.obs.tls-dim{opacity:.55}
.obs.tls-now{border-left:3px solid var(--c-kv)}
.obs.tls-now .btn{margin-top:2px}
.tls-dk{height:8px;background:var(--sunken);border-radius:4px;overflow:hidden;min-width:60px}
.tls-dk i{display:block;height:100%;background:var(--ink-3)}
@media (max-width:420px){.tls-times{columns:1}}
/* polish r1: the timeline drawn 1:1, its marks, the step-2 selection, compact metrics, one-line transport */
.tls-mcu{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.tls-mk{font-size:var(--fs-mark);font-weight:650;fill:var(--c-oom)}
.tls-mk.ok{fill:var(--c-ok)}
.tls-dot{fill:var(--ink);stroke:var(--surface);stroke-width:1.2}
.tls-early{stroke:var(--c-oom);stroke-width:1.6;stroke-dasharray:3 2}
.sw.tls-sw-dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.sw.tls-sw-early{width:0;height:12px;border-left:1.6px dashed var(--c-oom);background:none}
.tls-node.sel rect{fill:color-mix(in srgb,var(--c-weights) 24%,var(--surface));stroke:var(--c-weights);stroke-width:2}
.tls-node.up rect,.tls-node.peer rect{fill:color-mix(in srgb,var(--c-weights) 10%,var(--surface));stroke:var(--c-weights);stroke-width:1.3;stroke-dasharray:4 2}
.tls-edge.hi{stroke:var(--c-weights);stroke-width:2.2}
.tls-conf.hi{stroke:var(--c-weights)}
.sw.tls-sw-sel{width:14px;height:9px;border-radius:3px;box-sizing:border-box;background:color-mix(in srgb,var(--c-weights) 24%,var(--surface));border:2px solid var(--c-weights)}
.sw.tls-sw-up{width:14px;height:9px;border-radius:3px;box-sizing:border-box;background:color-mix(in srgb,var(--c-weights) 10%,var(--surface));border:1.3px dashed var(--c-weights)}
.tls-ns.chg{fill:var(--c-weights);font-weight:700}
.tls-ph{padding:14px 12px}
.tls-ch-res.tls-dim{opacity:.55}
.tls-transport{gap:6px 12px}
.tls-transport .ctl,.tls-transport .inline-ctl{display:flex;align-items:center;gap:6px;margin:0;border:0;padding:0;background:none}
.tls-transport .ctl>.lbl,.tls-transport .inline-ctl>label{display:flex;justify-content:flex-start;align-items:center;gap:6px;font-size:var(--fs-label);white-space:nowrap}
.tls-transport .inline-ctl input[type=range]{flex:1 1 auto;min-width:70px;width:auto}
.tls-transport .inline-ctl output{min-width:4ch}
.tls-stage .tls-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
@container (min-width:480px){.tls-stage .tls-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tls-metrics .metric{position:relative;padding:6px 9px}
.tls-metrics .metric .sub{font-size:var(--fs-label)}
/* the change line is in the card's flow as in other labs (kit polish r2, M1): set over the card's top right corner, it ran over the
   name and the value whenever it was longer than the room beside the name (“▲ 2 times the last value”, 900 and 390 px, English).
   Its row is 13 px and the value's line 1.25, so a card is 7.5 px taller than before, not 15: at 1440×900 the stage still needs no
   scroll of its own in any scenario (N11; with 15 px it was 4 px too tall in English, scenario 4) */
.tls-metrics .metric .v{line-height:1.25}
.tls-metrics .metric .d{height:auto;min-height:13px;line-height:13px}
@container (max-width:519px){.tls-ax{font-size:var(--fs-mark)}}
.tls-head{flex-wrap:nowrap}
.tls-head .tls-st-title{flex:1 1 auto}
.tls-head .stage-actions{flex:0 0 auto}
/* polish r2: desktop text in the pictures (N11), the faster tool's dot (N7), the play head's cap (T3), the end hint (T1), part 2's mini graph (T2) */
.tls-wide .tls-rl{font-size:var(--fs-cap)}
.tls-wide .tls-ax{font-size:var(--fs-label)}
.tls-wide .tls-mcn{font-size:var(--fs-label)}
.tls-wide .tls-mcu{font-size:var(--fs-mark)}
.tls-wide .tls-mk{font-size:var(--fs-label)}
.tls-wide .tls-x{font-size:var(--fs-cap)}
.tls-wide .tls-nt{font-size:var(--fs-cap)}
.tls-wide .tls-ns{font-size:var(--fs-label)}
.tls-wide .tls-cl{font-size:var(--fs-label)}
.tls-chgd{fill:var(--c-weights);stroke:var(--surface);stroke-width:1.5}
.sw.tls-sw-chg{width:9px;height:9px;border-radius:50%;background:var(--c-weights);border:0}
.tls-head-t{fill:var(--ink)}
.sw.tls-sw-head{position:relative;width:8px;height:12px;border:0;border-radius:0;background:linear-gradient(var(--ink),var(--ink)) 50% 100%/2px 9px no-repeat}
.sw.tls-sw-head::before{content:'';position:absolute;left:0;top:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ink)}
.tls-endhint{display:block;margin:2px 0 4px;font-size:var(--fs-cap);text-align:left}
.tls-dkg{display:block}
.tls-dkg rect{fill:var(--surface);stroke:var(--ink-3);stroke-width:7}
.tls-dkg rect.sel{fill:var(--c-weights);stroke:var(--c-weights)}
.tls-dkg rect.up{fill:color-mix(in srgb,var(--c-weights) 18%,var(--surface));stroke:var(--c-weights)}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 3–7 still ran 45 px past the stage (English 42). The
   gantt's rows are drawn 19 px tall instead of 21 (drawGantt reads --tls-rh; the rows' text keeps its size), and the gaps between the
   panels, under their titles, around the player and the legend and above the metric cards and Show the math are 2–4 px smaller */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .tls-pan{padding-top:6px;margin-top:6px}
  .tls-pan:first-of-type{margin-top:0;padding-top:0}
  .tls-pt{margin-bottom:2px}
  .tls-transport{margin:2px 0 4px}
  .tls-leg{margin:2px 0 4px}
  #tls-gantt{--tls-rh:19}
  .tls-stage .tls-metrics{margin-top:4px}
  .tls-stage>details.math{margin-top:4px}
}}

/* train-capstone: the cluster (machines, or the layout as pipeline stages × data-parallel copies with the tensor-parallel groups
   outlined), the memory column of the marked GPU, one step of one GPU as a bar, the whole run as a bar, and the real runs.
   Colours (R5.6): grayscale; blue only for weights; red only for what failed: memory over 80 GB, and the time failures cost
   (work redone, restarts). Waiting that is part of a working plan (all-reduces, bubble, data-parallel sync) stays gray, told
   apart by fill and hatching. */
.tcap-app [hidden]{display:none!important}
.tcap-stage .stage-head{align-items:center}
.tcap-graph{padding:12px 14px 14px;display:grid;gap:16px;min-width:0}
.tcap-graph>div{min-width:0}
/* H5 (the owner, 2026-10-09: “信息全部堆在里面……加上一些分割”): each block of the stage (layout and memory, one step, the whole run,
   the real runs) is set off from the one above it by a hairline in the kit's line colour; a hidden block draws none */
.tcap-graph>.tcap-top:not([hidden])~.tcap-barbox:not([hidden]),.tcap-graph>.tcap-barbox:not([hidden])~.tcap-barbox:not([hidden]){border-top:1px solid var(--line);padding-top:14px}
.tcap-phone{display:none}
.tcap-phone .tcap-ph{margin:0 0 6px;color:var(--ink-2)}
.tcap-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px}
.tcap-cl-note{margin-top:4px;line-height:1.4}

/* ---------- the cluster and the memory column side by side ---------- */
.tcap-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,236px);gap:16px;align-items:start}
.tcap-top>[hidden]+div,.tcap-top>div:only-child{grid-column:1/-1}
.tcap-top.wide{grid-template-columns:minmax(0,1fr)}
.tcap-top.wide .tcap-mem{max-width:440px}
.tcap-top:not(.wide)>.tcap-clbox:not([hidden])+.tcap-membox:not([hidden]){border-left:1px solid var(--line);padding-left:16px}
.tcap-cl{min-width:0}
.tcap-svg{display:block;max-width:100%;height:auto}
.tcap-svg-m{width:100%;max-width:440px}
.tcap-mach{fill:var(--surface);stroke:var(--ink-3);stroke-width:.8}
.tcap-gpu{fill:var(--ink-2)}
.tcap-gpu.me{fill:var(--ink);stroke:var(--ink);stroke-width:1.2}
.tcap-tpg{fill:var(--surface);stroke:var(--ink-3);stroke-width:.8}
.tcap-tpg.me{stroke:var(--ink);stroke-width:1.6}
.tcap-tl{font:var(--fs-mark) var(--font-mono);fill:var(--ink-2)}

/* the memory column: weights blue, gradients and optimizer states gray, gathered layers light, activations outlined */
.tcap-mem{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:end}
.tcap-col{display:block;width:44px;height:154px;overflow:visible}
.tcap-mb{transition:y .25s ease,height .25s ease}
.tcap-mb.w{fill:var(--c-weights)}
.tcap-mb.g{fill:var(--ink-2)}
.tcap-mb.o{fill:var(--ink-3)}
.tcap-mb.zx{fill:var(--line)}
.tcap-mb.a{fill:var(--surface-2);stroke:var(--ink-2);stroke-width:.8}
.tcap-mb.over{fill:var(--c-oom-soft);stroke:var(--c-oom);stroke-width:1;stroke-dasharray:3 2}
.tcap-cap80{stroke:var(--ink);stroke-width:1.6}
.tcap-ml{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:var(--fs-label);color:var(--ink-2)}
.tcap-ml li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:6px;align-items:center}
.tcap-ml li[data-tipx]{cursor:help;outline-offset:2px;border-radius:2px}
.tcap-ml b{font-weight:600;color:var(--ink);white-space:nowrap}
.tcap-ml li.tcap-tot{border-top:1px solid var(--line);padding-top:3px;margin-top:2px;color:var(--ink);font-weight:650}
.tcap-ml li.tcap-tot.bad,.tcap-ml li.tcap-tot.bad b{color:var(--c-oom)}
/* the part above the 80 GB line, under the total (review S11) */
.tcap-ml li.tcap-ml-over,.tcap-ml li.tcap-ml-over b{color:var(--c-oom);font-weight:650}

/* ---------- swatches, shared by the lists ---------- */
.tcap-sw{display:inline-block;width:11px;height:11px;border-radius:2px;box-sizing:border-box;border:1px solid transparent}
.tcap-sw.w{background:var(--c-weights)}
.tcap-sw.g{background:var(--ink-2)}
.tcap-sw.o{background:var(--ink-3)}
.tcap-sw.zx{background:var(--line)}
.tcap-sw.a{background:var(--surface-2);border-color:var(--ink-2)}
.tcap-sw.over{background:var(--c-oom-soft);border:1px dashed var(--c-oom)}
.tcap-sw.line{background:transparent;border:0;border-top:2px solid var(--ink);border-radius:0;height:2px;align-self:center}
.tcap-sw.u,.tcap-sg.u{background:var(--ink-2)}
.tcap-sw.rc,.tcap-sg.rc{background:var(--ink-3)}
.tcap-sw.tp,.tcap-sg.tp{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,var(--surface) 2px 4px)}
.tcap-sw.bb,.tcap-sg.bb{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--ink-3) 3px 4px);border-color:var(--line)}
.tcap-sw.dp,.tcap-sg.dp{background:radial-gradient(var(--ink-2) 1px,transparent 1.3px) 0 0/4px 4px,var(--surface-2);border-color:var(--ink-3)}
.tcap-sw.sv,.tcap-sg.sv{background:var(--line)}
.tcap-sw.rd,.tcap-sg.rd{background:var(--c-oom)}
.tcap-sw.rs,.tcap-sg.rs{background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,var(--c-oom-soft) 2px 4px)}

/* ---------- the step bar and the run bar: one scale each, a list underneath ---------- */
.tcap-bar{display:flex;height:22px;background:var(--surface-2);border-radius:2px;overflow:hidden;margin-bottom:8px}
.tcap-sg{display:block;height:100%;min-width:0;box-sizing:border-box;font-style:normal;transition:width .25s ease}
.tcap-sg.bb,.tcap-sg.dp{border:1px solid var(--line)}
.tcap-list{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:var(--fs-label);color:var(--ink-2)}
.tcap-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 52px;gap:6px;align-items:center;cursor:help;outline-offset:2px;border-radius:2px}
.tcap-list b{font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
.tcap-list em{font-style:normal;color:var(--ink-3);text-align:right;white-space:nowrap}

/* ---------- part 6: real runs against this lab's plan ---------- */
.tcap-rl{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.tcap-rl li{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 52px;gap:8px;align-items:center;font-size:var(--fs-cap);color:var(--ink-2)}
.tcap-rl li b{text-align:right;color:var(--ink);font-weight:600}
.tcap-rl li.me{color:var(--ink);font-weight:650}
.tcap-rt{position:relative;height:14px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tcap-rt i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);transition:width .25s ease}
.tcap-rl li.me .tcap-rt i{background:var(--ink)}

/* ---------- metric cards ---------- */
.tcap-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.tcap-metrics[data-n="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@container (min-width:640px){.tcap-metrics[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- formulas on their own line ---------- */
.tcap-fx{margin:6px 0 8px;padding:4px 0;overflow-x:auto;overflow-y:hidden;font-size:var(--fs-stage);line-height:normal}
.tcap-app .mathbody .tcap-fx{margin-top:12px}
/* a long formula that wraps (MW; the owner's review of 2026-10-09: no Show the math row scrolls sideways): name, “=”, then pieces that
   wrap before an operator, each new line under the first piece; on a phone-width stage the name goes on its own line above */
.tcap-w{display:flex;flex-wrap:wrap;align-items:baseline}
.tcap-wl,.tcap-wo{flex:none}
.tcap-wr{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.6em}
.tcap-wr>span{flex:none}
.tcap-wr>.tcap-wg{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.6em}
@container (max-width:480px){.tcap-w>.tcap-wl{flex-basis:100%;margin-bottom:.35em}.tcap-w>.tcap-wo{margin-left:.6em}}

/* ---------- rail ---------- */
.tcap-mt{margin-top:12px}
.tcap-ch-res{scroll-margin-top:120px}
/* the result after Submit (Codex review b9v3, 应修 5): a summary first (your plan, the recommended plan, one counterexample), each a bar of
   days split by where the time goes, the same parts and fills as the stage's step and run bars; the full list behind “See all plans” */
.tcap-hint{margin:6px 0 8px}
.tcap-sum{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.tcap-same{margin:0 0 4px;color:var(--ink-2);line-height:1.45}
.tcap-c3{list-style:none;margin:0;padding:0}
.tcap-c3r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 0 8px;border-bottom:1px solid var(--line-2)}
.tcap-c3h{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.tcap-c3t{font-size:var(--fs-cap);font-weight:700;color:var(--ink);margin-right:2px}
.tcap-chip{font-size:var(--fs-label);line-height:1.45;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--ink-2);white-space:nowrap}
.tcap-chip.on{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.tcap-c3trk{position:relative;height:14px;background:var(--surface-2);border-radius:2px;min-width:0}
.tcap-c3fill{position:absolute;left:0;top:0;bottom:0;display:flex;overflow:hidden;border-radius:2px;max-width:100%}
.tcap-c3fill .tcap-sg{flex:none}
.tcap-c3g{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--ink);margin-left:-1px;pointer-events:none}
.tcap-c3d{font-size:var(--fs-cap);font-weight:650;color:var(--ink);white-space:nowrap;text-align:right;min-width:4.6em}
.tcap-c3d.bad,.tcap-c3m.bad,.tcap-c3x.bad{color:var(--c-oom)}
.tcap-c3s{grid-column:1/-1;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.tcap-c3x{grid-column:1/-1;font-size:var(--fs-cap);font-weight:650}
.tcap-c3leg{display:flex;flex-wrap:wrap;gap:3px 12px;margin:7px 0 2px;color:var(--ink-2);font-size:var(--fs-label)}
.tcap-c3leg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tcap-sw.goal{background:transparent;border:0;border-left:2px dashed var(--ink);border-radius:0;width:2px;height:12px}
.tcap-gap,.tcap-next{margin:9px 0 0;font-size:var(--fs-cap);line-height:1.5}
.tcap-why{margin:7px 0 0;line-height:1.5;color:var(--ink-2)}
.tcap-all{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.tcap-all>summary{cursor:pointer;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:4px 0}
.tcap-allb{padding-top:4px}
.tcap-allb>p{margin:6px 0}
/* the list bleeds a little into the card's padding, so its six columns fit the 1440 rail in English */
.tcap-tblw{max-height:340px;overflow:auto;border:1px solid var(--line-2);border-radius:4px;margin:6px -10px 4px}
.tcap-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-label);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tcap-tbl th{position:sticky;top:0;z-index:1;background:var(--surface);font-family:var(--font-ui,inherit);font-weight:650;font-size:var(--fs-label);line-height:1.25;color:var(--ink);text-align:right;vertical-align:bottom;padding:5px 4px;border-bottom:1px solid var(--line)}
.tcap-tbl td{text-align:right;padding:3px 4px;border-bottom:1px solid var(--line-2);white-space:nowrap;color:var(--ink-2)}
.tcap-tbl tr.ok td{color:var(--ink)}
.tcap-tbl tr.me td{font-weight:700;color:var(--ink);background:var(--surface-2)}
.tcap-tbl td.bad,.tcap-tbl tr.me td.bad{color:var(--c-oom)}
.tcap-tleg{margin:2px 0 8px}
.goal.tcap-over b{color:var(--c-oom)}
.tcap-lv{margin-top:6px}
.tcap-app .goal span:last-child{text-align:right}
.tcap-app .inline-ctl .seg-ctl{flex-wrap:wrap}
.tcap-app .inline-ctl .seg-ctl button{white-space:nowrap}
.tcap-app .seg-ctl button:disabled{opacity:.38;cursor:not-allowed}
.tcap-asm{margin:6px 0 12px;padding-left:18px;color:var(--ink-2)}
.tcap-asm li{margin-bottom:3px}
.tcap-ul{margin:0 0 10px;padding-left:18px}
.tcap-ul li{margin-bottom:6px}
.tcap-al{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.tcap-al li{display:grid;gap:1px;font-size:var(--fs-cap)}
.tcap-al li span{color:var(--ink-2)}

/* ---------- settings ---------- */
.tcap-grp{display:grid;gap:12px;border-top:1px solid var(--line-2);padding-top:10px}
.tcap-gh{font-size:var(--fs-cap);font-weight:700;color:var(--ink)}
.tcap-grp .ctl .lbl{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tcap-app .ctl output{white-space:nowrap}

/* ---------- connect ---------- */
.tcap-prod{margin:0 0 8px;padding-left:18px;font-size:var(--fs-ui);color:var(--ink-2)}
.tcap-prod li{margin-bottom:6px}
.tcap-prod code,.tcap-app .refs code{word-break:break-word}

/* ---------- dock: memory of 80 GB as a tiny bar ---------- */
.tcap-dk{position:relative;height:12px;width:100%;min-width:48px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tcap-dk i{position:absolute;left:0;top:3px;height:6px;background:var(--ink-2);border-radius:1px}
.tcap-dk.bad i{background:var(--c-oom)}

@media (max-width:760px){
  /* phones: the picture first, then the numbers (R7.3) */
  .tcap-stage{display:flex;flex-direction:column}
  .tcap-stage>.stage-head{order:1}
  .tcap-stage>.tcap-graph{order:2}
  .tcap-stage>.metrics{order:3}
  .tcap-stage>details.math{order:4}
  .tcap-graph{padding:10px 10px 12px;gap:14px}
  .tcap-phone:not(:empty){display:block}
  .tcap-top{grid-template-columns:minmax(0,1fr)}
  .tcap-top>.tcap-clbox:not([hidden])+.tcap-membox:not([hidden]){border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .tcap-list li{grid-template-columns:12px minmax(0,1fr) auto 44px}
  .tcap-rl li{grid-template-columns:minmax(0,112px) minmax(0,1fr) 46px;font-size:var(--fs-label)}
  .tcap-metrics[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* refit step 3: the fraction under part 6's bars was squeezed to the line (272–304 px in 360–390 px windows) while its English
   denominator stayed 319 px wide, so the words ran past the fraction bar and the stage, and at 360 px the page scrolled sideways. On a
   phone the fraction and its full stop take a line of their own at their own width, and may use 20 px of the stage's right padding,
   which holds them whole from 390 px up; in a narrower window the last letters scroll in their own box */
@media (max-width:760px){.tcap-fxs{display:block;width:max-content;max-width:calc(100% + 20px);white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding-block:.3em}.tcap-fxs>math{width:max-content}}
@media (prefers-reduced-motion:reduce){.tcap-sg,.tcap-mb,.tcap-rt i{transition:none}}
/* Settings: the GPU counts (nine options) wrap instead of running past the panel */
#tcap-controls .seg-ctl{flex-wrap:wrap}
.tcap-metrics .v{white-space:normal;overflow-wrap:anywhere}


/* ---------- polish round 5 (B4, 2026-10-17): the stage fits 1440 × 900 ----------
   In English, parts 5 and 7 (the layout, one step and the whole run, five metric cards) ran 13 px past the stage's 814 px at
   1440 × 900, and in Chinese they filled it to the last pixel. On a desktop stage at least 736 px wide (1440 and 1280 px windows) the
   metric cards take the kit's tight line heights (CONTRACT §19; a card name stays 12 px) and a few gaps are tighter. Same blocks in the
   same order, the same hairlines between them (R7.13), the same texts; phones (≤ 760 px) and narrower stages keep the layout above */
@media (min-width:761px){@container (min-width:736px){
  .tcap-graph{margin-top:10px;padding:8px 12px 10px;gap:12px}
  .tcap-graph>.tcap-top:not([hidden])~.tcap-barbox:not([hidden]),.tcap-graph>.tcap-barbox:not([hidden])~.tcap-barbox:not([hidden]){padding-top:10px}
  .tcap-metrics{margin-top:8px}
  .tcap-metrics .metric .v{line-height:1.25}
  .tcap-metrics .metric .sub{line-height:1.25}
  .tcap-metrics .metric .d{min-height:13px;line-height:1.1}
  .tcap-stage>details.math{margin-top:8px;padding-top:8px}
}}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 5 and 7 still ran 40 px past the stage in Chinese
   and 50 in English. The gaps round the hairlines, under the captions and between the two time lists' rows are 2–4 px smaller, a row's
   line is 1.4 instead of 1.55 (its text keeps its size), and the metric cards take the kit's tight line heights (a card's change row stays
   reserved). Same blocks, lines and texts */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .tcap-graph{gap:8px}
  .tcap-graph>.tcap-top:not([hidden])~.tcap-barbox:not([hidden]),.tcap-graph>.tcap-barbox:not([hidden])~.tcap-barbox:not([hidden]){padding-top:8px}
  .tcap-cap{margin-bottom:3px}
  .tcap-bar{margin-bottom:6px}
  .tcap-list{gap:1px}
  .tcap-list li{line-height:1.4}
  .tcap-metrics .metric .sub{line-height:1.25}
  .tcap-metrics .metric .d{min-height:13px;line-height:1.1}
}}

/* train-debug: the loss curve (thick training line, dashed validation line, dotted ln C, thin healthy run), each line named
   beside its end; the decision regions (plain, grey, hatched, dotted; points by shape) with their key right under the map;
   the check cards and the signature table.
   Colours (R5.6): grayscale only; red marks a failed check or a run that blows up, green a passed check. */
.td-stage .stage-head{align-items:center}
.td-graph{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
@container (min-width:540px){.td-graph{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);align-items:start}}
.td-pane{min-width:0}
.td-pane[hidden],.td-tblhost[hidden]{display:none}
.td-tblhost{grid-column:1/-1;min-width:0}
.td-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:4px;text-wrap:balance}
.td-svg{display:block;width:100%;height:auto;overflow:visible}
.td-regsvg{max-width:250px;margin:0 auto;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}

/* ---------- the loss curve ---------- */
.td-grid{stroke:var(--line-2);stroke-width:1}
.td-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.td-ln{stroke:var(--ink-2);stroke-width:1.6;stroke-dasharray:1.5 4;stroke-linecap:round}
.td-lnl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2)}
.td-cmp{fill:none;stroke:var(--ink-3);stroke-width:1.1;stroke-linejoin:round}
.td-va{fill:none;stroke:var(--ink-2);stroke-width:1.7;stroke-dasharray:6 4;stroke-linejoin:round}
.td-tr{fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linejoin:round;stroke-linecap:round}
.td-mk{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--c-oom)}
.td-nan{stroke:var(--c-oom);stroke-width:1.4;stroke-dasharray:3 3}
.td-now{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 2}

/* ---------- the decision regions ---------- */
.td-regbg{fill:var(--surface)}
.td-rc1{fill:var(--line)}
.td-rc2{fill:url(#td-hatch)}
.td-rc3{fill:url(#td-dots)}
.td-hl1{stroke:var(--ink-3);stroke-width:1.2}
.td-dot{fill:var(--ink-2)}
.td-pt{fill:var(--surface);stroke:var(--ink);stroke-width:.9}
.td-nanbg{fill:var(--surface);stroke:var(--c-oom);stroke-width:1}
.td-nant{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--c-oom)}

/* ---------- names beside the lines, and the key under the region map (review 2026-10-03: no legend above the chart) ---------- */
.td-cl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-2);cursor:help}
.td-cl-tr{fill:var(--ink);font-weight:650}
.td-cl-cmp{fill:var(--ink-3)}
.td-lnl{cursor:help}
.td-regkey{max-width:258px;margin:6px auto 0;font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}   /* as wide as the picture above it, less 2 px: in Figtree (2026-10-22 refit) the key keeps its two lines */
.td-regkey p{margin:0 0 4px}
.td-rks{display:flex;flex-wrap:wrap;gap:4px 12px}
.td-rk{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.td-rksv{display:block;flex:none;width:16px;height:16px;border:1px solid var(--line);border-radius:2px;background:var(--surface);overflow:hidden}

/* ---------- under the chart ---------- */
.td-scope{margin:10px 0 0;cursor:help;width:fit-content;max-width:100%}
.td-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.td-metrics[hidden]{display:none}
.td-metrics[data-n="5"] .metric:last-child{grid-column:1/-1}
@container (min-width:560px){.td-metrics[data-n="5"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}.td-metrics[data-n="5"] .metric:last-child{grid-column:auto}.td-metrics[data-n="5"] [data-k="c2"] .v{white-space:nowrap}}
.td-metrics .metric{cursor:help}
.td-chk .v{white-space:normal;font-size:var(--fs-stage);line-height:1.25}
.td-chk.td-ok .v{color:var(--c-ok)}
.td-chk.td-bad .v{color:var(--c-oom)}
.td-closed{border-style:dashed;cursor:default}
.td-closed .v .btn{font-size:var(--fs-label);padding:3px 9px;margin-top:3px}
.td-sp{margin-top:4px}
.td-sp:empty{display:none}
.td-spark{display:block;width:100%;height:22px}
.td-spark path{fill:none;stroke:var(--ink-2);stroke-width:1.5;vector-effect:non-scaling-stroke}

/* ---------- the signature table (part 6 and the challenge's answer) ---------- */
.td-tblwrap{min-width:0;margin-top:2px}
.td-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-label);line-height:1.35}
.td-tbl caption{caption-side:top;text-align:left;font-size:var(--fs-cap);font-weight:650;color:var(--ink);margin-bottom:6px}
.td-tbl th,.td-tbl td{padding:6px 8px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.td-tbl thead th{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:500;color:var(--ink-3)}
.td-tbl tbody th{font-weight:650}
.td-tbl .td-hl{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink);padding-left:10px;padding-right:10px}
.td-tbl thead .td-hl{box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 2px 0 var(--ink)}
.td-tbl tbody tr:last-child .td-hl{box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 -2px 0 var(--ink)}
.td-capk{display:block;font-size:var(--fs-label);font-weight:400;color:var(--ink-2);margin-top:2px}
.td-tbl tr.td-me{background:var(--surface-2)}
@container (max-width:560px){
  .td-tbl thead{display:none}
  .td-tbl caption{display:block}
  .td-tbl,.td-tbl tbody,.td-tbl tr{display:block;width:100%}
  .td-tbl tr{border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;margin-bottom:8px}
  .td-tbl th,.td-tbl td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px;border:0;padding:3px 0}
  .td-tbl tbody th{display:block}
  .td-tbl td::before{content:attr(data-label);font-family:var(--font-mono);font-size:var(--fs-mark);color:var(--ink-3)}
  .td-tbl .td-hl,.td-tbl tbody tr:last-child .td-hl{box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:3px;padding:5px 8px;margin:2px 0}
}

/* ---------- the card ---------- */
.td-why{margin:8px 0 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2)}
.pbar .td-why{margin-top:6px}
.td-remlist{margin:0 0 12px;padding-left:18px}
.td-remlist li{margin:0 0 8px}
.td-cks{display:grid;gap:6px;margin:10px 0 4px}
.td-ckbtn{text-align:left;justify-content:flex-start;white-space:normal;line-height:1.3}
.td-ckbtn[disabled]{opacity:1;cursor:default}
.td-ch-res:empty{display:none}
.td-cands ul{margin:4px 0 0;padding-left:18px}
.td-cands li{margin:0 0 4px}
.td-cands li.td-me{background:var(--surface-2);border-radius:3px}
/* a detail the reader can open; closed, it keeps the observation to one idea (R6.28) */
.td-more{margin:8px 0 0}
.td-more summary{cursor:pointer;color:var(--ink-2);font-size:var(--fs-cap)}
.td-more p,.td-more ul{margin:6px 0 0}
.td-more ul{padding-left:18px}
.td-more li{margin:0 0 4px}
.td-mt{margin-top:10px}
.td-grp{border-top:1px solid var(--line-2);padding-top:10px}
.td-gh{font-weight:650;font-size:var(--fs-cap);margin-bottom:4px}
.td-prod{margin:0;padding-left:18px}
.td-prod li{margin:0 0 8px;overflow-wrap:anywhere}
.td-dk{width:100%;min-width:60px}
.td-dk .td-spark{height:26px}
/* Settings: the four bugs as a 2 × 2 block, so “no zero_grad()” never overflows the panel */
#td-controls .seg-ctl[data-key="bug"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
/* chart notes and the ln C label keep a halo in the panel's colour, so a curve passing under them never hides them (R7.8) */
.td-mk,.td-lnl,.td-cl{paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
/* the mini result bar's sparkline keeps clear of the text next to it */
.td-dk{padding-right:6px;box-sizing:border-box}
/* a model that gives no class more than half anywhere: its regions are faded and a line says they are noise (A19) */
.td-faint{opacity:.38}
.td-regnote{margin:6px auto 0;max-width:250px;font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}

/* v6 fixes: terms whose hover holds a formula (kit .t with an HTML tip) keep the definition look: help cursor, no click action */
.t.td-dfx{cursor:help}
/* Show the math as short blocks (H2, the owner's decision of 2026-10-09): a lead line in words, each formula on its own line with its
   name on the left, a hairline between blocks */
.td-mblk{padding:8px 0 6px;border-top:1px solid var(--line-2)}
.td-mblk:first-child{border-top:0;padding-top:0}
.td-mlead,.td-msym,.td-mblk>p{font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.55}
.td-mfx{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .6em;overflow-x:auto;max-width:100%;margin:4px 0}
.td-mname{font-family:var(--font-ui);font-size:var(--fs-cap)}
/* H5 (the owner's decision of 2026-10-09): a hairline between the loss curve and the pane beside it (under it on a phone) */
.td-pane+.td-pane{border-top:1px solid var(--line);padding-top:10px}
@container (min-width:540px){.td-pane+.td-pane{border-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:12px}}

/* training-memory: the GPU column (high-water mark of one step, block by block, labels beside the blocks), the memory-over-time curve
   with its cursor, peak and out-of-memory markers, the player, and the challenge's goal rows.
   Colours (R5.6): grayscale, hatching and dots; the weights in the site's weights blue; red only where memory goes over the GPU (R5.11);
   green and red for the challenge's goal rows. */
.tmem-app [hidden]{display:none!important}
.tmem-stage .stage-head{align-items:center}
.tmem-graph{padding:12px 14px 14px;min-width:0}
.tmem-vis{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.tmem-vis>div{min-width:0}
.tmem-cap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:6px;min-height:2.7em}
.tmem-col,.tmem-curve{min-width:0;overflow:hidden}
.tmem-colsvg,.tmem-cvsvg{display:block;max-width:100%;overflow:visible}

/* ---------- the column ---------- */
.tmem-pbg{fill:var(--surface)}
.tmem-pln{stroke:var(--ink-2);stroke-width:1.1}
.tmem-pdot{fill:var(--ink-2)}
.tmem-colsvg rect[class^="tmem-b-"]{stroke:var(--surface);stroke-width:1;cursor:help;outline:none}
.tmem-colsvg rect[class^="tmem-b-"]:focus-visible{stroke:var(--ink);stroke-width:2}
.tmem-b-w{fill:var(--c-weights)}
.tmem-b-g{fill:url(#tmem-p-g)}
.tmem-b-c{fill:var(--ink-3)}
.tmem-b-m{fill:url(#tmem-p-m)}
.tmem-b-v{fill:url(#tmem-p-v)}
.tmem-b-a{fill:var(--line)}
.tmem-b-l{fill:url(#tmem-p-l)}
.tmem-over{fill:var(--c-oom-soft);stroke:var(--c-oom);stroke-width:1.5;stroke-dasharray:4 2}
.tmem-gpu{fill:none;stroke:var(--ink);stroke-width:1.5;cursor:help;outline:none}
.tmem-gpu:focus-visible{stroke-width:3}
.tmem-ax{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink-3)}
.tmem-mid{text-anchor:middle}
.tmem-bl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.tmem-q{font-family:var(--font-mono);font-size:30px;font-weight:700;fill:var(--ink-3)}
.tmem-capl{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--ink)}
.tmem-capline{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 3}
.tmem-oomt{font-family:var(--font-ui);font-size:var(--fs-mark);font-weight:700;fill:var(--c-oom)}
.tmem-halo,.tmem-capl{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}

/* ---------- the curve ---------- */
.tmem-grid{stroke:var(--line-2);stroke-width:1}
.tmem-band{fill:var(--ink-3);opacity:.32}
.tmem-area{fill:var(--line);opacity:.9}
.tmem-overarea{fill:var(--c-oom-soft);opacity:.95}
.tmem-line{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.tmem-bandl{font-family:var(--font-mono);font-size:var(--fs-mark);fill:var(--ink)}
.tmem-ph-f{fill:var(--ink-2)}
.tmem-ph-b{fill:var(--ink-3)}
.tmem-ph-o{fill:var(--ink)}
.tmem-cursor{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 2}
.tmem-cdot{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.tmem-cdot.bad{fill:var(--c-oom)}
.tmem-pk{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.tmem-pk.bad{stroke:var(--c-oom)}
.tmem-pkl{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:650;fill:var(--ink)}
.tmem-oomdot{fill:var(--c-oom);stroke:var(--surface);stroke-width:1.5}
.tmem-curve0{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:4px;padding:0 16px;text-align:center}
.tmem-curve0 p{margin:0;font-size:var(--fs-cap);color:var(--ink-3)}

/* legend beside the curve, under it (R5.9) */
.tmem-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.35;color:var(--ink-2)}
.tmem-leg>span{display:inline-flex;align-items:center;cursor:help}
.tmem-leg .sw{width:12px;height:10px;margin-right:5px}
.tmem-sw-band{background:var(--ink-3);opacity:.6;border-color:transparent}
.tmem-sw-area{background:var(--line);border-color:var(--ink-3)}
.tmem-sw-cap{background:none;border:0;border-top:2px dashed var(--ink);height:0!important;border-radius:0}
.tmem-sw-over{background:var(--c-oom-soft);border-color:var(--c-oom)}

/* ---------- the player ---------- */
.tmem-player{margin-top:8px}
.tmem-prow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.tmem-prow .ctl{display:flex;align-items:center;gap:6px;margin:0}
.tmem-prow .ctl>.lbl{font-size:var(--fs-label)}
.tmem-prow .seg-ctl button{font-size:var(--fs-label);padding:3px 9px}
/* H7 (the owner, 2026-10-09, on GRPO's player: “重放按钮和速度按钮没有对齐”): Replay, the step buttons and the speed buttons share one
   height and one centre line */
.tmem-prow .btn.sm,.tmem-prow .seg-ctl{height:30px;box-sizing:border-box}
.tmem-prow .btn.sm{padding-top:0;padding-bottom:0}
.tmem-prow .seg-ctl button{padding-top:0;padding-bottom:0}
.tmem-play{min-width:96px;justify-content:center}
.tmem-scrub{display:flex;align-items:center;margin-top:6px;min-width:0}
.tmem-scrub input{flex:1 1 auto;min-width:0;width:100%}
.tmem-phase{margin:4px 0 0;font-size:var(--fs-label);color:var(--ink-2);min-height:1.4em;line-height:1.4}

/* ---------- metric cards: four in a row when there is room ---------- */
.tmem-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.tmem-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.tmem-metrics[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- rail ---------- */
.tmem-fx{margin:8px 0;overflow-x:auto;max-width:100%}
/* a long sum wraps before a top-level “+” (MW; the owner's review of 2026-10-09: no Show the math row scrolls sideways), each new line
   under the first term */
.tmem-w{display:flex;align-items:baseline}
.tmem-wl{flex:none}
.tmem-wr{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.35em}
.tmem-wr>span{flex:none}
.tmem-four{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.tmem-four li{display:grid;grid-template-columns:8.2em minmax(0,1fr);gap:8px;font-size:var(--fs-cap);line-height:1.45}
.tmem-four b{font-family:var(--font-mono);font-size:var(--fs-label)}
.tmem-poplist{margin:4px 0 6px 1.2em;padding:0;list-style:disc}
.tmem-poplist li{margin:2px 0}
.tmem-remlist{margin:6px 0 10px;padding-left:18px;display:grid;gap:8px}
.tmem-rem{font-size:var(--fs-label);white-space:nowrap}
.tmem-mt{margin-top:10px}
.tmem-asm{margin:8px 0;padding-left:18px;display:grid;gap:4px}
.tmem-tlist{margin:4px 0 8px;padding-left:18px;font-size:var(--fs-label)}
.tmem-prod{margin:0;padding-left:18px;display:grid;gap:8px;font-size:var(--fs-cap)}
.tmem-prod code{word-break:break-all}
.tmem-goal.tmem-miss{border-color:var(--c-oom);background:var(--c-oom-soft)}
.tmem-goal.met{border-color:var(--c-ok);background:var(--c-ok-soft)}
.tmem-ch-res{scroll-margin-top:120px}

/* ---------- the challenge's result (R1 of the owner's review of batch 8, as train-capstone's summary): the reader's plan beside the
   fastest plan, each with its two goals as bars and the goal's dashed line; red only beyond a goal (R5.11); the plans that pass in a
   disclosure closed by default ---------- */
.tmem-sum{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.tmem-sumcap{font-size:var(--fs-cap);font-weight:650;color:var(--ink);line-height:1.4;margin-bottom:4px}
.tmem-same{margin:0 0 4px;color:var(--ink-2);line-height:1.45}
.tmem-c3{list-style:none;margin:0;padding:0}
.tmem-c3r{display:grid;gap:5px;padding:7px 0 8px;border-bottom:1px solid var(--line-2);min-width:0}
.tmem-c3h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.tmem-c3t{font-size:var(--fs-cap);font-weight:700;color:var(--ink);margin-right:2px}
.tmem-chip{font-size:var(--fs-label);line-height:1.45;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--ink-2);white-space:nowrap}
.tmem-chip.on{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.tmem-c3m{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0}
.tmem-c3k{font-size:var(--fs-label);color:var(--ink-2);min-width:2.6em}
.tmem-c3trk{position:relative;height:12px;background:var(--surface-2);border-radius:2px;min-width:0}
.tmem-c3fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px 0 0 2px}
.tmem-c3o{position:absolute;top:-1px;bottom:-1px;box-sizing:border-box;background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,transparent 2px 5px);border:1.5px solid var(--c-oom)}
.tmem-c3g{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--ink);margin-left:-1px;pointer-events:none}
.tmem-c3v{font-family:var(--font-mono);font-size:var(--fs-cap);font-weight:650;color:var(--ink);white-space:nowrap;text-align:right;min-width:4.4em}
.tmem-c3v.bad{color:var(--c-oom)}
.tmem-c3leg{display:flex;flex-wrap:wrap;gap:3px 12px;margin:7px 0 2px;color:var(--ink-2);font-size:var(--fs-label)}
.tmem-c3leg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tmem-c3leg .sw{width:12px;height:10px}
.tmem-gap,.tmem-next{margin:9px 0 0;font-size:var(--fs-cap);line-height:1.5}
.tmem-all{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.tmem-all>summary{cursor:pointer;font-weight:650;font-size:var(--fs-cap);color:var(--ink);padding:4px 0}
.tmem-allb>p{margin:6px 0}
.tmem-alll{margin:4px 0 6px;padding-left:18px;display:grid;gap:4px;font-size:var(--fs-label);line-height:1.45}
.tmem-alll li.me{font-weight:650;color:var(--ink)}

/* ---------- the dock (phones) ---------- */
.tmem-dk{position:relative;display:flex;height:12px;border:1px solid var(--line);border-radius:2px;background:var(--surface);overflow:hidden}
.tmem-dk i{display:block;height:100%}
.tmem-dk i.s{background:var(--ink-3)}
.tmem-dk i.a{background:var(--line)}
.tmem-dk b{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--ink)}

@media (max-width:760px){
  .tmem-vis{grid-template-columns:minmax(0,1fr);gap:10px}
  .tmem-cap{min-height:0}
  .tmem-four li{grid-template-columns:minmax(0,1fr);gap:0}
}

/* 知识梳理 (2026-10-12): a formula on its own line; a sum of named items wraps before a “+” (prSum), so nothing scrolls sideways */
.primer .tmem-fx{margin:2px 0 14px;font-size:1.05em}
.primer .tmem-prfx{padding:.2em 0}
.primer .tmem-prsum{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.35em;padding:.2em 0}
.primer .tmem-prsum>span{flex:none}
.primer .tmem-prsum>span+span{margin-left:.3em}

/* ---------- Transformer ① (prefix tf-): the model as a stack; all weights blue, told apart by pattern (R5.6) ---------- */
.tf-pat-mlp{background:var(--c-weights)}
.tf-pat-attn{background:repeating-linear-gradient(135deg,var(--c-weights) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--c-weights)}
/* the embedding table has one row per token (horizontal lines), the LM head one column per token (vertical lines) */
.tf-pat-emb{background:repeating-linear-gradient(0deg,var(--c-weights) 0 1.5px,transparent 1.5px 4px);box-shadow:inset 0 0 0 1.5px var(--c-weights)}
.tf-pat-head{background:repeating-linear-gradient(90deg,var(--c-weights) 0 1.5px,transparent 1.5px 4px);box-shadow:inset 0 0 0 1.5px var(--c-weights)}
.tf-pat-norm{background:var(--c-weights)}
.tf-pat-layer{background:radial-gradient(circle,var(--c-weights) 0 1.3px,transparent 1.7px) 0 0/4.5px 4.5px;box-shadow:inset 0 0 0 1.5px var(--c-weights)}
.tf-pat-tied{background:transparent;border:1.5px dashed var(--c-weights)}
/* legend swatches with the same patterns */
.sw.tf-sw-mlp{background:var(--c-weights);border-color:transparent}
.sw.tf-sw-attn{background:repeating-linear-gradient(135deg,var(--c-weights) 0 1.5px,transparent 1.5px 3.5px);border-color:var(--c-weights)}
.sw.tf-sw-emb{background:repeating-linear-gradient(0deg,var(--c-weights) 0 1px,transparent 1px 3px);border-color:var(--c-weights)}
.sw.tf-sw-head{background:repeating-linear-gradient(90deg,var(--c-weights) 0 1px,transparent 1px 3px);border-color:var(--c-weights)}
.sw.tf-sw-norm{height:4px;vertical-align:2px;background:var(--c-weights);border-color:transparent}
.sw.tf-sw-layer{background:radial-gradient(circle,var(--c-weights) 0 1px,transparent 1.3px) 0 0/3.3px 3.3px;border-color:var(--c-weights)}
.sw.tf-sw-tied{background:transparent;border:1.5px dashed var(--c-weights)}
/* the residual connection: the same glyph as in the lab Architecture overview (.ar-sw-res), a line that goes around (ARCH #21) */
.sw.tf-sw-rs{width:12px;height:11px;background:transparent;border:1.5px solid var(--ink-3);border-right:0;border-radius:6px 0 0 6px}
.sw.tf-sw-tok{border-radius:50%;background:var(--ink);border-color:var(--ink)}
.sw.tf-sw-on{background:transparent;border:2px solid var(--ink);border-radius:2px}
.tf-legend>span{cursor:help}

/* stage */
.tf-cap{margin:8px 0 0;font-size:var(--fs-cap);line-height:1.4;color:var(--ink-3)}
.tf-now{margin:0 0 8px;font-size:var(--fs-label);color:var(--ink);font-weight:600}
.tf-stack{position:relative;padding-left:14px}
/* the residual connection's line leaves the embedding table's bar, runs down the left edge and enters the LM head's bar (placeStream sets
   its width to the bars' left edge), drawn like the lab Architecture overview's .ar-res */
.tf-rs{position:absolute;left:5px;width:8px;border:1.5px solid var(--ink-3);border-right:0;border-radius:9px 0 0 9px;pointer-events:none}
.tf-tok{position:absolute;left:0;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--surface);transition:top .25s ease-out;pointer-events:none}
.tf-tok[hidden]{display:none}
.tf-io{margin:0 0 4px 30px;font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.35;color:var(--ink-2);border-radius:3px}
.tf-out{margin:6px 0 0 30px}
.tf-sec{display:grid;grid-template-columns:24px minmax(0,1fr) 40px;column-gap:6px;row-gap:2px;align-items:center;margin:5px 0}
.tf-sec>.tf-lab{grid-column:2 / 4}
.tf-sec>.tf-bar,.tf-sec>.tf-gap{grid-column:2}
.tf-sec>.tf-ln{grid-column:1;justify-self:end;font-size:var(--fs-mark);line-height:1;color:var(--ink-3)}
.tf-lab{font-size:var(--fs-label);line-height:1.3;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.tf-lab b{color:var(--ink);font-weight:650}
.tf-lab .tf-n{color:var(--ink);font-size:var(--fs-label)}
.tf-each{font-size:var(--fs-mark);color:var(--ink-3)}
.tf-bar{position:relative;height:14px;min-width:0;display:flex}
.tf-bar.tf-thin{height:4px}
.tf-bar .tf-seg{display:block;height:100%;flex:none;border-radius:2px;min-width:2px}
.tf-lbar{height:9px}
.tf-lw{display:flex;height:100%;flex:none;border-radius:2px}
.tf-lw .tf-seg{border-radius:0;min-width:0}
.tf-lw .tf-seg:first-child{border-radius:2px 0 0 2px}
.tf-lw .tf-seg:last-child{border-radius:0 2px 2px 0}
.tf-lw .tf-seg:only-child{border-radius:2px}
.tf-gap{height:6px}
.tf-brace{grid-column:3;align-self:stretch;display:flex;align-items:center;padding-left:6px;border:1.5px solid var(--ink-3);border-left:0;border-radius:0 7px 7px 0;font-size:var(--fs-label);color:var(--ink-2);min-height:16px}
/* part 3: the order inside a layer (not to scale) and where the token is (an outline, never a colour) */
.tf-flow{line-height:2;white-space:normal}
.tf-fl{display:inline-block;padding:0 4px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink-2);line-height:1.45;white-space:nowrap}
.tf-fl[data-tipx]{cursor:help}
.tf-fl.tf-on{outline:2px solid var(--ink);outline-offset:1px;color:var(--ink);border-color:var(--ink)}
.tf-on{outline:2px solid var(--ink);outline-offset:2px}
.tf-io.tf-on{outline-offset:3px;border-radius:2px}
@container (max-width:430px){.tf-shape{display:none}.tf-sec{grid-template-columns:20px minmax(0,1fr) 34px}.tf-io{margin-left:26px}}
/* share of the parameters */
.tf-share{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.tf-share-t{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink-2);margin:0 0 6px}
.tf-sbar{display:flex;height:20px;border-radius:3px;overflow:hidden;background:var(--surface-2)}
.tf-sbar .tf-seg{flex:none;display:flex;align-items:center;justify-content:flex-end;padding-right:3px;border-radius:0;min-width:0;overflow:hidden}
.tf-sbar .tf-seg span{font-size:var(--fs-mark);line-height:1.3;white-space:nowrap;background:var(--surface);color:var(--ink);padding:0 3px;border-radius:2px}
.tf-skey{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:7px;font-family:var(--font-mono);font-size:var(--fs-mark);line-height:1.4;color:var(--ink-2)}
.tf-skey>span{display:inline-flex;align-items:center;cursor:help}
.tf-skey b{font-weight:600;color:var(--ink);margin-left:4px}
.tf-share-mask{font-size:var(--fs-label);color:var(--ink-3);padding:8px 10px;border:1px dashed var(--line);border-radius:4px}

/* R3.2 (review 8): a change under Settings never moves the page. Up to 1180 px the card and the chart sit above or beside Settings and
   change height with it, so they are not scroll anchors: the browser keeps the control in use where it is */
@media (max-width:1180px){#tf-rail,#tf-stage{overflow-anchor:none}}

/* rail */
.tf-cfg{font-size:var(--fs-label);line-height:1.6;background:var(--sunken);border:1px solid var(--line-2);border-radius:4px;padding:8px 10px;margin:0 0 4px;overflow-x:auto}
.tf-cfg>div{white-space:nowrap}
.tf-walkctl .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--fs-cap);font-weight:620;color:var(--ink-2)}
.tf-walkctl output{font-family:var(--font-mono);font-weight:500;color:var(--ink);font-size:var(--fs-cap)}
.tf-walkbtns{display:flex;gap:8px;flex-wrap:wrap}
.tf-lines{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.tf-lines p{margin:4px 0;overflow-wrap:anywhere;line-height:1.5}
.tf-ch-res{scroll-margin-top:120px;scroll-margin-bottom:12px}
.tf-ch-res .cmp-val{white-space:nowrap}
.goal.tf-over b{color:var(--c-oom)}
.progress.tf-over i{background:var(--c-oom)}

/* connect */
.tf-prod{margin:0;padding-left:18px;font-size:var(--fs-cap);color:var(--ink-2)}
.tf-prod li{margin-bottom:8px}
.tf-see{margin:12px 0 0;color:var(--ink-2)}
.tf-nw{white-space:nowrap}   /* keeps “（” with the link after it, never alone at a line end */

/* mini result bar */
.tf-dkshare{display:flex;height:12px;border-radius:2px;overflow:hidden;background:var(--surface-2)}
.tf-dkshare i{display:block;height:100%;flex:none}
.tf-dkwalk{display:flex;gap:3px}
.tf-dkwalk i{width:10px;height:10px;border:1px solid var(--ink-3);border-radius:2px;flex:none}
.tf-dkwalk i.done{background:var(--ink-3)}
.tf-dkwalk i.on{background:var(--ink);border-color:var(--ink)}
.tf-dkbar{position:relative;height:12px;background:var(--surface-2);border-radius:2px}
.tf-dkbar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.tf-dkbar i.ok{background:var(--c-ok)}
.tf-dkbar i.bad{background:var(--c-oom)}
.tf-dkbar b{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px dashed var(--ink-2)}
/* phones: the share bar, part 3's walk squares and the status unit repeat the sentence or the "3 / 7" next to them, so they give their
   width to the sentence, which then never wraps into them (R3.2) */
@media (max-width:560px){#dkVis:has(>.tf-dkshare),#dkVis:has(>.tf-dkwalk){display:none}.tf-dk-unit{display:none}}

/* home tile: where the parameters are, to scale by area. The frame is all of the model's parameters; the embedding table and the LM head
   are columns at its two ends and the layers equal cells in between, numbered column by column from the top left. The blocks keep the
   lab's patterns, all weights blue (R5.6). Timing (labs/transformer.js TZ_LEAD, TZ_SPAN, TZ_CELL): the old cells fade in 0.12 s, each new
   cell grows in 0.22 s after its own delay, the tables resize in 0.5 s; the build-up fades the LM head in at 0.66 s. All ends by 0.96 s */
.tf-tz-vis{display:grid;gap:4px;min-width:0}
.tf-tz-cap{font-size:var(--fs-mark);line-height:1.3;color:var(--ink-3)}
.tf-tz-frame{position:relative;height:96px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.tf-tz-in{position:absolute;inset:2px}
.tf-tz-emb,.tf-tz-head,.tf-tz-lay{position:absolute;top:0;bottom:0}
.tf-tz-emb{left:0}
.tf-tz-head{right:0}
.tf-tz-emb,.tf-tz-head{display:block;border-radius:2px;cursor:help;transition:width .5s cubic-bezier(.3,.7,.25,1),opacity .15s}
.tf-tz-lay{transition:left .5s cubic-bezier(.3,.7,.25,1),right .5s cubic-bezier(.3,.7,.25,1),opacity .15s}
.tf-tz-grid{position:absolute;inset:0;display:grid;gap:1px;grid-auto-flow:column}
.tf-tz-cell{display:block;min-width:0;min-height:0;border-radius:2px;cursor:help}
/* the tile's blocks are small: a 1 px outline instead of the lab's 1.5 px, so the stripes still show in a 4 px column */
.tf-tz-frame .tf-pat-emb,.tf-tz-frame .tf-pat-head,.tf-tz-frame .tf-pat-layer{box-shadow:inset 0 0 0 1px var(--c-weights)}
.tf-tz-emb:hover,.tf-tz-head:hover,.tf-tz-cell:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.tf-tz-frame [tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:-1px}
/* a legend item, hovered, lightens the rest of the picture */
.tf-tz-frame[data-hl] :is(.tf-tz-emb,.tf-tz-lay,.tf-tz-head){opacity:.22}
.tf-tz-frame[data-hl="emb"] .tf-tz-emb,.tf-tz-frame[data-hl="lay"] .tf-tz-lay,.tf-tz-frame[data-hl="head"] .tf-tz-head{opacity:1}
.tf-tz .tz-leg .sw{margin-right:5px}
/* each legend item says on hover or focus what its part of the model does (labs/transformer.js) */
.tf-tz .tz-leg [data-tipx]{cursor:help}
/* motion: switching re-tiles the cells one after another; the first view builds the picture up once */
@keyframes tf-tz-in{from{opacity:0;transform:scale(.3)}}
@keyframes tf-tz-fade{from{opacity:0}}
@keyframes tf-tz-out{to{opacity:0}}
.tf-tz-grid.tf-tz-go .tf-tz-cell{animation:tf-tz-in .22s cubic-bezier(.2,.7,.3,1) backwards}
.tf-tz-grid.tf-tz-old{animation:tf-tz-out .12s ease-in forwards;pointer-events:none}
.tf-tz-grid.tf-tz-wait .tf-tz-cell,.tf-tz-frame.tf-tz-pend .tf-tz-emb,.tf-tz-frame.tf-tz-pend .tf-tz-head{opacity:0}
.tf-tz-frame.tf-tz-intro .tf-tz-emb{animation:tf-tz-fade .3s ease-out backwards}
.tf-tz-frame.tf-tz-intro .tf-tz-head{animation:tf-tz-fade .3s ease-out .66s backwards}
@media (prefers-reduced-motion:reduce){
  .tf-tz-emb,.tf-tz-head,.tf-tz-lay{transition:none}
  .tf-tz-grid.tf-tz-go .tf-tz-cell,.tf-tz-grid.tf-tz-old,.tf-tz-frame.tf-tz-intro .tf-tz-emb,.tf-tz-frame.tf-tz-intro .tf-tz-head{animation:none}
  .tf-tz-grid.tf-tz-wait .tf-tz-cell,.tf-tz-frame.tf-tz-pend .tf-tz-emb,.tf-tz-frame.tf-tz-pend .tf-tz-head{opacity:1}
}
@media (prefers-reduced-motion:reduce){.tf-tok{transition:none}}
/* Show the math as a few blocks (the owner, 2026-10-09, H2): a lead line in words, the formula typeset, the numbers; blocks separated by a
   hairline; a long chain breaks at “=” onto lines whose “=” line up (two columns: the name, then each “= …”) */
#tf-mathbody .tf-mb+.tf-mb{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
#tf-mathbody .tf-mlead{font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.5;color:var(--ink-2);margin:2px 0 4px}
#tf-app .tf-math-line{overflow-x:auto;max-width:100%;margin:2px 0 4px;font-size:var(--fs-stage)}
/* a formula that does not fit its box (the owner's review of 2026-10-09): the name with “=” first; the right-hand side beside it while its
   widest term fits there, else on its own line, indented under the name; its terms wrap onto the next line under its first term */
#tf-app .tf-fw{display:flex;flex-wrap:wrap;align-items:baseline;padding-left:1.4em}
#tf-app .tf-fwn{flex:none;margin-left:-1.4em;white-space:nowrap}
#tf-app .tf-fwr{flex:1 1 0%;min-width:min-content}
#tf-app .tf-fg{display:inline-block;max-width:100%}
#tf-app .tf-fp{display:inline-block;white-space:nowrap}
#tf-mathbody .tf-chain{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:.45em;row-gap:1px;align-items:baseline}
#tf-mathbody .tf-mnote{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
@media (max-width:560px){#tf-mathbody .tf-chain{grid-template-columns:1.2em minmax(0,1fr)}#tf-mathbody .tf-chain .tf-cn{grid-column:1/-1}#tf-mathbody .tf-chain .tf-cn:empty{display:none}#tf-mathbody .tf-chain .tf-cr{grid-column:2}}

/* Vector index lab */
.vix-app{--vix-ivf:#138F82;--vix-hnsw:#C2408F;--vix-pq:#8B5E34}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vix-app{--vix-ivf:#3CC3B3;--vix-hnsw:#E77BBE;--vix-pq:#C49563}}
:root[data-theme="dark"] .vix-app{--vix-ivf:#3CC3B3;--vix-hnsw:#E77BBE;--vix-pq:#C49563}
.vix-app [hidden]{display:none!important}
.vix-stage{container-type:inline-size}
.vix-head{align-items:flex-start;gap:10px}
.vix-st-title{font-weight:650;font-size:var(--fs-stage);min-width:0}
/* the transport: one row, every control one height and one baseline; the speed's label sits left of its buttons (review polish r1, P26) */
.vix-transport{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:6px 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.vix-transport .ctl{display:flex;align-items:center;gap:6px;margin:0}
.vix-transport .ctl>.lbl{font-size:var(--fs-cap);font-weight:600;color:var(--ink-2);white-space:nowrap}
.vix-transport .seg-ctl{margin:0}
.vix-transport .btn.sm,.vix-transport .seg-ctl{height:32px;box-sizing:border-box}
.vix-transport .btn.sm{padding-top:0;padding-bottom:0;line-height:1.2}
.vix-transport .seg-ctl button{padding:0 10px;font-family:var(--font-ui);font-size:var(--fs-cap);line-height:1.2}   /* the buttons' font, so the text sits on their baseline */
.vix-scrub{flex:1 1 120px;min-width:90px;margin:0}
/* the picture and its partner side by side on a wide stage, one above the other on a narrow one (review polish r1, P23) */
.vix-figs{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px;align-items:start}
.vix-figs:not(.two)>.vix-pan{width:100%;max-width:560px;justify-self:center}
.vix-figs:not(.two)>#vix-pan-pic{max-width:440px}   /* the title, caption and legend line up with the picture */
.vix-pan{min-width:0}
.vix-pan.sec{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
@container (min-width:640px){
  .vix-figs.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vix-figs.two>.vix-pan.sec{border-top:0;margin-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:18px}}
.vix-pt{font-weight:600;font-size:var(--fs-cap);line-height:1.35;margin-bottom:4px;min-width:0}
/* the caption says what the frame on screen shows; its height stays put while it changes */
.vix-cap{font-size:var(--fs-cap);line-height:1.45;color:var(--ink-2);min-height:2.9em;margin:0 0 4px}
@container (max-width:460px){.vix-cap{min-height:4.35em}}
.vix-leg{margin:4px 0 4px;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-label)}
.vix-leg .lg{display:inline-flex;align-items:center;gap:5px}
.vix-pic{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.vix-pnote{margin:4px 0 0;line-height:1.4}
/* the picture's marks */
.vix-cell{fill:transparent;stroke:var(--line-2);stroke-width:1}
.vix-cell.on{fill:var(--vix-ivf);fill-opacity:.16}
.vix-ctr{fill:var(--vix-ivf);stroke:var(--surface);stroke-width:1}
.vix-ctr.on{stroke:var(--ink);stroke-width:1.2}
.vix-cl{stroke:var(--vix-ivf);stroke-width:1;opacity:.55}
.vix-cl.on{opacity:.9;stroke-width:1.3}
.vix-cl.off{opacity:.14}
.vix-zbox{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.vix-zr{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 2}
.vix-zlab{font-size:var(--fs-mark);font-weight:600;fill:var(--ink-3);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.vix-cn{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
circle.vix-dot{fill:var(--ink-3);opacity:.45}
circle.vix-dot.chk{fill:var(--ink);opacity:1}
circle.vix-dot.cur{fill:var(--ink);opacity:1;stroke:var(--surface);stroke-width:1}
circle.vix-dot.exp{fill:var(--vix-hnsw);opacity:1}
.vix-ring{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.vix-ring.nn{stroke:var(--ink-2);stroke-width:1.1}
.vix-ring.ok{stroke:var(--c-ok);stroke-width:1.9}
.vix-ring.bad{stroke:var(--c-oom);stroke-width:2.1}
.vix-q{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;fill:none}
.vix-rad{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:4 3}
.vix-rad.h{stroke:var(--vix-hnsw);stroke-width:1.4}
.vix-cut{stroke:var(--ink-3);stroke-width:.8;opacity:.6}
.vix-cut.on{stroke:var(--ink-2);stroke-width:1.6;opacity:.9}
.vix-skip{fill:var(--ink-3);fill-opacity:.2;stroke:none}
.vix-skip.now{fill-opacity:.32;stroke:var(--ink-2);stroke-width:1}
.vix-best{fill:none;stroke:var(--ink);stroke-width:1.6}
.vix-link{stroke:var(--vix-hnsw);stroke-width:.7;opacity:.28}
.vix-link.dim{opacity:.1}
.vix-ulink{stroke:var(--vix-hnsw);stroke-width:1.6;opacity:.75}
.vix-unode{fill:none;stroke:var(--vix-hnsw);stroke-width:1.4}
.vix-nbl{stroke:var(--ink);stroke-width:1;opacity:.55}
.vix-hop{stroke:var(--vix-hnsw);stroke-width:2;stroke-dasharray:5 3;fill:none}
.vix-arrh{fill:var(--vix-hnsw)}
.vix-entry{fill:none;stroke:var(--vix-hnsw);stroke-width:2}
.vix-curn{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:2 2}
.vix-out{stroke:var(--ink);stroke-width:1.4;fill:none}
.vix-elab{font-size:var(--fs-mark);font-weight:650;fill:var(--vix-hnsw);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.vix-grid{stroke:var(--vix-pq);stroke-width:.8;opacity:.55}
.vix-trail{stroke:var(--vix-pq);stroke-width:1.2;opacity:.85}
circle.vix-orig{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.vix-cnt{font-family:var(--font-mono);font-size:var(--fs-mark);font-weight:700;fill:var(--vix-pq);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
/* the legend's swatches, one per mark */
.sw.vix-sw-q{background:transparent;width:10px;height:10px;position:relative;border:0}
.sw.vix-sw-q::before,.sw.vix-sw-q::after{content:"";position:absolute;left:4px;top:-1px;width:2.4px;height:12px;background:var(--ink);transform:rotate(45deg)}
.sw.vix-sw-q::after{transform:rotate(-45deg)}
.sw.vix-sw-pt{background:var(--ink-3);opacity:.5;border-radius:50%;width:7px;height:7px}
.sw.vix-sw-chk{background:var(--ink);border-radius:50%;width:7px;height:7px}
.sw.vix-sw-nn{background:transparent;border:1.2px solid var(--ink-2);border-radius:50%;width:10px;height:10px}
.sw.vix-sw-ok{background:transparent;border:2px solid var(--c-ok);border-radius:50%;width:10px;height:10px}
.sw.vix-sw-bad{background:transparent;border:2px solid var(--c-oom);border-radius:50%;width:10px;height:10px}
.sw.vix-sw-rad{background:transparent;border:1.2px dashed var(--ink-2);border-radius:50%;width:12px;height:12px}
.sw.vix-sw-radh{background:transparent;border:1.4px dashed var(--vix-hnsw);border-radius:50%;width:12px;height:12px}
.sw.vix-sw-ctr{background:var(--vix-ivf);width:8px;height:8px;border:0}
.sw.vix-sw-bd{background:transparent;border-top:1px solid var(--line-2);height:0;width:16px;align-self:center}
.sw.vix-sw-cell{background:var(--vix-ivf);opacity:.3;border:1px solid var(--line-2);width:12px;height:10px}
.sw.vix-sw-cl{background:transparent;border-top:1.3px solid var(--vix-ivf);height:0;width:16px;align-self:center}
.sw.vix-sw-cut{background:transparent;border-left:1.6px solid var(--ink-2);width:0;height:12px}
.sw.vix-sw-skip{background:var(--ink-3);opacity:.35;width:12px;height:10px;border:0}
.sw.vix-sw-best{background:transparent;border:1.6px solid var(--ink);border-radius:50%;width:10px;height:10px}
.sw.vix-sw-entry{background:transparent;border:2px solid var(--vix-hnsw);border-radius:50%;width:11px;height:11px}
.sw.vix-sw-up{background:transparent;border-top:1.6px solid var(--vix-hnsw);height:0;width:16px;align-self:center}
.sw.vix-sw-hop{background:transparent;border-top:2px dashed var(--vix-hnsw);height:0;width:16px;align-self:center}
.sw.vix-sw-link{background:transparent;border-top:1px solid var(--vix-hnsw);opacity:.5;height:0;width:16px;align-self:center}
.sw.vix-sw-exp{background:var(--vix-hnsw);border-radius:50%;width:7px;height:7px}
.sw.vix-sw-grid{background:transparent;border:1px solid var(--vix-pq);width:10px;height:10px}
.sw.vix-sw-trail{background:transparent;border-top:1.2px solid var(--vix-pq);height:0;width:16px;align-self:center}
.vix-sw-cnt{font-size:var(--fs-mark);font-weight:700;color:var(--vix-pq)}
/* part 2's scale bars and part 3's k-d bars */
.vix-sg+.vix-sg{margin-top:12px}
.vix-kdbars,.vix-scale{min-width:0}
.vix-kb{display:grid;grid-template-columns:7.5em minmax(0,1fr) 4.2em;gap:8px;align-items:center;font-size:var(--fs-cap);margin:4px 0;padding:2px 4px;border-radius:5px}
.vix-scale .vix-kb{grid-template-columns:3.6em minmax(0,1fr) 5.6em}
.vix-kb.on{background:var(--sunken);font-weight:650}
.vix-kbt{position:relative;height:10px;border-radius:3px;background:var(--sunken);overflow:hidden;border:1px solid var(--line)}
.vix-kbt i{display:block;height:100%;background:var(--ink-2)}
.vix-kbt s{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--ink);text-decoration:none}
.vix-kb b{text-align:right;font-weight:600;white-space:nowrap}
.vix-snote{font-size:var(--fs-label);color:var(--ink-3);margin:2px 4px 0;line-height:1.4}
/* the chart */
.vix-chart{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;overflow:hidden}
.vix-gl{stroke:var(--line);stroke-width:1}
.vix-ax{font-family:var(--font-mono);font-size:var(--fs-label);fill:var(--ink-3)}
.vix-cv{fill:none;stroke-width:2}
.vix-cd{stroke:var(--surface);stroke-width:1}
polyline.vix-k-ivf{stroke:var(--vix-ivf)}circle.vix-k-ivf{fill:var(--vix-ivf)}
polyline.vix-k-hnsw{stroke:var(--vix-hnsw);stroke-dasharray:6 3}circle.vix-k-hnsw{fill:var(--vix-hnsw)}
polyline.vix-k-hnsw16{stroke:var(--vix-hnsw);stroke-dasharray:1.5 2.5;stroke-width:1.4}circle.vix-k-hnsw16{fill:var(--surface);stroke:var(--vix-hnsw);stroke-width:1.2}
polyline.vix-k-pq{stroke:var(--vix-pq);stroke-dasharray:2 3}circle.vix-k-pq{fill:var(--vix-pq)}
circle.vix-k-flat{fill:var(--ink)}
.vix-me{fill:none;stroke:var(--ink);stroke-width:2.4}
.vix-goal{stroke:var(--c-ok);stroke-width:1.3;stroke-dasharray:4 3}
.sw.vix-sw-ivf{background:transparent;border-top:2px solid var(--vix-ivf);height:0;width:16px;align-self:center}
.sw.vix-sw-hnsw{background:transparent;border-top:2px dashed var(--vix-hnsw);height:0;width:16px;align-self:center}
.sw.vix-sw-hnsw16{background:transparent;border-top:1.6px dotted var(--vix-hnsw);height:0;width:16px;align-self:center}
.sw.vix-sw-pq{background:transparent;border-top:2px dotted var(--vix-pq);height:0;width:16px;align-self:center}
.sw.vix-sw-flat{background:var(--ink);border-radius:50%;width:8px;height:8px}
.sw.vix-sw-me{background:transparent;border:2.4px solid var(--ink);border-radius:50%;width:10px;height:10px}
.sw.vix-sw-goal{background:transparent;border-top:1.5px dashed var(--c-ok);height:0;width:16px;align-self:center}
/* four metric cards in one row on a wide stage */
.vix-stage .vix-metrics{margin-top:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.vix-stage .vix-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vix-math-line{overflow-x:auto;padding-block:.3em;margin:4px 0}
.vix-mb{border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
.vix-mb:first-child{border-top:0;margin-top:0}
.vix-mb p{margin:0 0 2px;font-size:var(--fs-cap)}
.vix-prod li{margin-bottom:6px}
.vix-ref{font-weight:600}
.vix-dk{height:8px;border-radius:4px;background:var(--sunken);overflow:hidden;min-width:60px}
.vix-dk i{display:block;height:100%;background:var(--ink-2)}
.vix-ch-res .cmp{margin-top:10px}
#vix-ch-ctl .inline-ctl{margin:6px 0}
/* review b10r1: a formula on its own line inside an exit answer; the challenge's short "why" lines */
.vix-mblk{display:block}
.vix-why p{margin:4px 0}
/* text that changes while a run plays: even-width digits, so the words after a number keep their place (2026-10-22 refit: Figtree's own digits differ in width) */
.vix-cap{font-variant-numeric:tabular-nums}
/* refit step 2 (2026-10-24): at 820 px tall or less (1440 × 800, 1536 × 730) parts 5–8 still ran 5–15 px past the stage (English 5–28).
   The sketch is drawn at its own size, 360 × 260 px inside its 1 px border (it was scaled to its column, 350–400 px wide; its 11 px
   labels are now as drawn), and the gaps under the player and above the metric cards are 6 px */
@media (min-width:761px) and (min-height:600px) and (max-height:820px){@container (min-width:736px){
  .vix-transport{padding-bottom:6px}
  .vix-stage .vix-metrics{margin-top:6px}
  .vix-pic{max-width:362px}
}}
/* a formula line scrolls sideways when the formula is wider than its box; KaTeX's strut also made it scroll 5 px down (part 8, at every
   window size), with nothing more to show (refit step 2) */
.vix-math-line{overflow-y:hidden}

.tz-adm-vis{max-height:130px}
.tz-adm-svg{display:block;width:100%;height:auto;max-height:120px}
.tz-adm-svg text{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-3)}
.tz-adm-pa{fill:var(--c-weights);background:var(--c-weights)}
.tz-adm-fr{fill:var(--c-kv);background:var(--c-kv)}
.tz-adm-sc{fill:var(--c-overhead);background:var(--c-overhead)}
.tz-adm-ov{fill:var(--c-oom);background:var(--c-oom);opacity:.85}
.tz-adm-cap{stroke:var(--ink);stroke-width:1.3;stroke-dasharray:5 3}
.tz-adm-sw{display:inline-block;width:12px;height:8px;border-radius:2px}
.tz-adm-sw.tz-adm-cl{height:0;border-top:2px dashed var(--ink);border-radius:0}

/* agent-anatomy teaser: one row per model call, the tokens it sends stacked by who wrote them; grayscale (R5.6): your code
   outlined, tool results hatched, the model solid; calls not made yet are dashed outlines. Rows keep their height at every step. */
.tz-ana-vis{padding:2px 0;min-width:0}
.tz-ana-rows{display:grid;gap:5px;min-width:0}
.tz-ana-row{display:grid;grid-template-columns:52px minmax(0,1fr) 44px;gap:8px;align-items:center;min-width:0}
.tz-ana-lab{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap}
.tz-ana-row.on .tz-ana-lab,.tz-ana-row.on .tz-ana-v{color:var(--ink);font-weight:700}
.tz-ana-trk{display:flex;height:14px;min-width:0}
.tz-ana-trk i{display:block;height:100%;box-sizing:border-box;flex:none}
.tz-ana-you,.tz-ana-swyou{background:var(--surface);border:1.5px solid var(--ink-2)}
.tz-ana-tool,.tz-ana-swtool{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border:1.5px solid var(--ink-3)}
.tz-ana-model,.tz-ana-swmodel{background:var(--ink-2);border:1.5px solid var(--ink-2)}
.tz-ana-trk .tz-ana-tool{border-left:0}
.tz-ana-trk .tz-ana-model{min-width:2px}
.tz-ana-todo{border:1px dashed var(--line);background:transparent}
.tz-ana-row.on .tz-ana-trk{outline:1.5px solid var(--ink);outline-offset:2px;border-radius:1px}
.tz-ana-v{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);text-align:right;white-space:nowrap}

/* agent-capstone teaser: grayscale; red only for a run with an unsafe action (R5.6). Both harnesses fill the same cells, so the tile
   keeps its height. */
.tz-acp-seg{margin-bottom:8px}
.tz-acp-vis{display:grid;gap:8px;padding:2px 0;cursor:help;outline-offset:3px}
.tz-acp-grid{display:grid;gap:3px}
.tz-acp-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 3px repeat(5,minmax(0,1fr)) 3px repeat(3,minmax(0,1fr));gap:2px;height:13px}
.tz-acp-c{display:block;border-radius:1px}
.tz-acp-c.o{background:var(--ink-2)}
.tz-acp-c.f{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-3)}
.tz-acp-c.u{background:var(--c-oom)}
.tz-acp-strip{display:grid;gap:3px}
.tz-acp-sr,.tz-acp-ax{display:grid;grid-template-columns:2.6em minmax(0,1fr) 3.6em;align-items:center;gap:6px}
.tz-acp-sr{height:14px;font-size:11px;color:var(--ink-3)}
.tz-acp-sr.on{color:var(--ink);font-weight:650}
.tz-acp-st{position:relative;height:10px;background:var(--surface-2);border-radius:2px}
.tz-acp-st i{position:absolute;display:block}
.tz-acp-st i.ci{top:3px;height:4px;background:var(--ink-3)}
.tz-acp-st i.pt{top:0;width:3px;height:10px;margin-left:-1.5px;background:var(--ink-3)}
.tz-acp-sr.on .tz-acp-st i.ci,.tz-acp-sr.on .tz-acp-st i.pt{background:var(--ink)}
.tz-acp-sv{text-align:right;font-size:11px}
.tz-acp-ax{font-size:9.5px;color:var(--ink-3)}
.tz-acp-axs{display:flex;justify-content:space-between}
.tz-acp-sw-o{background:var(--ink-2);border-color:transparent}
.tz-acp-sw-f{background:var(--surface);border:1px solid var(--ink-3)}
.tz-acp-sw-u{background:var(--c-oom);border-color:transparent}
.tz-acp-sw-i{height:4px;background:var(--ink);border:0;border-radius:0}

/* agent-reliability teaser: grayscale only (R5.6). The row always holds 40 cell slots, so the tile keeps its height. */
.tz-arl-vis{display:grid;gap:8px;padding:2px 0;cursor:help;outline-offset:3px}
.tz-arl-row{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));gap:2px;height:14px}
.tz-arl-c{display:block;border-radius:1px;background:transparent;border:1px dashed var(--line-2);box-sizing:border-box}
.tz-arl-c.on{background:var(--ink-3);border:0}
.tz-arl-bar{position:relative;height:22px;background:var(--surface-2);border-radius:3px;overflow:hidden;min-width:0}
.tz-arl-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}
.tz-arl-bar span{position:absolute;right:6px;top:0;bottom:0;display:flex;align-items:center;font-family:var(--font-mono);font-size:11px;font-weight:650;color:var(--ink)}
.tz-arl-sw{background:var(--ink-3);border-color:transparent}
.tz-arl-sw2{background:var(--ink-2);border-color:transparent}

/* backprop teaser: two lanes of boxes in grayscale (R5.6): solid arrows = forward values, dashed arrows = backward gradients */
.tz-bp-range{width:100%;margin:0}
.tz-bp-vis text{font-family:var(--font-mono);font-size:10px;fill:var(--ink-2)}
.tz-bp-vis text.tz-bp-lane{font-size:10px;fill:var(--ink-3)}
.tz-bp-vis text.tz-bp-cap{font-size:9.5px;fill:var(--ink-3)}
.tz-bp-vis text.tz-bp-val{font-size:10.5px;font-weight:650;fill:var(--ink)}
.tz-bp-vis text.tz-bp-op{font-size:9.5px;fill:var(--ink-2)}
.tz-bp-box{fill:var(--surface);stroke:var(--line);stroke-width:1}
.tz-bp-box.tz-bp-on{stroke:var(--ink);stroke-width:2}
.tz-bp-fw{stroke:var(--ink-2);stroke-width:1.6}
.tz-bp-fwh{fill:var(--ink-2)}
.tz-bp-bk{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:4 3}
.tz-bp-bkh{fill:var(--ink)}
.tz-bp-sw{display:inline-block;width:14px;height:0;margin-right:5px;flex:none}
.tz-bp-swfw{border-top:1.6px solid var(--ink-2)}
.tz-bp-swbk{border-top:1.6px dashed var(--ink)}

/* checkpointing teaser: one wasted-share curve on fixed axes (5 minutes to 4 hours, 0–30%), grayscale (R5.6); the chosen interval is a
   filled dot, the lowest point a dashed drop line. The picture keeps its height at every position of the slider. */
.tz-ckp-vis{min-width:0;padding:2px 0}
.tz-ckp-vis svg{display:block;width:100%;height:120px}
.tz-ckp-gl{stroke:var(--line-2);stroke-width:1}
.tz-ckp-tk{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-3)}
.tz-ckp-cur{fill:none;stroke:var(--ink);stroke-width:2.2}
.tz-ckp-dot{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.tz-ckp-drop{stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:3 3}
.tz-ckp-swc{height:0!important;border:0!important;border-top:2.2px solid var(--ink)!important;border-radius:0!important;align-self:center}
.tz-ckp-swd{width:10px!important;height:10px!important;border:0!important;border-radius:50%!important;background:var(--ink)!important}
.tz-ckp-swl{width:0!important;height:12px!important;border:0!important;border-left:1.5px dashed var(--ink-2)!important;border-radius:0!important;margin:0 7px 0 4px}

/* chunk-rerank home-tile teaser */
.tz-ckr-q{stroke-width:1.2}
.tz-ckr-q.ok{fill:var(--c-ok);stroke:var(--c-ok)}
.tz-ckr-q.cut{fill:var(--c-oom);stroke:var(--c-oom);opacity:.85}
.tz-ckr-q.low{fill:var(--surface);stroke:var(--ink-3)}
.sw.tz-ckr-swok{background:var(--c-ok)}
.sw.tz-ckr-swcut{background:var(--c-oom);opacity:.85}
.sw.tz-ckr-swlow{background:var(--surface);border:1px solid var(--ink-3)}

/* contamination teaser: 200 questions as squares (R5.6): leak caught = ink, leak missed = red (a failure), false alarm = mid gray, clean = light */
.tz-ctm-vis{display:block;padding:6px 0 0}
.tz-ctm-grid{display:block;width:100%;max-width:330px;height:auto;max-height:100px}
rect.tz-ctm-q{fill:var(--sunken);stroke:var(--line-2);stroke-width:.6}
rect.tz-ctm-q.hit{fill:var(--ink);stroke:var(--ink)}
rect.tz-ctm-q.miss{fill:var(--c-oom);stroke:var(--c-oom)}
rect.tz-ctm-q.fa{fill:var(--ink-3);opacity:.55;stroke:var(--ink-3)}
.tz-ctm-sw{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:2px;flex:none}
.tz-ctm-sw.hit{background:var(--ink)}
.tz-ctm-sw.miss{background:var(--c-oom)}
.tz-ctm-sw.fa{background:var(--ink-3);opacity:.6}
.tz-ctm-sw.ok{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-2)}

/* context-eng teaser: grayscale for the data (R5.6); red only for "over the window" and ✗, green only for ✓.
   The row always holds 40 cell slots and the bar one line, so the tile keeps its height whatever the choice. */
.tz-cte-seg{flex-wrap:wrap}
.tz-cte-seg button{font-size:12px;padding:3px 9px}
.tz-cte-vis{display:grid;gap:7px;padding:2px 0;cursor:help;outline-offset:3px}
.tz-cte-row{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));gap:2px;height:14px}
.tz-cte-c{display:block;border-radius:1px;box-sizing:border-box;position:relative}
/* S9: a step not reached yet is an empty slot with a short base line; a dropped step is dashed and struck through */
.tz-cte-c.none{background:transparent;border:0;box-shadow:inset 0 -2px 0 var(--line-2)}
.tz-cte-c.kept{background:var(--ink-3)}
.tz-cte-c.summ{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1px,var(--surface) 1px 3px);box-shadow:inset 0 0 0 1px var(--ink-3)}
.tz-cte-c.drop{background:linear-gradient(to top right,transparent calc(50% - .7px),var(--ink-3) calc(50% - .7px),var(--ink-3) calc(50% + .7px),transparent calc(50% + .7px));border:1px dashed var(--ink-3)}
.tz-cte-c.f{outline:2px solid var(--ink);outline-offset:1px;z-index:1}
.tz-cte-bar{position:relative;height:22px;background:var(--surface-2);border-radius:3px;overflow:hidden;min-width:0}
.tz-cte-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2)}
.tz-cte-bar.over i{background:var(--c-oom);opacity:.85}
.tz-cte-bar b{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--c-oom)}
.tz-cte-bar{height:14px}
.tz-cte-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font-family:var(--font-mono);font-size:11px;color:var(--ink-2);line-height:1.35;min-height:2.7em}
.tz-cte-fact{font-weight:650;color:var(--ink-2)}
.tz-cte-fact.ok{color:var(--c-ok)}
.tz-cte-fact.bad{color:var(--c-oom)}
.tz-cte-sw-k{background:var(--ink-3);border-color:transparent}
.tz-cte-sw-s{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1px,var(--surface) 1px 3px);border:1px solid var(--ink-3)}
.tz-cte-sw-d{background:linear-gradient(to top right,transparent calc(50% - .7px),var(--ink-3) calc(50% - .7px),var(--ink-3) calc(50% + .7px),transparent calc(50% + .7px));border:1px dashed var(--ink-3)}
.tz-cte-sw-n{background:transparent;border:0;border-radius:0;box-shadow:inset 0 -2px 0 var(--line-2)}
.tz-cte-sw-f{background:transparent;border:2px solid var(--ink)}

/* data-pipeline teaser: MinHash's S-curve for 20 groups, grayscale (R5.6); two marked points (0.8 and 0.5). The SVG has a fixed
   viewBox, so the tile keeps its height at every position of the slider. */
.tz-dl-vis{padding:2px 0;min-width:0}
.tz-dl-vis svg{display:block;width:100%;height:auto;overflow:visible}
.tz-dl-ax{stroke:var(--line);stroke-width:1}
.tz-dl-gl{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3}
.tz-dl-t{font:9.5px var(--font-mono);fill:var(--ink-3)}
.tz-dl-cur{fill:none;stroke:var(--ink);stroke-width:2}
.tz-dl-mk{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 2}
.tz-dl-pt{fill:var(--ink-2);stroke:var(--surface);stroke-width:1.5}
.tz-dl-v{font:10px var(--font-mono);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round} /* a halo, so the curve never strikes through a label */
.tz-dl-swc{height:0!important;border:0!important;border-top:2px solid var(--ink)!important;border-radius:0!important}

/* Embeddings home-tile teaser */
.tz-emb-q{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.tz-emb-q.ok{fill:var(--c-ok);stroke:var(--c-ok)}
.tz-emb-line{fill:none;stroke:var(--ink);stroke-width:2}
.tz-emb-now{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.tz-emb-dot{fill:var(--ink)}
.tz-emb-ax{font-family:var(--font-mono);font-size:9px;fill:var(--ink-3)}
.sw.tz-emb-swok{background:var(--c-ok)}
.sw.tz-emb-swno{background:var(--surface);border:1px solid var(--ink-3)}
.sw.tz-emb-swline{background:transparent;border-top:2px solid var(--ink);height:0;align-self:center}

/* eval-capstone teaser: a small forest plot; grayscale, red for a category that got worse (R5.6) */
.tz-ecap-vis{display:block;padding:4px 0 0;min-height:96px}
.tz-ecap-fp{display:grid;gap:4px}
.tz-ecap-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px;height:22px}
.tz-ecap-n{font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-ecap-t{position:relative;height:18px;background:var(--surface-2);border-radius:2px}
.tz-ecap-t i{position:absolute;display:block}
.tz-ecap-z{top:-2px;bottom:-2px;width:0;border-left:1.5px solid var(--ink-3)}
.tz-ecap-b{top:7px;height:4px;border-radius:2px;background:var(--ink-2)}
.tz-ecap-b.red,.tz-ecap-p.red{background:var(--c-oom)}
.tz-ecap-p{top:4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink)}
.tz-ecap-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);margin:3px 0 0 84px}
.tz-ecap-sw{display:inline-block;width:14px;height:4px;margin-right:5px;vertical-align:2px;border-radius:2px;background:var(--ink-2)}
.tz-ecap-sw.red{background:var(--c-oom)}

/* eval-ci teaser: two scores with their 95% error bars on a fixed axis (58–84%), grayscale (R5.6); a hatched band where the bars
   overlap, centred on the overlap and at least 8 px wide (R5.10); under them B − A on its own axis (−2 to 6 points) with 0 marked.
   The rows keep their height at every position of the slider. */
.tz-evc-vis{padding:2px 0;min-width:0}
.tz-evc-rows{position:relative;display:grid;gap:6px;min-width:0}
.tz-evc-row,.tz-evc-scale{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.tz-evc-lab{font-family:var(--font-mono);font-size:10.5px;color:var(--ink);white-space:nowrap}
.tz-evc-trk{position:relative;height:24px;min-width:0}
.tz-evc-trk::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line-2)}
.tz-evc-bar{position:absolute;top:6px;height:12px;box-sizing:border-box;border-left:2px solid var(--ink-2);border-right:2px solid var(--ink-2);
  background:linear-gradient(var(--ink-2),var(--ink-2)) center/100% 2px no-repeat;transition:left .2s ease-out,width .2s ease-out}
.tz-evc-dot{position:absolute;top:7px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.tz-evc-band{position:absolute;top:0;bottom:0;left:96px;right:0;pointer-events:none}
.tz-evc-ov{position:absolute;top:0;bottom:0;min-width:8px;transform:translateX(-50%);background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 5px);opacity:.55;border-left:1px dashed var(--ink-3);border-right:1px dashed var(--ink-3);box-sizing:border-box}
.tz-evc-sc{position:relative;height:14px;border-top:1px solid var(--line)}
.tz-evc-sc span{position:absolute;top:2px;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.tz-evc-swbar{background:linear-gradient(var(--ink-2),var(--ink-2)) center/100% 2px no-repeat;border:0;border-left:2px solid var(--ink-2);border-right:2px solid var(--ink-2);border-radius:0}
.tz-evc-swov{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border-color:var(--ink-3)}
.tz-evc-drow{margin-top:4px}
.tz-evc-drow .tz-evc-lab{line-height:12px;white-space:nowrap}
.tz-evc-zero{position:absolute;top:1px;bottom:1px;width:0;border-left:2px solid var(--ink);margin-left:-1px;z-index:1}
.tz-evc-bar.cl{border-left:0}
.tz-evc-bar.cr{border-right:0}
.tz-evc-bar.cl::before,.tz-evc-bar.cr::after{content:"";position:absolute;top:50%;margin-top:-5px;border:5px solid transparent}
.tz-evc-bar.cl::before{left:-2px;border-left:0;border-right:7px solid var(--ink-2)}
.tz-evc-bar.cr::after{right:-2px;border-right:0;border-left:7px solid var(--ink-2)}
.tz-evc-dsc{border-top:0;height:13px}
.tz-evc-dsc span{top:0}
@media (prefers-reduced-motion:reduce){.tz-evc-bar{transition:none}}

/* the FlashAttention tile: the bytes one head reads from and writes to HBM, standard against FlashAttention, on one shared log axis
   (R5.6: grayscale; the two bars differ by fill and by their labels) */
.tz-fa-vis{display:grid;gap:5px;min-width:0;cursor:help}
.tz-fa-cap{font-size:11.5px;color:var(--ink-2);line-height:1.35}
.tz-fa-row{display:grid;gap:2px;min-width:0}
.tz-fa-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.tz-fa-l{font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-fa-v{font-size:11.5px;color:var(--ink);white-space:nowrap}
.tz-fa-trk{display:flex;height:14px;background:var(--surface-2);border-radius:2px;overflow:hidden;min-width:0}
.tz-fa-trk i{display:block;height:100%;flex:none;transition:width .25s ease-out;box-sizing:border-box}
.tz-fa-row[data-k="std"] .tz-fa-trk i{background:var(--ink-2)}
.tz-fa-row[data-k="fa"] .tz-fa-trk i{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 4.5px);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.tz-fa-ax{position:relative;height:14px;margin-top:1px}
.tz-fa-ax span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.tz-fa-ax span.tz-fa-t0{transform:translateX(-30%)}
.tz-fa-ax span.tz-fa-tn{transform:translateX(-100%)}
.tz-fa-axn{font-size:10.5px;color:var(--ink-3);line-height:1.3}
@media (prefers-reduced-motion:reduce){.tz-fa-trk i{transition:none}}

/* GRPO home-tile teaser */
.tz-grpo-c{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.tz-grpo-c.ok{fill:var(--ink-2);stroke:var(--ink-2)}
.tz-grpo-mean{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 3}
.tz-grpo-true{stroke:var(--ink-3);stroke-width:1.5}
.tz-grpo-ax{font-family:var(--font-mono);font-size:9px;fill:var(--ink-3)}
.sw.tz-grpo-swok{background:var(--ink-2)}
.sw.tz-grpo-swmean{background:transparent;border-top:2px dashed var(--ink);height:0;align-self:center}
.sw.tz-grpo-swtrue{background:transparent;border-top:1.5px solid var(--ink-3);height:0;align-self:center}
.tz-grpo-lab{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink);font-weight:650}
.tz-grpo-lab.tz-grpo-labt{fill:var(--ink-2);font-weight:500}

/* llm-judge teaser: one stacked bar of 100 verdicts in grayscale (R5.6): A wins dark, ties hatched, B wins light; a dotted line at 50% */
.tz-ljg-vis{display:block;padding:6px 0 0}
.tz-ljg-bar{position:relative;display:flex;height:30px;border-radius:3px;overflow:hidden;background:var(--surface-2)}
.tz-ljg-bar i{display:flex;align-items:center;justify-content:center;height:100%;transition:width .3s ease-out;font-style:normal}
.tz-ljg-bar i span{font-family:var(--font-mono);font-size:11px;position:relative;z-index:2}
.tz-ljg-a{background:var(--ink-2)}
.tz-ljg-a span{color:var(--bg)}
.tz-ljg-t{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,var(--surface) 1.5px 5px)}
.tz-ljg-t span{color:var(--ink);background:var(--surface);padding:0 2px;border-radius:2px}
.tz-ljg-b{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.tz-ljg-b span{color:var(--ink)}
.tz-ljg-50{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:2px dotted var(--ink);z-index:1}
.tz-ljg-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);margin-top:3px}
.tz-ljg-sw{display:inline-block;width:12px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:2px;flex:none}

/* lora teaser: one horizontal stacked bar on a fixed 0–180 GB axis with a dashed 80 GB line; weights in the site's weights blue
   (hatched where stored in 4 bits), the rest grayscale, red hatching beyond the GPU (R5.6, R5.11). */
.tz-lora-vis{padding:2px 0;min-width:0}
.tz-lora-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0;padding-top:16px}
.tz-lora-lab{font-family:var(--font-mono);font-size:10.5px;color:var(--ink);white-space:nowrap}
.tz-lora-trk{position:relative;height:20px;min-width:0;background:var(--surface-2);border-radius:2px}
.tz-lora-seg{position:absolute;top:0;bottom:0;box-sizing:border-box;transition:left .2s ease-out,width .2s ease-out}
.tz-lora-seg.w{background:var(--c-weights)}
.tz-lora-seg.q{background:repeating-linear-gradient(135deg,var(--c-weights) 0 1.5px,color-mix(in srgb,var(--c-weights) 22%,var(--surface)) 1.5px 4px)}
.tz-lora-seg.s{background:var(--ink-3);border-left:1px solid var(--surface)}
.tz-lora-seg.a{background:repeating-linear-gradient(90deg,var(--ink-3) 0 1px,var(--line) 1px 4px);border-left:1px solid var(--surface)}
.tz-lora-ov{position:absolute;top:-2px;bottom:-2px;box-sizing:border-box;background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,transparent 2px 5px);border:1.5px solid var(--c-oom);opacity:.85;transition:left .2s ease-out,width .2s ease-out}
.tz-lora-cap{position:absolute;top:-6px;bottom:-3px;width:0;border-left:2px dashed var(--ink);margin-left:-1px;z-index:2}
.tz-lora-capl{position:absolute;top:0;font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--ink);white-space:nowrap;transform:translateX(-4px)}
.tz-lora-swq{background:repeating-linear-gradient(135deg,var(--c-weights) 0 1.5px,color-mix(in srgb,var(--c-weights) 22%,var(--surface)) 1.5px 4px);border-color:var(--c-weights)}
.tz-lora-sws{background:var(--ink-3);border-color:transparent}
.tz-lora-swa{background:repeating-linear-gradient(90deg,var(--ink-3) 0 1px,var(--line) 1px 4px);border-color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.tz-lora-seg,.tz-lora-ov{transition:none}}

/* model-parallel teaser: a 4-row GPipe Gantt chart, grayscale (R5.6): outlined forwards, solid backwards, hatched idle time.
   Every row keeps its height at every position of the slider. */
.tz-mp-vis{padding:2px 0;min-width:0}
.tz-mp-rows{display:grid;gap:5px;min-width:0}
.tz-mp-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.tz-mp-lab{font-family:var(--font-mono);font-size:10.5px;color:var(--ink);white-space:nowrap}
.tz-mp-trk{position:relative;height:16px;min-width:0;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tz-mp-trk i{position:absolute;top:0;bottom:0;box-sizing:border-box}
.tz-mp-f{background:var(--surface);border:1px solid var(--ink-2);border-radius:1px}
.tz-mp-b{background:var(--ink-2)}
.tz-mp-i{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px)}
.tz-mp-swf{background:var(--surface);border:1px solid var(--ink-2)}
.tz-mp-swb{background:var(--ink-2);border-color:var(--ink-2)}
.tz-mp-swi{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px)}
.tz-mp-gn{font-weight:650;color:var(--ink)}

/* the MoE tile: one layer's 8 experts (weights, so blue, R5.6; the filled part is read per decode step, on average), then the time of
   one decode step for three models on one shared scale. A time is not a weight, so the bars are grayscale: Mixtral --ink, the two
   hypothetical dense models --ink-3. Labels, bars and values share one grid, so the bars start at the same place. */
.tz-moe-vis{display:grid;gap:4px;min-width:0}
.tz-moe-cap{font-size:11px;line-height:1.3;color:var(--ink-3)}
.tz-moe-ex{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;height:20px}
.tz-moe-ex span{position:relative;border:1.5px solid var(--c-weights);border-radius:3px;overflow:hidden}
.tz-moe-ex i{position:absolute;left:0;top:0;bottom:0;background:var(--c-weights);transition:width .25s ease-out}
.tz-moe-tm{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:3px 7px;min-width:0}
.tz-moe-n{font-size:11.5px;line-height:1.3;color:var(--ink-2);white-space:nowrap;cursor:help}
.tz-moe-n.tz-moe-mx{color:var(--ink);font-weight:650}
.tz-moe-tr{position:relative;height:10px;min-width:0;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tz-moe-tr i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px;transition:width .25s ease-out}
.tz-moe-tr.tz-moe-mx i{background:var(--ink)}
.tz-moe-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;line-height:1.3;color:var(--ink-2);text-align:right;white-space:nowrap}
.tz-moe-v.tz-moe-mx{color:var(--ink);font-weight:600}
.tz-moe-nw{white-space:nowrap}
/* the sentence and hidden copies of every setting's share one grid cell, so the cell is as tall as the longest (teasers/moe.js) */
.tz-moe-rd{display:grid;min-width:0}
.tz-moe-rd>p{grid-area:1/1;min-width:0}
.tz-moe-ghost{margin:0;font-size:13px;line-height:1.45;visibility:hidden}
.tz-moe-ghost b{font-weight:650}
.tz-moe .tz-leg i{display:inline-block;flex:none;margin-right:5px}
.tz-moe .tz-leg [data-tipx]{cursor:help}
.tz-moe .sw.tz-moe-sw-out{background:transparent;border:1.5px solid var(--c-weights)}
.tz-moe .sw.tz-moe-sw-mx{background:var(--ink);border-color:transparent}
.tz-moe .sw.tz-moe-sw-dn{background:var(--ink-3);border-color:transparent}
@media (prefers-reduced-motion:reduce){.tz-moe-ex i,.tz-moe-tr i{transition:none}}

/* teaser: multi-gpu-serving */
.tz-mgs-vis{display:block;width:100%;height:auto;max-height:118px}
.tz-mgs-vis text{font-family:var(--font-mono);font-size:10.5px;fill:var(--ink-2)}
.tz-mgs-box{fill:var(--sunken);stroke:var(--ink-3);stroke-width:.8}
.tz-mgs-box.bad{stroke:var(--c-oom);stroke-width:1.4}
.tz-mgs-w{fill:var(--c-weights)}
.tz-mgs-kv{fill:var(--c-kv)}
.tz-mgs-oh{fill:var(--c-overhead)}
.tz-mgs-over{fill:var(--c-oom);opacity:.35}
.tz-mgs-br{fill:none;stroke:var(--ink-3);stroke-width:1}

/* number-formats teaser: four range strips in grayscale (R5.6): solid = normal numbers, hatched = subnormal, line = the value;
   red only for a value the format loses or overflows */
.tz-nf-in{width:100%}
.tz-nf-vis text{font-family:var(--font-mono);font-size:10px;fill:var(--ink-3)}
.tz-nf-vis text.tz-nf-lab{fill:var(--ink-2);font-size:10.5px}
.tz-nf-bg{fill:var(--surface-2)}
.tz-nf-norm{fill:var(--ink-3)}
.tz-nf-hl{fill:var(--ink-3)}
.tz-nf-v{stroke:var(--ink);stroke-width:1.5}
.tz-nf-bad{fill:var(--c-oom-soft);stroke:var(--c-oom);stroke-width:2}
.tz-leg .sw.tz-nf-sw-n{background:var(--ink-3);border-color:transparent}
.tz-leg .sw.tz-nf-sw-s{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 4px);border-color:var(--line)}
.tz-leg .sw.tz-nf-sw-v{width:0;height:11px;border:0;border-left:1.5px solid var(--ink);border-radius:0;margin:0 6px 0 3px}
.tz-leg .sw.tz-nf-sw-b{border-radius:50%;background:var(--c-oom-soft);border:2px solid var(--c-oom)}

/* optimizers tile: the lab's valley from above in grayscale (R5.6): ellipses = loss levels, the picked optimizer's path solid (--ink),
   the other one's dashed (--ink-3), ring = start, × = bottom. The legend draws its two line swatches with the paths' own classes. */
.tz-op-vis{display:block;max-width:100%;height:auto;cursor:help}
.tz-op-bg{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.tz-op-ct{fill:none;stroke:var(--line);stroke-width:1}
.tz-op-path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.tz-op-path.p{stroke:var(--ink);stroke-width:1.8}
.tz-op-path.q{stroke:var(--ink-3);stroke-width:1.3;stroke-dasharray:4 3;stroke-linecap:butt}
.tz-op-start{fill:var(--surface);stroke:var(--ink);stroke-width:1.8}
.tz-op-min{fill:none;stroke:var(--ink);stroke-width:1.8}
.tz-op-sw{display:block;flex:none;margin-right:5px;overflow:visible}
.tz-op-mk{display:inline-block;flex:none;margin-right:5px;font-style:normal}
.tz-op-mk.s{width:9px;height:9px;border:1.8px solid var(--ink);border-radius:50%}
.tz-op-mk.m{font-family:var(--font-mono);font-size:12px;line-height:1;color:var(--ink)}
/* the sentence and, invisible in the same grid cell, the other pick's sentence: the cell is as tall as the longer one */
.tz-op-rd{display:grid;min-width:0}
.tz-op-rd>p{grid-area:1/1;min-width:0}
.tz-op-twin{margin:0;font-size:13px;line-height:1.45;visibility:hidden}
.tz-op-twin b{font-weight:650}

/* parallelism tile: seven bars of model states per GPU under ZeRO-3 (grayscale; the picked count dark), the 80 GB line dashed,
   red only for what is above it (it does not fit). */
.tz-zr-vis{display:block;max-width:100%;height:auto;cursor:help}
.tz-zr-bar{fill:var(--line)}
.tz-zr-bar.on{fill:var(--ink-2)}
.tz-zr-over{fill:var(--c-oom);opacity:.8}
.tz-zr-cap{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3}
.tz-zr-base{stroke:var(--line-2);stroke-width:1}
.tz-zr-n{font:10.5px var(--font-mono);fill:var(--ink-3)}
.tz-zr-n.on{fill:var(--ink);font-weight:650}
.tz-zr-v{font:600 10.5px var(--font-mono);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.tz-zr-sw{background:var(--ink-2);border-color:transparent}
.tz-zr .seg-ctl button{min-width:0;padding-left:7px;padding-right:7px}
.tz-zr-rd{display:grid;min-width:0}
.tz-zr-rd>p{grid-area:1/1;min-width:0}
.tz-zr-twin{margin:0;font-size:13px;line-height:1.45;visibility:hidden}
.tz-zr-twin b{font-weight:650}

/* pass-k teaser: grayscale only (R5.6): filled squares are passing tries, empty squares failing ones; two bars for pass@1 and pass@4 */
.tz-pak-vis{display:block;max-width:100%;height:auto}
.tz-pak-vis text{font-family:var(--font-mono);font-size:10px;fill:var(--ink-3)}
.tz-pak-vis text.tz-pak-bl{fill:var(--ink-2);font-weight:650}
.tz-pak-vis text.tz-pak-bv{fill:var(--ink);font-weight:650}
.tz-pak-sq{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.tz-pak-sq.on{fill:var(--ink-2);stroke:var(--ink-2)}
.tz-pak-trk{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.tz-pak-b1{fill:var(--ink-3)}
.tz-pak-b4{fill:var(--ink)}
.tz-pak-sw{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;flex:none;box-sizing:border-box;border:1px solid var(--ink-3);border-radius:2px;background:var(--surface)}
.tz-pak-sw.on{background:var(--ink-2);border-color:var(--ink-2)}

.tz-pdd-vis{display:flex;flex-direction:column;gap:6px;max-height:130px}
.tz-pdd-row{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.tz-pdd-l{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap}
.tz-pdd-tr{position:relative;height:16px;background:var(--sunken);border-radius:2px;overflow:hidden}
.tz-pdd-tr i{position:absolute;top:0;bottom:0}
.tz-pdd-tr i.tz-pdd-dc{top:60%;bottom:10%}
.tz-pdd-pf{background:var(--ink-2)}
.tz-pdd-dc{background:var(--ink-3)}
.tz-pdd-st{background:var(--c-oom)}
.tz-pdd-sw{display:inline-block;width:12px;height:8px;border-radius:2px}

/* post-capstone teaser: one gray bar per method that can run (R5.6: GPU hours are neither weights nor a success), and a red
   swatch for a method the data does not allow (a failure). Every row keeps its height for every choice. */
.tz-pcap-ctl .seg-ctl{flex-wrap:wrap}
/* a wrapped row keeps the line between the rows (item 5, the owner, 2026-10-09): the gap shows the group's line-coloured background */
.tz-pcap-ctl .seg-ctl{gap:1px;background:var(--line)}
.tz-pcap-ctl .seg-ctl button,.tz-pcap-ctl .seg-ctl button:last-child{border-right:0}
/* “最后答案 + 判分程序” breaks between words on a phone, never inside 判分程序 */
.tz-pcap-ctl .seg-ctl button{word-break:keep-all}
.tz-pcap-vis{padding:2px 0;min-width:0}
.tz-pcap-rows{display:grid;gap:5px;min-width:0}
.tz-pcap-row{display:grid;grid-template-columns:86px minmax(0,1fr) 44px;gap:8px;align-items:center;min-width:0;min-height:18px}
.tz-pcap-lab{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-pcap-trk{position:relative;height:14px;min-width:0;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tz-pcap-b{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);transition:width .2s ease}
.tz-pcap-v{font:600 11.5px/1 var(--font-mono);color:var(--ink);text-align:right;white-space:nowrap}
.tz-pcap-no{grid-column:2 / span 2;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--c-oom);min-width:0}
.tz-pcap-sw{background:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.tz-pcap-b{transition:none}}

/* Product capstone home-tile teaser */
.tz-pdz-l{font-family:var(--font-mono);font-size:10.5px;fill:var(--ink-2)}
.tz-pdz-v{font-family:var(--font-mono);font-size:10.5px;fill:var(--ink);font-weight:650}
.tz-pdz-v.bad{fill:var(--c-oom)}
.tz-pdz-tr{fill:var(--sunken)}
.tz-pdz-b{fill:var(--ink-2)}
.tz-pdz-b.bad{fill:var(--c-oom)}
.tz-pdz-g{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 2}
.sw.tz-pdz-swb{background:var(--ink-2)}
.sw.tz-pdz-swbad{background:var(--c-oom)}
.sw.tz-pdz-swg{background:transparent;border-left:2px dashed var(--ink);width:0;height:10px}

/* prompt-injection teaser: grayscale (R5.6); red only for the injected instruction (⚠) and the send that leaks the files (✗), as in
   the lab's replay (R5.11). The visual keeps three rows, so the tile keeps its height when the switch flips. */
.tz-pin-vis{display:grid;gap:5px;cursor:help;outline-offset:3px;font-size:12px;line-height:1.4;min-width:0}
.tz-pin-page,.tz-pin-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;align-items:baseline;min-width:0}
.tz-pin-page>span:last-child{padding:3px 6px;border:1px solid var(--line);border-radius:3px;background:repeating-linear-gradient(135deg,var(--line-2) 0 1px,var(--surface) 1px 6px);overflow-wrap:anywhere}
.tz-pin-k{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.tz-pin-hid{background:var(--c-oom-soft);color:var(--c-oom);font-weight:600;padding:0 3px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tz-pin-row code{font-family:var(--font-mono);font-size:11px}
.tz-pin-tool{display:inline-block;border:1px solid var(--ink-3);border-radius:3px;padding:0 4px;margin:0 2px 2px 0}
.tz-pin-tool.off{text-decoration:line-through;color:var(--ink-3);border-style:dashed}
.tz-pin-row>span:last-child{min-width:0;overflow-wrap:anywhere}
.tz-pin-bad>span:last-child{color:var(--c-oom);font-weight:650}
.tz-pin-sw-un{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1px,var(--surface) 1px 3.5px)}
.tz-pin-sw-hid{background:var(--c-oom-soft);border:1.5px solid var(--c-oom)}
.tz-pin-sw-bad{background:var(--c-oom);border-color:transparent}

/* rag-failure home tile */
.tz-rgf-q.ok{fill:var(--c-ok);opacity:.7}
.tz-rgf-q.me{fill:var(--c-oom)}
.tz-rgf-q.other{fill:var(--ink-3);opacity:.6}
.sw.tz-rgf-swok{background:var(--c-ok);opacity:.7}
.sw.tz-rgf-swme{background:var(--c-oom)}
.sw.tz-rgf-swot{background:var(--ink-3);opacity:.6}

/* reward-model teaser: a score axis with the chosen (A, filled) and the rejected (B, hollow) response, and σ(r_A − r_B) as a bar;
   grayscale (R5.6) */
.tz-rm-vis{display:grid;gap:6px;padding:4px 0 0}
.tz-rm-ax{position:relative;height:34px;border-bottom:1.5px solid var(--ink-3);margin:0 6px}
.tz-rm-0{position:absolute;left:50%;bottom:-4px;height:10px;width:0;border-left:1.5px solid var(--ink-3)}
.tz-rm-m{position:absolute;bottom:-6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:left .3s ease-out}
.tz-rm-m i{order:2;display:block;width:11px;height:11px;border-radius:50%;box-sizing:border-box}
.tz-rm-m em{order:1;font-style:normal;font-family:var(--font-mono);font-size:11px;line-height:1.2;color:var(--ink);margin-bottom:2px}
.tz-rm-a i{background:var(--ink)}
.tz-rm-b i{background:var(--surface);border:2px solid var(--ink-2)}
.tz-rm-b{z-index:1}.tz-rm-a{z-index:2}
.tz-rm-tk{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);margin-top:2px}
.tz-rm-p{display:grid;grid-template-columns:auto minmax(0,1fr) 36px;gap:8px;align-items:center}
.tz-rm-pl{font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.tz-rm-pt{position:relative;height:12px;background:var(--surface-2);border-radius:2px}
.tz-rm-pt i{position:absolute;left:0;top:0;bottom:0;background:var(--ink-3);border-radius:2px;transition:width .3s ease-out}
.tz-rm-pt b{position:absolute;left:50%;top:-3px;bottom:-3px;width:0;border-left:1.5px dotted var(--ink)}
.tz-rm-pv{font-size:11.5px;color:var(--ink);text-align:right}
.tz-rm-sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;box-sizing:border-box;flex:none}
.tz-rm-swa{background:var(--ink)}
.tz-rm-swb{background:var(--surface);border:2px solid var(--ink-2)}

/* rlvr teaser: two stacked bars (before / after 60 steps) of the four ways of writing, grayscale (R5.6); the candidates way hatched,
   red only when the loose checker is gamed. */
.tz-rlvr-vis{display:grid;gap:8px;padding:6px 0 0}
.tz-rlvr-row{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr);gap:8px;align-items:center}
.tz-rlvr-lb{font-size:11px;color:var(--ink-2);white-space:nowrap}
.tz-rlvr-bar{display:flex;height:22px;border-radius:3px;overflow:hidden;background:var(--surface-2)}
.tz-rlvr-bar i{display:block;height:100%;transition:width .3s ease-out}
.tz-rlvr-w0{background:color-mix(in srgb,var(--ink) 22%,var(--surface))}
.tz-rlvr-w1{background:color-mix(in srgb,var(--ink) 48%,var(--surface))}
.tz-rlvr-w2{background:color-mix(in srgb,var(--ink) 82%,var(--surface))}
.tz-rlvr-w3{background:repeating-linear-gradient(45deg,var(--ink-2) 0 1.5px,var(--surface) 1.5px 4px);box-shadow:inset 0 0 0 1px var(--ink-2)}
.tz-rlvr-w3.red{background:repeating-linear-gradient(45deg,var(--c-oom) 0 1.5px,var(--surface) 1.5px 4px);box-shadow:inset 0 0 0 1.5px var(--c-oom)}
.tz-rlvr-sw{display:inline-block;width:12px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:2px;flex:none}

/* roofline teaser: a log-log roofline in grayscale (R5.6): thick line = the roof, dashed = the ridge, dot = the decode step */
.tz-rf-vis text{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-2)}
.tz-rf-vis .tz-rf-tick{fill:var(--ink-3);font-size:9px}
.tz-rf-vis .tz-rf-grid{stroke:var(--line-2);stroke-width:1}
.tz-rf-vis .tz-rf-roof{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.tz-rf-vis .tz-rf-ridge{stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:3 3}
.tz-rf-vis .tz-rf-rlab{fill:var(--ink-2)}
.tz-rf-vis .tz-rf-plab{fill:var(--ink);font-weight:600}
.tz-rf-vis .tz-rf-dot{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.tz-rf-vis .tz-rf-dlab{fill:var(--ink);font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.tz-rf-vis:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tz-rf-sw{display:inline-block;flex:none;margin-right:5px}
.tz-rf-sw.tz-rf-sw-roof{width:14px;height:0;border-top:2.6px solid var(--ink);vertical-align:3px}
.tz-rf-sw.tz-rf-sw-ridge{width:0;height:11px;border-left:1.5px dashed var(--ink-2);margin:0 6px 0 3px;vertical-align:-1px}
.tz-rf-sw.tz-rf-sw-dot{width:9px;height:9px;border-radius:50%;background:var(--ink);vertical-align:0}

/* rope teaser: two dials in grayscale (R5.6): solid = query, dashed = key, arc = the angle between */
.tz-rope-vis text{font-family:var(--font-mono);font-size:10.5px;fill:var(--ink-2)}
.tz-rope-vis text.tz-rope-cap{fill:var(--ink);font-weight:600}
.tz-rope-vis text.tz-rope-lab{fill:var(--ink)}
.tz-rope-dial{fill:none;stroke:var(--line-2);stroke-width:1.2}
.tz-rope-q{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.tz-rope-k{stroke:var(--ink-2);stroke-width:2.6;stroke-dasharray:5 3.5}
.tz-rope-hd{stroke-dasharray:none;stroke-width:1}
.tz-rope-q.tz-rope-hd{fill:var(--ink)}
.tz-rope-k.tz-rope-hd{fill:var(--ink-2)}
.tz-rope-arc{fill:none;stroke:var(--ink);stroke-width:1.8}
.tz-rope-sw{display:inline-block;width:14px;height:0;margin-right:5px;flex:none}
.tz-rope-sw.q{border-top:2.6px solid var(--ink)}
.tz-rope-sw.k{border-top:2.6px dashed var(--ink-2)}
.tz-rope-sw.a{width:11px;height:11px;border:2px solid transparent;border-top-color:var(--ink);border-radius:50%}

/* scaling-law teaser: one iso-FLOP curve on fixed axes (100M–1T parameters, loss 1.9–3.2), grayscale (R5.6); the lowest point is a
   ring with a dashed drop line to the size axis. The picture keeps its height at every position of the slider. */
.tz-sl-vis{min-width:0;padding:2px 0}
.tz-sl-vis svg{display:block;width:100%;height:120px}
.tz-sl-gl{stroke:var(--line-2);stroke-width:1}
.tz-sl-tk{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-3)}
.tz-sl-cur{fill:none;stroke:var(--ink);stroke-width:2.2}
.tz-sl-min{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.tz-sl-drop{stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:3 3}
.tz-sl-swc{height:0!important;border:0!important;border-top:2.2px solid var(--ink)!important;border-radius:0!important;align-self:center}
.tz-sl-swm{width:10px!important;height:10px!important;border:2px solid var(--ink)!important;border-radius:50%!important;background:transparent!important;box-sizing:border-box}

/* ---------- Set A teasers (inference). Prefixes: tz-seta- shared, tz-pfd- prefill-decode, tz-chunk- chunked-prefill,
   tz-pfx- prefix-caching, tz-quant- quantization, tz-spec- spec-decoding. Colors: tokens only. ---------- */
.tz-pfd-vis,.tz-chunk-vis,.tz-pfx-vis,.tz-quant-vis,.tz-spec-vis{display:grid;gap:3px;border-radius:3px;min-width:0}
/* legends: the kit's .tz-leg row with our own swatches */
.tz-pfd .tz-leg i,.tz-chunk .tz-leg i,.tz-pfx .tz-leg i,.tz-quant .tz-leg i,.tz-spec .tz-leg i{display:inline-block;flex:none;margin-right:5px}
.tz-pfd .tz-leg [data-tipx],.tz-chunk .tz-leg [data-tipx],.tz-pfx .tz-leg [data-tipx],.tz-quant .tz-leg [data-tipx],.tz-spec .tz-leg [data-tipx]{cursor:help}
.tz-read.tz-seta-flash{animation:tz-seta-flash 1.1s ease-out;border-radius:2px}
@keyframes tz-seta-flash{0%,30%{background-color:var(--surface-2);box-shadow:0 0 0 4px var(--surface-2)}100%{background-color:transparent;box-shadow:0 0 0 4px transparent}}
@media (prefers-reduced-motion:reduce){.tz-read.tz-seta-flash{animation:none}}

/* prefill-decode: one timeline, prefill block then decode ticks */
.tz-pfd-lab{font-family:var(--font-mono);font-size:10.5px;line-height:1.3;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-pfd-lab-r{text-align:right}
.tz-pfd-track{position:relative;height:20px;border-bottom:1px solid var(--line)}
.tz-pfd-pre{position:absolute;left:0;top:3px;bottom:3px;background:var(--ink-3);border-radius:2px 0 0 2px}
.tz-pfd-mark{position:absolute;top:-2px;bottom:-4px;width:0;border-left:2px solid var(--ink);margin-left:-1px}
.tz-pfd-tick{position:absolute;top:4px;bottom:4px;width:1px;margin-left:-.5px;background:var(--ink)}
.tz-pfd-sw-pre{width:14px;height:9px;background:var(--ink-3);border-radius:1px}
.tz-pfd-sw-mark{width:2px;height:13px;background:var(--ink)}
.tz-pfd-sw-tick{width:1px;height:10px;background:var(--ink)}

/* chunked-prefill: the 16 users' tokens over time, with the prefill chunks underneath */
/* the ZH control label ends in a full-width "）": measured whole (not trimmed at the line end) it wraps inside the tile,
   and only before its bracket, which stays on one line */
.tz-chunk .ctl>.lbl{text-spacing-trim:space-all}
.tz-chunk-nw{white-space:nowrap}
.tz-chunk-top{position:relative;height:15px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2)}
.tz-chunk-top span{position:absolute;top:0;white-space:nowrap;line-height:15px}
.tz-chunk-arr{transform:translateX(-4px)}
.tz-chunk-ft{transform:translateX(calc(-100% + 4px))}
.tz-chunk-track{position:relative;height:20px;border-bottom:1px solid var(--line)}
.tz-chunk-track i{position:absolute;top:3px;bottom:3px;width:1px;margin-left:-.5px;background:var(--ink)}
.tz-chunk-segs{position:relative;height:7px}
.tz-chunk-segs i{position:absolute;top:0;bottom:0;background:var(--ink-3)}
.tz-chunk-segs i.odd{background:var(--ink-2)}
.tz-chunk-axis{position:relative;height:13px;font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.tz-chunk-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;line-height:13px}
.tz-chunk-sw-tick{width:1px;height:11px;background:var(--ink)}
.tz-chunk-sw-seg{width:14px;height:7px;background:linear-gradient(90deg,var(--ink-3) 0 50%,var(--ink-2) 50% 100%)}

/* prefix-caching: tokens to prefill without and with the cache, same scale */
.tz-pfx-cap{font-size:11px;line-height:1.3;color:var(--ink-3)}
.tz-pfx-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.3;color:var(--ink-2);min-width:0}
.tz-pfx-row b{font-weight:600;color:var(--ink);font-size:11.5px}
.tz-pfx-bar{position:relative;height:12px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tz-pfx-bar i{position:absolute;top:0;bottom:0}
.tz-pfx-rep{left:0;background-color:var(--ink-3);min-width:1px}
.tz-pfx-rep.tz-pfx-lines{background-image:linear-gradient(90deg,var(--surface) 0 1px,transparent 1px 100%);background-repeat:repeat-x}
.tz-pfx-sh{left:0;background:var(--ink-3);min-width:1px}
.tz-pfx-own{background:var(--ink);min-width:1px}
.tz-pfx-sw-sh{width:12px;height:9px;background:var(--ink-3)}
.tz-pfx-sw-own{width:12px;height:9px;background:var(--ink)}
.tz-pfx-sw-gap{width:12px;height:9px;background:linear-gradient(90deg,var(--ink-3) 0 5px,var(--surface) 5px 6px,var(--ink-3) 6px 12px)}

/* quantization: three number lines 0–6 with each format's grid */
.tz-quant-row{display:grid;grid-template-columns:34px minmax(0,1fr) 62px;align-items:center;gap:6px;min-width:0}
.tz-quant-name{font-size:10.5px;color:var(--ink-2)}
.tz-quant-val{font-size:10.5px;color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-quant-line{position:relative;height:18px;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.tz-quant-line.dense{background:linear-gradient(var(--ink-3),var(--ink-3)) center/100% 8px no-repeat}
.tz-quant-line i{position:absolute;top:4px;bottom:4px;width:1px;margin-left:-.5px;background:var(--ink-3)}
.tz-quant-orig{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px dashed var(--ink-2);margin-left:-.75px}
.tz-quant-err{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--ink);opacity:.55}
.tz-quant-dot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--surface)}
.tz-quant-axis{position:relative;height:12px;font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.tz-quant-axis span{position:absolute;top:0;transform:translateX(-50%);line-height:12px}
.tz-quant-sw-orig{width:0;height:11px;border-left:1.5px dashed var(--ink-2)}
.tz-quant-sw-dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.tz-quant-sw-tick{width:1px;height:9px;background:var(--ink-3)}
.tz-quant-sw-err{width:12px;height:3px;background:var(--ink);opacity:.55}
.tz-quant-sw-band{width:12px;height:8px;background:var(--ink-3)}

/* spec-decoding: slots per target pass, filled by the chance that each token is produced */
.tz-spec-cap{font-size:11px;line-height:1.35;color:var(--ink-3);margin-bottom:2px}
.tz-spec-grid{display:grid;grid-template-columns:auto minmax(0,1fr) 34px;gap:4px 8px;align-items:center;min-width:0}
.tz-spec-name{font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.tz-spec-v{font-size:11.5px;font-weight:650;color:var(--ink);text-align:right}
.tz-spec-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;height:20px}
.tz-spec-slots span{position:relative;border:1px dashed var(--line);border-radius:2px;overflow:hidden}
.tz-spec-slots i{position:absolute;left:0;right:0;bottom:0;background:var(--ink)}
.tz-spec-pr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;font-size:9.5px;line-height:1.2;color:var(--ink-3);text-align:center;white-space:nowrap}
.tz-spec-sw-fill{width:11px;height:11px;border:1px dashed var(--line);border-radius:2px;background:linear-gradient(transparent 0 45%,var(--ink) 45% 100%)}
.tz-spec-sw-empty{width:11px;height:11px;border:1px dashed var(--line);border-radius:2px}

/* ---------- Set B teasers (teasers/set-b.js): shared pieces ---------- */
.tz-setb > *{min-width:0}
.tz-setb .tz-lab output{white-space:nowrap}
.tz-setb-read{border-radius:3px}
.tz-setb-read.tz-setb-bump{animation:tz-setb-bump 1.1s ease-out}
@keyframes tz-setb-bump{0%,30%{background:var(--surface-2);box-shadow:0 0 0 4px var(--surface-2)}100%{background:transparent;box-shadow:0 0 0 4px transparent}}
/* data colours: blue weights (R5.6); gradients, optimizer states and adapters are grayscale */
.tz-setb-w{background:var(--c-weights)}
.tz-setb-g{background:var(--ink-3)}
.tz-setb-o{background:repeating-linear-gradient(135deg,var(--ink-3) 0 2px,var(--surface-2) 2px 4.5px)}
.tz-setb-a{background:var(--ink)}
.sw.tz-setb-g,.sw.tz-setb-a{border-color:transparent}
.tz-setb-axis{position:relative;height:14px;margin-top:3px;font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.tz-setb-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.tz-setb-axis span:first-child{transform:none}
.tz-setb-axis span:last-child{transform:translateX(-100%)}
.tz-setb .tz-leg>span{min-width:0}
.tz-setb-lead{color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.tz-setb-read.tz-setb-bump{animation:none}}

/* sampling: one row per candidate word */
.tz-samp-title{font-size:11.5px;line-height:1.3;color:var(--ink-3);margin-bottom:4px}
.tz-samp-rows{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:3px 8px;align-items:center;line-height:13px}
.tz-samp-row{display:contents}
.tz-samp-w{font-size:12px;color:var(--ink-2);white-space:nowrap}
.tz-samp-trk{position:relative;height:11px;background:var(--surface-2);border-radius:2px}
.tz-samp-fin{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink-2);border-radius:2px;transition:width .2s ease-out}
.tz-samp-pre{position:absolute;left:0;top:0;bottom:0;width:0;border:1px dashed var(--ink-3);border-radius:2px;box-sizing:border-box}
.tz-samp-v{font-size:11px;text-align:right;color:var(--ink)}
.tz-samp-row.cut .tz-samp-w,.tz-samp-row.cut .tz-samp-v{color:var(--ink-3)}
.tz-samp-row.cut .tz-samp-w{text-decoration:line-through;text-decoration-color:var(--ink-3)}
.sw.tz-samp-swfin{background:var(--ink-2);border-color:transparent}
.sw.tz-samp-swcut{background:transparent;border:1px dashed var(--ink-3)}
@media (prefers-reduced-motion:reduce){.tz-samp-fin{transition:none}}

/* tokenization-cost: each sentence over its UTF-8 bytes, with one bar per token underneath */
.tz-tokn-cap{display:flex;justify-content:space-between;align-items:baseline;margin:3px 0 2px;font-size:11.5px;color:var(--ink-2)}
.tz-tokn-cap b{font-family:var(--font-mono);font-weight:600;color:var(--ink)}
.tz-tokn-strip{display:grid;gap:2px}
.tz-tokn-glyphs,.tz-tokn-boxes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.tz-tokn-glyphs{height:16px}
.tz-tokn-glyphs span{display:flex;align-items:flex-end;justify-content:center;min-width:0;font-family:var(--font-mono);font-size:11px;line-height:1;color:var(--ink);white-space:nowrap}
.tz-tokn-glyphs em{font-style:normal;color:var(--ink-3)}
.tz-tokn-zh .tz-tokn-glyphs span{font-family:var(--font-ui);font-size:13px}
.tz-tokn-boxes{height:7px}
.tz-tokn-boxes i{margin-right:2px;border-radius:2px;background:var(--ink-2)}
.tz-tokn-boxes i.b{background:var(--ink-3)}
.sw.tz-tokn-sw{width:18px;height:7px;border:0;background:linear-gradient(90deg,var(--ink-2) 0 44%,transparent 44% 56%,var(--ink-3) 56%)}
.tz-tokn-dot{flex:none;width:10px;margin-right:5px;text-align:center;font-weight:700;color:var(--ink-3)}

/* Set C teasers: rag-failure, agent-reliability, agent-anatomy, prompt-injection, eval-ci, pass-k.
   Grayscale except red for failure (tokens only, so dark mode follows the theme). */
.tz-c{min-width:0}
.tz-c [data-tipx]{cursor:help}
.tz-c .tz-lab{flex-wrap:wrap;row-gap:0}
.tz-c .tz-lab span{min-width:0}
.tz-c .tz-lab output{white-space:nowrap;margin-left:auto}
.tz-c-svg{display:block;width:100%;height:auto;overflow:visible;border-radius:2px}
.tz-c-svg:focus-visible,.tz-inj-vis:focus-visible,.tz-inj-vis [tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tz-c-svg text{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-2)}
.tz-c-svg .tz-c-cap{fill:var(--ink-2)}
.tz-c-svg .tz-c-tick{fill:var(--ink-3);font-size:9px}
.tz-c-svg .tz-c-val{fill:var(--ink-2)}
.tz-c-svg .tz-c-strong{fill:var(--ink);font-weight:600}
.tz-c-svg .tz-c-bad{fill:var(--c-oom);font-weight:600}
.tz-c-svg .tz-c-halo{paint-order:stroke;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round}
.tz-c-grid{stroke:var(--line-2);stroke-width:1}
.tz-c-mark{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.tz-c-curve{fill:none;stroke:var(--ink-3);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;opacity:.75}
.tz-c-curve.on{stroke:var(--ink);stroke-width:2.2;opacity:1}
.tz-c-badge{fill:var(--surface);stroke:var(--line);stroke-width:1}
.tz-c-dot{fill:var(--ink);stroke:var(--surface);stroke-width:1.5}
.tz-c-dot.cmp{fill:var(--ink-2)}
.tz-c .tz-read{border-radius:3px}
.tz-c .tz-read.tz-c-pulse{animation:tzcPulse .9s ease-out}
@keyframes tzcPulse{0%,30%{background:var(--surface-2);box-shadow:0 0 0 4px var(--surface-2)}100%{background:transparent;box-shadow:0 0 0 4px transparent}}
@media (prefers-reduced-motion:reduce){.tz-c .tz-read.tz-c-pulse{animation:none}}
.tz-c .tz-c-seg button{line-height:1.25}
.tz-c .tz-leg{margin-top:-3px}
.tz-c .tz-leg>span[tabindex]{cursor:help}
/* legend swatches: fills, outlines and line styles exactly as drawn in the visuals */
.tz-c-sw{display:inline-block;flex:none;width:11px;height:10px;margin-right:5px;box-sizing:border-box;border-radius:1px}
.tz-c-sw.ans{background:var(--ink)}
.tz-c-sw.dashbox{border:1.2px dashed var(--ink-3)}
.tz-c-sw.miss{border:2px solid var(--c-oom);background:color-mix(in srgb,var(--ink) 35%,var(--surface))}
.tz-c-sw.bad{background:var(--c-oom)}
.tz-c-sw.strike{border:1px dashed var(--ink-3);background:linear-gradient(transparent 44%,var(--ink-3) 44% 58%,transparent 58%)}
.tz-c-sw.thick,.tz-c-sw.thin,.tz-c-sw.thickdash{width:16px;height:0;border-radius:0}
.tz-c-sw.thick{border-top:2.4px solid var(--ink)}
.tz-c-sw.thin{border-top:1.2px solid var(--ink-3)}
.tz-c-sw.thickdash{border-top:2.4px dashed var(--ink)}
.tz-c-sw.vdash,.tz-c-sw.vline{width:0;height:12px;margin:0 8px 0 4px;border-radius:0}
.tz-c-sw.vdash{border-left:1.3px dashed var(--ink-3)}
.tz-c-sw.vline{border-left:1.3px solid var(--ink-3)}
.tz-c-sw.f-tool{background:var(--ink)}
.tz-c-sw.f-mod{background:var(--ink-3)}
.tz-c-sw.f-sys{background:var(--line);box-shadow:inset 0 0 0 1px var(--ink-3)}
/* rag-failure */
.tz-rag-cell{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1}
.tz-rag-cell.out{fill:none;stroke:var(--ink-3);stroke-dasharray:3 2}
.tz-rag-cell.ans{fill:var(--ink);stroke:var(--ink)}
.tz-rag-cell.ans.miss{fill:var(--ink);fill-opacity:.35;stroke:var(--c-oom);stroke-width:2;stroke-dasharray:none}
.tz-c-svg .tz-rag-n{fill:var(--ink-2)}
.tz-c-svg .tz-rag-n.out{fill:var(--ink-3)}
.tz-c-svg .tz-rag-n.ans{fill:var(--surface);font-weight:600}
.tz-c-svg .tz-rag-n.ans.miss{fill:var(--ink)}
.tz-rag-q{fill:var(--surface);stroke:var(--ink);stroke-width:1.3}
.tz-c-svg .tz-rag-qt{fill:var(--ink)}
/* agent-anatomy */
.tz-anat-tool{fill:var(--ink)}
.tz-anat-mod{fill:var(--ink-3)}
.tz-anat-sys{fill:var(--line);stroke:var(--ink-3);stroke-width:.6}
/* prompt-injection: prompt blocks with their role on the border, then tools and the next action */
.tz-inj-vis{display:grid;gap:5px;font-size:11px;line-height:1.32;color:var(--ink-2);border-radius:3px;padding-top:5px}
.tz-inj-blk{position:relative;padding:6px 7px 4px;border-radius:3px;overflow-wrap:anywhere}
.tz-inj-blk + .tz-inj-blk{margin-top:5px}
.tz-inj-blk.ins{border:1.3px solid var(--ink-3)}
.tz-inj-blk.data{border:1.3px dashed var(--ink-3);background:var(--surface-2)}
.tz-inj-lg{position:absolute;top:-7px;left:5px;padding:0 4px;background:var(--surface);font-family:var(--font-mono);font-size:9.5px;line-height:12px;color:var(--ink-2);white-space:nowrap}
.tz-inj-k{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);white-space:nowrap;font-weight:400}
.tz-inj-page{color:var(--ink-3)}
.tz-inj-hid{color:var(--ink);text-decoration:underline dashed var(--ink-3);text-underline-offset:3px;text-decoration-thickness:1px}
.tz-inj-hid .tz-inj-k{display:inline-block;text-decoration:none}
.tz-inj-row{min-width:0;overflow-wrap:anywhere}
.tz-inj-row code{font-size:10px;padding:0 3px}
.tz-inj-row .tz-inj-tool{display:inline-block;margin:1px 0;line-height:1.35}
.tz-inj-tool{border:1px solid var(--line);border-radius:3px;background:var(--surface-2);color:var(--ink)}
.tz-inj-tool.off{color:var(--ink-3);background:none;border-style:dashed;text-decoration:line-through}
.tz-inj-bad{color:var(--c-oom);font-weight:600}
.tz-inj-bad code{color:inherit;background:var(--c-oom-soft)}
.tz-inj-compact{font-size:10.5px;line-height:1.28}
/* eval-ci */
.tz-ci-zero{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.tz-ci-obs{stroke:var(--ink-3);stroke-width:1.1}
.tz-ci .seg-ctl button{font-size:11px;padding:5px 2px}
.tz-ci-axis{stroke:var(--line);stroke-width:1}
.tz-ci-w{stroke:var(--ink-3);stroke-width:1.2}
.tz-ci-dot{fill:var(--ink-3)}
.tz-ci-row.on .tz-ci-w{stroke:var(--ink);stroke-width:2.2}
.tz-ci-row.on .tz-ci-dot{fill:var(--ink)}
/* pass-k */
.tz-pk-hat{stroke-dasharray:5 3}

/* sft teaser: the toy model's tokens as small chips, grayscale (R5.6); green where it wrote the end token and stopped, red where it
   should have stopped (R5.11), dashed for what it wrote after that. */
.tz-sft-vis{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;align-items:center;min-height:60px;max-height:128px;overflow:hidden;padding:2px 0}
.tz-sft-gt{display:inline-block;max-width:100%;border:1px solid var(--ink-3);border-radius:4px;padding:2px 6px;font-size:12px;line-height:1.3;color:var(--ink);background:var(--surface);overflow-wrap:anywhere}
.tz-sft-gt .mono{font-family:var(--font-mono);font-size:10.5px}
.tz-sft-gt.stop{border:2px solid var(--c-ok)}
.tz-sft-gt.red{border:2px solid var(--c-oom);background:var(--c-oom-soft)}
.tz-sft-gt.extra{border-style:dashed}
.tz-sft-more{color:var(--ink-3);padding:0 2px}
.tz-sft-swstop{background:var(--surface);border:2px solid var(--c-ok)!important}
.tz-sft-swbad{background:var(--surface);border:2px solid var(--c-oom)!important}

/* softmax-numerics teaser: 100% bars in grayscale (R5.6); red hatching only for NaN (failure). The second bar keeps its space while
   hidden, so the tile does not jump when the naive softmax fails. */
.tz-sm-vis{display:grid;gap:8px;padding:2px 0}
.tz-sm-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.tz-sm-row.tz-sm-off{visibility:hidden}
.tz-sm-lab{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);white-space:nowrap}
.tz-sm-bar{position:relative;height:26px;background:var(--surface-2);border-radius:3px;overflow:hidden;min-width:0}
.tz-sm-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;background:var(--ink-3);border-right:1.5px solid var(--surface);box-sizing:border-box;overflow:hidden}
.tz-sm-seg:nth-child(even){background:var(--ink-2)}
.tz-sm-seg span{font-family:var(--font-mono);font-size:10.5px;color:var(--bg);white-space:nowrap;padding:0 5px}
.tz-sm-bar.tz-sm-bad{background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 3px,transparent 3px 6px),var(--c-oom-soft);box-shadow:inset 0 0 0 1.5px var(--c-oom);display:flex;align-items:center}
.tz-sm-nan{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--c-oom);padding:0 7px}
.tz-sm-sw{background:var(--ink-3);border-color:transparent}
.tz-sm-sw.tz-sm-bad{background:repeating-linear-gradient(135deg,var(--c-oom-soft) 0 2px,transparent 2px 4px),var(--c-oom-soft);border:1.5px solid var(--c-oom)}
.tz-sm sup{font-size:.72em;line-height:0}

/* tensors teaser: axis boxes lined up from the right, in grayscale (R5.6): solid = an axis, dashed = stretched, red = mismatch */
.tz-tensors .seg-ctl{flex-wrap:wrap}
.tz-tensors .seg-ctl button{white-space:nowrap;font-family:var(--font-mono);font-size:11px;padding-left:6px;padding-right:6px;flex:1 0 auto}
.tz-tensors-vis{display:grid;gap:5px 6px;align-items:center;max-width:360px;min-width:0;max-height:130px;margin:8px 0 6px;cursor:help}
.tz-tensors-rl{font-size:12px;color:var(--ink-2);white-space:nowrap;padding-right:2px}
.tz-tensors-rl span{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.tz-tensors-rout{font-weight:650;color:var(--ink)}
.tz-tensors-ax{display:flex;align-items:center;justify-content:center;min-width:0;height:26px;padding:0 3px;box-sizing:border-box;border:1.5px solid var(--ink-2);border-radius:4px;background:var(--surface);font-family:var(--font-mono);font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-tensors-ax.tz-tensors-gh{border-style:dashed;border-color:var(--ink-3);background:transparent;color:var(--ink-2)}
.tz-tensors-ax.tz-tensors-none{border:1px dotted var(--line-2);background:transparent;color:var(--ink-3)}
.tz-tensors-ax.tz-tensors-out{background:var(--surface-2);font-weight:650}
.tz-tensors-ax.tz-tensors-bad{border:2px solid var(--c-oom);color:var(--c-oom)}
.tz-tensors-ax.tz-tensors-bad.tz-tensors-x{background:transparent;font-weight:650}
.tz-leg .sw.tz-tensors-sw{background:var(--surface);border:1.5px solid var(--ink-2);box-sizing:border-box}
.tz-leg .sw.tz-tensors-sw.tz-tensors-sw-gh{background:transparent;border-style:dashed;border-color:var(--ink-3)}
.tz-leg .sw.tz-tensors-sw.tz-tensors-sw-bad{background:transparent;border:2px solid var(--c-oom)}

/* Tool scheduling teaser */
.tz-tls-g{stroke:var(--line);stroke-width:1}
.tz-tls-ax{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-3)}
.tz-tls-l{font-size:10.5px;fill:var(--ink-2)}
.tz-tls-l.b{font-weight:650;fill:var(--ink)}
.tz-tls-mc{fill:var(--ink)}
.tz-tls-b{fill:var(--ink-3)}
.sw.tz-tls-swm{background:var(--ink);width:12px;height:9px;border-radius:2px}
.sw.tz-tls-swb{background:var(--ink-3);width:12px;height:9px;border-radius:2px}

/* train-capstone teaser: two gray bars on fixed scales (R5.6: nothing here is weights, KV, a failure or a success).
   Every row keeps its height at every position of the slider. */
.tz-tcap-vis{padding:2px 0;min-width:0}
.tz-tcap-rows{display:grid;gap:6px;min-width:0}
.tz-tcap-row{display:grid;grid-template-columns:64px minmax(0,1fr) 52px;gap:8px;align-items:center;min-width:0}
.tz-tcap-lab{font-size:11px;color:var(--ink-2);white-space:nowrap}
.tz-tcap-trk{position:relative;height:16px;min-width:0;background:var(--surface-2);border-radius:2px;overflow:hidden}
.tz-tcap-trk i{position:absolute;left:0;top:0;bottom:0;transition:width .2s ease}
.tz-tcap-d{background:var(--ink-2)}
.tz-tcap-h{background:var(--ink-3)}
.tz-tcap-v{font:600 11.5px/1 var(--font-mono);color:var(--ink);text-align:right;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tz-tcap-trk i{transition:none}}

/* train-debug teaser: one loss curve in grayscale (R5.6): thick = the picked run, thin = no bug, dotted = ln 3; red only for NaN */
.tz-td-vis{display:block;max-width:100%;height:auto}
.tz-td-vis text{font-family:var(--font-mono);font-size:10px;fill:var(--ink-3)}
.tz-td-grid{stroke:var(--line-2);stroke-width:1}
.tz-td-ln{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:1.5 3.5;stroke-linecap:round}
.tz-td-cmp{fill:none;stroke:var(--ink-3);stroke-width:1.1}
.tz-td-tr{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.tz-td-nan{stroke:var(--c-oom);stroke-width:1.2;stroke-dasharray:3 3}
.tz-td-vis text.tz-td-nant{fill:var(--c-oom)}
.tz-td-sw{display:inline-block;width:14px;height:0;margin-right:5px;vertical-align:3px;flex:none}
.tz-td-sw-tr{border-top:2.6px solid var(--ink)}
.tz-td-sw-cmp{border-top:1.2px solid var(--ink-3)}
.tz-td-sw-ln{border-top:2px dotted var(--ink-2)}
/* the NaN label keeps a halo in the tile's colour, so the curve under it never hides it */
.tz-td-vis text.tz-td-nant{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}

/* training-memory teaser: two horizontal bars on one axis (inference, training's model states) with a dashed 80 GB line across both;
   weights in the site's weights blue, the rest grayscale with a thin gap between the 4-byte parts, red hatching beyond the GPU (R5.6,
   R5.11). The rows keep their height at every position of the slider. */
.tz-tmem-vis{padding:2px 0;min-width:0}
.tz-tmem-grid{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 8px;align-items:center;min-width:0;padding-top:16px}
.tz-tmem-lab{font-family:var(--font-mono);font-size:10.5px;color:var(--ink);white-space:nowrap}
.tz-tmem-trk{position:relative;height:18px;min-width:0;background:var(--surface-2);border-radius:2px}
.tz-tmem-seg{position:absolute;top:0;bottom:0;box-sizing:border-box;transition:left .2s ease-out,width .2s ease-out}
.tz-tmem-seg.w{background:var(--c-weights)}
.tz-tmem-seg.s{background:var(--ink-3);border-left:1px solid var(--surface)}
.tz-tmem-ov{position:absolute;top:-2px;bottom:-2px;box-sizing:border-box;background:repeating-linear-gradient(135deg,var(--c-oom) 0 2px,transparent 2px 5px);border:1.5px solid var(--c-oom);opacity:.85;transition:left .2s ease-out,width .2s ease-out}
.tz-tmem-capbox{position:absolute;top:0;bottom:-3px;left:0;right:0;grid-column:2;pointer-events:none}
.tz-tmem-cap{position:absolute;top:12px;bottom:0;width:0;border-left:2px dashed var(--ink);margin-left:-1px;z-index:2}
.tz-tmem-capl{position:absolute;top:0;font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--ink);white-space:nowrap;transform:translateX(-4px)}
.tz-tmem-capl.r{transform:translateX(calc(-100% + 4px))}
.tz-tmem-sws{background:var(--ink-3);border-color:transparent}
@media (prefers-reduced-motion:reduce){.tz-tmem-seg,.tz-tmem-ov{transition:none}}

/* Vector index home-tile teaser */
.tz-vix-c{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.tz-vix-c.on{fill:#138F82;stroke:#138F82}
.tz-vix-t{fill:var(--sunken);stroke:var(--line);stroke-width:1}
.tz-vix-r{fill:var(--c-ok)}
.tz-vix-m{fill:var(--ink-2)}
.sw.tz-vix-swon{background:#138F82}
.sw.tz-vix-swoff{background:var(--surface);border:1px solid var(--line-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tz-vix-c.on{fill:#3CC3B3;stroke:#3CC3B3}:root:not([data-theme="light"]) .sw.tz-vix-swon{background:#3CC3B3}}
:root[data-theme="dark"] .tz-vix-c.on{fill:#3CC3B3;stroke:#3CC3B3}
:root[data-theme="dark"] .sw.tz-vix-swon{background:#3CC3B3}