:root {
  color-scheme: light dark;
  --max: 720px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  color: #1a1a1a;
  background: #fafafa;
}
@media (prefers-color-scheme: dark) {
  body { color: #eaeaea; background: #111; }
  a { color: #7aa7ff; }
}
main { max-width: var(--max); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
header h1 { font-size: 2.25rem; margin: 0 0 .25rem; }
.tagline { font-size: 1.15rem; opacity: .85; margin: 0 0 2rem; }
section { margin: 2rem 0; }
h2 { font-size: 1.4rem; margin: 0 0 .75rem; }
p, li { font-size: 1rem; }
nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #ddd; display: flex; gap: 1.5rem; }
@media (prefers-color-scheme: dark) { nav { border-top-color: #333; } }
a { color: #0a55c4; text-decoration: none; }
a:hover { text-decoration: underline; }
.btn {
  display: inline-block; padding: .75rem 1.25rem;
  background: #0a55c4; color: #fff; border-radius: 6px;
  font-weight: 600; text-decoration: none;
}
.btn:hover { background: #073f95; text-decoration: none; }
.note { padding: 1rem 1.25rem; background: #f0f0f0; border-radius: 6px; font-size: .95rem; }
@media (prefers-color-scheme: dark) { .note { background: #1d1d1d; } }
code { background: #eee; padding: .15rem .4rem; border-radius: 3px; font-size: .9em; }
@media (prefers-color-scheme: dark) { code { background: #2a2a2a; } }