:root { color-scheme: light dark; }
body { margin: 0; font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1d1d1f; background: #fff; }
main, footer { max-width: 40rem; margin: 0 auto; padding: 0 1.5rem; }
main { padding-top: 4rem; }
h1 { font-size: 2.25rem; margin: 0 0 .5rem; }
.lead { font-size: 1.125rem; color: #424245; margin: 0 0 2.5rem; }
h2 { font-size: 1.125rem; margin: 0 0 1rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
dt { color: #6e6e73; }
dd { margin: 0; }
a { color: #0066cc; }
footer { padding-top: 3rem; padding-bottom: 2rem; color: #6e6e73; font-size: .875rem; }
@media (prefers-color-scheme: dark) {
  body { color: #f5f5f7; background: #111; }
  .lead { color: #c7c7cc; }
  dt, footer { color: #98989d; }
  a { color: #4da3ff; }
}
@media (max-width: 30rem) { dl { grid-template-columns: 1fr; gap: 0; } dd { margin-bottom: .75rem; } }