:root {
  --paper: #e9e6dd; --panel: #f4f2eb; --text: #141a22; --muted: #5f6873; --line: #c9c5b9; --accent: #c62f1c; --isobar: #2d5a8a;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Cambria, Georgia, serif;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --bg: var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0f151c; --panel: #151d27; --text: #e6e3d9; --muted: #9aa3ad; --line: #2b3540; --accent: #ff6b52; --isobar: #8db4e3; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--text); font: 17px/1.6 var(--serif); }
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
nav { margin-bottom: 28px; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--text); }
a { color: var(--isobar); text-underline-offset: 3px; }
h1 { font: 800 clamp(30px, 5vw, 40px)/1.05 var(--sans); letter-spacing: -.025em; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 3px solid var(--text); }
h2 { font: 700 20px/1.2 var(--sans); letter-spacing: -.01em; margin: 32px 0 6px; }
p, ul { margin: 8px 0; }
.note { color: var(--muted); font-size: 15px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Easter egg: piggy.js sets html.piggy when the pig on the start page was clicked */
:root.piggy { --paper: #fdeef3; --panel: #fff6f9; --text: #4a1a2c; --muted: #9a5b72; --line: #f3c1d3; --accent: #d6336c; --isobar: #d6336c; }
@media (prefers-color-scheme: dark) {
  :root.piggy { --paper: #2b0f1c; --panel: #35142a; --text: #ffe3ee; --muted: #e6a1bb; --line: #5e2a40; --accent: #ff8fb8; --isobar: #ff8fb8; }
}