:root { color-scheme: light dark; font: 1rem/1.55 system-ui,sans-serif; }
body { margin: 0; background: light-dark(#edf1f8,#101722); color: light-dark(#17243a,#edf2fc); }
main { box-sizing: border-box; max-width: 38rem; margin: 4vh auto; padding: clamp(1.25rem,5vw,2.5rem); border-radius: 1.5rem; background: light-dark(white,#1b2534); box-shadow: 0 .5rem 2rem #0002; }
h1 { font-size: clamp(1.6rem,6vw,2rem); line-height: 1.2; } h2 { font-size: 1.25rem; }
form { display: grid; gap: 1rem; } label { display: grid; gap: .25rem; }
input,button { box-sizing: border-box; font: inherit; padding: .65rem .8rem; border-radius: .65rem; border: 1px solid #8290a5; max-width: 100%; }
button { cursor: pointer; background: light-dark(#245dba,#a5c8ff); color: light-dark(white,#08254d); margin: .35rem .35rem .35rem 0; }
button:focus-visible,input:focus-visible { outline: 3px solid #6e9fea; outline-offset: 3px; }
[hidden] { display: none !important; } #status { overflow-wrap: anywhere; }