:root{color-scheme:dark;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#0e0e11;color:#f2f2f4;font-family:var(--font);overflow:hidden}button,input{font:inherit}
.gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--gate-canvas);--gate-canvas:#0e0e11;--gate-ink:#f2f2f4;--gate-body:#d2d2d8;--gate-muted:#8d8d97;--gate-accent:#8b76ff;--gate-deep:#16112e;--gate-danger:#f0716f;transition:opacity .18s ease,visibility .18s}.gate.hide{opacity:0;visibility:hidden;pointer-events:none}
.gate-welcome{position:fixed;z-index:100;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;background:rgba(6,7,13,.12);-webkit-backdrop-filter:blur(24px) saturate(.72);backdrop-filter:blur(24px) saturate(.72);color:#fff;font-family:"Avenir Next","SF Pro Display","Helvetica Neue",var(--font)}
body.gate-arriving .gate-welcome{visibility:visible;animation:gate-arrive-layer 2.6s ease both}
@keyframes gate-arrive-layer{0%{opacity:0}8%,86%{opacity:1}100%{opacity:0}}
.gate-welcome-stage{position:relative;width:100%;height:clamp(132px,21vw,190px)}
.gate-welcome-brand,.gate-welcome-sub{position:absolute;left:50%;white-space:nowrap;text-align:center;text-shadow:0 3px 28px rgba(0,0,0,.46);opacity:0}
.gate-welcome-brand{top:50%;font-size:clamp(60px,13vw,126px);font-weight:800;line-height:1;letter-spacing:.075em;text-indent:.075em;transform:translate(-50%,-50%) scale(.92)}
.gate-welcome-sub{top:59%;font-size:clamp(24px,5vw,48px);font-weight:600;line-height:1;letter-spacing:.12em;text-indent:.12em;color:rgba(238,242,255,.92);transform:translate(-50%,14px) scale(.96)}
body.gate-arriving .gate-welcome-brand{animation:video-brand 1.42s cubic-bezier(.16,1,.3,1) both}
body.gate-arriving .gate-welcome-sub{animation:video-sub 1.08s .82s cubic-bezier(.16,1,.3,1) both}
@keyframes video-brand{0%{opacity:0;filter:blur(7px);transform:translate(-50%,-50%) scale(.92)}22%,56%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}100%{opacity:1;filter:blur(0);transform:translate(-50%,-94%) scale(.84)}}
@keyframes video-sub{0%{opacity:0;filter:blur(5px);transform:translate(-50%,14px) scale(.96)}42%,100%{opacity:1;filter:blur(0);transform:translate(-50%,0) scale(1)}}
.gate-welcome-brand::after,.gate-welcome-sub::after{content:attr(data-text);position:absolute;inset:0;color:transparent;font:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;text-indent:inherit;background:linear-gradient(108deg,transparent 43%,rgba(210,220,232,.16) 46%,rgba(255,255,255,.94) 49.5%,rgba(179,192,207,.68) 52%,transparent 56%);background-size:260% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 7px rgba(226,234,244,.2));opacity:0;pointer-events:none}
body.gate-arriving .gate-welcome-brand::after{animation:silver-sweep .32s .5s ease-out both}
body.gate-arriving .gate-welcome-sub::after{animation:silver-sweep .32s 1.38s ease-out both}
@keyframes silver-sweep{0%{opacity:0;background-position:120% 0}14%{opacity:.78}86%{opacity:.78}100%{opacity:0;background-position:-120% 0}}
.gate .ambient{position:absolute;z-index:0;inset:-24%;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 17% 22%,rgba(139,118,255,.28) 0 8%,transparent 31%),radial-gradient(circle at 83% 18%,rgba(92,132,196,.18) 0 7%,transparent 27%),radial-gradient(circle at 68% 76%,rgba(139,118,255,.22) 0 9%,transparent 32%),radial-gradient(circle at 24% 81%,rgba(76,111,174,.14) 0 6%,transparent 25%),radial-gradient(circle at 52% 45%,rgba(139,118,255,.12) 0 5%,transparent 24%);filter:blur(78px) saturate(1.08);transform:translate3d(-2%,-1%,0) scale(1.04);animation:ambient-drift 44s ease-in-out infinite alternate;will-change:transform}
@keyframes ambient-drift{to{transform:translate3d(3%,2%,0) scale(1.1) rotate(2deg)}}
.gate .shader{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease;pointer-events:none}.gate .shader.is-live{opacity:1}
.gate .card{position:relative;z-index:2;width:min(100%,560px);text-align:center;animation:card-rise .46s cubic-bezier(.22,1,.36,1) both}@keyframes card-rise{from{opacity:0;transform:translateY(9px) scale(.99)}}
.code-entry{--slot-width:clamp(38px,12.2vw,58px);--slot-height:clamp(52px,16vw,74px);--slot-gap:clamp(6px,1.8vw,11px);position:relative;width:fit-content;max-width:100%;margin-inline:auto;border-radius:16px}
.code-entry::before{content:"";position:absolute;z-index:-1;top:50%;left:50%;width:calc(100% + clamp(28px,8vw,64px));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at center,rgba(14,14,17,.82) 0%,rgba(14,14,17,.62) 45%,rgba(14,14,17,.22) 72%,transparent 100%);transform:translate(-50%,-50%);pointer-events:none}
.code-input{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;border:0;border-radius:inherit;background:transparent;color:transparent;caret-color:transparent;cursor:text;font-size:16px}.code-input:disabled{cursor:not-allowed}
.slots{display:grid;grid-auto-flow:column;grid-auto-columns:var(--slot-width);gap:var(--slot-gap)}
.slot{position:relative;width:var(--slot-width);height:var(--slot-height);display:grid;place-items:center;overflow:hidden;background:rgba(30,30,38,.62);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(242,242,244,.3);border-radius:clamp(9px,2.6vw,13px);color:var(--gate-ink);box-shadow:inset 0 1px 0 rgba(242,242,244,.06),0 8px 24px rgba(0,0,0,.28);font-size:clamp(16px,4.4vw,24px);font-weight:600;line-height:1;transition:border-color .16s,background-color .16s,box-shadow .16s,color .16s,opacity .16s}
.slot.is-filled{background:rgba(22,17,46,.78);border-color:rgba(139,118,255,.62);color:var(--gate-accent)}.slot.is-current{border-color:var(--gate-accent);box-shadow:0 0 0 3px rgba(139,118,255,.14),0 0 24px rgba(139,118,255,.22),inset 0 1px 0 rgba(242,242,244,.06)}
.slot.is-current:not(.is-filled)::after{content:"";width:2px;height:clamp(16px,4.4vw,24px);border-radius:999px;background:var(--gate-accent);box-shadow:0 0 9px rgba(139,118,255,.72);animation:caret-blink 1s steps(1,end) infinite}@keyframes caret-blink{50%{opacity:.14}}
.code-entry.is-submitting .slot{opacity:.76}.code-entry.is-error .slots{animation:code-shake .42s cubic-bezier(.36,.07,.19,.97) both}.code-entry.is-error .slot{background:rgba(240,113,111,.08);border-color:var(--gate-danger);color:var(--gate-danger);box-shadow:0 0 0 2px rgba(240,113,111,.08)}
@keyframes code-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.code-entry.is-success .slot{color:var(--gate-accent);animation:success-relay .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--slot-index)*55ms)}
@keyframes success-relay{0%{transform:translateY(0)}48%{transform:translateY(-5px);background:var(--gate-accent);border-color:var(--gate-accent);color:var(--gate-deep);box-shadow:0 0 26px rgba(139,118,255,.36)}100%{transform:translateY(0);background:var(--gate-deep);border-color:var(--gate-accent);color:var(--gate-accent);box-shadow:0 0 18px rgba(139,118,255,.2)}}
.gate .status,.gate .error{min-height:1.6em;margin:16px 0 0;color:var(--gate-body);font-size:12px;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(14,14,17,.9)}.gate .status[data-kind="error"],.gate .error{color:var(--gate-danger)}.gate .error{margin-top:0}
.video-control{position:absolute;z-index:3;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));transform:translateX(-50%);width:min(310px,calc(100% - 32px));min-height:56px;padding:9px 11px 9px 14px;display:flex;align-items:center;gap:11px;border:1px solid rgba(242,242,244,.14);border-radius:17px;background:rgba(20,20,26,.64);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 12px 36px rgba(0,0,0,.3);animation:control-rise .5s .12s cubic-bezier(.22,1,.36,1) both}@keyframes control-rise{from{opacity:0;transform:translate(-50%,8px)}}
.power-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#777781;box-shadow:0 0 0 4px rgba(141,141,151,.08);transition:.2s}.power-dot.on{background:#7bd8b2;box-shadow:0 0 0 4px rgba(123,216,178,.1),0 0 13px rgba(123,216,178,.42)}.power-dot.loading{background:#d6bd76;box-shadow:0 0 0 4px rgba(214,189,118,.1),0 0 13px rgba(214,189,118,.46);animation:loading-pulse 1.15s ease-in-out infinite}@keyframes loading-pulse{50%{opacity:.42}}
.power-copy{min-width:0;display:grid;gap:2px;margin-right:auto}.power-copy strong{overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:650;letter-spacing:.025em;white-space:nowrap}.power-copy span{color:var(--gate-muted);font-size:11px;white-space:nowrap}
.switch{position:relative;flex:0 0 auto;width:48px;height:28px;margin:0;padding:0;border:1px solid rgba(242,242,244,.17);border-radius:999px;background:rgba(255,255,255,.07);cursor:pointer;transition:background .18s,border-color .18s}.switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#aaaab3;transition:transform .2s cubic-bezier(.22,1,.36,1),background .18s}.switch.on{border-color:rgba(139,118,255,.58);background:rgba(139,118,255,.43)}.switch.on .switch-knob{transform:translateX(20px);background:#fff;box-shadow:0 0 12px rgba(139,118,255,.42)}.switch.loading{border-color:rgba(214,189,118,.5)}.switch:disabled{cursor:wait;opacity:.65}
.desktop-body{background:#000}.desktop-frame{position:fixed;inset:0;width:100%;height:100%;border:0;background:#000}.preload-desktop{z-index:0}.back-login{position:fixed;z-index:2147483647;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:40px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(18,18,23,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#f2f2f4;font-size:13px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.38)}.back-login[hidden]{display:none}
@media(max-height:520px){.video-control{bottom:max(6px,env(safe-area-inset-bottom));min-height:46px;padding-top:6px;padding-bottom:6px}.gate .status,.gate .error{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.gate .ambient,.gate .card,.slot.is-current::after,.code-entry.is-error .slots,.code-entry.is-success .slot,.video-control,.power-dot.loading{animation:none}.slot,.switch,.switch-knob,.power-dot{transition:none}body.gate-arriving .gate-welcome{opacity:1;visibility:visible;animation:none}body.gate-arriving .gate-welcome-brand{opacity:1;filter:none;transform:translate(-50%,-94%) scale(.84);animation:none}body.gate-arriving .gate-welcome-sub{opacity:1;filter:none;transform:translate(-50%,0);animation:none}.gate-welcome-brand::after,.gate-welcome-sub::after{opacity:0;animation:none}}