:root { --fg:#1d2330; --muted:#5d6677; --bg:#ffffff; --soft:#f6f7f9; --line:#dde1e8; --accent:#c2410c; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); color-scheme:light; }
/* Dark: chosen (data-theme="dark", theme.js), or the device's setting when the theme is "system". */
:root[data-theme="dark"] { --fg:#e7e9ee; --muted:#9aa3b2; --bg:#12151b; --soft:#1a1f27; --line:#2c333f; --accent:#f97316; color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fg:#e7e9ee; --muted:#9aa3b2; --bg:#12151b; --soft:#1a1f27; --line:#2c333f; --accent:#f97316; color-scheme:dark; } }
button.theme { background:none; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:0.35rem 0.6rem; font:inherit; font-size:0.85rem; cursor:pointer; }
* { box-sizing:border-box; } body { margin:0; line-height:1.55; }
header, main, footer { max-width:60rem; margin:0 auto; padding:0 1.25rem; }
header { display:flex; align-items:center; gap:1.25rem; padding-top:1.25rem; padding-bottom:1.25rem; }
header .brand { font-weight:800; font-size:1.25rem; color:var(--accent); text-decoration:none; margin-right:auto; }
header a { color:var(--fg); text-decoration:none; }
a.button { display:inline-block; background:var(--accent); color:#fff; padding:0.6rem 1.1rem; border-radius:8px; text-decoration:none; font-weight:600; }
a.ghost { color:var(--accent); }
.hero { padding:3rem 0 2rem; }
.hero h1 { font-size:2.4rem; line-height:1.15; margin:0 0 1rem; max-width:40rem; }
.hero p { font-size:1.15rem; color:var(--muted); max-width:38rem; }
pre { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:1rem; overflow-x:auto; font-size:0.9rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin:2rem 0; }
.grid div { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; }
.grid h3 { margin:0 0 0.4rem; font-size:1.05rem; }
table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
th, td { text-align:left; padding:0.6rem 0.5rem; border-bottom:1px solid var(--line); }
.muted { color:var(--muted); }
footer { margin-top:4rem; padding-top:1.5rem; padding-bottom:2rem; border-top:1px solid var(--line); color:var(--muted); font-size:0.9rem; display:flex; gap:1.25rem; flex-wrap:wrap; }
footer a { color:var(--muted); }
.doc { max-width:44rem; } .doc .hero { padding-bottom:0.5rem; } .doc h2 { margin-top:2rem; font-size:1.3rem; } .doc h3 { font-size:1.05rem; } .doc pre { white-space:pre-wrap; }