:root{--bg:#09131e;--panel:#0d1925;--surface:#101e2c;--line:#213341;--line2:#273947;--text:#e6edf1;--muted:#8fa1b0;--subtle:#637787;--gold:#eec483;--sea:#6be0c5;--red:#e87c6b}
*{box-sizing:border-box}html{min-width:310px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.32;cursor:not-allowed}
.app-shell{max-width:1920px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;padding:17px 3.1%;border-bottom:1px solid #1c303c;min-height:73px;background:#0a1621}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #586a70;letter-spacing:-.10em;font-size:15px;font-weight:800}.brand-mark span{color:var(--gold);padding-right:3px}.brand strong{display:block;font-size:14px;letter-spacing:.12em}.brand strong span{font-weight:400;color:#b6c1c9}.brand small{display:block;font-size:9px;font-weight:650;letter-spacing:.21em;color:#718799;margin-top:3px}.top-meta{display:flex;align-items:center;gap:12px;color:#9cabb6;font-size:10px;letter-spacing:.11em;font-weight:650}.dot{width:6px;height:6px;background:var(--sea);border-radius:50%;display:inline-block}.pulse{box-shadow:0 0 14px #6be0c59a}.meta-sep{height:20px;width:1px;background:#2c3d46;margin:0 6px}.tag-outline{border:1px solid #39505b;padding:8px 10px;color:#b7c6cc}
.title-band{display:flex;align-items:flex-end;justify-content:space-between;padding:32px 3.1% 30px;gap:20px}.eyebrow{font-size:10px;color:var(--gold);letter-spacing:.19em;font-weight:750}.dot-sep{padding:0 8px;color:#6d888c}.title-band h1{font-size:clamp(35px,4.3vw,61px);line-height:1;letter-spacing:-.055em;margin:13px 0 10px;font-weight:720}.title-band h1 em{font-weight:250;font-style:normal;color:#aec5cf}.title-band p{margin:0;font-size:11px;letter-spacing:.23em;color:#9aabb8;font-weight:700}.title-right{text-align:right;padding-bottom:3px}.small-label{display:block;font-size:9px;letter-spacing:.16em;color:#899ca9;font-weight:750}.title-right strong{display:block;color:#dae5eb;margin-top:8px;font-weight:630;letter-spacing:.15em;font-size:11px}.disclaimer{font-size:10px;color:#7e929d;margin-top:7px}
.workbench{display:grid;grid-template-columns:minmax(0,1fr) 375px;padding:0 3.1%;gap:18px;align-items:start}.visual-panel{min-width:0}.view-toolbar{height:51px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;border:1px solid #2a3d4c;border-bottom:0;background:#112131}.view-tag{font-size:10px;font-weight:700;letter-spacing:.14em;color:#cad7dc;white-space:nowrap}.tag-square{font-size:9px;font-weight:800;padding:6px 6px;color:#111c23;background:var(--gold);margin-right:9px}.view-subtitle{color:#647e8c}.view-options{display:flex;gap:3px}.view-btn{color:#8ba2b0;background:transparent;border:0;font-size:10px;padding:9px 11px;font-weight:630}.view-btn.active{color:#f1d8ab;background:#2b3540}.view-btn:hover{color:white;background:#2a3c49}
.viewport{height:clamp(430px,48vw,690px);max-height:70vh;min-height:420px;position:relative;overflow:hidden;border:1px solid #2a3d4c;background:radial-gradient(circle at 60% 34%,#223f50 0%,#12293b 48%,#071321 100%);touch-action:none;user-select:none}.viewport canvas#three-canvas{display:block;width:100%;height:100%;cursor:grab}.viewport canvas#three-canvas:active{cursor:grabbing}.viewport-noise{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#06111a38,transparent 17%,transparent 86%,#06111a5c),linear-gradient(0deg,#06131c64,transparent 30%)}
.view-top-left{position:absolute;left:22px;top:24px;pointer-events:none}.coordinate{font-size:11px;color:#d4e2e4;letter-spacing:.14em;font-weight:650}.micro-line{font-size:9px;letter-spacing:.13em;color:#97aab2;margin-top:8px}.hud-crosshair{width:28px;height:28px;position:absolute;left:51%;top:50%;opacity:.18;pointer-events:none}.hud-crosshair i:first-child{height:1px;width:28px;background:#d7e9ed;position:absolute;top:13px}.hud-crosshair i:last-child{width:1px;height:28px;background:#d7e9ed;position:absolute;left:13px}.view-bottom-left{position:absolute;left:22px;bottom:25px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.bottom-caption{font-size:10px;color:#ddc898;font-weight:760;letter-spacing:.14em}.bottom-muted{font-size:10px;color:#a3b0b9}.view-bottom-right{position:absolute;right:19px;bottom:22px}.viewport-action{color:#d4e0e3;background:#152733d6;border:1px solid #57717b;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.1em}.viewport-action:hover{background:#304758}.render-error{position:absolute;inset:15%;padding:30px;background:#331a20ed;border:1px solid #bc6262;color:white;font-weight:600;line-height:1.6;z-index:8}
.stage-footer{border:1px solid #283c4a;border-top:0;display:flex;justify-content:space-between;padding:13px 17px;background:#102030;color:#8ca2ae;font-size:9px;letter-spacing:.16em;font-weight:650}.footer-circle{border-radius:100%;display:inline-block;border:1.5px solid var(--sea);width:7px;height:7px;margin-right:7px}.dividing{padding:0 11px;color:#536879}
.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px}.insight-card{padding:22px 19px;min-height:207px;border:1px solid #243746;background:linear-gradient(145deg,#132330,#0d1a27);display:flex;flex-direction:column}.insight-label{font-size:9px;letter-spacing:.14em;color:var(--gold);font-weight:750}.insight-card strong{font-size:16px;letter-spacing:-.024em;line-height:1.32;margin:17px 0 9px;font-weight:660}.insight-card p{font-size:11px;line-height:1.7;color:#92a7b3;margin:0 0 20px}.text-link{margin-top:auto;align-self:flex-start;color:#dbd5be;display:flex;gap:13px;align-items:center;background:none;border:0;padding:0;font-size:9px;letter-spacing:.13em;font-weight:750}.text-link:hover{color:#fff}.text-link span{font-size:17px}
.control-panel{border:1px solid #2b4050;background:linear-gradient(180deg,#132432,#0b1926 68%);min-width:0}.panel-header{padding:24px 23px 20px;display:flex;align-items:flex-end;justify-content:space-between}.panel-header h2{font-size:24px;letter-spacing:-.04em;font-weight:600;margin:7px 0 0}.accent{color:var(--gold)}.mode-chip{padding:8px 11px;color:#b5c3cc;font-size:9px;letter-spacing:.13em;background:#263943;border:1px solid #364c59;font-weight:700}.mode-chip.auto{color:#6be0c5;border-color:#397467}.mode-chip.fault{color:#ffb2a0;border-color:#9b5e51}
.status-strip{margin:0 22px 0;padding:12px 11px;border:1px solid #2c554f;background:#132e32;color:#a9d3ca;display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.4;min-height:45px}.status-strip.warn{background:#392425;color:#ffd0c6;border-color:#794544}.status-icon{font-size:16px;color:var(--sea)}
.panel-section{padding:22px 22px 24px;border-bottom:1px solid #273947}.section-title{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.15em;color:#d9e1e4;font-weight:780;margin-bottom:18px}.section-index{color:#708894;font-size:9px;font-weight:650}.section-note{color:#859bab;line-height:1.6;margin:-7px 0 16px;font-size:11px}
.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #2b4050}.telemetry-cell{padding:15px 13px 12px;min-height:105px;background:#0c1a27}.telemetry-cell:nth-child(odd){border-right:1px solid #293e4b}.telemetry-cell:nth-child(-n+2){border-bottom:1px solid #293e4b}.telemetry-cell small{color:#8da4b0;font-size:9px;letter-spacing:.11em;font-weight:750}.number{display:flex;gap:5px;align-items:baseline;margin-top:9px}.number strong{font-size:29px;font-weight:550;font-variant-numeric:tabular-nums;letter-spacing:-.055em;color:#f1ede0}.number span{font-size:11px;color:#91a5af}.value-description{margin-top:6px;font-size:8px;font-weight:710;letter-spacing:.12em;color:#77929e}.track-heading{display:flex;justify-content:space-between;margin:23px 0 11px;color:#9cafb9;font-size:9px;letter-spacing:.13em;font-weight:700}.track-heading span:last-child{color:var(--gold)}.depth-ruler{height:8px;position:relative;background:#30404c;border:1px solid #52626b}.ruler-progress{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#1b907f,#70dfc0)}.ruler-cage{position:absolute;width:7px;height:17px;background:#f6d498;top:-6px;left:0;box-shadow:0 0 10px #f6d4985b;transform:translateX(-50%);border:2px solid #162631}.ruler-labels{display:flex;justify-content:space-between;margin-top:13px;color:#698291;font-size:9px;letter-spacing:.06em}
.station-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.station-btn{background:#152a3a;border:1px solid #35505f;color:#deeaf0;padding:13px 8px 9px;text-align:left;display:flex;flex-direction:column;min-height:94px}.station-btn small{font-size:8px;color:#829cab;letter-spacing:.12em;font-weight:750}.station-btn strong{font-size:14px;margin-top:12px;font-weight:620}.station-btn span{color:var(--gold);align-self:flex-end;font-size:15px;margin-top:auto}.station-btn:hover{border-color:var(--gold);background:#22394a}.station-btn.selected{border-color:#73a89c;background:#1b3d3e}
.control-caption{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:9px;letter-spacing:.11em;font-weight:730}.control-caption label{color:#a6b6c1}.control-caption output{color:#e3d4b3;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums}.slider-spaced{margin-top:25px}input[type=range]{width:100%;margin:7px 0;accent-color:#dab782;height:8px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#79909f;font-weight:680;letter-spacing:.08em;margin:8px 0 19px}.range-labels span:nth-child(2):not(:last-child){color:#536b78}.button-row{display:flex;gap:8px;margin-bottom:8px}.secondary-btn{flex:1;background:#1c303e;border:1px solid #37515e;color:#ccd9de;padding:12px 7px;font-size:9px;letter-spacing:.09em;font-weight:730}.secondary-btn:hover{background:#2d4a56}.secondary-btn.engaged{border-color:#67a79b;color:#93e7d4}.emergency-row{display:flex;gap:7px;margin-top:13px}.emergency-btn{flex:1;border:1px solid #b36353;background:#67302f;color:#ffe3d8;padding:14px 8px;font-size:10px;letter-spacing:.1em;font-weight:800}.emergency-btn:hover{background:#9c423d}.icon-btn{width:48px;background:#27323a;border:1px solid #66727b;font-size:21px;color:#e7d9c2}.icon-btn:hover{background:#475261}.balance-row{border:1px solid #293f4b;padding:12px 11px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;background:#0a1a26}.balance-row span{color:#859eaa;font-size:9px;letter-spacing:.1em;font-weight:700}.balance-row strong{color:#e9c58b;font-size:12px;font-variant-numeric:tabular-nums}
.chart-legend,.graph-footer{display:flex;justify-content:space-between;color:#899faa;font-size:9px;letter-spacing:.08em;font-weight:700}.chart-legend{margin-bottom:12px}.chart-legend i{height:2px;width:12px;display:inline-block;margin:0 5px 3px 0}.legend-speed{background:#70dfc0}.legend-depth{background:#eec483}.trace-chart{width:100%;height:103px;background:#0a1926;display:block;border:1px solid #2d414f}.graph-footer{margin-top:9px;color:#78909e}
.panel-bottom{padding:19px 22px 24px}.reset-btn{width:100%;background:transparent;border:1px solid #526979;color:#e1e8ed;padding:13px;font-size:10px;letter-spacing:.11em;font-weight:730}.reset-btn:hover{background:#223a49}.panel-fineprint{text-align:center;font-size:8px;line-height:1.8;letter-spacing:.12em;color:#63808c;margin-top:17px}.footer{margin:26px 3.1% 0;padding:19px 0 25px;border-top:1px solid #2a3b45;color:#7992a0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;font-weight:750;gap:15px}.footer-number{color:var(--gold);margin-right:12px}.footer-div{color:#566a77;margin:0 9px}
dialog{padding:0;background:#0f1e2b;border:1px solid #46616b;color:#e6edf1;max-width:min(560px,calc(100% - 26px));width:100%;box-shadow:0 30px 110px #0009}dialog::backdrop{background:#040b13c9;backdrop-filter:blur(5px)}.dialog-shell{padding:26px}.dialog-shell header{display:flex;justify-content:space-between;align-items:center}.dialog-close{color:#dfebed;border:1px solid #475d66;background:#172c3b;font-size:24px;width:35px;height:35px}.dialog-shell h2{font-size:27px;letter-spacing:-.04em;line-height:1.2;margin:25px 0 17px}.dialog-shell p,.dialog-shell li{color:#9db3bd;font-size:13px;line-height:1.76}.dialog-shell strong{color:#e6d5b2}.dialog-shell a{color:#b9e9de}.dialog-ok{margin-top:20px;width:100%;background:#263e47;border:1px solid #638f8b;color:#def5ed;padding:14px;font-weight:700;letter-spacing:.1em;font-size:11px}
@media(max-width:1200px){.workbench{grid-template-columns:minmax(0,1fr) 336px;gap:13px}.control-panel .panel-section{padding-left:16px;padding-right:16px}.panel-header{padding-left:16px;padding-right:16px}.status-strip{margin-left:16px;margin-right:16px}.panel-bottom{padding-left:16px;padding-right:16px}.insight-card{padding:18px 14px}}
@media(max-width:990px){.workbench{grid-template-columns:1fr}.viewport{height:min(68vw,620px);max-height:none;min-height:400px}.control-panel{display:grid;grid-template-columns:1fr 1fr;align-items:start}.panel-header,.status-strip,.panel-bottom{grid-column:1/-1}.panel-section{min-height:100%}.panel-section:nth-of-type(even){border-left:1px solid #273947}}
@media(max-width:640px){.topbar{padding:13px 16px}.brand-mark{width:34px;height:34px}.brand small{font-size:7px}.brand strong{font-size:12px}.top-meta .tag-outline,.top-meta .meta-sep{display:none}.title-band{padding:27px 17px 23px;align-items:start}.title-right{display:none}.title-band h1{font-size:43px}.title-band p{font-size:9px;letter-spacing:.16em}.eyebrow{font-size:8px;line-height:1.7}.dot-sep{padding:0 4px}.workbench{padding:0 10px}.view-toolbar{height:auto;min-height:53px;padding:9px 11px;gap:9px;flex-wrap:wrap}.view-options{flex-wrap:wrap}.view-btn{padding:8px 7px;font-size:9px}.view-tag{font-size:9px}.viewport{height:530px;max-height:calc(100dvh - 175px);min-height:350px}.view-top-left{left:13px;top:14px}.coordinate{font-size:9px}.micro-line{font-size:8px}.view-bottom-left{left:13px;bottom:15px;max-width:70%}.bottom-caption{font-size:8px}.bottom-muted{font-size:9px}.view-bottom-right{right:11px;bottom:13px}.viewport-action{padding:9px}.viewport-action span{display:none}.stage-footer{font-size:8px;padding:12px 9px;letter-spacing:.06em}.insight-grid{grid-template-columns:1fr}.insight-card{min-height:155px}.control-panel{grid-template-columns:1fr}.panel-section:nth-of-type(even){border-left:0}.footer{margin:20px 12px;flex-direction:column;line-height:1.6}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}