:root {
  color-scheme: light dark;
  --background: #ffffff;
  --text: #1a1a1a;
  --muted: #4d4d4d;
  --border: #b8b8b8;
  --link: #0057b8;
  --visited-link: #5b2d90;
  --focus: #b45309;
  --notice-background: #eaf3ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); }
a { color: var(--link); }
a:visited { color: var(--visited-link); }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1; background: var(--background); padding: .5rem; }
header, main, footer { width: min(100% - 2rem, 48rem); margin-inline: auto; }
header { padding-block: 2rem 1rem; border-bottom: 1px solid var(--border); }
header p, .muted { color: var(--muted); }
nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: 1rem 0 0; list-style: none; }
main { padding-block: 2rem 3rem; }
h1, h2 { line-height: 1.2; }
h2 { margin-top: 2rem; }
footer { padding-block: 1.25rem 2rem; border-top: 1px solid var(--border); font-size: .94rem; }
.notice { border-inline-start: 4px solid var(--link); padding: .75rem 1rem; background: var(--notice-background); }

@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --text: #f5f5f5;
    --muted: #c8c8c8;
    --border: #777777;
    --link: #8ab4f8;
    --visited-link: #d0bcff;
    --focus: #ffcc80;
    --notice-background: #1b2a41;
  }

  body { background: #121212; color: #f5f5f5; }
  a { color: #8ab4f8; }
  a:visited { color: #d0bcff; }
}

@media (max-width: 32rem) {
  header, main, footer { width: min(100% - 1.25rem, 48rem); }
}