@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e9f2f1;background:#173d4d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}#scene{position:fixed;inset:0;width:100%;height:100%}header{position:absolute;top:0;left:0;right:0;height:85px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:linear-gradient(#071b29a0,transparent)}.brand{color:white;text-decoration:none;letter-spacing:3px;font-weight:700;font-size:19px;display:flex;align-items:center;gap:12px}.brand>span{font-size:40px;color:#83dec6}.brand small{font-size:9px;letter-spacing:2px;opacity:.55;border-left:1px solid #ffffff40;padding-left:18px;margin-left:10px}.top-actions{display:flex;align-items:center;gap:12px}.live{color:#a5ddce;font-size:10px;letter-spacing:2px;margin-right:14px}button,select{font:inherit;color:inherit;border:1px solid #ffffff24;background:#ffffff09;border-radius:6px;padding:10px 12px;cursor:pointer}button:hover{background:#ffffff20}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #9be9c7;outline-offset:4px}.panel{background:#0b2332eb;border:1px solid #c5f4f224;border-radius:12px;box-shadow:0 12px 40px #00142030;backdrop-filter:blur(16px)}.settings{position:absolute;left:28px;top:104px;width:282px;padding:24px}.eyebrow{font-size:9px;letter-spacing:2px;color:#94c5c5;font-weight:600}h1{font-family:'Space Grotesk',sans-serif;font-size:33px;font-weight:500;line-height:1.15;letter-spacing:-1px;margin:16px 0 10px}.intro{font-size:12px;color:#9eb1b9;line-height:1.6;margin-bottom:26px}label{font-size:10px;letter-spacing:1px;color:#afc4cc}select{display:block;width:100%;margin:10px 0;font-size:12px;background:#132e3d}option{background:#132e3d}.muted{font-size:10px;color:#8fa9b5;line-height:1.6}.divider{height:1px;background:#ffffff14;margin:20px 0}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}.row label{letter-spacing:0;font-size:11px}.settings>.row{margin-top:15px}output{color:#a8e1cf;font-size:11px;font-variant-numeric:tabular-nums}input[type=range]{accent-color:#97dec3;width:100%;height:16px;margin:12px 0;cursor:pointer}.segmented{display:flex;margin-top:12px;gap:4px}.segmented button{font-size:10px;padding:9px 8px}.selected{background:#a8e1cf!important;color:#12352f;border-color:#a8e1cf}.textbutton{font-size:11px;border:0;color:#a2c7c7;margin-top:16px;padding:0}.mission{position:absolute;top:104px;right:28px;width:306px;padding:21px}.mission .eyebrow span{padding:0 9px;color:#9be7ca}h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:13px 0 8px}.mission p{font-size:12px;color:#acc1ca;line-height:1.6}.progress{height:3px;background:#ffffff16;margin:18px 0 10px}.progress i{display:block;height:100%;width:0;background:#9be7ca}.location{position:absolute;bottom:156px;left:342px;text-shadow:0 1px 12px #000}.location b{display:block;font-size:12px;font-weight:500}.location span{font-size:10px;opacity:.7}.console{position:absolute;bottom:24px;left:28px;right:28px;display:flex;align-items:center;padding:24px;gap:26px}.instrument{border-right:1px solid #ffffff20;padding-right:25px;min-width:110px}.instrument>span{font-size:8px;letter-spacing:1.5px;color:#8dabb7}.instrument strong{font-family:'Space Grotesk';font-size:40px;font-weight:400;font-variant-numeric:tabular-nums}.instrument em{font-style:normal;font-size:13px;color:#93b7be}.control{flex:1;min-width:120px}.keys{font-size:9px;color:#819eab}.keys button{padding:1px 5px;font-size:9px}.neutral{background:#a4dfca;color:#12352f;font-size:10px;font-weight:700;padding:16px}.neutral small{display:block;font-size:7px;margin-top:7px;letter-spacing:1px}[hidden]{display:none!important}dialog{max-width:560px;background:#102d3e;color:#dcebea;border:1px solid #557880;border-radius:14px;padding:32px;line-height:1.7;font-size:13px}dialog::backdrop{background:#00101abb;backdrop-filter:blur(7px)}dialog #close{float:right}dialog a{color:#a4dfca}@media(max-height:820px){.settings{padding:18px;top:86px}.divider{margin:12px 0}.intro{margin-bottom:16px}h1{font-size:28px}.settings>.row{margin-top:8px}.settings input{margin:8px 0}.console{padding:16px}.mission{top:86px}}@media(max-width:950px){.brand small,.live{display:none}.settings{width:230px;left:16px}.mission{width:240px;right:16px}.console{left:16px;right:16px;gap:14px}.instrument{min-width:75px;padding-right:10px}.instrument strong{font-size:28px}.location{left:265px}.keys{font-size:8px}}@media(max-width:650px){header{height:60px;padding:0 14px}.brand{font-size:13px;letter-spacing:1px}.top-actions button{font-size:10px;padding:8px}.settings{top:68px;width:186px;padding:12px;max-height:50vh;overflow:auto}h1{font-size:22px}.intro{display:none}.settings>label{display:block;margin-top:15px}.mission{top:68px;right:12px;width:160px;padding:12px}.mission h2{font-size:15px}.mission .eyebrow{font-size:8px;letter-spacing:1px}.console{flex-wrap:wrap;bottom:12px;padding:12px;gap:12px}.instrument{min-width:60px}.control{min-width:100px}.neutral{padding:10px}.location{display:none}}
.settings{max-height:calc(100dvh - 265px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#537d82 transparent}@media(max-height:820px) and (min-width:651px){.settings{max-height:calc(100dvh - 230px)}.settings h1{font-size:25px}.settings .intro{margin:6px 0 14px}.settings .divider{margin:12px 0}}@media(max-width:650px){.settings{max-height:48dvh}}
.chart{position:absolute;right:28px;bottom:156px;width:280px;padding:12px}.chart .eyebrow{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;margin-bottom:8px}.chart .eyebrow span{color:#819eab}.chart canvas{width:100%;height:180px;border-radius:6px}.chart #attribution{font-size:8px;margin-top:6px;color:#92b4bd}.chart a{color:#b2d7d4}.chart #coordinates{font-size:9px;padding-top:4px}@media(max-height:800px){.chart{width:230px;bottom:145px}.chart canvas{height:135px}.mission{padding:15px}}@media(max-width:950px){.chart{right:16px;width:210px}}@media(max-width:650px){.chart{display:none}}
@media(max-width:650px){.chart{display:block;bottom:205px;right:16px;width:auto;max-width:210px;padding:5px 8px}.chart .eyebrow,.chart canvas,.chart #coordinates{display:none}.chart:has(#attribution[hidden]){display:none}}
.harbor-limit{font-size:8px;letter-spacing:1px;color:#9cc2bb;margin-top:9px}.detents{display:flex;align-items:center;gap:5px;margin-top:10px}.detents button{font-size:10px;padding:4px 7px;min-width:27px}.detents output{font-size:9px;margin-left:auto;white-space:nowrap}.console{min-height:133px}.location{bottom:175px}.chart{bottom:175px}.settings{max-height:calc(100dvh - 285px)}@media(max-height:820px) and (min-width:651px){.settings{max-height:calc(100dvh - 255px)}}@media(max-width:650px){.settings{max-height:45dvh}.chart{bottom:235px}.detents output{font-size:8px}.console{gap:10px}}
.depthreadout{display:flex;justify-content:space-between;gap:10px;padding:10px 0;margin-top:10px;border-top:1px solid #ffffff20}.depthreadout span{display:block;color:#9ab7be;font-size:8px;letter-spacing:1px}.depthreadout b{display:block;font-size:18px;font-weight:500;margin-top:4px;font-variant-numeric:tabular-nums}.check{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:0;padding:8px 0}.check input{accent-color:#97dec3}.chartzoom{font-size:9px;padding:3px 0}.settings>output{float:right;margin-top:2px}.chart{bottom:185px}@media(max-width:650px){.chartzoom{display:none}.chart{bottom:245px}.depthreadout{flex-direction:column;gap:7px}.depthreadout b{font-size:15px}.mission{max-height:43vh;overflow:auto}}
@media(max-height:950px) and (min-width:951px){.chart{left:330px;right:auto;width:210px}.mission{max-height:calc(100dvh - 285px);overflow:auto}}
@media(max-width:950px) and (min-width:651px){.chart{left:16px;right:auto;bottom:185px;width:210px}.mission{max-height:calc(100dvh - 285px);overflow:auto}}

#berthstart,#releaseropes{display:block;margin-top:7px;text-align:left}

button:disabled{opacity:.4;cursor:not-allowed}

.wave-legend{position:absolute;top:85px;left:340px;right:340px;max-width:460px;margin:auto;padding:12px 15px;border:1px solid #ffed9966;border-radius:10px;background:#102c36ed;color:#f7eab9;font-size:11px;line-height:1.6;pointer-events:auto}.wave-legend strong{font-size:12px;letter-spacing:.06em}.wave-legend a{color:#a4dfca}@media(max-width:1100px){.wave-legend{top:auto;bottom:190px;left:270px;right:270px;font-size:10px}}@media(max-width:700px){.wave-legend{left:12px;right:12px;bottom:210px;max-width:none;font-size:10px}}

.chart #coaststatus{font-size:9px;color:#e5c58f;line-height:1.4;margin:3px 0}@media(max-width:650px){#coastcontrols{display:none}}

.chart .coastcredit{font-size:8px}.chart canvas{cursor:grab}.chart canvas:active{cursor:grabbing}

.charttools{display:flex;gap:5px;margin:5px 0}.charttools button{min-width:30px;min-height:28px;padding:4px 9px;font-size:12px}.charttools button:last-child{font-size:10px}#minimap:focus-visible{outline:2px solid #97dec3;outline-offset:2px}

#data-log{margin:18px 0;border-top:1px solid #ffffff24;padding-top:12px}#data-log summary{cursor:pointer;font-weight:600}#data-log-entries{padding-left:18px;font-size:11px;line-height:1.5;max-height:250px;overflow:auto;overflow-wrap:anywhere}#data-log-entries li{margin:8px 0}#cachecontrols button{display:block;text-align:left}

.chartlayers{margin-top:8px;font-size:11px}.chartlayers summary{cursor:pointer;color:#cfdfdf}.chartlayers[open]{max-height:180px;overflow:auto}

#seamarkselect{width:100%;font-size:11px;margin:5px 0}#seamarkdialog{max-width:480px;width:calc(100% - 32px);max-height:80vh;overflow:auto}#seamarkdetails{display:grid;grid-template-columns:minmax(100px,1fr) 2fr;gap:10px;font-size:14px}#seamarkdetails dt{color:#a5c3cb}#seamarkdetails dd{margin:0;overflow-wrap:anywhere}

.settings{padding:18px;max-height:calc(100vh - 260px)}.settings h2{font-size:18px;margin:0 0 15px}.settings-group{border-top:1px solid #ffffff20;margin:0}.settings-group>summary{cursor:pointer;padding:14px 0;font-size:13px;font-weight:600}.group-body{padding:0 0 14px}.group-body>.eyebrow{display:none}.settings-group select{width:100%}.panel-toggle{position:absolute;top:6px;right:8px;padding:2px 8px;font-size:18px;z-index:2}.console>.panel-toggle{top:-28px;background:#102d3d}.panel.minimized{width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;padding:9px!important;overflow:visible!important}.panel.minimized>:not(.panel-toggle){display:none!important}.panel.minimized>.panel-toggle{position:static;font-size:12px;padding:6px}.console.minimized{right:auto}.map-navigation{position:absolute;z-index:3;top:80px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:#102b3de8;border:1px solid #ffffff25;border-radius:9px;padding:7px;max-width:calc(100% - 32px);flex-wrap:wrap}.map-navigation button{font-size:12px;padding:8px}.map-navigation span{font-size:10px;color:#a6dbcf;max-width:230px}#placeboat{border-color:#79bca1}.chartlayers[open]{max-height:140px}.chart{max-height:calc(100vh - 260px);overflow:auto}.mission{max-height:calc(100vh - 260px);overflow:auto}@media(max-width:900px){.map-navigation{top:74px;width:max-content}.map-navigation span{width:100%;max-width:none}.settings{max-height:calc(100vh - 300px)}}

.visual-controls{display:none}.console.visual-helm{padding:12px 24px;gap:20px}.console.visual-helm>.control,.console.visual-helm>.neutral{display:none}.console.visual-helm>.visual-controls{display:flex;align-items:center;justify-content:center;gap:32px;flex:1;position:relative;padding-bottom:20px}.wheel-control{text-align:center;display:flex;flex-direction:column;align-items:center}.wheel-control button{font-size:10px;padding:3px 8px;margin-top:3px}#helmwheel{width:145px;height:145px;touch-action:none;cursor:grab;border-radius:50%}#helmwheel:focus-visible{outline:2px solid #9be7c9}#helmwheel svg{width:100%;height:100%;filter:drop-shadow(0 4px 4px #0008)}.wheel-rim{stroke:#a8b8bd;stroke-width:12;fill:none}.wheel-spin{transform-origin:80px 80px;transform:rotate(var(--wheel-angle,0deg))}.wheel-spin path{stroke:#84959d;stroke-width:10}.wheel-spin circle{fill:#304c5a;stroke:#bbc9cd;stroke-width:3}.helm-motor{text-align:center}.helm-motor label{font-size:11px;display:block}.lever-housing{position:relative;height:152px;width:76px;margin:6px auto;background:linear-gradient(100deg,#263e4b,#526773 50%,#243d49);border:1px solid #78909c;border-radius:20px;box-shadow:inset 0 2px 3px #b7d1db44,0 4px 6px #0005}.lever-slot{position:absolute;left:35px;top:16px;bottom:16px;width:6px;background:#061721;border-radius:4px}.lever-knob{position:absolute;z-index:1;left:16px;top:61px;width:44px;height:28px;transform:translateY(var(--lever-y,0px));background:linear-gradient(#dbe4e4,#6e838e);border:2px solid #d2dcdc;border-radius:9px;box-shadow:0 4px 4px #0008;pointer-events:none}.lever-housing span{position:absolute;left:7px;font-size:10px;color:#d2e2e8}.lever-f{top:16px}.lever-n{top:69px}.lever-r{bottom:15px}.lever-housing input[type=range]{position:absolute;inset:0;writing-mode:vertical-lr;direction:rtl;width:100%;height:100%;margin:0;opacity:0;cursor:ns-resize;touch-action:none}.lever-housing:focus-within{outline:2px solid #9be7c9;outline-offset:3px}.helm-motor output,#helmrudder{font-size:11px;color:#b4e1d3}.helm-help{position:absolute;bottom:-10px;font-size:10px;color:#94b8c2}.bow-buttons{display:flex;align-items:center;justify-content:center;gap:4px}.bow-buttons svg{width:22px;height:40px}.bow-buttons button{font-size:20px;padding:8px 12px;touch-action:none;user-select:none}.bow-buttons button:active{background:#8fd8c0;color:#123d39}#bowcontrols{text-align:center;max-width:160px}#bowcontrols>span{font-size:9px;letter-spacing:1px;color:#94bdc9}#bowstatus{font-size:10px;display:block;min-height:24px;margin-top:5px}body:has(.visual-helm:not(.minimized)) .settings{max-height:calc(100vh - 400px)}@media(max-width:950px){.console.visual-helm{gap:10px;padding:12px}.console.visual-helm>.visual-controls{gap:14px}#helmwheel{width:115px;height:115px}.helm-help{max-width:300px;font-size:9px}.console.visual-helm .instrument{display:none}}@media(max-width:650px){.console.visual-helm>.visual-controls{width:100%;flex:1;gap:10px}.console.visual-helm{flex-wrap:wrap}.lever-housing{height:142px;width:62px}#bowcontrols{max-width:none;width:100%}.bow-buttons{display:inline-flex;margin:0 10px}.helm-help{display:none}body:has(.visual-helm:not(.minimized)) .settings{max-height:calc(100vh - 450px)}}



.place-search{margin:12px 0;padding-top:10px;border-top:1px solid #ffffff20}.place-search label{display:block;font-size:12px;margin-bottom:6px}.place-search input{box-sizing:border-box;width:100%;padding:9px 10px;background:#0e2531;color:#ecf5f4;border:1px solid #68818c;border-radius:6px;font:inherit;font-size:13px}.place-search input:focus{outline:2px solid #9be7c9;outline-offset:1px}.place-search ul{list-style:none;margin:5px 0;padding:0;max-height:190px;overflow:auto;overscroll-behavior:contain;border:1px solid #527280;border-radius:6px;background:#102b39}.place-search li{padding:9px 10px;cursor:pointer;border-bottom:1px solid #ffffff16}.place-search li:hover,.place-search li[aria-selected=true]{background:#315849}.place-search strong,.place-search li span{display:block;font-size:12px}.place-search li span{font-size:10px;color:#b5ccd4;margin-top:3px}.place-search [role=status]{margin-top:5px}

.docking-result{margin-top:12px;border-top:1px solid #ffffff25;padding-top:10px}.docking-result summary{cursor:pointer;font-size:12px;color:#abe7d2}.docking-result dl{font-size:12px;line-height:1.5}.docking-result dt{color:#abc2ca;margin-top:8px}.docking-result dd{margin:0;font-variant-numeric:tabular-nums;color:#eff7f7}

.instrument>small{display:block;font-size:10px;line-height:1.4;color:#b5d1d7;max-width:150px;font-variant-numeric:tabular-nums}

.environment-indicator{margin:6px 0;font-size:10px;line-height:1.5}.environment-indicator>div{display:flex;align-items:center;gap:8px;min-height:24px}.environment-indicator svg{width:19px;height:19px;flex:none}.environment-indicator [data-flow="wind"] svg{color:#e5eef5}.environment-indicator [data-flow="current"] svg{color:#83baff}.environment-indicator small{display:block;font-size:9px;color:#abc2ca}

.map-navigation{width:max-content;max-width:min(610px,calc(100% - 32px))}.camera-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%}.camera-row .segmented{margin:0}.map-navigation [aria-pressed="true"],.map-navigation .selected{background:#a0ddc8;color:#102b3d}.map-navigation #helmlookcontrols:not([hidden]){display:flex;gap:4px}

.right-rail{position:absolute;top:104px;right:28px;bottom:var(--controls-space,185px);width:306px;display:flex;flex-direction:column;gap:12px;pointer-events:none;overflow:auto;scrollbar-width:thin}
.right-rail>.mission,.right-rail>.chart{position:relative;inset:auto;width:100%;max-width:none;max-height:none;flex-shrink:0;pointer-events:auto}
.right-rail>.mission{max-height:42%;overflow:auto}.right-rail>.chart{margin-top:auto}.right-rail>.minimized{align-self:flex-end;margin-top:0}
.settings{max-height:calc(100dvh - var(--controls-space,185px) - 116px)}
@media(max-width:1200px){.right-rail{top:185px;right:16px;width:240px}.settings{top:185px;max-height:calc(100dvh - var(--controls-space,185px) - 197px)}}
@media(max-width:650px){.right-rail{top:190px;right:8px;width:43vw}.right-rail>.chart canvas{display:block;height:125px}.right-rail>.chart .eyebrow,.right-rail>.chart #coordinates{display:block}.right-rail>.mission{padding:12px;max-height:180px}.settings{left:8px;width:43vw;top:190px;max-height:calc(100dvh - var(--controls-space,245px) - 202px)}.map-navigation{max-width:calc(100% - 16px);top:65px}.map-navigation button{font-size:11px;padding:7px}.right-rail .environment-indicator{font-size:9px}.right-rail .chart:has(#attribution[hidden]){display:block}}
#dialog{max-height:85dvh;overflow:auto}#dialog details{border-top:1px solid #ffffff25;margin-top:20px;padding-top:12px}#dialog summary{cursor:pointer;color:#a4dfca}.save-status{font-size:10px;color:#9fcbbd;line-height:1.5;margin:8px 0}

.right-rail,.right-rail>.mission,.right-rail>.chart{scrollbar-color:#537d82 #102b3d;scrollbar-width:thin}#startexercise{background:#a4dfca;color:#12352f;width:100%;font-size:12px;font-weight:600}

.livebadge{display:block;padding:6px 8px;border:1px solid #86cbb9;border-radius:5px;color:#b3eed4;font-size:11px}.unavailable{color:#a4abb0!important}.livebadge.unavailable{border-color:#71818a;background:#65737d22}.basemapcredit{font-size:9px}