/* Static Hoper artwork only. Existing authentication and workspace own navigation. */
html body #welcomeView,html body #welcomeView.koko-backdrop{background:radial-gradient(ellipse at 32% 55%,#0b2530 0%,#07171e 35%,#02090e 80%)!important;min-height:680px!important;height:100svh!important;overflow:hidden!important;isolation:isolate;color:#d8edf3}
html body #welcomeView .welcome-video,html body #welcomeView .welcome-video-shade,html body #welcomeView .koko-bg-ring,html body #welcomeView>.koko-beats,html body #welcomeView .welcome-kicker,html body #welcomeView .welcome-copy>h1,html body #welcomeView .welcome-copy>p{display:none!important}
html body #welcomeView .welcome-brand:after{content:none!important}
html body #welcomeView .welcome-brand .brand-logo{display:inline-flex!important;opacity:1!important;width:auto!important;height:auto!important;font-size:22px!important;letter-spacing:.06em!important;color:#b3d5db!important}
html body #welcomeView .welcome-nav{position:absolute!important;inset:0 0 auto!important;padding:26px 4.5%!important;background:transparent!important;border:0!important;z-index:5!important}
html body #welcomeView .runway-links{gap:20px!important}
html body #welcomeView .runway-links button,html body #welcomeView .welcome-nav-actions .quiet-link{color:#a2bec7!important}
html body #welcomeView .welcome-main{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;padding:70px 5% 50px 60%!important;bottom:0!important;z-index:3!important}
html body #welcomeView .welcome-copy{width:100%!important;max-width:560px!important;margin:0!important;text-align:center!important}
.hoper-art{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hoper-character{position:absolute;left:1%;bottom:-10%;width:60%;height:112%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 38px #5bcbe517);animation:hoper-arrive 1.7s ease-out both;mask-image:linear-gradient(to bottom,#000 84%,transparent 99%)}
.hoper-character-open{opacity:0;animation:none;transition:opacity .45s ease}
#welcomeView.hoper-awake .hoper-character-open{opacity:1}
.hoper-ambient{position:absolute;inset:12% 30% 0 -8%;background:radial-gradient(ellipse,#2d79ae22,transparent 66%);filter:blur(36px)}
.hoper-lockup{position:relative;width:100%;padding:18px 0;animation:hoper-arrive 1.5s .15s ease-out both}
.hoper-logo{position:relative;display:block;width:100%;height:auto;aspect-ratio:4.2;object-fit:contain;filter:drop-shadow(0 0 10px #adadff25)}
.hoper-orbit{position:absolute;left:-8%;right:-8%;top:18%;height:38%;border:1px solid #a8abec55;border-radius:50%;transform:rotate(-16deg);box-shadow:0 0 8px #9daeff18}
.hoper-orbit:after{content:"";position:absolute;right:12%;top:-5px;width:9px;height:9px;background:#d3d9ff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.hoper-qixu{display:block;width:auto;height:46px;max-width:65%;margin:18px auto 0;object-fit:contain}
.hoper-tagline{font:9px/1.8 Consolas,monospace;letter-spacing:.28em;color:#88c7c7;margin:14px 0 0}
.hoper-rule{height:1px;width:36%;margin:14px auto;background:linear-gradient(90deg,transparent,#90d9da,transparent)}
html body #welcomeView .welcome-actions{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:12px!important;margin:20px 0 0!important}
html body #welcomeView .welcome-actions .welcome-cta,html body #welcomeView .welcome-actions .quiet-link{min-width:160px!important;min-height:50px!important;height:auto!important;border-radius:10px!important;padding:13px 20px!important;font-size:15px!important;letter-spacing:.1em!important;box-shadow:none!important}
html body #welcomeView .welcome-actions .welcome-cta{background:linear-gradient(115deg,#142a46ed,#293253e8)!important;border:1px solid #a8c8ff8c!important;color:#edf2ff!important;box-shadow:0 0 26px #668ff522,inset 0 1px 0 #eef2ff20!important}
html body #welcomeView .welcome-actions .quiet-link{background:#0b182b99!important;color:#b6d2e0!important;border:1px solid #a8c8ff44!important}
.hoper-footer{position:absolute;left:65%;right:5%;bottom:4%;display:flex;justify-content:space-between;gap:16px;z-index:4;color:#87a7b3;font:10px/1.5 Consolas,"Microsoft YaHei",sans-serif;letter-spacing:.08em}
.hoper-footer button{border:0;background:none;color:#9dbecb;cursor:pointer;font:inherit;padding:0}
.hoper-footer button:hover{color:#e2f8ff}
.hoper-footer button:focus-visible{outline:2px solid #8ee5f0;outline-offset:6px}
html body #loginView.koko-over-landing{background:#02090ef2!important;justify-content:flex-end!important;padding:36px 6%!important;overflow-y:auto!important}
html body #loginView.koko-over-landing:before,html body #loginView.koko-over-landing:after{content:none!important;backdrop-filter:none!important}
html body #loginView .login-aside{display:block!important;position:fixed!important;inset:0 43% 0 0!important;width:auto!important;height:100%!important;opacity:1!important;background:radial-gradient(ellipse at 42% 60%,#0b2530,#02090e 75%)!important;pointer-events:none}
html body #loginView .login-aside:after,html body #loginView .auth-aside-video,html body #loginView .login-aside>.welcome-brand,html body #loginView .login-aside-copy,html body #loginView .login-aside>.koko-beats{display:none!important}
#loginView .hoper-character{width:110%;left:-5%;height:102%;bottom:-5%;opacity:.85;animation:none}
#loginView .hoper-login-wordmark{position:absolute;width:42%;height:auto;right:5%;top:12%;filter:drop-shadow(0 0 8px #b8d3fa44)}
html body #loginView.koko-over-landing .login-panel{position:relative!important;margin:0!important;width:min(470px,100%)!important;max-height:calc(100svh - 72px)!important;overflow-y:auto!important;background:linear-gradient(165deg,#132232ed,#08131df7)!important;border:1px solid #a8c8ff38!important;box-shadow:0 24px 80px #0007!important;backdrop-filter:blur(20px)!important}
html body #loginView .form-eyebrow{color:#9dcddd!important}
html body #loginView #loginForm button.login-submit.koko-submit-soft,html body #loginView #registerForm button.login-submit{background:linear-gradient(115deg,#233e61,#3c436d)!important;color:#edf2ff!important;border:1px solid #a8c8ff70!important;box-shadow:0 0 20px #668ff522!important}
@keyframes hoper-arrive{from{opacity:0;transform:translateY(18px);filter:blur(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){html body #welcomeView .welcome-main{padding-left:54%!important;padding-right:4%!important}.hoper-character{left:-8%;width:70%}.hoper-footer{left:56%;right:4%}html body #welcomeView .runway-links{display:none!important}html body #loginView .login-aside{right:40%!important}html body #loginView.koko-over-landing{padding:28px 4%!important}}
@media(max-width:650px){html body #welcomeView{min-height:650px!important}html body #welcomeView .welcome-nav{padding:20px 6%!important}.hoper-character{width:110%;height:66%;left:-5%;bottom:auto;top:-3%;mask-image:linear-gradient(to bottom,#000 70%,transparent 99%)}html body #welcomeView .welcome-main{align-items:flex-end!important;padding:0 13% 100px!important}.hoper-lockup{padding:0}.hoper-logo{aspect-ratio:4.2}.hoper-qixu{height:34px;margin-top:12px}.hoper-tagline{font-size:7px;margin-top:9px}.hoper-rule{margin:9px auto}html body #welcomeView .welcome-actions{margin-top:15px!important;gap:10px!important}html body #welcomeView .welcome-actions .welcome-cta,html body #welcomeView .welcome-actions .quiet-link{min-width:0!important;width:100%!important;min-height:44px!important;font-size:13px!important;padding:10px 16px!important}.hoper-footer{left:7%;right:7%;bottom:24px;font-size:9px}html body #loginView.koko-over-landing{padding:16px!important;justify-content:center!important}html body #loginView .login-aside{inset:0!important;opacity:.2!important}html body #loginView.koko-over-landing .login-panel{max-height:calc(100svh - 32px)!important}#loginView .hoper-login-wordmark{display:none}}
@media(prefers-reduced-motion:reduce){.hoper-character,.hoper-lockup{animation:none!important;transition:none!important}.hoper-character-open{display:none}}