:root{color-scheme:dark;--bg:#07131c;--panel:#101f29;--card:#12232f;--border:#25404c;--line:#1d3541;--text:#ecf2f3;--muted:#77919e;--aqua:#80e2ee;--gold:#ebc286;--sand:#aa8764;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.shell{max-width:1920px;margin:0 auto;min-height:100vh;background:radial-gradient(ellipse at 60% -5%,#153644 0%,transparent 46%),var(--bg)}
.topbar{height:76px;border-bottom:1px solid #213540;display:flex;align-items:center;justify-content:space-between;padding:0 39px;gap:20px}
.logo{display:flex;gap:14px;align-items:center}.logo-mark{width:43px;height:43px;border:1px solid #4d7f84;display:grid;place-items:center;color:var(--aqua);font-size:27px;border-radius:10px;box-shadow:inset 0 0 20px #18434b}
.brand{font-size:22px;font-weight:750;letter-spacing:.17em}.brand span{font-weight:300;color:#97c2c8;letter-spacing:.04em}.brand-sub{margin-top:3px;font-size:9px;letter-spacing:.22em;color:var(--muted);font-weight:650}
.top-center,.top-right{font-size:10px;letter-spacing:.13em;font-weight:720;color:#c5d7dc;display:flex;align-items:center;gap:13px}.top-center .dim{color:#526f7b}.live-dot,.pulse-label i{height:7px;width:7px;background:#7fe7c8;border-radius:50%;box-shadow:0 0 13px #70f7d1}.divider-vertical{height:15px;border-left:1px solid #344d5a}.tag{border:1px solid #3f6871;border-radius:5px;padding:9px 12px;color:#83d7dc}.version{color:var(--muted)}
.intro{min-height:176px;padding:34px 40px 26px;display:flex;align-items:end;justify-content:space-between;gap:20px;border-bottom:1px solid #213641}.eyebrow,.labelnum{font-size:10px;letter-spacing:.18em;color:var(--aqua);font-weight:750}.dash{color:var(--gold);margin-right:9px}.sep{color:#54717c;margin:0 7px}.intro h1{font-size:clamp(31px,3.1vw,49px);letter-spacing:-.046em;font-weight:640;margin:12px 0 6px;line-height:1}.intro h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--gold)}.intro p{margin:12px 0 0;color:#9fb2b9;font-size:12px;letter-spacing:.005em;line-height:1.6}.intro-detail{border-left:1px solid #46616b;padding:4px 0 4px 22px;min-width:225px;display:flex;flex-direction:column;gap:8px}.intro-detail span{font-size:10px;letter-spacing:.16em;color:var(--muted)}.intro-detail strong{font-size:12px;letter-spacing:.10em}.intro-detail small{color:#7c99a4;font-size:11px}
.workspace{display:grid;grid-template-columns:minmax(262px,300px) minmax(410px,1fr) minmax(275px,344px);gap:0;min-height:790px}.panel{background:#0b1923;padding:23px 24px}.controls{border-right:1px solid #27404b}.diagnostics{border-left:1px solid #27404b;padding:23px 20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;letter-spacing:.13em;color:#aec1c8;font-weight:750;margin-bottom:22px}.small-ring,.pulse-label{font-size:9px;color:var(--aqua);display:flex;align-items:center;gap:6px}.small-ring{border:1px solid #365260;padding:6px 7px;border-radius:5px}.section-title{font-size:18px;font-weight:650;margin:0 0 18px}
.preset-group{display:flex;gap:7px}.preset{flex:1;border:1px solid #2c4654;background:#112530;border-radius:5px;padding:10px 0;color:#93aebb;font-size:11px;letter-spacing:.08em;font-weight:700}.preset:hover,.preset.active{border-color:#79bcc4;color:#aff9f8;background:#1b3c44}.rule{border-top:1px solid #28414d;margin:24px 0 21px}.controls-list{display:flex;flex-direction:column;gap:22px}.control-line{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin-bottom:10px}.control-line label{color:#bdcdd3;font-size:11px;font-weight:620}.control-line output{color:#9ceaf0;font-size:11px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;border-radius:8px;background:linear-gradient(90deg,#5cc9d6 var(--pct,50%),#28424e var(--pct,50%));cursor:pointer;display:block;margin:12px 0 9px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#9aeaf0;border:2px solid #0e2c38;box-shadow:0 0 0 2px #559ca6;cursor:grab}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#9aeaf0;border:2px solid #559ca6}.control-extents{display:flex;justify-content:space-between;color:#587584;font-size:9px;letter-spacing:.02em}
.switch-row{display:flex;align-items:center;justify-content:space-between;margin:25px 0 22px;border-top:1px solid #27414f;padding-top:19px}.switch-row strong{display:block;font-size:11px;margin-bottom:4px}.switch-row small{display:block;color:#77939f;font-size:10px}.toggle{position:relative;display:block;width:40px;height:22px}.toggle input{position:absolute;opacity:0}.toggle span{display:block;width:40px;height:22px;background:#29424c;border-radius:13px;border:1px solid #46616c;transition:.2s}.toggle span:after{content:'';display:block;position:absolute;width:14px;height:14px;top:4px;left:4px;background:#aec3c9;border-radius:50%;transition:.2s}.toggle input:checked+span{background:#267583;border-color:#55bdc6}.toggle input:checked+span:after{transform:translateX(18px);background:#d2faff}
.center-panel{background:#0c1b27;min-width:0;display:flex;flex-direction:column}.viewport-header{height:84px;padding:20px 26px 13px;display:flex;justify-content:space-between;align-items:center}.viewport-header h2{font-size:18px;margin:5px 0 0;font-weight:650}.view-indicator{font-size:9px;letter-spacing:.13em;color:#87cfd6;border:1px solid #335762;padding:9px 10px;border-radius:5px}.eye-dot{display:inline-block;width:6px;height:6px;border:1px solid #8bdfe2;border-radius:50%;margin-right:5px}
.viewport{flex:1;min-height:520px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 51% 43%,#173d4b 0%,#0b2633 45%,#061521 100%)}
.viewport:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 49px,rgba(115,192,201,.035) 50px),repeating-linear-gradient(90deg,transparent 0px,transparent 49px,rgba(115,192,201,.035) 50px);pointer-events:none;z-index:1}
#scene{display:block;width:100%;height:100%;position:absolute;inset:0;cursor:grab;touch-action:none}.view-gradient{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,22,33,.4),transparent 24%,transparent 73%,rgba(6,22,33,.8));z-index:1}.viewport-top-tag{position:absolute;top:25px;left:27px;font-size:10px;font-weight:750;letter-spacing:.12em;color:#d0e0e3;z-index:2}.viewport-top-tag .mono{color:#648693}.t-dot{display:inline-block;background:#80e2ee;width:7px;height:7px;border-radius:50%;margin-right:8px;box-shadow:0 0 9px #75ecfc}.top-callout,.bot-callout{z-index:2;position:absolute;top:95px;right:21px;text-align:right;pointer-events:none}.bot-callout{top:auto;bottom:128px;left:23px;right:auto;text-align:left}.top-callout span,.bot-callout span{display:block;font-size:9px;letter-spacing:.16em;color:#90b2bc}.top-callout strong,.bot-callout strong{font-size:17px;line-height:2;color:#9eeaf1}.top-callout .line{height:1px;width:66px;background:#548996;margin-left:auto}.bot-callout .line{height:1px;width:66px;background:#548996}.bot-callout strong{font-size:12px;color:#9edeb6}.scene-side-text{position:absolute;top:45%;right:13px;writing-mode:vertical-rl;letter-spacing:.19em;font-size:9px;color:#597e8a;z-index:2}.scene-side-text span{color:#c8a574}.scene-legend{position:absolute;bottom:62px;left:22px;right:22px;display:flex;align-items:center;justify-content:center;gap:22px;z-index:2;font-size:9px;letter-spacing:.04em;color:#9aafbb}.scene-legend span{display:flex;align-items:center;gap:7px}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.ice{background:#76d9ee}.wet{background:#b38a68}.lens{background:#d1f9ff;box-shadow:0 0 8px #8de4f5}.orbit-hint{position:absolute;bottom:19px;left:0;right:0;text-align:center;color:#6b8997;font-size:9px;letter-spacing:.12em;z-index:2}.orbit-hint span{color:#466572;margin:0 8px}
.transport{height:83px;display:flex;justify-content:space-between;align-items:center;padding:0 25px;border-top:1px solid #26414b;background:#0c1c27;gap:14px}.buttons{display:flex;gap:8px}.buttons button,.export button{border:1px solid #35515d;color:#c6d6dc;background:#192d39;padding:12px 14px;font-size:10px;font-weight:760;letter-spacing:.07em;border-radius:5px;white-space:nowrap}.buttons button:hover,.export button:hover{background:#274858}.buttons .primary{background:#84d9df;border-color:#84d9df;color:#10262f}.buttons .primary:hover{background:#b5fbfa}.time-display{text-align:right;display:flex;flex-direction:column;gap:5px}.time-display>span{font-size:9px;color:#718f9a;letter-spacing:.13em}.time-display strong{font-size:19px;font-weight:690;font-variant-numeric:tabular-nums}.time-display strong small{font-size:12px;color:#819ca8;font-weight:500}.note-strip{display:flex;gap:10px;align-items:center;padding:13px 24px;background:#10262f;color:#81a0aa;font-size:10px;line-height:1.4;border-top:1px solid #213b46}.note-ico{border:1px solid #557b89;border-radius:50%;font-style:italic;width:15px;height:15px;display:grid;place-items:center;flex-shrink:0;color:#a8d9e0}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metric{background:linear-gradient(145deg,#122733,#10232d);border:1px solid #294651;border-radius:5px;padding:14px 13px;min-width:0}.main-metric{grid-column:span 2;background:linear-gradient(112deg,#17404a,#102b39);border-color:#386c75;padding:17px 18px}.metric-label{font-size:9px;font-weight:750;letter-spacing:.11em;color:#8eabb6;display:flex;justify-content:space-between}.metric-label span{font-size:16px;color:#8ddedb}.metric-big{display:flex;align-items:baseline;gap:8px;margin-top:8px}.metric-big strong{font-size:49px;letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-weight:600;color:#b1f2f0}.metric-big>span{font-size:18px;color:#80c9d3}.metric-sublabel,.metric-sub{color:#7797a1;font-size:10px;margin-top:4px}.mini-track{height:3px;border-radius:6px;background:#2e5359;overflow:hidden;margin-top:14px}.mini-track span{display:block;background:linear-gradient(90deg,#7bd0d4,#cbf8ef);height:100%;width:0%;transition:width .16s}.metric-value{display:flex;align-items:baseline;gap:5px;margin-top:12px}.metric-value strong{font-size:26px;letter-spacing:-.025em;color:#e0f4f5;font-variant-numeric:tabular-nums}.metric-value span{font-size:12px;color:#89b8c5}
.graph-card{margin-top:17px;background:#0e202a;border:1px solid #27424d;border-radius:5px;padding:15px 13px 11px}.graph-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}.graph-heading strong,.probe-heading strong{font-size:13px;display:block;margin-top:6px}.labelnum{font-size:9px;color:#6baab5}.graph-pill{font-size:10px;color:#9cc9d2;border:1px solid #2c5360;padding:5px 7px;border-radius:4px}canvas#profile,canvas#history{width:100%;display:block;margin-top:10px}.graph-footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:7px;color:#8ca6b2;font-size:9px}.graph-footer span{display:flex;align-items:center;gap:5px}.temp-line,.front-line,.heave-line{display:inline-block;width:14px;height:2px;background:#f5cb91}.front-line{background:#78dbe5}.heave-line{background:#79dce3}.history-card{margin-top:12px}.probe{border:1px solid #2d4854;border-radius:5px;margin-top:14px;padding:13px;background:#12242d}.probe-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.probe-heading>span{font-size:16px;color:var(--gold);font-weight:650}.probe .control-line label{font-size:10px}.export{display:flex;gap:8px;margin-top:13px}.export button{flex:1;padding:12px 4px;color:#8fe1e6;border-color:#42656e;background:#102a34;font-size:9px}
footer{min-height:57px;border-top:1px solid #223842;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 39px;font-size:9px;font-weight:660;letter-spacing:.08em;color:#8aa5b0}footer div:first-child{color:#cee4e8}.foot-mark{font-size:18px;margin-right:7px;color:var(--aqua)}footer .muted{color:#63808e;margin-left:12px;font-weight:400}footer div:last-child{color:#6f96a3}footer div:last-child span{color:#bb956a;margin:0 7px}
@media(max-width:1250px){.workspace{grid-template-columns:265px minmax(380px,1fr)}.diagnostics{grid-column:1/-1;display:grid;grid-template-columns:minmax(230px,.9fr) 1fr 1fr;gap:12px;align-items:start;border-left:0;border-top:1px solid #27404b}.diagnostics .panel-heading{grid-column:1/-1;margin-bottom:2px}.metrics-grid{grid-row:span 2}.diagnostics .graph-card{margin:0}.probe,.export{grid-column:2/-1;margin:0}.intro-detail{display:none}}
@media(max-width:780px){.topbar{padding:0 18px;height:67px}.top-center,.top-right{display:none}.intro{padding:28px 20px}.intro h1{font-size:35px}.workspace{display:flex;flex-direction:column}.center-panel{order:0}.controls{order:1;border-right:0;border-top:1px solid var(--border)}.diagnostics{order:2;display:flex;flex-direction:column}.panel{padding:22px}.controls-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}.viewport{min-height:490px}.viewport-header{height:79px}.diagnostics>*{width:100%}.note-strip{padding:13px}.metric-big strong{font-size:38px}footer{padding:20px;flex-wrap:wrap}footer div:last-child{display:none}}
@media(max-width:460px){.controls-list{grid-template-columns:1fr}.viewport{min-height:430px}.scene-legend{gap:8px;font-size:8px}.orbit-hint{font-size:7px}.transport{padding:10px;height:auto;flex-wrap:wrap}.buttons{gap:5px}.buttons button{padding:10px 11px;font-size:9px}.time-display{margin-left:auto}.top-callout{top:76px;right:14px}.bot-callout{left:12px}.view-indicator{font-size:8px}.viewport-header{padding:16px}}