:root { color-scheme: light dark; font: 17px/1.65 system-ui, sans-serif; background: #f7f8fa; color: #162330; }
* { box-sizing: border-box; }
body { margin: 0; }
main, header, footer { max-width: 760px; margin: auto; padding: 1.3rem 1.5rem; }
header { border-bottom: 1px solid #cdd6df; }
nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
a { color: #075fab; text-underline-offset: .2em; }
h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.2; margin: .8rem 0 1.2rem; }
h2 { font-size: 1.3rem; line-height: 1.35; margin-top: 2rem; }
p, li { max-width: 68ch; }
li { margin: .5rem 0; }
code { overflow-wrap: anywhere; }
.eyebrow, footer { font-size: .88rem; color: #4d6072; }
.notice { padding: 1rem 1.2rem; border-left: 3px solid #176db0; background: #eaf2f9; }
footer { border-top: 1px solid #cdd6df; margin-top: 1.5rem; }
@media (prefers-color-scheme: dark) {
  :root { background: #111b24; color: #e2eaf2; }
  a { color: #8fc9fa; }
  .eyebrow, footer { color: #b2c4d4; }
  .notice { background: #1b2e40; }
  header, footer { border-color: #394c5d; }
}