:root{--paper:#FAF8F5;--ink:#17171A;--soft:#5B5B66;--line:#E9E6E1;--accent:#8B7CF6;--card:#fff}
@media (prefers-color-scheme:dark){:root{--paper:#111114;--ink:#F2F0EC;--soft:#A8A8B3;--line:#2E2E35;--card:#1C1C21}}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,sans-serif}
main{max-width:760px;margin:0 auto;padding:48px 20px 80px}
h1,h2,.serif{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.02em}
h1{font-size:44px;line-height:1.1;margin:0 0 16px}h2{font-size:26px;margin:40px 0 8px}
p,li{color:var(--soft)}a{color:var(--ink)}code,pre{font-family:ui-monospace,Menlo,monospace;font-size:14px}
pre{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;overflow:auto;color:var(--ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;margin:16px 0}
.btn{display:inline-block;border:0;border-radius:999px;background:var(--ink);color:var(--paper);padding:14px 22px;font-weight:600;font-size:16px;cursor:pointer;text-decoration:none}
.btn.secondary{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:16px}
nav{display:flex;gap:16px;margin-bottom:40px;font-weight:600}nav a{text-decoration:none}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;color:var(--soft)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}