:root { --bg:#ffffff; --fg:#1c1c1e; --muted:#6e6e73; --line:#e5e5ea; --accent:#0a84ff; --code:#f2f2f7; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#000000; --fg:#f2f2f7; --muted:#98989d; --line:#2c2c2e; --accent:#0a84ff; --code:#1c1c1e; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width:720px; margin:0 auto; padding:48px 16px 64px; }
h1 { font-size:2rem; line-height:1.2; margin:0 0 8px; }
h2 { font-size:1.15rem; margin:32px 0 8px; }
p, li { color:var(--fg); }
.muted { color:var(--muted); }
a { color:var(--accent); }
nav { border-bottom:1px solid var(--line); padding:12px 16px; }
nav .in { max-width:720px; margin:0 auto; display:flex; gap:20px; flex-wrap:wrap; }
nav a { text-decoration:none; font-weight:600; }
footer { max-width:720px; margin:0 auto; padding:24px 16px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.9rem; }
code, .box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--code);
  border-radius:6px; }
code { padding:1px 5px; }
.box { display:block; padding:12px; word-break:break-all; margin:8px 0; }
button { font:inherit; padding:8px 16px; border-radius:8px; border:1px solid var(--line);
  background:var(--code); color:var(--fg); cursor:pointer; }
table { border-collapse:collapse; width:100%; }
td, th { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }