:root { --bg:#fbfcfd; --fg:#16222b; --muted:#566872; --accent:#0b6e8a; --rule:#d9e2e7; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f171c; --fg:#e4edf1; --muted:#9bb0ba; --accent:#5cc3df; --rule:#26343c; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header, main, footer { max-width:42rem; margin:0 auto; padding:0 1rem; }
header { display:flex; justify-content:space-between; align-items:baseline; padding-top:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--rule); }
header a.brand { font-weight:700; font-size:1.25rem; color:var(--fg); text-decoration:none; }
nav a { margin-left:1rem; color:var(--accent); text-decoration:none; }
nav a:hover { text-decoration:underline; }
main { padding-top:1.5rem; padding-bottom:2rem; }
h1 { font-size:1.9rem; line-height:1.2; margin:.5rem 0 1rem; }
h2 { font-size:1.2rem; margin:2rem 0 .5rem; }
a { color:var(--accent); }
.lede { font-size:1.15rem; color:var(--muted); }
.meta { color:var(--muted); font-size:.9rem; }
ul { padding-left:1.25rem; }
li { margin:.3rem 0; }
footer { border-top:1px solid var(--rule); padding-top:1rem; padding-bottom:2rem; color:var(--muted); font-size:.9rem; }