:root { color-scheme: light dark; font: 16px/1.5 system-ui, sans-serif; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f6f7f9; color: #18202a; }
main { box-sizing: border-box; width: min(100% - 40px, 420px); padding: 32px; border: 1px solid #dde2e9; border-radius: 20px; background: #fff; }
.brand { color: #657181; font-weight: 650; letter-spacing: .03em; margin: 0 0 28px; }
h1 { font-size: 26px; margin: 0 0 12px; }
#status { min-height: 48px; color: #536171; }
button { border: 0; border-radius: 10px; padding: 12px 16px; color: #fff; background: #172e4c; font: inherit; cursor: pointer; width: 100%; }
button:focus-visible { outline: 3px solid #4b8dde; outline-offset: 3px; }
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) { body { background: #10141b; color: #f2f5fa; } main { background: #191f29; border-color: #333d4c; } #status, .brand { color: #adb9c9; } button { background: #31547e; } }