:root{--cyan:#00e5ff;--blue:#00a7ff;--deep:#030812;--panel:rgba(3,12,24,.72);--line:rgba(0,229,255,.25);--muted:rgba(217,246,255,.54)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--deep)}button{font:inherit}.cyber-shell{min-height:100svh;color:#fff;font-family:Tahoma,"Segoe UI",Arial,sans-serif;background:var(--deep)}
.boot-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#082238 0%,#030812 58%);transition:opacity .8s ease,visibility .8s}.boot-screen.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.boot-module{display:flex;flex-direction:column;align-items:center}.boot-ring{width:230px;height:230px;padding:2px;border-radius:50%;position:relative;background:conic-gradient(var(--cyan) 0 32%,rgba(0,229,255,.08) 32% 44%,var(--blue) 44% 72%,rgba(0,229,255,.08) 72%);filter:drop-shadow(0 0 18px rgba(0,229,255,.28));animation:spin 4s linear infinite}.boot-ring:before,.boot-ring:after{content:"";position:absolute;inset:-14px;border:1px dashed rgba(0,229,255,.22);border-radius:50%}.boot-ring:after{inset:17px;border-style:solid;border-color:rgba(0,229,255,.18)}.boot-ring-inner{width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#040c17;transform:rotate(0);animation:reverse-spin 4s linear infinite}.boot-arabic{font-size:2rem;font-weight:800;text-shadow:0 0 18px var(--cyan)}.boot-ring small{margin-top:8px;color:var(--cyan);font-size:.66rem;letter-spacing:.16em}.boot-actions{margin-top:38px;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.45s}.boot-actions.is-ready{opacity:1;transform:none;pointer-events:auto}.cyber-button{width:300px;height:52px;border:1px solid var(--cyan);background:rgba(0,229,255,.08);color:var(--cyan);letter-spacing:.08em;cursor:pointer;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%);transition:.25s}.cyber-button:hover,.cyber-button:focus-visible{background:rgba(0,229,255,.2);box-shadow:0 0 30px rgba(0,229,255,.3);text-shadow:0 0 8px var(--cyan)}.silent-link{border:0;background:transparent;color:rgba(255,255,255,.42);font-size:.75rem;cursor:pointer}.silent-link:hover{color:var(--cyan)}
.interface{position:fixed;inset:0;opacity:0;transition:opacity 1.3s ease;background:radial-gradient(circle at 50% 50%,#071d31 0%,#030812 62%);overflow:hidden}.interface.is-visible{opacity:1}.grid-layer{position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.045) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(circle,transparent 12%,#000 82%)}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 34%,rgba(2,5,13,.9) 100%)}.hud-frame{position:absolute;inset:15px;border:1px solid rgba(0,229,255,.17)}.hud-frame:before,.hud-frame:after{content:"";position:absolute;left:70px;right:70px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}.hud-frame:before{top:-1px}.hud-frame:after{bottom:-1px}.corner{position:fixed;width:32px;height:32px;z-index:12}.corner:before,.corner:after{content:"";position:absolute;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.corner:before{width:100%;height:2px}.corner:after{width:2px;height:100%}.c1{top:15px;left:15px}.c2{top:15px;right:15px}.c3{bottom:15px;left:15px}.c4{bottom:15px;right:15px}.c1:before,.c2:before{top:0}.c3:before,.c4:before{bottom:0}.c1:after,.c3:after{left:0}.c2:after,.c4:after{right:0}
.top-bar{position:fixed;top:25px;left:50%;transform:translateX(-50%);z-index:20}.hud-logo{min-width:260px;padding:9px 30px;text-align:center;border:1px solid rgba(0,229,255,.35);background:var(--panel);clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,15px 100%,0 50%)}.hud-logo span{display:block;font-size:1rem;font-weight:800;letter-spacing:.14em;text-shadow:0 0 16px var(--cyan)}.hud-logo small{display:block;margin-top:3px;color:rgba(0,229,255,.55);font:500 .52rem/1 "Courier New",monospace;letter-spacing:.22em}
.side-panel{position:fixed;top:50%;transform:translateY(-50%);z-index:20;width:180px;padding:18px;background:var(--panel);backdrop-filter:blur(12px);border:1px solid rgba(0,229,255,.22)}.telemetry{left:25px;border-left:2px solid var(--blue);box-shadow:-5px 0 28px rgba(0,167,255,.09)}.audio-panel{right:25px;border-right:2px solid var(--cyan);box-shadow:5px 0 28px rgba(0,229,255,.09)}.panel-title{display:flex;align-items:center;gap:8px;padding-bottom:9px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1);color:var(--cyan);font-size:.7rem;font-weight:700;letter-spacing:.12em}.panel-title i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 1.8s infinite}.stat{margin-bottom:18px}.stat>span{display:block;color:rgba(255,255,255,.4);font-size:.65rem;margin-bottom:6px}.stat strong{display:block;color:var(--cyan);font:700 1.45rem/1 "Courier New",monospace;text-shadow:0 0 14px rgba(0,229,255,.6)}.stat strong small{font-size:.7rem;margin-right:3px;opacity:.65}.meter{height:3px;margin-top:9px;background:rgba(255,255,255,.1)}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 8px var(--cyan)}.status-value{font-size:.86rem!important;letter-spacing:.16em}.track-label{margin:0;color:#fff;font-size:1rem;font-weight:700}.reciter{margin:5px 0 18px;color:var(--muted);font-size:.72rem}.sound-toggle{width:100%;padding:10px 8px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(0,229,255,.4);background:rgba(0,229,255,.06);color:var(--cyan);cursor:pointer}.sound-toggle:hover{background:rgba(0,229,255,.14)}.sound-toggle b{font-size:.67rem}.sound-bars{height:16px;display:flex;align-items:center;gap:2px}.sound-bars i{width:2px;height:4px;background:var(--cyan)}.sound-toggle.is-on .sound-bars i{animation:bars .7s ease-in-out infinite alternate}.sound-toggle.is-on .sound-bars i:nth-child(2){animation-delay:.15s}.sound-toggle.is-on .sound-bars i:nth-child(3){animation-delay:.3s}.native-audio{width:100%;height:28px;margin-top:12px;opacity:.72;filter:sepia(1) hue-rotate(130deg) saturate(2)}
.ocean-core{position:absolute;left:50%;top:47%;width:min(44vw,560px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;filter:drop-shadow(0 0 30px rgba(0,229,255,.16))}.sphere{width:46%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,rgba(206,251,255,.85) 0 2%,#0ba6c3 3%,#064a68 28%,#021322 68%);border:1px solid rgba(0,229,255,.8);box-shadow:inset -25px -20px 45px rgba(0,0,0,.65),inset 14px 9px 25px rgba(0,229,255,.2),0 0 55px rgba(0,229,255,.28);animation:float 5s ease-in-out infinite}.sphere:before{content:"";position:absolute;width:45%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(ellipse at 60% 45%,transparent 0 8px,rgba(0,229,255,.09) 9px 10px)}.sphere span{position:relative;z-index:2;color:#e8fdff;font-size:clamp(1rem,2.4vw,1.8rem);font-weight:800;letter-spacing:.28em;text-shadow:0 0 15px var(--cyan)}.orbit{position:absolute;border:1px solid rgba(0,229,255,.25);border-radius:50%;transform:rotateX(66deg) rotateZ(-14deg)}.orbit-one{inset:18%;animation:orbit 9s linear infinite}.orbit-two{inset:8%;border-style:dashed;animation:orbit 16s linear infinite reverse}.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:particle 4s ease-in-out infinite}.p1{top:17%;left:31%}.p2{top:31%;right:18%;animation-delay:-1s}.p3{bottom:22%;left:20%;animation-delay:-2s}.p4{bottom:16%;right:35%;animation-delay:-.5s}.p5{top:48%;left:8%;animation-delay:-2.7s}
.hero-copy{position:fixed;z-index:15;left:50%;top:74%;width:min(620px,60vw);transform:translate(-50%,-50%);text-align:center}.system-label{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 8px;color:var(--cyan);font-size:.6rem;letter-spacing:.14em}.system-label i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.hero-copy h1{margin:0;font-family:Tahoma,"Segoe UI",sans-serif;font-size:clamp(2.4rem,5vw,5rem);line-height:1.1;letter-spacing:.06em;text-shadow:0 0 28px rgba(0,229,255,.48)}.hero-copy blockquote{margin:12px 0 8px;color:#c8f8ff;font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:.08em}.hero-note{margin:0;color:rgba(255,255,255,.36);font-size:.65rem;letter-spacing:.1em}
.bottom-status{position:fixed;z-index:20;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.33);font:500 .58rem/1 "Courier New",monospace;letter-spacing:.12em;white-space:nowrap}.bottom-status b{color:rgba(0,229,255,.75)}.bottom-status i{width:1px;height:14px;background:rgba(255,255,255,.18)}.coordinates{position:fixed;z-index:20;bottom:20px;right:40px;margin:0;color:rgba(255,255,255,.35);font:500 .6rem/1 "Courier New",monospace;letter-spacing:.1em}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes reverse-spin{to{transform:rotate(-360deg)}}@keyframes pulse{50%{opacity:.35;box-shadow:0 0 3px var(--cyan)}}@keyframes bars{to{height:15px}}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}@keyframes orbit{to{transform:rotateX(66deg) rotateZ(346deg)}}@keyframes particle{50%{transform:translateY(-20px);opacity:.25}}
@media(max-width:850px){.telemetry{display:none}.audio-panel{top:auto;bottom:62px;left:50%;right:auto;transform:translateX(-50%);width:min(360px,calc(100% - 48px));padding:10px 14px;border-right:1px solid rgba(0,229,255,.3);display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.audio-panel .panel-title{grid-column:1/-1;margin-bottom:4px}.audio-panel .track-label,.audio-panel .reciter{margin:0}.audio-panel .sound-toggle{grid-column:2;grid-row:2/4}.native-audio{display:none}.ocean-core{width:min(86vw,500px);top:42%}.hero-copy{top:67%;width:90vw}.bottom-status{bottom:25px}.coordinates{display:none}}
@media(max-width:520px){.hud-logo{min-width:220px}.ocean-core{top:38%;width:98vw}.hero-copy{top:62%}.hero-copy h1{font-size:2.6rem}.hero-copy blockquote{font-size:.82rem}.hero-note{display:none}.audio-panel{bottom:58px}.bottom-status span:nth-of-type(2),.bottom-status i:nth-of-type(2){display:none}.boot-ring{width:190px;height:190px}.cyber-button{width:280px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}