:root{--bg:#0e1013;--surf:#171a1f;--tx:#eceff4;--mut:#8a93a6;--acc:#7aa2ff;--on-acc:#0b1020;--dn:#ff6b7a;--line:rgba(255,255,255,.12);--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}
@media(prefers-color-scheme:light){:root{--bg:#f3f4f6;--surf:#fff;--tx:#14161a;--mut:#737987;--acc:#2f6bff;--on-acc:#fff;--dn:#d63a4b;--line:rgba(0,0,0,.12)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 var(--font);min-height:100vh;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased}
main{width:min(340px,86vw);text-align:center}img{border-radius:22px}h1{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:16px 0 24px}
input{width:100%;padding:16px;font-size:17px;border-radius:14px;border:0;background:var(--surf);color:var(--tx);margin-bottom:16px;box-shadow:0 0 0 .5px var(--line) inset;outline:none;transition:box-shadow .2s}
input:focus{box-shadow:0 0 0 2px var(--acc) inset}
button{width:100%;padding:16px;font-size:17px;font-weight:600;border:0;border-radius:14px;background:var(--acc);color:var(--on-acc);transition:filter .15s,transform .12s}button:active{filter:brightness(.92);transform:scale(.99)}
#err{color:var(--dn);min-height:1.2em}

input.u{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}