:root { --ink:#1f2933; --muted:#52606d; --accent:#2456a6; --bg:#faf9f6; --card:#ffffff; --line:#e4e0d8; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#e8e6e1; --muted:#a8a29a; --accent:#8ab4f8; --bg:#17181a; --card:#202124; --line:#33353a; }
}
* { box-sizing: border-box; }
body { margin:0; font:17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       color:var(--ink); background:var(--bg); }
main { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
h1 { font-size:1.7rem; line-height:1.25; margin:0 0 .4rem; }
h2 { font-size:1.15rem; margin:2rem 0 .5rem; }
p, li { color:var(--ink); }
.muted { color:var(--muted); }
a { color:var(--accent); }
header.site { border-bottom:1px solid var(--line); }
header.site nav { max-width:44rem; margin:0 auto; padding:.8rem 1.25rem; font-size:.95rem; }
header.site a { text-decoration:none; margin-right:1.1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.25rem; margin:.8rem 0; }
.card h3 { margin:.1rem 0 .3rem; font-size:1.05rem; }
.card p { margin:.2rem 0; font-size:.95rem; }
footer { max-width:44rem; margin:0 auto; padding:1.5rem 1.25rem 3rem; color:var(--muted); font-size:.85rem;
         border-top:1px solid var(--line); }