html {font:1rem/1.6 system-ui,sans-serif;background:#f7f6f1;color:#202832;}
body {margin:0;padding:clamp(1rem,4vw,3rem);}
main {max-width:32rem;margin:8vh auto;padding:clamp(1rem,4vw,2rem);background:#fff;border:1px solid #d8dcd8;border-radius:14px;}
h1 {font-size:clamp(1.6rem,5vw,2rem);line-height:1.25;}
button {font:inherit;padding:.7rem 1rem;min-height:44px;color:white;background:#2448e8;border:0;border-radius:6px;cursor:pointer;}
button:disabled {background:#5c638f;cursor:default;}
a {display:inline-block;padding:.6rem 0;color:#333c96;text-underline-offset:.2em;}
:focus-visible {outline:3px solid #2448e8;outline-offset:4px;}

@media (prefers-color-scheme:dark) {
 html {color-scheme:dark;background:#10181d;color:#f5f4ee;}
 main {background:#1c252e;border-color:#56626d;}
 a {color:#c2c8ff;}
 :focus-visible {outline-color:#c2c8ff;}
}