/* ============ TOKENS ============ */
:root{
  --font-display: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --font-math: "STIX Two Text", "Cambria Math", ui-serif, "New York", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --bg:#F4F5F8; --surface:#FFFFFF; --surface-2:#FAFBFD;
  --ink:#171A21; --ink-2:#3D424E; --muted:#6E7480;
  --border:#E4E7EC; --border-strong:#CED3DC;
  --accent:#4B44C7; --accent-soft:#EDECFB; --accent-ink:#38329A; --accent-line:#C9C6F1;
  --real:#0C8676; --real-soft:#E2F2EF;
  --gen:#B94862; --gen-soft:#FAE9ED;
  --warn:#A96B08; --warn-soft:#FBF0DC;
  --good:#0C8676; --good-soft:#E2F2EF;
  --shadow: 0 1px 2px rgba(20,24,33,.04), 0 8px 24px -12px rgba(20,24,33,.14);
  --shadow-sm: 0 1px 2px rgba(20,24,33,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1117; --surface:#171A21; --surface-2:#1C2028;
    --ink:#ECEEF3; --ink-2:#B6BBC6; --muted:#858B98;
    --border:#262B35; --border-strong:#353C48;
    --accent:#9E96FF; --accent-soft:#211F38; --accent-ink:#BAB4FF; --accent-line:#3A3663;
    --real:#33C6B0; --real-soft:#132824;
    --gen:#E6889D; --gen-soft:#2A171C;
    --warn:#DFA94C; --warn-soft:#2A2314;
    --good:#33C6B0; --good-soft:#132824;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1117; --surface:#171A21; --surface-2:#1C2028;
  --ink:#ECEEF3; --ink-2:#B6BBC6; --muted:#858B98;
  --border:#262B35; --border-strong:#353C48;
  --accent:#9E96FF; --accent-soft:#211F38; --accent-ink:#BAB4FF; --accent-line:#3A3663;
  --real:#33C6B0; --real-soft:#132824;
  --gen:#E6889D; --gen-soft:#2A171C;
  --warn:#DFA94C; --warn-soft:#2A2314;
  --good:#33C6B0; --good-soft:#132824;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
}
:root[data-theme="light"]{
  --bg:#F4F5F8; --surface:#FFFFFF; --surface-2:#FAFBFD;
  --ink:#171A21; --ink-2:#3D424E; --muted:#6E7480;
  --border:#E4E7EC; --border-strong:#CED3DC;
  --accent:#4B44C7; --accent-soft:#EDECFB; --accent-ink:#38329A; --accent-line:#C9C6F1;
  --real:#0C8676; --real-soft:#E2F2EF;
  --gen:#B94862; --gen-soft:#FAE9ED;
  --warn:#A96B08; --warn-soft:#FBF0DC;
  --good:#0C8676; --good-soft:#E2F2EF;
  --shadow: 0 1px 2px rgba(20,24,33,.04), 0 8px 24px -12px rgba(20,24,33,.14);
  --shadow-sm: 0 1px 2px rgba(20,24,33,.05);
}

/* ============ RESET / BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{line-height:1.2; text-wrap:balance; margin:0}
p{margin:0 0 1rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px}

/* progress bar */
#progress{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--accent); z-index:60; transition:width .08s linear}

/* ============ SHELL / LAYOUT ============ */
.shell{max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.layout{display:grid; grid-template-columns:255px minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
@media (max-width:1000px){ .layout{grid-template-columns:1fr; gap:0} }

/* ============ SIDEBAR ============ */
.sidebar{position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto; padding:26px 4px 40px}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:8px}
.brand{font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; margin-bottom:2px}
.brand span{color:var(--accent)}
.brand-sub{font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin-bottom:20px}
.toc{list-style:none; margin:0 0 24px; padding:0; border-left:1.5px solid var(--border); font-size:.86rem}
.toc a{display:block; color:var(--ink-2); padding:5px 0 5px 14px; margin-left:-1.5px; border-left:1.5px solid transparent; line-height:1.35}
.toc a:hover{color:var(--ink); text-decoration:none}
.toc a.active{color:var(--accent); border-left-color:var(--accent); font-weight:600}
.toc .toc-num{font-family:var(--font-display); font-variant-numeric:tabular-nums; color:var(--muted); font-size:.78rem; margin-right:7px}
.toc a.active .toc-num{color:var(--accent)}

.side-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 15px; margin-bottom:16px; box-shadow:var(--shadow-sm)}
.side-card h4{font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:10px; font-weight:700}
.legend-row{display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--ink-2); margin-bottom:7px}
.legend-row:last-child{margin-bottom:0}
.dot{width:11px; height:11px; border-radius:3px; flex:none}

.theme-toggle{display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; background:var(--surface); border:1px solid var(--border); color:var(--ink-2); font-family:inherit; font-size:.8rem; font-weight:600; padding:9px 12px; border-radius:9px; cursor:pointer}
.theme-toggle:hover{border-color:var(--border-strong); color:var(--ink)}

/* mobile top bar */
.mobilebar{display:none}
@media (max-width:1000px){
  .sidebar{display:none}
  .mobilebar{display:block; position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); margin:0 calc(-1*clamp(16px,4vw,40px)); padding:11px clamp(16px,4vw,40px)}
  .mobilebar-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
  .mobilebar .brand{margin:0; font-size:.95rem}
  .mobilebar details summary{list-style:none; cursor:pointer; font-size:.8rem; font-weight:600; color:var(--accent); padding:6px 0}
  .mobilebar details summary::-webkit-details-marker{display:none}
  .mobilebar .toc{margin:12px 0 4px; max-height:60vh; overflow:auto}
}

/* ============ MAIN ============ */
main{padding:0 0 96px; min-width:0}
.content{max-width:760px}

/* HERO */
.hero{padding:clamp(40px,7vw,86px) 0 clamp(30px,4vw,44px)}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--accent-ink); font-weight:700; margin-bottom:22px}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--accent)}
.hero h1{font-family:var(--font-display); font-weight:700; font-size:clamp(2.1rem,5.4vw,3.4rem); letter-spacing:-.02em; margin-bottom:18px}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero .lede{font-size:clamp(1.05rem,2vw,1.22rem); color:var(--ink-2); max-width:60ch; line-height:1.6}
.facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.fact{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 15px; box-shadow:var(--shadow-sm)}
.fact b{display:block; font-family:var(--font-display); font-size:1.28rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.fact span{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}

.usenote{margin-top:30px; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:12px; padding:16px 18px; font-size:.92rem; color:var(--ink-2)}
.usenote b{color:var(--accent-ink)}

/* SECTIONS */
section.block{padding:clamp(34px,5vw,58px) 0; border-top:1px solid var(--border)}
.sec-head{margin-bottom:26px}
.sec-kicker{display:flex; align-items:baseline; gap:14px; margin-bottom:12px}
.sec-num{font-family:var(--font-display); font-size:.98rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.sec-tag{font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-weight:700; border:1px solid var(--border); padding:3px 8px; border-radius:20px}
h2.sec-title{font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3.3vw,2.15rem); letter-spacing:-.015em}
.sec-lede{color:var(--ink-2); font-size:1.04rem; margin-top:10px; max-width:64ch}

h3{font-family:var(--font-display); font-size:1.28rem; font-weight:700; letter-spacing:-.01em; margin:34px 0 12px}
h4.mini{font-size:.98rem; font-weight:700; margin:22px 0 8px; color:var(--ink)}
.content p, .content li{color:var(--ink-2)}
.content strong{color:var(--ink); font-weight:650}
ul.tight,ol.tight{margin:0 0 1rem; padding-left:1.25em}
ul.tight li,ol.tight li{margin-bottom:.4rem}
mark{background:color-mix(in srgb, var(--accent) 26%, transparent); color:inherit; padding:.1em .24em; margin:0 -.06em; border-radius:5px; box-decoration-break:clone; -webkit-box-decoration-break:clone; font-weight:600}

/* KEY TERM chips inline */
.term{font-weight:650; color:var(--ink); border-bottom:1.5px dotted var(--accent-line)}

/* ============ MATH ============ */
.im{font-family:var(--font-math); font-size:1.02em; white-space:nowrap}
/* Math must never inherit case-folding from an uppercase parent (.lbl, .call-t,
   thead th, .cheat-card h5): it silently rewrites symbols, e.g. d_k -> D_K. */
.im, .im *{text-transform:none}
.formula{font-family:var(--font-math); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:9px; padding:16px 20px; margin:18px 0; font-size:1.14rem; overflow-x:auto; line-height:2; box-shadow:var(--shadow-sm)}
.formula.center{text-align:center}
.formula .lbl{display:block; font-family:var(--font-body); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:8px; font-weight:700}
.formula .note{display:block; font-family:var(--font-body); font-size:.82rem; color:var(--muted); margin-top:9px; line-height:1.5; white-space:normal}
.frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 .18em; font-size:.92em}
.frac>.n{border-bottom:1.3px solid currentColor; padding:0 .34em .04em}
.frac>.d{padding:.04em .34em 0}
sub,sup{font-size:.72em; line-height:0}
.op{font-family:var(--font-body); font-style:normal; font-size:.9em}

/* ============ CALLOUTS ============ */
.call{border-radius:12px; padding:15px 17px 15px 18px; margin:20px 0; font-size:.94rem; border:1px solid; position:relative; line-height:1.6}
.call .call-t{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:7px}
.call p:last-child{margin-bottom:0}
.call .ico{width:18px; height:18px; flex:none}
.call.yield{background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 35%,transparent); color:var(--ink-2)}
.call.yield .call-t{color:var(--good)}
.call.tip{background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink-2)}
.call.tip .call-t{color:var(--accent-ink)}
.call.pitfall{background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 35%,transparent); color:var(--ink-2)}
.call.pitfall .call-t{color:var(--warn)}
.call.intuition{background:var(--surface-2); border-color:var(--border-strong); color:var(--ink-2)}
.call.intuition .call-t{color:var(--muted)}
.call b{color:var(--ink)}
.call-list{list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.call-list li{display:flex; gap:10px; line-height:1.55; align-items:baseline}
.call-list .cnum{font-weight:700; flex:none; font-variant-numeric:tabular-nums}
.call.yield .call-list .cnum{color:var(--good)}
.call.tip .call-list .cnum{color:var(--accent-ink)}
.call.pitfall .call-list .cnum{color:var(--warn)}
.call.intuition .call-list .cnum{color:var(--ink)}

/* ============ TABLES ============ */
.table-wrap{overflow-x:auto; margin:18px 0; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm)}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:440px}
thead th{background:var(--surface-2); text-align:left; font-weight:700; color:var(--ink); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:11px 14px; border-bottom:1.5px solid var(--border-strong)}
td{padding:11px 14px; border-bottom:1px solid var(--border); color:var(--ink-2); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td .im, th .im{font-size:1em}
td.mono, .nowrap{white-space:nowrap}

/* ============ CODE ============ */
pre{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; overflow-x:auto; margin:16px 0; font-size:.85rem; line-height:1.6; box-shadow:var(--shadow-sm)}
code{font-family:var(--font-mono)}
p code,li code,td code{background:var(--surface-2); border:1px solid var(--border); padding:.06em .38em; border-radius:5px; font-size:.85em; color:var(--ink); white-space:nowrap}
pre code{background:none; border:none; padding:0; color:var(--ink)}
.tok-k{color:var(--accent)} .tok-c{color:var(--muted); font-style:italic} .tok-s{color:var(--real)} .tok-f{color:var(--gen)}

/* ============ PIPELINE DIAGRAM ============ */
.pipe{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm); font-size:.9rem}
.node{padding:9px 13px; border-radius:9px; border:1.5px solid var(--border-strong); background:var(--surface-2); font-family:var(--font-math); text-align:center; line-height:1.3}
.node.z{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-ink)}
.node.g{border-color:color-mix(in srgb,var(--gen) 45%,transparent); background:var(--gen-soft)}
.node.d{border-color:color-mix(in srgb,var(--real) 45%,transparent); background:var(--real-soft)}
.node small{display:block; font-family:var(--font-body); font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px}
.arrow{color:var(--muted); font-size:1.15rem; flex:none}

/* ============ TOPIC CHART ============ */
.chart{margin:22px 0}
.bar-row{display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) auto; gap:12px; align-items:center; padding:7px 0; font-size:.86rem}
.bar-row .lab{color:var(--ink-2); font-weight:600}
.bar-track{background:var(--surface-2); border:1px solid var(--border); border-radius:6px; height:22px; overflow:hidden}
.bar-fill{height:100%; border-radius:5px 0 0 5px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,var(--gen)))}
.bar-row .cnt{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.8rem; font-weight:700; text-align:right; min-width:64px}
.bar-fill.t3{background:var(--good)} .bar-fill.t2{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--gen)))} .bar-fill.t1{background:var(--muted)}

/* ============ QUESTION CARDS ============ */
.q{background:var(--surface); border:1px solid var(--border); border-radius:13px; margin:18px 0; overflow:hidden; box-shadow:var(--shadow-sm)}
.q-head{padding:15px 18px}
.q-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px}
.q-type{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border-radius:20px; background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent-line)}
.q-type.msq{background:var(--gen-soft); color:var(--gen); border-color:color-mix(in srgb,var(--gen) 40%,transparent)}
.q-type.nat{background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.q-src{font-size:.7rem; color:var(--muted); letter-spacing:.03em}
.q-marks{margin-left:auto; font-size:.7rem; color:var(--muted); font-weight:700}
.q-body{color:var(--ink); font-size:.96rem; line-height:1.6}
.q-body .im{font-size:1em}
.opts{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.opts li{padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:.9rem; color:var(--ink-2); background:var(--surface-2)}
.opts-lab{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin:13px 0 6px}
.subq{font-weight:400; color:var(--ink); font-size:.96rem; margin:18px 0 10px; padding-top:14px; border-top:1px dashed var(--border)}
.opts li{cursor:pointer; user-select:none; position:relative; padding-right:34px; transition:background .12s ease, border-color .12s ease}
.opts li:hover{border-color:var(--accent-line)}
.opts.done li{cursor:default}
.opts li.sel{border-color:var(--accent); background:var(--accent-soft)}
.opts li.ok{border-color:var(--good); background:var(--good-soft)!important}
.opts li.no{border-color:var(--gen); background:var(--gen-soft)!important}
.opts li .mk{position:absolute; right:11px; top:50%; transform:translateY(-50%); font-weight:800}
.opts li.ok .mk{color:var(--good)} .opts li.no .mk{color:var(--gen)}
.opts-check{margin:14px 0 4px; font:inherit; font-size:.78rem; font-weight:700; color:#fff; background:var(--accent); border:none; padding:8px 15px; border-radius:8px; cursor:pointer}
.opts-check:hover{filter:brightness(1.08)}
.q details{border-top:1px solid var(--border); background:var(--surface-2)}
.q details summary{list-style:none; cursor:pointer; padding:12px 18px; font-size:.8rem; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:8px; user-select:none}
.q details summary::-webkit-details-marker{display:none}
.q details summary .chev{transition:transform .2s ease}
.q details[open] summary .chev{transform:rotate(90deg)}
.q details[open] summary{color:var(--good)}
.ans{padding:2px 18px 16px; font-size:.92rem; color:var(--ink-2); line-height:1.6}
.ans .correct{display:inline-block; font-weight:700; color:var(--good); background:var(--good-soft); border:1px solid color-mix(in srgb,var(--good) 40%,transparent); padding:2px 9px; border-radius:6px; margin-bottom:8px; font-family:var(--font-math)}
.ans b{color:var(--ink)}

/* ============ DERIVATIONS (proof timeline) ============ */
.deriv{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:clamp(16px,3vw,24px) clamp(16px,3vw,26px); margin:18px 0 26px; box-shadow:var(--shadow-sm)}
.deriv-goal{display:flex; flex-wrap:wrap; align-items:center; gap:11px; padding-bottom:15px; margin-bottom:18px; border-bottom:1px dashed var(--border-strong); font-family:var(--font-math); font-size:1.05rem; line-height:1.7; color:var(--ink); overflow-x:auto}
.goal-tag{font-family:var(--font-body); font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line); padding:3px 9px; border-radius:20px; flex:none}
.steps{list-style:none; margin:0; padding:0; counter-reset:dstep}
.step{position:relative; padding-left:44px; padding-bottom:20px; min-height:30px}
.step:last-child{padding-bottom:0}
.step::before{counter-increment:dstep; content:counter(dstep); position:absolute; left:0; top:-2px; width:29px; height:29px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); border:1.5px solid var(--accent-line); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.82rem; font-variant-numeric:tabular-nums}
.step:not(:last-child)::after{content:""; position:absolute; left:14px; top:30px; bottom:0; width:1.5px; background:var(--border)}
.step-math{font-family:var(--font-math); font-size:1.06rem; line-height:1.95; overflow-x:auto; color:var(--ink); padding:1px 0}
.step-why{font-size:.85rem; color:var(--muted); line-height:1.55; margin-top:4px}
.step-why b{color:var(--ink-2)}
.step.qed::before{counter-increment:none; content:"∎"; background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb,var(--good) 40%,transparent); font-family:var(--font-body); font-size:.9rem}
.step.qed .step-math{font-weight:600}
.deriv-mid{font-family:var(--font-body); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:2px 0 14px}

/* ============ CHEAT SHEET ============ */
.cheat{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:22px 0}
.cheat-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 16px; box-shadow:var(--shadow-sm)}
.cheat-card h5{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); margin:0 0 9px; font-weight:700}
.cheat-card .f{font-family:var(--font-math); font-size:1.02rem; line-height:1.9; color:var(--ink); overflow-x:auto}
.cheat-card p{font-size:.82rem; margin:8px 0 0; color:var(--muted)}

/* ============ CHECKLIST ============ */
.checklist{list-style:none; margin:18px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.checklist li{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:11px 14px 11px 40px; position:relative; font-size:.88rem; color:var(--ink-2); box-shadow:var(--shadow-sm)}
.checklist li::before{content:"✓"; position:absolute; left:13px; top:11px; color:var(--good); font-weight:800}

/* footer */
footer{border-top:1px solid var(--border); padding:26px 0 60px; color:var(--muted); font-size:.82rem; max-width:760px}
footer b{color:var(--ink-2)}

/* misc */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:620px){ .two-col{grid-template-columns:1fr} .bar-row{grid-template-columns:minmax(90px,1fr) 2fr auto; font-size:.8rem} }
.duo{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 0}
.pill{font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:20px; border:1px solid}
.pill.real{color:var(--real); background:var(--real-soft); border-color:color-mix(in srgb,var(--real) 35%,transparent)}
.pill.gen{color:var(--gen); background:var(--gen-soft); border-color:color-mix(in srgb,var(--gen) 35%,transparent)}