*,*::before,*::after{box-sizing:border-box}
:root,[data-theme=tokyo]{--bg:#16161e;--surface:#1a1b26;--elev:#24283b;--fg:#c0caf5;--muted:#a9b1d6;--subtle:#565f89;--accent:#7dcfff;--ok:#9ece6a;--warn:#e0af68;--border:rgba(192,202,245,.12);--strong:rgba(192,202,245,.24);--gap:#0d0e14}
[data-theme=vanta]{--bg:#050505;--surface:#0c0c0c;--elev:#141414;--fg:#e4e4e7;--muted:#a1a1aa;--subtle:#52525b;--accent:#e4e4e7;--ok:#a1a1aa;--warn:#d4d4d8;--border:rgba(228,228,231,.12);--strong:rgba(228,228,231,.26);--gap:#000}
[data-theme=matte]{--bg:#141210;--surface:#1c1917;--elev:#292524;--fg:#e7e5e4;--muted:#a8a29e;--subtle:#78716c;--accent:#c4b5a0;--ok:#a3b18a;--warn:#d6a36a;--border:rgba(231,229,228,.12);--strong:rgba(231,229,228,.24);--gap:#0c0a09}
[data-theme=paper]{--bg:#f4f1ea;--surface:#ece7dc;--elev:#fff;--fg:#1c1917;--muted:#57534e;--subtle:#a8a29e;--accent:#0f766e;--ok:#3f6212;--warn:#b45309;--border:rgba(28,25,23,.12);--strong:rgba(28,25,23,.22);--gap:#ddd6c8}
html,body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 "IBM Plex Sans",system-ui,sans-serif}
a{color:inherit}
img,video{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:8px;background:var(--elev);padding:8px}
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;min-height:64px;padding:0 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.brand b{font:italic 20px/1 "Instrument Serif",serif}
.brand span{font:11px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.top nav{display:none;gap:4px;margin-left:auto}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--muted);text-decoration:none}
.top nav a[aria-current]{color:var(--fg)}
.tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.theme-dots{display:none;gap:6px;background:none;border:0;cursor:pointer}
.theme-dots i{width:10px;height:10px;border-radius:99px;border:1px solid var(--strong);display:block}
.theme-dots i[data-swatch=tokyo]{background:#7dcfff}
.theme-dots i[data-swatch=vanta]{background:#e4e4e7}
.theme-dots i[data-swatch=matte]{background:#c4b5a0}
.theme-dots i[data-swatch=paper]{background:#1c1917}
.phone{display:none;font:12px/1 "IBM Plex Mono",monospace;color:var(--muted);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer;font:500 14px/1 "IBM Plex Sans",sans-serif}
.btn-solid{background:var(--accent);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--strong)}
.burger{background:none;border:0;color:var(--fg);min-height:44px;cursor:pointer}
.drawer{border-bottom:1px solid var(--border);background:var(--surface);padding:8px 20px 16px}
.drawer[hidden],.launcher[hidden],.scrim[hidden]{display:none !important}
.drawer a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:48px 20px}
.hero{display:grid;gap:32px}
h1,h2,h3,.serif{font-family:"Instrument Serif",serif;font-weight:400;font-style:italic}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:12px 0}
h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:8px 0 0}
h3{font-size:1.4rem;margin:8px 0 0}
.lede,.muted{color:var(--muted)}
.subtle,.k{font:11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.k{color:var(--subtle)}
.mono{font-family:"IBM Plex Mono",monospace}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.grid{display:grid;gap:16px}
.card,.term{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:20px}
.term{background:var(--gap);font:13px/1.6 "IBM Plex Mono",monospace;white-space:pre-wrap}
.term .ok{color:var(--ok)}
.term .dim{color:var(--subtle)}
.media{width:100%;border-radius:16px;border:1px solid var(--border);object-fit:cover;background:var(--gap)}
.surface{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font:11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:12px;background:var(--elev)}
td{padding:12px;border-top:1px solid var(--border);vertical-align:top}
.price{font:italic 1.4rem "Instrument Serif",serif;margin:8px 0}
.price s{color:var(--subtle);font-size:.8em}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.filters button{min-height:44px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer}
.filters button.on{border-color:var(--accent);background:var(--elev);color:var(--fg)}
.rungs button{display:flex;width:100%;text-align:left;gap:12px;padding:10px;border:1px solid var(--border);border-radius:8px;background:none;color:inherit;cursor:pointer}
.rungs button.on{border-color:var(--accent);background:var(--elev)}
.copy{position:relative}
.copy pre{white-space:pre-wrap;font:13px/1.5 "IBM Plex Mono",monospace;background:var(--gap);border:1px solid var(--border);border-radius:12px;padding:16px 16px 48px}
.copy button{position:absolute;right:10px;bottom:10px}
.cta{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:end;padding:64px 20px;max-width:1120px;margin:0 auto}
footer{border-top:1px solid var(--border);background:var(--surface);padding:48px 20px}
.foot-grid{max-width:1120px;margin:0 auto;display:grid;gap:32px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:8px 0}
.foot-grid a{color:var(--muted);text-decoration:none}
.legal{max-width:1120px;margin:16px auto 0;color:var(--subtle);font-size:12px}
.foot-tag{display:block;width:100%;margin:24px 0 0;padding:0;text-align:center;font:13px/1.5 "IBM Plex Mono",monospace;color:var(--muted)}
.scrim{position:fixed;inset:0;z-index:45;background:#0008;border:0;padding:0;cursor:pointer}
.launcher{position:fixed;top:16vh;left:50%;transform:translateX(-50%);z-index:50;width:min(380px,calc(100vw - 32px));background:var(--elev);border:1px solid var(--strong);border-radius:16px;padding:16px 18px 12px;display:none;flex-direction:column;gap:4px;box-shadow:0 24px 80px #000a}
.launcher:not([hidden]){display:flex}
.launcher a{min-height:44px;display:flex;align-items:center;text-decoration:none;border-radius:8px;padding:0 8px}
.launcher a:hover,.launcher a:focus{background:var(--surface)}
.launcher .k{display:flex;justify-content:space-between;align-items:center;margin:0 8px 8px}
.launcher button.close{background:none;border:0;color:var(--muted);cursor:pointer;min-height:44px;font:12px/1 "IBM Plex Mono",monospace}
details{border:1px solid var(--border);border-radius:12px;padding:12px 16px;background:var(--surface)}
details+details{margin-top:8px}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
@media(min-width:900px){
  .top nav,.theme-dots,.phone{display:flex}
  .burger{display:none}
  .hero{grid-template-columns:1.05fr .95fr;align-items:center}
  .cols-2{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:1fr 1fr 1fr}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
}