:root{color-scheme:dark;--bg:#0b151b;--panel:#0f1d24;--ink:#e8efed;--muted:#8aa3a5;--line:#283f47;--sea:#7ac8ba;--gold:#e4ba7a;--red:#e18a7b;--grid:#1c323a;--font:Inter,'Aptos','Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font)}
button,input,summary{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--sea);outline-offset:3px}button:disabled{opacity:.35;cursor:not-allowed}
.application{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:82px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 33px;background:#101d23;border-bottom:1px solid #29414a}
.brand{display:flex;align-items:center;gap:16px}.mark{width:42px;height:42px;border:1px solid #5e8e8b;background:#1c343b;position:relative;border-radius:11px;transform:rotate(-12deg)}.mark-track{position:absolute;left:9px;top:10px;width:27px;height:3px;background:#81c5b9;transform:rotate(-45deg);transform-origin:right center}.mark-vessel{position:absolute;left:11px;top:18px;width:20px;height:9px;clip-path:polygon(0 0,100% 0,70% 100%,23% 100%);background:var(--gold)}.brand-top{font-size:9px;letter-spacing:2.4px;color:#8ca8a7;font-weight:750}.edition{color:var(--gold)}.brand-name{font-size:22px;font-weight:800;letter-spacing:1px;margin-top:3px}.brand-name span{font-weight:350;color:var(--gold)}.topright{display:flex;gap:9px;align-items:center}.top-tag{color:#b1c7c6;letter-spacing:1.45px;font-size:10px;font-weight:800;margin-right:15px;display:flex;gap:10px;align-items:center}.live-dot,.connected{background:#80cabb;display:inline-block;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 5px #80cabb15}.toolbar-btn{background:#182a32;border:1px solid #34515b;padding:10px 14px;border-radius:6px;color:#d7e5e4;font-size:11px;font-weight:800;letter-spacing:1.1px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 342px;flex:1;min-height:0;min-height:650px}
.visual{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 15%,#4d747b,#1a3640 50%,#0a1a22 98%);min-height:670px}
#world{width:100%;height:100%;position:absolute;inset:0;display:block;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#07171b99 0%,transparent 31%,transparent 67%,#07151bd9 100%)}
.view-header{position:absolute;top:28px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}.location-pill{display:flex;align-items:center;gap:10px;color:#d5e5dd;font-size:10px;letter-spacing:1.35px;font-weight:550;background:#0b2027ad;backdrop-filter:blur(8px);border:1px solid #5c89834b;padding:9px 12px;border-radius:4px}.location-pill strong{color:#dbba80}.location-dot{width:6px;height:6px;background:#84c7b3;border-radius:50%}.location-pill .sep{color:#69918a}.location-pill small{color:#a5bcbd}.view-code{font-size:10px;letter-spacing:1.7px;color:#d0dfd8;background:#10232aa3;border:1px solid #6d9c9655;padding:10px 13px}.view-code span{color:var(--gold)}
.view-heading{position:absolute;left:36px;top:91px;pointer-events:none;text-shadow:0 3px 22px #102028aa}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2.3px;font-weight:800}.view-heading h1{font-size:clamp(31px,3.8vw,57px);letter-spacing:-2.9px;font-weight:450;line-height:1.04;margin:9px 0 8px}.view-heading h1 i{color:var(--gold);font-style:normal}.view-heading p{font-size:13px;margin:0;color:#d0dfdc;letter-spacing:.4px}
.view-controls{position:absolute;top:198px;left:34px;display:flex;gap:5px;flex-wrap:wrap}.camera{font-size:9px;font-weight:800;letter-spacing:1px;border:1px solid #4e7775b4;color:#c9ddda;background:#102b31bc;padding:10px 11px;border-radius:3px;backdrop-filter:blur(9px)}.camera span:first-child{color:var(--gold);font-size:13px;padding-right:3px}.camera.active,.camera:hover{background:#7fc1b7;color:#10232b;border-color:#88cdc1}.camera.active span:first-child,.camera:hover span:first-child{color:#25454d}
.hotspot{display:none;position:absolute;z-index:3;transform:translate(-50%,-50%);border:1px solid #cbe4d7;box-shadow:0 0 0 5px #a8e3ce22,0 4px 20px #061f2dd1;border-radius:50%;width:33px;height:33px;color:#163238;background:#b5e1d0;font-size:11px;font-weight:850;text-align:center}.hotspot.tiny{background:#eacb98}.hotspot-label{display:none;position:absolute;left:40px;top:5px;white-space:nowrap;border:1px solid #497a79;background:#122a32e8;border-radius:3px;padding:5px 9px;color:#e8f0e8;font-size:9px;letter-spacing:1px}.hotspot:hover .hotspot-label,.hotspot:focus .hotspot-label{display:block}
.readout{position:absolute;left:33px;right:33px;bottom:63px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #69948a67;backdrop-filter:blur(17px);background:#10252bd8;box-shadow:0 14px 45px #05121877}.readout-cell{padding:17px 17px 13px;border-right:1px solid #41625e75}.readout-cell.last{border-right:0}.readout-cell>span{display:block;font-size:9px;letter-spacing:1.3px;color:#abc7c2;font-weight:700;min-height:13px}.readout-cell>div:nth-child(2){display:flex;align-items:baseline;gap:7px;margin-top:8px}.readout-cell strong{font-size:clamp(19px,2.6vw,32px);letter-spacing:-1px;font-weight:520;font-variant-numeric:tabular-nums}.readout-cell small{font-size:10px;color:#93b7b2}.minibar{height:2px;background:#3d605c;margin-top:12px;width:100%;overflow:hidden}.minibar span{display:block;background:linear-gradient(90deg,#a6d3c7,#e5be86);height:100%;width:0;transition:width .15s}
.viewport-footer{position:absolute;left:34px;right:34px;bottom:19px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#a7b9b7;letter-spacing:1.1px;font-weight:700;pointer-events:none}
.console{display:flex;flex-direction:column;min-height:0;background:#102027;border-left:1px solid #35545b}.console-header{padding:26px 23px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.console-header h2{font-size:21px;font-weight:560;letter-spacing:-.6px;margin:8px 0 0}.console-number{color:#65898d}.status-tag{border:1px solid #4c7d74;background:#163c39;padding:7px 9px;display:flex;gap:7px;align-items:center;color:#a9e2ce;font-size:9px;font-weight:800;letter-spacing:.8px;white-space:nowrap}.status-dot{width:6px;height:6px;background:#8dd5b6;border-radius:50%}.status-tag.danger{border-color:#b76e66;background:#4d2529;color:#f3bbb0}.status-tag.danger .status-dot{background:#ff877c}.console-content{flex:1;overflow:auto;overscroll-behavior:contain;max-height:calc(100vh - 177px);scrollbar-color:#426269 #102027;scrollbar-width:thin}.panel-section{padding:22px 23px 20px;border-bottom:1px solid var(--line)}.group-title{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;letter-spacing:1.65px;font-weight:850;color:#e7bc7c;margin-bottom:20px}.mini-meta{font-size:8px;letter-spacing:1.0px;color:#718f95;text-align:right;font-weight:650}.button-row{display:flex;gap:8px}.primary-action{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;background:#97c7b5;color:#112f32;border:1px solid #b0d5c6;padding:12px 8px;font-size:10px;font-weight:850;letter-spacing:.7px}.primary-action span:first-child{font-size:15px}.stop-action{display:flex;align-items:center;gap:7px;color:#e9b4a8;border:1px solid #ab5f57;background:#3b282e;padding:9px 11px;font-size:10px;letter-spacing:.6px;font-weight:800}.stop-action.active{background:#d4786c;color:#1d1a1b}.direction{margin-top:22px}.control-name{display:block;font-size:10px;color:#a2bab9;letter-spacing:1.3px;font-weight:750;margin-bottom:10px}.direction-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.direction-buttons button{background:#162a31;color:#9eb8b8;border:1px solid #37545b;padding:9px 4px;font-size:9px;letter-spacing:.4px;font-weight:850}.direction-buttons button.selected{color:#a9e0d3;border-color:#73b9ab;background:#1b403f}.notice{border-left:2px solid #dab57c;padding-left:10px;margin:17px 0 0;color:#8ea9aa;font-size:11px;line-height:1.5;min-height:27px}.notice.warning{border-color:#d88b7d;color:#e2aca1}.control{margin:0 0 20px}.control label,.time-control label{display:flex;justify-content:space-between;gap:10px;color:#aebfc0;font-size:10px;letter-spacing:.82px;font-weight:780;margin-bottom:14px}.control label span,.time-control label strong{color:#f1dfbc;font-size:10px;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}.control input[type=range],.time-control input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(90deg,#86bba9 var(--value,50%),#34515b var(--value,50%));border-radius:0;cursor:pointer}.control input::-webkit-slider-thumb,.time-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border:3px solid #c6e2d5;background:#35655f;border-radius:50%;box-shadow:0 0 0 2px #2a4e4b}.control input::-moz-range-thumb,.time-control input::-moz-range-thumb{width:9px;height:9px;border:3px solid #c6e2d5;background:#35655f;border-radius:50%}.range-label{display:flex;justify-content:space-between;color:#64858a;letter-spacing:1.0px;font-size:8px;margin-top:11px}.water-line,.force-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px}.water-line>div,.force-grid>div{padding:12px 9px;border:1px solid #2f4c52;background:#172b33}.water-line span,.force-grid span{display:block;color:#7e9d9e;font-size:8px;letter-spacing:.7px;margin-bottom:8px}.water-line strong,.force-grid strong{font-size:14px;font-weight:550;color:#d8eeeb;font-variant-numeric:tabular-nums}.scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.scenario-grid button{background:#1a3037;border:1px solid #38545c;color:#abc1c0;text-align:left;padding:11px 7px;font-size:9px;letter-spacing:.3px;font-weight:750}.scenario-grid button:hover{border-color:#8ac9b9;color:#d3eee3}.scenario-icon{color:var(--gold);font-size:15px;margin-right:6px}.time-control{margin-top:20px}.reset-btn{width:100%;padding:12px;background:transparent;border:1px solid #49666c;color:#d0e1dc;margin-top:20px;font-size:10px;letter-spacing:1px;font-weight:750}.reset-btn:hover{border-color:var(--gold);color:var(--gold)}.graph-box{background:#142731;border:1px solid #31505b;padding:7px 7px 8px}#trace{width:100%;height:106px;display:block}.graph-legend{display:flex;justify-content:space-between;align-items:center;margin:2px 5px 0;color:#8da9aa;font-size:9px;letter-spacing:.6px}.graph-legend i{display:inline-block;width:15px;height:2px;background:var(--gold);margin-right:5px;vertical-align:middle}.disclosure{padding:16px 23px 28px}.disclosure details{border:1px solid #345059;padding:13px;background:#152831;color:#a4babb}.disclosure summary{cursor:pointer;font-size:10px;letter-spacing:1px;color:#cddbd8;font-weight:780;list-style:none;display:flex;justify-content:space-between}.disclosure summary::-webkit-details-marker{display:none}.disclosure p{font-size:11px;line-height:1.7;color:#9eb7b4}.disclosure code{color:#e5c185}.console-footer{height:51px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 22px;border-top:1px solid #315057;color:#718f95;font-size:9px;letter-spacing:.8px;font-weight:750}.connected{width:5px;height:5px;vertical-align:1px;margin-right:7px}.page-footer{flex-shrink:0;height:36px;border-top:1px solid #263a40;background:#0b171e;color:#62818a;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0 27px;font-size:8px;letter-spacing:1.1px;font-weight:760}
.loading,.error-overlay{position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#11272de9;color:#a7ccbf;font-size:11px;letter-spacing:1.5px;font-weight:750;gap:20px}.error-overlay{padding:30px;text-align:center;color:#e1b9b1}.error-overlay h2{font-size:22px;color:white;letter-spacing:0}.error-overlay p{max-width:450px;font-size:13px;letter-spacing:0;line-height:1.7}.loading[hidden],.error-overlay[hidden]{display:none}.loader{height:40px;width:40px;border:3px solid #60847e;border-top-color:#f1c68c;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.info-dialog{color:#e8efed;width:min(470px,calc(100vw - 30px));border:1px solid #6a9990;background:#152b34;padding:30px 32px;box-shadow:0 25px 140px #040b0de0}.info-dialog::backdrop{background:#05131ae0;backdrop-filter:blur(5px)}.info-dialog h2{font-size:28px;font-weight:530;margin:12px 0 16px;letter-spacing:-.8px}.info-dialog p{font-size:13px;line-height:1.8;color:#b8d0cb}.dialog-extra{border-left:2px solid #e0b87e;margin:20px 0;color:#dbccaf;font-size:12px;line-height:1.6;padding:7px 0 7px 13px}.dialog-close{float:right;background:none;border:0;color:#bbd0cb;font-size:27px;margin:-16px -13px 0 0}.dialog-ok{margin-top:11px;width:100%;background:#9ecbbb;color:#183036;border:0;padding:13px;font-size:10px;font-weight:800;letter-spacing:1px}
@media(max-width:1180px){.workspace{grid-template-columns:minmax(0,1fr) 312px}.readout{left:20px;right:20px}.readout-cell{padding:13px 10px}.view-header,.view-heading,.view-controls{left:22px}.view-header{right:20px}.console-header{padding:23px 18px}.panel-section{padding:21px 17px}}
@media(max-width:850px){.topbar{padding:0 17px;height:71px}.brand-top{font-size:8px}.brand-name{font-size:19px}.top-tag{display:none}.workspace{grid-template-columns:minmax(0,1fr)}.visual{height:640px;min-height:540px}.console{border-left:0;border-top:1px solid #527079}.console-content{max-height:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr}.panel-section{border-right:1px solid #28414a}.chart-section{grid-column:span 2}.disclosure{grid-column:span 2}.console-footer{height:49px}.page-footer span:nth-child(2){display:none}}
@media(max-width:575px){.topbar{height:64px}.brand{gap:9px}.mark{height:35px;width:35px}.brand-top{font-size:7px;letter-spacing:1.1px}.brand-name{font-size:16px}.toolbar-btn{font-size:9px;padding:9px}.visual{height:595px;min-height:595px}.view-header{top:13px;left:12px;right:12px}.location-pill{font-size:8px;letter-spacing:.7px;gap:5px;padding:7px}.location-pill span:last-child{display:none}.view-code{font-size:8px;letter-spacing:.4px;padding:8px}.view-heading{left:14px;top:68px}.view-heading h1{font-size:35px}.view-heading p{font-size:11px}.view-controls{left:12px;right:12px;top:168px;gap:4px}.camera{font-size:8px;padding:9px 7px}.camera span:first-child{font-size:11px;padding-right:0}.readout{left:11px;right:11px;bottom:52px;grid-template-columns:1fr 1fr}.readout-cell{padding:9px 12px;border-bottom:1px solid #41625e75}.readout-cell:nth-child(2){border-right:0}.readout-cell:nth-child(n+3){border-bottom:0}.readout-cell>span{font-size:8px}.readout-cell strong{font-size:21px}.minibar{margin-top:5px}.viewport-footer{left:13px;right:13px;bottom:14px;font-size:7px;letter-spacing:.2px}.viewport-footer span:last-child{display:none}.console-content{display:block}.panel-section{border-right:0}.page-footer{padding:0 11px;font-size:7px}.hotspot{width:25px;height:25px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::after,*::before{transition:none!important;animation:none!important}}