:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#07131a;color:#e9ede9;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #d6b978;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}[hidden]{display:none!important}
.app-shell{height:100dvh;min-height:650px;display:flex;flex-direction:column;overflow:hidden;background:#07141a}.topbar{height:77px;flex-shrink:0;border-bottom:1px solid #27404b;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#0b1922;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:15px}.brand-icon{display:flex;align-items:flex-end;gap:3px;width:30px;height:28px;transform:skew(-17deg)}.brand-icon span{width:8px;height:22px;background:#bf9862;border-radius:1px}.brand-icon span:nth-child(2){height:15px;background:#ecce8e}.brand-icon span:nth-child(3){height:26px;background:#738b82}.brand-top{font-size:9px;font-weight:800;letter-spacing:.20em;color:#d5bd8a}.brand-top small{font-size:9px;color:#708590}.brand-name{font-size:21px;letter-spacing:.08em;font-weight:750;margin-top:2px}.brand-name b{color:#c9a970;font-weight:500}.top-center{font-size:10px;font-weight:650;letter-spacing:.18em;color:#8aa0a6;display:flex;gap:10px;align-items:center}.top-center strong{color:#d6d8cd;font-weight:650}.live-dot{height:7px;width:7px;background:#9bd3b0;border-radius:50%;box-shadow:0 0 0 4px #184036}.bar-separator{color:#38515c}.top-right{display:flex;align-items:center;gap:12px}.status-pill{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid #4c5c52;background:#1d302b;color:#d6d5b5;border-radius:2px;font-size:10px;padding:10px 13px;letter-spacing:.13em;font-weight:700}.icon-button{background:#15252e;border:1px solid #3a515b;color:#e5e9e6;font-size:17px;width:36px;height:34px;border-radius:2px}.layout{flex:1;display:grid;grid-template-columns:298px minmax(250px,1fr) 265px;min-height:0}.panel{background:#101f27;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#3c555a #101f27}.left-panel{border-right:1px solid #2f424b;padding:24px 21px 20px}.right-panel{border-left:1px solid #2f424b;padding:24px 18px 20px}.panel-eyebrow{color:#87a1a5;letter-spacing:.20em;font-size:9px;font-weight:750;display:flex;align-items:center;justify-content:space-between}.panel-eyebrow span{color:#657d83;font-weight:500}.section-title{font-family:Georgia,'Times New Roman',serif;font-size:25px;letter-spacing:-.025em;color:#f3eee1;margin:15px 0 12px;display:flex;align-items:center;justify-content:space-between}.wave-glyph{color:#d1b17a;font-family:system-ui;font-size:24px;font-weight:300}.subline{line-height:1.75;font-size:11px;color:#92a5a6;max-width:250px;margin:0 0 23px}.subline em{color:#d7c6a1}.readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.readout{background:#172a33;border:1px solid #2d454d;padding:12px 11px;min-height:83px}.readout-name{font-size:9px;color:#9baeb1;letter-spacing:.06em}.readout-value{display:flex;align-items:baseline;gap:6px;margin-top:9px}.readout-value strong{font-size:23px;font-weight:550;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.readout-value small{font-size:10px;color:#a5b0aa}.meter-label{display:flex;align-items:center;justify-content:space-between;margin:24px 0 8px;font-size:9px;letter-spacing:.14em;font-weight:650;color:#9dafae}.meter-label strong{font-size:11px;color:#dfe9df}.meter-track{height:6px;background:#2b3c41;overflow:hidden}.meter-fill{background:#75b79a;height:100%;width:100%;transition:width .25s}.meter-fill.low{background:#d78d67}.progress-label{margin-top:18px}.meter-fill.gold{background:#d6b177;width:0}.panel-divider{height:1px;background:#2b424a;margin:25px 0 21px}.section-head{font-size:10px;font-weight:750;letter-spacing:.12em;color:#e9e6dc;display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:17px}.small-tag{font-size:8px;letter-spacing:.08em;color:#adbaae;border:1px solid #365259;padding:4px 5px}.slider-line{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#d4deda;margin-bottom:9px}.slider-line small{display:block;color:#708b90;font-size:9px;margin-top:2px}.slider-line output{font-size:11px;color:#d5bc84;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;margin:0 0 23px;height:4px;border-radius:0;background:linear-gradient(90deg,#c1a573,#35515a);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#ebd6ae;border:3px solid #9e8155;border-radius:50%}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:#ebd6ae;border:3px solid #9e8155;border-radius:50%}.key-row{display:grid;grid-template-columns:48px 1fr 48px 1.2fr;align-items:center;gap:7px;margin-bottom:9px;font-size:9px;color:#a1b3b5}.key-row kbd{border:1px solid #3e5860;background:#1c323b;box-shadow:0 2px 0 #06141a;padding:7px 4px;text-align:center;font-size:10px;color:#dfdfd1}.touch-controls{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:7px;margin:19px 0 12px}.touch-button{min-height:46px;background:#182f37;border:1px solid #46606a;color:#e3e2d7;font-size:17px;touch-action:none;user-select:none}.touch-button small{display:block;font-size:8px;letter-spacing:.13em;margin-top:3px;color:#9dadac}.touch-button.pole{background:#314235;border-color:#6b745a}.touch-button:active,.touch-button.held{background:#bc9864;color:#101a1d}.touch-button:active small,.touch-button.held small{color:#263026}.primary-btn,.secondary-btn{width:100%;padding:14px 8px;letter-spacing:.12em;font-size:10px;font-weight:800;border-radius:1px}.primary-btn{border:1px solid #d3b784;background:#d4b780;color:#1c2929}.primary-btn:hover{background:#edcb91}.secondary-btn{border:1px solid #4e6364;background:transparent;color:#d6dbd3;margin-top:9px}.secondary-btn:hover{background:#193039}
.viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#87aaab,#415c60 78%);min-width:0}.viewport canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}.viewport canvas:active{cursor:grabbing}.viewport::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07191b56,transparent 32%,transparent 72%,#06171cb8);pointer-events:none;z-index:1}.scene-top-left{position:absolute;top:38px;left:39px;z-index:2;pointer-events:none;text-shadow:0 1px 14px #0b262d66}.gold-line{display:block;width:27px;height:2px;background:#f1d49a;margin-bottom:17px}.scene-overline{font-size:9px;font-weight:800;letter-spacing:.22em;color:#ffedc3}.scene-top-left h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(31px,3.6vw,58px);line-height:1.05;letter-spacing:-.035em;font-weight:500;color:white;margin:14px 0 11px}.scene-top-left h1 em{font-weight:400;font-size:.8em}.scene-top-left p{font-size:10px;font-weight:700;letter-spacing:.07em;color:#f2e7cd}.viewport-top-controls{position:absolute;top:28px;right:21px;display:flex;gap:7px;z-index:2}.scene-pill{border:1px solid #dce2d899;color:white;background:#12323c99;backdrop-filter:blur(5px);padding:10px 11px;letter-spacing:.08em;font-size:9px;font-weight:700}.scene-pill:hover{background:#285462}.compass{position:absolute;right:29px;bottom:103px;z-index:2;text-align:center;border:1px solid #f1e8d799;border-radius:50%;height:83px;width:83px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff6df;background:#13333b70}.compass-n{font-size:10px;font-weight:700}.compass-needle{font-size:23px;line-height:24px;color:#eac18b}.compass small{font-size:7px;letter-spacing:.13em}.scene-bottom{position:absolute;left:31px;right:28px;bottom:22px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:14px;font-size:13px;font-weight:600;color:#f0f7f1}.route-label{font-size:9px;color:#c9d7cf;letter-spacing:.18em;font-weight:750;margin-bottom:8px}.camera-hint{font-size:8px;font-weight:800;letter-spacing:.1em;color:#d0d9d2;white-space:nowrap}.toast{position:absolute;z-index:4;left:50%;top:19%;transform:translate(-50%,0);background:#0b2026d6;border:1px solid #b49b6b;padding:10px 17px;max-width:75%;text-align:center;color:#f5edd7;font-size:11px;pointer-events:none;opacity:1;transition:opacity .35s}.toast.dismissed{opacity:0}.error-overlay{position:absolute;z-index:9;inset:0;background:#101b22;color:#f0d2bc;padding:18%;text-align:center}
.map-shell{position:relative;background:#152d35;border:1px solid #355057;padding:8px;aspect-ratio:1/1.13}.map-shell canvas{width:100%;height:100%;display:block}.map-tag{position:absolute;bottom:12px;left:14px;background:#0d2129bf;padding:6px 8px;color:#c4e7ce;font-size:8px;letter-spacing:.12em}.map-dot{display:inline-block;width:6px;height:6px;background:#88d0a5;border-radius:50%;margin-right:4px}.legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:12px;font-size:8px;color:#9db2b3}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:8px;height:8px;display:inline-block;border-radius:50%}.legend-raft{background:#f2d69d}.legend-gate{background:#d9e9e3}.legend-shoal{background:#d8a46d}.brief-step{display:flex;gap:12px;margin:0 0 20px}.brief-index{font-family:Georgia,serif;font-size:20px;color:#c0a16d}.brief-step b{font-size:11px;font-weight:650;color:#e6e8e1}.brief-step p{font-size:10px;line-height:1.55;color:#839da3;margin:6px 0 0}.note-block{padding:14px;background:#263229;border-left:2px solid #b6a46c;margin-top:25px}.note-block b{color:#dfd5b0;font-size:9px;letter-spacing:.16em}.note-block p{margin:8px 0 0;color:#b7c0ae;font-size:10px;line-height:1.7}.right-footer{margin:24px 0 4px;text-align:center;font-size:8px;letter-spacing:.1em;color:#738c94}.bottom-bar{height:33px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 22px;background:#0b1921;border-top:1px solid #253e48;font-size:8px;color:#a5b9b8;letter-spacing:.10em}.bottom-bar b{color:#697e82;font-weight:450}.help-dialog{width:min(440px,calc(100vw - 36px));max-height:85vh;overflow:auto;border:1px solid #8c8c73;background:#12252e;color:#e9eddf;padding:27px 28px 29px;box-shadow:0 30px 90px #000a}.help-dialog::backdrop{background:#06151cba;backdrop-filter:blur(2px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;color:#d7bd86;letter-spacing:.16em;font-size:9px;font-weight:750}.help-dialog h2{font-family:Georgia,serif;font-size:27px;font-weight:500;line-height:1.15;margin:24px 0 19px}.help-dialog p{line-height:1.7;font-size:12px;color:#b7c8c6;margin:0 0 14px}.dialog-caveat{font-size:10px!important;color:#bda980!important}.help-dialog .primary-btn{margin-top:18px}.result-glyph{font-size:34px;color:#d7c08d;margin-top:20px}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.results-grid div{background:#1e343d;padding:11px 8px;font-size:9px;color:#a6beba;letter-spacing:.08em}.results-grid strong{display:block;color:#f2e8d2;font-size:17px;margin-top:8px;letter-spacing:0}
@media(max-width:1250px){.layout{grid-template-columns:268px minmax(250px,1fr) 235px}.left-panel{padding:22px 16px}.right-panel{padding:22px 14px}.top-center{display:none}.scene-top-left{left:25px}.scene-top-left h1{font-size:clamp(29px,3.6vw,45px)}}
@media(max-width:970px){.app-shell{height:auto;min-height:100dvh;overflow:visible}.topbar{height:66px}.layout{display:grid;grid-template-columns:minmax(270px,1fr) minmax(240px,1fr);grid-template-rows:60vh auto;min-height:0}.viewport{grid-column:1/-1;grid-row:1;min-height:430px}.left-panel{grid-column:1;grid-row:2;border-top:1px solid #355057}.right-panel{grid-column:2;grid-row:2;border-top:1px solid #355057}.panel{overflow:visible}.map-shell{max-height:345px;aspect-ratio:unset;height:300px}.scene-top-left h1{font-size:52px}.bottom-bar{height:auto;min-height:34px;gap:12px;flex-wrap:wrap;padding:9px 18px}}
@media(max-width:610px){.topbar{padding:0 14px}.brand-icon{width:22px}.brand-top{font-size:8px}.brand-top small{display:none}.brand-name{font-size:18px}.status-pill{font-size:8px;padding:9px}.layout{display:flex;flex-direction:column}.viewport{order:0;height:58vh;min-height:400px}.left-panel{order:1}.right-panel{order:2}.scene-top-left{top:70px;left:22px}.scene-top-left h1{font-size:37px}.scene-top-left p{font-size:9px;max-width:240px;line-height:1.5}.viewport-top-controls{top:15px;right:11px}.scene-pill{font-size:8px;padding:8px}.scene-bottom{left:16px;right:12px;bottom:16px}.camera-hint{display:none}.compass{bottom:94px;right:13px;height:62px;width:62px}.left-panel,.right-panel{padding:25px 24px}.readout-grid{grid-template-columns:repeat(4,1fr)}.readout{padding:9px 5px;min-height:75px}.readout-name{font-size:8px}.readout-value strong{font-size:17px}.readout-value small{font-size:8px}.map-shell{height:335px}.bottom-bar span:nth-child(2){display:none}}