:root{
  --bg:#f7f8fa;--card:#ffffff;--ink:#17202a;--muted:#5b6673;--line:#e3e7ec;
  --accent:#0f6e8c;--accent-ink:#0b4a5e;
  --s1:#0b7fa6;--s2:#c2571a;--s3:#7a5cc7;
  --box-in:#eef4f7;--box-op:#f4f1fb;--box-out:#eef6f0;--box-line:#fbf3ea;--box-warn:#fbefe8;
  --stroke:#b9c4cd;--ghost:#dde3e8;
  --met:#1f7a3d;--miss:#b3261e;--read:#8a6d00;--pend:#5b6673;
  --core:#0b7fa6;--core-main:#c2571a;
  --sh-wait:#e3e7ec;--sh-run:#c2571a;--sh-done:#0b7fa6;--sh-skip:#7a5cc7;
  --radius:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1418;--card:#161d23;--ink:#e6ebf0;--muted:#9aa7b4;--line:#243039;
    --accent:#5ec3e0;--accent-ink:#9fdcee;
    --s1:#2a9cc4;--s2:#d4692c;--s3:#8f73e0;
    --box-in:#17252d;--box-op:#1f1c2c;--box-out:#16261c;--box-line:#2a2118;--box-warn:#2c1d16;
    --stroke:#3a4954;--ghost:#2a3640;
    --met:#5cc27e;--miss:#f07a70;--read:#e0c050;--pend:#9aa7b4;
    --core:#2a9cc4;--core-main:#d4692c;
    --sh-wait:#243039;--sh-run:#d4692c;--sh-done:#2a9cc4;--sh-skip:#8f73e0;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1418;--card:#161d23;--ink:#e6ebf0;--muted:#9aa7b4;--line:#243039;
  --accent:#5ec3e0;--accent-ink:#9fdcee;
  --s1:#2a9cc4;--s2:#d4692c;--s3:#8f73e0;
  --box-in:#17252d;--box-op:#1f1c2c;--box-out:#16261c;--box-line:#2a2118;--box-warn:#2c1d16;
  --stroke:#3a4954;--ghost:#2a3640;
  --met:#5cc27e;--miss:#f07a70;--read:#e0c050;--pend:#9aa7b4;
  --core:#2a9cc4;--core-main:#d4692c;
  --sh-wait:#243039;--sh-run:#d4692c;--sh-done:#2a9cc4;--sh-skip:#8f73e0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink);text-decoration:underline}
.g{max-width:760px;margin:0 auto;padding:20px 16px 56px}
.crumbs{margin:0 0 6px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
h1{margin:0 0 8px;font-size:28px;line-height:1.2;letter-spacing:-.01em}
h2{margin:40px 0 10px;font-size:22px;line-height:1.25;padding-top:8px;border-top:1px solid var(--line)}
h3{margin:24px 0 6px;font-size:17px}
h4{margin:0 0 6px;font-size:15px}
p,li,dd{text-wrap:pretty}
p{margin:0 0 12px}
.lede{color:var(--muted);font-size:16px}
dfn{font-style:normal;font-weight:600}
.toc{display:flex;flex-wrap:wrap;gap:6px 8px;margin:18px 0 6px}
.toc a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:13px;color:var(--ink)}
.toc a:hover{border-color:var(--accent);text-decoration:none}
.tight{padding-left:20px;margin:0 0 12px}
.tight li{margin:0 0 6px}
.fig{margin:16px 0 20px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.fig svg{display:block;width:100%;height:auto;margin:0 auto}
.fig svg.flow{max-width:440px}
.fig svg.wide{max-width:560px}
figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
/* svg vocabulary */
.bx{stroke:var(--stroke);stroke-width:1}
.bx-in{fill:var(--box-in)}.bx-op{fill:var(--box-op)}.bx-out{fill:var(--box-out)}.bx-line{fill:var(--box-line)}.bx-warn{fill:var(--box-warn)}
.bt{fill:var(--ink);font-size:13px;font-weight:600}
.bs{fill:var(--ink);font-size:11.5px}
.bs-strong{font-weight:600}
.tick{fill:var(--muted);font-size:10.5px}
.ar,.ah,.ln,.axis{fill:none;stroke:var(--muted);stroke-width:1.3}
.ah{stroke-linejoin:round;stroke-linecap:round}
.ln{stroke:var(--stroke)}
.axis{stroke:var(--stroke)}
.s1-line{fill:none;stroke:var(--s1);stroke-width:2}
.s2-line{fill:none;stroke:var(--s2);stroke-width:2}
.s1-pt{fill:var(--s1)}
.s2-pt{fill:var(--s2);stroke:var(--card);stroke-width:2}
.shade{fill:var(--s2);opacity:.14}
.warn-line{stroke:var(--s2);stroke-width:2;stroke-dasharray:4 3}
.dot-a{fill:var(--s1)}.dot-b{fill:var(--s3)}.dot-c{fill:var(--s2)}
.band-a{fill:var(--s2);opacity:.75}.band-b{fill:var(--s3);opacity:.75}.band-c{fill:var(--s1);opacity:.85}
.core-w{fill:var(--core)}.core-main{fill:var(--core-main)}
.bar-fill{fill:var(--s1)}
.bar:hover .bar-fill{fill:var(--accent-ink)}
.chip-met{fill:var(--met)}.chip-miss{fill:var(--miss)}.chip-pend{fill:var(--read)}
.ghost{fill:var(--ghost)}
.tl-done{fill:var(--s1)}.tl-wait{fill:var(--ghost)}
.knob{fill:var(--card);stroke:var(--s1);stroke-width:2.5}
.play{fill:var(--s1)}
.sh-wait{fill:var(--sh-wait)}.sh-run{fill:var(--sh-run)}.sh-done{fill:var(--sh-done)}.sh-skip{fill:var(--sh-skip)}
.ch-box{fill:var(--box-in);stroke:var(--stroke)}
.ch-box.on{fill:var(--s1);stroke:var(--s1)}
.ch-num{fill:var(--ink);font-size:12px;font-weight:600}
.ch-num.on{fill:var(--card)}
.ch-lab{fill:var(--muted);font-size:10px}
/* controls */
.ctl{margin-top:12px;font-size:14px}
.ctl label{display:block;margin:4px 0}
.ctl label.chk{display:inline-flex;gap:6px;align-items:center}
.ctl input[type=range]{width:100%;accent-color:var(--s1)}
.ctl output{font-variant-numeric:tabular-nums;font-weight:600}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btns .readout{flex-basis:100%}
button{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:5px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.readout{margin:8px 0 0;color:var(--muted);font-variant-numeric:tabular-nums}
.mini{border-collapse:collapse;margin-top:8px;font-size:13px;font-variant-numeric:tabular-nums;width:100%}
.mini th,.mini td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:right}
.mini th:first-child{text-align:left}
/* verdict board */
.board{display:grid;gap:10px}
.bcard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg)}
.vlist{list-style:none;margin:0;padding:0}
.v{margin:0 0 6px;font-size:14px;padding-left:0}
.vi{display:inline-block;width:1.2em;font-weight:700}
.vw{display:inline-block;min-width:4.6em;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.v-met .vi,.v-met .vw{color:var(--met)}
.v-miss .vi,.v-miss .vw{color:var(--miss)}
.v-read .vi,.v-read .vw{color:var(--read)}
.v-pend .vi,.v-pend .vw{color:var(--pend)}
.gl{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:6px 14px;margin:0}
.gl dt{font-weight:600}
.gl dd{margin:0;color:var(--ink)}
.gfoot{margin-top:36px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
@media (max-width:520px){
  h1{font-size:24px}
  .gl{grid-template-columns:1fr;gap:2px}
  .gl dd{margin-bottom:8px}
  .fig{padding:10px}
}