:root { color-scheme: light dark; }
body {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1c1c1e;
  background: #fdfdfc;
}
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .5rem; }
.subtitle { color: #6b6b70; margin: 0 0 2rem; }
p, li { margin: .6rem 0; }
ul { padding-left: 1.25rem; }
a { color: #0a58ca; }
nav { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e5e3; font-size: .92rem; }
nav a { margin-right: 1rem; }
footer { margin-top: 2rem; color: #6b6b70; font-size: .88rem; }
@media (prefers-color-scheme: dark) {
  body { color: #e8e8ea; background: #16161a; }
  .subtitle, footer { color: #a0a0a8; }
  a { color: #7aa7ff; }
  nav { border-top-color: #2c2c32; }
}