:root{
  --bg:#EDF0EF; --surface:#FFFFFF; --sunk:#F4F7F6; --ink:#15201C; --muted:#56665F; --faint:#88968F;
  --line:#D3DBD8; --line-strong:#B5C1BC;
  --accent:#0E6E55; --accent-ink:#FFFFFF; --accent-soft:#DCEFE7;
  --warn:#9A4A14; --warn-soft:#F6E5D7;
  --bar:#9CCBB9;
  --t-laptop:#3B5FA3; --t-desktop:#6B4FA0; --t-workstation:#0E7A5C; --t-server:#A0561A; --t-mini:#3E7F8F; --t-aio:#8A5A7A;
  --side-w:340px; --top-h:60px;
  --font-d:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-b:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0F1513; --surface:#151D1A; --sunk:#1A2320; --ink:#E2EBE7; --muted:#9AA9A3; --faint:#6E7D77;
    --line:#25312D; --line-strong:#34433E;
    --accent:#45C39B; --accent-ink:#08130F; --accent-soft:#16352B;
    --warn:#E8935A; --warn-soft:#382317;
    --bar:#2E6B56;
    --t-laptop:#86A6E6; --t-desktop:#B39BE6; --t-workstation:#45C39B; --t-server:#E6A04A; --t-mini:#72C0D0; --t-aio:#D59BC2;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font-b);-webkit-text-size-adjust:100%}
a{color:var(--accent)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--font-m);font-variant-numeric:tabular-nums}

/* top bar */
/* the bar is always dark, in both themes — never tie it to --ink, which flips to near-white in dark mode */
.top{position:sticky;top:0;z-index:20;height:var(--top-h);display:flex;align-items:center;gap:16px;padding-inline:16px;background:#111A17;color:#E9F1EE;border-bottom:1px solid #26332E}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:600 22px/1 var(--font-d);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.brand b{color:#6FD6B2;font-weight:700}
.brand-mark{width:22px;height:22px;border:2px solid #6FD6B2;border-radius:3px;position:relative;flex:none}
.brand-mark::before{content:"";position:absolute;inset:4px;background:#6FD6B2;border-radius:1px}
.search{flex:1;max-width:560px}
.search input{width:100%;height:36px;border-radius:4px;border:1px solid #33443E;background:#0B110F;color:#E9F1EE;padding:0 12px;font:14px var(--font-b)}
.search input::placeholder{color:#7F918A}
.types{display:flex;gap:4px}
.types button{background:transparent;border:1px solid #33443E;color:#B7C6C0;border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.types button[aria-pressed="true"]{background:#6FD6B2;border-color:#6FD6B2;color:#0B110F;font-weight:600}
.nav-toggle{display:none;background:transparent;border:1px solid #33443E;color:#E9F1EE;border-radius:4px;padding:6px 10px;cursor:pointer}

/* layout */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);height:calc(100% - var(--top-h))}
.side{border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.side-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.only{display:flex;gap:5px;align-items:center;cursor:pointer}
.tree{overflow-y:auto;flex:1;padding:6px 0 40px;overscroll-behavior:contain}
.main{overflow-y:auto;min-width:0}
#view{max-width:1180px;margin:0 auto;padding-inline:28px;padding-block:26px 80px}

/* tree */
.v-btn,.l-btn{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;cursor:pointer;padding:6px 14px}
.v-btn{font:600 18px/1.1 var(--font-d);text-transform:uppercase;letter-spacing:.04em;padding-block:9px}
.v-btn:hover,.l-btn:hover{background:var(--sunk)}
.caret{width:10px;flex:none;color:var(--faint);transition:transform .15s}
[aria-expanded="true"]>.caret{transform:rotate(90deg)}
.cnt{margin-left:auto;font:500 11px var(--font-m);color:var(--faint)}
.l-btn{font-size:13.5px;font-weight:500;padding-left:26px}
.series{font:500 10.5px/1 var(--font-m);text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding:10px 14px 4px 44px}
.m-link{display:flex;align-items:baseline;gap:8px;padding:4px 14px 4px 44px;color:var(--ink);text-decoration:none;font-size:13px;border-left:3px solid transparent}
.m-link:hover{background:var(--sunk)}
.m-link[aria-current="page"]{background:var(--accent-soft);border-left-color:var(--accent);font-weight:600}
.m-link .yr{margin-left:auto;font:11px var(--font-m);color:var(--faint);flex:none}
.m-link .full{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;align-self:center}
.m-link .nofull{width:6px;flex:none}
.hits-v{font:600 13px var(--font-d);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 14px 2px}
.hits-l{font-size:11.5px;color:var(--faint);padding:2px 14px 2px 26px}
.empty{padding:16px;color:var(--muted);font-size:13px}

/* shared type */
.eyebrow{font:500 11.5px/1.2 var(--font-m);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}
.crumbs a{color:var(--muted)}
h1{font:700 clamp(32px,4.4vw,50px)/1 var(--font-d);text-transform:uppercase;letter-spacing:.01em;margin:8px 0 10px;text-wrap:balance}
h2{font:600 22px/1.1 var(--font-d);text-transform:uppercase;letter-spacing:.03em;margin:0;text-wrap:balance}
h3{font:600 16px/1.2 var(--font-d);text-transform:uppercase;letter-spacing:.04em;margin:0}
.lede{font-size:15.5px;max-width:78ch;margin:0}
section.block{margin-top:34px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.sec-head p{margin:0;color:var(--muted);font-size:13px;max-width:80ch}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font:500 12px/1 var(--font-b);padding:5px 9px;border-radius:3px;background:var(--sunk);border:1px solid var(--line);color:var(--muted)}
.chip.type{border:0;color:#fff}
.chip.type.laptop{background:var(--t-laptop)} .chip.type.desktop{background:var(--t-desktop)} .chip.type.workstation{background:var(--t-workstation)}
.chip.type.server{background:var(--t-server)} .chip.type.mini{background:var(--t-mini)} .chip.type.aio{background:var(--t-aio)}
@media (prefers-color-scheme: dark){ .chip.type{color:#0B110F} }

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.fact{background:var(--surface);padding:12px 14px;display:grid;gap:4px;align-content:start}
.fact dt{font:500 10.5px/1.2 var(--font-m);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fact dd{margin:0;font-size:14px;font-weight:500}

/* platform + notes */
.platform{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.platform b{font-weight:600}
.notes{margin:0;padding-left:18px;font-size:13.5px;display:grid;gap:4px}
.gotchas{margin:0;padding:14px 16px 14px 34px;background:var(--warn-soft);border-radius:6px;display:grid;gap:6px;font-size:13.5px}
.gotchas li::marker{color:var(--warn)}

/* picks */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pick{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px;display:grid;gap:7px;align-content:start}
.pick:first-child{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pick .role{font:500 10.5px/1.2 var(--font-m);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.pick .cpu{font:700 22px/1.05 var(--font-d);text-transform:uppercase}
.pick .nums{display:flex;flex-wrap:wrap;gap:4px 12px;font:12px var(--font-m);color:var(--muted)}
.pick p{margin:0;font-size:13px;color:var(--muted)}
.auto-note{font-size:12px;color:var(--faint)}

/* table */
.tbl-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;color:var(--muted)}
.tbl-tools input[type=search]{height:32px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:4px;padding:0 10px;min-width:220px}
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{position:sticky;top:0;background:var(--sunk);font:600 10.5px/1.2 var(--font-b);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:9px 8px;border-bottom:1px solid var(--line-strong);white-space:nowrap;cursor:pointer;user-select:none}
thead th.n{text-align:right}
thead th[aria-sort="ascending"]::after{content:" ▲";color:var(--accent)}
thead th[aria-sort="descending"]::after{content:" ▼";color:var(--accent)}
tbody td{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:hover td{background:var(--sunk)}
td.n{text-align:right;font-family:var(--font-m);font-variant-numeric:tabular-nums}
td.cpu-name{font-weight:500}
td.cpu-name .pm-name{display:block;font-size:11px;color:var(--faint);font-weight:400}
td.note{white-space:normal;min-width:200px;font-size:12px;color:var(--muted)}
.dim{color:var(--faint)}
.val{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.val i{display:block;height:7px;background:var(--bar);border-radius:2px}
tr.is-pick td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* specs */
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.spec dl{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:6px 14px;margin:10px 0 0;font-size:13px}
.spec dt{color:var(--muted)}
.spec dd{margin:0}
.sources{margin:0;padding-left:18px;font-size:13px;display:grid;gap:4px}
.sources a{word-break:break-word}
.stub{background:var(--surface);border:1px dashed var(--line-strong);border-radius:6px;padding:18px;display:grid;gap:8px;max-width:760px}

/* home */
.hero{display:grid;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:22px}
.stats{display:flex;flex-wrap:wrap;gap:10px 28px;font:500 13px var(--font-m);color:var(--muted)}
.stats b{font:700 26px/1 var(--font-d);color:var(--ink);display:block}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:6px;text-decoration:none;color:var(--ink)}
.vcard:hover{border-color:var(--accent)}
.vcard .vn{font:700 24px/1 var(--font-d);text-transform:uppercase}
.vcard .vl{font-size:12.5px;color:var(--muted)}
.dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px;margin:0;padding:0;list-style:none}
.dlist a{display:flex;gap:8px;align-items:baseline;text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line)}
.dlist a:hover{color:var(--accent)}
.dlist .v{font:500 11px var(--font-m);color:var(--faint);text-transform:uppercase;min-width:74px}
.lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.line-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:4px}
.line-card button{justify-self:start;border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font-size:13px}
.foot{margin-top:56px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

@media (max-width: 1100px){ .types{display:none} }
@media (max-width: 900px){
  :root{--top-h:56px}
  .nav-toggle{display:block}
  .brand span:last-child{display:none}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:var(--top-h);bottom:0;left:0;width:min(88vw,360px);z-index:30;transform:translateX(-100%);transition:transform .2s;box-shadow:4px 0 24px rgba(0,0,0,.2)}
  body.nav-open .side{transform:none}
  .scrim{position:fixed;inset:var(--top-h) 0 0 0;background:rgba(0,0,0,.35);z-index:25}
  #view{padding-inline:16px}
  .specs{grid-template-columns:minmax(0,1fr)}
  .spec dl{grid-template-columns:minmax(0,1fr)}
  .spec dt{margin-top:4px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }