/* Kaspa Explained. One stylesheet, no framework.
   Look: a modern reading page. White (or near-black) ground, one sans (Geist), Geist Mono only for small data labels,
   one accent (Kaspa teal), Bitcoin orange only where Bitcoin is. Black is the strong colour: buttons, chapter tags, the chain.
   Scales: spacing 4 8 12 16 24 32 48 64 96; type 13 15 17 20 24 32 and display clamps; one radius (6px). See CREDITS.md. */
@import url(colors.css);
/* Named accents, used in an even mix. Kaspa teal is reserved for things that are Kaspa. */
:root{
  --saffron-9:#d9a441;--saffron-2:color-mix(in oklab,#d9a441 9%,var(--bg));--saffron-3:color-mix(in oklab,#d9a441 16%,var(--bg));--saffron-4:color-mix(in oklab,#d9a441 24%,var(--bg));--saffron-6:color-mix(in oklab,#d9a441 40%,var(--bg));--saffron-7:color-mix(in oklab,#d9a441 55%,var(--bg));--saffron-11:#8a5d0c;
  --persimmon-9:#e0703a;--persimmon-2:color-mix(in oklab,#e0703a 9%,var(--bg));--persimmon-3:color-mix(in oklab,#e0703a 16%,var(--bg));--persimmon-4:color-mix(in oklab,#e0703a 24%,var(--bg));--persimmon-6:color-mix(in oklab,#e0703a 40%,var(--bg));--persimmon-7:color-mix(in oklab,#e0703a 55%,var(--bg));--persimmon-11:#a8441a;
  --orchid-9:#c86b98;--orchid-2:color-mix(in oklab,#c86b98 9%,var(--bg));--orchid-3:color-mix(in oklab,#c86b98 16%,var(--bg));--orchid-4:color-mix(in oklab,#c86b98 24%,var(--bg));--orchid-6:color-mix(in oklab,#c86b98 40%,var(--bg));--orchid-7:color-mix(in oklab,#c86b98 55%,var(--bg));--orchid-11:#93406c;
  --wisteria-9:#8e7cc3;--wisteria-2:color-mix(in oklab,#8e7cc3 9%,var(--bg));--wisteria-3:color-mix(in oklab,#8e7cc3 16%,var(--bg));--wisteria-4:color-mix(in oklab,#8e7cc3 24%,var(--bg));--wisteria-6:color-mix(in oklab,#8e7cc3 40%,var(--bg));--wisteria-7:color-mix(in oklab,#8e7cc3 55%,var(--bg));--wisteria-11:#5d4a9a;
  --glacier-9:#6a9fd4;--glacier-2:color-mix(in oklab,#6a9fd4 9%,var(--bg));--glacier-3:color-mix(in oklab,#6a9fd4 16%,var(--bg));--glacier-4:color-mix(in oklab,#6a9fd4 24%,var(--bg));--glacier-6:color-mix(in oklab,#6a9fd4 40%,var(--bg));--glacier-7:color-mix(in oklab,#6a9fd4 55%,var(--bg));--glacier-11:#2f5f92;
  --pistachio-9:#93b46a;--pistachio-2:color-mix(in oklab,#93b46a 9%,var(--bg));--pistachio-3:color-mix(in oklab,#93b46a 16%,var(--bg));--pistachio-4:color-mix(in oklab,#93b46a 24%,var(--bg));--pistachio-6:color-mix(in oklab,#93b46a 40%,var(--bg));--pistachio-7:color-mix(in oklab,#93b46a 55%,var(--bg));--pistachio-11:#4d6b26;
  --peach-9:#ffbe98;--peach-2:color-mix(in oklab,#ffbe98 9%,var(--bg));--peach-3:color-mix(in oklab,#ffbe98 16%,var(--bg));--peach-4:color-mix(in oklab,#ffbe98 24%,var(--bg));--peach-6:color-mix(in oklab,#ffbe98 40%,var(--bg));--peach-7:color-mix(in oklab,#ffbe98 55%,var(--bg));--peach-11:#9a4f28;
  --mocha-9:#a47864;--mocha-2:color-mix(in oklab,#a47864 9%,var(--bg));--mocha-3:color-mix(in oklab,#a47864 16%,var(--bg));--mocha-4:color-mix(in oklab,#a47864 24%,var(--bg));--mocha-6:color-mix(in oklab,#a47864 40%,var(--bg));--mocha-7:color-mix(in oklab,#a47864 55%,var(--bg));--mocha-11:#6e4c3c;
}
:root[data-theme="dark"]{--saffron-11:#f0c674;--persimmon-11:#ffa47a;--orchid-11:#f0a6c8;--wisteria-11:#c3b5ff;--glacier-11:#a9cdf5;--pistachio-11:#bfdc95;--peach-11:#ffd2b6;--mocha-11:#d9b4a0;}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-variable.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist-variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#ffffff; --bg-2:#f6f6f7; --bg-3:#ececee;
  --text:#0b0b0c; --muted:#4b4b53; --faint:#66666f;
  --green:#0d7a6b; --cyan:#0d7a6b; --orange:#c2410c; --red:#b91c1c; --amber:#a16207;
  --brand:#49eacb;
  --line:rgba(11,11,12,.10); --line-bright:rgba(11,11,12,.22);
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:var(--font);
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --measure:40rem; --frame:72rem; --gutter:24px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r:6px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --plot-background:var(--bg-2);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0a0a0b; --bg-2:#141416; --bg-3:#1e1e21;
  --text:#f4f4f5; --muted:#b4b4bc; --faint:#9a9aa3;
  --green:#49eacb; --cyan:#49eacb; --orange:#fb923c; --red:#f87171; --amber:#facc15;
  --line:rgba(255,255,255,.10); --line-bright:rgba(255,255,255,.24);
  color-scheme:dark;
}
*{box-sizing:border-box}
figure{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-property:color,background-color,border-color,opacity!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font);font-feature-settings:"ss01" 0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);color:var(--text);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:color-mix(in srgb,var(--brand) 40%,transparent)}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-bright);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .15s,color .15s}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration-color:currentColor}}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:var(--r)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
number-flow{font-variant-numeric:tabular-nums;--number-flow-mask-height:.05em}
button{font:inherit}

/* ---------- Top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.bar-in{max-width:calc(var(--frame) + 2*var(--gutter));margin:0 auto;padding:var(--s2) var(--gutter);display:flex;gap:var(--s3) var(--s5);align-items:center;min-height:56px}
.brand{font-weight:650;font-size:15px;letter-spacing:-.01em;color:var(--text);text-decoration:none;display:flex;gap:var(--s2);align-items:center;min-height:40px;white-space:nowrap}
.brand svg{width:18px;height:18px;color:var(--green)}
.dots{display:flex;flex-wrap:nowrap;gap:4px;flex:1;min-width:0;justify-content:center}
.dots a{position:relative;display:block;width:24px;height:4px;border-radius:2px;background:var(--bg-3);text-decoration:none;transition:background .15s}
.dots a::before{content:"";position:absolute;inset:-10px -1px}
.dots a.seen{background:color-mix(in srgb,var(--text) 35%,transparent)}
.dots a.here{background:var(--text)}
.switch{display:flex;gap:var(--s2);align-items:center;margin-left:auto}
.switch button,.btn{cursor:pointer;border-radius:var(--r);border:1px solid var(--line-bright);background:var(--bg);color:var(--text);padding:10px 18px;font-size:15px;font-weight:550;min-height:44px;line-height:1.2;transition:background .15s,border-color .15s,color .15s}
.switch button{white-space:nowrap;min-height:36px;padding:6px 12px;font-size:14px;border-color:var(--line)}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
.switch button[aria-pressed="true"]{border-color:var(--text);background:var(--text);color:var(--bg)}
.switch button[aria-pressed="true"] .st{color:var(--bg)}
@media (hover:hover) and (pointer:fine){.btn:hover,.switch button:hover{background:var(--bg-2);border-color:var(--text)}}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
@media (hover:hover) and (pointer:fine){.btn.primary:hover{background:color-mix(in srgb,var(--text) 82%,var(--bg));border-color:transparent}}
.btn:disabled{opacity:.4;cursor:default}
.switch button .st{font-family:var(--mono);font-size:12px;margin-left:6px;color:var(--faint)}
.progress{height:2px;background:var(--text);width:0;transition:width .2s ease-out}
.textlink{color:var(--muted);font-size:15px;display:inline-flex;align-items:center;min-height:44px}
.chapnav{display:none}
.skip{position:absolute;left:-999px;top:8px;z-index:70;background:var(--text);color:var(--bg);padding:8px 12px;border-radius:var(--r)}
.skip:focus{left:8px}

/* ---------- Hero: the live network ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.hero-in{position:absolute;left:max(var(--gutter),calc((100% - var(--frame))/2));right:var(--gutter);bottom:max(var(--s7),env(safe-area-inset-bottom));max-width:44rem;padding:var(--s6);background:color-mix(in srgb,var(--bg) 92%,transparent);border:1px solid var(--line);border-radius:var(--r)}
.hero h1{font-weight:700;font-size:clamp(40px,5.6vw,80px);line-height:1;letter-spacing:-.045em;margin:0 0 var(--s4)}
.hero p.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--muted);margin:0 0 var(--s4);max-width:36rem}
.scale{min-height:2.6em;font-weight:600;font-size:clamp(18px,1.7vw,22px);line-height:1.3;letter-spacing:-.015em;color:var(--text);margin:0;max-width:38rem}
.scale b{color:inherit;font-weight:750}
.scale-note{min-height:2.8em;font-size:13px;line-height:1.45;color:var(--faint);margin:var(--s1) 0 var(--s4);max-width:36rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
.source{margin:var(--s3) 0 0;font-size:13px;color:var(--faint)}
.hud{position:absolute;top:calc(var(--bar-h,56px) + 32px);right:max(var(--gutter),calc((100% - var(--frame))/2));display:flex;gap:var(--s2);text-align:left}
.hud div{display:flex;flex-direction:column;gap:2px;min-width:9.5rem;padding:var(--s3) var(--s4);background:color-mix(in srgb,var(--bg) 92%,transparent);border:1px solid var(--line);border-radius:var(--r)}
.hud b{font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--text);line-height:1.1}
.hud span{font-size:13px;line-height:1.3;color:var(--muted)}
.hero-in>*:not(h1):not(.lead){transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .hero-in.pre>*:not(h1):not(.lead){opacity:0;transform:translateY(8px)}
.coldopen{position:absolute;left:max(var(--gutter),calc((100% - var(--frame))/2));right:var(--gutter);top:40%;margin:0;font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;color:var(--text);transition:opacity .5s;pointer-events:none}
.coldopen.gone{opacity:0}

/* ---------- Chapters: a centred frame, text held to a reading measure, spacing from the scale ---------- */
.chapter{display:grid;grid-template-columns:minmax(var(--gutter),1fr) minmax(0,var(--frame)) minmax(var(--gutter),1fr);padding:var(--s9) 0;border-top:1px solid var(--line);scroll-margin-top:var(--bar-h,56px)}
.chapter>*{grid-column:2;min-width:0;margin:0}
.chapter>*+*{margin-top:var(--s5)}
.chapter>p,.chapter>h3,.chapter>.note,.chapter>label,.chapter>.takeaway,.chapter>ol.steps,.chapter>ul.risks,.chapter>.next-steps{max-width:var(--measure)}
.chapter>h3,.chapter>.lookup{margin-top:var(--s8)}
.chapter>figure,.chapter>.stage,.chapter>.vault,.chapter>.coins-row,.chapter>.fit-table,.chapter>.receipt,.chapter>.market,.chapter>.why-grid,.chapter>.dothis,.chapter>.claims,.chapter>.proscons,.chapter>.eighty{margin-top:var(--s7)}
.chapter>h3+*{margin-top:var(--s3)}
.chapter>.takeaway{margin-top:var(--s7)}
.chapter>.deeper{margin-top:var(--s5)}
.chapter>.deeper+.deeper{margin-top:var(--s2)}
.chapter>.kicker+h2,.c1-head>.kicker+h2,.c3-head>.kicker+h2{margin-top:var(--s4)}
.chapter h2{font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.04em;max-width:22ch}
.chapter h3{font-weight:650;font-size:clamp(20px,1.9vw,24px);line-height:1.25;letter-spacing:-.02em}
.chapter p.big{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--text);max-width:var(--measure)}
:where(.chapter) p{color:var(--muted)}
.chapter p.big,.chapter p.takeaway{color:var(--text)}
.muted{color:var(--muted)}
.note{font-size:14px;line-height:1.5;color:var(--faint)}
.out{font-size:15px;min-height:1.6em;color:var(--text)}
.kicker{display:flex;align-items:center;gap:var(--s3);font-size:14px;font-weight:550;color:var(--muted);margin:0}
.ch-tag{display:inline-flex;align-items:center;justify-content:center;min-width:2.6em;height:26px;padding:0 var(--s2);border-radius:var(--r);background:var(--text);color:var(--bg);font:600 13px/1 var(--mono);letter-spacing:.02em}

/* Controls */
.controls{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;margin:var(--s4) 0 0}
.controls label{font-size:15px;color:var(--muted);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
input[type=range]{accent-color:var(--text);width:min(320px,100%);height:28px;margin:0}
input[type=text]{font:15px var(--mono);background:var(--bg);color:var(--text);border:1px solid var(--line-bright);border-radius:var(--r);padding:10px 12px;width:min(100%,36rem);min-height:44px}

/* Info "i" and glossary terms */
.info-affordance{position:relative;display:inline-block}
.info-affordance__trigger{position:relative}
.info-affordance__trigger::after{content:"";position:absolute;inset:-13px}
.info-affordance__trigger,.term{font:inherit;cursor:help;background:none;border:0;padding:0;color:inherit}
.info-affordance__glyph{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-bright);font:600 11px/1 var(--mono);font-style:normal;color:var(--muted)}
.term{position:relative;text-decoration:underline dotted;text-decoration-color:var(--faint);text-underline-offset:4px}
.term::after{content:"";position:absolute;inset:-8px -10px}
@media (hover:hover) and (pointer:fine){.term:hover{color:var(--green)}}
.pop{position:absolute;z-index:60;max-width:min(320px,86vw);background:var(--bg);color:var(--text);border:1px solid var(--line-bright);border-radius:var(--r);padding:var(--s3) var(--s4);font:400 14px/1.5 var(--font)}

/* Expanders */
details.more summary{cursor:pointer;list-style:none;display:inline-flex;gap:var(--s2);align-items:center;min-height:44px;font-size:15px;font-weight:550;color:var(--text)}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line-bright);border-radius:var(--r);font:500 14px/1 var(--mono);color:var(--text)}
details.more[open] summary::before{content:"−"}
@media (hover:hover) and (pointer:fine){details.more summary:hover::before{background:var(--bg-2)}}
details.nerd summary::after{content:"the math";font:500 12px var(--mono);color:var(--faint);padding:2px 6px;border:1px solid var(--line);border-radius:var(--r)}
details.more .in{margin-top:var(--s2);padding:var(--s4) var(--s5);background:var(--bg-2);border-radius:var(--r);font-size:15px;color:var(--muted);max-width:var(--measure)}
details.more .in p{margin:0}
details.more .in p+p{margin-top:var(--s3)}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}
details.more::details-content{block-size:0;overflow:clip;transition:content-visibility .3s allow-discrete,block-size .3s var(--ease)}
details.more[open]::details-content{block-size:auto}

/* The takeaway after each interactive */
.takeaway{padding:var(--s4) var(--s5);border-left:3px solid var(--green);background:var(--bg-2);border-radius:0 var(--r) var(--r) 0;font-size:17px;line-height:1.55}
.takeaway b{font-weight:650}
/* "Go deeper": one ruled row into the topic's own page */
.deeper{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s4);align-items:center;max-width:var(--measure);padding:var(--s3) var(--s4);border:1px solid var(--line-bright);border-radius:var(--r);text-decoration:none;color:var(--text);transition:background .15s,border-color .15s}
.deeper .k{grid-column:1;font:500 12px/1.4 var(--mono);color:var(--faint)}
.deeper .t{grid-column:1;font-weight:600;font-size:16px;line-height:1.35}
.deeper .a{grid-column:2;grid-row:1/3;font-size:20px;line-height:1;transition:transform .15s var(--ease)}
@media (hover:hover) and (pointer:fine){.deeper:hover{background:var(--bg-2);border-color:var(--text)}}
@media (hover:hover) and (pointer:fine){.deeper:hover .a{transform:translateX(3px)}}
ol.steps{list-style:none;counter-reset:st;padding:0;display:grid;gap:var(--s2)}
ol.steps li{counter-increment:st;display:flex;gap:var(--s3);align-items:center;color:var(--muted);font-size:15px}
ol.steps li::before{content:counter(st);display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--r);border:1px solid var(--line-bright);font:600 12px/1 var(--mono);color:var(--text)}
ol.steps li.on{color:var(--text)}
ol.steps li.on::before{background:var(--text);color:var(--bg);border-color:var(--text)}

/* Shared figure pieces */
.panel{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}
.panel canvas{display:block;width:100%;height:120px}
.panel-title{font-weight:600;margin:0 0 var(--s2);font-size:15px;color:var(--text);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:space-between}
.stat{color:var(--faint);font-weight:400;font-size:13px;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:13px;color:var(--muted);margin:var(--s2) 0 0}
.blk{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.blk.hollow{border:2px solid;background:transparent}
.src{font-size:13px;line-height:1.5;color:var(--faint)}
.stage{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r)}
.stage canvas{display:block;width:100%;background:transparent}

/* 01 Why care */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.why-grid>div{padding-top:var(--s4);border-top:2px solid var(--text)}
.why-grid h3{margin:var(--s2) 0 var(--s2);font-size:18px;font-weight:650;letter-spacing:-.01em}
.why-grid p{font-size:15px;color:var(--muted);margin:0}
.why-grid .n{display:block;font-weight:650;font-size:clamp(32px,3.2vw,44px);line-height:1;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.dothis{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6);counter-reset:d}
.dothis li{counter-increment:d;padding-top:var(--s3);border-top:1px solid var(--line-bright);font-size:15px;color:var(--muted)}
.dothis li b{display:flex;gap:var(--s2);align-items:center;color:var(--text);font-weight:650;font-size:17px;margin-bottom:var(--s1)}
.dothis li b::before{content:counter(d);font:500 13px var(--mono);color:var(--faint)}
.dothis .tag,.vtag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 var(--s2);border-radius:var(--r);background:var(--text);color:var(--bg);font:600 12px/1 var(--mono);white-space:nowrap}
.fit-table{overflow-x:auto;margin-left:0;margin-right:0}
.fit-table table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px;font-variant-numeric:tabular-nums}
.fit-table caption{text-align:left;font-weight:600;color:var(--text);padding-bottom:var(--s3);font-size:16px}
.fit-table th,.fit-table td{text-align:left;padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.fit-table thead th{font-size:13px;font-weight:550;color:var(--faint);border-bottom:1px solid var(--line-bright)}
.fit-table tbody th{font-weight:650;color:var(--text)}
.fit-table tr.kas th,.fit-table tr.kas td{color:var(--text);font-weight:600;background:var(--bg-2)}
.fit-table tr.kas th{box-shadow:inset 3px 0 0 var(--green);padding-left:var(--s3)}
.fit-table tbody th,.fit-table thead th:first-child{position:sticky;left:0;background:var(--bg);z-index:1}
.fit-table figcaption{margin-top:var(--s3)}
.fit-table:focus-visible{outline:2px solid var(--wisteria-11);outline-offset:4px}

/* 02 The 80/20 */
.eighty{list-style:none;padding:0;counter-reset:e;display:grid;gap:0;border-top:1px solid var(--line-bright)}
.eighty li{counter-increment:e;display:grid;grid-template-columns:2.5rem minmax(0,5fr) minmax(0,6fr);gap:var(--s2) var(--s5);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted)}
.eighty li::before{content:"0" counter(e);font:600 13px/1.6 var(--mono);color:var(--faint)}
.eighty b{color:var(--text);font-weight:650;font-size:17px;line-height:1.35}
.claims{list-style:none;padding:0;border-top:1px solid var(--line-bright)}
.claims li{display:grid;grid-template-columns:minmax(0,4fr) 7.5rem minmax(0,7fr);gap:var(--s2) var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--line);align-items:start}
.claims .claim{margin:0;font-weight:600;color:var(--text);font-size:16px;line-height:1.4}
.claims .truth{margin:0;font-size:15px;color:var(--muted)}
.claims .truth a{color:var(--faint);font-size:13px;white-space:nowrap}
.vtag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bg)}
.vtag.true::before{background:var(--brand)}
.vtag.half::before{background:#facc15}
.vtag.old::before{background:#fb923c}
.vtag.open::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--bg)}
.claims-key{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:13px;color:var(--faint);margin:0}
.claims-key span{display:inline-flex;gap:var(--s2);align-items:center}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.proscons>div{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r)}
.proscons h3{margin:0 0 var(--s3);font-size:18px;display:flex;gap:var(--s2);align-items:center}
.proscons h3 i{width:10px;height:10px;border-radius:2px;background:var(--hue-9);display:inline-block}
.proscons .cons h3 i{background:var(--orange)}
.proscons ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.proscons li{font-size:15px;color:var(--muted);padding-left:var(--s4);position:relative}
.proscons li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:2px;background:var(--faint)}
.proscons li b{color:var(--text);font-weight:600}
.proscons a{color:var(--faint);font-size:13px}
.uses{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s6);max-width:none!important}
.uses li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;padding:var(--s3) 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.uses li b{color:var(--text);font-weight:600}

/* 03 collisions */
.c1-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5) var(--s8);align-items:start}
.c1-head{position:sticky;top:96px}
.c1-head>*{margin:0}
.c1-head>*+*{margin-top:var(--s4)}
.c1-head h2{font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.04em}
.c1-head p{color:var(--muted)}
.c1-head p.big{color:var(--text)}
.result-line{margin-top:var(--s6)!important;font-size:15px;color:var(--muted);display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--s2) var(--s3)}
#cs-resultLine{display:contents}
.result-line .pct{grid-column:1;grid-row:1}
.result-line .pct-cap{grid-column:1/-1;grid-row:2}
.result-line>.info-affordance{grid-column:2;grid-row:1;justify-self:start;margin-top:.4em}
#cs-resultLine .pct{--number-flow-mask-height:.06em;font-size:clamp(72px,8vw,120px);line-height:.9;font-weight:700;letter-spacing:-.06em;color:var(--orange)}
#cs-resultLine .pct-cap{font-size:15px;color:var(--muted);max-width:22rem}
.c1-toy{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r)}
.primary-control label{font-size:15px;color:var(--muted);display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;margin-bottom:var(--s2)}
.primary-control input[type=range]{width:100%}
.big-readout{font-weight:650;font-size:20px;color:var(--text);font-variant-numeric:tabular-nums}
.marks{display:flex;justify-content:space-between;gap:var(--s3);font-size:13px;color:var(--faint)}
.honesty-note{font-size:13px;color:var(--faint);margin:var(--s2) 0 0}
.secondary-control{margin-top:var(--s2)}
body.nerd .secondary-control[hidden]{display:block}
#cs-step{margin-top:0}
.step-note{font-size:13px;color:var(--faint);margin:var(--s2) 0 0}

/* 04 order */
#orderCanvas{height:440px;touch-action:manipulation;cursor:crosshair}
.sample-tag{font-size:14px;color:var(--muted);margin:0 0 var(--s3);min-height:1.5em}
.sample-tag b{color:var(--text);font-weight:600}
.inspect{font-size:14px;line-height:1.5;color:var(--muted);min-height:3em;margin:var(--s3) 0 0;padding:var(--s2) var(--s3);background:var(--bg-2);border-radius:var(--r)}
.scrub{display:inline-flex;align-items:center;gap:var(--s3);white-space:nowrap;font:500 13px/1 var(--mono);color:var(--muted);margin-left:auto}
.scrub input{width:min(220px,46vw);margin:0}
.stage .out{margin:var(--s3) 0 0}
.coins-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5) var(--s8);align-items:center}
.coins-row>div>*{margin:0}
.coins-row>div>*+*{margin-top:var(--s3)}
.coins-row p{color:var(--muted)}
#coinsCanvas{display:block;width:100%;background:transparent}

/* 05 attack */
.c3-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--s8);align-items:end}
.c3-head .kicker{grid-column:1/-1}
.c3-head>*{margin:0}
.c3-head h2{font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.04em}
.c3-head .kicker+h2{margin-top:0}
.ghost{position:relative}
.board{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--s1) var(--s7);align-items:end;margin-bottom:var(--s2)}
.board div{display:flex;flex-direction:column}
.board span{font-size:13px;color:var(--muted)}
.board b{font-size:clamp(32px,3.6vw,48px);font-weight:650;line-height:1.1;letter-spacing:-.03em;color:var(--green);min-width:2.2ch;font-variant-numeric:tabular-nums}
.board .you b{color:inherit}
.board .legend{grid-column:1/-1}
.verdict{font-weight:700;font-size:clamp(20px,2.6vw,36px);line-height:1.1;letter-spacing:-.03em;color:var(--muted);text-align:right;margin:0!important;min-height:1.1em}
.verdict.bad{color:var(--red)}
#ghostCanvas{height:210px;margin-top:var(--s1)}
.seq{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;counter-reset:s}
.seq li{display:flex;align-items:center;gap:var(--s2);counter-increment:s}
.seq li::before{content:counter(s);font:500 12px var(--mono);color:var(--faint)}
/* One line, newest on the right, older ids fade off the left: block ids gain digits, so a wrapping strip would keep getting taller. */
.order-strip{font-size:13px;line-height:1.6;color:var(--muted);white-space:nowrap;overflow:hidden;display:flex;justify-content:flex-end;height:1.6em;margin:var(--s2) 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3em);mask-image:linear-gradient(90deg,transparent,#000 3em)}

/* 06 the race */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s7)}
.duel .controls,.duel .note,.duel .track,.duel .ruler{grid-column:1/-1}
.duel .note{margin-top:var(--s3)}
.side-name{font:600 13px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0}
.clock{font-weight:650;font-size:clamp(48px,6.4vw,96px);line-height:1;margin:var(--s2) 0 var(--s4);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.fast-tag{font:500 13px/1.3 var(--mono);color:var(--orange);margin:calc(-1*var(--s2)) 0 var(--s3);min-height:1.3em}
.meter{height:6px;background:var(--bg-3);border-radius:3px;overflow:hidden}
.meter-fill{height:100%;width:0;background:var(--green)}
.meter-fill.btc{background:var(--orange)}
.side-out{font-size:15px;color:var(--muted);min-height:3.3em;margin:var(--s3) 0 0}
.pile{display:flex;flex-wrap:wrap;gap:3px;max-height:200px;overflow:hidden;margin-top:var(--s4);min-height:40px;align-content:flex-start}
.pile i{width:11px;height:11px;background:var(--green);border-radius:1px;display:block}
.slots{display:flex;gap:var(--s2);margin-top:var(--s4);min-height:40px}
.slots i{width:34px;height:34px;border:1px dashed var(--line-bright);border-radius:4px;display:block}
.slots i.on{background:var(--orange);border:1px solid var(--orange)}
.duel .ruler{margin-top:var(--s4)}
.track{margin:var(--s3) 0 0}
.track svg{display:block;overflow:visible}
.track .tl{font:12px var(--mono);fill:var(--muted)}
.track .tl.strong{fill:var(--text);font-weight:600}
.track .tax text{font:11px var(--mono);fill:var(--faint)}
.track figcaption{font-size:13px;color:var(--faint);margin-top:var(--s2);max-width:var(--measure)}
.tmark{transition:transform .25s linear}
#trackSvg{max-width:100%}

/* 07 supply */
.fair figcaption{font-size:15px;color:var(--muted);margin-bottom:var(--s4);max-width:var(--measure)}
.waffles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5)}
.waffle svg{display:block;width:100%;max-width:150px;height:auto}
.waffle p{margin:var(--s2) 0 0;display:flex;flex-direction:column;font-size:15px;color:var(--text)}
.waffle p b{font-weight:650}
.waffle p span{font-size:13px;color:var(--faint)}
.mined .bar-track{position:relative;height:28px;background:var(--bg-3);border-radius:var(--r);overflow:hidden}
.mined .bar-fill{position:absolute;inset:0 auto 0 0;background:var(--green);width:0;transition:width 1s var(--ease)}
.mined .bar-legend{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.mined .big-n{font-weight:700;font-size:clamp(56px,7vw,96px);line-height:.95;letter-spacing:-.05em;color:var(--text);margin:0 0 var(--s3)}
.mined .src,.market .src{margin-top:var(--s2)}
.plot{width:100%;min-height:92px}
.plot svg{display:block;max-width:100%;height:auto;overflow:visible}
#emitPlot{min-height:220px}
.emit .controls,.miners .controls{margin:0 0 var(--s4)}
.emit .out,.miners .out{margin:var(--s3) 0 0}
.emit .note,.miners .note{margin:var(--s2) 0 0}

/* 08 coins with rules */
.vault{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) var(--s8);align-items:start;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r)}
.vault-head>*{margin:0}
.vault-head>*+*{margin-top:var(--s3)}
.vault-head p{color:var(--muted)}
.vault .out{grid-column:1/-1;font-size:16px;min-height:3.4em;padding:var(--s3) var(--s4);background:var(--bg-2);border-radius:var(--r);margin:0}
.rules{list-style:none;padding:0}
.rules li{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted);transition:color .2s}
.rules .mark{flex:none;width:12px;height:12px;border:1.5px solid var(--line-bright);border-radius:50%;transform:translateY(1px);transition:background .2s,border-color .2s}
.rules li.pass{color:var(--text)} .rules li.pass .mark{background:var(--hue-ink);border-color:var(--hue-ink)}
.rules li.fail{color:var(--red)} .rules li.fail .mark{background:var(--red);border-color:var(--red)}
.vault-floor{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s4);align-items:start}
.coin{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;font:600 13px var(--mono);cursor:grab;touch-action:none;user-select:none;transform-origin:50% 50%}
.coin.drag{cursor:grabbing}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.zone{min-height:64px;border:1px dashed var(--line-bright);border-radius:var(--r);background:transparent;color:var(--text);text-align:left;padding:var(--s3) var(--s4);font-size:15px;font-weight:550;cursor:pointer;display:flex;align-items:center;transition:background .15s,border-color .15s}
.zone.over{border-style:solid;border-color:var(--text);background:var(--bg-2)}@media (hover:hover) and (pointer:fine){.zone:hover{border-style:solid;border-color:var(--text);background:var(--bg-2)}}
.zone.picked{border-style:solid;border-color:var(--hue-ink)}
.zone.picked.no{border-color:var(--red)}
.timeline{list-style:none;padding:0;position:relative;max-width:var(--measure)}
.timeline li{display:grid;grid-template-columns:7.5rem 12px minmax(0,1fr);gap:0 var(--s4);align-items:baseline;padding:var(--s3) 0}
.timeline li::before{content:"";grid-column:2;grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--text);transform:translateY(1px);position:relative;z-index:1}
.timeline li.next::before{background:var(--bg);border:1.5px dashed var(--muted)}
.timeline time,.timeline .when{grid-column:1;grid-row:1/3;font:13px var(--mono);color:var(--muted)}
.timeline li.next .when{color:var(--faint)}
.timeline b{grid-column:3;font-weight:650;color:var(--text)}
.timeline li>span:last-child{grid-column:3;color:var(--muted);font-size:15px}
.timeline::before{content:"";position:absolute;left:calc(7.5rem + var(--s4) + 4px);top:22px;bottom:22px;width:2px;background:var(--line)}

/* 09 price and risk */
.market .quote{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin:0 0 var(--s6)}
.market .quote div{padding-top:var(--s3);border-top:2px solid var(--text)}
.market .quote span{display:block;font-size:13px;font-weight:550;color:var(--muted)}
.market .quote b{display:block;font-weight:650;font-size:clamp(26px,2.8vw,36px);line-height:1.2;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
.market .quote small{font-size:13px;color:var(--faint)}
#sizeSvg{display:block;width:100%;overflow:visible}
#sizeSvg .lab{font:13px var(--font);fill:var(--text)}
#sizeSvg .val{font:12px var(--mono);fill:var(--muted)}
#sizeSvg .tax text{font:11px var(--mono);fill:var(--faint)}
#sizeFig{margin-top:var(--s5)}
#sizeFig figcaption{font-size:13px;color:var(--faint);margin-top:var(--s2)}
.risks{list-style:none;padding:0;display:grid;gap:0;max-width:var(--measure)}
.risks li{padding:var(--s3) 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.risks li b{color:var(--text);font-weight:650}

/* 10 check it */
.receipt{border-top:1px solid var(--line-bright)}
.receipt>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s1) var(--s6);padding:var(--s4) 0;border-bottom:1px solid var(--line);align-items:baseline}
.receipt dt{font-size:15px;color:var(--muted)}
.receipt dd{margin:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline;justify-content:space-between}
.receipt dd b{font-size:clamp(26px,3vw,40px);font-weight:650;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.receipt dd a{font:13px var(--mono);color:var(--faint)}
.lookup>*{margin:0}
.lookup>*+*{margin-top:var(--s3)}
.lookup p{color:var(--muted)}
.lookup .out{font:13px/1.6 var(--mono);color:var(--muted);word-break:break-word}
.next-steps{padding:0;list-style:none}
.next-steps li{padding:var(--s3) 0;border-top:1px solid var(--line);color:var(--muted)}
.next-steps li b{color:var(--text)}

/* Tally, finish, Moose */
.tally-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.tally-grid p{margin:0}
.tally-n{font-weight:700;font-size:clamp(56px,8vw,120px);line-height:1;margin:var(--s2) 0!important;color:var(--text);letter-spacing:-.05em}
.tally-n.btc{color:var(--orange)}
#tallyCanvas{width:100%;height:220px;display:block}
.finish textarea{display:block;width:100%;font:500 clamp(18px,1.8vw,22px)/1.5 var(--font);background:var(--bg);color:var(--text);border:1px solid var(--line-bright);border-radius:var(--r);padding:var(--s4);resize:vertical;min-height:7em;max-width:var(--measure)}
.finish label{display:block;font-size:14px}
.finish label+textarea{margin-top:var(--s2)}
.closing{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.closing p{flex-basis:100%;margin:var(--s2) 0 0;color:var(--muted);font-size:15px;max-width:var(--measure)}
.moose .meta{font-size:14px;color:var(--faint)}
.moose .meta+h2{margin-top:var(--s3)}
.moose .actions{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.moose .actions a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.moose .actions a.primary{font-weight:650}
.covers{display:flex;flex-wrap:wrap;gap:var(--s4);padding:0;list-style:none}
.covers a{display:block;text-decoration:none;color:var(--muted);font-size:13px;width:132px}
.covers img{display:block;width:132px;height:176px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:var(--r);margin-bottom:6px;background:#fff}
footer{padding:var(--s7) var(--gutter) var(--s8);text-align:center;color:var(--faint);font-size:13px;border-top:1px solid var(--line)}
button.link{background:none;border:0;padding:0 2px;font:inherit;color:var(--text);text-decoration:underline;cursor:pointer;min-height:24px}
.btn[hidden],button[hidden]{display:none!important}
.num.stale{opacity:.55}
button[aria-busy=true]{cursor:progress;opacity:.7}

/* Scroll-driven entrance: short, transform only, off under reduced motion. */
@supports ((animation-timeline:view()) and (animation-range:0% 100%)){
  @media (prefers-reduced-motion:no-preference){
    .stage,.chapter>figure,.vault,.c1-toy,.deep figure.inter{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes settle{from{transform:translateY(16px)}to{transform:none}}
  }
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
::view-transition-group(topic){animation-duration:.35s;animation-timing-function:var(--ease)}
::view-transition-old(topic),::view-transition-new(topic){height:100%;object-fit:none;object-position:left top}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- Deep pages ---------- */
.deep{max-width:calc(var(--frame) + 2*var(--gutter));margin:0 auto;padding:var(--s9) var(--gutter) var(--s8)}
.deep .back{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-size:15px;color:var(--muted);text-decoration:none}
@media (hover:hover) and (pointer:fine){.deep .back:hover{color:var(--text)}}
.deep .kicker{margin:var(--s5) 0 0;font:500 13px var(--mono);color:var(--faint);display:block}
.deep h1{font-weight:700;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.04em;margin:var(--s3) 0 var(--s5);max-width:18ch;view-transition-name:topic}
.deep .lede{font-size:clamp(18px,1.6vw,20px);line-height:1.55;max-width:var(--measure);margin:0 0 var(--s3)}
.deep section{margin:var(--s8) 0 0}
.deep section>h2{font-weight:650;font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.03em;margin:0 0 var(--s3);max-width:var(--measure)}
.deep section>h2 .kicker{display:block;margin-bottom:var(--s2)}
.deep p,.deep ul,.deep ol{max-width:var(--measure)}
.deep p{margin:0 0 var(--s4);color:var(--muted)}
.deep .lede{color:var(--text)}
.deep li{margin-bottom:var(--s2);color:var(--muted)}
.deep figure.inter{margin:var(--s6) 0;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r)}
.deep figure.inter figcaption{font-size:14px;color:var(--muted);max-width:var(--measure);margin-top:var(--s3)}
.deep figure.inter figcaption b{color:var(--text);font:600 12px var(--mono);margin-right:var(--s2);padding:2px 6px;background:var(--text);color:var(--bg);border-radius:4px}
.deep canvas{display:block;width:100%;cursor:crosshair;border-radius:2px}
.deep canvas:focus-visible{outline:2px solid var(--wisteria-11);outline-offset:4px}
.deep .sources{font-size:14px;color:var(--muted)}
.deep .sources li{margin-bottom:6px}
.deep .next-deep{margin-top:var(--s8)}
.deep .next-deep .deeper{margin:0}
.deep .big-out{font-weight:700;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.05em;color:var(--text);margin:var(--s2) 0;font-variant-numeric:tabular-nums;min-height:1em}
.deep .big-out.bad{color:var(--red)}
.deep .inter-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin:var(--s4) 0}
.deep .inter-row label{display:flex;align-items:baseline;gap:var(--s3);font-size:15px;color:var(--muted);min-width:min(100%,260px)}
.deep .inter-row label output{font-weight:650;font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.deep .inter-row input[type=range]{flex:1 1 220px;min-width:0;max-width:520px;min-height:44px}
.deep .inter-row label.scrub{flex:1 1 100%;max-width:640px;margin-left:0}
.deep .readout{font-size:15px;line-height:1.55;max-width:var(--measure);min-height:3.2em;margin:var(--s3) 0 0}
.deep .readout.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);max-width:none;min-height:0}
.deep .readout.grid3 div{border-top:1px solid var(--line);padding-top:var(--s2)}
.deep .readout.grid3 span{display:block;font-size:13px;color:var(--muted)}
.deep .readout.grid3 b{display:block;font-weight:650;font-size:clamp(18px,2vw,24px);line-height:1.2;font-variant-numeric:tabular-nums;margin-top:var(--s1);color:var(--text)}
.deep .readout b.up{color:var(--green)} .deep .readout b.down{color:var(--red)}
.deep .steps-plain{padding-left:1.2em}
.deep .steps-plain li{margin-bottom:var(--s3)}
.deep .risks-plain{list-style:none;padding:0}
.deep .risks-plain li{border-top:1px solid var(--line);padding:var(--s3) 0;margin:0}
.deep .no-advice{font-size:14px;color:var(--muted)}
.deep .sources-sec h2{font-size:20px!important}
.deep .sw{display:inline-block;width:10px;height:10px;margin:0 4px 0 10px;border-radius:2px;vertical-align:baseline}
.deep .sw.past{background:var(--green)} .deep .sw.fut{background:var(--muted)} .deep .sw.anti{background:var(--orange)}
.deep .seg{display:inline-flex;gap:0}
.deep .seg .btn{border-radius:0}
.deep .seg .btn:first-child{border-radius:var(--r) 0 0 var(--r)}
.deep .seg .btn:last-child{border-radius:0 var(--r) var(--r) 0;border-left:0}
.deep .seg .btn[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.deep-page .bar-in{justify-content:space-between}
.deep-page .progress{width:100%;transform:scaleX(0);transform-origin:0 50%;transition:none}
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 var(--s7);margin-top:var(--s5)}
.scrolly .sticky{position:sticky;top:12vh;align-self:start;grid-column:2;grid-row:1}
.scrolly .steps-col{grid-column:1;grid-row:1}
.scrolly .step{min-height:62vh;padding:8vh 0;color:var(--faint);transition:color .3s}
.scrolly .step:last-child{min-height:50vh}
.scrolly .step.is-active{color:var(--text)}
.scrolly .step h3{font-weight:650;font-size:20px;line-height:1.25;margin:0 0 var(--s2);color:inherit}
.scrolly .step p{margin:0;font-size:16px;color:inherit}
.glossary{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s5);max-width:var(--measure);margin:var(--s4) 0}
.glossary dt{font-weight:650}
.glossary dd{margin:0;color:var(--muted)}
#caveSvg{display:block;width:100%;max-width:440px;margin:0 auto}
#caveSvg .rock{fill:none;stroke:var(--text);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;opacity:.12}
#caveSvg .door{stroke:var(--orange);stroke-width:4}
#caveSvg .cl{font:600 15px var(--font);fill:var(--muted)}
#caveSvg .cl.sm{font-size:13px;font-weight:500}
#caveSvg .call{fill:var(--text)}
#caveSvg .peg{fill:var(--green)}
#caveSvg .vic{fill:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .duel .side-out{min-height:5lh}
  .hud div{min-width:8rem}
}
@media (max-width:900px){
  .why-grid,.dothis,.proscons,.uses{grid-template-columns:1fr}
  .market .quote{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .c1-grid,.coins-row,.vault,.c3-head{grid-template-columns:minmax(0,1fr)}
  .c3-head .kicker{grid-column:auto}
  .c1-head{position:static}
  .waffles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .claims li{grid-template-columns:minmax(0,1fr) auto}
  .claims .claim{grid-column:1}
  .claims .vtag{grid-column:2;grid-row:1}
  .claims .truth{grid-column:1/-1}
  .bar .dots{display:none}
}
@media (max-width:820px){
  .scrolly{grid-template-columns:1fr}
  .scrolly .sticky{grid-column:1;top:58px;z-index:1;background:var(--bg);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
  .scrolly .steps-col{grid-column:1;grid-row:2;position:relative;z-index:2}
  .scrolly .step{min-height:auto;padding:var(--s4) 0;margin:0 0 40vh;background:var(--bg)}
  .scrolly .step:last-child{margin-bottom:10vh}
}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  .chapter{padding:var(--s8) 0;scroll-margin-top:var(--bar-h,100px)}
  .chapter>h3,.chapter>.lookup{margin-top:var(--s7)}
  .chapter>figure,.chapter>.stage,.chapter>.vault,.chapter>.coins-row,.chapter>.fit-table,.chapter>.receipt,.chapter>.market,.chapter>.why-grid,.chapter>.dothis,.chapter>.claims,.chapter>.proscons,.chapter>.eighty,.chapter>.takeaway{margin-top:var(--s6)}
  .bar-in{flex-wrap:wrap;padding:6px var(--gutter);gap:4px var(--s2);min-height:0}
  .brand{font-size:15px}
  .switch{gap:6px}
  .switch button{padding:5px 10px;font-size:13px;min-height:34px}
  .chapnav{display:block;flex-basis:100%;order:3}
  .chapnav select{width:100%;font:500 15px var(--font);color:var(--text);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;min-height:36px}
  .hero{min-height:720px}
  .hud{top:calc(var(--bar-h,150px) + 12px);left:var(--gutter);right:var(--gutter);gap:6px}
  .hud div{flex:1;min-width:0;padding:var(--s2) 10px}
  .hud b{font-size:20px}
  .hud span{font-size:12px}
  .hero-in{left:12px;right:12px;bottom:12px;padding:var(--s5) var(--s4) var(--s4)}
  .hero h1{font-size:40px}
  .stage,.c1-toy,.vault{padding:var(--s4)}
  #orderCanvas{height:380px}
  .scrub{margin-left:0;flex:1 1 100%}
  .scrub input{flex:1;width:auto}
  .duel{grid-template-columns:1fr;gap:var(--s5)}
  .clock{margin-bottom:var(--s3)}
  .board{grid-template-columns:auto auto;gap:var(--s1) var(--s6)}
  .verdict{grid-column:1/-1;text-align:left}
  .waffles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .eighty li{grid-template-columns:2rem minmax(0,1fr);gap:var(--s1) var(--s3)}
  .eighty li>span{grid-column:2}
  .zones{grid-template-columns:1fr}
  .zone{min-height:52px}
  .vault-floor{grid-template-columns:64px minmax(0,1fr)}
  .timeline li{grid-template-columns:6rem 12px minmax(0,1fr);gap:0 var(--s3)}
  .timeline::before{left:calc(6rem + var(--s3) + 4px)}
  .receipt>div{grid-template-columns:1fr}
  .tally-grid{gap:var(--s3)}
  .covers a,.covers img{width:120px}
  .covers img{height:160px}
  .deep{padding:var(--s9) 16px var(--s8)}
  .deep .readout.grid3{grid-template-columns:1fr 1fr}
  .deep .readout.grid3 div:last-child{grid-column:1/-1}
  .deep .seg{display:flex;width:100%}
  .deep .seg .btn{flex:1;justify-content:center;padding:8px 10px;font-size:14px}
}
@media (max-width:360px){
  .bar-in{padding:6px 12px}
  .switch button{padding:4px 7px;font-size:12px}
  .brand{font-size:14px;gap:6px}
  .duel .side-out{min-height:6lh}
}

/* No content-visibility:auto on the chapters: in WebKit, chapters above the reader rendered late and moved the page
   between a tap's press and release, so taps missed their button (qa/qa-visual.md, round 6).
   Chapter numbers are written in the HTML, not CSS counters. */
.dothis li.later b{color:var(--muted)}
.toy canvas{display:block;width:100%;background:transparent}
.toy .try{font-weight:600;color:var(--text);margin:0 0 var(--s2)}
.ledger{border-collapse:collapse;width:100%;font-size:15px}
.ledger th,.ledger td{text-align:left;padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line);vertical-align:top}
.ledger thead th{font-size:13px;font-weight:550;color:var(--faint);border-bottom:1px solid var(--line-bright)}
.ledger tbody th{font-weight:650;font-size:17px;width:30%;color:var(--text)}
.ledger td{color:var(--muted)}
@media (max-width:640px){
  .ledger thead{display:none}
  .ledger tr{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  .ledger th,.ledger td{display:block;border:0;padding:var(--s1) 0}
  .ledger tbody th{width:auto}
  .ledger td::before{content:attr(data-label);display:block;font-size:12px;font-weight:550;color:var(--faint)}
}
.board number-flow,.board .num{--number-flow-mask-height:.04em;overflow:clip;display:block;line-height:1.05}
.claims-lead{margin:-4px 0 14px;color:var(--muted,inherit);max-width:var(--measure)}


/* =====================================================================================================
   Warm theme (31 Oct 2026). One coherent layer over the base above; see design-research-2026-10-31.md.
   Cream base + warm ink (anthropic.com, diabrowser.com, comet); one Radix hue per chapter (radix-ui.com/colors,
   pudding.cool); Manrope 800 display (OFL; replaced Fraunces 31 Oct at Parker's request) over Geist body (granola.ai, manus.im); pills + soft cards (phantom.com,
   wise.design); Open Props easings for small physical interactions; colour washes instead of new art.
   ===================================================================================================== */
:root{
  --bg:#fbf8f1; --bg-2:#f5efe3; --bg-3:#ebe3d3; --card:#fffdf8;
  --text:#1f1a14; --muted:#51493f; --faint:#685f54;
  --green:var(--teal-11); --cyan:var(--teal-11); --orange:#c2410c; --red:#b4232c; --amber:var(--amber-11);
  --line:rgba(74,50,20,.12); --line-bright:rgba(74,50,20,.26);
  --display:"Manrope","Geist",ui-sans-serif,system-ui,sans-serif;
  --r:10px; --r-lg:18px; --pill:999px;
  --ease:cubic-bezier(0,0,.3,1);            /* open-props --ease-out-3 */
  --ease-spring:cubic-bezier(.5,1.25,.75,1.25); /* open-props --ease-elastic-out-3 */
  --shadow-1:0 1px 2px rgba(74,50,20,.06);
  --shadow-2:0 1px 2px rgba(74,50,20,.05),0 10px 28px -14px rgba(74,50,20,.22);
  --shadow-3:0 2px 4px rgba(74,50,20,.06),0 18px 40px -18px rgba(74,50,20,.30);
  --hue-2:var(--wisteria-2);--hue-3:var(--wisteria-3);--hue-4:var(--wisteria-4);--hue-6:var(--wisteria-6);--hue-7:var(--wisteria-7);--hue-9:var(--wisteria-9);--hue-11:var(--wisteria-11);
  --plot-background:var(--bg-2);
}
:root[data-theme="dark"]{
  --bg:#16130f; --bg-2:#201b15; --bg-3:#2b251d; --card:#1c1813;
  --text:#f6f0e6; --muted:#cfc5b7; --faint:#ada293;
  --green:#49eacb; --cyan:#49eacb; --orange:#fb923c; --red:#f87171; --amber:var(--amber-11);
  --line:rgba(255,236,210,.10); --line-bright:rgba(255,236,210,.24);
  --shadow-1:none; --shadow-2:0 1px 0 rgba(255,236,210,.04) inset,0 10px 28px -14px rgba(0,0,0,.6); --shadow-3:0 18px 40px -18px rgba(0,0,0,.7);
}
/* one hue per chapter (Radix scales: 2/3/4 tints, 6/7 borders, 9 solid, 11 text) */
#why,#tally{--hue-2:var(--saffron-2);--hue-3:var(--saffron-3);--hue-4:var(--saffron-4);--hue-6:var(--saffron-6);--hue-7:var(--saffron-7);--hue-9:var(--saffron-9);--hue-11:var(--saffron-11);}
#truth,#finish{--hue-2:var(--wisteria-2);--hue-3:var(--wisteria-3);--hue-4:var(--wisteria-4);--hue-6:var(--wisteria-6);--hue-7:var(--wisteria-7);--hue-9:var(--wisteria-9);--hue-11:var(--wisteria-11);}
#c1{--hue-2:var(--glacier-2);--hue-3:var(--glacier-3);--hue-4:var(--glacier-4);--hue-6:var(--glacier-6);--hue-7:var(--glacier-7);--hue-9:var(--glacier-9);--hue-11:var(--glacier-11);}
#c2,#finish{--hue-2:var(--orchid-2);--hue-3:var(--orchid-3);--hue-4:var(--orchid-4);--hue-6:var(--orchid-6);--hue-7:var(--orchid-7);--hue-9:var(--orchid-9);--hue-11:var(--orchid-11);}
#c7{--hue-2:var(--glacier-2);--hue-3:var(--glacier-3);--hue-4:var(--glacier-4);--hue-6:var(--glacier-6);--hue-7:var(--glacier-7);--hue-9:var(--glacier-9);--hue-11:var(--glacier-11);}
#tally{--hue-2:var(--pistachio-2);--hue-3:var(--pistachio-3);--hue-4:var(--pistachio-4);--hue-6:var(--pistachio-6);--hue-7:var(--pistachio-7);--hue-9:var(--pistachio-9);--hue-11:var(--pistachio-11);}
#c3{--hue-2:var(--pistachio-2);--hue-3:var(--pistachio-3);--hue-4:var(--pistachio-4);--hue-6:var(--pistachio-6);--hue-7:var(--pistachio-7);--hue-9:var(--pistachio-9);--hue-11:var(--pistachio-11);}
#c4{--hue-2:var(--persimmon-2);--hue-3:var(--persimmon-3);--hue-4:var(--persimmon-4);--hue-6:var(--persimmon-6);--hue-7:var(--persimmon-7);--hue-9:var(--persimmon-9);--hue-11:var(--persimmon-11);}
#c5{--hue-2:var(--wisteria-2);--hue-3:var(--wisteria-3);--hue-4:var(--wisteria-4);--hue-6:var(--wisteria-6);--hue-7:var(--wisteria-7);--hue-9:var(--wisteria-9);--hue-11:var(--wisteria-11);}
#money{--hue-2:var(--peach-2);--hue-3:var(--peach-3);--hue-4:var(--peach-4);--hue-6:var(--peach-6);--hue-7:var(--peach-7);--hue-9:var(--peach-9);--hue-11:var(--peach-11);}
#c6{--hue-2:var(--mocha-2);--hue-3:var(--mocha-3);--hue-4:var(--mocha-4);--hue-6:var(--mocha-6);--hue-7:var(--mocha-7);--hue-9:var(--mocha-9);--hue-11:var(--mocha-11);}
#moose{--hue-2:var(--gold-2);--hue-3:var(--gold-3);--hue-4:var(--gold-4);--hue-6:var(--gold-6);--hue-7:var(--gold-7);--hue-9:var(--gold-9);--hue-11:var(--gold-11)}
*{--hue-ink:color-mix(in srgb,var(--hue-11) 80%,#000)}
:root[data-theme="dark"] *{--hue-ink:var(--hue-11)}

body{background:var(--bg)}
::selection{background:var(--amber-5);color:var(--text)}
:focus-visible{outline-color:var(--wisteria-11)}
a{text-decoration-color:color-mix(in srgb,var(--hue-11) 45%,transparent)}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--hue-ink)}}

/* Display type: Manrope 800, tight tracking (big titles + numbers) */
.hero h1,.chapter h2,.c1-head h2,.deep h1,.deep section>h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.04}
.hero h1{font-weight:800;line-height:1.02;letter-spacing:-.04em}
.chapter h2,.c1-head h2{line-height:1.06}
.chapter h3,.why-grid h3,.proscons h3{letter-spacing:-.012em}
.why-grid .n,.deep .big-out,#cs-resultLine .pct{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* Bar: translucent cream with blur; the progress line is a little spectrum */
.bar{background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.brand svg{color:var(--mk-chain)}
.progress{height:3px;background:linear-gradient(90deg,var(--saffron-9),var(--persimmon-9) 20%,var(--orchid-9) 40%,var(--wisteria-9) 60%,var(--glacier-9) 80%,var(--pistachio-9));border-radius:0 3px 3px 0}
.dots a{height:6px;border-radius:var(--pill);transition:background .2s var(--ease),transform .2s var(--ease-spring)}
.dots a.seen{background:color-mix(in srgb,var(--text) 22%,transparent)}
.dots a.here{transform:scaleY(1.35)}
.dots a[href="#why"].here,.dots a[href="#tally"].here{background:var(--amber-9)}
.dots a[href="#truth"].here,.dots a[href="#finish"].here{background:var(--iris-9)}
.dots a.here{background:var(--hue-9)}
.dots a[href="#moose"].here{background:var(--gold-9)}

/* Buttons: pills, a little lift on hover, a little press on click */
.btn,.switch button{border-radius:var(--pill);transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn{background:var(--card);box-shadow:var(--shadow-1)}
@media (hover:hover) and (pointer:fine){.btn:hover,.switch button:hover{background:var(--card);border-color:var(--line-bright);transform:translateY(-1px);box-shadow:var(--shadow-2)}}
.btn:active,.switch button:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-1)}
.btn.primary{background:var(--hue-ink);border-color:var(--hue-ink);color:#fff}
@media (hover:hover) and (pointer:fine){.btn.primary:hover{background:color-mix(in oklab,var(--hue-ink) 82%,#000);border-color:transparent}}
:root[data-theme="dark"] .btn.primary{background:var(--hue-11);border-color:var(--hue-11);color:#16130f}
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] .btn.primary:hover{background:color-mix(in oklab,var(--hue-11) 85%,#fff);border-color:transparent}}
.switch button[aria-pressed="true"]{background:var(--wisteria-3);border-color:var(--wisteria-7);color:var(--text)}
.switch button[aria-pressed="true"] .st{color:var(--wisteria-11)}
.btn:disabled{transform:none;box-shadow:none}
input[type=range]{accent-color:var(--hue-11)}
input[type=text]{border-radius:var(--r);background:var(--card)}
.chapnav select{border-radius:var(--pill)}

/* Hero: warm light behind the live network, a soft floating card */
.hero{background:
  radial-gradient(42rem 30rem at 88% 8%,color-mix(in srgb,var(--peach-4) 85%,transparent),transparent 70%),
  radial-gradient(36rem 26rem at 62% 70%,color-mix(in srgb,var(--amber-3) 90%,transparent),transparent 70%),
  radial-gradient(30rem 24rem at 10% 12%,color-mix(in srgb,var(--amber-2) 90%,transparent),transparent 70%),var(--bg)}
:root[data-theme="dark"] .hero{background:
  radial-gradient(42rem 30rem at 88% 8%,color-mix(in srgb,var(--wisteria-4) 60%,transparent),transparent 70%),
  radial-gradient(36rem 26rem at 62% 70%,color-mix(in srgb,var(--amber-3) 80%,transparent),transparent 70%),
  radial-gradient(30rem 24rem at 10% 12%,color-mix(in srgb,var(--iris-3) 70%,transparent),transparent 70%),var(--bg)}
.hero-in{background:color-mix(in srgb,var(--card) 84%,transparent);border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3)}
.hud div{background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;box-shadow:var(--shadow-2)}
.hud b{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Chapters: each opens with a faint wash of its own hue */
.chapter{border-top:0;background:radial-gradient(56rem 22rem at 12% 0%,color-mix(in srgb,var(--hue-3) 75%,transparent),transparent 72%)}
.kicker{color:var(--hue-ink);font-weight:600}
.ch-tag{background:var(--hue-3);color:var(--hue-ink);border:1px solid var(--hue-6);border-radius:var(--pill);min-width:2.8em}
.takeaway{background:var(--hue-2);border-left:0;box-shadow:inset 4px 0 0 var(--hue-9);border-radius:var(--r);padding:var(--s4) var(--s5) var(--s4) calc(var(--s5) + 4px)}
.deeper{background:var(--card);border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.deeper .k{color:var(--hue-ink)}
.deeper .a{color:var(--hue-ink)}
@media (hover:hover) and (pointer:fine){.deeper:hover{background:var(--hue-2);border-color:var(--hue-7);transform:translateY(-2px);box-shadow:var(--shadow-2)}}
.deeper:active{transform:translateY(0) scale(.99)}
.stage,.proscons>div,.deep figure.inter{background:var(--card);border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.why-grid>div{border-top:0;padding:var(--s5);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.why-grid>div::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--hue-9)}
.why-grid>div:nth-child(2)::before{background:var(--amber-9)}
.why-grid>div:nth-child(3)::before{background:var(--iris-9)}
.why-grid>div:nth-child(1) .n{color:var(--hue-11)}
.why-grid>div:nth-child(2) .n{color:var(--amber-11)}
.why-grid>div:nth-child(3) .n{color:var(--iris-11)}
.dothis li b::before,.eighty li::before{color:var(--hue-ink)}
.dothis .tag,.vtag{border-radius:var(--pill)}
.dothis .tag{background:var(--hue-3);color:var(--hue-ink);border:1px solid var(--hue-6)}
.vtag{background:var(--text)}
.fit-table tr.kas th,.fit-table tr.kas td{background:var(--teal-2)}
.fit-table tr.kas th{box-shadow:inset 4px 0 0 var(--teal-9)}
.fit-table tbody th,.fit-table thead th:first-child{background:var(--bg)}
.fit-table tr.kas th{background:var(--teal-2)}
.proscons h3 i{border-radius:50%}

/* Expanders: round + that turns, panels that ease open */
details.more summary::before{border-radius:50%;border-color:var(--hue-7);color:var(--hue-ink);background:var(--hue-2);transition:transform .25s var(--ease-spring),background .18s var(--ease)}
details.more[open] summary::before{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){details.more summary:hover::before{background:var(--hue-4)}}
@media (hover:hover) and (pointer:fine){details.more summary:hover{color:var(--hue-ink)}}
details.nerd summary::after{border-radius:var(--pill)}
details.more .in{background:var(--hue-2);border-radius:var(--r)}
ol.steps li::before{border-radius:50%}
ol.steps li.on::before{background:var(--hue-11);border-color:var(--hue-11);color:#fff}
:root[data-theme="dark"] ol.steps li.on::before{color:var(--bg)}
.pop{border-radius:var(--r);box-shadow:var(--shadow-3);background:var(--card)}
@media (hover:hover) and (pointer:fine){.term:hover{color:var(--hue-ink)}}

/* Deep (learn) pages and segmented controls */
.deep figure.inter figcaption b{border-radius:var(--pill);background:var(--hue-3);color:var(--hue-ink);border:1px solid var(--hue-6)}
.deep .seg .btn:first-child{border-radius:var(--pill) 0 0 var(--pill)}
.deep .seg .btn:last-child{border-radius:0 var(--pill) var(--pill) 0}
.deep .seg .btn[aria-pressed=true]{background:var(--hue-ink);color:#fff;border-color:var(--hue-ink)}
:root[data-theme="dark"] .deep .seg .btn[aria-pressed=true]{background:var(--hue-11);color:#16130f;border-color:var(--hue-11)}
@media (hover:hover) and (pointer:fine){.deep .seg .btn:hover{transform:none}}
.deep-page{background:radial-gradient(60rem 26rem at 10% 0%,color-mix(in srgb,var(--hue-3) 80%,transparent),transparent 70%) no-repeat,var(--bg)}

@media (prefers-reduced-motion:reduce){
  @media (hover:hover) and (pointer:fine){.btn:hover,.deeper:hover,.switch button:hover{transform:none}}
  details.more[open] summary::before{transform:none}
}
.hue-cyan{--hue-2:var(--cyan-2);--hue-3:var(--cyan-3);--hue-4:var(--cyan-4);--hue-6:var(--cyan-6);--hue-7:var(--cyan-7);--hue-9:var(--cyan-9);--hue-11:var(--cyan-11)}
.hue-grass{--hue-2:var(--grass-2);--hue-3:var(--grass-3);--hue-4:var(--grass-4);--hue-6:var(--grass-6);--hue-7:var(--grass-7);--hue-9:var(--grass-9);--hue-11:var(--grass-11)}
.hue-blue{--hue-2:var(--blue-2);--hue-3:var(--blue-3);--hue-4:var(--blue-4);--hue-6:var(--blue-6);--hue-7:var(--blue-7);--hue-9:var(--blue-9);--hue-11:var(--blue-11)}
.hue-orange{--hue-2:var(--orange-2);--hue-3:var(--orange-3);--hue-4:var(--orange-4);--hue-6:var(--orange-6);--hue-7:var(--orange-7);--hue-9:var(--orange-9);--hue-11:var(--orange-11)}
.hue-plum{--hue-2:var(--plum-2);--hue-3:var(--plum-3);--hue-4:var(--plum-4);--hue-6:var(--plum-6);--hue-7:var(--plum-7);--hue-9:var(--plum-9);--hue-11:var(--plum-11)}
/* The live tally sentence changes length every few seconds: reserve its longest wording so the page below never shifts. */
#tOut{min-height:3lh}
@media (max-width:600px){#tOut{min-height:4lh}}
@media (max-width:360px){#tOut{min-height:6lh}}

/* Desktop card above: no backdrop blur, so the selected chain (the leader line) stays visible through it, as before 31 Oct.
   Phones: the selected chain (the dark leader line) must run in clear space between the counters and the text card,
   as it did before the warm redesign (31 Oct). Compact counters and a tighter card buy the room; the hero grows if it
   still lacks it. */
@media (max-width:760px){
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--bar-h,150px) + 250px)}
  .hero-in{position:relative;left:auto;right:auto;bottom:auto;margin:0 12px 12px}
  .hud div{padding:7px 10px;border-radius:12px;gap:0}
  .hud b{font-size:19px}
  .hud span{font-size:11px;line-height:1.25}
  .hero-in{padding:18px 16px 14px}
  .hero h1{font-size:36px;margin-bottom:10px}
  .hero-in .lead{font-size:16px;line-height:1.45;margin-bottom:10px}
  .hero-in .scale{font-size:17px;margin-bottom:4px}
  .hero-in .scale-note{font-size:12px;margin-bottom:12px}
  .hero-in .cta{margin-bottom:8px}
}

/* =====================================================================================================
   Bold layer (31 Oct, step 2). Same warm direction, pushed further. Sources in design-research-2026-10-31.md.
   - Chapter openers carry a huge faint chapter number in the chapter's own hue (editorial "chapter plate").
   - Headlines get a short hue swash; takeaways become colour cards; the key sentence is highlighted as you
     scroll to it (scroll-driven, CSS only, static highlight where unsupported).
   - "Go deeper" links become proper cards with an arrow chip; each chapter ends with a "Next chapter" card.
   - Content eases in once as it enters the screen (opacity/transform only, never layout; off with reduced motion).
   ===================================================================================================== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.chapter[data-num]{position:relative;overflow-x:clip}
.chapter[data-num]::before{content:attr(data-num);position:absolute;top:clamp(8px,2vw,28px);right:max(var(--gutter),calc((100% - var(--frame))/2 - 20px));
  font:800 clamp(120px,19vw,280px)/.8 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;
  color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--hue-6) 70%,transparent),transparent 92%);-webkit-background-clip:text;background-clip:text;
  pointer-events:none;user-select:none;z-index:0}
.chapter[data-num]>*{position:relative;z-index:1}
.chapter h2::after,.deep h1::after{content:"";display:block;width:64px;height:6px;margin-top:.32em;border-radius:var(--pill);background:linear-gradient(90deg,var(--hue-9),color-mix(in srgb,var(--hue-9) 35%,var(--amber-8)))}
.chapter .c1-head h2::after{margin-top:.32em}
/* takeaways: a colour card, the key sentence highlighted */
.takeaway{background:linear-gradient(135deg,var(--hue-3),var(--hue-2) 60%,color-mix(in srgb,var(--amber-2) 70%,var(--hue-2)));box-shadow:inset 4px 0 0 var(--hue-9),var(--shadow-1);border-radius:var(--r-lg);font-size:clamp(17px,1.5vw,19px)}
.takeaway b{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--hue-6) 75%,transparent) 58%) no-repeat 0 0/100% 100%;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .takeaway b{background-size:0% 100%;animation:ke-mark linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
  }
}
@keyframes ke-mark{to{background-size:100% 100%}}
/* go-deeper: a real card with an arrow chip */
.deeper{padding:var(--s4) var(--s4) var(--s4) var(--s5);background:linear-gradient(120deg,var(--card) 55%,var(--hue-2));border:1px solid var(--hue-6);gap:4px var(--s4)}
.deeper .k{font:600 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.deeper .t{font:800 clamp(17px,1.5vw,20px)/1.25 var(--display);letter-spacing:-.02em}
.deeper .a{grid-row:1/span 2;grid-column:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hue-9);color:#fff;font-size:18px;transition:transform .25s var(--ease-spring)}
@media (hover:hover) and (pointer:fine){.deeper:hover .a{transform:translateX(4px)}}
:root[data-theme="dark"] .deeper .a{color:var(--bg)}
/* end of chapter: the next one, named */
.next-ch{display:flex;align-items:center;gap:var(--s4);max-width:var(--measure);margin-top:var(--s8)!important;padding:var(--s4) 0 0;border-top:1px dashed var(--line-bright);text-decoration:none;color:var(--muted);font-size:14px}
.next-ch .ch-tag{flex:none}
.next-ch b{font:800 18px/1.2 var(--display);letter-spacing:-.02em;color:var(--text)}
.next-ch .arr{margin-left:auto;font-size:18px;color:var(--hue-ink);transition:transform .25s var(--ease-spring)}
@media (hover:hover) and (pointer:fine){.next-ch:hover b{color:var(--hue-ink)}}
@media (hover:hover) and (pointer:fine){.next-ch:hover .arr{transform:translateY(3px)}}
/* the five things: big coloured numerals */
.eighty li::before{font:800 28px/1 var(--display);letter-spacing:-.04em;color:var(--hue-9)}
.eighty li{transition:background .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.eighty li:hover{background:linear-gradient(90deg,var(--hue-2),transparent)}}
/* ease in once */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0ms)}
  .js-reveal .rv.on{opacity:1;transform:none}
}
@media (max-width:760px){
  .chapter[data-num]::before{font-size:120px;top:6px;right:12px}
  .deeper .a{width:34px;height:34px;font-size:16px}
}
/* Logo (approved 31 Oct): block-DAG mark, the chain runs through a gradient block to the coral leader; wordmark in Manrope */
.brand{gap:10px;font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-.025em;color:var(--text)}
.brand svg.logo-mark{width:auto;height:26px;flex:none}
.brand .wm b{font-weight:800}
@media (hover:hover) and (pointer:fine){.brand:hover .logo-mark .lead{filter:brightness(1.06)}}
@media (max-width:760px){.brand{font-size:16px}.brand svg.logo-mark{height:22px}}
@media (max-width:760px){.bar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Moose guest shelf (31 Oct): his books, covers and links untouched; only the frame around them */
#moose .meta{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--hue-11);background:var(--hue-3);border:1px solid var(--hue-6);border-radius:99px;padding:6px 12px;width:max-content}
#moose>.big{max-width:62ch}
#moose .book{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,3vw,40px);align-items:start;margin-top:var(--s6);padding:clamp(20px,3vw,36px);border-radius:24px;background:linear-gradient(135deg,var(--hue-2),color-mix(in srgb,var(--bg) 70%,var(--hue-2)) 60%);border:1px solid var(--hue-6);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -26px color-mix(in srgb,var(--hue-9) 55%,transparent)}
#moose .book>*{grid-column:2;margin-top:0}
#moose .book>*+*{margin-top:var(--s3)}
#moose .book>h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;margin:0}
#moose .book>.covers{grid-column:1;grid-row:1/span 9;margin:0;display:flex;gap:12px;list-style:none;padding:0}
#moose .covers li{margin:0}
#moose .covers a{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--faint);text-decoration:none}
#moose .covers img{border-radius:8px;box-shadow:0 10px 24px -12px rgba(60,40,0,.45);transition:transform .25s ease}
@media (hover:hover) and (pointer:fine){#moose .covers a:hover img{transform:translateY(-4px) rotate(-1deg)}}
#moose .book .actions{margin-top:var(--s4);gap:10px}
#moose .book .actions a{padding:0 16px;border-radius:99px;border:1px solid var(--hue-6);background:var(--bg);text-decoration:none;color:var(--text);font-weight:600}
@media (hover:hover) and (pointer:fine){#moose .book .actions a:hover{border-color:var(--hue-9);background:var(--hue-3)}}
#moose .book .actions a.primary{background:var(--hue-11);border-color:var(--hue-11);color:#fff}@media (hover:hover) and (pointer:fine){#moose .book .actions a.primary:hover{filter:brightness(1.1)}}
#moose>.actions a{font-weight:650}
@media (max-width:860px){#moose .book{grid-template-columns:minmax(0,1fr)}#moose .book>*,#moose .book>.covers{grid-column:1;grid-row:auto}#moose .book>.covers{overflow-x:auto;margin-bottom:var(--s3)}}
[data-theme="dark"] #moose .book .actions a.primary{color:#14110d}
/* Deep links */
[id]{scroll-margin-top:calc(var(--bar-h,64px) + 16px)}
.has-anchor{position:relative}
.anchor{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:8px;vertical-align:middle;border-radius:99px;border:1px solid transparent;background:transparent;color:var(--faint);cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s,border-color .15s;padding:0}
.anchor svg{width:16px;height:16px}
.anchor:focus-visible,.has-anchor:focus-within>.anchor{opacity:1}@media (hover:hover) and (pointer:fine){.has-anchor:hover>.anchor{opacity:1}}
@media (hover:hover) and (pointer:fine){.anchor:hover{color:var(--hue-11,var(--text));background:var(--hue-3,var(--bg));border-color:var(--hue-6,var(--line))}}
.anchor.corner{position:absolute;top:10px;right:10px;margin:0;z-index:2}
.proscons li .anchor{width:26px;height:26px;margin-left:4px}
@media (hover:none){.anchor{opacity:.55}.proscons li .anchor,details>summary .anchor{display:none}}
.flash{animation:ke-flash 2.1s ease-out}
@keyframes ke-flash{0%,30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--hue-9,#e58b2a) 45%,transparent);background-color:color-mix(in srgb,var(--hue-3,#fff6e0) 80%,transparent)}100%{box-shadow:0 0 0 4px transparent}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;outline:3px solid var(--hue-9,#e58b2a);outline-offset:4px}}
.copied-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1f1a14;color:#fbf8f1;font:600 14px/1 var(--font);padding:12px 18px;border-radius:99px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);transition:opacity .2s,transform .2s;z-index:100}
.copied-toast.on{opacity:1;transform:translate(-50%,0)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Footer with real ways onward (31 Oct) */
footer.site-foot{max-width:none;margin:0;padding:clamp(48px,7vw,88px) 0 calc(48px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--peach-2,#fdf1e8) 70%,var(--bg)),var(--bg) 70%);font-size:15px;color:var(--muted,var(--text));text-align:left}
.foot-in{max-width:var(--frame);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.3fr 1fr 1.2fr .9fr;gap:clamp(24px,4vw,56px)}
.site-foot .brand{font-size:18px}
.site-foot p{margin:14px 0 0;max-width:36ch;line-height:1.55}
.site-foot .stamp{font-size:13px;color:var(--faint)}
.site-foot h2{font:700 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:6px 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-foot li a{display:inline-flex;align-items:center;min-height:32px;color:var(--text);text-decoration:none;border-radius:6px}
@media (hover:hover) and (pointer:fine){.site-foot li a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}
@media (max-width:860px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}.site-foot li a{min-height:44px}}
@media (max-width:480px){.foot-in{grid-template-columns:1fr}}
/* Human-developer details (31 Oct) */
::selection{background:color-mix(in srgb,var(--hue-9,#2bb59a) 32%,transparent);color:inherit}
h1,h2,h3,.big,.t{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
:focus-visible{outline:2px solid var(--wisteria-11);outline-offset:3px}
button:focus-visible,a:focus-visible{border-radius:8px}

button:disabled,[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* Touch: no grey system flash; each tappable thing answers the finger with its own press instead */
a,button,summary,label,select,input,textarea,[role=button],[tabindex]{-webkit-tap-highlight-color:transparent}
a,button,summary,label[for],select,input,textarea,[role=button]{touch-action:manipulation}
button,summary,select,label[for],[role=button],input[type=range],input[type=checkbox],input[type=radio],.btn,.switch,.seg,.dots{-webkit-user-select:none;user-select:none}
:where(button,summary,[role=button],select){transition-property:transform,background-color,border-color,color,opacity;transition-duration:.12s}
:where(button,[role=button]):active{transform:scale(.96)}
:where(button:disabled,[aria-disabled=true]):active{transform:none}
:where(summary):active{opacity:.7}
:where(a[href]):active{opacity:.6}
:where(input[type=range]):active{cursor:grabbing}
@media print{.bar,.hud,.anchor,.next-ch,.copied-toast,#sound,canvas{display:none!important}.chapter{break-inside:auto;padding:24px 0}.js-reveal .rv{opacity:1!important;transform:none!important}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em}body{background:#fff}}
/* 31 Oct, increment 3: generic AI tells removed (Parker 11:41). No chapter numerals, no eyebrow labels, no arrow chips,
   no highlighter on words, no accent swash under headlines, no numbered markers. Hierarchy comes from type size and colour fields. */
.chapter[data-num]::before{content:none}
.chapter h2::after,.deep h1::after{content:none}
.takeaway b{background:none!important;animation:none!important;padding:0}
.eighty{counter-reset:none}
.eighty li::before{content:none!important}
.eighty li{grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important}
@media (max-width:640px){.eighty li{grid-template-columns:1fr!important}}
.eighty li b{font:800 clamp(18px,1.6vw,21px)/1.3 var(--display);letter-spacing:-.015em}
.deeper{grid-template-columns:1fr;padding:var(--s4) var(--s5);transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.deeper:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}}
.deeper .t{grid-column:1}
.next-ch{border-top:1px solid var(--line);font-size:16px}
.next-ch b{font-size:20px}
details.more summary::before{border:0!important;background:none!important;border-radius:0!important;width:auto;font:700 20px/1 var(--display);color:var(--hue-ink)}
details.nerd summary::after{font:500 14px var(--body,inherit);border:0;background:none;padding:0}
.eighty li span{font-size:16px;line-height:1.55;color:var(--muted)}
/* Strengths and weak spots on a scale (replaces the For/Against lists, 31 Oct) */
.chapter>.weigh{margin-top:var(--s5)}
.weigh-lead{max-width:var(--measure);color:var(--muted);margin:0 0 var(--s3)}
.scale-fig{margin:0 auto;max-width:640px}
.scale-svg{display:block;width:100%;height:auto;overflow:visible}
.scale-svg .post{fill:var(--bg-3,#e9e2d4)}
.scale-svg .pivot{fill:var(--text)}
.scale-svg .pan line{stroke:var(--faint);stroke-width:1.5}
.scale-svg .pan path{fill:var(--card,#fff);stroke:var(--line-bright);stroke-width:1.5}
.scale-svg .blk.p{fill:var(--teal-9)}
.scale-svg .blk.c{fill:var(--orange-9)}
.scale-svg .blk{animation:ke-drop .45s var(--ease-spring) both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes ke-drop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.scale-svg .blk{animation:none}}
.pan-names{display:flex;justify-content:space-between;padding:0 3%;font:700 17px/1.2 var(--display);letter-spacing:-.01em}
.pan-names span:first-child{color:var(--wisteria-11)}
.pan-names span:last-child{color:var(--orange-11)}
.pan-names b{font-variant-numeric:tabular-nums;font-weight:800;font-size:24px;vertical-align:-2px;margin:0 .2em}
.weigh-out{text-align:center;min-height:2lh;margin:var(--s3) auto 0;max-width:46ch;font-size:17px;color:var(--text)}
.weigh-btns{display:flex;justify-content:center;gap:var(--s3);margin:var(--s3) 0 var(--s5)}
.pairs{display:grid;gap:var(--s4)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2) var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.pair h4{grid-column:1/-1;margin:0;font:800 20px/1.2 var(--display);letter-spacing:-.02em;position:relative}
.pair h4 span{display:block;font:400 15px/1.4 var(--body,inherit);color:var(--muted);letter-spacing:0;margin-top:2px}
.pair .side{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);align-content:start}
.arg{position:relative;padding:var(--s3) var(--s4) var(--s3) 52px;border-radius:var(--r-lg,14px);border:1px solid var(--line);background:var(--card,#fff);font-size:15px;line-height:1.5;color:var(--muted);cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease-spring),box-shadow .25s var(--ease)}
.arg b{color:var(--text);font-weight:700}
.arg a{color:var(--muted)}
@media (hover:hover) and (pointer:fine){.arg:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}}
.arg.pro{box-shadow:none}
.arg.con{box-shadow:none}
.arg.pro.on{background:var(--wisteria-2);border-color:var(--wisteria-7)}
.arg.con.on{background:var(--saffron-2);border-color:var(--saffron-7)}
.arg input.w{position:absolute;left:16px;top:15px;width:22px;height:22px;margin:0;appearance:none;-webkit-appearance:none;border:2px solid var(--line-bright);border-radius:6px;background:var(--bg);cursor:pointer;transition:background .2s,border-color .2s}
.arg input.w::before{content:"";position:absolute;inset:-11px}
.arg.pro input.w:checked{background:var(--wisteria-11);border-color:var(--wisteria-11)}
.arg.con input.w:checked{background:var(--saffron-11);border-color:var(--saffron-11)}
.arg input.w:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
@media (max-width:700px){.pair{grid-template-columns:1fr}.pan-names{font-size:15px}.pan-names b{font-size:20px}}
/* claim verdicts as a four-step scale, not a pill */
.claims .vtag{display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:auto;padding:0;background:none;border-radius:0;color:var(--text);font:800 16px/1.1 var(--display);letter-spacing:-.01em;white-space:normal}
.claims .vtag::before{content:none}
.claims .vtag::after{content:"";width:88px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--vc) var(--vf),var(--bg-3,#e9e2d4) var(--vf))}
.vtag.true{--vc:var(--pistachio-9);--vf:100%;color:var(--pistachio-11)}
.vtag.true:where(:not(.mostly)){}
.vtag.half{--vc:var(--amber-9);--vf:50%;color:var(--amber-11)}
.vtag.old{--vc:var(--orange-9);--vf:15%;color:var(--orange-11)}
.vtag.open{--vc:var(--line-bright);--vf:0%;color:var(--muted)}
.vtag.open::after{background:repeating-linear-gradient(135deg,var(--bg-3,#e9e2d4) 0 4px,transparent 4px 8px);outline:1px dashed var(--line-bright)}
.vtag.mostly{--vf:75%}
.pair h4 span{font-family:var(--font);font-weight:400}
.arg.pro,.arg.con{box-shadow:none}
.arg.pro{background:color-mix(in srgb,var(--wisteria-2) 55%,var(--card,#fff))}
.arg.con{background:color-mix(in srgb,var(--saffron-2) 55%,var(--card,#fff))}
.arg.pro.on{background:var(--wisteria-3)}
.arg.con.on{background:var(--saffron-3)}
@media (hover:none){.arg .anchor,.pair h4 .anchor{display:none}}
/* theme switch: a short cross-fade instead of a hard flash */
.theme-fade,.theme-fade *{transition:background-color .35s ease,color .35s ease,border-color .35s ease !important}
@media (prefers-reduced-motion:reduce){.theme-fade,.theme-fade *{transition:none !important}}
/* motion: the reading bar scales on the compositor instead of animating width */
body:not(.deep-page) .progress{width:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear;border-radius:0}
/* ===== Increment 4 ===== */
/* Pay-now race */
.chapter>.race{max-width:var(--wide,980px);margin:var(--s7,56px) 0 var(--s6,40px)}
.race h3{margin:0 0 var(--s2)}
.race-lead{color:var(--muted);max-width:var(--measure);margin:0 0 var(--s5,28px)}
.race-track{--w:100%;position:relative;padding:34px 0 4px;display:grid;gap:14px}
.race-axis{position:absolute;inset:0 calc(150px) auto 110px;height:24px;font:500 13px/1 var(--font);color:var(--faint);font-variant-numeric:tabular-nums}
.race-axis span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);white-space:nowrap}
.race-axis span:first-child{transform:none}
.lane{display:grid;grid-template-columns:110px 1fr 150px;align-items:center;gap:0}
.lane b{font-weight:650;font-size:16px}
.lane .run{position:relative;height:30px;border-radius:15px;background:var(--bg-2);overflow:visible;container-type:inline-size}
.lane .run::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--goal) * 100%);border-radius:15px;background:color-mix(in srgb,var(--lane) 22%,transparent)}
.lane .goal{position:absolute;top:3px;bottom:3px;left:calc(var(--goal) * 100% - 12px);width:24px;border-radius:12px;background:var(--lane);opacity:.35}
.lane .dot{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--lane);--w:calc(100cqw - 30px);opacity:0;box-shadow:0 2px 8px color-mix(in srgb,var(--lane) 40%,transparent)}
.race.running .dot{opacity:1}
.lane.done .goal{opacity:1}
.lane.done .dot{opacity:0;transition:opacity .25s}
.lane .clock{padding-left:16px;font:600 16px/1.2 var(--font);font-variant-numeric:tabular-nums;color:var(--muted)}
.lane.done .clock{color:var(--text)}
.lane.kas{--lane:var(--teal-9)}.lane.sol{--lane:var(--plum-9,#a855f7)}.lane.eth{--lane:var(--iris-9,#5b5bd6)}.lane.btc{--lane:var(--orange-9)}
.race-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s5,28px)}
.race-ctl p{margin:0;color:var(--muted);min-height:1.5em}
@media (max-width:640px){
  .lane{grid-template-columns:1fr auto;row-gap:6px}
  .lane .run{grid-column:1/-1;grid-row:2}
  .lane .clock{padding-left:0;text-align:right}
  .race-axis{display:none}
  .race-track{padding-top:0}
}
/* Comparison table, designed: spaced rows, no grid lines, Kaspa row as a warm card */
.fit-table table{border-collapse:separate;border-spacing:0 6px;min-width:720px}
.fit-table thead th{font:600 14px/1.3 var(--font);color:var(--muted);border:0;padding-bottom:4px}
.fit-table th,.fit-table td{border:0;padding:14px 18px 14px 0;font-size:15.5px}
.fit-table tbody tr>*{background:var(--bg-2)}
.fit-table tbody tr>*:first-child{padding-left:18px;border-radius:14px 0 0 14px;font-family:var(--display);font-size:17px}
.fit-table tbody tr>*:last-child{border-radius:0 14px 14px 0}
.fit-table tr.kas th,.fit-table tr.kas td{background:var(--teal-3,#d7f0ec);color:var(--text)}
.fit-table tr.kas th{box-shadow:none}
.fit-table tbody th{background:var(--bg-2)}
.fit-table caption{font:650 19px/1.3 var(--display);padding-bottom:var(--s2)}
:root[data-theme="dark"] .fit-table tr.kas th,:root[data-theme="dark"] .fit-table tr.kas td{background:color-mix(in srgb,var(--teal-9) 20%,var(--bg))}
/* Steps above the ordering demo: no numbered circles; the current step is a soft card */
ol.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
ol.steps li::before{content:none !important}
ol.steps li{display:block;padding:12px 16px;border-radius:14px;background:transparent;transition:background-color .3s,color .3s;line-height:1.45}
ol.steps li.on{background:var(--hue-2);color:var(--text)}
@media (max-width:700px){ol.steps{grid-template-columns:1fr}}
/* "What you can do": no stock counters */
.dothis li b::before{content:none !important}
.dothis li.later{opacity:.75}
.lane .run::before{width:calc(var(--goal) * (100% - 30px) + 30px)}
.lane .goal{left:calc(3px + var(--goal) * (100% - 30px))}
.race-axis span{left:calc(15px + var(--x) * (100% - 30px))}
/* Satirical twin: Probably Nothing OS */
.chapter>.sister{max-width:var(--wide,980px)}
.sister{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;margin:40px 0;padding:22px;border-radius:22px;background:var(--bg-2);border:1px solid var(--line)}
.sister-art{aspect-ratio:4/3;border-radius:14px;background:#008080;display:grid;place-content:center;text-align:center;color:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #000;transform:rotate(-2deg);transition:transform .35s var(--ease,ease)}
@media (hover:hover) and (pointer:fine){.sister:hover .sister-art{transform:rotate(0deg) scale(1.03)}}
.sister-art span{font:800 24px/1.05 var(--display);letter-spacing:-.02em;text-shadow:2px 2px 0 #000}
.sister-art i{font:italic 500 13px/1 var(--font);margin-top:10px;opacity:.9}
.sister-t{font:650 20px/1.3 var(--display);margin:0 0 6px;color:var(--text)}
.sister-copy p{margin:0 0 14px;color:var(--muted)}
@media (max-width:640px){.sister{grid-template-columns:1fr}.sister-art{max-width:240px}}
@media (prefers-reduced-motion:reduce){.sister-art{transition:none}@media (hover:hover) and (pointer:fine){.sister:hover .sister-art{transition:none}}}
.chapter>ol.steps{max-width:780px}
.chapter .sister .sister-t{color:var(--text)}

/* ===== Increment 5: problem map, censorship clock, timeline ===== */
.vtag.no{--vc:var(--orange-9);--vf:0%;color:var(--orange-11)}
.lane .clock{letter-spacing:.015em;word-spacing:.06em;font-weight:560}
@media (max-width:700px){.lane .clock{font-size:15px;letter-spacing:.025em}}

.pmap{margin:28px 0 8px;max-width:var(--wide,1120px)}
.pmap-bar{display:flex;gap:6px;margin:0 0 18px}
.pmap-bar .seg{display:flex;align-items:baseline;gap:8px;min-height:52px;padding:10px 14px;border:0;border-radius:12px;font:650 16px/1.2 var(--font);color:var(--text);cursor:pointer;text-align:left;transition:opacity .25s,transform .25s,box-shadow .25s}
.pmap-bar .seg b{font:800 22px/1 var(--display)}
@media (hover:hover) and (pointer:fine){.pmap-bar .seg:hover{transform:translateY(-2px)}}
.pmap-bar .seg:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.pmap.filtered .seg[aria-pressed="false"]{opacity:.45}
.seg.s-live,.stg.s-live{background:var(--pistachio-3)}
.seg.s-early,.stg.s-early{background:var(--amber-3)}
.seg.s-paper,.stg.s-paper{background:color-mix(in srgb,var(--iris-9,#5b5bd6) 16%,var(--bg))}
.seg.s-open,.stg.s-open{background:repeating-linear-gradient(135deg,var(--bg-2) 0 6px,var(--bg-3) 6px 12px)}
.pmap-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pmap-grid li{position:relative;padding:18px 18px 16px;border-radius:16px;background:var(--bg-2);display:flex;flex-direction:column;gap:8px}
.pmap-grid li::before{content:none}
.pmap-grid h4{margin:0;font:750 19px/1.25 var(--display);letter-spacing:-.01em;text-wrap:balance}
.pmap-grid p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.pmap-grid p b{color:var(--text);font-weight:650}
.pmap-grid a{margin-top:auto;padding-top:4px;font-size:14.5px;color:var(--muted)}
.stg{align-self:flex-start;margin:0;padding:3px 10px;border-radius:6px;font:650 14px/1.4 var(--font);color:var(--text)}
.pmap figcaption{margin-top:14px;color:var(--muted);font-size:15px;max-width:var(--measure,68ch)}

.censor{margin:32px 0 8px;padding:24px;border-radius:20px;background:var(--bg-2);max-width:820px}
.censor h3{margin:0 0 8px}
.censor > p{margin:0 0 16px;color:var(--muted)}
.censor-ctl{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.censor-ctl b{font:800 28px/1 var(--display);font-variant-numeric:tabular-nums}
.censor input[type=range]{width:100%;min-height:44px;accent-color:var(--orange-9)}
.censor-roll{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;margin:8px 0 18px}
.censor-roll i{aspect-ratio:1;border-radius:4px;background:var(--wisteria-9);opacity:.35;transition:background .3s,opacity .3s,transform .3s}
.censor-roll i.no{background:var(--bg-3);opacity:1;box-shadow:inset 0 0 0 1px var(--line-bright)}
.censor-roll i.in{opacity:1;transform:scale(1.12);box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--wisteria-9)}
.censor-clocks{display:grid;gap:12px}
.cc{display:grid;grid-template-columns:90px 140px 1fr;align-items:center;gap:12px}
.cc span{font-weight:650}
.cc b{font:800 24px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.005em;white-space:nowrap}
.cc-bar{display:block;height:14px;border-radius:7px;background:var(--bg-3);overflow:hidden}
.cc-bar i{display:block;height:100%;border-radius:7px;transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cc.btc .cc-bar i{background:var(--orange-9)}.cc.kas .cc-bar i{background:var(--teal-9)}
.censor-out{margin:16px 0 12px;font-weight:550}
.censor figcaption{margin-top:14px;font-size:14.5px;color:var(--muted)}
@media (max-width:700px){.censor{padding:18px}.censor-roll{grid-template-columns:repeat(12,1fr)}.cc{grid-template-columns:70px 1fr}.cc-bar{grid-column:1/-1}}

.tl{margin:36px 0 12px;max-width:var(--wide,1120px)}
.tl > p{color:var(--muted)}
.tl-track{display:none}
.tl.tl-on .tl-track{display:block;overflow-x:auto;overflow-y:hidden;margin:14px 0 0;border-radius:18px;background:var(--bg-2);scrollbar-width:thin;overscroll-behavior-x:contain}
.tl-inner{position:relative;height:222px;min-width:1040px;margin:0 56px}
.tl-inner::before{content:"";position:absolute;left:-40px;right:-40px;top:110px;height:2px;background:var(--line-bright)}
.tl.tl-on .tl-list{display:none}
.tl-year{position:absolute;top:102px;transform:translateX(-50%);padding:0 6px;background:var(--bg-2);font:650 14px/18px var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.tl-dot{position:absolute;transform:translateX(-50%);min-height:44px;padding:0 14px;border:0;border-radius:10px;font:650 15px/44px var(--font);white-space:nowrap;cursor:pointer;color:var(--text);transition:transform .25s,box-shadow .25s,background .25s}
.tl-dot.crypto{background:var(--amber-3)}
.tl-dot.crypto[data-row="0"]{top:10px}.tl-dot.crypto[data-row="1"]{top:56px}
.tl-dot.kaspa{background:var(--teal-3)}
.tl-dot.kaspa[data-row="0"]{top:122px}.tl-dot.kaspa[data-row="1"]{top:168px}
@media (hover:hover) and (pointer:fine){.tl-dot:hover{transform:translateX(-50%) translateY(-2px)}}
.tl-dot[aria-selected="true"]{box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px currentColor}
.tl-dot.crypto[aria-selected="true"]{background:var(--amber-9);color:#1b1307}
.tl-dot.kaspa[aria-selected="true"]{background:var(--teal-9);color:#fff}
.tl-dot:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.tl-panel{margin-top:12px;padding:22px 24px;border-radius:18px;background:var(--bg-2);max-width:780px;view-transition-name:tlpanel}
.tl-panel.crypto{background:color-mix(in srgb,var(--amber-3) 55%,var(--bg-2))}
.tl-panel.kaspa{background:color-mix(in srgb,var(--teal-3) 55%,var(--bg-2))}
.tl-panel h4{margin:0 0 4px;font:800 24px/1.2 var(--display);letter-spacing:-.01em}
.tl-panel h4 time{display:block;font:600 15px/1.4 var(--font);color:var(--muted);letter-spacing:0}
.tl-panel .tl-ago{margin:0 0 10px;font-size:15px;color:var(--muted)}
.tl-panel p{margin:0 0 10px}
.tl-panel p b{font-weight:700}
.tl-panel > a{font-size:15px;color:var(--muted)}
.tl-list{list-style:none;padding:0;display:grid;gap:12px}
.tl-list li{padding:16px;border-radius:14px;background:var(--bg-2)}
.tl-list li::before{content:none}
@media (prefers-reduced-motion:reduce){.pmap-bar .seg,.censor-roll i,.cc-bar i,.tl-dot{transition:none}}
@media print{.tl-track,.tl-panel,.censor-roll,.pmap-bar{display:none!important}.tl.tl-on .tl-list{display:grid!important}}

/* Increment 5: live comparisons and builders on X */
.now{margin:32px 0 8px;padding:24px;border-radius:20px;background:var(--bg-2);max-width:900px}
.now h3{margin:0 0 6px}.now > p{margin:0 0 14px;color:var(--muted)}
.now-grid{display:grid;gap:22px}
.now-row h4{margin:0 0 8px;font:750 18px/1.3 var(--display)}
.now-bars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.now-bars li{display:grid;grid-template-columns:96px 1fr 150px;align-items:center;gap:12px}
.now-bars li::before{content:none}
.now-bars .nm{font-weight:650}
.now-bars .tr{display:block;height:16px;border-radius:8px;background:var(--bg-3);overflow:hidden}
.now-bars .tr i{display:block;height:100%;border-radius:8px;background:var(--amber-9);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.now-bars li.kas .tr i{background:var(--teal-9)}
.now-bars b{font:800 19px/1.2 var(--display);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.now-bars li.miss b{font:600 15px/1.2 var(--font);color:var(--muted)}
.now-src{margin:6px 0 0;font-size:14.5px;color:var(--muted)}
.now-as{margin:18px 0 8px;font-weight:600}
.now figcaption{font-size:14.5px;color:var(--muted)}
@media (max-width:700px){.now{padding:18px}.now-bars li{grid-template-columns:1fr auto;row-gap:4px}.now-bars .tr{grid-column:1/-1;grid-row:2}.now-bars b{font-size:17px}}
.xfeed{margin:36px 0 8px;max-width:1000px}
.xfeed > p{color:var(--muted);margin:0 0 8px}
.xfeed-upd{font-size:15px}
.xfeed-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-top:14px}
.xp{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:16px;background:var(--bg-2)}
.xp header{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.xp header a{font-weight:700;color:var(--text)}
.xp header time{color:var(--muted)}
.xp .plain{margin:0;font-size:16.5px;line-height:1.5}
.xp .cav{margin:0;font-size:14.5px;color:var(--orange-11)}
.xp details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:15px;color:var(--muted)}
.xp blockquote{margin:0 0 6px;padding:10px 12px;border-radius:10px;background:var(--bg-3);font-size:14.5px;white-space:pre-line}
.xp footer{padding:0;border:0;background:none;text-align:left;margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14.5px;color:var(--muted)}
.xp footer a{min-height:44px;display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){.now-bars .tr i{transition:none}}
.handoff{margin:16px 0 0;max-width:var(--measure);font-size:16.5px;line-height:1.55;color:var(--text)}
.handoff a{font-weight:650}
figure .handoff{font-size:16px}

/* Brand v3: the mark speaks GHOSTDAG. Parallel blue-set blocks (teal-blue) merge into the selected chain;
   the chain and the leader (its tip) are the strongest blue. Red is reserved for real red blocks in diagrams, never the logo. */
:root{--mk-blue:#3a9e90;--mk-chain:#17675e;--gd-blue:#178299;--gd-chain:#2350c8;--gd-red:#c2413a}
:root[data-theme="dark"]{--mk-blue:#3f9488;--mk-chain:#70c7ba;--gd-blue:#70c7ba;--gd-chain:#8fb4ff;--gd-red:#ff7b70}
.logo-mark .mk-lb{stroke:var(--mk-blue);stroke-width:4;stroke-linecap:round;fill:none}
.logo-mark .mk-ls{stroke:var(--mk-chain);stroke-width:5;stroke-linecap:round;fill:none}
.logo-mark .mk-b{fill:var(--mk-blue)}.logo-mark .mk-s{fill:var(--mk-chain)}
.logo-mark .lead,.logo-mark .merge{transform-box:fill-box;transform-origin:center}
.logo-mark.beat .lead{animation:mk-beat .5s cubic-bezier(.3,1.6,.5,1)}
.logo-mark.beat .merge{animation:mk-merge .5s ease-out}
@keyframes mk-beat{40%{transform:scale(1.14)}}
@keyframes mk-merge{40%{transform:scale(1.1)}}
.brand .wm{font-family:var(--display);letter-spacing:-.02em}
.brand .wm b{font-weight:800}
@media (prefers-reduced-motion:reduce){.logo-mark.beat .lead,.logo-mark.beat .merge{animation:none}}

/* Chapter closers: a confident sentence in the flow, no box, no bar (Parker, Oct 31 12:30) */
.takeaway,.chapter>.takeaway{background:none!important;box-shadow:none!important;border:0!important;border-radius:0;padding:0!important;margin-top:var(--s7);font:700 clamp(20px,2.1vw,25px)/1.38 var(--display);letter-spacing:-.015em;color:var(--text);text-wrap:pretty}
.takeaway b{font-weight:800;background:none!important;animation:none!important;padding:0}
.info-affordance__label{font:600 14px/1.3 var(--sans,inherit);color:var(--muted);text-decoration:underline dotted;text-decoration-color:var(--faint);text-underline-offset:4px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.info-affordance__trigger:hover .info-affordance__label{color:var(--text)}}

/* Timeline as a journey (Parker, Oct 31 12:35): eras of equal weight, packed rows, a price line that travels with you */
.tl-eras{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.tl-eras button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--bg-2);color:var(--muted);font:650 15px/44px var(--display);letter-spacing:-.005em;cursor:pointer;transition:background .2s,color .2s}
@media (hover:hover) and (pointer:fine){.tl-eras button:hover{color:var(--text)}}
.tl-eras button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.tl-eras button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.tl-inner{height:auto;min-width:0;margin:0 4px;transition:height .35s ease}
.tl-inner::before{top:var(--axis,110px);left:0;right:0}
.tl-year{transform:translateX(-50%);line-height:22px;transition:left .45s cubic-bezier(.3,.7,.2,1),top .35s}
.tl-dot{transform:none;transition:left .45s cubic-bezier(.3,.7,.2,1),top .35s cubic-bezier(.3,.7,.2,1),box-shadow .25s,background .25s}
.tl-dot.crypto[data-row],.tl-dot.kaspa[data-row]{top:auto}
@media (hover:hover) and (pointer:fine){.tl-dot:hover{transform:translateY(-2px)}}
.tl-dot[hidden],.tl-year[hidden]{display:none}
.tl-panel{max-width:820px}
.tl-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0!important}
.tl-step{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--bg);color:var(--text);font:700 16px/44px var(--display);cursor:pointer;transition:transform .2s}
.tl-step small{font:500 16px var(--display);color:var(--muted);margin-right:2px}
@media (hover:hover) and (pointer:fine){.tl-step:hover{transform:translateY(-1px)}}
.tl-step-on{margin-left:auto}
.tl-step:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.tl-ctx{max-width:820px;margin:10px 0 0;padding:16px 24px 14px;border-radius:18px;background:var(--bg-2)}
.tl-ctx[hidden]{display:none}
.tl-price{margin:0 0 10px;font:700 18px/1.4 var(--display);font-variant-numeric:tabular-nums;color:var(--text)}
.tl-spark{position:relative;height:96px;margin:0 0 6px}
.tl-spark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tl-spark-line{fill:none;stroke:color-mix(in srgb,var(--amber-9) 55%,var(--text));stroke-width:2;stroke-linejoin:round}
.tl-spark-here{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--text);box-shadow:0 0 0 3px var(--bg-2);transition:left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1)}
.tl-spark-here[hidden]{display:none}
.tl-spark-y{position:absolute;bottom:-20px;font:600 13px/1 var(--font);color:var(--muted)}
.tl-spark-y0{left:0}.tl-spark-y1{right:0}
.tl-ctx-pre .tl-spark{opacity:.45}
.tl-credit{margin:22px 0 0;font-size:14px;color:var(--muted)}
.tl-credit a{color:inherit}
@media (max-width:640px){
  .tl-eras{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--s5,20px))}
  .tl-eras button{flex:none}
  .tl-panel,.tl-ctx{padding:18px}
  .tl-panel h4{font-size:21px}
  .tl-step-on{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.tl-dot,.tl-year,.tl-inner,.tl-spark-here,.tl-step{transition:none}}
@media print{.tl-eras,.tl-ctx{display:none!important}}
.tl-panel .tl-roast{display:inline-block;margin-left:18px;font-size:15px;font-weight:650;color:var(--text)}

.tl{scroll-margin-top:96px}

/* 404: the one block that lost its parents */
.nf{padding-top:var(--s7)}
.nf-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--text)}
.nf-brand .logo-mark{width:40px;height:31px}
.nf-hero{margin:var(--s7) 0 var(--s6)}
.nf-art{width:min(320px,80vw);height:auto;display:block;margin:0 0 var(--s5);overflow:visible}
.nf-ln{fill:none;stroke:color-mix(in srgb,var(--text) 28%,transparent);stroke-width:3;stroke-linecap:round}
.nf-try{fill:none;stroke:var(--text);stroke-width:3;stroke-linecap:round;stroke-dasharray:64;stroke-dashoffset:64;transition:stroke-dashoffset .5s ease}
.nf-lost{fill:none;stroke:color-mix(in srgb,var(--text) 45%,transparent);stroke-width:2.5;stroke-dasharray:5 5;transform-box:fill-box;transform-origin:center;animation:nf-drift 3.2s ease-in-out infinite;transition:fill .4s,stroke .4s}
@keyframes nf-drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-5px) rotate(6deg)}}
@media (hover:hover) and (pointer:fine){.nf:has(.nf-go a:hover,.nf-go a:focus-visible) .nf-try{stroke-dashoffset:0}}
@media (hover:hover) and (pointer:fine){.nf:has(.nf-go a:hover,.nf-go a:focus-visible) .nf-lost{animation:none;fill:var(--amber-9);stroke:transparent}}
.nf h1{max-width:20ch}
.nf-go{list-style:none;padding:0;margin:0 0 var(--s8);display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;max-width:none}
.nf-go a{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:16px 18px;border-radius:14px;background:var(--bg-2);color:var(--text);text-decoration:none;transition:transform .2s ease,background .2s}
@media (hover:hover) and (pointer:fine){.nf-go a:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--amber-9) 22%,var(--bg-2))}}
.nf-go a:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.nf-go b{font:650 18px/1.25 var(--display);letter-spacing:-.01em}
.nf-go span{font-size:15px;line-height:1.45;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.nf-lost{animation:none}.nf-try,.nf-go a{transition:none}}

/* Brand v3 accents: blue leads where it matters (CTAs, the mark, GHOSTDAG blocks) */
.nf-art .mk-b{fill:var(--mk-blue)}.nf-art .mk-s{fill:var(--mk-chain)}
@media (hover:hover) and (pointer:fine){.nf:has(.nf-go a:hover,.nf-go a:focus-visible) .nf-lost{fill:var(--mk-blue)}}
@media (hover:hover) and (pointer:fine){.nf-go a:hover{background:color-mix(in srgb,var(--mk-blue) 14%,var(--bg-2))}}
/* Header mark v3.1: one chain block, two parallel blue blocks merging into the chain-blue tip. Short, thick links only. */
.logo-mark.mk2 .mk-ls{stroke:var(--mk-chain);stroke-width:3.2;stroke-linecap:round;fill:none}
.logo-mark.mk2 .mk-lb{stroke:var(--mk-blue);stroke-width:3.2;stroke-linecap:round;fill:none}
.brand svg.logo-mark.mk2{height:22px}
@media (max-width:760px){.brand svg.logo-mark.mk2{height:20px}}

/* Touch: every control gets a 44px target without changing how the page looks */
@media (pointer:coarse){
  .switch button{min-height:44px}
  .brand{min-height:44px}
  .anchor{width:44px;height:44px;margin:-7px -7px -7px 1px}
  .proscons li .anchor{width:44px;height:44px;margin:-9px -9px -9px -5px}
  .term{padding:10px 0;margin:-10px 0}
  .pmap-grid a{display:inline-block;padding:11px 0;margin-bottom:-6px}
}
@media (max-width:640px){
  .bar{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .bar.tuck{transform:translateY(calc(-100% + 3px))}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.bar{transition:none}}
@media (pointer:coarse),(max-width:760px){.chapnav select{min-height:44px;font-size:16px}}
@media (pointer:coarse){input[type=range]{min-height:44px}}
@media (hover:none){.anchor.corner{display:none}}

/* Theme switch (js/theme.js). Full tier: the new theme washes in as a soft radial gradient from the
   Theme button; only the snapshot's mask animates. Lite: a plain crossfade of the two snapshots.
   Reduced motion: a short crossfade. The page itself never animates its colors. */
@property --vt-r{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes vt-wash{from{--vt-r:0px}to{--vt-r:190vmax}}
:root.theme-vt::view-transition-group(*){animation-duration:.45s}
:root.theme-vt::view-transition-old(*),:root.theme-vt::view-transition-new(*){animation-duration:.45s}
:root.theme-vt-full::view-transition-new(root){
  -webkit-mask-image:radial-gradient(circle at var(--vt-x,92%) var(--vt-y,24px),#000 calc(var(--vt-r) - 40vmax),transparent var(--vt-r));
  mask-image:radial-gradient(circle at var(--vt-x,92%) var(--vt-y,24px),#000 calc(var(--vt-r) - 40vmax),transparent var(--vt-r));
  animation:vt-wash .7s cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal}
:root.theme-vt-full::view-transition-old(root){animation:none;mix-blend-mode:normal}
:root.theme-vt-reduce::view-transition-group(*),:root.theme-vt-reduce::view-transition-old(*),:root.theme-vt-reduce::view-transition-new(*){animation-duration:.15s}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  :root.theme-vt-reduce::view-transition-old(root){animation:vt-out .15s linear both!important}
  :root.theme-vt-reduce::view-transition-new(root){animation:vt-in .15s linear both!important}}
/* during the theme switch everything washes as one picture */
:root.theme-vt .deep h1,:root.theme-vt .tl-panel{view-transition-name:none}

/* The mark keeps its shape and tells the GHOSTDAG story in color: the chain block is the semantic
   blue of the chain, the parallel blocks are warm named colors, and the newest block, the tip, is
   Kaspa teal because it stands for Kaspa itself. */
:root{--mk-chain:#2350c8;--mk-a:#c48a22;--mk-b:#b4568a;--mk-tip:#2a9586;--mk-ln:#a47864}
:root[data-theme="dark"]{--mk-chain:#8fb4ff;--mk-a:#e3b154;--mk-b:#d886ad;--mk-tip:#70c7ba;--mk-ln:#9a7866}
.logo-mark.mk2 rect:nth-of-type(1){fill:var(--mk-chain)}.logo-mark.mk2 rect:nth-of-type(2){fill:var(--mk-a)}
.logo-mark.mk2 rect:nth-of-type(3){fill:var(--mk-b)}.logo-mark.mk2 rect:nth-of-type(4){fill:var(--mk-tip)}
.logo-mark.mk2 .mk-ls,.logo-mark.mk2 .mk-lb{stroke:var(--mk-ln)}
/* phones: text fields at 16px so iOS never zooms in on focus */
@media (pointer:coarse),(max-width:760px){input:not([type=range],[type=checkbox],[type=radio],[type=button],[type=submit]),select,textarea{font-size:16px}}
/* notched phones in landscape: keep the bar's content and the toast clear of the cutout and home indicator */
.bar{padding-top:env(safe-area-inset-top)}
.bar-in{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.copied-toast{bottom:calc(24px + env(safe-area-inset-bottom))}