@font-face{font-family:Inter;src:url('/fonts/InterVariable-4.1.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;color:#f2f7ff;background:#030713}
*{box-sizing:border-box}
html{min-height:100%;background:#030713}
body{position:relative;isolation:isolate;min-width:320px;min-height:100dvh;margin:0;overflow-x:hidden;background:radial-gradient(ellipse 70% 80% at 50% 40%,#0c1d37 0%,#050c1b 52%,#02050e 100%)}
.ambient{position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse 65% 55% at 21% 40%,#07458973,transparent 72%),radial-gradient(ellipse 62% 64% at 84% 82%,#102d8d86,transparent 74%),linear-gradient(135deg,#020713,#061426 48%,#02040d)}
.ambient::before{content:"";position:absolute;inset:-20%;opacity:.3;background:conic-gradient(from 25deg at 50% 50%,transparent,#0884d91f,transparent 28%,#35d3ff18,transparent 54%,#215ad52b,transparent 83%);filter:blur(35px);animation:galaxy-turn 160s linear infinite}
.ambient::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#02061173,transparent 32%,transparent 68%,#02040e67),radial-gradient(ellipse 42% 52% at 50% 56%,transparent 42%,#02050d8f 100%)}
.ambient-glow{position:absolute;display:block;border-radius:46% 54% 62% 38%;filter:blur(clamp(42px,7vw,110px));will-change:transform}
.glow-one{width:min(74vw,820px);height:min(82dvh,710px);top:-13%;left:-13%;background:radial-gradient(ellipse at 57% 52%,#2be2fff0 0%,#0674dbe0 32%,#123caa68 61%,transparent 75%);transform:rotate(-26deg);animation:float-one 20s ease-in-out infinite alternate}
.glow-two{width:min(78vw,900px);height:min(83dvh,750px);right:-15%;bottom:-31%;background:radial-gradient(ellipse at 42% 35%,#3286fff0 0%,#1844bfc9 40%,#572ee05c 63%,transparent 76%);transform:rotate(28deg);animation:float-two 24s ease-in-out infinite alternate}
.glow-three{width:min(38vw,430px);height:min(66dvh,500px);left:31%;top:8%;background:radial-gradient(ellipse,#00c9ff5e,transparent 68%);filter:blur(90px)}
.ambient-orbit{position:absolute;display:block;border:1px solid #65dfff29;border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 40px #41cfff14,inset 0 0 28px #7deaff0a;filter:blur(1.5px)}
.orbit-one{width:min(95vw,1100px);height:min(39vw,440px);top:11%;left:-28%}
.orbit-two{width:min(98vw,1300px);height:min(41vw,520px);right:-31%;bottom:-12%;border-color:#7886ff20;transform:rotate(26deg)}
.shell{position:relative;display:flex;flex-direction:column;min-height:100dvh;padding:clamp(24px,5dvh,46px) 18px}
.login-stack{width:min(100%,450px);margin:auto;display:flex;flex-direction:column;align-items:center}
.brand-wrap{position:relative;isolation:isolate;display:flex;justify-content:center;width:100%;margin-bottom:16px}
.brand-wrap::before{content:"";position:absolute;z-index:-1;top:46%;left:50%;width:min(90vw,365px);height:158px;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,#000 0%,#01030af2 37%,#020510c4 61%,#02061100 78%);filter:blur(11px)}
.brand{position:relative;z-index:1;display:block;width:min(100%,248px);height:auto;max-height:93px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 18px #178dff38);mask-image:radial-gradient(ellipse 78% 85% at center,#000 63%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 78% 85% at center,#000 63%,transparent 100%);transform:translateY(-6px)}
#galaxy-stars{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.brand-art{position:relative;width:min(100%,248px);transform:translateY(-6px)}
.brand-art .brand{width:100%;max-height:none;transform:none}
.brand-x-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;pointer-events:none;mask-image:radial-gradient(ellipse 16% 44% at 30% 48%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 16% 44% at 30% 48%,#000 20%,transparent 100%);transform-origin:30% 48%;animation:brand-x-breathe 8s ease-in-out infinite}
.brand-x-orbit{position:absolute;left:18%;top:9%;width:25%;height:79%;border:1px solid #45d8ff38;border-radius:50%;transform:rotate(43deg);pointer-events:none;animation:brand-orbit-drift 16s ease-in-out infinite alternate}
.brand-x-orbit::after{content:"";position:absolute;top:12%;left:13%;width:3px;height:3px;border-radius:50%;background:#a7edff;box-shadow:0 0 8px 2px #26cfff9c}
@keyframes galaxy-turn{to{transform:rotate(360deg)}}
@keyframes brand-x-breathe{0%,100%{opacity:.2;transform:rotate(-1deg) scale(.99);filter:brightness(1)}50%{opacity:.75;transform:rotate(2deg) scale(1.025);filter:brightness(1.35)}}
@keyframes brand-orbit-drift{to{transform:rotate(57deg);opacity:.5}}
@media(max-width:480px){.brand-art{width:208px}}
@media(max-height:650px){.brand-art{width:185px}}
@media(prefers-reduced-motion:reduce){.ambient::before,.ambient-glow,.brand-x-motion,.brand-x-orbit{animation:none!important}.brand-x-motion{opacity:.25}}
.card{position:relative;isolation:isolate;width:100%;padding:clamp(27px,5vw,40px);overflow:hidden;border:1px solid #c9e8ff3a;border-radius:26px;background:linear-gradient(143deg,#173256a1 0%,#10233a9c 28%,#091627b5 66%,#0c1530ba 100%);box-shadow:0 30px 90px #01040ccc,0 3px 42px #0c63d938,inset 0 1px 0 #ffffff42,inset 0 -1px 0 #84cfff15;backdrop-filter:blur(34px) saturate(155%);-webkit-backdrop-filter:blur(34px) saturate(155%);container-type:inline-size}
.card::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 54% at 3% 0%,#a3e9ff20,transparent 76%),radial-gradient(ellipse 65% 62% at 100% 100%,#2849ba2a,transparent 76%);border-radius:inherit}
.card::after{content:"";position:absolute;z-index:0;top:0;left:10%;right:10%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#e7f7ffac 45%,#67c7ff88 70%,transparent);filter:blur(.3px)}
.card>*{position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;margin:0;color:#70d9ff;font-size:10px;font-weight:800;letter-spacing:.17em;line-height:1.4;text-align:center}
.eyebrow-line{display:inline-block;width:18px;height:2px;flex:none;border-radius:10px;background:#31d4ff;box-shadow:0 0 12px #21cfff}
h1,h2{margin:15px 0 9px;color:#f7fbff;font-size:clamp(25px,8cqi,32px);font-weight:800;letter-spacing:-.045em;line-height:1.14;text-align:center;overflow-wrap:anywhere}
.muted{margin:0;color:#a9bdd6;font-size:14px;line-height:1.55;text-align:center}
.intro{max-width:340px;margin-inline:auto}
form{display:flex;flex-direction:column;gap:9px;margin-top:24px}
label{margin-top:9px;color:#d9e5f5;font-size:12px;font-weight:650;letter-spacing:.01em}
input{width:100%;min-width:0;min-height:48px;padding:12px 15px;border:1px solid #95c8e534;border-radius:13px;outline:0;background:linear-gradient(110deg,#e9f6ff0c,#7cb1f808);box-shadow:inset 0 1px 2px #0004;color:#f6fbff;font:inherit;font-size:14px;transition:border-color .16s,background .16s,box-shadow .16s}
input::placeholder{color:#91a6be8c}
input:hover{border-color:#a6d8f957}
input:focus-visible{border-color:#71d8ffb0;background:#d5f2ff10;box-shadow:0 0 0 3px #28bfff22,inset 0 1px 2px #0004}
button,.button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;padding:12px 17px;border:1px solid transparent;border-radius:13px;background:linear-gradient(108deg,#28c9ff 0%,#188fff 49%,#3159ed 100%);box-shadow:inset 0 1px 0 #ffffff75,0 9px 25px #0877ff52,0 0 25px #14baff24;color:#fff;cursor:pointer;text-align:center;text-decoration:none;font:inherit;font-size:14px;font-weight:800;transition:transform .16s,box-shadow .16s,filter .16s}
button:hover,.button:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 0 #ffffff8a,0 12px 29px #0877ff67,0 0 32px #14baff37}
button:disabled{opacity:.65;cursor:wait;transform:none}
button:focus-visible,a:focus-visible{outline:3px solid #7fe2ff;outline-offset:3px}
.submit{position:relative;margin-top:7px}
.submit span{position:absolute;right:17px;font-size:20px;font-weight:450;line-height:1}
.password-field{position:relative}
.password-field input{padding-right:52px}
.password-toggle{position:absolute;top:50%;right:6px;width:38px;min-height:38px;padding:8px;transform:translateY(-50%);border:0;border-radius:9px;background:transparent;box-shadow:none;color:#a8c3db}
.password-toggle:hover{transform:translateY(-50%);background:#b4e7ff18;box-shadow:none;color:#fff;filter:none}
.password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.error{min-height:18px;margin:0;color:#ffb8c5;font-size:12px;line-height:1.4}
.error:empty{min-height:0}
.card-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid #d6edff1b;color:#8297af;font-size:11px;text-align:center}
.secure-mark{color:#68d9ff;font-size:17px;line-height:1;text-shadow:0 0 12px #30caff99}
.privacy{display:inline-block;margin-top:17px;color:#a5b9d0;font-size:11px;text-align:center;text-decoration:none;transition:color .16s}
.privacy:hover{color:#c9eaff}
#account{margin-top:22px}
#account-name{overflow-wrap:anywhere;color:#bed3e8;text-align:center;font-size:13px}
.secondary{margin-top:11px;border-color:#a5d9fa35;background:#e4f7ff08;box-shadow:inset 0 1px 0 #ffffff12;color:#dbeaff}
.secondary:hover{background:#d1eeff12;box-shadow:inset 0 1px 0 #ffffff21}
dialog{width:min(460px,calc(100% - 28px));max-height:90svh;padding:0;overflow:hidden;border:1px solid #b2e4ff55;border-radius:24px;background:linear-gradient(145deg,#173255eb,#091728ed);box-shadow:0 30px 90px #000b,inset 0 1px #ffffff36;color:#f2f7ff;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
dialog::backdrop{background:#01040dbc;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
.dialog-scroll{max-height:90svh;padding:clamp(24px,6vw,35px);overflow-y:auto;overscroll-behavior:contain;container-type:inline-size}
dialog h2{font-size:clamp(24px,8cqi,30px)}
dialog .eyebrow{justify-content:flex-start}
dialog h2,dialog .muted{text-align:left}
dialog small{color:#9eb4cc;font-size:11px}
#current-wrap{display:flex;flex-direction:column;gap:9px}
[hidden]{display:none!important}
@supports not (backdrop-filter:blur(1px)){.card{background:#0a172beF}dialog{background:#0c1b31}}
@media(max-width:480px){.shell{padding:22px 14px}.brand-wrap{margin-bottom:13px}.brand{width:208px}.card{padding:27px 23px;border-radius:22px}.card-footer{margin-top:21px}.glow-one{width:115vw;height:52dvh;left:-65%;top:-10%}.glow-two{width:130vw;height:55dvh;right:-75%;bottom:-14%}}
@media(max-height:650px){.shell{padding-block:15px}.brand-wrap{margin-bottom:7px}.brand{width:185px;max-height:70px}.card{padding-block:24px}.card-footer{margin-top:18px}form{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(prefers-reduced-motion:no-preference){@keyframes float-one{to{transform:translate(9%,7%) rotate(-17deg)}}@keyframes float-two{to{transform:translate(-8%,-7%) rotate(18deg)}}}

/* Cinematic galaxy: the disc is rendered in canvas; the logo has independent X/AD layers. */
body{background:#01040c}
.ambient{background:radial-gradient(ellipse at 85% 25%,#08182c 0%,transparent 55%),#01040c}
.ambient-glow,.ambient-orbit,.ambient::before{display:none}
.ambient::after{background:radial-gradient(ellipse at 50% 48%,transparent 30%,#000a 100%),linear-gradient(90deg,transparent 25%,#02071138 65%,#01040c33)}
#galaxy-stars{opacity:1}
.brand-wrap{margin-bottom:8px}
.brand-wrap::before{width:350px;height:130px;background:radial-gradient(ellipse,#01040cdf,transparent 72%);filter:blur(18px)}
.animated-wordmark{display:block;width:min(100%,330px);height:auto;overflow:visible;mix-blend-mode:screen;filter:drop-shadow(0 0 15px #1174ff35)}
.logo-ring{fill:none;stroke:#36d8ff;stroke-width:2;stroke-dasharray:140 24 48 12;opacity:.7}
.logo-ring.inner{stroke:#1687ff;stroke-width:5;stroke-dasharray:60 13;opacity:.5}
.logo-ring.core{stroke:#9df6ff;stroke-width:2;stroke-dasharray:50 32;opacity:.85}
.logo-ring.dust{stroke-width:1;stroke-dasharray:2 11;opacity:.7}
.logo-vortex{fill:none;stroke:#42deff;stroke-width:5;opacity:.5}
.logo-smoke{fill:none;stroke:#289cff;stroke-width:18;opacity:.4;transform-origin:324px 180px;animation:logo-mist 11s ease-in-out infinite alternate}
.logo-smoke path+path{stroke:#8beaff;stroke-width:9;opacity:.55}
@keyframes logo-mist{from{transform:rotate(-12deg) scale(1.09,.94);opacity:.25}to{transform:rotate(19deg) scale(.88,1.06);opacity:.55}}
.logo-orbit-wheel{transform-origin:0 0;animation:wordmark-orbit 16s linear infinite}
.logo-orbit-wheel.reverse{animation-duration:25s;animation-direction:reverse}
.logo-x-beam{fill:none;stroke:url(#x-energy);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 8px #26d6ff);animation:x-plasma 5s ease-in-out infinite}
.logo-x-stream{fill:none;stroke:#f0ffff;stroke-width:3;stroke-linecap:round;stroke-dasharray:35 300;animation:x-flow 3s linear infinite;filter:drop-shadow(0 0 4px #23bfff)}
.logo-x-glyph{filter:drop-shadow(0 0 5px #3ecfff)}
.logo-ad{animation:ad-charge 6s ease-in-out infinite;filter:drop-shadow(0 0 5px #118aff)}
.logo-ad-scan{animation:ad-scan 6s ease-in-out infinite}
@keyframes wordmark-orbit{to{transform:rotate(360deg)}}
@keyframes x-flow{to{stroke-dashoffset:-335}}
@keyframes x-plasma{0%,100%{opacity:.75;stroke-width:6}50%{opacity:1;stroke-width:9}}
@keyframes ad-charge{0%,100%{filter:drop-shadow(0 0 4px #118aff);opacity:.85}50%{filter:drop-shadow(0 0 12px #2bdcff);opacity:1}}
@keyframes ad-scan{0%,15%{transform:translateX(0);opacity:0}30%{opacity:.9}65%{transform:translateX(360px);opacity:.9}80%,100%{transform:translateX(360px);opacity:0}}
.card{background:linear-gradient(145deg,#102138a8,#061021d9 62%,#07112bca);border-color:#94dcff45;box-shadow:0 28px 90px #000b,0 0 55px #1461b21a,inset 0 1px #ebfaff40}
@media(max-width:480px){.animated-wordmark{width:255px}.brand-wrap::before{width:280px}.brand-wrap{margin-bottom:3px}}
@media(max-height:650px){.animated-wordmark{width:225px}.brand-wrap{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.logo-smoke,.logo-orbit-wheel,.logo-x-stream,.logo-x-beam,.logo-ad,.logo-ad-scan{animation:none!important}.logo-ad-scan{opacity:0}}

/* Local, silent video. The poster remains visible if playback is unavailable. */
.video-ambient{background:#01040c url('/_next/static/login-black-hole-blue-20261005.jpg') center/cover no-repeat}
.video-ambient video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.video-ambient video.is-playing{opacity:1}
.video-ambient::after{background:linear-gradient(#01040c24,#01040c45),radial-gradient(ellipse at 50% 48%,#02081015 20%,#01040c70 100%)}
@media(min-width:900px){.video-ambient video{transform:translateX(-18%) scale(1.4)}.video-ambient{background-size:auto 140%;background-position:95% center}}
.background-credit{position:fixed;left:12px;bottom:5px;z-index:2;color:#75849a;font-size:10px;text-decoration:none}.background-credit:hover{color:#c9e7ff}

/* Approved logo layers only; existing layout and login behavior are preserved. */
.approved-logo .approved-energy{mix-blend-mode:screen}


/* Smaller approved logo, with no dark backing over the moving video. */
.animated-wordmark.approved-logo{width:min(100%,210px)}
.brand-wrap::before{display:none}
@media(max-width:480px){.animated-wordmark.approved-logo{width:180px}}
@media(max-height:650px){.animated-wordmark.approved-logo{width:165px}}

/* Translucent glass styling without re-blurring a moving video behind each input. */
.card{background:linear-gradient(145deg,#102138e6,#061021ed 62%,#07112bf0);backdrop-filter:none;-webkit-backdrop-filter:none;}
dialog{background:linear-gradient(145deg,#173255f5,#091728fa);backdrop-filter:none;-webkit-backdrop-filter:none;}
dialog::backdrop{background:#01040bdf;backdrop-filter:none;-webkit-backdrop-filter:none;}
.login-interacting .brand-wrap *{animation-play-state:paused!important;}

.music-toggle{position:fixed;right:12px;bottom:8px;z-index:5;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;max-width:44px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#eaf0fa;cursor:pointer;transform:none}.music-toggle svg{display:block;width:20px;height:20px;margin:0}.music-toggle::before,.music-toggle::after{display:none;content:none}.music-toggle[aria-pressed="false"]{opacity:.55}.music-toggle:hover,.music-toggle:focus-visible{border:0;outline:none;background:none;box-shadow:none;transform:none;color:#9de5ff;opacity:1}.music-toggle:disabled{cursor:default;opacity:.3}@media(max-width:600px){.music-toggle{right:6px;bottom:4px}}