:root{
  --bg:#0a0908; --bg2:#141110; --bg3:#1c1815; --fg:#f6f1ea; --dim:#a39a8d;
  --accent:#ff8a3d; --accent2:#ff3d78; --accent3:#00d4b4; --line:#2a241e;
}
html[data-theme="light"]{
  --bg:#faf7f2; --bg2:#ffffff; --bg3:#f1ece3; --fg:#221d16; --dim:#6b6255;
  --accent:#e8650f; --accent2:#d21a5c; --accent3:#009480; --line:#e6dfd2;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}
nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);background:color-mix(in srgb, var(--bg) 75%, transparent);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:700;font-size:17px;text-decoration:none;color:var(--fg)}
.brand span{color:var(--accent)}
nav .back{font-size:13px;color:var(--dim);text-decoration:none}
main{padding:60px 0 100px}
.kicker{color:var(--accent);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
h1{font-size:clamp(30px,5vw,44px);margin:0 0 14px;letter-spacing:-.02em}
.lead{color:var(--dim);font-size:17px;line-height:1.6;margin:0 0 40px}
h2{font-size:22px;margin:44px 0 14px;letter-spacing:-.01em;border-top:1px solid var(--line);padding-top:36px}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:16px;margin:26px 0 8px}
p{color:var(--dim);line-height:1.7;font-size:15px}
ul,ol{color:var(--dim);line-height:1.8;font-size:15px;padding-left:22px}
li strong{color:var(--fg)}
code{background:var(--bg3);color:var(--accent3);padding:2px 6px;border-radius:5px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
pre{background:#050403;border:1px solid var(--line);border-radius:12px;padding:18px 20px;overflow-x:auto;margin:16px 0}
pre code{background:none;color:#d9f5e6;padding:0;font-size:13px;line-height:1.7}
.diagram{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:20px;margin:20px 0}
.diagram pre{background:none;border:0;margin:0;color:var(--dim);font-size:12px;font-family:ui-monospace,Menlo,monospace;line-height:1.5}
.docs-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.docs-nav a{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;text-decoration:none;color:var(--dim)}
.docs-nav a.active{color:var(--fg);border-color:var(--accent);background:var(--bg3)}