@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root{--bg:#101014;--panel:#18181f;--line:#363640;--ink:#f4f4f6;--dim:#a0a0ad;--accent:#ff443b;--amber:#ffd34e;--red:#ff443b;--cyan:#57d8db;--pink:#ff72a2;font-family:'IBM Plex Mono',monospace;color:var(--ink);background:var(--bg);font-synthesis:none}body{min-height:100vh;background:var(--bg);font-size:12px}.console{max-width:1320px;margin:auto;padding:28px clamp(14px,3.4vw,48px) 18px}.masthead{display:flex;align-items:center;gap:18px;border-top:5px solid var(--accent);border-bottom:1px solid var(--line);padding:20px 0}.wordmark{font:italic 800 42px/.9 'Barlow Condensed',sans-serif;color:var(--ink);text-decoration:none;letter-spacing:-2px}.wordmark span{color:var(--red);font-size:20px;letter-spacing:-4px}.masthead-title{flex:1}.eyebrow,.panel-heading,.toolbar label,.load-button,.metrics>div>span,.telemetry-name,.speed-select,footer,.map-scale{font-size:9px;letter-spacing:.12em}.eyebrow{color:var(--dim)}h1{font:italic 800 38px/.95 'Barlow Condensed',sans-serif;letter-spacing:.02em;margin-top:5px}.data-mode{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:9px;letter-spacing:.1em}.data-mode i{width:7px;height:7px;background:var(--accent);border-radius:1px}.toolbar{display:grid;grid-template-columns:1fr 1.25fr 1fr 1fr auto;gap:10px;padding:17px 0 12px;align-items:end}.toolbar label,.speed-select{display:flex;flex-direction:column;gap:6px;color:var(--dim)}select{background:#202027;color:var(--ink);border:1px solid var(--line);padding:9px 25px 9px 10px;font:11px 'IBM Plex Mono',monospace;border-radius:0;min-width:0}.load-button,.share-button{border:1px solid var(--accent);color:var(--ink);background:transparent;padding:10px 13px;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.06em;cursor:pointer;white-space:nowrap}.load-button{background:var(--accent);border-radius:0 0 10px 0}.load-button:hover,.share-button:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}.load-button span{margin-left:12px}.status{min-height:32px;padding:9px 11px;border-left:3px solid var(--accent);background:#202027;color:#c6c6ce;font-size:9px;letter-spacing:.07em;line-height:1.5}.status.error{border-color:var(--red);color:#ff9a86}.race-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr);gap:12px;margin-top:12px}.panel{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:0 14px 0 0;background:var(--panel);overflow:hidden}.panel-heading{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--line);color:var(--dim)}.panel-heading span:first-child{color:var(--ink);font-weight:600}.track-wrap{height:360px;position:relative;overflow:hidden;padding:10px 18px 26px;background-color:#131319;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:32px 32px}#track{width:100%;height:100%;overflow:visible}#track-outline{fill:none;stroke:#686874;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.23}#track-outline.active{stroke:var(--ink);opacity:.63;stroke-width:7}#markers circle{stroke:var(--bg);stroke-width:5}.map-legend{position:absolute;left:14px;bottom:12px;display:flex;gap:16px;font-size:9px}.map-legend span,.telemetry-name{display:flex;align-items:center;gap:6px}.map-legend i,.telemetry-name i{height:8px;width:8px;border-radius:50%;background:var(--cyan)}.legend-b i,.driver-b .telemetry-name i{background:var(--pink)}.map-scale{position:absolute;right:13px;bottom:13px;color:var(--dim);font-size:8px}.gap-panel{display:flex;flex-direction:column}.drivers-summary{display:flex;justify-content:space-between;padding:8px 17px;color:var(--dim);font-size:9px}.driver-chip{display:flex;align-items:center;gap:6px}.driver-chip span{color:var(--cyan);font-weight:700}.driver-chip.b span{color:var(--pink)}.driver-chip b{color:var(--ink)}.gap-note{margin:auto 17px 15px;color:var(--dim);font-size:9px;line-height:1.6;text-align:center}.telemetry{margin-top:12px}.telemetry-columns{display:grid;grid-template-columns:1fr 1fr}.telemetry-driver{padding:13px 16px 15px}.telemetry-driver+ .telemetry-driver{border-left:1px solid var(--line)}.telemetry-name{margin-bottom:13px}.telemetry-name b{font-size:10px;letter-spacing:.07em}.telemetry-name>span{margin-left:auto;color:var(--dim)}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.metrics>div{min-width:0}.metrics>div>span{display:block;color:var(--dim);font-size:8px;margin-bottom:7px}.metrics strong{font:600 26px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}.metrics strong small{font:9px 'IBM Plex Mono',monospace;color:var(--dim)}.metrics .gear{font-size:23px;color:var(--amber)}.bar{height:3px;background:var(--line);margin-top:6px}.bar i{display:block;width:0;height:100%;background:var(--cyan);transition:width .15s}.bar.brake i{background:var(--red)}.playback{margin-top:12px;padding:12px;display:flex;align-items:center;gap:14px}.play-button{width:34px;height:34px;flex:none;border:1px solid var(--accent);background:var(--accent);color:var(--ink);cursor:pointer}.timeline{flex:1;min-width:60px}.timeline-labels{display:flex;justify-content:space-between;color:var(--dim);font-size:8px;margin-bottom:7px}input[type=range]{width:100%;height:3px;display:block;appearance:none;background:var(--line);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:1px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:1px;background:var(--accent)}input:disabled{opacity:.4}.speed-select{flex-direction:row;align-items:center;gap:8px;white-space:nowrap}.speed-select select{padding:7px}.share-button{font-size:9px;padding:9px}footer{display:flex;justify-content:space-between;color:var(--dim);font-size:8px;padding:17px 2px 0;letter-spacing:.1em}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:760px){.console{padding:18px 12px 14px}.masthead{gap:12px;padding-bottom:14px}.wordmark{font-size:30px}.eyebrow{font-size:7px}h1{font-size:28px}.data-mode{font-size:8px}.toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.toolbar label{font-size:8px}.toolbar label:nth-child(2){grid-column:2}.load-button{grid-column:1/-1}.race-grid{grid-template-columns:1fr;gap:9px;margin-top:9px}.track-wrap{height:280px}.gap-panel{display:flex}.gap-panel .panel-heading{grid-column:1/-1}.drivers-summary{padding:12px}.gap-note{margin:0 12px 12px;font-size:9px}.metrics{gap:5px}.telemetry-driver{padding:11px 9px}.metrics strong{font-size:17px}.metrics>div>span{font-size:7px}.metrics strong small{font-size:7px}.telemetry-name{font-size:8px}.playback{gap:8px;padding:9px}.share-button{padding:9px 7px;font-size:8px}.speed-select{font-size:8px;gap:5px}.speed-select select{padding:7px 5px}.play-button{width:32px;height:32px}footer{font-size:7px}}
@media(max-width:370px){.metrics{grid-template-columns:repeat(3,1fr);row-gap:12px}.track-wrap{height:235px}.share-button{letter-spacing:0}.data-mode{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.loading{padding:12px 0}.loading[hidden]{display:none}.loading-label{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:var(--amber);margin-bottom:8px}progress{display:block;width:100%;height:7px;appearance:none;border:0;background:var(--line)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--amber)}progress::-moz-progress-bar{background:var(--amber)}
.race-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}.race-details span{display:block;font-size:8px;color:var(--dim);margin-bottom:5px}.race-details strong{font:600 24px 'Barlow Condensed',sans-serif}.race-details small{display:block;font-size:9px;color:var(--amber);margin-top:4px}.timing-age,.event-note{font-size:9px;color:var(--dim);line-height:1.6}.timing-age{min-height:29px;margin:9px 0 13px}.timeline-events{position:relative;height:18px;margin:0 6px 6px}.event-marker{position:absolute;top:0;transform:translateX(-50%);width:14px;height:18px;padding:0;border:0;background:transparent;color:var(--amber);cursor:pointer}.event-marker::after{content:'';display:block;width:3px;height:12px;background:currentColor;margin:auto}.events{margin-top:12px}.event-note{margin:12px 13px}.event-list{display:flex;flex-wrap:wrap;gap:8px;padding:0 13px 13px;color:var(--dim);font-size:10px;max-height:180px;overflow:auto}.event-jump{background:transparent;border:1px solid var(--line);color:var(--ink);padding:9px;text-align:left;font:10px 'IBM Plex Mono',monospace;cursor:pointer}.event-jump:hover,.event-jump.active{border-color:var(--amber);color:var(--amber)}
@media(max-width:600px){.telemetry-columns{grid-template-columns:1fr}.telemetry-driver+ .telemetry-driver{border-left:0;border-top:1px solid var(--line)}.playback{flex-wrap:wrap}.timeline{min-width:180px}.race-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.race-details strong{font-size:20px}.race-details span{font-size:7px}.race-details small{font-size:8px}}

.sector-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 0;border-top:1px solid var(--line)}.sector-times span,.sector-times small{display:block;font-size:8px;color:var(--dim)}.sector-times strong{display:block;margin:6px 0;font-size:17px;font-variant-numeric:tabular-nums}.sector-times small{font-size:7px;line-height:1.5}.sector-yellow{color:var(--amber)}.sector-green{color:#85df78}.sector-purple{color:#c394ff}.sector-note{font-size:8px;color:var(--dim);line-height:1.6;margin:0 0 14px}
.race-clock{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 12px;color:var(--dim);font-size:9px;letter-spacing:.08em}.race-clock strong{font:600 clamp(48px,5vw,72px)/1 'Barlow Condensed',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}.race-start{margin:0 16px 12px;padding:10px;border:1px solid var(--line);color:var(--ink);background:transparent;font:9px 'IBM Plex Mono',monospace;cursor:pointer}.race-start:disabled{border-color:var(--line);color:var(--dim);cursor:default}.race-start-marker{color:var(--cyan);width:36px;font:8px 'IBM Plex Mono',monospace}.timeline-events{height:28px}.race-start-marker::after{height:16px}

.telemetry-name{border-left:3px solid var(--cyan);padding:6px 9px;background:#ffffff04}.driver-b .telemetry-name{border-color:var(--pink)}.telemetry-name b{font:italic 700 18px 'Barlow Condensed',sans-serif}.race-details strong{font-variant-numeric:tabular-nums}.sector-times>div{border-left:2px solid var(--line);padding-left:8px}.race-start:not(:disabled):hover{border-color:var(--accent);background:var(--accent)}
@media(max-width:370px){.data-mode{font-size:7px}.eyebrow{letter-spacing:.06em}.map-scale{font-size:6px}}
.control-bands{position:relative;height:30px;margin:0 6px 5px;background:repeating-linear-gradient(to bottom,transparent 0 9px,var(--line) 9px 10px)}.control-band{position:absolute;min-width:3px;height:8px;padding:0;border:0;background:currentColor;cursor:pointer}.control-yellow{color:var(--amber)}.control-sc{color:#ff9d42}.control-vsc{color:var(--cyan)}.control-red{color:var(--red)}.control-band.control-yellow{top:0}.control-band.control-sc,.control-band.control-vsc{top:10px}.control-band.control-red{top:20px}.control-band:hover,.control-band:focus-visible{outline:2px solid var(--ink);z-index:1}.control-status{display:flex;flex-wrap:wrap;gap:8px;padding:13px;line-height:1.6}.control-badge{border:1px solid currentColor;padding:4px 8px;font-weight:600}.control-note{width:100%;font-size:9px;color:var(--dim);overflow-wrap:anywhere}
.radio{margin-top:12px}.radio-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.radio-driver{min-width:0;padding:13px}.radio-driver+.radio-driver{border-left:1px solid var(--line)}.radio-state{font-size:9px;color:var(--dim);margin:12px 0;line-height:1.6}.radio-list{max-height:380px;overflow:auto}.radio-clip{border-left:3px solid var(--cyan);background:#57d8db08;padding:10px;margin-bottom:10px}.driver-b .radio-clip{border-color:var(--pink);background:#ff72a208}.radio-clip-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.radio-speaker{font-size:8px;color:var(--dim);letter-spacing:.06em}.radio-clip audio{display:block;width:100%;height:36px;margin:10px 0;color-scheme:dark}.radio-link{font-size:8px;color:var(--cyan)}.driver-b .radio-link{color:var(--pink)}.play-button:disabled{opacity:.4;cursor:default}
.radio-auto{display:flex;align-items:center;gap:10px;margin:12px 13px;font-size:10px;cursor:pointer}.radio-auto input{width:18px;height:18px;accent-color:var(--accent)}
@media(max-width:600px){.radio-columns{grid-template-columns:1fr}.radio-driver+.radio-driver{border-left:0;border-top:1px solid var(--line)}}
