:root{--bg: #000000;--bg-alt: #0A0A0A;--surface: #1C1C1E;--surface-2: #2C2C2E;--surface-3: #3A3A3C;--line: rgba(255,255,255,0.1);--text: #FFFFFF;--muted: rgba(255,255,255,0.5);--muted-strong: rgba(255,255,255,0.75);--accent: #0A84FF;--accent-soft: rgba(10,132,255,0.15);--accent-bright: #409CFF;--primary: #FF375F;--primary-dark: #D70015;--secondary: #30D158;--success: #30D158;--warning: #FF9F0A;--surface-elevated: #3A3A3C;--text-primary: #FFFFFF;--text-secondary: rgba(255,255,255,0.6);--text-tertiary: rgba(255,255,255,0.4);--divider: rgba(255,255,255,0.1);--shadow: 0 8px 32px rgba(0,0,0,0.6);--danger: #FF453A;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--shadow-sm: 0 4px 16px rgba(0,0,0,0.3);--shadow-md: 0 12px 40px rgba(0,0,0,0.5);--transition: 240ms cubic-bezier(0.4,0,0.2,1);--font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;--font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;--font-condensed: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;--font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;--bp-sm: 480px;--bp-md: 768px;--bp-lg: 1024px;--touch-target: 44px;--blue: #0A84FF;--amber: #FF9F0A;--panel: var(--surface);--panel-2: var(--surface-2);--line-bright: rgba(255,255,255,0.15);--gold: var(--accent);--gold-dim: var(--accent-soft);--yellow: var(--accent);--yellow-glow: var(--accent-soft);--red: var(--danger);--brake: var(--danger);--green: var(--success);--apex: var(--accent);--accel: var(--success);--neutral: rgba(255,255,255,0.9);--text-dim: var(--muted-strong);--text-mute: var(--muted);--txt: var(--text);}*{box-sizing: border-box;}html{min-height: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-tap-highlight-color: transparent;}body{min-height: 100vh;background-color: var(--bg);color: var(--text);font-family: var(--font-body);line-height: 1.5;overflow-x: hidden;}.btn-pill, button, .nav-pill{min-height: var(--touch-target);padding: 10px 14px;}:focus{outline: none;}:focus-visible{outline: 3px solid rgba(10,132,255,0.5);outline-offset: 2px;border-radius: 6px;}@media (prefers-reduced-motion: reduce){*{animation-duration: 0.001ms !important;animation-iteration-count: 1 !important;transition-duration: 0.001ms !important;scroll-behavior: auto !important;}}.container, .page-wrapper{width: min(1100px, calc(100% - 32px));}@media (max-width: var(--bp-lg)){.container, .page-wrapper{width: calc(100% - 32px);}}@media (max-width: var(--bp-md)){.header, .topbar{padding: 16px;}.nav-pill{font-size: 0.95rem;padding: 12px;}.card-grid{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}}@media (max-width: var(--bp-sm)){.header, .topbar{padding: 12px;}.header-nav{position: static;margin-top: 12px;justify-content: center;width: 100%;}.hero, .page-hero{padding: 28px 12px;}.section-title{font-size: 1.2rem;}.card-num{font-size: 40px;top: 14px;right: 14px;}.nav-pill{padding: 10px 12px;}.zoom-hud, .legend, .optimizer-badge, .info-button{bottom: 14px;right: 14px;left: auto;}}.zoom-hud button, .legend button, .info-button{min-width: 40px;min-height: 40px;touch-action: manipulation;}img, svg, canvas{max-width: 100%;height: auto;display: block;}html{scroll-behavior: smooth;}.container, .page-wrapper{position: relative;z-index: 1;width: min(1200px, calc(100% - 40px));margin: 0 auto;}.container{padding: 0 20px 60px;}body, p, button, input, select, textarea, fieldset, legend{margin: 0;padding: 0;}a{color: inherit;text-decoration: none;}button, input, select, textarea{font: inherit;}input, select, textarea{width: 100%;padding: 12px 14px;border-radius: var(--radius-md);border: 1px solid rgba(255,255,255,0.08);background: rgba(255,255,255,0.04);color: var(--text);transition: border-color var(--transition), background var(--transition);}input:focus, select:focus, textarea:focus{outline: none;border-color: rgba(10,132,255,0.55);background: rgba(10,132,255,0.06);}button, .primary-btn, .secondary-btn, .nav-pill, .btn-pill{border-radius: var(--radius-md);transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);}button, .nav-pill, .btn-pill{min-height: var(--touch-target);padding: 10px 14px;}.card, .panel, .box, .sidebar, .track-card, .stat-card, .control-btn, .legend-content, .connection-banner, .loading-state, .error-state, .footer, .site-footer{background: var(--surface);border-radius: var(--radius-lg);border: 0.5px solid rgba(255,255,255,0.1);box-shadow: var(--shadow-sm);}.card, .panel, .box, .track-card, .stat-card, .control-btn{padding: 24px;}.card-grid{display: grid;gap: 20px;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}@media (max-width: var(--bp-md)){.card-grid{grid-template-columns: 1fr;}}@media (max-width: var(--bp-sm)){.container, .page-wrapper{width: calc(100% - 24px);}}.header, .topbar{position: relative;z-index: 1;display: flex;align-items: center;gap: 16px;padding: 24px 24px;background: rgba(28,28,30,0.88);border: none;border-bottom: 0.5px solid rgba(255,255,255,0.1);border-radius: var(--radius-lg);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);box-shadow: var(--shadow-sm);margin-bottom: 24px;flex-wrap: wrap;}.header{justify-content: space-between;}.hero, .page-hero{position: relative;padding: 64px 24px;margin-bottom: 32px;background: rgba(28,28,30,0.9);border: 0.5px solid rgba(255,255,255,0.08);border-radius: var(--radius-lg);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);}.topbar-title, .header-title, h1, h2, h3{margin: 0;}.header-title, .topbar-title, .page-title{font-family: var(--font-display);letter-spacing: 0.12em;text-transform: uppercase;color: var(--text);}.subtitle, .lead, .page-description{color: var(--muted);font-size: 0.95rem;}.header-nav, .footer-nav, .nav-group{display: flex;flex-wrap: wrap;gap: 8px;align-items: center;}.header-nav{z-index: 20;}.header .header-nav{position: static !important;margin-left: auto;align-self: flex-start;z-index: 20;}.topbar .header-nav{margin-left: auto;}.nav-brand{position: absolute;left: 20px;top: 50%;transform: translateY(-50%);font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;font-size: 14px;font-weight: 700;letter-spacing: -0.3px;color: rgba(255,255,255,0.9);text-decoration: none;white-space: nowrap;z-index: 1;}.nav-brand:hover{color: #fff;}.lap-sparkline{display: block;opacity: 0.85;}.nav-pill, .site-pill, .btn-pill{display: inline-flex;align-items: center;justify-content: center;gap: 6px;padding: 7px 14px;background: rgba(255,255,255,0.07);border: 0.5px solid rgba(255,255,255,0.12);color: rgba(255,255,255,0.85);text-decoration: none;border-radius: var(--radius-full);font-family: var(--font-body);font-size: 0.8rem;font-weight: 500;letter-spacing: 0.01em;text-transform: none;transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);}.nav-pill:hover, .btn-pill:hover, .nav-pill:focus-visible, .btn-pill:focus-visible{transform: translateY(-1px);background: rgba(10,132,255,0.15);border-color: rgba(10,132,255,0.35);color: var(--accent);}.nav-pill.active, .nav-pill[aria-current="page"]{background: var(--accent);border-color: var(--accent);color: #fff;cursor: default;}.card-grid{display: grid;gap: 20px;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}.card, .panel, .box{position: relative;display: flex;flex-direction: column;gap: 18px;padding: 24px;background: var(--surface);border-radius: var(--radius-lg);border: 0.5px solid rgba(255,255,255,0.1);box-shadow: var(--shadow-sm);}.card-tag, .panel-tag, .section-tag{font-family: var(--font-condensed);font-size: 0.75rem;letter-spacing: 0.2em;text-transform: uppercase;color: var(--accent);}.card-title, .panel-title, .section-title{font-family: var(--font-display);font-size: clamp(1.4rem, 2vw, 2.2rem);margin: 0;line-height: 1.05;}.card-desc, .panel-copy, .section-copy{color: var(--muted);line-height: 1.7;}.footer, .site-footer{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 12px;align-items: center;padding: 18px 24px;margin-top: 40px;background: var(--surface);border: 0.5px solid rgba(255,255,255,0.1);border-radius: var(--radius-lg);color: var(--muted);}.footer-link, .site-link{color: var(--muted);text-decoration: none;transition: color var(--transition);}.footer-link:hover, .site-link:hover{color: var(--text);}button, input, select, textarea{font: inherit;}input, select, textarea{width: 100%;padding: 12px 14px;border-radius: var(--radius-md);border: 1px solid rgba(255,255,255,0.08);background: rgba(255,255,255,0.04);color: var(--text);transition: border-color var(--transition), background var(--transition);}input:focus, select:focus, textarea:focus{outline: none;border-color: rgba(10,132,255,0.55);background: rgba(10,132,255,0.06);}button, .primary-btn, .secondary-btn{border: none;border-radius: var(--radius-md);padding: 12px 20px;cursor: pointer;transition: transform var(--transition), box-shadow var(--transition), background var(--transition);}.primary-btn{background: var(--accent);color: #fff;}.secondary-btn{background: rgba(255,255,255,0.06);color: var(--text);border: 1px solid rgba(255,255,255,0.12);}.primary-btn:hover, .secondary-btn:hover, button:hover{transform: translateY(-1px);}@media (max-width: 900px){.header, .topbar{flex-direction: column;align-items: stretch;}.page-wrapper, .container{width: calc(100% - 32px);}}body.remote-page{font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Roboto', sans-serif;background: var(--background);color: var(--text-primary);min-height: 100vh;min-height: -webkit-fill-available;display: flex;flex-direction: column;touch-action: manipulation;overflow-x: hidden;padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);}body.remote-page .connection-banner{background: rgba(0, 122, 255, 0.15);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-bottom: 0.5px solid rgba(0, 122, 255, 0.3);padding: 12px 20px;display: flex;align-items: center;gap: 12px;animation: slideDown 0.3s ease-out;}body.remote-page .connection-banner.connected{background: rgba(52, 199, 89, 0.15);border-bottom-color: rgba(52, 199, 89, 0.3);}body.remote-page .connection-dot{width: 8px;height: 8px;border-radius: 50%;background: var(--secondary);animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;flex-shrink: 0;}body.remote-page .connected .connection-dot{background: var(--success);animation: none;}body.remote-page .connection-text{font-size: 13px;font-weight: 500;line-height: 1.3;color: var(--text-primary);}body.remote-page .connection-text small{display: block;font-size: 11px;color: var(--text-secondary);font-weight: 400;margin-top: 2px;}body.remote-page .container{flex: 1;display: flex;flex-direction: column;overflow-y: auto;-webkit-overflow-scrolling: touch;}body.remote-page .header{padding: 20px 20px 16px;display: flex;justify-content: space-between;align-items: center;}body.remote-page .header h1{font-size: 34px;font-weight: 700;letter-spacing: -0.5px;}body.remote-page .status-pill{background: var(--surface-elevated);padding: 6px 12px;border-radius: 20px;display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 600;}body.remote-page .status-pill-dot{width: 6px;height: 6px;border-radius: 50%;background: var(--primary);}body.remote-page .connected .status-pill-dot{background: var(--success);}body.remote-page .stats-section, body.remote-page .control-section{padding: 0 16px 24px;}body.remote-page .stats-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;}body.remote-page .stat-card{background: var(--surface);border-radius: 16px;padding: 16px;position: relative;overflow: hidden;transition: transform 0.15s ease, background 0.15s ease;}body.remote-page .stat-card:active{transform: scale(0.97);background: var(--surface-elevated);}body.remote-page .stat-label{font-size: 13px;color: var(--text-secondary);font-weight: 500;margin-bottom: 8px;text-transform: uppercase;letter-spacing: 0.3px;}body.remote-page .stat-value{font-size: 28px;font-weight: 700;letter-spacing: -0.5px;font-variant-numeric: tabular-nums;}body.remote-page .stat-card:nth-child(4) .stat-value{color: var(--accent);}body.remote-page .section-header{font-size: 13px;color: var(--text-secondary);font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 12px;padding: 0 4px;}body.remote-page .playback-grid{display: grid;grid-template-columns: 1fr 2fr 1fr;gap: 12px;margin-bottom: 12px;}body.remote-page .control-btn{background: var(--surface);border: none;border-radius: 16px;color: var(--text-primary);padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 8px;min-height: 88px;font-family: inherit;transition: all 0.15s ease;position: relative;overflow: hidden;}body.remote-page .control-btn::before{content: '';position: absolute;inset: 0;background: rgba(255, 255, 255, 0.1);opacity: 0;transition: opacity 0.15s ease;}body.remote-page .control-btn:active::before{opacity: 1;}body.remote-page .control-btn:active{transform: scale(0.95);}body.remote-page .control-btn.primary{background: var(--primary);box-shadow: 0 4px 16px rgba(255, 59, 48, 0.3);}body.remote-page .control-btn.primary:active{background: var(--primary-dark);}body.remote-page .btn-icon{font-size: 32px;line-height: 1;}body.remote-page .btn-label{font-size: 12px;font-weight: 600;opacity: 0.9;}body.remote-page .quick-actions{display: grid;grid-template-columns: 1fr 1fr;gap: 12px;}body.remote-page .quick-btn{background: var(--surface);border: none;border-radius: 12px;color: var(--text-primary);padding: 14px;font-family: inherit;font-size: 15px;font-weight: 600;display: flex;align-items: center;justify-content: center;gap: 6px;transition: all 0.15s ease;}body.remote-page .quick-btn:active{transform: scale(0.95);background: var(--surface-elevated);}body.remote-page .seek-wrapper{background: var(--surface);border-radius: 16px;padding: 20px 16px;}body.remote-page .time-display{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;font-variant-numeric: tabular-nums;}body.remote-page .time-current{font-size: 17px;font-weight: 600;color: var(--text-primary);}body.remote-page .time-total{font-size: 15px;font-weight: 500;color: var(--text-secondary);}body.remote-page .seek-container{position: relative;padding: 16px 0;cursor: pointer;}body.remote-page .seek-track{width: 100%;height: 4px;background: rgba(255, 255, 255, 0.15);border-radius: 2px;position: relative;overflow: hidden;}body.remote-page .seek-progress{position: absolute;height: 100%;background: var(--primary);border-radius: 2px;width: 0%;transition: width 0.2s ease;}body.remote-page .seek-thumb{position: absolute;top: 50%;transform: translate(-50%, -50%);width: 28px;height: 28px;background: #FFFFFF;border-radius: 50%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);cursor: grab;transition: transform 0.15s ease;z-index: 10;}body.remote-page .seek-thumb:active{cursor: grabbing;transform: translate(-50%, -50%) scale(1.15);}body.remote-page .loading-state, body.remote-page .error-state{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px 24px;text-align: center;gap: 24px;}body.remote-page .spinner{width: 48px;height: 48px;border: 3px solid rgba(255, 255, 255, 0.1);border-top-color: var(--primary);border-radius: 50%;animation: spin 0.8s linear infinite;}body.remote-page .loading-text{font-size: 17px;color: var(--text-secondary);font-weight: 500;}body.remote-page .error-icon{font-size: 64px;}body.remote-page .error-title{font-size: 22px;font-weight: 700;letter-spacing: -0.3px;}body.remote-page .error-message{font-size: 15px;color: var(--text-secondary);line-height: 1.5;max-width: 280px;}body.remote-page .retry-btn{background: var(--primary);border: none;border-radius: 12px;color: var(--text-primary);padding: 14px 32px;font-family: inherit;font-size: 17px;font-weight: 600;margin-top: 8px;transition: all 0.15s ease;}body.remote-page .retry-btn:active{transform: scale(0.95);background: var(--primary-dark);}@media (max-width: 380px){body.remote-page .header h1{font-size: 28px;}body.remote-page .stat-value{font-size: 24px;}}@media (max-height: 700px){body.remote-page .header{padding: 16px 20px 12px;}body.remote-page .stats-section, body.remote-page .control-section{padding-bottom: 16px;}body.remote-page .control-btn{min-height: 76px;}}@keyframes slideDown{from{opacity: 0;transform: translateY(-100%);}to{opacity: 1;transform: translateY(0);}}@keyframes spin{to{transform: rotate(360deg);}}@keyframes pulse{0%, 100%{opacity: 1;}50%{opacity: 0.3;}}.nav-hamburger{display: none;background: rgba(255,255,255,0.07);border: 0.5px solid rgba(255,255,255,0.15);border-radius: 10px;cursor: pointer;align-items: center;justify-content: center;width: 36px;height: 36px;min-height: 36px;padding: 0;color: rgba(255,255,255,0.85);transition: background 240ms cubic-bezier(0.4,0,0.2,1), color 240ms cubic-bezier(0.4,0,0.2,1);flex-shrink: 0;}.nav-hamburger:hover{background: rgba(10,132,255,0.15);color: #0A84FF;}@media (max-width: 768px){.header-nav{flex-wrap: wrap;justify-content: flex-start;align-items: center;gap: 0;padding: 8px 12px;min-height: 52px;}.header-nav .nav-brand{position: static;transform: none;order: 1;margin-right: auto;padding: 6px 0;}.nav-hamburger{display: flex;order: 2;}.header-nav .nav-pill{display: none;order: 3;width: 100%;border-radius: 10px;justify-content: flex-start;font-size: 0.9rem;padding: 12px 14px;margin-top: 4px;}.header-nav.is-open{padding-bottom: 8px;}.header-nav.is-open .nav-pill{display: flex;}.header-nav a[href="fastest-lap-projection.html"]:not(.active),.header-nav a[href="brake.html"]:not(.active){display: none !important;}}