:root{color-scheme:dark;--bg:#04090d;--panel:rgba(8,20,26,.91);--panel2:rgba(11,29,36,.94);--line:rgba(102,229,238,.17);--cyan:#61edf2;--blue:#55a8ff;--green:#63f3ac;--amber:#ffc568;--red:#ff6c83;--text:#eafcff;--muted:#78939b}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:radial-gradient(circle at 50% -8%,rgba(26,134,152,.22),transparent 34rem),linear-gradient(rgba(65,150,164,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(65,150,164,.04) 1px,transparent 1px),var(--bg);background-size:auto,28px 28px,28px 28px,auto}
button{font:inherit;-webkit-tap-highlight-color:transparent}.shell{width:min(1120px,100%);margin:auto;padding:max(18px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom))}.topbar,.section-heading,.primary-actions,.signal-values,footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.topbar{align-items:flex-start;margin-bottom:15px}.eyebrow,small{color:var(--cyan);font-size:9px;letter-spacing:.17em}.eyebrow{margin:0 0 7px}h1,h2,p{margin-top:0}h1{margin-bottom:0;font:750 clamp(22px,5vw,35px)/1.05 system-ui,sans-serif;letter-spacing:-.04em}h1 span{color:var(--muted);font-weight:500}h2{margin:4px 0 0;font:650 18px/1.2 system-ui,sans-serif}.system-state{display:flex;align-items:center;gap:8px;color:var(--green);font-size:11px}.system-state i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 13px currentColor}.system-state.active{color:var(--cyan)}.system-state.error{color:var(--red)}
.panel{border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,var(--panel2),var(--panel));box-shadow:inset 0 1px rgba(255,255,255,.025),0 20px 60px rgba(0,0,0,.18)}.instrument-panel,.spatial-panel,.telemetry-panel,.science-panel{padding:17px}.section-heading{align-items:flex-end;margin-bottom:15px}.section-heading.compact{margin-bottom:9px}.section-heading p,.section-heading>span{margin:0;color:var(--muted);font:11px/1.4 system-ui,sans-serif}.instrument-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.instrument-card{min-height:98px;padding:13px;border:1px solid var(--line);border-radius:12px;color:var(--muted);background:rgba(2,9,13,.55);text-align:left;transition:.18s ease}.instrument-card b,.instrument-card span,.instrument-card em{display:block}.instrument-card b{color:var(--text);font-size:13px;letter-spacing:.08em}.instrument-card span{margin-top:7px;font:700 20px/1 system-ui,sans-serif}.instrument-card em{margin-top:8px;font:normal 10px/1.3 system-ui,sans-serif}.instrument-card.active{border-color:var(--cyan);color:#bffbff;background:linear-gradient(145deg,rgba(31,157,171,.23),rgba(5,19,25,.92));box-shadow:0 0 22px rgba(97,237,242,.13)}.instrument-card.active b{color:var(--cyan)}
.main-grid{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(290px,.9fr);gap:12px;margin-top:12px}.detector-state{padding:5px 9px;border:1px solid currentColor;border-radius:999px;color:var(--muted);font-size:10px}.detector-state.impact{color:var(--amber)}.detector-state.classified{color:var(--green)}.direction-pad{position:relative;width:min(100%,410px);aspect-ratio:1.1;margin:2px auto 0}.direction-pad:before{content:"";position:absolute;inset:12%;border:1px dashed rgba(97,237,242,.19);border-radius:50%}.scan-ring{position:absolute;inset:20%;border:1px solid rgba(97,237,242,.11);border-radius:50%}.scan-ring.two{inset:32%}.direction-node{position:absolute;z-index:3;width:82px;min-height:62px;padding:7px;border:1px solid rgba(97,237,242,.3);border-radius:15px;color:var(--muted);background:#07151b;transition:.16s ease}.direction-node b,.direction-node span{display:block}.direction-node b{color:var(--cyan);font-size:12px}.direction-node span{margin-top:4px;font:10px/1.2 system-ui,sans-serif}.direction-node.up{left:calc(50% - 41px);top:0}.direction-node.down{left:calc(50% - 41px);bottom:0}.direction-node.left{left:0;top:calc(50% - 31px)}.direction-node.right{right:0;top:calc(50% - 31px)}.direction-node.center{left:calc(50% - 47px);top:calc(50% - 39px);width:94px;min-height:78px;border-radius:28px;background:radial-gradient(circle,rgba(97,237,242,.14),#071217 72%)}.direction-node.active{color:#041114;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 28px rgba(97,237,242,.48);transform:scale(1.08)}.direction-node.active b{color:#041114}.pad-help{margin:9px 0 0;color:var(--muted);font:11px/1.5 system-ui,sans-serif;text-align:center}
.mode-readout,.direction-readout{padding:15px;border:1px solid var(--line);border-radius:12px;background:rgba(2,9,13,.48)}.direction-readout{margin-top:9px}.mode-readout span,.direction-readout span,.telemetry-grid span{display:block;color:var(--muted);font-size:10px;letter-spacing:.08em}.mode-readout strong{display:block;margin-top:6px;color:var(--cyan);font-size:25px}.direction-readout strong{display:block;margin-top:5px;font-size:36px}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.telemetry-grid>div{min-height:76px;padding:11px;border:1px solid var(--line);border-radius:10px;background:rgba(2,9,13,.38)}.telemetry-grid strong{display:block;margin-top:7px;font-size:18px}.meter{display:block;overflow:hidden;height:4px;margin-top:8px;border-radius:8px;background:rgba(255,255,255,.06)}.meter b{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .16s}.meter.strength b{background:linear-gradient(90deg,var(--green),var(--amber))}.signal-values{margin-top:9px;padding:10px 2px;color:var(--muted);font-size:9px}.signal-values b{color:var(--text);font-weight:500}.primary-actions{margin-top:8px}.primary-button,.secondary-button{min-height:48px;padding:9px 13px;border-radius:11px}.primary-button{flex:1;border:1px solid var(--cyan);color:#031115;background:var(--cyan);font-weight:800}.secondary-button{border:1px solid rgba(97,237,242,.35);color:var(--cyan);background:transparent}button:disabled{opacity:.42}.guidance,.error{margin:10px 0 0;font:11px/1.5 system-ui,sans-serif}.guidance{color:var(--muted)}.error{color:var(--red)}
.science-panel{margin-top:12px}.science-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.science-grid div{padding:11px;border:1px solid var(--line);border-radius:10px;background:rgba(2,9,13,.35)}.science-grid b,.science-grid span{display:block}.science-grid b{color:var(--cyan);font-size:11px}.science-grid span{margin-top:5px;color:var(--muted);font:10px/1.4 system-ui,sans-serif}.science-panel>p{margin:10px 0 0;color:#587078;font:10px/1.5 system-ui,sans-serif}footer{padding:17px 2px 0;color:#496169;font-size:9px;letter-spacing:.08em}footer a{color:#6c9daa;text-decoration:none}
@media(max-width:760px){.instrument-grid{grid-template-columns:1fr 1fr}.main-grid{grid-template-columns:1fr}.spatial-panel,.telemetry-panel{padding:14px}.direction-pad{max-width:350px}.science-grid{grid-template-columns:1fr}.topbar{align-items:center}.system-state{font-size:9px}.section-heading>p{display:none}}
@media(max-width:380px){h1{font-size:21px}.direction-node{width:74px}.direction-node.up,.direction-node.down{left:calc(50% - 37px)}.direction-node.center{left:calc(50% - 45px);width:90px}.telemetry-grid{grid-template-columns:1fr 1fr}.primary-actions{align-items:stretch;flex-direction:column}.secondary-button{width:100%}}