:root{--charcoal: #1c1c1c;--snow: #f9f9fa;--deep-ocean: #0e4d68;--signal-red: #e6332a;--grey-900: #1c1c1c;--grey-700: #424242;--grey-500: #6b6b6b;--grey-400: #989898;--grey-200: #c8c7c8;--grey-50: #f9f9fa;--summit-green: #3a9d7c;--caution-amber: #EFA00B;--beacon-blue: #03b3fd;--ocean-abyss: var(--charcoal);--ocean-deep: var(--charcoal);--ocean-mid: #242424;--ocean-surface: var(--grey-700);--ocean-light: var(--deep-ocean);--accent-teal: var(--deep-ocean);--accent-teal-glow: rgba(14, 77, 104, .6);--accent-cyan: var(--beacon-blue);--accent-amber: var(--caution-amber);--accent-amber-glow: rgba(239, 160, 11, .6);--accent-coral: var(--signal-red);--accent-purple: var(--deep-ocean);--text-primary: var(--snow);--text-secondary: var(--grey-200);--text-tertiary: var(--grey-500);--text-accent: var(--deep-ocean);--glass-bg: rgba(28, 28, 28, .9);--glass-border: var(--grey-700);--glass-highlight: rgba(255, 255, 255, .05);--glass-blur: 20px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font-display: "Outfit", -apple-system, sans-serif;--font-body: "IBM Plex Sans", -apple-system, sans-serif;--font-data: "Space Mono", "SF Mono", monospace;--font-mono: var(--font-data);--font-serif: var(--font-display);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--transition-fast: .1s var(--ease-out);--transition-base: .2s var(--ease-in-out);--transition-slow: .3s var(--ease-in-out);--transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);--shadow-sm: 0 1px 2px rgba(0,0,0,.3);--shadow-md: 0 4px 6px rgba(0,0,0,.4);--shadow-lg: 0 10px 15px rgba(0,0,0,.5)}@keyframes beacon-pulse{0%,to{opacity:1;box-shadow:0 0 8px var(--beacon-blue)}50%{opacity:.6;box-shadow:0 0 16px var(--beacon-blue)}}.beacon-pulse{animation:beacon-pulse 2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--beacon-blue);outline-offset:2px}.panel button:focus-visible,.panel input:focus-visible{outline:2px solid var(--snow);outline-offset:2px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}#wake-canvas,#boats-canvas,#d3-overlay{will-change:transform;transform:translateZ(0);backface-visibility:hidden}html,body{height:100%;overflow:hidden}body{font-family:var(--font-body);background:var(--charcoal);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--grey-700);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--grey-500)}#app{height:100%;width:100%;position:relative}#map-container{position:absolute;inset:0}#map{width:100%;height:100%}#d3-overlay{position:absolute;inset:0;pointer-events:none;overflow:visible}#d3-overlay .boat-marker{pointer-events:all;cursor:pointer}#wake-canvas{position:absolute;inset:0;pointer-events:none;z-index:5}#boats-canvas{position:absolute;inset:0;pointer-events:none;z-index:10}.mapboxgl-ctrl-logo,.mapboxgl-ctrl-attrib{opacity:.4;transition:opacity var(--transition-base)}.mapboxgl-ctrl-logo:hover,.mapboxgl-ctrl-attrib:hover{opacity:.8}.mapboxgl-ctrl-group{background:var(--charcoal)!important;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--grey-700)!important;border-radius:8px!important;box-shadow:var(--shadow-md)!important}.mapboxgl-ctrl-group button{border-color:var(--grey-700)!important}.mapboxgl-ctrl-group button:hover{background-color:var(--grey-700)!important}.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{filter:invert(1) brightness(.8)}#header{position:absolute;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-lg);background:linear-gradient(180deg,var(--glass-bg) 0%,transparent 100%);z-index:100;animation:slideDown .6s ease .5s both}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.header-left{display:flex;align-items:center;gap:var(--space-lg)}.logo{display:flex;align-items:center}.logo-icon{width:36px;height:36px;border-radius:4px;overflow:hidden}.race-info h1{font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.race-route{font-family:var(--font-data);font-size:.65rem;color:var(--grey-500);text-transform:uppercase;letter-spacing:.1em}.header-center{display:flex;align-items:center;gap:var(--space-lg)}.live-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:#03b3fd1a;border:1px solid rgba(3,179,253,.3);border-radius:100px}.live-indicator.paused{background:#efa00b1a;border-color:#efa00b4d}.live-indicator.paused .live-dot{background:var(--caution-amber);box-shadow:none;animation:none}.live-indicator.paused .live-text{color:var(--caution-amber)}.live-dot{width:8px;height:8px;background:var(--beacon-blue);border-radius:50%;animation:beacon-pulse 2s ease-in-out infinite;box-shadow:0 0 8px var(--beacon-blue)}.live-dot.small{width:6px;height:6px}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.live-text{font-family:var(--font-data);font-size:.65rem;font-weight:600;letter-spacing:.1em;color:var(--beacon-blue)}.current-time{font-family:var(--font-data);font-size:.8rem;color:var(--grey-200)}.header-right{display:flex;align-items:center;gap:var(--space-sm)}.header-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--grey-700);border-radius:8px;color:var(--grey-400);cursor:pointer;transition:all var(--transition-base)}.header-btn:hover{background:var(--grey-700);color:var(--snow);border-color:var(--grey-500)}.header-btn.active{background:var(--deep-ocean);border-color:var(--deep-ocean);color:var(--snow)}.header-btn svg{width:18px;height:18px}.panel{position:absolute;background:var(--charcoal);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--grey-700);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;transition:transform var(--transition-slow),opacity var(--transition-slow);pointer-events:auto}#leaderboard,#timeline,#ocean-stats{transition:opacity .4s ease}.panel.hidden{opacity:0;pointer-events:none}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--grey-700);background:#ffffff05}.panel-header h2{font-family:var(--font-display);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--grey-400)}.panel-content{padding:var(--space-md);max-height:calc(100vh - 250px);overflow-y:auto}.panel-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-tertiary);font-size:1.25rem;cursor:pointer;transition:color var(--transition-fast)}.panel-close:hover{color:var(--text-primary)}#leaderboard{top:80px;right:var(--space-lg);width:320px;animation:slideInRight .6s ease .7s both}#leaderboard.hidden{transform:translate(calc(100% + var(--space-lg)))}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.team-count{font-family:var(--font-data);font-size:.65rem;color:var(--grey-500)}#leaderboard-list{display:flex;flex-direction:column;gap:var(--space-xs)}.leaderboard-item{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:#ffffff05;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all var(--transition-base);animation:fadeInUp .3s ease both}.leaderboard-item:hover{background:var(--grey-700);border-color:var(--grey-500)}.leaderboard-item.selected{background:#0e4d6833;border-color:var(--deep-ocean)}.leaderboard-item.comparing{border-color:var(--caution-amber);box-shadow:0 0 0 1px var(--caution-amber) inset}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.team-rank{font-family:var(--font-data);font-size:.9rem;font-weight:700;color:var(--grey-500);text-align:center}.team-rank.top-3{color:var(--caution-amber)}.team-info{min-width:0}.team-name{font-family:var(--font-display);font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.team-meta{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-data);font-size:.65rem;color:var(--grey-500)}.team-speed{color:var(--beacon-blue)}.team-stats{text-align:right}.team-dtf{font-family:var(--font-data);font-size:.85rem;font-weight:700;color:var(--snow)}.team-dtf-label{font-family:var(--font-data);font-size:.6rem;color:var(--grey-500);text-transform:uppercase}.team-color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}#comparison-panel{top:80px;right:360px;width:400px}#comparison-panel.hidden{transform:translate(20px)}.comparison-select{text-align:center;padding:var(--space-xl);color:var(--grey-500);font-size:.85rem;font-family:var(--font-body)}.comparison-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.comparison-team{padding:var(--space-md);background:#ffffff05;border-radius:8px;border-left:3px solid var(--team-color, var(--deep-ocean))}.comparison-team-name{font-family:var(--font-display);font-size:.9rem;font-weight:600;margin-bottom:var(--space-sm)}.comparison-stats{display:flex;flex-direction:column;gap:var(--space-xs)}.comparison-stat{display:flex;justify-content:space-between;font-size:.75rem}.comparison-stat-label{color:var(--grey-500)}.comparison-stat-value{font-family:var(--font-data);color:var(--snow)}.comparison-chart{height:150px;background:#ffffff05;border-radius:8px;padding:var(--space-md)}.tooltip{position:absolute;z-index:1000;background:var(--charcoal);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--grey-700);border-radius:12px;padding:var(--space-md);min-width:180px;box-shadow:var(--shadow-lg);pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast)}.tooltip.hidden{opacity:0;transform:translateY(5px)}.tooltip-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--grey-700)}.tooltip-rank{font-family:var(--font-data);font-size:.75rem;font-weight:700;color:var(--deep-ocean);background:#0e4d6833;padding:2px 6px;border-radius:4px}.tooltip-name{font-family:var(--font-display);font-weight:600;font-size:.9rem}.tooltip-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.tooltip-stat{display:flex;flex-direction:column;gap:2px}.stat-label{font-family:var(--font-display);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey-500)}.stat-value{font-family:var(--font-data);font-size:.85rem;font-weight:700}.stat-value.speed{color:var(--beacon-blue)}#timeline{position:absolute;bottom:var(--space-lg);left:50%;transform:translate(-50%);width:min(800px,calc(100% - var(--space-xl) * 2));border-radius:16px;animation:slideUp .6s ease .9s both}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.timeline-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--grey-700)}.timeline-controls{display:flex;align-items:center;gap:var(--space-sm)}.timeline-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--grey-700);border-radius:8px;color:var(--grey-400);cursor:pointer;transition:all var(--transition-base)}.timeline-btn:hover{background:var(--grey-700);color:var(--snow)}.timeline-btn.active{background:var(--deep-ocean);border-color:var(--deep-ocean);color:var(--snow)}.timeline-btn svg{width:14px;height:14px}.timeline-btn .icon-pause,.timeline-btn.playing .icon-play{display:none}.timeline-btn.playing .icon-pause{display:block}#live-btn{width:auto;padding:0 var(--space-md);gap:var(--space-xs);font-family:var(--font-data);font-size:.65rem;font-weight:700;letter-spacing:.05em}.speed-controls{display:flex;align-items:center;gap:var(--space-sm)}.speed-label{font-family:var(--font-display);font-size:.65rem;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em}.speed-btn{padding:var(--space-xs) var(--space-sm);background:transparent;border:1px solid var(--grey-700);border-radius:4px;font-family:var(--font-data);font-size:.7rem;color:var(--grey-400);cursor:pointer;transition:all var(--transition-base)}.speed-btn:hover{border-color:var(--grey-500);color:var(--snow)}.speed-btn.active{background:var(--deep-ocean);border-color:var(--deep-ocean);color:var(--snow)}.timeline-time{font-family:var(--font-data);font-size:.8rem;display:flex;align-items:center;gap:var(--space-xs)}.time-current{color:var(--snow)}.time-separator,.time-total{color:var(--grey-500)}.timeline-track{position:relative;height:48px;padding:var(--space-md) var(--space-lg)}.timeline-progress{position:absolute;top:50%;left:var(--space-lg);right:var(--space-lg);height:4px;transform:translateY(-50%);background:var(--grey-700);border-radius:2px;overflow:hidden}.timeline-progress:after{content:"";position:absolute;top:0;left:0;height:100%;width:var(--progress, 100%);background:var(--deep-ocean);border-radius:2px;transition:width .1s linear}#timeline-slider{position:absolute;top:50%;left:var(--space-lg);right:var(--space-lg);transform:translateY(-50%);width:calc(100% - var(--space-lg) * 2);height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;z-index:2}#timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--snow);border-radius:50%;box-shadow:0 2px 8px #0006,0 0 0 2px var(--deep-ocean);cursor:grab;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}#timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 12px #00000080,0 0 0 3px var(--deep-ocean)}#timeline-slider::-webkit-slider-thumb:active{cursor:grabbing}#timeline-slider::-moz-range-thumb{width:16px;height:16px;background:var(--snow);border:none;border-radius:50%;box-shadow:0 2px 8px #0006,0 0 0 2px var(--deep-ocean);cursor:grab}.timeline-markers{position:absolute;top:50%;left:var(--space-lg);right:var(--space-lg);transform:translateY(-50%);height:4px;pointer-events:none}#ocean-stats{position:absolute;bottom:100px;left:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);animation:fadeIn .6s ease 1.1s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.stat-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--charcoal);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--grey-700);border-radius:8px}.stat-icon{font-size:.9rem;color:var(--deep-ocean)}.stats-overlay .stat-value{font-family:var(--font-data);font-size:1rem;font-weight:700}.stat-unit{font-family:var(--font-body);font-size:.65rem;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em}#coords-display{position:absolute;bottom:var(--space-lg);left:var(--space-lg);padding:var(--space-xs) var(--space-sm);background:var(--charcoal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--grey-700);border-radius:4px;font-family:var(--font-data);font-size:.7rem;color:var(--grey-500)}.team-trail{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#glow)}.boat-marker{transition:transform .3s ease}.boat-marker:hover{transform:scale(1.3)}.boat-icon{filter:drop-shadow(0 0 6px var(--team-color, var(--deep-ocean)))}.boat-pulse{animation:boatPulse 2s ease-in-out infinite}@keyframes boatPulse{0%,to{opacity:.8;r:8}50%{opacity:0;r:20}}.svg-filters{position:absolute;width:0;height:0}@media(max-width:1024px){#leaderboard{width:280px}#comparison-panel{right:300px;width:350px}#timeline{width:calc(100% - var(--space-lg) * 2)}.speed-controls{display:none}}@media(max-width:768px){#header{padding:0 var(--space-md)}.header-center{display:none}.race-info h1{font-size:.9rem}#leaderboard{top:70px;right:var(--space-md);width:260px}#comparison-panel,#ocean-stats,.timeline-time{display:none}}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.barchart-overlay{position:fixed;inset:0;z-index:500;pointer-events:auto;transition:opacity .3s ease}.barchart-overlay.hidden{pointer-events:none;opacity:0;visibility:hidden}#morph-canvas{position:absolute;inset:0;z-index:1}.barchart-container{position:absolute;inset:0;z-index:2;padding:80px 60px 100px;pointer-events:auto;opacity:0;transition:opacity .4s ease;overflow-y:auto}.barchart-container.visible{opacity:1}.barchart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--grey-700)}.barchart-header h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--snow)}.barchart-legend{display:flex;align-items:center;gap:var(--space-xl);font-family:var(--font-data);font-size:.75rem;color:var(--grey-500)}.legend-distance{color:var(--deep-ocean);font-weight:700}.progress-markers{position:relative;height:24px;margin-left:200px;margin-right:120px;margin-bottom:var(--space-md)}.progress-markers .marker{position:absolute;transform:translate(-50%);font-family:var(--font-data);font-size:.65rem;color:var(--grey-500)}.progress-markers .marker:before{content:"";position:absolute;top:16px;left:50%;width:1px;height:8px;background:var(--grey-700)}.bars-container{display:flex;flex-direction:column;gap:8px}.bar-row{display:grid;grid-template-columns:50px 140px 1fr 120px;align-items:center;gap:var(--space-md);padding:var(--space-sm) 0;animation:barSlideIn .5s ease both}@keyframes barSlideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.bar-rank{font-family:var(--font-data);font-size:.9rem;font-weight:700;color:var(--grey-500);text-align:right}.bar-rank.top-3{color:var(--caution-amber)}.bar-name{font-family:var(--font-display);font-size:.85rem;font-weight:500;color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.bar-track{position:relative;height:24px;background:var(--grey-700);border-radius:4px;overflow:hidden}.bar-fill{position:relative;height:100%;border-radius:4px;transition:width .5s ease}.bar-boat{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.8);animation:boatPulseBar 2s ease-in-out infinite}@keyframes boatPulseBar{0%,to{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 6px transparent}}.bar-stats{display:flex;flex-direction:column;gap:2px;text-align:left;padding-left:var(--space-md)}.bar-dtf{font-family:var(--font-data);font-size:.85rem;font-weight:700;color:var(--snow)}.bar-speed{font-family:var(--font-data);font-size:.7rem;color:var(--beacon-blue)}.view-toggle-btn{position:relative;display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:transparent;border:1px solid var(--grey-700);border-radius:8px;color:var(--grey-400);font-family:var(--font-display);font-size:.7rem;font-weight:500;letter-spacing:.05em;cursor:pointer;transition:all var(--transition-base)}.view-toggle-btn:hover{background:var(--grey-700);color:var(--snow);border-color:var(--grey-500)}.view-toggle-btn.active{background:var(--deep-ocean);border-color:var(--deep-ocean);color:var(--snow)}.view-toggle-btn svg{width:16px;height:16px}.barchart-close{position:fixed;top:var(--space-lg);right:var(--space-lg);z-index:600;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--charcoal);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--grey-700);border-radius:50%;color:var(--grey-400);font-size:1.5rem;cursor:pointer;transition:all var(--transition-base);opacity:0;pointer-events:none}.barchart-overlay:not(.hidden) .barchart-close{opacity:1;pointer-events:auto}.barchart-close:hover{background:var(--grey-700);color:var(--snow);transform:scale(1.1)}@media(max-width:1024px){.barchart-container{padding:80px 30px 100px}.bar-row{grid-template-columns:40px 100px 1fr 100px}.progress-markers{margin-left:150px;margin-right:110px}}@media(max-width:768px){.barchart-container{padding:70px 20px 80px}.bar-row{grid-template-columns:30px 80px 1fr 80px;gap:var(--space-sm)}.bar-name,.bar-dtf{font-size:.75rem}.progress-markers,.barchart-legend{display:none}}