:root{color-scheme:dark;--cyan:#a8e8ed;--amber:#e8ca99;--text:#e7eff2;--muted:#a2b4c0;--camera-x:0px;--camera-y:0px;--window-x:0px;--window-y:0px}
*{box-sizing:border-box}
html{background:#050a11;font-size:16px}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--text)}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #f3f9f8;outline-offset:5px}
.bridge{position:relative;isolation:isolate;width:100%;min-height:780px;height:100svh;overflow:hidden;background:#050a11}
.scene{position:absolute;inset:-12px;z-index:-2}
.scene-picture,.scene-image{display:block;width:100%;height:100%;position:absolute;inset:0}
.scene-image{object-fit:cover;object-position:50% 50%;filter:saturate(.92)}
.space-layer{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.92);pointer-events:none}
.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,#02060c50 0%,transparent 18%,transparent 44%,#02081120 63%,#02060d44 100%)}
.window-atmosphere{position:absolute;inset:0;clip-path:polygon(22% 0,93% 0,89% 45%,25% 45%);transform:translate(var(--window-x),var(--window-y));will-change:transform;pointer-events:none}
#starlight{display:block;width:100%;height:100%;opacity:.65}
.window-light{position:absolute;inset:0;background:radial-gradient(ellipse at 87% 24%,#ffe3b80f,transparent 38%);animation:window-breath 22s ease-in-out infinite alternate;mix-blend-mode:screen}
.instrument-glow{position:absolute;left:21%;top:60%;width:60%;height:24%;background:radial-gradient(ellipse,#62cce612,transparent 65%);mix-blend-mode:screen;animation:instrument-breath 9s ease-in-out infinite alternate;pointer-events:none}
.station-header{position:absolute;left:4%;right:4%;top:max(22px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;gap:20px}
.station-name{font-family:monospace;font-size:.75rem;letter-spacing:.18em;color:#d7e3e6b5;text-shadow:0 1px 8px #000}
.station-divider{color:#dfb576;margin:0 12px}
.motion-control{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 13px;border:1px solid #b7c9d334;border-radius:3px;background:#06111b88;color:#d5e3e8;font-size:.75rem;cursor:pointer;backdrop-filter:blur(8px)}
.motion-control:hover{background:#123342cc;border-color:#8cbfc18a}
.motion-symbol{font-size:1rem;min-width:12px}
.identity{position:absolute;top:17%;left:12%;right:12%;text-align:center;text-shadow:0 2px 25px #000a}
.orbital-mark{position:relative;width:128px;height:50px;margin:0 auto 3px;border:1px solid #e3e9e84a;border-radius:64px 64px 0 0;border-bottom:none;opacity:.85}
.orbital-mark:before{content:"";position:absolute;left:50%;top:-27px;height:61px;width:1px;background:linear-gradient(transparent,#fff5df,#fff5df,transparent);box-shadow:0 0 13px #ffecd57a}
.orbital-mark span{position:absolute;width:5px;height:5px;border-radius:50%;left:calc(50% - 2px);top:-2px;background:#fff3d8;box-shadow:0 0 14px #fce1b3}
.designation{font-family:monospace;font-size:.75rem;letter-spacing:.34em;color:#a4bec8;margin:12px 0 17px}
h1{font-weight:300;font-size:clamp(3.5rem,7.2vw,7rem);line-height:1.1;letter-spacing:.23em;text-indent:.23em;margin:0;color:#edf2f1;text-shadow:0 0 28px #c6e9e929,0 3px 16px #0008}
.mission{font-size:1rem;letter-spacing:.26em;color:#d6dddf;margin:18px 0 0;font-weight:300}
.terminal{position:absolute;top:59%;left:24%;width:52%;min-height:170px;padding:12px 22px 10px;background:linear-gradient(100deg,#061420ed,#091a27e8,#051019ee);border:1px solid #80cfe44d;box-shadow:inset 0 0 35px #46b2df0b,0 0 24px #081c2ab3;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%);text-align:center}
.terminal-topline{display:flex;justify-content:center;gap:10px;font:.65rem/1.4 monospace;letter-spacing:.17em;color:#9cb9c8;padding-bottom:7px;border-bottom:1px solid #6aabc822}
.terminal-content p{margin:0}
.boot-line{font:.7rem/1.5 monospace;color:#a1d1de;padding:7px 0;min-height:28px}
.terminal-welcome{font-size:clamp(.75rem,1vw,.95rem);letter-spacing:.045em;color:#c1eff4;line-height:1.5}
.terminal-message{font-size:clamp(.65rem,.82vw,.8rem);line-height:1.55;letter-spacing:.025em;color:#b6c8cf;margin-top:6px!important}
.terminal-cursor{display:inline-block;width:5px;height:12px;margin-left:7px;vertical-align:middle;background:#b1e9ec;animation:cursor-blink 1.4s steps(1) infinite}
.signal-wave{height:11px;display:flex;align-items:center;justify-content:center;gap:4px;margin-top:7px;opacity:.38}
.signal-wave span{width:2px;height:3px;background:var(--cyan);animation:signal-breathe 3.6s ease-in-out infinite alternate}
.signal-wave span:nth-child(3n){height:7px;animation-delay:-1s}.signal-wave span:nth-child(4n){height:10px;animation-delay:-2s}.signal-wave span:nth-child(5n){animation-delay:-.6s}
.channels{position:absolute;left:25%;width:50%;top:max(81%,calc(59% + 184px));display:grid;grid-template-columns:1fr 1fr;gap:18px}
.channel{min-height:69px;display:flex;justify-content:center;align-items:center;gap:15px;padding:13px 14px;text-decoration:none;border:1px solid #9ddfea80;background:linear-gradient(170deg,#0b2b3ee6,#06121ee6);box-shadow:inset 0 0 19px #79cdf60c,0 0 15px #84ccee12;border-radius:6px;transition:background .25s,box-shadow .25s,transform .25s;position:relative}
.channel:before,.channel:after{content:"";position:absolute;height:13px;width:13px;pointer-events:none;border-color:currentColor;border-style:solid;opacity:.8}
.channel:before{top:-1px;left:-1px;border-width:1px 0 0 1px;border-top-left-radius:5px}.channel:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-bottom-right-radius:5px}
.channel-primary{color:var(--cyan)}
.channel-archive{color:var(--amber);border-color:#caa7768a;background:linear-gradient(170deg,#2b2219e6,#110f0ee8);box-shadow:inset 0 0 19px #cfb07608,0 0 15px #dfb4740f}
.channel:hover{transform:translateY(-2px);background:#0f354bdd;box-shadow:0 0 25px #77c6dd36,inset 0 0 22px #77c6dd16}
.channel-archive:hover{background:#33271be8;box-shadow:0 0 25px #c5a06b32}
.channel-icon{width:26px;height:26px;flex:none;filter:drop-shadow(0 0 5px #70c2df3b)}
.channel-title{display:block;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;line-height:1.4}
.channel-caption{display:block;color:#a4bdc7;font-size:.7rem;letter-spacing:.02em;margin-top:4px;line-height:1.3}
.channel-archive .channel-caption{color:#b6a795}
.station-footer{position:absolute;left:4%;right:4%;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:15px;font:.65rem/1.5 monospace;letter-spacing:.17em;color:#8a9da9;text-shadow:0 1px 8px #000}
.motion-paused .scene{transform:none;will-change:auto}
.motion-paused .window-atmosphere{transform:none;will-change:auto}
.motion-paused .bridge *, .motion-paused .bridge *:before{animation-play-state:paused!important}
.page-hidden .bridge *, .page-hidden .bridge *:before{animation-play-state:paused!important}
@keyframes window-breath{from{opacity:.2}to{opacity:1}}
@keyframes instrument-breath{from{opacity:.4}to{opacity:1}}
@keyframes cursor-blink{50%{opacity:0}}
@keyframes signal-breathe{to{transform:scaleY(.45);opacity:.45}}
@media(max-width:1100px) and (orientation:landscape){.terminal{left:19%;width:62%}.channels{left:20%;width:60%}.designation{letter-spacing:.2em}.channel-title{font-size:.75rem}.channel-caption{font-size:.65rem}.mission{letter-spacing:.15em}}
@media(max-width:760px),(orientation:portrait){
 .bridge{height:auto;min-height:max(1030px,100svh)}
 .scene{inset:-5px}
 .scene-image{object-position:center center}
 .station-header{left:20px;right:20px;top:max(15px,env(safe-area-inset-top));gap:8px}
 .station-name{font-size:.65rem;letter-spacing:.07em;line-height:1.7;max-width:65%}
 .motion-control{padding:7px 10px;font-size:.7rem}
 .identity{top:15%;left:18px;right:18px}
 .orbital-mark{width:98px;height:36px;margin-bottom:12px}
 .designation{font-size:.63rem;letter-spacing:.14em;line-height:1.8;margin:0 0 14px}
 h1{font-size:clamp(2.7rem,12vw,5rem);letter-spacing:.15em;text-indent:.15em}
 .mission{font-size:.8rem;letter-spacing:.075em;line-height:1.8;margin-top:15px}
 .scene-shade{background:linear-gradient(#02071042,transparent 16%,#0207100a 45%,#030c1478 65%,#030a11db 100%)}
 .window-atmosphere{clip-path:polygon(8% 0,95% 0,90% 53%,10% 53%)}
 .instrument-glow{left:5%;top:57%;width:90%;height:25%}
 .terminal{top:55%;left:6%;width:88%;min-height:234px;padding:14px 16px 12px;border-color:#75bdd057;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
 .terminal-topline{font-size:.6rem;letter-spacing:.055em;gap:8px}.boot-line{font-size:.66rem;min-height:27px}
 .terminal-welcome{font-size:.76rem;letter-spacing:.025em;line-height:1.65}.terminal-message{font-size:.69rem;letter-spacing:.015em;line-height:1.65}
 .channels{left:8%;width:84%;top:max(80%,calc(55% + 252px));grid-template-columns:1fr;gap:12px}
 .channel{min-height:65px;padding:13px 17px;justify-content:flex-start;gap:17px;background:#081c2cef}
 .channel-archive{background:#211b15f0}.channel-title{font-size:.8rem}.channel-caption{font-size:.7rem}
 .station-footer{left:20px;right:20px;bottom:max(15px,env(safe-area-inset-bottom));font-size:.58rem;letter-spacing:.09em;justify-content:center;text-align:center}
 .footer-coordinate{display:none}
}
@media(max-width:360px){.bridge{min-height:max(1090px,100svh)}.station-name{font-size:.6rem}.terminal-topline{font-size:.55rem}.terminal{left:5%;width:90%;min-height:262px}.channels{top:max(81%,calc(55% + 278px))}.channel-title{font-size:.73rem}.mission{font-size:.73rem}}
@media(prefers-reduced-motion:reduce){.bridge *,.bridge *:before{animation:none!important;transition:none!important}.scene,.window-atmosphere{transform:none!important;will-change:auto}}
@media(min-width:761px) and (orientation:landscape) and (max-height:650px){.bridge{min-height:700px}}