:root{--accent:#0b6bcb;--ink:#16202b;--mute:#667385;--line:#dde3ea;--bg:#fff;--bad:#b42318}
@media(prefers-color-scheme:dark){:root{--ink:#e8edf2;--mute:#93a1b2;--line:#2a3542;--bg:#10151b;--bad:#ff8a80}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:100%}
aside{background:linear-gradient(160deg,#0b6bcb,#0a4a8f);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
aside .plane{font-size:72px;animation:fly 5s ease-in-out infinite}
aside h2{margin:12px 0 8px;font-size:28px}aside p{margin:0;max-width:30ch;opacity:.9}
@keyframes fly{50%{transform:translate(14px,-10px) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){aside .plane{animation:none}}
main{display:flex;align-items:center;justify-content:center;padding:32px 24px calc(32px + env(safe-area-inset-bottom))}
form{width:100%;max-width:360px}
.wave{font-size:36px}h1{margin:4px 0 0;font-size:28px}.lead{margin:2px 0 22px;color:var(--mute)}
label{display:block;font-size:14px;color:var(--mute);margin-bottom:14px}
input{display:block;width:100%;margin-top:5px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);padding:11px 12px;border:1px solid var(--line);border-radius:10px}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.pw{position:relative;display:block}.pw input{padding-right:46px}
.pw button{position:absolute;right:4px;top:5px;bottom:0;margin:auto 0;height:36px;width:40px;background:none;border:0;font-size:18px;cursor:pointer;opacity:.7}
.err{color:var(--bad);min-height:1.4em;margin:0 0 8px;font-size:14px}
#go{width:100%;font:inherit;font-weight:600;color:#fff;background:var(--accent);border:0;border-radius:10px;padding:12px;cursor:pointer}
#go:disabled{opacity:.6;cursor:wait}
@media(max-width:760px){.split{grid-template-columns:1fr;grid-template-rows:auto 1fr}aside{padding:28px 20px;padding-top:calc(28px + env(safe-area-inset-top))}aside .plane{font-size:48px}aside p{display:none}aside h2{margin:6px 0 0;font-size:22px}main{align-items:flex-start}}