:root { color-scheme: light dark; --fg: #1a1a1a; --bg: #fafafa; --accent: #3b3bd6; --err: #b00020; }
@media (prefers-color-scheme: dark) { :root { --fg: #eee; --bg: #151515; --accent: #8c8cff; --err: #ff8a9b; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
main { max-width: 26rem; margin: 0 auto; padding: 4rem 1rem; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
label { display: block; font-weight: 600; margin-top: 1.5rem; }
input { width: 100%; font: inherit; padding: .6rem .7rem; margin-top: .25rem; border: 1px solid currentColor; border-radius: .4rem; background: transparent; color: inherit; }
button { width: 100%; font: inherit; font-weight: 600; margin-top: 1rem; padding: .7rem; border: 0; border-radius: .4rem; background: var(--accent); color: #fff; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
a { color: var(--accent); }
.hint, .legal, .footer { font-size: .875rem; opacity: .85; }
#error:not(:empty) { margin-top: 1rem; color: var(--err); }
[hidden] { display: none !important; }