:root { color-scheme: light dark; --ink:#111; --muted:#555; --line:#ddd; --bg:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#f3f3f3; --muted:#b5b5b5; --line:#333; --bg:#111; }
}
html,body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 ui-sans-serif,system-ui,sans-serif; }
main { max-width:42rem; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
h1 { font-size:1.6rem; line-height:1.25; margin:0 0 .4rem; }
h2 { font-size:1.1rem; margin:2rem 0 .6rem; }
p,li { color:var(--ink); }
.muted { color:var(--muted); }
nav { font-size:.9rem; margin-bottom:1.5rem; }
a { color:inherit; }
ul { padding-left:1.2rem; }
.card { border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; margin:.7rem 0; }
.note { border-left:3px solid var(--line); padding:.2rem 0 .2rem .9rem; }