/* Styles for chronology-explainer.html (the animated chronology walk).
   Kept apart from styles.css: the explainer is a self-contained player. */
/* Layout: one 16:9 stage that plays 17 short scenes in order, a one-line caption under it,
   a chapter rail to jump around, then the test numbers as a still table. */
:root{
  --bg:#f2f4f8; --surface:#ffffff; --stage:#e6eaf2; --fg:#131a2b; --fg-2:#465069; --fg-3:#8791a6; --line:#ccd3e0;
  --accent:#2747b5; --accent-bg:#e2e8fb;
  --ok:#14774a; --ok-bg:#dbf1e5; --no:#b3261e; --no-bg:#fbe3e0; --warn:#855600; --warn-bg:#fdecc6;
  --paper:#fffefa; --paper-ink:#1d2230; --paper-line:#c8ccd6; --paper-edge:#bfc6d3; --paper-no:#b3261e; --paper-warn:#b97800;
  --stamp:#2747b5; --match:#f3d35f; --prov-a:#2747b5; --prov-b:#0f7b7b; --prov-c:#8b3f8f;
  --shadow:0 .25em .9em rgba(25,35,60,.14);
  --display:"Space Grotesk","Inter",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; --hand:"Caveat","Bradley Hand",cursive;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e131e; --surface:#161d2c; --stage:#1b2335; --fg:#e9edf6; --fg-2:#aab4c8; --fg-3:#6f7a92; --line:#2f3b54;
  --accent:#8ea6ff; --accent-bg:#22305a;
  --ok:#5fd39a; --ok-bg:#123526; --no:#ff8f85; --no-bg:#45191a; --warn:#f2c14e; --warn-bg:#43330d;
  --paper:#ebe8de; --paper-ink:#1d2230; --paper-line:#b4b7bf; --paper-edge:#0b0f18; --paper-no:#b3261e; --paper-warn:#b97800;
  --stamp:#2747b5; --match:#e6c444; --prov-a:#2747b5; --prov-b:#0f7b7b; --prov-c:#8b3f8f;
  --shadow:0 .25em .9em rgba(0,0,0,.45); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0e131e; --surface:#161d2c; --stage:#1b2335; --fg:#e9edf6; --fg-2:#aab4c8; --fg-3:#6f7a92; --line:#2f3b54;
  --accent:#8ea6ff; --accent-bg:#22305a;
  --ok:#5fd39a; --ok-bg:#123526; --no:#ff8f85; --no-bg:#45191a; --warn:#f2c14e; --warn-bg:#43330d;
  --paper:#ebe8de; --paper-ink:#1d2230; --paper-line:#b4b7bf; --paper-edge:#0b0f18; --paper-no:#b3261e; --paper-warn:#b97800;
  --stamp:#2747b5; --match:#e6c444; --prov-a:#2747b5; --prov-b:#0f7b7b; --prov-c:#8b3f8f;
  --shadow:0 .25em .9em rgba(0,0,0,.45); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5}
.wrap{max-width:1180px;margin:0 auto;padding-block:28px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.top{display:flex;flex-direction:column;gap:6px}
.eyebrow{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
h1{font:700 clamp(24px,3.4vw,38px)/1.12 var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}

/* ---------- player ---------- */
.player{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* The stage is at most 60% of the window's height, so the caption and the
   controls stay on screen on a short laptop. Inside the chronology page's
   frame the window is not visible from here, so that page passes the height in. */
.stage-band{background:var(--stage)}
.stage-box{container-type:inline-size;max-width:calc(var(--stage-max-height,60vh)*16/9);margin-inline:auto}
.stage{position:relative;aspect-ratio:16/9;font-size:1.6cqw;overflow:hidden}
.scene{position:absolute;inset:0;display:none}
.scene.on{display:block}
.mid{position:absolute;inset:1.4em 2em 5.2em;display:flex;align-items:center;justify-content:center;gap:2.6em}
.foot{position:absolute;left:2em;right:2em;bottom:1.5em;text-align:center;font:600 1.3em/1.3 var(--body);color:var(--fg-2)}
.col{display:flex;flex-direction:column;gap:1em;align-items:center}
.lbl{font:600 .95em var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}

/* animation: every element's own style is its end state; keyframes only describe where it starts */
.scene.on .a{animation:rise var(--t,.6s) cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.scene.on .a.fade{animation-name:fade}
.scene.on .a.pop{animation-name:pop}
.scene.on .a.stampin{animation-name:stampin;--t:.35s}
.scene.on .a.fromL{animation-name:fromL}
.scene.on .a.fromR{animation-name:fromR}
.scene.on .a.fly{animation-name:fly;--t:1.1s}
.scene.on .a.gone{animation-name:gone;--t:.25s}
.scene.on .a.un{animation-name:un;--t:.4s}
.scene.on .a.lnhl{animation-name:lnhl;--t:.3s}
.scene.on .a.grow{animation-name:grow;--t:2.2s;animation-timing-function:linear}
.scene.on .a.reveal{animation-name:reveal;--t:2.6s;animation-timing-function:linear}
.scene.on .a.scan{animation-name:scan;--t:2.6s;animation-timing-function:linear}
.scene.on .a.shake{animation-name:shake;--t:.5s}
.scene.on .a.unstrike{animation-name:unstrike;--t:.5s}
.scene.on .a.press{animation-name:press;--t:.5s}
@keyframes rise{from{opacity:0;transform:translateY(1.2em)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.55)}}
@keyframes stampin{from{opacity:0;transform:scale(2.6) rotate(-9deg)}}
@keyframes fromL{from{opacity:0;transform:translateX(-7em)}}
@keyframes fromR{from{opacity:0;transform:translateX(7em)}}
@keyframes fly{from{transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg))}}
@keyframes gone{from{opacity:1}}
@keyframes un{from{outline-color:transparent;background-color:transparent;border-color:transparent}}
@keyframes lnhl{from{background-color:var(--paper-line)}}
@keyframes grow{from{width:0}}
@keyframes reveal{from{clip-path:inset(0 0 100% 0)}}
@keyframes scan{from{top:0;opacity:1}99%{opacity:1}to{top:100%;opacity:0}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-.5em)}40%{transform:translateX(.5em)}60%{transform:translateX(-.3em)}80%{transform:translateX(.3em)}}
@keyframes unstrike{from{opacity:1;text-decoration-color:transparent}}
@keyframes press{0%{transform:none}40%{transform:scale(.92)}100%{transform:none}}
.stage.paused *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){ .scene.on .a{animation:none !important} }

/* scenes with room to spare are drawn larger */
.scene:nth-of-type(2) .mid,.scene:nth-of-type(4) .mid,.scene:nth-of-type(5) .mid,.scene:nth-of-type(11) .mid,.scene:nth-of-type(14) .mid{font-size:1.2em}
.scene:nth-of-type(3) .mid,.scene:nth-of-type(7) .mid,.scene:nth-of-type(13) .mid{font-size:1.08em}
.scene:nth-of-type(8) .mid,.scene:nth-of-type(9) .mid,.scene:nth-of-type(10) .mid,.scene:nth-of-type(16) .mid{font-size:1.15em}
/* paper pages */
.pg{width:var(--w,9em);aspect-ratio:17/22;background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-edge);border-radius:.15em;box-shadow:var(--shadow);padding:.8em .8em 1.5em;position:relative;display:flex;flex-direction:column;gap:.42em;flex:none;overflow:hidden}
.pg .h{font:700 .68em/1.2 Georgia,"Times New Roman",serif;text-align:center;border-bottom:1px solid var(--paper-ink);padding-bottom:.35em;margin-bottom:.2em}
.pg[data-p]{border-top:.4em solid var(--pc)}
.pg[data-p="a"]{--pc:var(--prov-a)} .pg[data-p="b"]{--pc:var(--prov-b)} .pg[data-p="c"]{--pc:var(--prov-c)}
.ln{display:block;height:.28em;border-radius:1em;background:var(--paper-line);width:var(--lw,100%);flex:none}
.ln.hl{background:var(--match)}
.r{font:400 .7em/1.3 Georgia,"Times New Roman",serif;display:flex;gap:.6em}
.r b{flex:none;width:6.2em}
.r.s{font-size:.6em}
.bates{position:absolute;right:.6em;bottom:.45em;font:600 .62em var(--mono);color:var(--stamp);letter-spacing:.02em}
.synth{position:absolute;left:.8em;bottom:.6em;font:600 .38em var(--body);letter-spacing:.06em;color:var(--paper-ink);opacity:.7}
.ring{outline:.16em solid var(--paper-no);outline-offset:.14em;border-radius:.15em;background:rgba(179,38,30,.1)}
.hit{background:var(--match);border-radius:.15em;outline:.14em solid var(--match)}

/* pills, chips, cards */
.pill{display:inline-block;font:600 .8em/1 var(--body);padding:.38em .6em;border-radius:.4em;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.no{background:var(--no-bg);color:var(--no)}
.pill.wait{background:var(--warn-bg);color:var(--warn)} .pill.info{background:var(--accent-bg);color:var(--accent)}
.chip{display:inline-block;font:600 .72em/1 var(--mono);padding:.32em .45em;border:1px solid var(--line);border-radius:.3em;background:var(--surface);color:var(--fg)}
.chip.bad{border-color:var(--no);color:var(--no);background:var(--no-bg)}
.en{background:var(--surface);border:1px solid var(--line);border-radius:.6em;padding:1em 1.1em;width:var(--w,21em);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.45em;position:relative;flex:none}
.en .dt{font:600 .9em var(--mono);color:var(--fg-2);display:flex;justify-content:space-between;align-items:center;gap:.5em}
.en .pv{font:700 1.2em/1.2 var(--display)}
.en .f{border-left:.2em solid var(--line);padding-left:.65em;font-size:.92em;line-height:1.35}
.en .f.miss{border:.12em dashed var(--no);border-radius:.3em;color:var(--no);padding:.3em .65em;font-weight:600;background:var(--no-bg)}
.en .cites{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.2em}
.why{background:var(--no-bg);color:var(--no);border:1px solid var(--no);border-radius:.5em;padding:.7em .9em;font:600 1em/1.3 var(--body);width:var(--w,21em)}
.verdict{position:absolute;right:-.8em;top:-.9em;font:700 1.05em var(--mono);letter-spacing:.1em;padding:.3em .6em;border:.16em solid;border-radius:.3em;transform:rotate(6deg);background:var(--surface)}
.verdict.no{color:var(--no)} .verdict.ok{color:var(--ok)}
.arrow{width:var(--aw,3.6em);height:.2em;background:var(--fg-3);position:relative;flex:none;border-radius:1em}
.arrow::after{content:"";position:absolute;right:-.15em;top:50%;border:.45em solid transparent;border-left:.7em solid var(--fg-3);border-right:0;transform:translateY(-50%)}
.tag{font:600 .9em/1.25 var(--body);color:var(--fg-2);text-align:center}
.big{font:700 3.6em/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* scene 0 intake */
.file{display:flex;align-items:center;gap:.7em;background:var(--surface);border:1px solid var(--line);border-radius:.5em;padding:.7em 1em;width:14em;font:600 1em var(--body);box-shadow:var(--shadow)}
.ext{font:600 .7em var(--mono);background:var(--no-bg);color:var(--no);padding:.3em .4em;border-radius:.25em}
.gate{display:flex;flex-direction:column;align-items:center;gap:.4em;border:.16em solid var(--ok);background:var(--ok-bg);color:var(--ok);border-radius:.8em;padding:1.2em 1.3em;text-align:center;width:12.5em}
.gate b{font:700 1.15em/1.2 var(--display)} .gate small{font:500 .85em var(--body)}
.tick{width:2.2em;height:2.2em;border-radius:50%;background:var(--ok);color:var(--surface);display:grid;place-items:center;font:700 1.3em var(--body)}
.folder{background:var(--surface);border:1px solid var(--line);border-top:.5em solid var(--accent);border-radius:.6em;padding:1.1em 1.4em;text-align:center;width:14.5em;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.2em}
.folder b{font:600 .9em var(--mono);color:var(--fg-2)} .folder small{font:500 .95em var(--body);color:var(--fg-2)}

/* scene 1 ocr */
.scanwrap{position:relative}
.scanline{position:absolute;left:-.6em;right:-.6em;top:100%;height:.22em;background:var(--accent);box-shadow:0 0 1.2em .3em var(--accent);opacity:0;border-radius:1em}
.thumbrow{display:flex;align-items:center;gap:1.1em}
.thumbrow .pg{--w:5.6em;padding:.5em .5em 1em;gap:.34em}
.thumbrow .txt{display:flex;flex-direction:column;gap:.35em;align-items:flex-start}
.thumbrow .txt span{font:500 .92em var(--body);color:var(--fg-2)}
.blur .ln{filter:blur(.14em)}
.hw{font:600 .85em/1.05 var(--hand);color:var(--paper-ink);transform:rotate(-3deg)}

/* scene 2 bates */
.s-bates .pg{--w:7.6em} .s-bates .bates{font-size:.8em}
.ledger{width:44em;display:flex;flex-direction:column;gap:.5em}
.bar{height:1em;border-radius:1em;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--accent)}
.ledger div.t{display:flex;justify-content:space-between;font:600 1.05em var(--body)}
.ledger .t span{font-family:var(--mono);color:var(--accent)}

/* scene 3 split */
.groups{display:flex;gap:3em;align-items:flex-end;margin-top:9em}
.grp{display:flex;flex-direction:column;align-items:center;gap:.9em}
.grp .pgs{display:flex}
.grp .pg{--w:7em;margin-left:-3.2em} .grp .pg:first-child{margin-left:0}
.grp .name{font:700 1.05em/1.2 var(--display);text-align:center}
.grp .date{font:600 .85em var(--mono);color:var(--fg-2)}

/* scene 4 duplicates */
.meter{display:flex;flex-direction:column;align-items:center;gap:.3em}
.meter .big{color:var(--accent)}

/* scene 5 model */
.plabel{position:absolute;right:.4em;bottom:.4em;font:600 .7em var(--mono);background:var(--paper-ink);color:var(--paper);padding:.2em .45em;border-radius:.25em}
.stack{position:relative;width:13em;height:14em}
.stack .pg{position:absolute;--w:8.6em}
.model{width:8.5em;height:8.5em;border-radius:50%;border:.2em dashed var(--accent);display:grid;place-items:center;font:700 1.25em var(--display);color:var(--accent);background:var(--accent-bg);flex:none}
.drafts{display:flex;flex-direction:column;gap:.6em}
.drafts .en{--w:20em;padding:.65em .9em;gap:.2em} .drafts .pv{font-size:1em} .drafts .f{font-size:.8em}
.notes{position:absolute;left:2em;right:2em;bottom:1.3em;display:flex;gap:.8em;justify-content:center;flex-wrap:wrap}
.notes .pill{font-size:1em}

/* scene 6 checker */
.rules{background:var(--surface);border:.16em solid var(--fg);border-radius:.8em;padding:1.2em 1.4em;width:25em;display:flex;flex-direction:column;gap:.75em}
.rules h3{font:700 1.35em/1.1 var(--display);margin:0 0 .1em} .rules h3 small{display:block;font:600 .55em var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);margin-top:.4em}
.rule{display:flex;gap:.6em;align-items:baseline;font:500 1em/1.3 var(--body)}
.rule::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-.05em)}
.q{display:flex;flex-direction:column;gap:.6em}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:1em;background:var(--surface);border:1px solid var(--line);border-radius:.5em;padding:.65em .9em;width:23em;font:600 .95em var(--body)}
.qrow span.d{font:600 .85em var(--mono);color:var(--fg-2);margin-right:.6em}

/* duels */
.duel .pg{--w:11.6em}
.duel .pgs{display:flex;gap:1.2em;align-items:flex-start}
.ocr{background:var(--surface);border:1px solid var(--line);border-radius:.5em;padding:.7em .9em;font:600 .95em var(--mono);width:19em}
.ocr small{display:block;font:600 .75em var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);margin-bottom:.3em}
.ocr mark{background:var(--no-bg);color:var(--no);outline:.12em solid var(--no);border-radius:.15em;padding:0 .1em}

/* scene 11 review window */
.win{width:57em;height:26.5em;background:var(--surface);border:1px solid var(--line);border-radius:.7em;box-shadow:var(--shadow);display:grid;grid-template-columns:15em 21em 1fr;overflow:hidden}
.win>div{padding:1em;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.55em;min-width:0}
.win>div:last-child{border:0;background:var(--stage);align-items:center;justify-content:center}
.li{display:flex;flex-direction:column;gap:.15em;padding:.5em .6em;border-radius:.4em;font:600 .82em var(--body)}
.li.cur{background:var(--accent-bg)}
.li .top2{display:flex;justify-content:space-between;align-items:center;font:600 .92em var(--mono);color:var(--fg-2)}
.li .pill{font-size:.78em}
.swap{position:relative;display:inline-grid} .swap>*{grid-area:1/1;justify-self:end}
.gone{opacity:0}
.btns{display:flex;gap:.6em;margin-top:.4em}
.btn{font:600 .95em var(--body);padding:.5em .9em;border-radius:.4em;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.d-h{font:700 1.25em/1.2 var(--display)} .d-s{font:500 .9em var(--body);color:var(--fg-2)}
.fl{border-left:.2em solid var(--line);padding:.1em .6em;font-size:.95em}
.fl.on1{border-color:var(--match);background:color-mix(in srgb,var(--match) 28%,transparent)}

/* scene 12 missed */
.banner{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);border-radius:.5em;padding:.8em 1em;font:600 1.1em/1.3 var(--body);width:24em}
.flagged{display:flex;gap:.8em}
.flagged .pg{--w:6.6em;outline:.2em solid var(--paper-warn);outline-offset:.2em}

/* scene 13 bills */
.money{font:700 1.5em var(--display);font-variant-numeric:tabular-nums}
.billrow{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.5em;margin-top:.3em;font:600 .95em var(--body);color:var(--fg-2)}
.link{display:flex;flex-direction:column;align-items:center;gap:.5em}

/* scene 14 deliver */
.check{display:flex;flex-direction:column;gap:.7em;width:25em}
.ck{display:flex;align-items:center;gap:.7em;background:var(--surface);border:1px solid var(--line);border-radius:.5em;padding:.65em .9em;font:600 1em/1.25 var(--body)}
.ck .tick{width:1.5em;height:1.5em;font-size:.95em;flex:none}
.hdr{background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-edge);border-radius:.3em;padding:.6em .9em;font:400 .85em/1.5 Georgia,serif;box-shadow:var(--shadow)}
.hdr b{display:inline-block;width:7.5em}
.out{display:flex;flex-direction:column;gap:.6em}
.outf{display:flex;align-items:center;justify-content:space-between;gap:1em;background:var(--surface);border:1px solid var(--line);border-radius:.5em;padding:.65em .9em;width:23em;font:600 1em var(--body)}
.outf.rec{border:.14em solid var(--stamp)}
.outf .ext{background:var(--accent-bg);color:var(--accent)}
.outf>span:first-child{display:flex;align-items:center;gap:.6em}

/* scene 15 purge */
.day{display:flex;flex-direction:column;align-items:center;gap:.2em;width:11em;height:11em;border-radius:50%;border:.3em solid var(--accent);justify-content:center;flex:none}
.day .big{font-size:4em;color:var(--accent)} .day small{font:600 .85em var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2)}
.lists{display:flex;gap:1.6em}
.list{width:17em;display:flex;flex-direction:column;gap:.45em}
.list h3{font:600 .85em var(--mono);letter-spacing:.07em;text-transform:uppercase;margin:0 0 .2em}
.list.del h3{color:var(--no)} .list.keep h3{color:var(--ok)}
.it{background:var(--surface);border:1px solid var(--line);border-radius:.4em;padding:.5em .8em;font:600 .95em var(--body)}
.del .it{text-decoration:line-through;text-decoration-color:var(--no);text-decoration-thickness:.14em;opacity:.42}
.keep .it{border-color:var(--ok)} .keep .it small{display:block;font:500 .82em var(--body);color:var(--fg-2)}
.keep .it b{font-family:var(--mono);font-weight:600}

/* scene 16 proof */
.proofgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;width:56em}
.pf{background:var(--surface);border:1px solid var(--line);border-radius:.7em;padding:1em 1.2em;display:flex;flex-direction:column;gap:.3em}
.pf .n{font:700 2.5em/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ok)}
.pf .n i{font-style:normal;color:var(--fg-3);font-size:.62em}
.pf span{font:600 1em/1.25 var(--body)} .pf small{font:500 .82em/1.3 var(--body);color:var(--fg-2)}
.pf.wide{grid-column:span 2}

/* ---------- caption, rail, controls ---------- */
.cap{display:flex;gap:16px;align-items:flex-start;padding:18px 20px 6px;min-height:104px}
.cap .num{font:600 13px var(--mono);color:var(--accent);background:var(--accent-bg);padding:5px 8px;border-radius:6px;flex:none;margin-top:4px;font-variant-numeric:tabular-nums}
.cap h2{font:700 clamp(19px,2.4vw,26px)/1.18 var(--display);margin:0;text-wrap:balance}
.cap p{margin:5px 0 0;color:var(--fg-2);font-size:15px;max-width:70ch}
.cap>div{min-width:0}
.ctlrow{display:flex;gap:14px;align-items:flex-end;padding:8px 20px 18px}
.ctl{display:flex;gap:6px;flex:none}
.ctl button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.ctl button:hover{background:var(--accent-bg)}
/* The site's navy, not the explainer's brighter blue. */
.ctl #play{background:#27407f;border-color:#27407f;color:#fff}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctl svg{width:18px;height:18px;fill:currentColor}
.rail{display:flex;gap:10px;flex:1;min-width:0}
.ph{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0}
.ph span{font:600 11px/1.25 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.segs{display:flex;gap:4px}
.seg{flex:1;height:24px;min-width:24px;padding:9px 0;background:none;border:0;cursor:pointer}
.seg i{display:block;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.seg i b{display:block;height:100%;width:0;background:var(--accent)}
.seg:hover i{background:var(--fg-3)}
@media (max-width:640px){ .ph span{font-size:9px;letter-spacing:0} .ctlrow{flex-direction:column;align-items:stretch} .ctl{justify-content:center} .cap{min-height:150px} }

/* ---------- still results ---------- */
.still{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
@media (max-width:820px){ .still{grid-template-columns:1fr} }
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}
.panel h2{font:700 19px var(--display);margin:0 0 4px} .panel>p{margin:0 0 12px;color:var(--fg-2);font-size:14px}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
td{padding:9px 6px;border-top:1px solid var(--line);vertical-align:top}
td.n{font:600 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:var(--ok)}
.panel ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14.5px}

/* ---------- as hosted on the MoonView site ---------- */
/* The site's own typefaces and paper colour, so the explainer reads as part of it. */
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{
  --bg:oklch(0.975 0.004 85);
  --display:"Source Serif 4",Charter,Georgia,serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --hand:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
}
body{margin:0}
/* Inside the chronology page's frame only the player shows; the heading and
   the tables are on the page around it. */
.embedded body{background:var(--surface)}
.embedded .wrap{max-width:none;padding:0;gap:0}
.embedded .top,.embedded .still{display:none}
.embedded .player{border:0;border-radius:0}
.eyebrow a{color:inherit}

/* ---------- the steps in words ---------- */
/* Shown when there is no script, and under 40rem where the animated scenes
   would be too small to read. The script marks the page "has-player". */
[hidden]{display:none !important}
.steps-in-words{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.steps-in-words h2{font:700 19px var(--display);margin:0 0 6px}
.steps-in-words ol{margin:0;padding:0;list-style:none;counter-reset:step}
.steps-in-words li{counter-increment:step;position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line)}
.steps-in-words li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:16px;font:600 13px var(--mono);color:#27407f;background:var(--accent-bg);padding:3px 7px;border-radius:6px}
.step-chapter{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.steps-in-words h3{font:700 18px/1.25 var(--display);margin:2px 0 0}
.steps-in-words p{margin:4px 0 0;color:var(--fg-2);font-size:15px;max-width:70ch}
.has-player .steps-in-words{display:none}
@media (max-width:40rem){
  .has-player .player{display:none}
  .has-player .steps-in-words{display:block}
}
.embedded .steps-in-words{border:0;border-radius:0}