:root,
html[data-theme="light"],html.theme-light{
  /* Light / white (default) */
  --bg:#f4f6fa;--bg2:#ffffff;--panel:#ffffff;--panel2:#f0f3f8;
  --line:#d8dee8;--line2:#c5cedc;
  --gold:#a8841a;--gold2:#8a6a12;--gold3:#c9a227;
  --text:#1a2332;--muted:#5a6b82;--dim:#7a8aa0;
  --good:#1a9f55;--warn:#c47a10;--bad:#c0392b;--blue:#2b6cb0;
  --radius:12px;--shadow:0 8px 28px rgba(26,35,50,.08);
  --topbar-bg:rgba(255,255,255,.92);
  --glow-a:rgba(201,162,39,.12);--glow-b:rgba(74,158,255,.08);
  --mark-fg:#0a0a0a;
}
html[data-theme="dark"],html.theme-dark{
  --bg:#060a11;--bg2:#0a101a;--panel:#0d1522;--panel2:#111b2c;
  --line:#1a2740;--line2:#243552;
  --gold:#c9a227;--gold2:#e8c547;--gold3:#f5d76e;
  --text:#e6edf7;--muted:#7f96b5;--dim:#5a7190;
  --good:#2fd67b;--warn:#f0a030;--bad:#e85d5d;--blue:#4a9eff;
  --shadow:0 8px 32px rgba(0,0,0,.45);
  --topbar-bg:rgba(6,10,17,.88);
  --glow-a:rgba(201,162,39,.09);--glow-b:rgba(74,158,255,.06);
  --mark-fg:#0a0a0a;
}
html[data-theme="light-gray"],html.theme-light-gray{
  --bg:#eceeef;--bg2:#f7f8f9;--panel:#ffffff;--panel2:#e8eaec;
  --line:#c9ced3;--line2:#b4bac1;
  --gold:#8a7350;--gold2:#6e5a3c;--gold3:#a89060;
  --text:#2a2e34;--muted:#5c6370;--dim:#7a8190;
  --good:#2a8f52;--warn:#b87a18;--bad:#b33a3a;--blue:#4a6fa5;
  --shadow:0 8px 24px rgba(42,46,52,.07);
  --topbar-bg:rgba(247,248,249,.95);
  --glow-a:rgba(138,115,80,.08);--glow-b:rgba(74,111,165,.06);
  --mark-fg:#1a1a1a;
}
html[data-theme="medium-gray"],html.theme-medium-gray{
  --bg:#9aa0a8;--bg2:#a8aeb6;--panel:#b8bec6;--panel2:#8e949c;
  --line:#7a8088;--line2:#6a7078;
  --gold:#c9a227;--gold2:#e0bc4a;--gold3:#f0d070;
  --text:#1a1d22;--muted:#3a4048;--dim:#4a5058;
  --good:#1a7a40;--warn:#9a6010;--bad:#9a3030;--blue:#3a5a80;
  --shadow:0 8px 24px rgba(26,29,34,.18);
  --topbar-bg:rgba(168,174,182,.94);
  --glow-a:rgba(201,162,39,.12);--glow-b:rgba(58,90,128,.1);
  --mark-fg:#0a0a0a;
}
html[data-theme="dark-gray"],html.theme-dark-gray{
  --bg:#2a2d32;--bg2:#32363c;--panel:#3a3f46;--panel2:#2f3339;
  --line:#4a5058;--line2:#5a616a;
  --gold:#c9a227;--gold2:#e0bc4a;--gold3:#f0d070;
  --text:#e8eaed;--muted:#a8aeb8;--dim:#8a909a;
  --good:#3ecf7a;--warn:#e0a040;--bad:#e07070;--blue:#6a9fd4;
  --shadow:0 8px 28px rgba(0,0,0,.35);
  --topbar-bg:rgba(42,45,50,.92);
  --glow-a:rgba(201,162,39,.1);--glow-b:rgba(106,159,212,.08);
  --mark-fg:#0a0a0a;
}
html[data-theme="pale-blue"],html.theme-pale-blue{
  --bg:#eef5fc;--bg2:#f7fbff;--panel:#ffffff;--panel2:#e8f1fa;
  --line:#c5d8ec;--line2:#a8c2de;
  --gold:#c9a227;--gold2:#8a6a12;--gold3:#d4b03a;
  --text:#1a3558;--muted:#4a6b8c;--dim:#6e8aa8;
  --good:#1a9f55;--warn:#c47a10;--bad:#c0392b;--blue:#3a7ec8;
  --shadow:0 8px 24px rgba(26,53,88,.08);
  --topbar-bg:rgba(247,251,255,.95);
  --glow-a:rgba(58,126,200,.1);--glow-b:rgba(201,162,39,.08);
  --mark-fg:#0a0a0a;
}
html[data-theme="medium-blue"],html.theme-medium-blue{
  --bg:#c8daf0;--bg2:#d6e4f5;--panel:#eef4fb;--panel2:#bfd0e8;
  --line:#9bb4d4;--line2:#7a9bc4;
  --gold:#a8841a;--gold2:#8a6a12;--gold3:#c9a227;
  --text:#0f2744;--muted:#2f5078;--dim:#4a6a90;
  --good:#1a8f4e;--warn:#b87010;--bad:#b03030;--blue:#1e6fd9;
  --shadow:0 8px 28px rgba(15,39,68,.12);
  --topbar-bg:rgba(214,228,245,.94);
  --glow-a:rgba(30,111,217,.14);--glow-b:rgba(201,162,39,.1);
  --mark-fg:#0a0a0a;
}
html[data-theme="dark-blue"],html.theme-dark-blue{
  /* Rich navy — clearly blue, not near-black */
  --bg:#143a7a;--bg2:#1a4a96;--panel:#2157ad;--panel2:#18448c;
  --line:#2f6bc4;--line2:#3d7dd6;
  --gold:#f0d070;--gold2:#f5e08a;--gold3:#ffe9a0;
  --text:#eef5ff;--muted:#a8c4ef;--dim:#7ea3de;
  --good:#3ee08a;--warn:#ffc04a;--bad:#ff7a7a;--blue:#8ec5ff;
  --shadow:0 8px 32px rgba(10,40,90,.45);
  --topbar-bg:rgba(20,58,122,.94);
  --glow-a:rgba(120,180,255,.22);--glow-b:rgba(240,208,112,.12);
  --mark-fg:#0a1628;
}
html[data-theme="cobalt-blue"],html.theme-cobalt-blue{
  /* From screenshot left swatch ~#0845c0 */
  --bg:#0639a8;--bg2:#0845c0;--panel:#0a52d8;--panel2:#0c5ee8;
  --line:#2a6ef0;--line2:#4a88ff;
  --gold:#f5e08a;--gold2:#ffe9a0;--gold3:#fff0b8;
  --text:#f2f7ff;--muted:#c5d8ff;--dim:#9bb8f5;
  --good:#3ee08a;--warn:#ffc04a;--bad:#ff8a8a;--blue:#9ec5ff;
  --shadow:0 8px 32px rgba(4,30,90,.4);
  --topbar-bg:rgba(8,69,192,.94);
  --glow-a:rgba(120,170,255,.28);--glow-b:rgba(245,224,138,.14);
  --mark-fg:#041530;
}
html[data-theme="midnight-navy"],html.theme-midnight-navy{
  /* From screenshot right swatch ~#000840 — deep navy, still blue */
  --bg:#000840;--bg2:#00105a;--panel:#001a72;--panel2:#000e50;
  --line:#1a2f8a;--line2:#2a48a8;
  --gold:#e8c547;--gold2:#f5d76e;--gold3:#ffe08a;
  --text:#e4ecff;--muted:#8aa0d8;--dim:#6a80b8;
  --good:#2fd67b;--warn:#f0a030;--bad:#e85d5d;--blue:#6a9eff;
  --shadow:0 8px 32px rgba(0,0,20,.55);
  --topbar-bg:rgba(0,8,64,.94);
  --glow-a:rgba(60,100,220,.2);--glow-b:rgba(232,197,71,.1);
  --mark-fg:#000820;
}
html[data-theme="gray"],html.theme-gray{ /* alias → light-gray */
  --bg:#eceeef;--bg2:#f7f8f9;--panel:#ffffff;--panel2:#e8eaec;
  --line:#c9ced3;--line2:#b4bac1;
  --gold:#8a7350;--gold2:#6e5a3c;--gold3:#a89060;
  --text:#2a2e34;--muted:#5c6370;--dim:#7a8190;
  --good:#2a8f52;--warn:#b87a18;--bad:#b33a3a;--blue:#4a6fa5;
  --shadow:0 8px 24px rgba(42,46,52,.07);
  --topbar-bg:rgba(247,248,249,.95);
  --glow-a:rgba(138,115,80,.08);--glow-b:rgba(74,111,165,.06);
  --mark-fg:#1a1a1a;
}
html[data-theme="blue"],html.theme-blue{ /* alias → medium-blue */
  --bg:#c8daf0;--bg2:#d6e4f5;--panel:#eef4fb;--panel2:#bfd0e8;
  --line:#9bb4d4;--line2:#7a9bc4;
  --gold:#a8841a;--gold2:#8a6a12;--gold3:#c9a227;
  --text:#0f2744;--muted:#2f5078;--dim:#4a6a90;
  --good:#1a8f4e;--warn:#b87010;--bad:#b03030;--blue:#1e6fd9;
  --shadow:0 8px 28px rgba(15,39,68,.12);
  --topbar-bg:rgba(214,228,245,.94);
  --glow-a:rgba(30,111,217,.14);--glow-b:rgba(201,162,39,.1);
  --mark-fg:#0a0a0a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  color:var(--text);min-height:100vh;line-height:1.45;
  background:
    radial-gradient(900px 480px at 8% -8%,var(--glow-a) 0%,transparent 55%),
    radial-gradient(700px 400px at 92% 0%,var(--glow-b) 0%,transparent 50%),
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 40%);
}
a{color:var(--gold2);text-decoration:none}
a:hover{color:var(--gold3)}
code,.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.topbar{
  border-bottom:1px solid var(--line);
  background:var(--topbar-bg);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:40;
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 0;flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--text)}
.logo-mark{
  width:28px;height:28px;border-radius:7px;
  background:linear-gradient(135deg,var(--gold),#8a6a12);
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--mark-fg);
  box-shadow:0 0 16px var(--glow-a);
}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{
  color:var(--muted);font-size:11px;font-weight:500;
  padding:6px 9px;border-radius:6px;letter-spacing:.03em;text-transform:uppercase;
}
.nav a:hover{color:var(--gold2);background:rgba(201,162,39,.08)}
.nav a.on{color:var(--gold2);background:rgba(201,162,39,.12)}
.market-tabs{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:8px;
}
.market-tabs a{
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 12px;border-radius:8px;color:var(--muted);
  border:1px solid transparent;background:transparent;
}
.market-tabs a:hover{color:var(--gold2);background:rgba(201,162,39,.08)}
.market-tabs a.on{
  color:#0a0a0a;background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 4px 18px rgba(201,162,39,.28);
}
.hero{padding:28px 0 8px}
.hero-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
}
.hero h1{
  font-size:clamp(26px,4.2vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.15;
}
.hero h1 .accent{color:var(--gold2)}
.hero-sub{margin-top:12px;color:var(--muted);font-size:15px;max-width:780px}
.hero-meta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  padding:5px 10px;border-radius:6px;
  border:1px solid var(--line2);color:var(--muted);background:var(--panel);
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 8px}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stats{grid-template-columns:1fr}}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;position:relative;overflow:hidden;
}
.stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;
}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:500}
.stat .v{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;margin-top:8px}
.stat .v.good{color:var(--good)}
.stat .v.gold{color:var(--gold2)}
.stat .v.dim{color:var(--muted)}
.stat .v.warn{color:var(--warn)}
.stat .s{font-size:12px;color:var(--muted);margin-top:4px}
section{margin:36px 0}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.sec-head h2{
  font-size:18px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.sec-head h2 .tag,.sec-head .tag{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  padding:3px 8px;border-radius:4px;background:rgba(201,162,39,.15);
  color:var(--gold2);letter-spacing:.06em;
}
.blurb,.lede{color:var(--muted);font-size:14px;max-width:820px}
.lede{margin-bottom:16px}
.lede code{color:var(--gold2);font-size:12.5px}
.formula{
  margin:14px 0 0;padding:12px 14px;border-radius:8px;
  background:rgba(201,162,39,.07);border:1px solid rgba(201,162,39,.22);
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--gold2);
}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.pill.wired{background:rgba(47,214,123,.12);color:var(--good);border:1px solid rgba(47,214,123,.35)}
.pill.v6\.6-wired,.pill[class~="v6.6-wired"]{background:rgba(201,162,39,.14);color:var(--gold2);border:1px solid rgba(201,162,39,.4)}
.pill.v6\.7-wired,.pill[class~="v6.7-wired"]{background:rgba(74,158,255,.14);color:var(--blue);border:1px solid rgba(74,158,255,.4)}
.pill.v6\.8-wired,.pill[class~="v6.8-wired"]{background:rgba(245,215,110,.12);color:var(--gold3);border:1px solid rgba(245,215,110,.4)}
.pill.scaffold{background:rgba(90,113,144,.12);color:var(--muted);border:1px solid var(--line2)}
.pill.next{background:rgba(240,160,48,.12);color:var(--warn);border:1px solid rgba(240,160,48,.35)}
.pill.v6\.8\.3-wired,.pill[class~="v6.8.3-wired"]{background:rgba(55,230,212,.12);color:#37e6d4;border:1px solid rgba(55,230,212,.4)}
.pill.deferred{background:rgba(232,93,93,.1);color:var(--bad);border:1px solid rgba(232,93,93,.35)}

.filters{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:8px 0 18px;
}
.filters input, .filters select, .field{
  background:var(--panel);border:1px solid var(--line2);
  color:var(--text);border-radius:8px;padding:9px 12px;
  font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;
}
.filters input{flex:1;min-width:200px}
.filters input:focus,.filters select:focus,.field:focus{outline:none;border-color:var(--gold)}
.fbtn,.btn{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:8px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line2);color:var(--muted);background:var(--panel);
}
.fbtn:hover,.fbtn.on,.btn:hover{border-color:var(--gold);color:var(--gold2)}
.fbtn.on{background:rgba(201,162,39,.12)}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#0a0a0a;border:none;padding:12px 22px;border-radius:10px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;
  cursor:pointer;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 6px 22px rgba(201,162,39,.3);
}
.btn-primary:hover{filter:brightness(1.05)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.toc-pill{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--line2);color:var(--muted);background:var(--panel);
}
.toc-pill:hover{border-color:var(--gold);color:var(--gold2)}
.toc-pill .n{opacity:.7;margin-left:6px;font-size:10px}
.board-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table-scroll{overflow-x:auto}
table.board{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
table.board th{
  text-align:left;padding:11px 12px;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--dim);background:var(--panel2);border-bottom:1px solid var(--line);
}
table.board td{
  padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;font-size:12.5px;
}
table.board td.def, table.board code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px}
table.board code{color:var(--gold2)}
table.board .notes{color:var(--muted);font-size:12px;max-width:360px}
table.board tr:hover td{background:rgba(201,162,39,.04)}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}
.hidden{display:none !important}
.empty-note{padding:20px;color:var(--muted);text-align:center}
footer{
  margin-top:48px;padding:24px 0 40px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--dim);
}
footer .links{display:flex;gap:14px;flex-wrap:wrap}

/* TradeDeskLive 117-group dense folds */
details.param-fold{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  margin:0 0 6px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.2);
}
details.param-fold[open]{border-color:rgba(201,162,39,.35);margin-bottom:8px}
details.param-fold.deferred-fold{border-color:rgba(232,93,93,.25);opacity:.92}
details.param-fold.scaffold-fold{opacity:.88}
details.param-fold > summary{
  list-style:none;cursor:pointer;padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  user-select:none;
}
details.param-fold > summary::-webkit-details-marker{display:none}
details.param-fold > summary .fold-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1}
details.param-fold > summary .fold-num{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
  color:#0a0a0a;background:linear-gradient(135deg,var(--gold),var(--gold2));
  padding:2px 7px;border-radius:5px;letter-spacing:.04em;flex:0 0 auto;
}
details.param-fold.deferred-fold > summary .fold-num{background:linear-gradient(135deg,#8a3030,#e85d5d)}
details.param-fold.scaffold-fold > summary .fold-num{background:linear-gradient(135deg,#3a4a60,#5a7190);color:#e6edf7}
details.param-fold > summary .fold-title{font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(620px,58vw)}
details.param-fold > summary .fold-meta{color:var(--dim);font-size:11px;font-weight:600}
details.param-fold > summary .chip-row{gap:4px}
details.param-fold > summary .chip-row .pill{font-size:9px;padding:2px 6px}
details.param-fold > summary .chev{
  font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:13px;
  transition:transform .15s ease;flex:0 0 auto;
}
details.param-fold[open] > summary .chev{transform:rotate(90deg)}
.fold-body{padding:0 12px 12px}
.fold-blurb{color:var(--muted);font-size:12px;margin:2px 0 8px}
.fold-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
#folds{margin-top:4px}
.toc{max-height:120px;overflow:auto;padding-bottom:4px}
.toc-pill{font-size:10px;padding:5px 9px}

.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:720px){.legend{grid-template-columns:1fr}}
.legend-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;
}
.legend-card h3{font-size:14px;margin:8px 0 6px}
.legend-card p{color:var(--muted);font-size:13px}
.layers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:800px){.layers{grid-template-columns:1fr}}
.layer{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;position:relative;overflow:hidden;
}
.layer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));opacity:.7;
}
.layer .n{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.layer h3{margin:6px 0 8px;font-size:16px}
.layer p{color:var(--muted);font-size:13px}
.layer ul{margin:10px 0 0 18px;color:var(--text);font-size:13px}
.layer li{margin:4px 0}
.layer code{font-size:12px;color:var(--gold2)}
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:800px){.next-grid{grid-template-columns:1fr}}
.next-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
}
.next-card .step{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.next-card h3{margin:6px 0 8px;font-size:15px}
.next-card p{color:var(--muted);font-size:13px}
.scaffold-list{columns:2;gap:24px;margin:8px 0 0 18px;font-size:13px}
@media(max-width:720px){.scaffold-list{columns:1}}
.scaffold-list li{break-inside:avoid;margin:6px 0}
.scaffold-list .muted{color:var(--dim);font-size:12px}

/* Lab */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0 18px}
@media(max-width:900px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:6px}
.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 0}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;
  position:relative;
}
.metric .ex{position:absolute;top:8px;right:8px;font-size:9px;letter-spacing:.08em;color:var(--warn);text-transform:uppercase;font-family:'IBM Plex Mono',monospace}
.metric .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.metric .v{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;margin-top:8px;color:var(--gold2)}
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.compare{grid-template-columns:1fr}}
.slot{
  background:var(--panel);border:1px dashed var(--line2);border-radius:var(--radius);padding:16px;
  min-height:180px;
}
.slot.filled{border-style:solid;border-color:rgba(201,162,39,.35)}
.slot .slot-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.slot .slot-h strong{font-size:14px}
.horizon{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.horizon .fbtn{padding:5px 10px}
.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 20px}
.cta-note{color:var(--muted);font-size:13px;max-width:520px}
.example-banner{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  padding:4px 8px;border-radius:4px;background:rgba(240,160,48,.12);color:var(--warn);
  border:1px solid rgba(240,160,48,.35);letter-spacing:.08em;text-transform:uppercase;
}



/* ---- Theme switcher (dropdown) ---- */
.theme-switch{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  margin-left:auto;flex:0 0 auto;position:relative;z-index:50;
}
.theme-switch .theme-label{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:600;white-space:nowrap;
}
.theme-select{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  padding:7px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line2);color:var(--text);background:var(--panel);
  letter-spacing:.02em;min-width:148px;max-width:200px;
  position:relative;z-index:51;
  pointer-events:auto;
}
.theme-select:hover,.theme-select:focus{
  border-color:var(--gold);outline:2px solid rgba(201,162,39,.25);outline-offset:1px;
}
.theme-select option{background:var(--panel);color:var(--text)}
.topbar-inner{position:relative;z-index:45}
.topbar-inner .theme-switch{order:2}
.topbar-inner .live-pill{order:3}
.topbar-inner .nav{order:1;flex:1 1 auto}