@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--bg:#0c0d12;--panel:#12141b;--panel-2:#151720;--line:#292b35;--text:#f1eff6;--muted:#9693a3;--soft:#c0bccb;--accent:#c0a3f0;--accent-strong:#9a78d2;--danger:#f29a9a;--success:#9fd3b4;font-family:'DM Sans',sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--text);overflow-x:hidden}button,input{font:inherit}button{color:inherit}.backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#191923 0,#111219 48%,#0c0d12 100%)}.backdrop-grid{position:absolute;inset:-40%;opacity:.2;background-image:linear-gradient(#34313f 1px,transparent 1px),linear-gradient(90deg,#34313f 1px,transparent 1px);background-size:68px 68px;mask-image:radial-gradient(ellipse at center,#000 0,transparent 70%);transform:perspective(900px) rotateX(58deg) translateY(22%);animation:grid-drift 38s linear infinite}.backdrop-glow{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(100px);opacity:.12;will-change:transform}.glow-left{left:-270px;top:10%;background:#8060ba}.glow-right{right:-310px;bottom:-20%;background:#475890}.light-streak{position:absolute;width:45vw;height:1px;opacity:0;background:linear-gradient(90deg,transparent,#bd9ce9,transparent);transform:rotate(-26deg);animation:streak-pass 13s ease-in-out infinite}.streak-one{left:-10%;top:29%}.streak-two{right:-8%;bottom:27%;animation-delay:6.5s}.login-stage{position:relative;width:min(1110px,calc(100% - 64px));min-height:min(690px,calc(100svh - 64px));margin:32px auto;display:flex;flex-direction:column;opacity:0;animation:stage-enter .8s cubic-bezier(.2,.7,.2,1) .08s forwards}.stage-header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;border-bottom:1px solid #282832}.login-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 18px Manrope,sans-serif;letter-spacing:-.06em}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border:1px solid #8b70b5;border-radius:9px;background:#211b2d;color:#d0b6f3;font:800 17px Manrope,sans-serif;box-shadow:inset 0 1px #ffffff16}.header-context{display:flex;align-items:center;gap:9px;color:#8e899b;font-size:10px;font-weight:700;letter-spacing:.14em}.header-status{width:6px;height:6px;border-radius:50%;background:#a4d5b9;box-shadow:0 0 12px #9de2b8;animation:status-breathe 2.5s ease-in-out infinite}.stage-body{flex:1;display:grid;grid-template-columns:1.03fr .78fr;border:1px solid #292832;border-top:0;border-radius:0 0 15px 15px;background:linear-gradient(135deg,#15151d,#111218 57%);box-shadow:0 35px 100px #0005;overflow:hidden}.story-panel{position:relative;display:flex;flex-direction:column;padding:74px 74px 34px;overflow:hidden;border-right:1px solid #292832;background:linear-gradient(145deg,#1a1822 0%,#15151d 65%,#14151b 100%)}.story-panel:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--pointer-x,68%) var(--pointer-y,72%),#a886d90d,transparent 65%)}.story-kicker{display:flex;align-items:center;gap:11px;margin:0 0 28px;color:#aaa3b6;font-size:10px;font-weight:700;letter-spacing:.15em}.kicker-line{width:22px;height:1px;background:#a78bd0}.story-panel h1{position:relative;z-index:1;margin:0;color:#f0edf5;font:700 clamp(38px,4vw,53px)/1.13 Manrope,sans-serif;letter-spacing:-.065em}.typed-line{display:inline-block;min-height:1.16em;color:var(--accent);white-space:pre}.typing-cursor{display:inline-block;width:2px;height:.82em;margin-left:5px;vertical-align:-.03em;background:#c6a9ef;animation:cursor-blink 1s steps(2,end) infinite}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.story-description{max-width:410px;margin:22px 0 0;color:#a29eab;font-size:14px;line-height:1.8}.story-divider{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:48px;color:#777382;font-size:9px;font-weight:700;letter-spacing:.16em}.story-divider>span:not(.divider-label){height:1px;flex:1;background:linear-gradient(90deg,#393640,transparent)}.story-divider>span:first-child{max-width:35px;background:#61566e}.motion-graph{position:relative;margin:12px -10px 0;height:136px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.motion-graph svg{width:100%;height:100%;overflow:visible}.graph-gridline{fill:none;stroke:#ffffff0b;stroke-width:1}.graph-area{fill:url(#graph-fill);opacity:.65}.graph-stroke{fill:none;stroke:url(#graph-line);stroke-width:1.6;stroke-dasharray:900;stroke-dashoffset:900;animation:draw-chart 3s cubic-bezier(.3,.7,.25,1) .45s forwards,chart-drift 10s ease-in-out 3.5s infinite alternate}.graph-point{fill:#c2a5ed;filter:drop-shadow(0 0 5px #ba93ee);opacity:0;animation:point-in .5s ease-out 2s forwards,point-pulse 3s ease-in-out 2.5s infinite}.point-two{animation-delay:2.3s,2.8s}.point-three{animation-delay:2.6s,3.1s}.story-bottom{display:flex;gap:24px;margin-top:auto;padding-top:24px;color:#797584;font-size:10px;letter-spacing:.06em}.story-bottom b{margin-left:5px;color:#c5c0ce;font-weight:500;letter-spacing:0}.form-panel{position:relative;display:flex;flex-direction:column;padding:35px 56px 30px;background:linear-gradient(160deg,#14151c,#111218 70%)}.form-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px circle at var(--pointer-x,85%) var(--pointer-y,5%),#a886d90a,transparent 70%)}.form-topline{position:relative;display:flex;justify-content:space-between;align-items:center;color:#aaa4b5;font-size:9px;font-weight:700;letter-spacing:.14em}.secure-icon{display:grid;place-items:center;width:31px;height:31px;border:1px solid #33303c;border-radius:9px;color:#b99bdf;background:#1c1a23}.secure-icon svg,.input-wrap>svg,.session-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.form-content{position:relative;margin:auto 0;width:100%;max-width:380px;align-self:center;padding:40px 0 32px}.form-heading{margin-bottom:31px}.form-kicker{margin:0 0 10px;color:#a391ba;font-size:9px;font-weight:700;letter-spacing:.15em}.form-heading h2{margin:0;font:700 30px Manrope,sans-serif;letter-spacing:-.05em}.form-heading>p:last-child{margin:9px 0 0;color:#9692a0;font-size:13px;line-height:1.6}.field-group{margin:0 0 19px}.field-group label{display:block;margin-bottom:8px;color:#c8c4cf;font-size:11px;font-weight:600}.input-wrap{position:relative;display:flex;align-items:center;height:50px;border:1px solid #34313d;border-radius:8px;background:#17171f;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}.input-wrap:focus-within{border-color:#9b7cc5;background:#191821;box-shadow:0 0 0 3px #a57fd21b,0 8px 24px #0002;transform:translateY(-1px)}.input-wrap>svg{flex:0 0 auto;margin-left:15px;color:#82798f}.input-wrap input{width:100%;height:100%;min-width:0;padding:0 14px;border:0;outline:0;background:transparent;color:#f0edf5;font-size:13px}.input-wrap input::placeholder{color:#686574}.input-wrap:has(input[aria-invalid="true"]){border-color:#b76e76;box-shadow:0 0 0 3px #b76e7614}.password-toggle{display:grid;place-items:center;flex:0 0 42px;height:100%;border:0;background:transparent;color:#8e8799;cursor:pointer;transition:color .2s}.password-toggle:hover{color:#d4b8f5}.password-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.eye-closed{display:none}.password-toggle[aria-pressed="true"] .eye-open{display:none}.password-toggle[aria-pressed="true"] .eye-closed{display:block}.caps-lock{display:block;margin-top:7px;color:#e6c688;font-size:11px}.login-feedback{min-height:18px;margin:4px 0 12px;color:var(--danger);font-size:11px}.login-feedback.success{color:var(--success)}.login-submit{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:49px;overflow:hidden;border:1px solid #c3a5ed;border-radius:8px;background:linear-gradient(110deg,#b99add,#c7afe8 48%,#aa8bcf);color:#211a2c;font-size:13px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s}.login-submit:before{content:"";position:absolute;inset:0;transform:translateX(-130%) skewX(-20deg);background:linear-gradient(90deg,transparent,#fff7,transparent);transition:transform .65s}.login-submit:hover{transform:translateY(-2px);box-shadow:0 9px 24px #a583d12b;filter:saturate(1.08)}.login-submit:hover:before{transform:translateX(130%) skewX(-20deg)}.login-submit:active{transform:translateY(0) scale(.99)}.login-submit:disabled{cursor:wait;opacity:.82}.button-spinner{display:none;width:15px;height:15px;margin-right:9px;border:2px solid #3d3349;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}.login-submit.is-loading .button-spinner{display:block}.login-submit.is-loading:before{display:none}.success-check{display:none;width:18px;height:18px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.login-submit.is-success .success-check{display:block;animation:check-in .25s ease-out}.session-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;color:#777381;font-size:10px}.session-note svg{width:13px;height:13px;color:#9a87b3}.form-footer{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid #292832;color:#777381;font-size:10px}.form-footer span:first-child{color:#c5bfce;font-weight:700}.login-stage.is-leaving{animation:stage-exit .35s ease-in forwards}.form-content.has-error{animation:form-shake .36s ease-in-out}.login-stage:focus-visible a:focus-visible,.login-stage button:focus-visible{outline:2px solid #c1a3ef;outline-offset:3px}
@keyframes stage-enter{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(12px)}}@keyframes stage-exit{to{opacity:0;transform:translateY(-8px)}}@keyframes grid-drift{to{background-position:68px 68px}}@keyframes streak-pass{0%,20%{opacity:0;transform:translate3d(-8%,12px,0) rotate(-26deg)}35%{opacity:.22}60%,100%{opacity:0;transform:translate3d(28%, -14px,0) rotate(-26deg)}}@keyframes status-breathe{50%{opacity:.55;box-shadow:0 0 4px #9de2b8}}@keyframes cursor-blink{50%{opacity:0}}@keyframes draw-chart{to{stroke-dashoffset:0}}@keyframes chart-drift{to{stroke-dashoffset:-90}}@keyframes point-in{to{opacity:.9}}@keyframes point-pulse{50%{opacity:.35;filter:drop-shadow(0 0 1px #ba93ee)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes check-in{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes form-shake{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@media(max-width:850px){.login-stage{width:min(640px,calc(100% - 36px));min-height:calc(100svh - 36px);margin:18px auto}.stage-body{grid-template-columns:1fr}.story-panel{padding:42px 44px 24px;border-right:0;border-bottom:1px solid #292832}.story-panel h1{font-size:clamp(36px,7vw,48px)}.story-description{margin-top:14px}.story-divider{margin-top:25px}.motion-graph{height:100px}.story-bottom{padding-top:14px}.form-panel{padding:26px 44px 25px}.form-content{padding:34px 0}}
@media(max-width:520px){.login-stage{width:100%;min-height:100svh;margin:0}.stage-header{height:58px;padding:0 22px}.header-context{font-size:8px;letter-spacing:.1em}.stage-body{border-radius:0;border-left:0;border-right:0}.story-panel{padding:35px 25px 20px}.story-kicker{margin-bottom:20px;font-size:8px}.story-panel h1{font-size:39px}.story-description{font-size:12px}.story-divider{margin-top:24px}.motion-graph{height:82px}.story-bottom{gap:14px;font-size:9px}.form-panel{padding:22px 25px 24px}.form-content{padding:28px 0}.form-heading h2{font-size:27px}.form-footer{padding-top:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.backdrop-grid{animation:none}.light-streak{display:none}.typing-cursor{animation:none;opacity:1}.graph-stroke{stroke-dasharray:none;stroke-dashoffset:0}}

/* Keep decorative layers from extending the document beyond the viewport. */
html{min-height:100%;overflow-x:clip}body{display:grid;place-items:center;padding:32px;overflow-x:clip;overflow-y:hidden}.backdrop{contain:strict}.login-stage{margin:0}.caps-lock[hidden]{display:none!important}
@media(max-height:760px) and (min-width:851px){body{place-items:start center;overflow-y:auto}.login-stage{min-height:690px}}
@media(max-width:850px){body{padding:18px;overflow-y:auto}.login-stage{margin:0;min-height:calc(100svh - 36px)}}
@media(max-width:520px){body{padding:0}.login-stage{margin:0;min-height:100svh}}

/* Give the data illustration a layered, flowing pulse without adding visual noise. */
.graph-wave{fill:none;stroke:#9278bd;stroke-width:1;stroke-dasharray:5 10;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center;animation:wave-arrive .8s ease-out forwards,wave-swell 6s ease-in-out infinite,wave-dash 18s linear infinite}.wave-back{stroke:#82709f;opacity:0;animation-delay:.4s,0s,0s}.wave-front{stroke:#c3a2ed;stroke-width:1.15;opacity:0;animation-delay:.8s,1s,-5s}.graph-stroke{stroke-dasharray:none;stroke-dashoffset:0;animation:graph-breathe 4.8s ease-in-out infinite}.graph-trace{fill:none;stroke:#ddc4ff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 24;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 5px #c59bf0);animation:trace-pass 6s linear infinite,trace-appear .6s ease-out 1.8s forwards}.graph-point{stroke:#eddbff;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:point-bloom .6s ease-out 1.5s both,point-pulse 2.6s ease-in-out 2s infinite}.point-two{animation-delay:1.8s,2.4s}.point-three{animation-delay:2.1s,2.8s}.graph-area{animation:area-breathe 6s ease-in-out infinite alternate}
@keyframes wave-arrive{to{opacity:.28}}@keyframes wave-swell{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1.13)}}@keyframes wave-dash{to{stroke-dashoffset:-180}}@keyframes trace-pass{to{stroke-dashoffset:-156}}@keyframes trace-appear{to{opacity:.92}}@keyframes graph-breathe{0%,100%{opacity:.58;filter:drop-shadow(0 0 0 #b79ade00)}50%{opacity:1;filter:drop-shadow(0 0 4px #b79ade55)}}@keyframes point-bloom{from{opacity:0;transform:scale(.25)}to{opacity:.9;transform:scale(1)}}@keyframes point-pulse{50%{opacity:.4;transform:scale(1.65)}}@keyframes area-breathe{to{opacity:.9}}
@media(prefers-reduced-motion:reduce){.graph-wave,.graph-stroke,.graph-trace,.graph-point,.graph-area{animation:none!important;opacity:.45;transform:none;stroke-dashoffset:0}.graph-stroke{opacity:.85}.graph-trace{display:none}.graph-point{opacity:.8}}
.motion-graph{height:176px;isolation:isolate}.motion-graph svg{position:absolute;inset:25px 0 0;width:100%;height:calc(100% - 25px)}.graph-meta{position:absolute;z-index:2;top:1px;left:9px;right:14px;display:flex;align-items:center;justify-content:space-between}.graph-volume{display:flex;flex-direction:column;gap:3px}.graph-volume small{color:#777282;font-size:8px;font-weight:700;letter-spacing:.15em}.graph-volume strong{color:#e6deef;font:600 15px Manrope,sans-serif;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.graph-volume i,.gain-tag i{color:#a99abf;font-size:9px;font-style:normal;font-weight:500;letter-spacing:.02em}.graph-change{display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #789c812f;border-radius:999px;background:#26352b45;color:#a9d1b2;font-size:10px;font-weight:700}.graph-change b{font-size:12px}.graph-change small{margin-left:2px;color:#797d7a;font-size:8px;font-weight:500}.gain-tag{position:absolute;z-index:2;top:62%;left:23%;padding:4px 7px;border:1px solid #a689c837;border-radius:5px;background:#211d2bc9;color:#c9a8ef;font-size:9px;font-weight:700;white-space:nowrap;box-shadow:0 5px 16px #0002;animation:gain-float 3.4s ease-in-out infinite}.gain-two{top:48%;left:69%;animation-delay:1.7s}.gain-tag i{color:#a792be;font-size:8px}.graph-wave{animation-name:wave-arrive,wave-swell,wave-dash,wave-drift}.wave-back{animation-delay:.4s,0s,0s,-3s}.wave-front{animation-delay:.8s,1s,-5s,0s}.graph-trace{stroke-dasharray:2 24;animation:trace-pass 3.2s linear infinite,trace-appear .6s ease-out 1.8s forwards}
@keyframes wave-drift{0%,100%{translate:0 0}50%{translate:-10px 3px}}@keyframes gain-float{0%,100%{opacity:0;transform:translateY(7px) scale(.96)}14%,70%{opacity:1;transform:translateY(-5px) scale(1)}}
@media(max-width:850px){.motion-graph{height:148px}}
@media(max-width:520px){.motion-graph{height:132px}.graph-volume strong{font-size:13px}.gain-tag{font-size:8px;padding:3px 5px}}
@media(prefers-reduced-motion:reduce){.gain-tag{animation:none;opacity:.8;transform:none}}