:root {
  --ink: #1d2433;
  --muted: #5b6475;
  --bg: #ffffff;
  --line: #d9dde5;
  --accent: #1f4fd8;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8ebf2; --muted: #a2a9b8; --bg: #14171f; --line: #2c3240; --accent: #7fa2ff; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.65 Georgia, "Times New Roman", serif;
}
header, main, footer { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }
header { padding-top: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.brand { font: 700 1.3rem/1 system-ui, sans-serif; color: var(--ink); text-decoration: none; }
nav { margin-top: .75rem; font: 1rem system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 1.25rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main { padding-top: 2rem; padding-bottom: 3rem; }
h1 { font: 700 2.2rem/1.2 system-ui, sans-serif; margin: 0 0 1rem; }
h2 { font: 700 1.3rem/1.3 system-ui, sans-serif; margin: 2rem 0 .5rem; }
ul { padding-left: 1.2rem; }
.next { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: system-ui, sans-serif; }
footer { padding-bottom: 2rem; color: var(--muted); font: .9rem system-ui, sans-serif; }