:root{--bg:#07080c;--panel:#0e1018;--line:#1d2130;--text:#d9dce6;--dim:#8a90a3;--neon:#39f3c4;--pink:#ff4fa3;--amber:#ffb84d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--neon);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(7,8,12,.92);backdrop-filter:blur(6px);z-index:5}
nav .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:14px 24px;font-size:14px}
nav .brand{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--text);margin-right:auto;letter-spacing:.05em}
nav .brand span{color:var(--neon)}
nav a{color:var(--dim)}nav a.on,nav a:hover{color:var(--text);text-decoration:none}
.draft{background:#1a1406;color:var(--amber);font:12px ui-monospace,monospace;text-align:center;padding:6px;border-bottom:1px solid #3a2a0a}
header.hero{padding:88px 0 56px}
.kicker{font:13px ui-monospace,Menlo,monospace;color:var(--pink);letter-spacing:.12em;text-transform:uppercase}
h1{font-size:clamp(34px,5.5vw,60px);line-height:1.08;margin:12px 0 18px;letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--neon)}
h2{font-size:28px;margin:0 0 14px;letter-spacing:-.01em}
h3{margin:0 0 6px;font-size:18px}
.lede{font-size:20px;color:var(--dim);max-width:720px}
.cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;border:1px solid var(--neon);color:var(--bg);background:var(--neon);font-weight:600}
.btn.ghost{background:transparent;color:var(--neon)}
.btn:hover{text-decoration:none;filter:brightness(1.1)}
section{padding:56px 0;border-top:1px solid var(--line)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px}
.card p{margin:6px 0 0;color:var(--dim)}
.card .tag{font:12px ui-monospace,monospace;color:var(--pink)}
a.card{display:block;color:var(--text)}a.card:hover{border-color:var(--neon);text-decoration:none}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;padding:16px 0 16px 56px;position:relative;border-bottom:1px solid var(--line)}
.steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;font:600 20px ui-monospace,monospace;color:var(--neon)}
.mock{background:#05060a;border:1px solid var(--line);border-radius:12px;font:14px/1.7 ui-monospace,Menlo,monospace;padding:20px;overflow:auto}
.mock .h{color:var(--dim)}.mock .ok{color:var(--neon)}.mock .wait{color:var(--amber)}.mock .who{color:var(--pink)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:780px){.split{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--dim);font-weight:500}
td.code{font-family:ui-monospace,monospace;color:var(--neon);white-space:nowrap}
blockquote{margin:0;padding:18px 22px;border-left:3px solid var(--pink);background:var(--panel);border-radius:0 10px 10px 0;font-size:19px}
.who-for{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.who-for span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--dim)}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--dim);font-size:14px}
.note{color:var(--dim);font-size:14px}