:root{--fg:#1a1a1a;--muted:#6b7280;--bg:#fff;--line:#e5e7eb}
@media (prefers-color-scheme:dark){:root{--fg:#e8e8e8;--muted:#9ca3af;--bg:#0a0a0a;--line:#27272a}}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}
main,header,footer{max-width:42rem;margin:0 auto;padding:0 20px}
header{height:56px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;text-decoration:none;color:inherit}
nav a{color:var(--muted);text-decoration:none;font-size:.9rem;margin-left:1rem}
h1{font-size:1.75rem;line-height:1.3;letter-spacing:-.02em;margin:2.5rem 0 .6rem;font-weight:700}
h2{font-size:1.2rem;margin:2.2rem 0 .5rem;font-weight:600}
p{color:var(--fg);margin:.8rem 0}
.lead{color:var(--muted);font-size:1.05rem}
ul{padding-left:1.1rem;color:var(--fg)}
li{margin:.35rem 0}
a{color:inherit}
footer{margin:4rem auto 3rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
footer a{color:var(--muted)}
.meta{color:var(--muted);font-size:.9rem}