:root{
  --bg:#EDEEF0; --panel:#FFFFFF; --sunk:#F5F6F8;
  --ink:#0E1114; --ink-2:#4A5158; --ink-3:#848C95;
  --rule:#DCDFE3; --rule-2:#E9EBEE;
  --accent:#1F4FD8;
  --plate:#0A0C0F; --plate-2:#12161B; --plate-ink:#E8ECF1; --plate-ink-2:#8A94A0; --plate-rule:#20262E;
  --hue-a:#F0913C; --hue-b:#43C6D8; --hue-c:#B37AEA; --hue-d:#5FC08A;
  --shadow:0 1px 2px rgba(14,17,20,.06), 0 12px 32px -16px rgba(14,17,20,.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08090B; --panel:#101317; --sunk:#0C0F12;
    --ink:#E8ECF1; --ink-2:#9BA4AE; --ink-3:#6A737D;
    --rule:#1E242B; --rule-2:#171C22;
    --accent:#7FA3FF;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#08090B; --panel:#101317; --sunk:#0C0F12;
  --ink:#E8ECF1; --ink-2:#9BA4AE; --ink-3:#6A737D;
  --rule:#1E242B; --rule-2:#171C22;
  --accent:#7FA3FF;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.col{max-width:64ch}
h1,h2,h3,h4{text-wrap:balance}

/* ---------- chrome ---------- */
header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 24px; max-width:1140px; margin:0 auto}
.top-nm{font-family:"JetBrains Mono",monospace; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.top-nav{display:flex; gap:2px}
.top-nav a{font-family:"JetBrains Mono",monospace; font-size:.6875rem; letter-spacing:.06em; color:var(--ink-3);
  text-decoration:none; padding:5px 9px; border-radius:5px}
.top-nav a:is(:hover, [data-hover]){color:var(--ink); background:var(--rule-2)}
button.ghost{font-family:"JetBrains Mono",monospace; font-size:.6875rem; letter-spacing:.04em; background:transparent;
  color:var(--ink-2); border:1px solid var(--rule); padding:5px 11px; border-radius:999px; cursor:pointer}
button.ghost:is(:hover, [data-hover]){color:var(--ink); border-color:var(--ink-3)}
button.ghost[aria-pressed="true"]{color:var(--accent); border-color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:88px 0 64px}
.kicker{font-family:"JetBrains Mono",monospace; font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3)}
h1{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:clamp(2.8rem,7vw,5.2rem);
  line-height:.98; letter-spacing:-.015em; margin:.22em 0 0}
h1 i{color:var(--hue-b)}
.hero p{margin-top:24px; font-size:1.0625rem; color:var(--ink-2); max-width:56ch}
.index{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  margin-top:48px; background:var(--rule); border:1px solid var(--rule); border-radius:10px; overflow:hidden}
.index a{display:block; background:var(--panel); padding:16px 18px; text-decoration:none; color:inherit}
.index a:is(:hover, [data-hover]){background:var(--sunk)}
.index .ix{font-family:"JetBrains Mono",monospace; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase}
.index .nm{font-family:"Instrument Serif",Georgia,serif; font-size:1.35rem; margin-top:6px; line-height:1.15}
.index .cl{font-family:"JetBrains Mono",monospace; font-size:.625rem; color:var(--ink-3); margin-top:6px}

/* ---------- plate ---------- */
section.plate{padding:64px 0; border-top:1px solid var(--rule); scroll-margin-top:56px}
.ph{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:10px}
.ph .lhs{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.ph .ix{font-family:"JetBrains Mono",monospace; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase}
.ph h2{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:2.3rem; letter-spacing:-.01em; margin:0}
.ph .cl{font-family:"JetBrains Mono",monospace; font-size:.6875rem; color:var(--ink-3);
  border:1px solid var(--rule); border-radius:4px; padding:3px 8px; white-space:nowrap}
.lede{color:var(--ink-2); margin:0 0 26px}

.stage{background:var(--plate); border:1px solid var(--rule); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.stage-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:9px 14px; border-bottom:1px solid var(--plate-rule); background:var(--plate-2);
  font-family:"JetBrains Mono",monospace; font-size:.6875rem; color:var(--plate-ink-2)}
.stage-bar b{color:var(--plate-ink); font-weight:500; font-variant-numeric:tabular-nums}
.gauges{display:flex; gap:15px; flex-wrap:wrap}
.cv{position:relative; width:100%; display:block; touch-action:pan-y}
.cv canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* ---------- rig ---------- */
.rig{margin-top:14px; background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:16px 20px 20px}
.rig-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--rule-2)}
.rig-top h3{margin:0; font-family:"JetBrains Mono",monospace; font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400}
.acts{display:flex; gap:7px; flex-wrap:wrap}
.knobs{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px 26px}
.knob label{display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-family:"JetBrains Mono",monospace; font-size:.6875rem; color:var(--ink-2)}
.knob label output{color:var(--ink); font-variant-numeric:tabular-nums}
.knob .hint{font-size:.625rem; color:var(--ink-3); margin-top:3px; font-family:"JetBrains Mono",monospace}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; margin:5px 0 0; cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--rule); border-radius:2px}
input[type=range]::-moz-range-track{height:2px; background:var(--rule); border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--panel); border:2px solid var(--pc,var(--accent)); margin-top:-5px}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:var(--panel); border:2px solid var(--pc,var(--accent))}

/* ---------- prose blocks ---------- */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); background:var(--panel);
  border:1px solid var(--rule-2); border-radius:10px; overflow:hidden; margin-top:28px}
.cols > div{padding:16px 18px; box-shadow:1px 0 0 var(--rule-2), 0 1px 0 var(--rule-2)}
.cols h4{margin:0 0 6px; font-size:.8125rem; font-weight:600}
.cols p{margin:0; font-size:.8125rem; line-height:1.62; color:var(--ink-2)}
.k{font-family:"JetBrains Mono",monospace; font-size:.75rem; color:var(--pc,var(--accent))}
pre{background:var(--sunk); border:1px solid var(--rule-2); border-radius:10px; padding:15px 17px; overflow-x:auto;
  font-family:"JetBrains Mono",monospace; font-size:.75rem; line-height:1.68; color:var(--ink-2); margin:22px 0 0}
pre b{color:var(--pc,var(--accent)); font-weight:400}
code{font-family:"JetBrains Mono",monospace; font-size:.86em; color:var(--ink)}
.callout{border-left:2px solid var(--pc,var(--accent)); padding:2px 0 2px 16px; margin:24px 0 0; color:var(--ink-2); max-width:60ch}
.callout b{color:var(--ink); font-weight:600}

/* ---------- bench ---------- */
.bench{display:grid; grid-template-columns:minmax(280px,1fr) minmax(300px,1.1fr); gap:20px; align-items:start}
@media (max-width:820px){ .bench{grid-template-columns:1fr} }
#benchchart{width:100%; height:230px; display:block; background:var(--sunk); border:1px solid var(--rule-2); border-radius:10px}
.tbl{width:100%; border-collapse:collapse; font-size:.8125rem}
.tbl th,.tbl td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule-2)}
.tbl th{font-family:"JetBrains Mono",monospace; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.tbl td{color:var(--ink-2)} .tbl td:first-child{color:var(--ink)}
.tbl td.n{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; text-align:right}
.ladder{display:grid; gap:1px; background:var(--rule-2); border:1px solid var(--rule-2); border-radius:10px; overflow:hidden; margin-top:24px}
.rung{background:var(--panel); padding:14px 18px; display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:start}
@media (max-width:640px){ .rung{grid-template-columns:1fr; gap:4px} }
.rung .t{font-family:"JetBrains Mono",monospace; font-size:.75rem; color:var(--ink)}
.rung .t s{display:block; text-decoration:none; font-size:.625rem; color:var(--ink-3); margin-top:3px}
.rung p{margin:0; font-size:.8125rem; color:var(--ink-2)}

footer{border-top:1px solid var(--rule); margin-top:64px; padding:34px 0 72px; color:var(--ink-3); font-size:.8125rem}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important; animation-duration:.001ms !important}
}