:root {
  color-scheme: light dark;
  --bg: #fbfbfc; --fg: #1b1a1e; --mut: #62606a; --line: #e4e2e8; --ac: #4f46b8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #131217; --fg: #efedf2; --mut: #9b97a4; --line: #2b2833; --ac: #a99bf0; }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 48px 16px 72px; max-width: 46rem;
  background: var(--bg); color: var(--fg);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 .2em; }
h2 { font-size: 1.05rem; margin: 2.2em 0 .5em; }
p, li { color: var(--fg); }
.lede { color: var(--mut); margin: 0 0 2em; }
ul { padding-left: 1.2em; }
li { margin: .35em 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: color-mix(in srgb, var(--fg) 7%, transparent); padding: .1em .35em; border-radius: 4px; }
nav { margin-top: 3em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: .9rem; }
nav a { color: var(--ac); text-decoration: none; margin-right: 1.2em; }
nav a:hover { text-decoration: underline; }
footer { margin-top: 2.5em; font-size: .82rem; color: var(--mut); }