:root{--color-page:#07151d;--color-text:#f3f7f8;--color-text-muted:#a9bac2;--color-panel:#10232d;--color-panel-border:#254451;--color-sky:#9ec8d0;--color-light:#fff6dd;--color-water:#0b6177;--color-water-detail:#8bcbd4;--color-hull:#f3ede1;--color-deck:#c8924b;--color-dock:#8a755f;--color-piling:#55463b;--color-fender:#1c2730;--color-wake:#b9e5e7;--color-ghost:#7de4ed;--color-force-arrow:#ffb24a;--color-pivot-marker:#ff4f91;--opacity-water-detail:.14;--opacity-ghost:.42;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--font-sans:Inter, ui-sans-serif, system-ui, sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html,body,#app{width:100%;min-width:100%;min-height:100%;margin:0}body{background:var(--color-page);color:var(--color-text);font-family:var(--font-sans)}.app-shell{width:100vw;height:100dvh;position:relative;overflow:hidden}.scene-host,.scene-host canvas{width:100%;height:100%;display:block}.app-title{top:var(--space-6);left:var(--space-6);z-index:1;padding:var(--space-3) var(--space-4);border:1px solid var(--color-panel-border);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-panel) 88%, transparent);margin:0;position:absolute;box-shadow:0 .5rem 1.25rem #0003}.app-title h1,.app-title p{margin:0}.app-title-heading{justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.mobile-setup-toggle,.hud-details-toggle{display:none}.app-title h1{letter-spacing:.08em;text-transform:uppercase;font-size:1rem}.app-title p{margin-top:var(--space-1);color:var(--color-text-muted);font-size:.8125rem}.marina-controls button,.wind-controls button,.boat-controls button,.camera-controls button,.coach-controls button,.debug-controls button,.mode-controls button,.touch-toggle-controls button{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--color-wake);border-radius:var(--radius-sm);background:var(--color-water);color:var(--color-text);cursor:pointer;font-family:var(--font-sans);font-size:.75rem;font-weight:700;display:block}.marina-controls button:hover,.marina-controls button:focus-visible,.marina-controls button[aria-pressed=true],.wind-controls button:hover,.wind-controls button:focus-visible,.wind-controls button[aria-pressed=true],.boat-controls button:hover,.boat-controls button:focus-visible,.boat-controls button[aria-pressed=true],.camera-controls button:hover,.camera-controls button:focus-visible,.camera-controls button[aria-pressed=true],.coach-controls button:hover,.coach-controls button:focus-visible,.coach-controls button[aria-pressed=true],.debug-controls button:hover:not(:disabled),.debug-controls button:focus-visible,.debug-controls button[aria-pressed=true],.mode-controls button:hover,.mode-controls button:focus-visible,.mode-controls button[aria-pressed=true],.touch-toggle-controls button:hover,.touch-toggle-controls button:focus-visible,.touch-toggle-controls button[aria-pressed=true]{background:var(--color-panel-border)}.marina-controls,.wind-controls,.boat-controls,.camera-controls,.coach-controls,.debug-controls,.mode-controls,.touch-toggle-controls{gap:var(--space-1);margin-top:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}.marina-controls button,.wind-controls button,.boat-controls button,.camera-controls button,.coach-controls button,.debug-controls button,.mode-controls button,.touch-toggle-controls button{padding:var(--space-1) var(--space-2);border-color:var(--color-panel-border);background:var(--color-page);margin:0;font-size:.6875rem}.boat-controls,.marina-controls,.mode-controls{grid-template-columns:repeat(2,1fr)}.coach-controls,.touch-toggle-controls{grid-template-columns:1fr}.debug-controls{grid-template-columns:repeat(2,1fr)}.debug-controls button:disabled{cursor:not-allowed;opacity:.45}.debug-controls output{color:var(--color-text-muted);font-family:var(--font-mono);text-align:center;grid-column:1/-1;font-size:.625rem}.mode-controls[hidden]{display:none}.touch-controls{right:max(var(--space-6), env(safe-area-inset-right));bottom:max(var(--space-6), env(safe-area-inset-bottom));left:max(var(--space-6), env(safe-area-inset-left));z-index:2;pointer-events:none;position:absolute}.touch-controls[hidden]{display:none}.touch-direct,.touch-docking{justify-content:space-between;align-items:flex-end;gap:var(--space-4);display:flex}.touch-direct[hidden],.touch-docking[hidden]{display:none}.touch-left-cluster,.touch-helm,.touch-pad,.touch-yaw,.touch-thrusters{pointer-events:auto}.touch-left-cluster{align-items:end;gap:var(--space-2);grid-template-columns:auto auto;display:grid}.touch-throttle{position:relative}.touch-control,.touch-thrusters button{color:var(--color-text);touch-action:none;-webkit-user-select:none;user-select:none}.touch-control{--touch-offset:0%;align-items:center;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--color-wake);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-panel) 94%, transparent);outline-offset:.2rem;display:grid;position:relative;box-shadow:0 .5rem 1.25rem #0000004d}.touch-control:focus-visible,.touch-thrusters button:focus-visible{outline:2px solid var(--color-force-arrow)}.touch-control-label{color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.625rem;font-weight:700}.touch-track{border:1px solid var(--color-panel-border);border-radius:var(--radius-lg);background:var(--color-page);display:block;position:relative;overflow:hidden}.touch-thumb,.touch-pad-thumb{border:2px solid var(--color-page);background:var(--color-wake);border-radius:50%;width:1.35rem;height:1.35rem;display:block;position:absolute;box-shadow:0 .15rem .4rem #00000073}.touch-lever{grid-row:span 2;grid-template-rows:auto 8rem auto;justify-items:center;min-width:4.25rem}.touch-lever .touch-track{width:1.9rem;height:8rem}.touch-lever .touch-track:before,.touch-helm .touch-track:before,.touch-yaw .touch-track:before{background:var(--color-panel-border);content:"";height:1px;position:absolute;top:50%;left:0;right:0}.touch-lever .touch-thumb{top:calc(50% + var(--touch-offset));left:50%;transform:translate(-50%,-50%)}.touch-gear{pointer-events:none;border:1px solid var(--color-panel-border);border-radius:var(--radius-sm);background:var(--color-page);min-width:2.6rem;min-height:2.6rem;color:var(--color-wake);font:700 .875rem var(--font-mono);place-items:center;display:grid}.touch-thrusters{gap:var(--space-1);display:grid}.touch-thruster-label{color:var(--color-text-muted);letter-spacing:.08em;text-align:center;text-transform:uppercase;font-size:.625rem;font-weight:700}.touch-thruster-arrow{font:1rem/1 var(--font-mono)}.touch-thrusters button{border:1px solid var(--color-panel-border);border-radius:var(--radius-sm);background:var(--color-page);min-width:3rem;min-height:2.75rem;font:700 .6875rem var(--font-sans)}.touch-thrusters button[aria-pressed=true]{border-color:var(--color-force-arrow);background:var(--color-water)}.touch-helm,.touch-yaw{grid-template-columns:auto 10rem auto;min-height:4.25rem}.touch-helm .touch-track,.touch-yaw .touch-track{width:10rem;height:1.9rem}.touch-helm .touch-thumb,.touch-yaw .touch-thumb{top:50%;left:calc(50% + var(--touch-offset));transform:translate(-50%,-50%)}.touch-pad{--touch-surge-offset:0%;--touch-sway-offset:0%;border:1px solid var(--color-wake);border-radius:var(--radius-md);background:linear-gradient(var(--color-panel-border), var(--color-panel-border)) center / 1px 100% no-repeat, linear-gradient(90deg, var(--color-panel-border), var(--color-panel-border)) center / 100% 1px no-repeat, color-mix(in srgb, var(--color-panel) 94%, transparent);width:9.5rem;height:9.5rem;display:block;box-shadow:0 .5rem 1.25rem #0000004d}.touch-pad-thumb{top:calc(50% + var(--touch-surge-offset));left:calc(50% + var(--touch-sway-offset));transform:translate(-50%,-50%)}.touch-pad-axis{color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.625rem;font-weight:700;position:absolute}.touch-pad-ahead,.touch-pad-astern{left:50%;transform:translate(-50%)}.touch-pad-ahead{top:var(--space-2)}.touch-pad-astern{bottom:var(--space-2)}.touch-pad-port,.touch-pad-starboard{top:50%;transform:translateY(-50%)}.touch-pad-port{left:var(--space-2)}.touch-pad-starboard{right:var(--space-2)}.hud{top:var(--space-6);right:var(--space-6);z-index:1;gap:var(--space-2);min-width:18rem;padding:var(--space-3);border:1px solid var(--color-panel-border);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-panel) 88%, transparent);grid-template-columns:repeat(2,minmax(7rem,1fr));display:grid;position:absolute;box-shadow:0 .5rem 1.25rem #0003}.hud-readout{align-items:center;gap:var(--space-2);min-height:2rem;padding:var(--space-2) var(--space-3);border:1px solid var(--color-panel-border);border-radius:var(--radius-sm);background:var(--color-page);grid-template-columns:1fr auto;display:grid}.hud-readout output{color:var(--color-text);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;font-size:.875rem}.hud-label{color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem;font-weight:700}.hud-readout-compact output{text-align:center;min-width:1.5rem}.hud-wind,.hud-current{grid-template-columns:1fr auto auto}.drivetrain-hud{gap:var(--space-2);grid-column:1/-1;grid-template-columns:repeat(3,1fr);display:grid}.drivetrain-hud[hidden]{display:none}.drivetrain-hud .hud-readout{grid-template-columns:1fr}.drivetrain-hud .hud-readout output{text-align:left}.wind-telltale,.current-indicator{color:var(--color-wake);font-family:var(--font-mono);transform-origin:50%;display:inline-block}.controls-help{bottom:var(--space-6);left:var(--space-6);z-index:1;width:18rem;padding:var(--space-3) var(--space-4);border:1px solid var(--color-panel-border);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-panel) 88%, transparent);position:absolute;box-shadow:0 .5rem 1.25rem #0003}.controls-help h2{margin:0 0 var(--space-2);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}.controls-help dl{gap:var(--space-1);margin:0;display:grid}.controls-help dl div{align-items:center;gap:var(--space-2);grid-template-columns:4.5rem 1fr;display:grid}.controls-help [hidden]{display:none}.controls-help dt,.controls-help dd{margin:0}.controls-help dt{color:var(--color-text-muted);font-size:.75rem}.controls-help dd{color:var(--color-text);text-align:right;font-size:.75rem}.controls-help kbd{min-width:1.4rem;padding:var(--space-1);border:1px solid var(--color-panel-border);border-radius:var(--radius-sm);background:var(--color-page);font-family:var(--font-mono);text-align:center;font-size:.6875rem;line-height:1;display:inline-block}.steering-legend dd,.coach-legend dd{justify-content:flex-end;align-items:center;gap:var(--space-1);display:flex}.force-swatch{border-radius:var(--radius-sm);background:var(--color-force-arrow);width:.8rem;height:.15rem}.pivot-swatch{border:.15rem solid var(--color-pivot-marker);border-radius:50%;width:.55rem;height:.55rem}.command-vector,.actual-vector{border-radius:var(--radius-sm);width:1rem;height:.15rem;display:inline-block}.command-vector{background:var(--color-wake);opacity:.45}.actual-vector{background:var(--color-deck)}.pause-banner{z-index:2;padding:var(--space-3) var(--space-6);border:1px solid var(--color-panel-border);border-radius:var(--radius-lg);background:var(--color-panel);letter-spacing:.12em;text-transform:uppercase;font-size:1rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 .5rem 1.25rem #0003}.pause-banner[hidden]{display:none}.curriculum{right:var(--space-6);bottom:var(--space-6);z-index:1;width:18rem;padding:var(--space-3) var(--space-4);border:1px solid var(--color-panel-border);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-panel) 88%, transparent);position:absolute;box-shadow:0 .5rem 1.25rem #0003}.coach-guidance{top:var(--space-6);z-index:1;width:clamp(18rem,100vw - 38rem,22rem);padding:var(--space-3) var(--space-4);border:1px solid var(--color-force-arrow);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-panel) 92%, transparent);position:absolute;left:50%;transform:translate(-50%);box-shadow:0 .5rem 1.25rem #0003}.coach-guidance[hidden]{display:none}.coach-guidance-heading{justify-content:space-between;align-items:baseline;gap:var(--space-3);display:flex}.coach-guidance h2,.coach-guidance p{margin:0}.coach-guidance h2{color:var(--color-force-arrow);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}.coach-guidance-heading span{color:var(--color-text-muted);font:.6875rem var(--font-mono);text-align:right}.coach-guidance p{margin-top:var(--space-2);font-size:.8125rem;line-height:1.35}.curriculum h2,.curriculum p{margin:0}.curriculum h2{letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}.curriculum p{margin-top:var(--space-1);color:var(--color-text-muted);font-size:.6875rem}.curriculum ol{gap:var(--space-1);margin:var(--space-2) 0 0;padding:0;list-style:none;display:grid}.curriculum button{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2);border:1px solid var(--color-panel-border);border-radius:var(--radius-sm);background:var(--color-page);color:var(--color-text);cursor:pointer;font-family:var(--font-sans);text-align:left;grid-template-columns:auto 1fr auto;display:grid}.curriculum button:hover,.curriculum button:focus-visible,.curriculum button[aria-pressed=true]{border-color:var(--color-wake);background:var(--color-panel-border)}.curriculum button strong,.curriculum button small{display:block}.curriculum button strong{font-size:.75rem}.curriculum button small{color:var(--color-text-muted);margin-top:.1rem;font-size:.625rem}.level-number{background:var(--color-water);width:1.5rem;height:1.5rem;font:700 .6875rem var(--font-mono);border-radius:50%;place-items:center;display:grid}.level-status{color:var(--color-text-muted);font-size:.625rem;font-weight:700}.level-status.is-complete{color:var(--color-wake)}.results-card{z-index:3;width:min(24rem,100vw - 2rem);padding:var(--space-6);border:1px solid var(--color-wake);border-radius:var(--radius-lg);background:var(--color-panel);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1rem 3rem #00000059}.results-card[hidden]{display:none}.results-card h2,.results-kicker,.results-card dl{margin:0}.results-card h2{margin-bottom:var(--space-4);font-size:1.25rem}.results-kicker{color:var(--color-wake);letter-spacing:.1em;text-transform:uppercase;font-size:.6875rem;font-weight:700}.results-card dl{gap:var(--space-2);display:grid}.results-card dl>div,.results-overall{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--color-panel-border);border-radius:var(--radius-sm);background:var(--color-page);grid-template-columns:1fr auto;display:grid}.results-card dt,.results-card dd{margin:0}.results-card dt,.results-overall span{color:var(--color-text-muted);font-size:.75rem}.results-card dd{align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:.8125rem;display:flex}.results-card strong{background:var(--color-water);width:1.5rem;height:1.5rem;color:var(--color-text);border-radius:50%;place-items:center;display:grid}.results-overall{margin-top:var(--space-3);border-color:var(--color-wake)}.results-overall output{font-family:var(--font-mono);font-weight:700}.results-card button{width:100%;margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--color-wake);border-radius:var(--radius-sm);background:var(--color-water);color:var(--color-text);cursor:pointer;font:700 .8125rem var(--font-sans)}.results-card button:hover,.results-card button:focus-visible{background:var(--color-panel-border)}@media (width<=44rem),(pointer:coarse){.app-title{top:max(var(--space-3), env(safe-area-inset-top));right:max(var(--space-3), env(safe-area-inset-right));left:max(var(--space-3), env(safe-area-inset-left));width:min(25rem, calc(100vw - 2 * var(--space-3)));max-height:calc(100dvh - max(var(--space-3), env(safe-area-inset-top)) - var(--space-3));background:color-mix(in srgb, var(--color-panel) 94%, transparent);overflow:auto}.mobile-setup-toggle{align-items:center;gap:var(--space-1);min-width:2.75rem;min-height:2.75rem;padding:var(--space-2);border:1px solid var(--color-panel-border);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-page) 86%, transparent);color:var(--color-text);font:700 .6875rem var(--font-sans);grid-template-columns:auto auto;display:grid}.app-title[data-mobile-setup=closed]{width:auto;padding:var(--space-1);border-color:color-mix(in srgb, var(--color-wake) 60%, transparent);background:color-mix(in srgb, var(--color-panel) 76%, transparent);right:auto;overflow:visible}.app-title[data-mobile-setup=closed] .app-title-copy,.app-title[data-mobile-setup=closed] .setup-panel{display:none}.app-title[data-mobile-setup=closed] .mobile-setup-toggle{background:0 0;border-color:#0000}.setup-panel button{min-height:2.5rem}.app-title[data-mobile-setup=open]~.hud{display:none}.hud{top:max(var(--space-3), env(safe-area-inset-top));right:max(var(--space-3), env(safe-area-inset-right));gap:var(--space-1);width:min(25rem, calc(100vw - 6.5rem - env(safe-area-inset-left) - env(safe-area-inset-right)));min-width:0;padding:var(--space-2);background:color-mix(in srgb, var(--color-panel) 72%, transparent);grid-template-columns:repeat(2,minmax(0,1fr));bottom:auto;left:auto}.hud-readout{min-height:2rem;padding:var(--space-1) var(--space-2);background:color-mix(in srgb, var(--color-page) 86%, transparent);border:0}.hud-readout output{font-size:.75rem}.hud[data-hud-details=closed] .hud-secondary,.hud .drivetrain-hud{display:none}.hud[data-hud-details=open] .hud-secondary,.hud[data-hud-details=open] .drivetrain-hud:not([hidden]){display:grid}.drivetrain-hud{gap:var(--space-1)}.hud-details-toggle{min-height:2.25rem;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--color-panel-border) 72%, transparent);color:var(--color-text-muted);font:700 .625rem var(--font-sans);border:0;grid-column:1/-1;display:block}.controls-help,.curriculum{display:none}.coach-guidance{top:auto;bottom:calc(11.75rem + env(safe-area-inset-bottom));width:min(28rem,100vw - 2rem)}.touch-controls{right:max(var(--space-3), env(safe-area-inset-right));bottom:max(var(--space-3), env(safe-area-inset-bottom));left:max(var(--space-3), env(safe-area-inset-left))}.touch-direct,.touch-docking,.touch-left-cluster{gap:var(--space-2)}.touch-control{background:color-mix(in srgb, var(--color-panel) 82%, transparent);box-shadow:0 .35rem 1rem #00000038}.touch-lever{grid-template-rows:auto 7rem auto;min-width:3.75rem}.touch-lever .touch-track{height:7rem}.touch-gear{border-radius:999px;min-width:2rem;min-height:2rem;font-size:.75rem;position:absolute;top:1.35rem;right:-.45rem;box-shadow:0 .2rem .55rem #00000059}.touch-thrusters button{width:3.25rem;min-width:3.25rem;min-height:3.25rem;padding:var(--space-1);background:color-mix(in srgb, var(--color-page) 88%, transparent);place-items:center;display:grid}.touch-thrusters button span:last-child{color:var(--color-text-muted);text-transform:uppercase;font-size:.5625rem}.touch-helm,.touch-yaw{grid-template-columns:auto 8rem auto;min-height:3.75rem}.touch-helm .touch-track,.touch-yaw .touch-track{width:clamp(6.5rem,27vw,8rem)}.touch-pad{width:8rem;height:8rem}.touch-docking{align-items:center}}