:root{--navy:#071d58;--cyan:#27e2ef;--violet:#8b3fd6;--coral:#ff6268;--lime:#a8d900;--mx:0;--my:0}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#01030e}
body{font-family:Arial,Helvetica,sans-serif}
.observatory{position:relative;width:100vw;height:100svh;min-height:430px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 48%,#0a2b72 0,#061946 25%,#02081f 58%,#01020b 100%);color:#dffcff;touch-action:none}
.observatory:after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 43%,rgba(0,0,12,.42) 82%,rgba(0,0,8,.78) 100%);box-shadow:inset 0 0 100px #000718}
.stars{position:absolute;inset:-5%;pointer-events:none;transition:transform .35s ease-out}.stars-far{opacity:.48;background-image:radial-gradient(circle,#39eaff 0 1px,transparent 1.5px),radial-gradient(circle,#7256ff 0 1px,transparent 1.5px);background-position:0 0,42px 25px;background-size:92px 86px,137px 111px;transform:translate(calc(var(--mx)*-3px),calc(var(--my)*-3px))}.stars-near{opacity:.76;background-image:radial-gradient(circle,#58f4ff 0 1.2px,transparent 1.8px);background-size:181px 137px;background-position:37px 12px;filter:drop-shadow(0 0 4px var(--cyan));transform:translate(calc(var(--mx)*-8px),calc(var(--my)*-8px))}
.constellations{position:absolute;inset:0;opacity:.55}.constellations:before,.constellations:after{content:"";position:absolute;width:18vw;height:10vw;border:1px solid transparent;border-top-color:#1787cc;clip-path:polygon(0 65%,30% 10%,55% 70%,80% 25%,100% 52%,100% 56%,80% 29%,55% 74%,30% 14%,0 69%)}.constellations:before{left:2%;top:7%;transform:rotate(-5deg)}.constellations:after{right:3%;top:8%;transform:scaleX(-1) rotate(8deg)}.constellations i{position:absolute;width:5px;aspect-ratio:1;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px 3px var(--cyan)}.constellations i:nth-child(1){left:5%;top:14%}.constellations i:nth-child(2){left:18%;top:9%}.constellations i:nth-child(3){left:23%;top:18%}.constellations i:nth-child(4){right:7%;top:12%}.constellations i:nth-child(5){right:17%;top:9%}.constellations i:nth-child(6){right:23%;top:19%}
.brand{position:absolute;z-index:20;top:2.2%;left:50%;width:min(43vw,610px);transform:translateX(-50%);filter:drop-shadow(0 0 20px rgba(39,226,239,.22))}.brand img{display:block;width:100%;height:auto}
.panel{position:absolute;z-index:7;transition:transform .4s ease-out}.panel-left-top{left:3.2%;top:22%;width:min(22vw,330px);transform:perspective(600px) rotateY(8deg) translate(calc(var(--mx)*-5px),calc(var(--my)*-3px))}.panel-left-bottom{left:5.5%;top:53%;width:min(15vw,220px);transform:perspective(600px) rotateY(8deg)}.panel-right-top{right:3.5%;top:21%;width:min(20vw,300px);transform:perspective(600px) rotateY(-8deg) translate(calc(var(--mx)*5px),calc(var(--my)*-3px))}.panel-right-middle{right:7%;top:52%;width:min(13vw,190px)}.panel-right-bottom{right:4%;top:68%;width:min(16vw,240px)}
.glass-panel{position:relative;width:100%;aspect-ratio:1.75;padding:8%;overflow:hidden;border:1px solid rgba(90,160,255,.76);border-radius:16px;background:linear-gradient(145deg,rgba(9,50,107,.58),rgba(2,14,49,.76));box-shadow:inset 0 0 22px rgba(18,155,255,.13),0 0 22px rgba(21,112,255,.19),0 12px 30px rgba(0,0,0,.32);backdrop-filter:blur(7px)}.glass-panel:after{content:"";position:absolute;inset:5%;border:1px solid rgba(65,204,255,.12);border-radius:10px;pointer-events:none}.glass-panel svg{width:100%;height:100%;overflow:visible}.wave{fill:none;stroke-width:3;filter:drop-shadow(0 0 4px currentColor)}.wave.violet{stroke:var(--violet)}.wave.cyan{stroke:var(--cyan)}.wave.coral{stroke:var(--coral)}.panel-dot{position:absolute;width:7px;aspect-ratio:1;border-radius:50%;background:var(--lime);box-shadow:0 0 8px currentColor}.dot-a{left:20%;top:71%;color:var(--lime)}.dot-b{left:66%;top:41%;color:var(--coral);background:var(--coral)}.dot-c{left:82%;top:64%;color:var(--cyan);background:var(--cyan)}.network-lines{fill:none;stroke:#24bfe8;stroke-width:1.3;opacity:.72}.network-dots{fill:var(--cyan);filter:drop-shadow(0 0 4px var(--cyan))}.network-dots circle:nth-child(3n){fill:var(--violet)}.network-dots circle:nth-child(4n){fill:var(--lime)}.target{position:absolute;right:14%;top:26%;width:28%;aspect-ratio:1;border:2px solid var(--coral);border-radius:50%;box-shadow:0 0 12px rgba(255,98,104,.55)}.target:before,.target:after{content:"";position:absolute;inset:16%;border:1px solid var(--violet);border-radius:50%}.target:after{inset:34%;background:var(--coral);border:0;box-shadow:0 0 10px var(--coral)}.radar-panel{aspect-ratio:.96}.mini-radar{position:absolute;left:12%;top:9%;width:67%;aspect-ratio:1;border:2px solid var(--violet);border-radius:50%;background:conic-gradient(from 20deg,rgba(39,226,239,.4),transparent 24%,transparent)}.mini-radar i{position:absolute;inset:20%;border:1px solid var(--violet);border-radius:50%}.mini-radar i:nth-child(2){inset:40%}.mini-radar i:nth-child(3){inset:49%;background:var(--lime);border:0;box-shadow:0 0 8px var(--lime)}.mini-radar b{position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(39,226,239,.5);animation:spin 5s linear infinite}.meters{position:absolute;left:10%;right:10%;bottom:10%;display:flex;align-items:end;height:24%;gap:8%}.meters span{flex:1;height:40%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.meters span:nth-child(2){height:76%;background:var(--violet)}.meters span:nth-child(3){height:55%;background:var(--coral)}.meters span:nth-child(4){height:95%}.meters span:nth-child(5){height:67%;background:var(--lime)}
.globe-stage{position:absolute;z-index:9;left:50%;top:51%;width:min(50vw,630px);aspect-ratio:1;transform:translate(-50%,-50%) translate(calc(var(--mx)*3px),calc(var(--my)*2px))}.globe{position:absolute;inset:10%;overflow:hidden;border:2px solid var(--cyan);border-radius:50%;background:radial-gradient(circle at 50% 52%,rgba(29,221,255,.21),rgba(4,39,98,.18) 50%,rgba(1,12,44,.55) 72%);box-shadow:inset 0 0 45px rgba(39,226,239,.36),0 0 10px var(--cyan),0 0 35px rgba(39,226,239,.62),0 0 75px rgba(30,92,255,.35)}.longitude,.latitude{position:absolute;border:1px solid rgba(39,226,239,.42);border-radius:50%}.longitude{top:0;bottom:0;left:50%;width:45%;transform:translateX(-50%)}.long-two{width:75%}.long-three{width:10%}.latitude{left:0;right:0;top:50%;height:45%;transform:translateY(-50%)}.lat-two{height:75%}.lat-three{height:10%}.globe-grid{position:absolute;inset:0;opacity:.32;background-image:linear-gradient(rgba(39,226,239,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(39,226,239,.25) 1px,transparent 1px);background-size:8% 8%;mask-image:radial-gradient(circle,#000 58%,transparent 73%)}.continent{position:absolute;background-image:radial-gradient(circle,var(--cyan) 0 1.2px,transparent 1.8px);background-size:6px 6px;opacity:.72;filter:drop-shadow(0 0 3px var(--cyan))}.continent-a{left:17%;top:19%;width:29%;height:24%;clip-path:polygon(12% 0,72% 5%,100% 25%,79% 45%,88% 77%,45% 100%,30% 70%,0 50%)}.continent-b{right:12%;top:29%;width:31%;height:36%;clip-path:polygon(10% 0,78% 3%,100% 31%,67% 52%,81% 100%,40% 85%,20% 42%,0 25%)}.continent-c{left:32%;bottom:12%;width:25%;height:20%;clip-path:polygon(0 24%,53% 0,100% 23%,79% 91%,25% 100%)}.sweep{position:absolute;inset:-1%;border-radius:50%;background:conic-gradient(from 268deg,transparent 0 68%,rgba(39,226,239,.62) 81%,transparent 83%);animation:spin 7s linear infinite;mix-blend-mode:screen}.globe-core{position:absolute;left:50%;top:50%;width:3%;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 9px #fff,0 0 28px var(--cyan)}
.orbit{position:absolute;left:50%;top:50%;border:2px solid;border-color:var(--violet) transparent var(--violet) var(--violet);border-radius:50%;transform:translate(-50%,-50%) rotate(-13deg)}.orbit-one{width:101%;height:50%;animation:orbit1 18s linear infinite}.orbit-two{width:92%;height:67%;border-color:var(--cyan) var(--cyan) transparent var(--cyan);transform:translate(-50%,-50%) rotate(35deg);animation:orbit2 24s linear infinite}.orbit-three{width:76%;height:107%;border-color:var(--violet) transparent var(--violet) var(--violet);transform:translate(-50%,-50%) rotate(68deg);animation:orbit3 29s linear infinite}.sat{position:absolute;width:18px;aspect-ratio:1;border:3px solid rgba(255,255,255,.55);border-radius:50%;box-shadow:0 0 0 7px rgba(255,98,104,.15),0 0 13px currentColor}.sat.coral{right:5%;top:3%;background:var(--coral);color:var(--coral)}.sat.lime{left:12%;bottom:2%;background:var(--lime);color:var(--lime)}.sat.violet{right:16%;bottom:2%;background:var(--violet);color:var(--violet)}.signal-node{position:absolute;width:24px;aspect-ratio:1;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 14px currentColor;animation:pulse 2.4s ease-in-out infinite}.signal-node i{position:absolute;inset:25%;border-radius:50%;background:currentColor}.signal-node.coral{color:var(--coral)}.signal-node.lime{color:var(--lime)}.signal-node.cyan{color:var(--cyan)}.signal-node.violet{color:var(--violet)}.n1{left:1%;top:36%}.n2{right:1%;top:25%;animation-delay:-.4s}.n3{right:7%;bottom:15%;animation-delay:-.8s}.n4{left:10%;bottom:14%;animation-delay:-1.2s}.n5{right:17%;top:5%;animation-delay:-1.6s}.n6{left:27%;top:2%;animation-delay:-2s}.n7{left:46%;bottom:-2%;animation-delay:-.6s}.n8{right:30%;bottom:2%;animation-delay:-1s}.projector{position:absolute;left:27%;right:27%;bottom:-5%;height:8%;border:2px solid #3479d9;border-radius:50%;background:#07194b;box-shadow:0 0 9px var(--cyan),0 8px 0 #020a28,0 11px 20px #000}.projector:before,.projector:after{content:"";position:absolute;inset:-45% 8%;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan)}.projector:after{inset:-78% 21%;border-color:var(--violet)}
.horizon{position:absolute;z-index:2;left:0;right:0;bottom:17%;height:16%;display:flex;align-items:end;justify-content:space-around;padding:0 2%;border-bottom:1px solid #1663ad;opacity:.7}.horizon i{width:2.7%;height:var(--h);background:linear-gradient(90deg,#020719,#092455 65%,#04102d);clip-path:polygon(0 20%,32% 20%,40% 0,50% 20%,100% 20%,100% 100%,0 100%);border-top:1px solid #15c6f3}.horizon i:after{content:"";display:block;width:2px;height:2px;margin:60% auto 0;background:var(--coral);box-shadow:0 0 8px var(--coral);animation:pulse 2s var(--d) infinite}
.operator{position:absolute;z-index:15;left:14%;bottom:7.4%;width:min(19vw,270px);aspect-ratio:.8;filter:drop-shadow(0 13px 12px rgba(0,0,0,.55));transform:translate(calc(var(--mx)*-9px),calc(var(--my)*-4px));transition:transform .35s ease-out}.operator-crop{position:absolute;inset:0;overflow:hidden}.operator-crop img{position:absolute;width:370%;max-width:none;left:-12%;top:-2%}.joystick{position:absolute;right:-5%;bottom:10%;width:30%;height:35%;border-radius:50% 50% 16px 16px;background:#05113a;border:2px solid #114c92;box-shadow:inset 0 0 13px #03102e,0 7px 12px #000}.joystick i{position:absolute;left:50%;bottom:43%;width:6px;height:72%;background:#5ddff0;transform:translateX(-50%) rotate(8deg);transform-origin:bottom}.joystick b{position:absolute;left:50%;top:-38%;width:27px;aspect-ratio:1;background:var(--coral);border:3px solid #ff9a9f;border-radius:50%;transform:translateX(-38%);box-shadow:0 0 12px var(--coral)}
.console{position:absolute;z-index:13;left:-3%;right:-3%;bottom:-7%;height:24%;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:1%;padding:2.4% 6% 2%;background:linear-gradient(180deg,#0b2760,#02071d 34%,#01020c);border-top:3px solid #125cb4;box-shadow:0 -7px 24px rgba(21,96,255,.32);transform:perspective(600px) rotateX(12deg);transform-origin:bottom}.console-left,.console-right{border:1px solid #123f89;border-radius:20px;background:#020a25;padding:7%;display:flex;gap:7%;align-items:center}.console-left i,.console-right i{width:9%;aspect-ratio:1;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.console-left i:nth-child(2),.console-right i:nth-child(3){background:var(--coral);box-shadow:0 0 8px var(--coral)}.console-left b,.console-right b{height:9px;flex:1;border-radius:4px;background:var(--violet);box-shadow:0 0 7px var(--violet)}.console-center{position:relative;border:1px solid #1a54a7;border-radius:22px;background:#06143c}.console-radar{position:absolute;left:5%;top:8%;width:31%;aspect-ratio:1;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 12px rgba(39,226,239,.65)}.console-radar:after{content:"";position:absolute;inset:20%;border:1px solid var(--violet);border-radius:50%}.console-radar i{position:absolute;left:50%;top:50%;width:1px;height:50%;background:var(--cyan);transform-origin:top;animation:spin 4s linear infinite}.keys{position:absolute;left:42%;right:5%;top:25%;display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.keys i{height:7px;border-radius:5px;background:var(--cyan);box-shadow:0 0 5px var(--cyan)}.keys i:nth-child(3n){background:var(--coral);box-shadow:0 0 5px var(--coral)}.keys i:nth-child(4n){background:var(--lime);box-shadow:0 0 5px var(--lime)}
footer{position:absolute;z-index:31;right:12px;bottom:8px;color:rgba(173,229,255,.48);font:600 9px/1 Arial;letter-spacing:.14em;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.45;filter:brightness(1.7);transform:scale(1.14)}}@keyframes orbit1{to{transform:translate(-50%,-50%) rotate(347deg)}}@keyframes orbit2{to{transform:translate(-50%,-50%) rotate(-325deg)}}@keyframes orbit3{to{transform:translate(-50%,-50%) rotate(428deg)}}
@media(max-width:900px){.brand{width:min(65vw,520px);top:3%}.globe-stage{width:min(69vw,580px);top:48%}.panel-left-bottom,.panel-right-middle,.panel-right-bottom{display:none}.panel-left-top{width:25vw;top:27%;left:1%}.panel-right-top{width:25vw;top:27%;right:1%}.operator{left:6%;width:min(23vw,190px)}.console{height:21%}}
@media(max-width:600px){.observatory{min-height:520px}.brand{width:91vw;top:2%}.globe-stage{width:min(103vw,64vh);top:48%}.panel{opacity:.72}.panel-left-top{left:-13%;top:26%;width:37vw}.panel-right-top{right:-13%;top:26%;width:37vw}.operator{left:1%;bottom:9%;width:min(32vw,180px)}.console{left:-14%;right:-14%;height:19%;grid-template-columns:.8fr 1.4fr .8fr}.console-left,.console-right{opacity:.65}.signal-node{width:18px}.horizon{bottom:14%}footer{font-size:7px}}
@media(max-height:620px) and (min-width:601px){.brand{width:min(38vw,460px);top:0}.globe-stage{width:min(55vh,520px);top:46%}.operator{width:min(18vw,165px)}.panel-left-bottom,.panel-right-bottom{display:none}.console{height:22%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.stars,.panel,.operator,.globe-stage{transition:none}}