:root{color-scheme:dark;--ink:#f2f3ef;--muted:#a5adb6;--mint:#bcebd5;--line:#dff7ed2d;--ax:0;--ay:0;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#05070c;color:var(--ink)}
body{min-height:100vh;display:grid;place-items:center;padding:24px;overflow:hidden;font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at 58% 34%,#275c6259,transparent 32%),linear-gradient(155deg,#081016,#030509)}
body::before,body::after{content:"";position:fixed;inset:-8%;pointer-events:none;transition:transform 1.8s var(--ease),opacity 1.2s}
body::before{background:radial-gradient(ellipse at 55% 42%,transparent 8%,#193b3c2e 23%,transparent 48%),linear-gradient(176deg,transparent 49%,#071112d9 50%,#020506 77%);transform:translate3d(calc(var(--ax)*-10px),calc(var(--ay)*-6px),0) scale(1.05)}
body::after{inset:auto -8% -18%;height:52%;background:linear-gradient(120deg,#9bcbb711,transparent 55%),linear-gradient(#091315d9,#020405);clip-path:polygon(0 35%,26% 10%,55% 32%,76% 0,100% 24%,100% 100%,0 100%);transform:translate3d(calc(var(--ax)*16px),calc(var(--ay)*8px),0)}
.portal-world{position:fixed;z-index:0;inset:0;width:100%;height:100%;border:0;opacity:0;transform:scale(1.035);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
main{position:relative;z-index:2;width:min(480px,100%);padding:42px;border:1px solid transparent;border-radius:3px 28px 3px 28px;background:radial-gradient(circle at 45% 18%,#ffffff17,transparent 30%),linear-gradient(122deg,#ffffff0b,#ffffff03 46%,#8cbdb207);box-shadow:inset 0 1px #fff3,inset 1px 0 #dff7ed17,0 40px 120px #000c;backdrop-filter:blur(5px) saturate(1.08);transform:translate3d(calc(var(--ax)*5px),calc(var(--ay)*3px),0);transition:opacity .7s var(--ease),transform 1.1s var(--ease),filter .8s}
main::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(135deg,#effff882,transparent 18%,transparent 75%,#bde4d72e);clip-path:polygon(0 0,100% 0,100% 1px,1px 1px,1px 100%,0 100%)}
img{width:42px;height:42px;object-fit:contain;filter:brightness(1.25);margin-bottom:25px;animation:auth-orbit 52s linear infinite}
.eyebrow{font:9px ui-monospace,monospace;letter-spacing:.18em;color:var(--mint)}
h1{font:400 48px/1 Georgia,serif;letter-spacing:-.03em;margin:17px 0}
p{color:var(--muted);font-size:14px;line-height:1.6}
label{display:grid;gap:8px;color:var(--muted);font-size:11px;margin:26px 0 12px}
input,button{width:100%;min-height:50px;border:1px solid var(--line);border-radius:2px;background:#071016;color:var(--ink);padding:12px;font:inherit}
button{cursor:pointer;background:#eaf3ed;color:#07100c;font-weight:650;margin-top:10px}
button:hover{background:var(--mint)}
#message{min-height:24px;color:var(--mint)}
small{display:block;color:#737d87;font-size:10px;line-height:1.5;margin-top:28px}
body.portal-unlocking .portal-world{opacity:1;transform:scale(1)}
body.portal-unlocking::before,body.portal-unlocking::after{opacity:0;transform:scale(1.08)}
body.portal-unlocking main{opacity:0;transform:translate3d(0,-18px,90px) scale(.91);filter:blur(4px);pointer-events:none}
@keyframes auth-orbit{to{transform:rotate(360deg)}}
@media(max-width:520px){main{padding:30px 24px}h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}