:root{--ground:#141a1b;--surface:#1e2329;--ink:#f1efe9;--muted:#8a93a0;--accent:#06a0d9;--done:#3fbf7f;--line:#333b45}
@media (prefers-color-scheme: light){:root{--ground:#f4f2ec;--surface:#ffffff;--ink:#1e2329;--muted:#5f6874;--accent:#056f98;--line:#d9d5cb}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.55}
main{max-width:44rem;margin:0 auto;padding:3rem 1.25rem 4rem}
header.hero{padding:4rem 1.25rem 2rem;text-align:left;max-width:44rem;margin:0 auto}
.eyebrow{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
h1{font-size:clamp(2rem,6vw,3.25rem);line-height:1.05;margin:0 0 .75rem;letter-spacing:-.02em}
h2{font-size:1.25rem;margin:2rem 0 .5rem}
p{margin:0 0 1rem}
.sub{color:var(--muted);font-size:1.1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.25rem 1.5rem;margin:1rem 0}
.chip{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:.35rem .9rem;font-weight:600;font-size:.9rem}
a{color:var(--accent)}
ul{padding-left:1.2rem}
footer{max-width:44rem;margin:0 auto;padding:2rem 1.25rem;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
nav a{margin-right:1rem}