/* ============================================================
   SMEDJAN — the forge, in CSS.
   Cold-forged iron base · hot ember spark accent. No framework,
   no build step, no dependency you don't control. Two-stage
   tokens (hex fallback, then oklch override) — the Hugin grammar,
   retinted from warm brown to cool iron + ember.
   ============================================================ */

:root {
  /* ── palette: iron + ember (hex fallback → oklch wide-gamut) ── */
  --bg:#0d1014;        --bg:oklch(15% .012 252);
  --bg2:#0a0c10;       --bg2:oklch(12.5% .010 252);
  --card:#12161c;      --card:oklch(18.5% .013 252);
  --line:#242a33;      --line:oklch(28% .012 252);
  --line2:#1a1f26;     --line2:oklch(23% .011 252);
  --ink:#e9ecf2;       --ink:oklch(93.5% .008 250);
  --mut:#dde0e6;       --mut:oklch(90% .01 250);
  --dim:#d2d6dd;       --dim:oklch(87% .012 250);
  --iron:#9aa6b8;      --iron:oklch(70% .03 250);
  --ember:#ff7a2f;     --ember:oklch(72% .19 45);
  --hot:#ffa657;       --hot:oklch(80% .16 60);
  --spark:#ffd08a;     --spark:oklch(88% .10 75);
  --green:#5fe09a;     --green:oklch(82% .16 150);

  /* ── type ── */
  --f-disp:"Zen Dots",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"Electrolize",ui-sans-serif,system-ui,sans-serif;
  --f-code:"Electrolize",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Electrolize",ui-sans-serif,system-ui,sans-serif;

  /* ── damped-spring entrance (ζ≈0.62, ~8% overshoot, settles like Framer Motion) ── */
  --spring:linear(0, 0.0306 4.2%, 0.1092 8.3%, 0.2177 12.5%, 0.3417 16.7%, 0.4696 20.8%, 0.5929 25%, 0.7057 29.2%, 0.8044 33.3%, 0.8871 37.5%, 0.9534 41.7%, 1.0041 45.8%, 1.0405 50%, 1.0644 54.2%, 1.078 58.3%, 1.0833 62.5%, 1.0822 66.7%, 1.0767 70.8%, 1.0683 75%, 1.0582 79.2%, 1.0475 83.3%, 1.037 87.5%, 1.0273 91.7%, 1.0187 95.8%, 1);

  /* ── scale ── */
  --nav-h:47px;
  --wrap-max:1120px;
  --wrap-pad:24px;
  --section-pad-y:148px;
  --scroll-offset:64px;
  --r-sm:4px; --r:6px; --r-card:10px; --r-lg:12px; --r-pill:999px;
  --fs-h1:clamp(2.05rem,8.1vw - 4px,5.5rem);
  --fs-h2:clamp(1.9rem,4.4vw,3.1rem);
  --fs-lead:17px; --fs-base:16px; --fs-mono:14px; --fs-sm:14px; --fs-xs:12px;
  --dur:.18s;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:var(--fs-base)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}


a { color:inherit; }
img,canvas,svg { display:block; max-width:100%; }
::selection { background:oklch(72% .19 45 / .28); color:var(--ink); }

:focus-visible { outline:2px solid var(--ember); outline-offset:3px; border-radius:2px; }

.wrap { max-width:var(--wrap-max); margin:0 auto; padding:0 var(--wrap-pad); position:relative; z-index:1; }

/* ── section + eyebrow grammar ───────────────────────────── */
section { padding:var(--section-pad-y) 0; position:relative; scroll-margin-top:var(--scroll-offset); }
.sh { display:flex; align-items:baseline; gap:18px; margin-bottom:58px; font-family:var(--f-mono); }
.sh .no { font-size:14px; color:var(--ember); letter-spacing:.02em; white-space:nowrap; }
.sh h2 { font:800 var(--fs-h2)/1.04 var(--f-disp); text-transform:uppercase; letter-spacing:-.015em; margin:0; }
.sh .ln { flex:1; border-top:1px solid var(--line); transform:translateY(-4px); }
.sh .meta { font-size:12px; color:var(--dim); white-space:nowrap; }
.lead { font-size:var(--fs-lead); color:var(--mut); max-width:62ch; }

/* giant translucent watermark numerals (auto-generated by forge.js) */
.ghost {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44vw; height:36vw; opacity:.05; pointer-events:none; user-select:none; z-index:0;
}
.ghost-right { right:2%; left:auto; }
.ghost-left { left:2%; right:auto; }
.ghost-t { font:800 200px var(--f-disp); fill:var(--iron); letter-spacing:-.04em; }

/* ── nav ─────────────────────────────────────────────────── */
.nav {
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:50;
  background:transparent; border-bottom:1px solid transparent;
}
.nav .wrap { display:flex; align-items:stretch; height:var(--nav-h); gap:4px; max-width:1300px; }
.brand { display:flex; align-items:center; gap:9px; font:800 15px/1 var(--f-disp); letter-spacing:.02em; text-decoration:none; color:var(--ink); padding-right:14px; }
.brand .mk { width:16px; height:19px; }
.nav-links { display:flex; align-items:stretch; gap:2px; margin-left:auto; }
.nav-links a, .navbtn {
  display:inline-flex; align-items:center; padding:0 11px; font:500 13px/1 var(--f-mono);
  color:var(--mut); text-decoration:none; background:none; border:0; cursor:pointer; letter-spacing:.01em;
  border-bottom:2px solid transparent; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-links a:hover, .navbtn:hover { color:var(--ink); }
.nav-links a.cur { color:var(--ember); border-bottom-color:var(--ember); }
.navbtn { color:var(--dim); font-size:12px; border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 8px; margin:auto 0 auto 6px; }
.navbtn:hover { color:var(--ink); border-color:var(--iron); }
.pct { font:500 11px/1 var(--f-mono); color:var(--dim); align-self:center; margin-left:8px; min-width:34px; text-align:right; }
.pbar { position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--ember),var(--hot)); box-shadow:0 0 12px oklch(72% .19 45 / .6); }

/* ── hero ────────────────────────────────────────────────── */
.hero { min-height:100svh; margin-top:0; display:grid; align-items:center; padding:72px 0 64px; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:42px 56px; align-items:center; }
#forge-bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6; pointer-events:none; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, oklch(12% .012 252 / .90) 0%, oklch(12% .012 252 / .58) 25%, oklch(12% .012 252 / .14) 44%, transparent 56%), linear-gradient(0deg, var(--bg) 0%, transparent 18%); }
.hero-l { position:relative; z-index:2; }
.eyebrow { font:500 12px/1 var(--f-mono); color:var(--ember); letter-spacing:.18em; text-transform:uppercase; margin-bottom:20px; }
.hero h1 {
  font:800 clamp(2.2rem,5.6vw,5rem)/1.02 var(--f-disp);
  letter-spacing:-.02em; margin:0 0 22px; text-transform:uppercase;
}
.hero h1 span { display:block; }
.hero h1 .em {
  background:linear-gradient(96deg,var(--ember),var(--hot) 40%,var(--spark) 70%,var(--ember));
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--ember); animation:molten 7s linear infinite;
}
@keyframes molten { to { background-position:220% 0; } }
.hero .tag { font-size:var(--fs-lead); color:var(--mut); max-width:54ch; margin:0 0 14px; }
.hero .sub { font-size:var(--fs-sm); color:var(--mut); max-width:58ch; margin:0 0 30px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--r);
  font:600 14px/1 var(--f-mono); text-decoration:none; border:1px solid var(--line); color:var(--ink);
  background:var(--card); transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { transform:translateY(-2px); border-color:var(--iron); }
.btn.primary { background:linear-gradient(180deg,var(--ember),oklch(66% .19 42)); border-color:transparent; color:#180a02; box-shadow:0 8px 30px oklch(72% .19 45 / .25); }
.btn.primary:hover { box-shadow:0 12px 38px oklch(72% .19 45 / .4); }
.btn .soon { font-size:10px; color:var(--dim); margin-left:4px; }

/* copyable command chip */
.cmd { display:flex; align-items:center; gap:10px; margin-top:18px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg2); font:14px/1 var(--f-code); color:var(--mut); max-width:max-content; }
.cmd .p { color:var(--ember); }
.cmd code { color:var(--ink); }
.cmd button { margin-left:6px; background:none; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--dim); font:11px var(--f-code); padding:3px 7px; cursor:pointer; }
.cmd button.ok { color:var(--green); border-color:var(--green); }

/* hero right column: a live terminal-ish panel placeholder (the anvil mounts here) */
.hero-r { position:relative; z-index:2; }
.panel { border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--card),var(--bg2)); overflow:hidden; box-shadow:0 30px 80px oklch(0% 0 0 / .5); }
.panel-bar { display:flex; align-items:center; gap:7px; padding:10px 13px; border-bottom:1px solid var(--line2); font:11px var(--f-mono); color:var(--dim); }
.panel-bar i { width:9px; height:9px; border-radius:50%; background:var(--line); display:inline-block; }
.panel-bar i:nth-child(1){ background:oklch(62% .14 25); }
.panel-bar i:nth-child(2){ background:oklch(78% .12 85); }
.panel-bar i:nth-child(3){ background:var(--green); }
.panel-bar .ttl { margin-left:6px; }
.panel-body { padding:16px; font:14px/1.7 var(--f-code); color:var(--mut); min-height:230px; }
.panel-body .ln { white-space:pre-wrap; }
.panel-body .ok { color:var(--green); }
.panel-body .em { color:var(--ember); }
.panel-body .tok { color:var(--ink); }
.cursor { display:inline-block; width:8px; height:1.1em; background:var(--ember); vertical-align:-2px; animation:blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ── card grid (pipeline / mixers / features) ───────────── */
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.cell { grid-column:span 4; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); padding:20px; position:relative; overflow:hidden; transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cell:hover { border-color:var(--iron); transform:translateY(-3px); }
.cell.w6 { grid-column:span 6; } .cell.w12 { grid-column:span 12; }
.cell h3 { font:700 12px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ember); margin:0 0 8px; }
.cell p { margin:0; color:var(--mut); font-size:var(--fs-sm); }
.cell .k { font:700 28px/1 var(--f-disp); color:var(--ink); }
.cell .cap { font:var(--fs-xs) var(--f-mono); color:var(--dim); margin-top:10px; }
.tag-x { display:inline-block; font:600 10px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--hot); border:1px solid oklch(80% .16 60 / .35); border-radius:var(--r-pill); padding:2px 7px; margin-left:6px; vertical-align:middle; }

/* ── pipeline flow ──────────────────────────────────────── */
.flow { display:flex; flex-wrap:wrap; gap:20px; align-items:stretch; }
.flow .step { flex:1 1 120px; min-width:118px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg2); padding:13px; position:relative; }
.flow .step .s-cmd { font:600 14px var(--f-code); color:var(--ink); }
.flow .step .s-d { font:11px var(--f-mono); color:var(--dim); margin-top:5px; }
.flow .step::after { content:"→"; position:absolute; right:-15px; top:50%; transform:translateY(-50%); color:var(--iron); font:600 15px/1 var(--f-mono); z-index:3; pointer-events:none; }
.flow .step:last-child::after { display:none; }

/* ── perf table ─────────────────────────────────────────── */
table.perf { width:100%; border-collapse:collapse; font:var(--fs-sm) var(--f-code); margin-top:8px; }
table.perf th, table.perf td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
table.perf th { color:var(--dim); font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:.06em; }
table.perf td .x { color:var(--ember); font-weight:700; }
table.perf tr:last-child td { border-bottom:0; }

/* ── code block ─────────────────────────────────────────── */
pre.code { margin:0; padding:18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg2); overflow:auto; font:14px/1.65 var(--f-code); color:var(--mut); }
pre.code .p { color:var(--ember); } pre.code .c { color:var(--dim); } pre.code .k { color:var(--ink); }

/* ── reveal (spring entrance, no React) ─────────────────── */
html.js .rv { opacity:0; transform:translateY(18px) scale(.985); }
html.js .rv { transition:opacity .5s var(--ease), transform .62s var(--spring); }
html.js .rv.in { opacity:1; transform:none; }

/* ── footer ─────────────────────────────────────────────── */
footer { border-top:1px solid var(--line); padding:56px 0 60px; margin-top:30px; background:oklch(17.5% .013 252); box-shadow:inset 0 1px 0 oklch(100% 0 0 / .04); }
.foot { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,2fr); gap:36px 56px; align-items:start; }
.foot-brand .brand { display:inline-flex; align-items:center; gap:9px; font:700 17px/1 var(--f-disp); letter-spacing:.04em; color:var(--ink); text-decoration:none; }
.foot-brand .brand .mk { width:21px; height:25px; }
.foot-tag { margin:14px 0 0; font-size:13px; line-height:1.6; color:var(--dim); max-width:36ch; }
.foot-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.foot-col { display:flex; flex-direction:column; gap:9px; }
.foot-col h4 { font:600 11px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin:0 0 4px; }
footer a, .foot-col a, .foot-col .soon-link { font:13px var(--f-mono); color:var(--mut); text-decoration:none; }
footer a:hover, .foot-col a:hover { color:var(--ember); }
.foot-bot { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between; margin-top:40px; padding-top:22px; border-top:1px solid var(--line2); }
footer .lic { font:12px var(--f-mono); color:var(--dim); }
.foot-mini { font:12px var(--f-mono); color:var(--iron); }
@media (max-width:760px){ .foot { grid-template-columns:1fr; gap:28px; } .foot-bot { flex-direction:column; align-items:flex-start; } }
.soon-link { color:var(--dim); cursor:default; }
.soon-link .soon { font-size:10px; color:var(--ember); margin-left:5px; }

/* ── forge ignition (landing only) — non-blocking ember flash, never hides the hero ── */
#boot.boot { position:fixed; inset:0; z-index:200; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 64%, oklch(47% .17 48 / .96), oklch(22% .06 40 / .85) 38%, oklch(13% .012 252) 72%);
  animation:ignite .58s var(--ease) forwards; }
@keyframes ignite { 0% { opacity:1; } 68% { opacity:.42; } 100% { opacity:0; visibility:hidden; } }
html.no-ignite #boot { display:none; }

/* ── ⌘K command palette ─────────────────────────────────── */
.palette { position:fixed; inset:0; z-index:100; display:grid; place-items:start center; padding-top:14vh; }
.palette[hidden] { display:none; }
.palette-scrim { position:absolute; inset:0; background:oklch(8% .01 252 / .6); backdrop-filter:blur(3px); animation:palfade .2s var(--ease); }
.palette-box { position:relative; width:min(560px,92vw); background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 40px 100px oklch(0% 0 0 / .6); overflow:hidden; animation:palpop .22s var(--ease); }
@keyframes palfade { from { opacity:0; } }
@keyframes palpop { from { opacity:0; transform:translateY(-8px) scale(.99); } }
.palette-box input { width:100%; padding:16px 18px; background:none; border:0; border-bottom:1px solid var(--line); color:var(--ink); font:15px var(--f-mono); outline:none; }
.palette-list { list-style:none; margin:0; padding:6px; max-height:46vh; overflow:auto; }
.palette-list li { padding:10px 12px; border-radius:var(--r); color:var(--mut); font:13px var(--f-mono); cursor:pointer; display:flex; align-items:center; gap:10px; }
.palette-list li .pno { color:var(--ember); font-size:11px; min-width:40px; }
.palette-list li[aria-selected="true"], .palette-list li:hover { background:var(--bg2); color:var(--ink); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:860px) {
  :root { --section-pad-y:84px; }
  .hero .wrap { grid-template-columns:1fr; gap:36px; }
  .hero-r { order:2; }
  .grid .cell, .cell.w6, .cell.w12 { grid-column:span 12; }
  .ghost { font-size:34vw; opacity:.6; }
  .sh { margin-bottom:38px; flex-wrap:wrap; gap:10px; }
  .sh .meta { display:none; }
  .nav-links a { display:inline-flex; font-size:12px; padding:0 6px; }
  .nav-links .navbtn { display:inline-flex; }
  .pct { display:none; }
}

/* ── reduced motion: a still, beautiful site (not a stripped one) ── */
@media (prefers-reduced-motion:reduce) {
  .hero h1 .em { animation:none; }
  .cursor { animation:none; }
  .ghost { transform:translateY(-50%) !important; }
  .rv { opacity:1 !important; transform:none !important; }
  .pbar { transition:none; }
}

/* ── the anvil: dockable in-browser forge demo ──────────── */
.anvil-dock-btn { position:fixed; right:20px; bottom:20px; z-index:80; padding:11px 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:linear-gradient(180deg,var(--card),var(--bg2)); color:var(--ink); font:600 13px var(--f-mono); cursor:pointer; box-shadow:0 10px 30px oklch(0% 0 0 /.5); opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .3s var(--ease), transform .4s var(--spring), border-color var(--dur) var(--ease); }
.anvil-dock-btn.show { opacity:1; transform:none; pointer-events:auto; }
.anvil-dock-btn:hover { border-color:var(--ember); }
.anvil-overlay { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.anvil-overlay[hidden] { display:none; }
.anvil-scrim { position:absolute; inset:0; background:oklch(8% .01 252 /.62); backdrop-filter:blur(3px); animation:palfade .2s var(--ease); }
.anvil-panel { position:relative; width:min(560px,94vw); background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 40px 100px oklch(0% 0 0 /.6); overflow:hidden; animation:palpop .22s var(--ease); }
.anvil-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line2); font:11px var(--f-mono); color:var(--dim); }
.anvil-bar i { width:9px; height:9px; border-radius:50%; background:var(--line); }
.anvil-bar i:nth-child(1){ background:oklch(62% .14 25); } .anvil-bar i:nth-child(2){ background:oklch(78% .12 85); } .anvil-bar i:nth-child(3){ background:var(--green); }
.anvil-bar .ttl { margin-left:6px; }
.anvil-out { padding:16px; font:14px/1.7 var(--f-code); color:var(--mut); min-height:150px; max-height:46vh; overflow:auto; white-space:pre-wrap; }
.anvil-out .tok { color:var(--ink); } .anvil-out .p { color:var(--ember); } .anvil-out .ok { color:var(--green); }
.anvil-row { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line2); }
.anvil-input { flex:1; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); font:14px var(--f-code); padding:9px 11px; outline:none; }
.anvil-input:focus { border-color:var(--ember); }
.anvil-cap { padding:0 14px 14px; font:11px var(--f-mono); color:var(--dim); }

/* ── mixer explorer (interactive architecture diagram) ──── */
.mixer-explore { display:grid; grid-template-columns:320px 1fr; gap:38px; margin-top:34px; align-items:start; }
.mx-vis { position:relative; }
#mx-grid { width:320px; height:320px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg2); display:block; }
.mx-cx { margin-top:13px; display:flex; align-items:baseline; gap:9px; }
#mx-complexity { color:var(--ember); font:800 19px var(--f-disp); }
.mx-cxl { color:var(--dim); font:11px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; }
.mx-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.mx-tab { padding:7px 13px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--card); color:var(--mut); font:600 12px var(--f-mono); cursor:pointer; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.mx-tab:hover { border-color:var(--iron); color:var(--ink); }
.mx-tab[aria-selected="true"] { background:linear-gradient(180deg,var(--ember),oklch(66% .19 42)); color:#180a02; border-color:transparent; }
.mx-tab .x { font-size:9px; opacity:.75; margin-left:5px; text-transform:uppercase; letter-spacing:.04em; }
.mx-title { font:800 21px var(--f-disp); color:var(--ink); margin:0 0 10px; text-transform:uppercase; letter-spacing:-.01em; }
.mx-desc { color:var(--mut); font-size:var(--fs-sm); max-width:54ch; margin:0 0 18px; min-height:3.4em; }
.mx-code { font-size:12px; }
@media (max-width:860px) {
  .mixer-explore { grid-template-columns:1fr; }
  .mx-vis { max-width:320px; }
}

/* ── View Transitions (cross-document morphs; browser honors reduced-motion) ── */
@view-transition { navigation: auto; }
.brand { view-transition-name: smedjan-brand; }

/* ── custom cursor + sparks + sound toggle ── */
.scursor { position:fixed; left:0; top:0; z-index:300; pointer-events:none; will-change:transform; }
.scursor-dot { width:6px; height:6px; border-radius:50%; background:var(--ember); box-shadow:0 0 12px var(--ember); }
.scursor-ring { width:30px; height:30px; border:1.5px solid oklch(72% .19 45 /.55); border-radius:50%; transition:width .18s var(--ease), height .18s var(--ease), border-color .18s var(--ease); }
.scursor-ring.mag { width:54px; height:54px; border-color:var(--hot); }
.spark { position:fixed; z-index:300; width:4px; height:4px; border-radius:50%; background:var(--hot); box-shadow:0 0 6px var(--hot); pointer-events:none; }
body { cursor: url("/assets/cursor-hammer.svg") 6 4, auto; }
a, button, .btn, .mx-tab, input, label, summary, [role="button"], .snd-toggle, [data-copy], #palettebtn, .palette-list li { cursor: url("/assets/cursor-hammer.svg") 6 4, pointer; }
.snd-toggle { background:none; border:0; color:var(--mut); font:13px var(--f-mono); cursor:pointer; padding:0; }
.snd-toggle:hover { color:var(--ember); }
@media (prefers-reduced-motion: reduce) { .scursor { display:none; } }

/* ============================================================
   HERO TEXT — make it fire over the molten + scrim
   ============================================================ */
.hero::after { background:linear-gradient(90deg, oklch(12% .012 252 / .84) 0%, oklch(12% .012 252 / .50) 25%, oklch(12% .012 252 / .12) 45%, transparent 58%), linear-gradient(0deg, var(--bg) 0%, transparent 18%); }
.eyebrow { color:var(--hot); text-shadow:0 0 18px oklch(72% .19 45 / .55); }
.hero h1 { text-shadow:0 1px 3px oklch(0% 0 0 / .72), 0 2px 22px oklch(0% 0 0 / .5), 0 0 44px oklch(72% .19 45 / .3); }
.hero h1 .em { text-shadow:0 0 34px oklch(72% .19 45 / .55), 0 2px 18px oklch(0% 0 0 / .4); }
.hero .tag { color:var(--ink); text-shadow:0 1px 2px oklch(0% 0 0 / .9), 0 0 20px oklch(0% 0 0 / .75); }
.hero .sub { color:var(--ink); text-shadow:0 1px 2px oklch(0% 0 0 / .9), 0 0 16px oklch(0% 0 0 / .7); opacity:.96; }
.hero .cmd { backdrop-filter:blur(3px); }

/* ============================================================
   SIGNATURE COMPONENTS — the forged plate
   Chamfered plates (containers) + ember-edged struck buttons that
   ignite on hover, with a heat-sweep sheen. Buttons/tabs stay
   rectangular so the focus ring is never clipped (a11y).
   ============================================================ */
.btn, .cell, .panel, .anvil-panel, .mx-tab, .cmd, pre.code, .palette-box, table.perf { border-radius:0 !important; }

/* chamfered plates (non-focusable containers) */
.cell, .panel, .anvil-panel {
  --notch:18px; border:0 !important;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  background:linear-gradient(180deg, var(--card), oklch(16.5% .013 252));
  box-shadow:inset 0 0 0 1px oklch(42% .04 252 / .85), inset 0 1px 0 oklch(100% 0 0 / .045);
  transition:box-shadow .25s var(--ease), transform .22s var(--ease), filter .25s var(--ease);
}
.cell:hover { transform:translateY(-3px); }
.cell:hover, .panel:hover, .anvil-panel:hover {
  box-shadow:inset 0 0 0 1px oklch(72% .19 45 / .55), inset 0 1px 0 oklch(100% 0 0 / .07);
  filter:drop-shadow(0 16px 40px oklch(72% .19 45 / .14));
}
.panel, .anvil-panel { box-shadow:inset 0 0 0 1px oklch(42% .04 252 / .85), inset 0 1px 0 oklch(100% 0 0 / .045), 0 30px 80px oklch(0% 0 0 / .5); }

/* struck buttons + tabs (focusable → rectangular) */
.btn, .mx-tab {
  border:0 !important; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--card), var(--bg2));
  box-shadow:inset 0 0 0 1px oklch(46% .05 252 / .9), inset 0 1px 0 oklch(100% 0 0 / .06);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), filter .2s var(--ease);
}
.btn::after, .mx-tab::after { content:""; position:absolute; top:5px; left:5px; width:8px; height:8px; border-top:1.5px solid var(--ember); border-left:1.5px solid var(--ember); opacity:.55; transition:opacity .2s var(--ease); }
.btn::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 32%, oklch(100% 0 0 / .14) 50%, transparent 68%); transform:translateX(-130%); transition:transform .55s var(--ease); }
.btn:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px oklch(72% .19 45 / .65), inset 0 1px 0 oklch(100% 0 0 / .08); filter:drop-shadow(0 6px 16px oklch(72% .19 45 / .28)); }
.btn:hover::before { transform:translateX(130%); }
.btn:hover::after, .mx-tab:hover::after { opacity:1; }
.btn.primary { background:linear-gradient(180deg, var(--hot), var(--ember) 55%, oklch(63% .19 42)); color:#180a02; box-shadow:inset 0 1px 0 oklch(100% 0 0 / .3), inset 0 0 0 1px oklch(82% .16 60 / .6); }
.btn.primary::after { border-color:#3a1700; opacity:.5; }
.btn.primary:hover { filter:drop-shadow(0 8px 22px oklch(72% .19 45 / .5)); }
.mx-tab[aria-selected="true"] { background:linear-gradient(180deg, var(--hot), var(--ember)); color:#180a02; box-shadow:inset 0 0 0 1px oklch(82% .16 60 / .6); }
.mx-tab[aria-selected="true"]::after { border-color:#3a1700; opacity:.6; }

/* code + cmd chips */
pre.code { border:0 !important; box-shadow:inset 0 0 0 1px oklch(40% .03 252 / .7); }
.cmd { --notch:10px; border:0 !important; box-shadow:inset 0 0 0 1px oklch(46% .06 45 / .5); clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); }

/* reserve the hero headline box so live-generated titles of varying length
   never shift the content below (keeps CLS at 0) */


/* ============================================================
   HERO v2 — single full-width centered column; the model-written
   headline + the buttons are the focus. No shell panel.
   ============================================================ */
.hero .wrap { grid-template-columns: minmax(0, 1fr) !important; gap: 0; max-width: 1080px; align-items: center; position: relative; z-index: 3; }
.hero-l { text-align: center; position: relative; z-index: 4; }
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 { font: 800 clamp(2.3rem, 6.3vw, 5.2rem)/1.12 var(--f-disp); height: 2.3em; margin: 0 0 28px; contain:layout; -webkit-text-stroke:0.6px currentColor; }
.hero h1 { width: 100%; } .hero h1 span { display: block; width: 100%; height: 1.15em; line-height: 1.15em; white-space: nowrap; overflow: visible; }
.hero .tag { margin: 0 auto 14px; max-width: 56ch; }
.hero .sub { margin: 0 auto 30px; max-width: 62ch; }
.cta-row { justify-content: center; }
.hero .cmd { margin: 18px auto 0; }
.hero::after { background: radial-gradient(80% 102% at 50% 58%, oklch(11% .012 252 / .56), oklch(11% .012 252 / .14) 54%, transparent 84%), linear-gradient(0deg, var(--bg) 1%, transparent 28%); }
@media (max-width: 860px) {
  .hero h1 { height: auto; min-height: 2.1em; }
  .hero h1 span { white-space: normal; }
}


/* pipeline step cards → forged plate (sharp + bluish iron edge, like .cell) */
.flow .step { border:0 !important; border-radius:0 !important; background:linear-gradient(180deg, var(--card), oklch(16.5% .013 252)); box-shadow:inset 0 0 0 1px oklch(42% .04 252 / .85), inset 0 1px 0 oklch(100% 0 0 / .045); transition:box-shadow .2s var(--ease), transform .2s var(--ease); }
.flow .step:hover { box-shadow:inset 0 0 0 1px oklch(72% .19 45 / .5), inset 0 1px 0 oklch(100% 0 0 / .07); transform:translateY(-2px); }

/* single-weight display faces: render at their true weight, no faux-bold */
html{font-synthesis:none;}

/* ── phone refinements (≤560px): keep tight content from overflowing ── */
@media (max-width:560px) {
  /* hero install command: one line, drop the // comment, shrink a touch */
  .cmd { font-size:12px; gap:8px; padding:9px 11px; max-width:100%; }
  .cmd .soon { display:none; }
  .cmd code { white-space:nowrap; }
  /* perf table: fit all four columns on a phone */
  table.perf { font-size:12px; }
  table.perf th, table.perf td { padding:9px 8px; }
  table.perf th { font-size:10px; letter-spacing:.03em; }
  /* code blocks (module map etc.): smaller to reduce horizontal scroll */
  pre.code { font-size:12.5px; padding:14px; }
  /* stacked pipeline: drop the right-pointing flow arrows */
  .flow .step::after { display:none; }
  /* footer: let items wrap, keep the sound toggle on one line */
  footer nav { gap:14px 18px; }
  .snd-toggle { white-space:nowrap; }
}

/* ── scrollbars: iron on dark, never white ── */
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:var(--bg2); }
*::-webkit-scrollbar-thumb { background:oklch(40% .03 252); }
*::-webkit-scrollbar-thumb:hover { background:var(--iron); }
*, html { scrollbar-color:oklch(45% .03 252) var(--bg2); scrollbar-width:thin; }

/* ── module tree (replaces the old monospace pre; no side-scroll) ── */
.modtree { background:var(--bg2); box-shadow:inset 0 0 0 1px oklch(40% .03 252 / .7); padding:18px 20px; }
.modtree .mt-root { font:600 14px var(--f-body); color:var(--mut); letter-spacing:.03em; margin:0 0 10px; display:flex; align-items:center; gap:9px; }
.modtree .mt-root::before { content:""; width:11px; height:8px; border:1.5px solid var(--ember); border-bottom-width:3px; border-radius:1px; }
.mt-files { display:flex; flex-direction:column; padding-left:14px; margin-left:4px; border-left:1px solid var(--line2); }
.mt-row { display:grid; grid-template-columns:minmax(0,150px) 1fr; gap:6px 18px; padding:6px 10px; align-items:baseline; position:relative; border-radius:4px; transition:background var(--dur) var(--ease); }
.mt-row::before { content:""; position:absolute; left:-14px; top:15px; width:11px; height:1px; background:var(--line2); }
.mt-row:hover { background:oklch(72% .19 45 / .07); }
.mt-f { color:var(--ember); font:600 14px var(--f-body); white-space:nowrap; }
.mt-d { color:var(--mut); font:14px/1.45 var(--f-body); }
.mt-sep { display:flex; align-items:center; gap:14px; margin:10px 2px; color:var(--dim); font:11px var(--f-body); text-transform:uppercase; letter-spacing:.14em; }
.mt-sep::before, .mt-sep::after { content:""; height:1px; background:var(--line); flex:1; }
.mt-bk .mt-f { color:var(--iron); }
@media (max-width:560px){ .mt-row { grid-template-columns:1fr; gap:0; } .mt-d { color:var(--dim); } }

/* ── header: text always visible; transparent over the hero, dark bar only on scroll ── */
.nav { z-index:90; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); }
.nav-links a, .brand, .navbtn, .pct { text-shadow:0 1px 10px oklch(0% 0 0 / .55); }
html.scrolled .nav { background:oklch(10% .012 252 / .82); -webkit-backdrop-filter:blur(11px) saturate(1.2); backdrop-filter:blur(11px) saturate(1.2); border-bottom-color:var(--line2); }
html.scrolled .nav-links a, html.scrolled .brand, html.scrolled .navbtn, html.scrolled .pct { text-shadow:none; }
.nav-links a.spons { color:var(--ember); }
.nav-links a.spons:hover { color:var(--hot); }
body.subpage main.page { padding-top:calc(var(--nav-h) + 26px); }

/* ── content / sub-pages ── */
.page-top { padding:6px 0 10px; }
.page-top .eyebrow { margin-bottom:14px; }
.ptitle { font:clamp(2rem,5.4vw,3.7rem)/1.04 var(--f-disp); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 18px; color:var(--ink); -webkit-text-stroke:.3px currentColor; }
.ptlead { max-width:64ch; }
.post { max-width:70ch; }
.post-meta { font:12px var(--f-mono); color:var(--dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.post-title { font:clamp(1.5rem,3.6vw,2.4rem)/1.14 var(--f-disp); text-transform:uppercase; margin:0 0 18px; color:var(--ink); }
.post p { color:var(--mut); font-size:var(--fs-base); line-height:1.7; margin:0 0 16px; }
.note-box { border:1px solid var(--line); border-left:3px solid var(--ember); background:var(--bg2); padding:18px 20px; color:var(--mut); font-size:var(--fs-sm); line-height:1.65; max-width:72ch; }
.note-box strong { color:var(--ink); }

/* ── docs (multi-page) ─────────────────────────────────────────── */
body.subpage .nav { background:oklch(10% .012 252 / .92); backdrop-filter:blur(11px) saturate(1.2); border-bottom-color:var(--line2); }
body.subpage .nav-links a, body.subpage .brand, body.subpage .navbtn, body.subpage .pct { text-shadow:none; }

.docwrap { display:grid; grid-template-columns:232px minmax(0,1fr); gap:14px 52px; align-items:start; padding-top:calc(var(--nav-h) + 34px); padding-bottom:96px; }
body.docs main.page.doc { padding-top:0; padding-bottom:0; min-width:0; }

.docnav { position:sticky; top:calc(var(--nav-h) + 26px); align-self:start; font-family:var(--f-mono); display:flex; flex-direction:column; gap:22px; max-height:calc(100vh - var(--nav-h) - 50px); overflow:auto; padding-right:8px; }
.docnav-g { display:flex; flex-direction:column; gap:3px; }
.docnav-h { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:6px; }
.docnav-l { display:block; padding:6px 12px; color:var(--dim); font-size:13.5px; border-left:2px solid transparent; text-decoration:none; transition:color var(--dur), border-color var(--dur), background var(--dur); }
.docnav-l:hover { color:var(--ink); background:var(--bg2); }
.docnav-l.on { color:var(--ember); border-left-color:var(--ember); background:var(--bg2); }

.doc { max-width:none; }
.dochead { margin-bottom:46px; }
.dtitle { font:clamp(1.9rem,4.6vw,3.2rem)/1.05 var(--f-disp); text-transform:uppercase; letter-spacing:-.01em; margin:6px 0 16px; color:var(--ink); -webkit-text-stroke:.3px currentColor; }
.doc section { margin-bottom:52px; }
.doc h3 { font:600 16px/1.3 var(--f-mono); color:var(--ink); margin:22px 0 8px; }
.doc p { color:var(--mut); font-size:var(--fs-base); line-height:1.72; margin:0 0 14px; max-width:74ch; }
.doc p.smol { font-size:13.5px; color:var(--dim); }
.doc a { color:var(--hot); text-underline-offset:3px; }
.doc pre.code { margin:6px 0 14px; }

ul.dlist { margin:0 0 16px; padding-left:0; list-style:none; max-width:74ch; }
ul.dlist li { position:relative; padding-left:20px; margin-bottom:9px; color:var(--mut); font-size:var(--fs-base); line-height:1.65; }
ul.dlist li::before { content:"\203A"; position:absolute; left:2px; color:var(--ember); }
ul.dlist li strong, .doc p strong { color:var(--ink); }

.tablewrap { overflow-x:auto; margin:8px 0 16px; border:1px solid var(--line); }
table.flags { width:100%; border-collapse:collapse; font-size:13.5px; }
table.flags th { text-align:left; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg2); }
table.flags td { padding:9px 14px; border-bottom:1px solid var(--line2); color:var(--mut); vertical-align:top; line-height:1.55; }
table.flags tr:last-child td { border-bottom:0; }
table.flags td code, .doc p code, ul.dlist code, .qa code { font-family:var(--f-code); font-size:.92em; color:var(--hot); background:var(--bg2); padding:1px 5px; }
table.flags td code { white-space:nowrap; }
table.flags td.df { color:var(--dim); font-family:var(--f-code); white-space:nowrap; }

.qa { border-top:1px solid var(--line2); padding:16px 0; max-width:74ch; }
.qa h3 { margin:0 0 6px; color:var(--ink); }
.qa p { margin:0; }

.docgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:8px; }
.dnext { display:flex; flex-direction:column; gap:5px; padding:15px 17px; border:1px solid var(--line); background:var(--bg2); text-decoration:none; transition:border-color var(--dur), background var(--dur); }
.dnext:hover { border-color:var(--ember); }
.dnext-t { font:600 14px var(--f-mono); color:var(--ember); }
.dnext-d { font-size:13px; color:var(--dim); line-height:1.5; }

.cliblock { border:1px solid var(--line); border-left:3px solid var(--line); background:var(--bg2); padding:16px 18px; margin-bottom:14px; }
.cli-h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.cli-n { font:700 15px var(--f-code); color:var(--ember); background:none; padding:0; }
.cli-d { font-size:13.5px; color:var(--dim); }
.cli-u { margin:0 0 10px !important; font-size:12.5px !important; }
.cliblock table.flags td { padding:6px 12px; }
.cliblock .tablewrap { border:0; margin:0; }

@media (max-width:880px){
  .docwrap { grid-template-columns:1fr; gap:0; padding-top:var(--nav-h); }
  .docnav { position:sticky; top:var(--nav-h); z-index:40; flex-direction:row; flex-wrap:nowrap; gap:8px; max-height:none; overflow-x:auto; overflow-y:hidden; margin:0 calc(var(--wrap-pad)*-1) 26px; padding:9px var(--wrap-pad); border-bottom:1px solid var(--line2); background:oklch(12.5% .010 252 / .96); backdrop-filter:blur(8px); -webkit-overflow-scrolling:touch; }
  .docnav::-webkit-scrollbar { height:0; }
  .docnav-g { flex-direction:row; flex-wrap:nowrap; gap:8px; }
  .docnav-h { display:none; }
  .docnav-l { white-space:nowrap; padding:6px 13px; border:1px solid var(--line2); }
  .docnav-l.on { border-color:var(--ember); color:var(--ember); background:var(--bg2); }
}


/* ── blog ───────────────────── */
.bloggrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-top:8px; }
.bcard { display:flex; flex-direction:column; padding:0; overflow:hidden; border:1px solid var(--line); background:var(--bg2); text-decoration:none; transition:border-color var(--dur), transform var(--dur); }
.bcard-body { display:flex; flex-direction:column; gap:10px; padding:18px 22px 20px; }
.bmotif { line-height:0; border-bottom:1px solid var(--line); background:#0d1014; }
.bmotif svg { display:block; width:100%; height:auto; }
.bcard:hover .bmotif { border-bottom-color:var(--ember); }
.bpost .bmotif { border:1px solid var(--line); margin:0 0 26px; }
.bcard:hover { border-color:var(--ember); transform:translateY(-2px); }
.bcard-meta { font:11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.bcard-tag { color:var(--ember); }
.bcard-title { font:500 16px/1.35 var(--f-mono); color:var(--ink); margin:0; }
.bcard-ex { font-size:13.5px; line-height:1.6; color:var(--mut); margin:0; flex:1; }
.bcard-more { font:12px var(--f-mono); color:var(--ember); letter-spacing:.04em; margin-top:2px; }
.bback { display:inline-block; font:12px var(--f-mono); color:var(--dim); text-decoration:none; margin-bottom:22px; }
.bback:hover { color:var(--ember); }
.bpost { max-width:68ch; }
.bpost .post-title { margin-bottom:22px; }
.bpost p a { color:var(--ember); }


/* ── DOM hammer cursor + code copy buttons ── */
html.mjolnir-on, html.mjolnir-on * { cursor: none !important; }
#mjolnir { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; opacity:0; margin-left:-6px; margin-top:-4px; will-change:transform; transition:opacity .15s linear; }
#mjolnir .mj-rot { transform-origin:15px 27px; }
#mjolnir svg { display:block; filter:drop-shadow(0 2px 3px oklch(0% 0 0 /.55)); }
.mj-hit { animation:mj-strike .26s cubic-bezier(.34,1.2,.5,1); }
@keyframes mj-strike { 0%{transform:rotate(0)} 38%{transform:rotate(-27deg)} 62%{transform:rotate(-14deg)} 100%{transform:rotate(0)} }
@media (prefers-reduced-motion: reduce){ #mjolnir{ display:none !important; } }
@media (pointer: coarse){ #mjolnir{ display:none !important; } html.mjolnir-on, html.mjolnir-on *{ cursor:auto !important; } }
.spark-hot { background:var(--spark); box-shadow:0 0 8px var(--hot), 0 0 14px var(--ember); width:5px; height:5px; }

pre.code { position:relative; }
.copybtn { position:absolute; top:8px; right:8px; z-index:2; background:oklch(15% .012 252 / .88); border:1px solid var(--line); color:var(--dim); font:11px var(--f-code); padding:3px 9px; cursor:pointer; opacity:.5; transition:opacity var(--dur) var(--ease), color var(--dur), border-color var(--dur); }
pre.code:hover .copybtn, .copybtn:focus-visible { opacity:1; }
.copybtn:hover { color:var(--ink); border-color:var(--iron); }
.copybtn.ok { color:var(--green); border-color:var(--green); opacity:1; }
pre.code.forged { box-shadow:inset 0 0 0 1px var(--ember), 0 0 22px oklch(72% .19 45 /.28) !important; transition:box-shadow .2s; }
@media (pointer: coarse){ .copybtn { opacity:1; } }


/* hover audit — nav underline, brand, inline links */
.nav-links a:hover { color:var(--ink); border-bottom-color:var(--ember); }
.brand:hover { color:var(--ember); }
.brand:hover .mk path { fill:var(--hot); }
.doc a:hover, .post p a:hover, .bpost p a:hover, .note-box a:hover { text-decoration:underline; text-underline-offset:3px; }
.foot-col a:hover { text-decoration:underline; text-underline-offset:3px; }