:root { color-scheme: light dark; font: 16px/1.6 system-ui, sans-serif; }
body { margin: 0; padding: 8vh 24px; background: light-dark(#f6f7f9, #17181a); color: light-dark(#17181a, #f7f7f7); }
main { max-width: 480px; margin: auto; padding: 28px; background: light-dark(white, #222428); border: 1px solid #8885; border-radius: 16px; }
h1 { font-size: 1.6rem; line-height: 1.25; }
label, input, button { display: block; box-sizing: border-box; width: 100%; }
input { margin: 6px 0 18px; padding: 12px; border: 1px solid #888; border-radius: 6px; font: inherit; }
button { font: inherit; padding: 12px; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 3px solid #7878ee; outline-offset: 3px; }
#status { min-height: 2em; overflow-wrap: anywhere; }
.brand { font-weight: 700; letter-spacing: .12em; }