:root { --bg:#0b0b0c; --fg:#ececef; --dim:#9a9aa2; --line:#232326; --accent:#34c759; }
@media (prefers-color-scheme: light) { :root { --bg:#fbfbfd; --fg:#1d1d1f; --dim:#6e6e73; --line:#e5e5ea; --accent:#248a3d; } }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); }
body { font:17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:680px; margin:0 auto; padding:72px 20px 96px; }
a { color:inherit; text-decoration-color:var(--dim); text-underline-offset:3px; }
a:hover { text-decoration-color:var(--fg); }
h1 { font-size:40px; line-height:1.1; letter-spacing:-0.02em; margin:0 0 12px; }
h2 { font-size:21px; letter-spacing:-0.01em; margin:48px 0 8px; }
p, li { color:var(--fg); }
.lede { font-size:21px; color:var(--dim); margin:0 0 40px; }
.dim { color:var(--dim); }
ul, ol { padding-left:20px; }
li { margin:6px 0; }
nav { font-size:15px; color:var(--dim); margin-bottom:56px; }
nav a { text-decoration:none; }
footer { margin-top:72px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--dim); }
.pill { display:inline-block; font-size:13px; padding:2px 10px; border:1px solid var(--line); border-radius:999px; color:var(--dim); }
.button { display:inline-block; padding:10px 18px; border-radius:12px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; }
.button:hover { filter:brightness(1.08); }