:root{--bg:#01050a;--fg:#f7fbff;--cyan:#54f4ff;--blue:#356dff;--green:#63ffb0;--amber:#ffd56a;--red:#ff4d68;--muted:rgba(247,251,255,.62);--line:rgba(84,244,255,.46)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#000;color:var(--fg);overflow:hidden}body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;-webkit-user-select:none;user-select:none}#hud{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(55,151,255,.31),transparent 31%),radial-gradient(circle at 50% 92%,rgba(84,244,255,.16),transparent 34%),linear-gradient(180deg,#030914,#000);perspective:900px;color:var(--fg);isolation:isolate}#hud:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0 1px,transparent 1px 5px),linear-gradient(90deg,rgba(84,244,255,.04),transparent 24%,transparent 76%,rgba(84,244,255,.04));mix-blend-mode:screen;opacity:.32;pointer-events:none;z-index:8}#world{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;pointer-events:none;z-index:0}.starfield{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,rgba(255,255,255,.34) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(84,244,255,.25) 0 1px,transparent 1.5px);background-size:83px 61px,131px 97px;background-position:11px 7px,39px 53px;opacity:.28;animation:stars 14s linear infinite}.ring{position:absolute;left:50%;top:49%;aspect-ratio:1;border:1px solid rgba(84,244,255,.24);border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 34px #54f4ff2e,inset 0 0 28px #54f4ff17}.r1{width:min(74vw,420px);transform:translate(-50%,-50%) rotateX(68deg);animation:spin 12s linear infinite}.r2{width:min(56vw,320px);transform:translate(-50%,-50%) rotateX(72deg) rotateY(24deg);animation:spin2 9s linear infinite reverse}.r3{width:min(38vw,220px);border-style:dashed;transform:translate(-50%,-50%) rotateX(50deg) rotateY(-42deg);animation:spin3 7s linear infinite}.axis{position:absolute;left:50%;top:50%;width:min(80vw,460px);height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);transform-origin:center}.axis.x{transform:translate(-50%,-50%) rotate(22deg)}.axis.y{transform:translate(-50%,-50%) rotate(112deg)}.axis.z{transform:translate(-50%,-50%) rotate(0);opacity:.35}.cube{position:absolute;left:50%;top:49%;width:76px;height:76px;transform-style:preserve-3d;transform:translate(-50%,-50%) translateZ(-36px) rotateX(-22deg) rotateY(35deg);animation:cube 7s ease-in-out infinite}.cube i{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(84,244,255,.6);background:#54f4ff0b;box-shadow:inset 0 0 16px #54f4ff2e,0 0 10px #54f4ff1f}.cube i:nth-child(1){transform:translateZ(38px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(38px)}.cube i:nth-child(3){transform:rotateY(90deg) translateZ(38px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(38px)}.cube i:nth-child(5){transform:rotateX(90deg) translateZ(38px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(38px)}.orb{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 15px var(--cyan),0 0 30px var(--cyan);left:50%;top:50%}.orb.one{animation:orb1 4.5s linear infinite}.orb.two{animation:orb2 6.5s linear infinite reverse}.orb.three{animation:orb3 5.4s linear infinite}.side{position:absolute;top:20%;width:12vw;max-width:76px;height:48%;border:1px solid rgba(84,244,255,.24);background:linear-gradient(180deg,rgba(84,244,255,.11),transparent);clip-path:polygon(20% 0,100% 14%,76% 100%,0 86%);padding:12px 7px;color:#54f4ffb8;font-size:10px;letter-spacing:.18em;text-transform:uppercase}.side b{display:block;margin-bottom:10px}.side span{display:block;height:2px;margin:9px 0;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 8px var(--cyan)}.side.left{left:7%;transform:rotateY(42deg) rotate(3deg)}.side.right{right:7%;transform:scaleX(-1) rotateY(42deg) rotate(3deg)}#panel{position:relative;z-index:3;width:min(84vw,430px);height:min(58vh,314px);display:grid;grid-template-rows:auto 1fr auto auto auto;gap:min(1.1vh,6px);align-items:center;justify-items:center;padding:min(2.7vh,15px) min(3.4vw,16px);text-align:center;border:1px solid var(--line);background:linear-gradient(145deg,#54f4ff21,#ffffff06 38%,#356dff1c);box-shadow:0 0 38px #54f4ff3d,inset 0 0 34px #54f4ff1f;clip-path:polygon(8% 0,92% 0,100% 12%,100% 88%,92% 100%,8% 100%,0 88%,0 12%);transform-style:preserve-3d;transform:rotateX(7deg) translateZ(26px)}#panel:before,#panel:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px solid rgba(255,255,255,.11);clip-path:inherit;transform:translateZ(-18px);pointer-events:none}#panel:after{top:17px;right:17px;bottom:17px;left:17px;border-color:#54f4ff29;transform:translateZ(20px)}#panel>*{position:relative;z-index:2}#kicker{font-size:clamp(10px,2.7vw,15px);line-height:1;letter-spacing:.24em;color:var(--cyan);text-transform:uppercase;text-shadow:0 0 12px var(--cyan)}#screen{width:100%;font-size:clamp(24px,7.5vw,43px);line-height:.98;letter-spacing:.01em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere;text-shadow:0 0 18px rgba(255,255,255,.4)}#detail{width:100%;font-size:clamp(13px,3.6vw,20px);line-height:1.06;color:var(--fg);text-transform:uppercase;overflow-wrap:anywhere}#meta{width:100%;font-size:clamp(8px,2.2vw,12px);line-height:1.12;color:var(--muted);text-transform:uppercase;letter-spacing:.035em}#navchips{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}#navchips span{min-width:0;padding:4px 2px;border:1px solid rgba(84,244,255,.2);background:#54f4ff09;font-size:clamp(8px,2vw,11px);line-height:1;color:#f7fbff85;text-transform:uppercase;letter-spacing:.04em;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}#navchips span.active{color:#001014;background:var(--green);border-color:#fff;box-shadow:0 0 12px #63ffb08c}#telemetry{position:absolute;z-index:4;right:min(3vw,18px);top:min(3vh,18px);display:grid;gap:5px;width:min(22vw,112px);pointer-events:none}#telemetry div{border:1px solid rgba(84,244,255,.24);background:#000a126b;padding:5px 6px;clip-path:polygon(9% 0,100% 0,100% 78%,91% 100%,0 100%,0 22%)}#telemetry b{display:block;color:var(--cyan);font-size:clamp(9px,2vw,12px);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#telemetry span{display:block;color:#f7fbff73;font-size:clamp(7px,1.65vw,9px);letter-spacing:.16em;margin-top:3px}#reticle{position:absolute;z-index:1;left:50%;top:50%;width:min(31vw,178px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(84,244,255,.13);pointer-events:none}#reticle i{position:absolute;width:22%;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 8px var(--cyan)}#reticle i:nth-child(1){left:-2px;top:0}#reticle i:nth-child(2){right:-2px;top:0;transform:scaleX(-1)}#reticle i:nth-child(3){left:-2px;bottom:0}#reticle i:nth-child(4){right:-2px;bottom:0;transform:scaleX(-1)}#hud[data-mode=READY] #screen{color:var(--green);text-shadow:0 0 16px rgba(99,255,176,.72)}#hud[data-mode=THINK] #screen,#hud[data-mode=KEYBOARD] #screen{color:var(--amber);text-shadow:0 0 18px rgba(255,213,106,.62)}#hud[data-mode=ERROR] #screen{color:var(--red)}#hud[data-mode=SPEAK] #screen{color:var(--fg)}#cloud{position:fixed;right:12px;bottom:8px;font-size:18px;line-height:1;color:#fff;opacity:.2;z-index:9}.pulse{animation:pulse .14s ease-out 1}@keyframes pulse{0%{transform:scale(.97);opacity:.65}to{transform:scale(1);opacity:1}}@keyframes stars{to{background-position:94px 68px,170px 150px}}@keyframes spin{to{transform:translate(-50%,-50%) rotateX(68deg) rotate(360deg)}}@keyframes spin2{to{transform:translate(-50%,-50%) rotateX(72deg) rotateY(24deg) rotate(360deg)}}@keyframes spin3{to{transform:translate(-50%,-50%) rotateX(50deg) rotateY(-42deg) rotate(360deg)}}@keyframes cube{50%{transform:translate(-50%,-50%) translateZ(-5px) rotateX(-8deg) rotateY(220deg)}}@keyframes orb1{0%{transform:rotate(0) translate(150px) rotate(0)}to{transform:rotate(360deg) translate(150px) rotate(-360deg)}}@keyframes orb2{0%{transform:rotate(0) translate(108px) rotate(0)}to{transform:rotate(360deg) translate(108px) rotate(-360deg)}}@keyframes orb3{0%{transform:rotate(0) translate(70px) rotate(0)}to{transform:rotate(360deg) translate(70px) rotate(-360deg)}}#composer{position:fixed;left:50%;bottom:2.5vh;transform:translate(-50%) rotateX(5deg);width:min(86vw,410px);z-index:10;display:grid;grid-template-rows:auto auto auto auto;gap:5px;padding:7px;border:1px solid var(--line);background:#00080ef2;box-shadow:0 0 0 999px #00000042,0 0 24px #54f4ff40,inset 0 0 18px #54f4ff14;clip-path:polygon(5% 0,95% 0,100% 13%,100% 87%,95% 100%,5% 100%,0 87%,0 13%)}.kb-guide{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center;border:1px solid rgba(84,244,255,.22);padding:4px 7px;text-align:left;background:#54f4ff12;font-size:clamp(10px,2.45vw,13px);line-height:1.08;text-transform:uppercase}.kb-guide b{color:var(--cyan);white-space:nowrap}.kb-guide span{color:var(--muted)}.kb-message{min-height:clamp(30px,8vh,46px);max-height:clamp(30px,8vh,46px);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4px 7px;border:1px solid rgba(255,255,255,.22);background:#ffffff0a;font-size:clamp(14px,4.5vw,23px);line-height:1.03;color:var(--fg);text-transform:uppercase;text-align:center;overflow-wrap:anywhere}.kb-row-name{text-align:center;color:var(--cyan);font-size:clamp(8px,2.1vw,11px);letter-spacing:.18em}.kb-grid{display:grid;gap:3px}.kb-row{display:flex;gap:3px;justify-content:center}.kb-key{min-width:0;flex:1;height:clamp(25px,6.5vh,36px);padding:0 3px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(180deg,#ffffff17,#54f4ff0d);color:var(--fg);font:900 clamp(10px,3.1vw,16px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase}.kb-key.active{background:var(--cyan);color:#001014;border-color:#fff;box-shadow:0 0 18px #54f4ffd1;transform:translateY(-1px)}#media-host{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8;background:#000;display:none;place-items:center;padding:8px}#media-host.shown{display:grid}#media-host img,#media-host video,#media-host iframe{max-width:100%;max-height:86vh;width:auto;height:auto;border:1px solid var(--line);background:#000}#media-host iframe{width:100%;height:min(56vw,82vh);min-height:220px}.media-close{position:fixed;right:8px;top:8px;z-index:9;width:44px;height:44px;background:#000;color:#fff;border:2px solid #fff;border-radius:50%;font:900 28px/1 system-ui}.media-caption{position:fixed;left:8px;right:60px;bottom:8px;color:#fff;background:#000000b8;font:800 14px/1.12 system-ui;padding:6px;text-transform:uppercase}@media (max-width:720px){#telemetry,.side{display:none}#panel{width:88vw}.orb{display:none}}@media (max-height:430px){#panel{height:51vh;width:82vw;padding:8px;gap:4px}#screen{font-size:clamp(20px,6.6vw,34px)}#detail{font-size:clamp(11px,3.2vw,17px)}#meta{font-size:8px}.cube{width:48px;height:48px}.cube i:nth-child(1){transform:translateZ(24px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(24px)}.cube i:nth-child(3){transform:rotateY(90deg) translateZ(24px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(24px)}.cube i:nth-child(5){transform:rotateX(90deg) translateZ(24px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(24px)}#navchips span{font-size:8px;padding:3px 1px}#composer{bottom:1vh;width:86vw;padding:5px;gap:3px}.kb-guide{font-size:8px;padding:3px}.kb-message{min-height:28px;max-height:28px;font-size:13px}.kb-key{height:22px;font-size:9px}.kb-row{gap:2px}}@media (prefers-reduced-motion:reduce){.starfield,.r1,.r2,.r3,.cube,.orb,.pulse{animation:none}}