:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #faf9f7;
  color: #22201d;
  padding: 24px;
}
main { max-width: 34rem; }
h1 { font-size: 2rem; margin: 0 0 .5rem; letter-spacing: -.02em; }
.lead { font-size: 1.15rem; color: #6b645c; margin-top: 0; }
p { margin: 0 0 1rem; }
nav { margin-top: 2rem; font-size: .9rem; }
a { color: #a8521f; text-decoration: none; }
a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  body { background: #17161a; color: #e8e4de; }
  .lead { color: #9b948c; }
  a { color: #e09048; }
}