:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0 auto; max-width: 46rem; padding: 2rem 1.25rem 4rem;
  font: 17px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1c1e21; background: #fbfbfa;
}
header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid #e2e2df; padding-bottom: .9rem; margin-bottom: 2.5rem; }
.brand { font-weight: 650; letter-spacing: -.01em; color: inherit; text-decoration: none; }
nav a { margin-left: 1.1rem; color: #4a5560; text-decoration: none; font-size: .95rem; }
nav a:hover { color: #1c1e21; }
h1 { font-size: 2rem; letter-spacing: -.02em; margin: 0 0 .6rem; }
h2 { font-size: 1.1rem; margin: 2.2rem 0 .4rem; }
.lead { color: #4a5560; font-size: 1.08rem; margin-top: 0; }
a { color: #1a5fb4; }
footer { display: flex; justify-content: space-between; gap: 1rem; color: #6b7480;
  font-size: .85rem; border-top: 1px solid #e2e2df; margin-top: 3.5rem; padding-top: 1rem; }
@media (prefers-color-scheme: dark) {
  body { color: #e6e6e3; background: #16181a; }
  nav a, .lead, footer { color: #9aa4af; }
  header, footer { border-color: #2a2d31; }
  a { color: #7aa7e8; }
}