:root { color-scheme: light dark; font: 1rem/1.55 system-ui, sans-serif; color: #203247; background: #f7f6f2 }
body { margin: 0; padding: clamp(1.25rem, 8vw, 6rem) 1.25rem }
main { box-sizing: border-box; max-width: 35rem; margin: auto; padding: clamp(1.25rem, 5vw, 3rem); background: white; border: 1px solid #cbd2d7; border-radius: 1rem }
h1 { line-height: 1.15; margin: 1.25rem 0 .75rem }
.brand { font-weight: 750; letter-spacing: .02em }
button { min-height: 44px; padding: .6rem 1rem; border: 1px solid #243a4b; border-radius: .5rem; background: #243a4b; color: white; font: inherit; cursor: pointer; margin: .25rem .25rem .25rem 0 }
button.secondary { color: inherit; background: transparent }
button:disabled { opacity: .7; cursor: wait }
a { color: inherit }
@media (prefers-color-scheme: dark) {
  :root { background: #17232f; color: #f4f4f0 } main { background: #22303d }
  button { border-color: #a7bcc9 }
}