:root{
  color-scheme: light;
  --bg:#F1F3F5; --surface:#FFFFFF; --ink:#151A21; --muted:#59636F; --line:#D6DCE3; --grid:#E5E9EE; --wash:#E9EDF1;
  --compute:#C0413A; --memory:#2769AB; --length:#A86E12; --quality:#2C8356; --base:#151A21;
  --good:#2C8356; --fine:#A86E12; --poor:#C0413A;
  --q:#C4501C; --k:#2769AB;
  --display:"Familjen Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0F1318; --surface:#171C23; --ink:#E6EAF0; --muted:#98A2AE; --line:#2B333D; --grid:#222A33; --wash:#1C222A;
    --compute:#E8695F; --memory:#5E9FE2; --length:#E1A640; --quality:#51BF86; --base:#E6EAF0;
    --good:#51BF86; --fine:#E1A640; --poor:#E8695F; --q:#F08A4E; --k:#5E9FE2;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0F1318; --surface:#171C23; --ink:#E6EAF0; --muted:#98A2AE; --line:#2B333D; --grid:#222A33; --wash:#1C222A;
  --compute:#E8695F; --memory:#5E9FE2; --length:#E1A640; --quality:#51BF86; --base:#E6EAF0;
  --good:#51BF86; --fine:#E1A640; --poor:#E8695F; --q:#F08A4E; --k:#5E9FE2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px; padding-block:48px 72px}
h1,h2,h3,.panel-title{font-family:var(--display); text-wrap:balance; line-height:1.12; margin:0}
h1{font-size:clamp(2.4rem,7vw,4.4rem); font-weight:700; letter-spacing:-0.025em; max-width:14ch}
h2{font-size:clamp(1.5rem,3.2vw,2rem); font-weight:700; letter-spacing:-0.01em; margin-bottom:.6rem}
h3{font-size:1.15rem; font-weight:600; margin-top:1.6rem}
p{margin:.6rem 0; max-width:68ch}
a{color:var(--memory); text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--memory); outline-offset:2px}
section{margin-top:64px}
.eyebrow,.control-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.top .lede{font-size:1.22rem; line-height:1.5; margin-top:1rem; max-width:60ch}
.top .meta{color:var(--muted); font-size:.95rem}
.k-q{color:var(--q); font-weight:600} .k-k{color:var(--k); font-weight:600}
.formula{font-family:var(--mono); font-size:1rem; background:var(--wash); border-radius:8px; padding:14px 16px; overflow-x:auto; white-space:nowrap; margin:1rem 0; max-width:68ch}

.two-up{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:20px}
.panel{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:12px}
.panel-title{font-size:1rem; font-weight:600}
figcaption{font-size:.88rem; color:var(--muted); line-height:1.5}
.plane{width:100%; max-width:300px; aspect-ratio:1; display:block; margin:0 auto; touch-action:none; cursor:crosshair}
svg text{font-family:var(--mono)}
.rows{display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:.78rem}
.row{display:grid; grid-template-columns:12px 3em 3.4em minmax(0,1fr) 3em; gap:8px; align-items:center}
.row.head{color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em}
.chip{width:12px; height:12px; border-radius:3px}
.bar{height:10px; background:var(--grid); border-radius:3px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--ink); opacity:.75}
.num,.pct{text-align:right; font-variant-numeric:tabular-nums} .num{color:var(--muted)}
.out{display:flex; gap:12px; align-items:center; font-family:var(--mono); font-size:.78rem}
.swatch{width:40px; height:40px; border-radius:8px; border:1px solid var(--line); flex:none}

.slider{display:grid; grid-template-columns:auto minmax(0,1fr) 3.4em; gap:12px; align-items:center; font-family:var(--mono); font-size:.8rem}
.slider strong{text-align:right; font-size:1rem}
input[type=range]{width:100%; accent-color:var(--ink)}
.bill{margin:0; display:flex; flex-direction:column; gap:10px}
.bill .line{display:grid; grid-template-columns:6.2em minmax(0,1fr); gap:12px; padding-left:10px; border-left:4px solid var(--c)}
.bill dt{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--c); padding-top:4px}
.bill dd{margin:0; display:flex; flex-direction:column}
.bill dd strong{font-family:var(--mono); font-size:1.1rem; font-variant-numeric:tabular-nums}
.bill dd span{font-size:.82rem; color:var(--muted); line-height:1.35}
.compute{--c:var(--compute)} .memory{--c:var(--memory)} .length{--c:var(--length)} .quality{--c:var(--quality)} .base{--c:var(--base)}

.chart-scroll{overflow-x:auto; margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:10px}
#chart{display:block; width:100%; min-width:900px; height:auto}
#chart .dot{cursor:pointer}
#chart .dot:hover circle,#chart .dot:focus circle{stroke-width:3}
#chart .dot.dim{opacity:.18}

.controls{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; margin-top:48px; background:var(--bg); padding-block:12px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center}
.control{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.seg{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface)}
.seg button{font-family:var(--mono); font-size:.76rem; border:0; background:transparent; color:var(--ink); padding:7px 11px; cursor:pointer; border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-checked="true"]{background:var(--ink); color:var(--bg)}

.cards{margin-top:24px; display:flex; flex-direction:column; gap:22px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:10px 28px; scroll-margin-top:90px; position:relative}
.card::before{content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px; border-radius:0 3px 3px 0; background:var(--c)}
.card[hidden]{display:none}
@media (max-width:760px){ .card{grid-template-columns:1fr} .card .viz{order:2} }
.card-head{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px}
.idx{font-family:var(--mono); font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums}
.card h3{margin:0; font-size:1.35rem; font-weight:700}
.date{font-family:var(--mono); font-size:.82rem; font-weight:600; color:var(--c)}
.badge{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:4px; border:1px solid var(--line); color:var(--muted)}
.badge.lane{border-color:var(--c); color:var(--c)}
.badge.added{border-style:dashed}
.card .body{display:flex; flex-direction:column; gap:10px; min-width:0}
.card p{margin:0; font-size:.98rem}
.label{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2px}
.note{font-size:.88rem; color:var(--muted); border-left:2px solid var(--line); padding-left:10px}
.tradeoffs{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.tradeoffs ul{margin:0; padding-left:1.1rem; font-size:.93rem}
.tradeoffs li{margin:.2rem 0}
.tradeoffs .buys .label{color:var(--good)} .tradeoffs .costs .label{color:var(--poor)}
.fit{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
.fit div{font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); border-radius:6px; padding:5px 7px; color:var(--muted); display:flex; flex-direction:column; gap:1px}
.fit b{font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.fit .good b{color:var(--good)} .fit .fine b{color:var(--fine)} .fit .poor b{color:var(--poor)}
.fit div.on{border-color:var(--ink); color:var(--ink); background:var(--wash)}
.fit-why{font-size:.9rem}
.sources{font-family:var(--mono); font-size:.74rem; line-height:1.55; margin:0; padding-left:1rem; color:var(--muted)}
.viz{display:flex; flex-direction:column; gap:8px; align-items:center}
.viz svg{width:100%; max-width:250px; height:auto; display:block}
.viz .cap{font-family:var(--mono); font-size:.7rem; color:var(--muted); text-align:center; line-height:1.4}
.viz button{font-family:var(--mono); font-size:.74rem; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:5px 9px; cursor:pointer}
.viz button:hover{border-color:var(--ink)}

.prose{max-width:72ch}
.prose ul{padding-left:1.2rem} .prose li{margin:.35rem 0}
.arc{list-style:none; padding:0; margin:1rem 0; display:flex; flex-direction:column; gap:8px}
.arc li{display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:12px; align-items:baseline}
@media (max-width:520px){ .arc li{grid-template-columns:1fr; gap:2px} }
.tag{font-family:var(--mono); font-size:.74rem; color:var(--c); font-weight:600; border-left:3px solid var(--c); padding-left:8px}
.foot{margin-top:64px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem}