:root{color-scheme:dark;--gold:#ffdb43;--amber:#ff9d03;--cyan:#25edec}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#010205}
body{font-family:system-ui,sans-serif}
.stage{width:100vw;height:100dvh;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#15363b2b 0%,#031017 38%,#020407 71%,#000 100%);touch-action:manipulation;cursor:default}
#matrix{position:absolute;inset:0;width:100%;height:100%;opacity:.38;z-index:0;pointer-events:none}
.atmosphere{position:absolute;inset:-18%;background:repeating-linear-gradient(90deg,transparent 0 12vw,#0c828314 12.1vw 12.2vw,transparent 12.3vw 24vw),radial-gradient(ellipse 38% 55% at 51% 48%,#ffd3230c,transparent 70%),conic-gradient(from 20deg at 50% 50%,#00fafa00 0deg,#00d8ff11 48deg,#e5b01200 90deg,#00efff0c 175deg,#ffb7000d 266deg,#00fafa00 360deg);filter:blur(2px);animation:ambient 23s linear infinite;z-index:0;pointer-events:none}
.horizon{position:absolute;left:-45%;right:-45%;bottom:-34%;height:72%;transform:perspective(270px) rotateX(68deg);transform-origin:50% 0;background:linear-gradient(#10bbcb42 1px,transparent 1px),linear-gradient(90deg,#10bbcb45 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(transparent,#000 36%,#000 72%,transparent);animation:track 14s linear infinite;z-index:0;pointer-events:none}
.orbits{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.orbits i{grid-area:1/1;border-radius:50%;width:min(87vw,86dvh);aspect-ratio:1;border:1px solid #00e6ff19;box-shadow:0 0 65px #00f2ff14,inset 0 0 72px #00ffe508;animation:roll 70s linear infinite}
.orbits i:nth-child(2){width:min(95vw,96dvh);border:1px dashed #ffe04f2a;animation-duration:51s;animation-direction:reverse}
.orbits i:nth-child(3){width:min(72vw,74dvh);border:1px dotted #08ebed33;animation-duration:36s}
.avatar-wrap{position:absolute;z-index:3;inset:0;display:grid;place-items:center;pointer-events:none}
.aurora{position:absolute;width:min(83vw,87dvh);height:min(89vw,93dvh);border-radius:50%;background:radial-gradient(ellipse,#f8d93b26 2%,#c5951119 23%,#06f4ee12 44%,transparent 67%);filter:blur(34px);animation:aura 6s ease-in-out infinite alternate}
.avatar{position:relative;width:min(78vw,74dvh);max-width:720px;aspect-ratio:422/505;filter:drop-shadow(0 0 14px #d79014bb) drop-shadow(0 0 44px #d59d0950);animation:float 6.6s ease-in-out infinite;transition:filter .12s;}
.avatar.is-speaking{filter:drop-shadow(0 0 22px #ffca1b) drop-shadow(0 0 64px #dfb40070)}
.pose{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;opacity:0;transition:opacity .09s linear;user-select:none;-webkit-user-drag:none;mix-blend-mode:screen}
.pose.is-active{opacity:1}
.scanlines{position:absolute;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(0deg,#0001 0px,#0001 2px,transparent 3px,transparent 6px);opacity:.27;animation:scan 7s linear infinite}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.2vh) scale(1.013)}}
@keyframes ambient{to{transform:rotate(360deg)}}
@keyframes track{to{background-position:0 54px,0 54px}}
@keyframes roll{to{transform:rotate(360deg)}}
@keyframes aura{to{transform:scale(1.16);opacity:.73}}
@keyframes scan{to{transform:translateY(10px)}}
@media(max-aspect-ratio:7/10){.avatar{width:min(96vw,68dvh)}.orbits i{width:110vw!important}.horizon{bottom:-42%}}
@media(prefers-reduced-motion:reduce){.atmosphere,.horizon,.orbits i,.avatar,.aurora,.scanlines{animation:none!important}}