/* Layout: one repo across two sittings. Evening (dark terminal, lamp light) on the left,
   next morning (light terminal, daylight) on the right, the night between them as a seam
   where the visitor changes the file. Page ground is a warm grey log printout.
   System font stacks only: the live site's CSP blocks external fonts. */
:root{
  --paper:#E4E2DD; --paper-2:#D8D5CE; --ink:#1E1B19; --ink-2:#4A4541; --rule:#A9A39A;
  --dusk:#25202A; --dusk-2:#332C39; --dusk-ink:#EDE6DA; --dusk-dim:#B9AFA3; --lamp:#F2B44F;
  --dawn:#F8F7F2; --dawn-2:#ECEAE2; --dawn-ink:#1C2722; --dawn-dim:#4F5A54; --sky:#25607E;
  --pass:#21633C; --fail:#A3301D; --unres:#835500;
  --pass-d:#1D5C37; --fail-d:#9C2C1A; --unres-d:#7A5000;
  --pass-t:#86D7A1; --fail-t:#FF9580; --unres-t:#F2C566;
  --focus:#C2410C;
  --f-display:"Avenir Next","Segoe UI Variable Display","Segoe UI","Helvetica Neue",ui-sans-serif,system-ui,sans-serif;
  --f-body:Charter,"Bitstream Charter","Sitka Text",Cambria,"DejaVu Serif",Georgia,serif;
  --f-code:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#26232A; --paper-2:#302C34; --ink:#ECE6DC; --ink-2:#BBB2A7; --rule:#57505A;
  --dusk:#0E0C10; --dusk-2:#1C1820; --dusk-ink:#EDE6DA; --dusk-dim:#B4AA9E; --lamp:#F2B44F;
  --dawn:#E7E4D9; --dawn-2:#D9D5C8; --dawn-ink:#18221D; --dawn-dim:#46514B; --sky:#1F5470;
  --pass:#86D7A1; --fail:#FF9580; --unres:#F2C566; --focus:#FFA65C; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#26232A; --paper-2:#302C34; --ink:#ECE6DC; --ink-2:#BBB2A7; --rule:#57505A;
  --dusk:#0E0C10; --dusk-2:#1C1820; --dusk-ink:#EDE6DA; --dusk-dim:#B4AA9E; --lamp:#F2B44F;
  --dawn:#E7E4D9; --dawn-2:#D9D5C8; --dawn-ink:#18221D; --dawn-dim:#46514B; --sky:#1F5470;
  --pass:#86D7A1; --fail:#FF9580; --unres:#F2C566; --focus:#FFA65C; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));}
.wrap{max-width:1180px;margin:0 auto}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;line-height:1.04}
h2{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:750;line-height:1.15}
h3{font-size:1.05rem;font-weight:700}
p{margin:0;max-width:65ch}
code,.mono{font-family:var(--f-code);font-size:.88em}
button{font:600 .85rem/1.2 var(--f-code);cursor:pointer;border-radius:3px;padding:.55rem .8rem;min-height:40px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--paper);padding:.5rem;z-index:5}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;padding-block:14px;border-bottom:1px solid var(--rule);font-family:var(--f-display)}
.brand{font-weight:800;font-size:1.05rem;text-decoration:none;white-space:nowrap;display:flex;gap:.55rem;align-items:center}
.brand i{display:inline-grid;grid-template-columns:1fr 1fr;width:22px;height:14px;border:1.5px solid currentColor;border-radius:2px;overflow:hidden}
.brand i::before{content:"";background:var(--dusk)}.brand i::after{content:"";background:var(--lamp)}
.top nav{display:flex;gap:.4rem 1.1rem;flex-wrap:wrap;font-size:.95rem}
.top nav .s{display:none}
.top nav a{text-decoration:none}.top nav a:hover{text-decoration:underline}

/* hero */
.top-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);column-gap:36px;align-items:center;padding-block:56px 24px}
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-content:center;min-width:0}
.hero .sub{font:600 clamp(1.05rem,1.6vw,1.3rem)/1.4 var(--f-display);color:var(--ink-2)}
.install{display:flex;align-items:stretch;flex-wrap:wrap;border:1px solid var(--rule);background:var(--dusk);color:var(--dusk-ink);border-radius:3px;max-width:100%}
.install .il{font:700 .78rem/1 var(--f-display);background:var(--lamp);color:var(--dusk);padding:.55rem .6rem;display:flex;align-items:center;white-space:nowrap}
.install code{flex:1 1 16rem;min-width:0;padding:.7rem .7rem;font-size:.8rem;line-height:1.45;white-space:nowrap;overflow-x:auto;scrollbar-width:thin;align-self:center;user-select:all}
.install button{background:var(--dusk-2);color:var(--dusk-ink);border:0;border-left:1px solid var(--dusk-dim);border-radius:0}
.status{font-family:var(--f-code);font-size:.8rem;color:var(--ink-2)}
.vwrap{display:grid;border:1px solid var(--rule)}
.vwrap video{border:0!important}
.stepbar{display:flex;align-items:center;gap:.7rem;background:var(--dawn);color:var(--dawn-ink);padding:.5rem .7rem;min-height:3rem}
.vcap{margin:0;flex:1;font:700 clamp(.95rem,1.4vw,1.1rem)/1.3 var(--f-display)}
.dots{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.dots li{width:8px;height:8px;border-radius:50%;background:var(--rule)}
.dots li.on{background:var(--sky)}
.stepbar .loop-btn{margin:0;background:var(--dawn-2);color:var(--dawn-ink);border:1px solid var(--rule)}
.keyline{display:none;margin:0;background:var(--dusk);color:var(--dusk-ink);font:600 .9rem/1.45 var(--f-code);padding:.55rem .7rem;border-top:1px solid var(--dusk-dim);white-space:pre-wrap;overflow-wrap:anywhere;min-height:3.2rem}
.keyline .ok{color:var(--lamp)}
.rec .keyline{border:1px solid var(--rule)}
.qcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.qcard{background:var(--dawn);color:var(--dawn-ink);border:1px solid var(--rule);padding:.9rem 1rem;min-width:0}
.qcard h3{font:800 1.1rem/1.2 var(--f-display);margin:0 0 .5rem}
.qcard ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.9rem;line-height:1.45}
.qcard li{position:relative;padding-left:1.7rem;overflow-wrap:anywhere}
.qcard li::before{content:"✓";position:absolute;left:0;top:.05rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--sky);color:#fff;font:800 .75rem/1.2rem var(--f-display);text-align:center}
.qcard small{display:block;font:600 .74rem/1.3 var(--f-code);color:var(--dawn-dim)}
.qcard a{color:inherit}
.flow{margin:0 0 28px}
.flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:28px}
.flow li{position:relative;border:1px solid var(--rule);padding:.8rem .9rem;display:grid;gap:.25rem;align-content:start;font-size:.9rem;min-width:0}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-1.35rem;top:42%;font:700 1.1rem/1 var(--f-display);color:var(--ink-2)}
.flow .f-save{background:var(--dusk);color:var(--dusk-ink)}
.flow .f-gap{background:var(--paper-2);border-style:dashed}
.flow .f-load{background:var(--dawn);color:var(--dawn-ink)}
.flow .t{font:600 .78rem/1.3 var(--f-code);opacity:.8}
.flow b{font:800 1.15rem/1.2 var(--f-display)}
.flow code{font-size:.8rem;overflow-wrap:anywhere}
.flow .same{font:700 .78rem/1.3 var(--f-code);color:var(--sky)}
.tbar{display:flex;margin-top:14px;font:600 .74rem/1.2 var(--f-code)}
.tbar span{height:16px;min-width:3px}
.tleg{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.45rem 0 0;font:600 .76rem/1.3 var(--f-code);color:var(--ink-2)}
.tleg i{display:inline-block;width:12px;height:12px;margin-right:.35rem;vertical-align:-1px}
.tbar .up1,.tleg .up1{flex:2.3;background:var(--dusk);color:var(--dusk-ink)}
.tbar .down,.tleg .down{flex:11;background:repeating-linear-gradient(135deg,var(--paper-2) 0 6px,transparent 6px 12px);border:1px dashed var(--rule)}
.tbar .up2,.tleg .up2{flex:.7;background:var(--sky);color:var(--dusk)}
.flow figcaption{margin-top:.5rem;font-size:.84rem;color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.try{padding-block:40px 8px}
.tokens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tokens li{background:var(--dawn);color:var(--dawn-ink);border:1px solid var(--rule);padding:.8rem;display:grid;gap:.3rem;align-content:start;font-size:.9rem}
.tokens b{font:800 1rem/1.2 var(--f-display)}
.tokens code{word-break:break-all}
.proof{padding-block:28px 0}
.claimresp{margin:0}
.heroloop{margin:0;display:grid;gap:.4rem;min-width:0;align-self:center}
.heroloop video{width:100%;max-width:100%;height:auto;aspect-ratio:1012/320;background:var(--dusk);display:block;border:1px solid var(--rule)}
.heroloop figcaption{font-size:.84rem;color:var(--ink-2);line-height:1.45}
.ctas{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.2rem}
.cta{background:var(--ink);color:var(--paper);text-decoration:none;font:700 .95rem/1.2 var(--f-display);padding:.75rem 1rem;border-radius:3px}
.cta2{color:var(--ink);font:600 .95rem/1.2 var(--f-display);padding:.7rem .9rem;border:1px solid var(--rule);border-radius:3px;text-decoration:none}
.changed{margin:.6rem .8rem 0;padding:.45rem .6rem;background:var(--dawn-2);font:400 .74rem/1.45 var(--f-code);word-break:break-word}
.changed b{font-weight:600}
.changed del{color:var(--fail-d)}.changed ins{color:var(--pass-d);text-decoration:none}
.hero p{color:var(--ink-2)}
.hero .sample{font-size:.9rem}
.bench{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.5fr) minmax(0,1fr);margin-top:14px;border:1px solid var(--rule)}
.pane{min-width:0;display:flex;flex-direction:column}
.pane-head{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:.55rem .8rem;font-family:var(--f-code);font-size:.78rem}
.eve{background:var(--dusk);color:var(--dusk-ink)}
.eve .pane-head{background:var(--dusk-2);color:var(--dusk-dim)}
.eve .pane-head b{color:var(--lamp);font-weight:600}
.morn{background:var(--dawn);color:var(--dawn-ink)}
.morn .pane-head{background:var(--dawn-2);color:var(--dawn-dim)}
.morn .pane-head b{color:var(--sky);font-weight:600}
textarea{display:block;width:100%;flex:1;min-height:19rem;resize:vertical;border:0;margin:0;padding:.8rem;
  font:400 .78rem/1.55 var(--f-code);background:transparent;color:inherit;white-space:pre-wrap;word-break:break-all}
.eve textarea{caret-color:var(--lamp)}
.eve textarea:focus-visible{outline-offset:-3px}
.file-label{display:block;padding:.6rem .8rem 0;font:400 .78rem/1.4 var(--f-code);color:var(--dusk-dim)}
.file-label .id{word-break:break-all}.nw{white-space:nowrap}
.file-note{padding:.45rem .8rem .7rem;font-size:.8rem;color:var(--dusk-dim);font-family:var(--f-code)}
.night{background:var(--paper-2);padding:.8rem;display:flex;flex-direction:column;gap:.5rem;border-inline:1px solid var(--rule)}
.night-h{font:700 .95rem/1.3 var(--f-display)}
.btngrid{display:grid;gap:.5rem}
.night button{background:var(--paper);color:var(--ink);border:1px solid var(--rule);text-align:left}
.night button{font-family:var(--f-display)}
.night button small{display:block;font:400 .72rem/1.3 var(--f-code);color:var(--ink-2);margin-top:.2rem}
.night button[aria-pressed="true"] small{color:inherit;opacity:.8}
.night button[aria-pressed="true"] small{color:inherit}
.night button:hover{border-color:var(--ink)}
.night button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.night .restore{border-style:dashed}
.night small{font-size:.82rem;color:var(--ink-2);line-height:1.4}
.run{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.8rem .8rem 0}
.run button{background:var(--sky);color:#fff;border:0}
.run span{font-family:var(--f-code);font-size:.74rem;color:var(--dawn-dim)}
.verdict{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;padding:.8rem .8rem 0}
.changed{scroll-margin-top:12px}
.stamp{font:800 1.05rem/1 var(--f-display);letter-spacing:.04em;padding:.3rem .5rem;border:2px solid currentColor;border-radius:2px}
.st-PASS{color:var(--pass)}.st-FAIL{color:var(--fail)}.st-UNRESOLVED{color:var(--unres)}
.morn .st-PASS,.out .st-PASS,.lsres .st-PASS{color:var(--pass-d)}.morn .st-FAIL,.lsres .st-FAIL{color:var(--fail-d)}.morn .st-UNRESOLVED{color:var(--unres-d)}
.why{list-style:none;margin:.3rem .8rem .6rem;padding:0;display:grid;gap:.35rem;font-size:.92rem}
.why code{font-weight:600}
.hashrow{margin:0 .8rem;font:400 .72rem/1.45 var(--f-code);color:var(--dawn-dim);word-break:break-all}
.hashrow b{color:var(--dawn-ink);font-weight:600}
.bad{color:var(--fail-d)}
details.resp{margin:.6rem .8rem .8rem;background:var(--dawn-2);border-radius:2px}
details.resp summary{cursor:pointer;padding:.45rem .7rem;font:600 .78rem/1.3 var(--f-code)}
details.resp pre{margin:0;padding:0 .7rem .6rem;font:400 .76rem/1.5 var(--f-code);white-space:pre-wrap;word-break:break-all;max-height:15rem;overflow:auto}
.selfcheck{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;padding-block:.8rem 0;font-size:.92rem}
.selfcheck button{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.selfcheck code{background:var(--paper-2);padding:.2rem .4rem;border-radius:2px}
.selfcheck .status{font-family:var(--f-code);font-size:.8rem;color:var(--ink-2)}
.selfcheck p{flex-basis:100%;color:var(--ink-2);font-size:.88rem}
.selfcheck{display:block}.selfcheck[open]{display:flex}
.selfcheck summary,.cmpd>summary,.rec-notes summary{cursor:pointer;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule);padding-block:.2rem}
.selfcheck summary{flex-basis:100%}
.cmpd{margin-top:1rem;min-width:0;max-width:100%;overflow:hidden}.cmpd .tbl{max-width:100%}.cmpd[open]>summary{margin-bottom:.7rem}
.rec-notes details p{margin-top:.5rem}

/* sections */
section{padding-block:56px 8px;display:grid;gap:1rem}
.lead{color:var(--ink-2)}
.fineprint{font-size:.86rem;color:var(--ink-2)}

/* notes vs checkpoint */
.overnight{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.note-pane{min-width:0;border:1px solid var(--rule);display:flex;flex-direction:column}
.note-pane .file{background:var(--dusk);color:var(--dusk-ink);font:400 .82rem/1.55 var(--f-code);padding:.8rem;white-space:pre-wrap;word-break:break-word}
.note-pane .file .k{color:var(--lamp)}
.note-pane .file mark{background:var(--fail-t);color:var(--dusk);padding:0 .15rem}
.note-pane .next{background:var(--dawn);color:var(--dawn-ink);padding:.8rem;font-size:.95rem;flex:1;display:grid;gap:.4rem;align-content:start}
.note-pane h3 span{display:block;font:400 .78rem/1.4 var(--f-code);color:var(--ink-2);margin-top:.2rem}
.note-pane header{padding:.6rem .8rem;background:var(--paper-2)}
.next .t{font:600 .78rem/1.3 var(--f-code);color:var(--dawn-dim)}
.lsres code{font-weight:600}
.lsres .stamp{margin-right:.5rem}
.ctl{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.ctl button{background:var(--ink);color:var(--paper);border:0}
.ctl button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.tbl{overflow-x:auto;border:1px solid var(--rule)}
.compare{width:100%;min-width:760px;border-collapse:collapse;font-size:.88rem}
.compare th,.compare td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
.compare thead th{font:700 .85rem/1.3 var(--f-display);background:var(--paper-2)}
.compare tbody th{font:700 .85rem/1.3 var(--f-display);width:9.5rem}
.compare td.ls{background:var(--dawn);color:var(--dawn-ink)}
.compare thead th.ls{background:var(--dawn-2);color:var(--dawn-ink)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.sources{font-size:.82rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.2rem .9rem}

/* recording */
.rec{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.rec figure{margin:0;display:grid;gap:.45rem;min-width:0}
.rec video{width:100%;max-width:100%;height:auto;aspect-ratio:16/9;background:var(--dusk);display:block;border:1px solid var(--rule)}
.rec figcaption{font-size:.88rem;color:var(--ink-2)}
.rec figcaption b{color:var(--ink);font-family:var(--f-display)}
.rec-notes{display:grid;gap:.4rem;font-size:.9rem;color:var(--ink-2);max-width:80ch}
.chapters{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;font:400 .8rem/1.3 var(--f-code)}
.chapters button{min-height:32px;padding:.3rem .5rem;background:var(--paper);color:var(--ink);border:1px solid var(--rule);font-weight:400}
.loop-btn{min-height:32px;padding:.3rem .5rem;background:var(--paper);color:var(--ink);border:1px solid var(--rule);margin-left:.3rem}
.chapters b{font-variant-numeric:tabular-nums;font-weight:600;margin-right:.3rem}

/* claim */
.claim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
fieldset{border:1px solid var(--rule);margin:0;padding:.8rem;display:grid;gap:.5rem}
legend{font:700 .95rem/1.3 var(--f-display);padding:0 .3rem}
.opt{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem}
.opt input{margin-top:.35rem;accent-color:var(--ink)}
.out{background:var(--dawn);color:var(--dawn-ink);border:1px solid var(--rule);font:400 .78rem/1.5 var(--f-code);padding:.8rem;white-space:pre-wrap;word-break:break-all;margin:0}
.out-head{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.4rem;font-size:.9rem}
.free-row{margin-top:.6rem;font-size:.9rem;color:var(--ink-2)}
.free-row code{color:var(--ink)}

/* export */
.exp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;align-items:start}
.exp .eve textarea{min-height:16rem;max-height:24rem}
.exp .eve{border:1px solid var(--rule)}
.btns{display:flex;flex-wrap:wrap;gap:.5rem}
.btns button{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.btns button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font:400 .84rem/1.45 var(--f-code)}
.checks li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);overflow-wrap:anywhere;gap:.5rem}
.checks .y{color:var(--pass);font-weight:600}.checks .n{color:var(--fail);font-weight:600}.checks .q{color:var(--ink-2)}
.demo-tag{display:inline-block;font:600 .75rem/1 var(--f-code);border:1px dashed currentColor;padding:.25rem .4rem;color:var(--unres)}

/* pricing */
.price{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px;align-items:start}
.receipt{background:var(--dawn);color:var(--dawn-ink);font:400 .82rem/1.6 var(--f-code);padding:1.2rem 1.1rem 1.6rem;max-width:460px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.receipt h3{font:800 1.05rem/1.2 var(--f-display);text-align:center;letter-spacing:.06em}
.receipt .c{text-align:center;color:var(--dawn-dim)}
.receipt hr{border:0;border-top:1px dashed var(--dawn-dim);margin:.6rem 0}
.receipt dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .8rem;margin:0}
.receipt dt{min-width:0}.receipt dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.receipt .sub{color:var(--dawn-dim);font-size:.76rem;grid-column:1/-1;margin-top:-.2rem}
.receipt .hash{word-break:break-all;color:var(--dawn-dim);font-size:.74rem}
.receipt .total{font:800 1.15rem/1.3 var(--f-display);display:flex;justify-content:space-between}
.receipt pre{margin:.3rem 0 0;white-space:pre-wrap;word-break:break-all;font:inherit}
.receipt a.buy{display:block;text-align:center;margin-top:.9rem;background:var(--dawn-ink);color:var(--dawn);text-decoration:none;padding:.7rem;font-weight:600}
.why-pay{display:grid;gap:1rem}
.why-pay .reason{font:700 1.2rem/1.35 var(--f-display);max-width:36ch}
.wont{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.wont li{padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.93rem;display:grid;grid-template-columns:8rem 1fr;gap:.8rem}
.wont li b{font:700 .85rem/1.35 var(--f-display);color:var(--ink-2);padding-top:.1rem}
footer{margin-top:56px;padding-block:20px 32px;border-top:1px solid var(--rule);font-size:.85rem;color:var(--ink-2);display:grid;gap:.4rem}

@media (max-width:900px){
  .top-grid{grid-template-columns:minmax(0,1fr);padding-block:20px 8px}
  .keyline{display:block}
  .flow ol{grid-template-columns:minmax(0,1fr)}
  .flow li:not(:last-child)::after{content:"↓";right:auto;left:1rem;top:auto;bottom:-1.15rem}
  .price .receipt{order:2}
  .heroloop{margin-top:20px}
  .tokens{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .qcards{grid-template-columns:minmax(0,1fr)}
  .bench{grid-template-columns:minmax(0,1fr)}
  .bench .night{order:1;border-inline:0;border-bottom:1px solid var(--rule)}
  .bench .morn{order:2}
  .bench .eve{order:3;border-top:1px solid var(--rule)}
  .night .btngrid{grid-template-columns:1fr 1fr}
  textarea{min-height:12rem;height:14rem}
  .overnight,.claim,.exp,.price,.rec{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.top{flex-wrap:nowrap}.top nav{flex-wrap:nowrap;gap:.55rem;font-size:.82rem}.top nav .l{display:none}.top nav .s{display:inline}.brand{font-size:.98rem}}
@media (max-width:420px){.wont li{grid-template-columns:1fr;gap:.1rem}}
@media (max-width:520px){
  section{padding-block:22px 4px;gap:.7rem}
  textarea{min-height:8rem;height:9.5rem}
  .flow{margin-bottom:12px}
  .flow ol{gap:14px}
  .flow li{padding:.55rem .7rem;gap:.1rem;font-size:.84rem}
  .flow li:not(:last-child)::after{bottom:-1rem;font-size:.9rem}
  .flow b{font-size:1rem}
  .flow code{font-size:.74rem}
  .exp .btns{display:grid;grid-template-columns:1fr 1fr}
  .exp .btns button{font-size:.78rem}
  .night .btngrid button small{display:block}
  .why-pay{gap:.7rem}
  .wont li{padding:.35rem 0;font-size:.88rem}
  .note-pane .file{font-size:.76rem;padding:.6rem}
  .tokens li{padding:.6rem;font-size:.84rem}
  .pane textarea,.exp .eve textarea{min-height:8rem;height:9.5rem}
  .chapters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.3rem;font-size:.74rem;padding-bottom:.2rem}
  .chapters li{flex:0 0 auto}
  .chapters button{white-space:nowrap;min-height:34px;padding:.25rem .5rem}
  .receipt{line-height:1.4;padding:.9rem .8rem 1rem;font-size:.78rem}
  footer{margin-top:32px;padding-block:14px 20px}
  .wont li{display:block}
  .wont li b{display:inline;margin-right:.4rem}
  .wont li b::after{content:":"}
  .flow li{display:block}
  .flow li > *{display:inline;margin-right:.45rem}
  .flow li b{display:block;margin:0}
  .flow li .t{display:block}
  .flow code{display:inline-block}
  .tokens{grid-template-columns:minmax(0,1fr);gap:6px}
  .tokens li{display:block;padding:.45rem .6rem}
  .tokens li b{display:inline;margin-right:.4rem;font-size:.92rem}
  .note-pane header{padding:.45rem .7rem}
  .hero{gap:1rem}
  .vscroll{overflow-x:auto;overscroll-behavior-x:contain;background:var(--dusk)}
  .heroloop .vscroll video{width:607px;max-width:none}
  .qcards{grid-template-columns:minmax(0,1fr);gap:8px}
  .qcard{padding:.6rem .75rem}
  .qcard h3{margin-bottom:.3rem;font-size:1rem}
  .qcard ul{gap:.3rem;font-size:.85rem;line-height:1.38}
  .checks{font-size:.78rem}
  .checks li{padding-block:.1rem;grid-template-columns:2.2rem minmax(0,1fr);gap:.3rem}
  .checks{gap:.25rem}
  .lead,.fineprint,.why-pay p,.rec-notes p,.free-row,.sources{font-size:.92rem;line-height:1.45}
  .run{gap:.4rem}
  .night{padding:.6rem;gap:.4rem}
  .night .btngrid button{padding:.45rem .55rem}
}
@media (prefers-reduced-motion:no-preference){
  .stamp{animation:thunk .28s ease-out}
  @keyframes thunk{from{transform:scale(1.25) rotate(-3deg);opacity:.2}to{transform:none;opacity:1}}
}

/* moved from inline style attributes (CSP: style-src 'self') */
.exp-side{display:grid;gap:.9rem;min-width:0}
.receipt .c.left{display:block;text-align:left}
.checks .stamp-row{grid-column:1/-1;justify-self:start}
.install .inst-link{flex:1 1 16rem;min-width:0;display:flex;align-items:center;padding:.7rem .8rem;color:var(--dusk-ink);font:700 .92rem/1.3 var(--f-display);text-decoration:underline;text-underline-offset:3px}