:root{--bg-deep:#020617;--bg-glass:#0d111c66;--border-glass:#ffffff14;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-blue:#38bdf8;--accent-cyan:#22d3ee;--accent-amber:#fbbf24;--accent-emerald:#34d399;--accent-rose:#fb7185;--font-ui:"Inter", system-ui, -apple-system, sans-serif;--font-data:"JetBrains Mono", "Roboto Mono", monospace;--hud-width:300px}html,body{background:var(--bg-deep);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}.app-header{z-index:200;pointer-events:none;text-align:center;flex-direction:column;align-items:center;padding:12px 24px;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.app-title{color:#fff;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 20px #00e5ff66;background:linear-gradient(#fff,#fff9);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:18px;font-weight:900}.app-version{color:#00e5ff99;letter-spacing:.1em;margin-top:2px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:800}body{position:relative}#app{width:100%;height:100%}canvas{display:block}.hud-dock{z-index:120;width:var(--hud-width);pointer-events:none;position:fixed;top:60px;bottom:24px}.hud-dock--left{left:24px}.hud-dock--right{right:24px}.dock-panel{pointer-events:auto;scrollbar-width:thin;scrollbar-color:#fff3 transparent;flex-direction:column;gap:16px;height:100%;padding-top:12px;padding-bottom:24px;padding-right:4px;transition:transform .18s,opacity .18s;display:flex;overflow-y:auto}.dock-panel::-webkit-scrollbar{width:4px}.dock-panel::-webkit-scrollbar-track{background:0 0}.dock-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.control-card{background:var(--bg-glass);border:1px solid var(--border-glass);box-shadow:none;-webkit-backdrop-filter:blur(32px)saturate(180%);pointer-events:auto;border-radius:20px;overflow:hidden}.card-header{background:linear-gradient(90deg, #ffffff08, transparent), radial-gradient(circle at left top, color-mix(in srgb, var(--accent) 30%, transparent), transparent 75%);border-bottom:1px solid #ffffff14;padding:10px 14px 8px}.card-eyebrow{color:var(--accent-blue);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:700}.card-subtitle{color:var(--text-primary);letter-spacing:-.01em;margin-top:4px;font-size:14px;font-weight:600}.card-body{padding:16px}.card-section+.card-section{margin-top:12px}.section-title{color:#fff9;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;font-size:9px;font-weight:800}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.metric-grid--3col{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{border:1px solid var(--border-glass);background:#ffffff08;border-radius:12px;min-width:0;padding:8px 10px;transition:background .2s}.metric:hover{background:#ffffff0f}.metric-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-size:9px;font-weight:600;display:block}.metric-value{color:var(--text-primary);font-size:15px;font-weight:700;line-height:1.2;font-family:var(--font-data);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.heel-instrument{--heel-angle:0deg;border:1px solid var(--border-glass);background:#ffffff09;border-radius:10px;margin-bottom:10px;padding:10px}.heel-instrument__header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.heel-instrument__label{color:#ffffff9e;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:800}.heel-instrument__readout{justify-content:flex-end;align-items:baseline;gap:6px;min-width:88px;display:flex}.heel-instrument__value{color:#fff;font-family:var(--font-data);font-size:16px;font-weight:800}.heel-instrument__side{color:#ffffffa3;white-space:nowrap;font-size:10px;font-weight:800}.heel-gauge{background:linear-gradient(#0f1e30a8,#040c18db),#ffffff05;border:1px solid #ffffff14;border-radius:8px;height:66px;position:relative;overflow:hidden}.heel-gauge:before{content:"";border-top:1px solid #ffffff29;border-radius:50% 50% 0 0;height:34px;position:absolute;top:50%;left:16px;right:16px;transform:translateY(-50%)}.heel-gauge__fill{opacity:.82;width:0;transition:width .12s;position:absolute;top:0;bottom:0}.heel-gauge__fill--port{background:linear-gradient(90deg,#38bdf80a,#38bdf857);right:50%}.heel-gauge__fill--starboard{background:linear-gradient(90deg,#fbbf2457,#fbbf240a);left:50%}.heel-instrument.is-warning .heel-gauge__fill{background:linear-gradient(90deg,#fb71856b,#fb718514)}.heel-gauge__horizon{background:#ffffff94;border-radius:999px;height:2px;position:absolute;top:50%;left:20px;right:20px;transform:translateY(-50%);box-shadow:0 0 10px #ffffff2e}.heel-gauge__centerline{background:#ffffff38;width:1px;position:absolute;top:10px;bottom:10px;left:50%}.heel-gauge__boat{width:94px;height:26px;transform:translate(-50%, -50%) rotate(var(--heel-angle));transform-origin:50%;transition:transform .1s linear;position:absolute;top:50%;left:50%}.heel-gauge__boat:before{content:"";background:linear-gradient(90deg,#ffffffc2,#fffffffa 50%,#ffffffc2),#ffffffb8;border:2px solid #ffffffe6;border-radius:50% 50% 42% 42%;position:absolute;inset:4px 0;box-shadow:0 6px 14px #00000047}.heel-gauge__mast{z-index:1;background:#051222b8;border-radius:999px;width:2px;position:absolute;top:2px;bottom:2px;left:50%;transform:translate(-50%)}.heel-gauge__side-label{color:#ffffff94;font-family:var(--font-data);font-size:10px;font-weight:800;position:absolute;bottom:7px}.heel-gauge__side-label--port{left:10px}.heel-gauge__side-label--starboard{right:10px}.heel-instrument.is-port .heel-instrument__side,.heel-instrument.is-port .heel-gauge__side-label--port{color:#38bdf8}.heel-instrument.is-starboard .heel-instrument__side,.heel-instrument.is-starboard .heel-gauge__side-label--starboard{color:#fbbf24}.heel-instrument.is-warning .heel-instrument__value,.heel-instrument.is-warning .heel-instrument__side{color:#fb7185}.slider-stack{flex-direction:column;gap:12px;display:flex}.knob-row{justify-content:space-between;align-items:center;gap:12px;padding:4px 0;display:flex}.knob-label{color:#fff9;min-width:44px;font-size:11px}.knob-container{cursor:crosshair;width:48px;height:48px;position:relative}.knob-dial{background:#ffffff0d;border:1px solid #ffffff26;border-radius:50%;width:100%;height:100%;transition:border-color .2s;position:absolute;top:0;left:0}.knob-container:hover .knob-dial{border-color:var(--accent)}.knob-pointer{background:var(--accent);transform-origin:50% 100%;pointer-events:none;width:2px;height:50%;box-shadow:0 0 8px var(--accent);position:absolute;top:0;left:50%}.knob-pointer:after{content:"";background:var(--accent);border-radius:50%;width:6px;height:6px;position:absolute;top:0;left:50%;transform:translate(-50%)}.knob-value{color:#fff;text-align:right;min-width:48px;font-size:12px;font-weight:700}.slider-row{grid-template-columns:44px minmax(0,1fr);align-items:center;gap:6px;display:grid}.slider-label{color:#fff9;font-size:11px}.slider-control{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.slider-row input[type=range]{width:100%;height:4px;accent-color:var(--accent);cursor:pointer;background:#ffffff1a;border-radius:2px}.slider-value{color:#fff;text-align:right;min-width:48px;font-size:12px;font-weight:700}.card-button{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), #ffffff08), #ffffff08;color:#fff;width:100%;font:inherit;cursor:pointer;border:1px solid #ffffff24;border-radius:8px;margin-top:8px;padding:6px 10px;font-size:12px;font-weight:700;transition:transform .12s,background .12s}.card-button:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), #ffffff0d), #ffffff0d;transform:translateY(-1px)}.status-list{gap:8px;display:grid}.status-row{gap:4px;display:grid}.status-header{justify-content:space-between;align-items:flex-end;margin-bottom:6px;display:flex}.status-label-wrapper{align-items:center;gap:8px;display:flex}.status-key-hint{color:#ffffff80;background:#ffffff1a;border:1px solid #ffffff0d;border-radius:4px;padding:1px 5px;font-family:monospace;font-size:10px;font-weight:600}.status-label{color:#fff9;font-size:11px}.status-value{color:#fff;text-align:right;font-size:13px;font-weight:700}.status-slider{accent-color:#00e5ff;cursor:grab;touch-action:none;filter:drop-shadow(0 0 8px #00e5ff29);background:#ffffff1a;border-radius:2px;width:100%;height:4px;margin:0}.status-slider:active{cursor:grabbing}.status-slider:focus-visible{outline-offset:4px;outline:2px solid #00e5ffb8}.vector-list{flex-wrap:wrap;justify-content:center;gap:4px 8px;display:flex}.vector-item{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;transition:all .12s;display:flex}.vector-item:hover{background:#ffffff14;border-color:#ffffff29}.vector-item input[type=checkbox]{accent-color:#00e5ff;cursor:pointer;width:12px;height:12px;margin:0}.vector-label{color:#fffc;font-size:11px;font-weight:600}.dot{border-radius:50%;flex:none;width:6px;height:6px;display:inline-block}.floating-bottom{z-index:150;pointer-events:none;flex-direction:column;align-items:center;gap:10px;width:auto;min-width:480px;max-width:calc(100vw - 32px);display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.bottom-toolbar{-webkit-backdrop-filter:blur(20px);pointer-events:auto;background:#041427d1;border:1px solid #ffffff1f;border-radius:20px;align-items:center;gap:16px;padding:6px 16px;display:flex;box-shadow:0 8px 32px #0006,inset 0 1px 1px #ffffff1a}.toolbar-divider{background:#ffffff1a;width:1px;height:20px}.toolbar-zoom{white-space:nowrap;align-items:center;gap:12px;display:flex}.toolbar-zoom-label{color:#ffffff80;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:800}.toolbar-zoom input[type=range]{accent-color:#00e5ff;width:90px;height:4px}.toolbar-zoom-value{color:#00e5ff;text-align:right;min-width:40px;font-size:12px;font-weight:700}.map-widget{flex-direction:column;gap:12px;display:flex}.compass-widget,.zoom-widget,.minimap-frame{background:linear-gradient(#ffffff08,#ffffff04),#000d1d40;border:1px solid #ffffff1a;border-radius:14px}.compass-widget{--compass-tick-offset:-88px;--compass-label-offset:-14px;--wind-handle-offset:-88px;--current-handle-offset:-77px;justify-items:center;gap:12px;padding:12px 8px;display:grid}.compass-dial{background:radial-gradient(circle,#ffffff08 0%,#0000 70%);border:1px solid #ffffff1a;border-radius:50%;width:180px;height:180px;position:relative}.compass-track{pointer-events:none;border:1px solid #ffffff1a;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compass-track--wind{width:176px;height:176px}.compass-track--current{width:154px;height:154px}.compass-tick-label{color:#fffc;font-size:10px;font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compass-handle{cursor:grab;pointer-events:auto;z-index:10;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #00000080}.compass-handle:active{cursor:grabbing;transform:translate(-50%,-50%)scale(1.1)}.compass-handle--wind{background:#00e5ff;box-shadow:0 0 10px #00e5ff66}.compass-handle--current{background:#40d97b;box-shadow:0 0 10px #40d97b66}.compass-tick{background:#fff3;width:1px;height:6px;position:absolute;top:50%;left:50%}.compass-tick--major{background:#fff6;width:2px;height:10px}.compass-tick-label{color:#fff9;text-shadow:0 1px 2px #000c;font-size:10px;font-weight:800}.compass-arrow-value{color:#fff;white-space:nowrap;pointer-events:none;background:#0009;border:1px solid #ffffff1a;border-radius:4px;padding:1px 4px;font-size:9px;font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(0)}.compass-inner-dial{border:2px solid #ffffff4d;border-radius:50%;width:130px;height:130px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compass-data-overlay{pointer-events:none;z-index:5;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.compass-data-group{flex-direction:column;align-items:center;gap:2px;display:flex}.compass-data-item{flex-direction:column;align-items:center;display:flex}.compass-data-value{color:#fff;text-shadow:0 2px 4px #00000080;font-size:14px;font-weight:800}.compass-data-label{text-transform:uppercase;letter-spacing:.05em;opacity:.7;font-size:8px;font-weight:700}.compass-data-item--wind .compass-data-value{color:#00e5ff}.compass-data-item--water .compass-data-value{color:#40d97b}.button-group-row{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.auto-env-panel{background:#0003;border-radius:8px;align-items:center;gap:8px;margin-top:10px;padding:8px;display:flex}.difficulty-selector{flex:1;gap:4px;display:flex}.difficulty-btn{color:#fff9;cursor:pointer;background:#ffffff08;border:1px solid #ffffff1a;border-radius:6px;padding:6px;font-size:10px;font-weight:700;transition:all .2s}.difficulty-btn:hover{background:#ffffff14}.difficulty-btn.is-active{background:var(--accent);color:#000;border-color:var(--accent)}.auto-toggle-btn{white-space:nowrap;border-radius:6px;flex-shrink:0;width:auto;margin-top:0;padding:6px 12px;font-size:12px}.auto-toggle-btn.is-running{color:#fff;background:#ff4757;border-color:#ff4757}.compass-arrow,.compass-current-arrow{transform-origin:50% 92%;cursor:grab;pointer-events:auto;border-radius:999px;width:3px;height:48px;transition:none;position:absolute;top:50%;left:50%}.compass-arrow:active,.compass-current-arrow:active{cursor:grabbing}.compass-arrow:after,.compass-current-arrow:after{content:"";background:0 0;width:24px;height:60px;position:absolute;top:-15px;left:50%;transform:translate(-50%)}.compass-arrow{z-index:2;background:linear-gradient(#00e5ff 0% 50%,#ffffff1a 50%);transform:translate(-50%,-92%)rotate(180deg)}.compass-current-arrow{z-index:1;background:linear-gradient(#40d97b 0% 50%,#ffffff0d 50%);transform:translate(-50%,-92%)rotate(0)}.compass-arrow:before,.compass-current-arrow:before{content:"";border-left:6px solid #0000;border-right:6px solid #0000;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.compass-arrow:before{border-bottom:10px solid #00e5ff}.compass-current-arrow:before{border-bottom:10px solid #40d97b}.compass-center{z-index:3;background:#fff;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #ffffff80}.compass-label{color:#ffffffdb;text-align:center;font-size:10px;font-weight:700}.minimap-container{aspect-ratio:1;background:#0000004d;border:1px solid #ffffff1a;border-radius:8px;width:100%;position:relative;overflow:hidden}.minimap-container--integrated{aspect-ratio:1;background:var(--bg-glass);border:1px solid var(--border-glass);width:100%;box-shadow:none;pointer-events:auto;-webkit-backdrop-filter:blur(32px)saturate(180%);border-radius:24px;margin-top:auto;overflow:hidden}.minimap-svg{width:100%;height:100%;display:block}@media (height<=800px){.dock-panel{gap:6px}.card-header{padding:8px 12px 6px}.card-body{padding:8px 12px 10px}.card-section+.card-section{margin-top:8px}.compass-widget{--compass-tick-offset:-74px;--compass-label-offset:-12px;--wind-handle-offset:-74px;--current-handle-offset:-65px;gap:8px;padding:10px 4px}.compass-dial{width:150px;height:150px}.compass-track--wind{width:148px;height:148px}.compass-track--current{width:130px;height:130px}.compass-arrow{height:68px}.compass-current-arrow{height:60px}.compass-inner-dial{width:110px;height:110px}.compass-label{margin-top:-6px;font-size:11px}.compass-handle{width:14px;height:14px}.compass-tick-label{font-size:8px}.compass-center-info{gap:0}.compass-tws-value{font-size:14px}.compass-cur-value{font-size:10px}}@media (width<=1400px){.hud-dock{width:300px}}@media (width<=1040px){.hud-dock{width:280px}.floating-bottom{width:calc(100vw - 24px);min-width:0}.bottom-toolbar{flex-direction:column;gap:12px;padding:12px}.toolbar-divider{width:100%;height:1px}}@media (width<=720px){.dock-toggle-label{display:none}.slider-row,.slider-control{grid-template-columns:1fr}.slider-value{text-align:left}}