:root { color-scheme: light dark; font-family: system-ui, sans-serif; background: #f6f8fc; color: #192437; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
main { margin: 1.5rem; width: min(30rem, calc(100% - 3rem)); }
.eyebrow { color: #3d5382; font-size: .875rem; font-weight: 700; letter-spacing: .1em; }
h1 { margin: .25rem 0; font-size: clamp(2.5rem, 12vw, 4rem); }
p { line-height: 1.6; }
section { border-radius: 1.125rem; background: #edf1ff; padding: 1rem 1.25rem; margin-top: 2rem; }
h2 { margin: 0; font-size: 1.25rem; }
section p { margin: .4rem 0 0; }
@media (prefers-color-scheme: dark) {
  :root { background: #151b26; color: #f2f5ff; }
  .eyebrow { color: #cfdbff; }
  section { background: #273550; }
}