html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.telemetry-analysis-page { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@property --throttle-arc {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --brake-arc {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.telemetry-analysis-page [hidden] { display: none !important; }
.controls button[data-telemetry-section].is-active { color: #fff; border-color: var(--red); background: var(--red); }

.telemetry-analysis-page .app { min-height: 100vh; overflow: visible; }
.telemetry-analysis-page .app > header { position: sticky; z-index: 90; top: 0; flex: 0 0 auto; }

.openf1-widget-board.grid-stack {
  flex: none;
  display: block;
  width: 100%;
  max-width: none;
  margin-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  padding: 0 18px;
}

.openf1-widget-board .grid-stack-item-content {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 8px;
}

.openf1-widget-board .panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
}

.openf1-widget-board .panel > .panel-head { flex: 0 0 auto; }
.openf1-widget-board [data-openf1-widget="race-schedule"] { display: grid; }
.openf1-widget-board .grid-stack-item:has([data-openf1-widget="race-timeline"]) > .grid-stack-item-content,
.openf1-widget-board [data-openf1-widget="race-timeline"] { overflow: visible; }
.openf1-widget-board .grid-stack-item:has(.event-filter-toggle[aria-expanded="true"]) { z-index: 40 !important; }
.openf1-widget-board [data-openf1-widget="race-timeline"] > .panel-head { position: relative; z-index: 2; }
.openf1-widget-board [data-openf1-widget="race-timeline"] [data-event-list] {
  max-height: none;
  overflow: auto;
}

.openf1-widget-board .track-wrap,
.openf1-widget-board .table-scroll,
.openf1-widget-board .list,
.openf1-widget-board .strategy-list,
.openf1-widget-board .fastest-list,
.openf1-widget-board .telemetry-leaderboard,
.openf1-widget-board .timing-board-scroll,
.openf1-widget-board .pit-panel,
.openf1-widget-board .panel > .cards {
  min-height: 0;
  flex: 1 1 auto;
}

.openf1-widget-board .track-wrap { min-height: 0; }
.openf1-widget-board #trackCanvas { width: 100%; height: 100%; min-height: 0; }
.openf1-widget-board #speedChart { width: 100%; height: 100%; min-height: 0; }
.openf1-widget-board .table-scroll { max-height: none; }
.openf1-widget-board .telemetry-leaderboard { max-height: none; }
.openf1-widget-board [data-openf1-widget="team-radio"] [data-team-radio-list] { max-height: none; }
.openf1-widget-board .list,
.openf1-widget-board .strategy-list,
.openf1-widget-board .fastest-list,
.openf1-widget-board .telemetry-leaderboard,
.openf1-widget-board .timing-board-scroll,
.openf1-widget-board .pit-panel,
.openf1-widget-board .panel > .cards {
  overflow: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable;
}

.openf1-widget-board .pit-panel > .cards { padding: 0; }

.openf1-widget-board :is(
  .table-scroll,
  .list,
  .strategy-list,
  .fastest-list,
  .timing-board-scroll,
  .pit-panel,
  .grid-position-list,
  .driver-comparison-dashboard,
  .driver-telemetry-dashboard,
  .panel > .cards
) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.openf1-widget-board :is(
  .table-scroll,
  .list,
  .strategy-list,
  .fastest-list,
  .timing-board-scroll,
  .pit-panel,
  .grid-position-list,
  .driver-comparison-dashboard,
  .driver-telemetry-dashboard,
  .panel > .cards
)::-webkit-scrollbar { width: 8px; height: 8px; }

.openf1-widget-board :is(
  .table-scroll,
  .list,
  .strategy-list,
  .fastest-list,
  .timing-board-scroll,
  .pit-panel,
  .grid-position-list,
  .driver-comparison-dashboard,
  .driver-telemetry-dashboard,
  .panel > .cards
)::-webkit-scrollbar-track { background: transparent; }

.openf1-widget-board :is(
  .table-scroll,
  .list,
  .strategy-list,
  .fastest-list,
  .timing-board-scroll,
  .pit-panel,
  .grid-position-list,
  .driver-comparison-dashboard,
  .driver-telemetry-dashboard,
  .panel > .cards
)::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: transparent; background-clip: padding-box; }

.openf1-widget-board :is(
  .table-scroll,
  .list,
  .strategy-list,
  .fastest-list,
  .timing-board-scroll,
  .pit-panel,
  .grid-position-list,
  .driver-comparison-dashboard,
  .driver-telemetry-dashboard,
  .panel > .cards
).is-scrolling { scrollbar-color: rgba(151, 160, 173, .72) transparent; }

.openf1-widget-board :is(
  .table-scroll,
  .list,
  .strategy-list,
  .fastest-list,
  .timing-board-scroll,
  .pit-panel,
  .grid-position-list,
  .driver-comparison-dashboard,
  .driver-telemetry-dashboard,
  .panel > .cards
).is-scrolling::-webkit-scrollbar-thumb { background: rgba(151, 160, 173, .72); background-clip: padding-box; }

.track-profile-panel { min-width: 0; }
.track-profile-body { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.track-profile-identity { min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 35%); align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.track-profile-copy { min-width: 0; display: grid; align-content: center; gap: 4px; }
.track-profile-copy > span { color: var(--red); font-size: 9px; font-weight: 800; }
.track-profile-copy > strong { overflow: hidden; color: var(--text); font-size: 19px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.track-profile-copy > small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.track-profile-identity img { display: block; width: 100%; height: 68px; object-fit: contain; object-position: center; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .38)); cursor: zoom-in; }
.track-profile-identity img:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.track-profile-identity img[hidden] { display: none; }
.track-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.track-profile-stats > div { min-width: 0; min-height: 58px; display: grid; align-content: center; gap: 3px; padding: 8px 10px; border-right: 1px solid var(--line); }
.track-profile-stats > div:last-child { border-right: 0; }
.track-profile-stats span { color: var(--muted); font-size: 9px; }
.track-profile-stats strong { overflow: hidden; color: var(--text); font-size: 15px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.track-profile-stats small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.track-profile-history { min-height: 48px; display: grid; grid-template-columns: .8fr 1.4fr .8fr; border-bottom: 1px solid var(--line); background: #14171c; }
.track-profile-history > div { min-width: 0; display: grid; align-content: center; justify-items: center; gap: 3px; padding: 7px 10px; border-right: 1px solid var(--line); text-align: center; }
.track-profile-history > div:last-child { border-right: 0; }
.track-profile-history span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.track-profile-history strong { overflow: hidden; max-width: 100%; color: #eef2f7; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.track-profile-history .is-speed-record strong { color: #53d1b0; }
.track-profile-history small { overflow: hidden; max-width: 100%; color: #8f9aaa; font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.track-profile-records { min-height: 62px; flex: 1 1 62px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.track-profile-records[hidden], .track-profile-record-card[hidden] { display: none; }
.track-profile-records.has-single-record { grid-template-columns: minmax(0, 1fr); }
.track-profile-record-card { --record-color: var(--red); min-width: 0; display: grid; align-content: center; justify-items: center; gap: 3px; margin: 0; padding: 7px 14px; border-right: 1px solid var(--line); background: #17191e; text-align: center; }
.track-profile-record-card:last-child { border-right: 0; }
.track-profile-record-card.is-qualifying { --record-color: #b887ff; }
.track-profile-record-card > div { min-width: 0; display: grid; justify-items: center; gap: 2px; }
.track-profile-record-card span { color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.track-profile-record-card strong { color: var(--record-color); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-profile-record-card p { margin: 0; color: #d2d8e2; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.track-profile-record-card small { color: #8f9aaa; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }

body.is-track-image-open { overflow: hidden; }
.track-image-lightbox { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 20px; }
.track-image-lightbox[hidden] { display: none; }
.track-image-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; background: rgba(3, 4, 6, .86); cursor: zoom-out; }
button.track-image-lightbox-backdrop:hover,
button.track-image-lightbox-backdrop:focus-visible,
button.track-image-lightbox-backdrop:active { border: 0; background: rgba(3, 4, 6, .86); outline: 0; }
.track-image-lightbox-card { position: relative; z-index: 1; width: min(1080px, calc(100vw - 40px)); max-height: calc(100svh - 40px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid #3a404a; border-radius: 8px; background: #111318; box-shadow: 0 28px 80px rgba(0, 0, 0, .62); }
.track-image-lightbox-head { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 16px; border-bottom: 1px solid #303640; background: #181b20; }
.track-image-lightbox-head strong { min-width: 0; overflow: hidden; color: #f2f4f8; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.track-image-lightbox-close { width: 34px; height: 34px; display: grid; place-items: center; flex: none; padding: 0; }
.track-image-lightbox-close svg { width: 18px; height: 18px; }
.track-image-lightbox-stage { min-height: 260px; display: grid; place-items: center; overflow: auto; padding: clamp(18px, 4vw, 48px); background: #0d0f13; }
.track-image-lightbox-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 150px); object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .46)); }

@media (max-width: 560px) {
  .track-image-lightbox { padding: 10px; }
  .track-image-lightbox-card { width: calc(100vw - 20px); max-height: calc(100svh - 20px); }
  .track-image-lightbox-stage { min-height: 220px; padding: 16px; }
  .track-image-lightbox-stage img { max-height: calc(100svh - 110px); }
}

.grid-position-panel { min-width: 0; }
.grid-position-list { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; column-gap: 18px; row-gap: 4px; align-content: start; flex: 1 1 auto; margin: 0; padding: 14px 12px 28px; overflow: auto; list-style: none; background: #0f1115; }
.grid-position-row { position: relative; grid-column: var(--grid-column); grid-row: var(--grid-row); min-width: 0; display: grid; grid-template-rows: 28px 86px minmax(42px, auto); justify-items: center; align-content: start; padding: 0 3px; background: transparent; }
.grid-position-number { z-index: 2; align-self: end; color: #f5f7fb; font-size: 28px; font-style: italic; font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums; text-shadow: 0 3px 12px rgba(0,0,0,.5); }
.grid-position-frame { position: relative; width: min(100%, 186px); height: 82px; display: block; margin-top: 4px; }
.grid-position-frame::before { content: ""; position: absolute; z-index: 0; inset: 0; border: 3px solid rgba(247,249,252,.96); border-bottom: 0; border-radius: 11px 11px 0 0; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.grid-position-avatar { position: absolute; z-index: 1; inset: 8px 10px 0; display: flex; align-items: end; justify-content: center; overflow: hidden; color: var(--team-color, #dfe5ee); font-size: 19px; font-weight: 900; }
.grid-position-avatar img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 8px rgba(0,0,0,.44)); }
.grid-position-avatar.is-fallback { inset: 12px auto auto 50%; width: 58px; height: 58px; align-items: center; border: 2px solid color-mix(in srgb, var(--team-color, #7f8794) 74%, #fff); border-radius: 50%; background: color-mix(in srgb, var(--team-color, #7f8794) 22%, #15181d); transform: translateX(-50%); }
.grid-position-driver { z-index: 2; min-width: 0; width: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; padding-top: 11px; text-align: center; }
.grid-position-driver b { max-width: 100%; overflow: hidden; color: #f4f6fa; font-size: 10px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.grid-position-driver small { max-width: 100%; overflow: hidden; color: var(--team-color, var(--muted)); font-size: 10px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
@container (min-width: 540px) {
  .grid-position-list { grid-auto-rows: 194px; column-gap: 30px; padding-inline: 20px; }
  .grid-position-row { grid-template-rows: 32px 100px minmax(48px, auto); }
  .grid-position-number { font-size: 34px; }
  .grid-position-frame { max-width: 220px; height: 96px; }
  .grid-position-avatar { inset: 9px 12px 0; }
  .grid-position-avatar.is-fallback { inset: 17px auto auto 50%; }
  .grid-position-driver { padding-top: 12px; }
  .grid-position-driver b { font-size: 12px; }
  .grid-position-driver small { font-size: 11px; }
}

@container (max-width: 350px) {
  .grid-position-list { grid-auto-rows: 158px; column-gap: 10px; padding-inline: 8px; }
  .grid-position-row { grid-template-rows: 25px 78px minmax(42px, auto); }
  .grid-position-number { font-size: 24px; }
  .grid-position-frame { height: 74px; margin-top: 4px; }
  .grid-position-avatar { inset: 7px 8px 0; }
  .grid-position-avatar.is-fallback { inset: 8px auto auto 50%; width: 54px; height: 54px; }
  .grid-position-driver { gap: 3px; padding-top: 10px; }
  .grid-position-driver b, .grid-position-driver small { font-size: 9px; }
}

@container (max-width: 520px) {
  .track-profile-identity { grid-template-columns: minmax(0, 1fr) 104px; min-height: 60px; padding: 8px 12px; }
  .track-profile-copy > strong { font-size: 16px; }
  .track-profile-identity img { height: 44px; }
  .track-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track-profile-stats > div { min-height: 46px; gap: 2px; padding: 6px 9px; }
  .track-profile-stats > div:nth-child(2) { border-right: 0; }
  .track-profile-stats > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .track-profile-history { min-height: 46px; grid-template-columns: .75fr 1.5fr .75fr; }
  .track-profile-history > div { gap: 2px; padding: 4px 7px; }
  .track-profile-history strong { font-size: 13px; }
  .track-profile-records { min-height: 80px; }
  .track-profile-record-card { padding: 8px 10px; }
  .track-profile-record-card > div { gap: 2px; }
  .track-profile-record-card strong { font-size: 16px; }
}

@container (max-width: 350px) {
  .track-profile-identity { grid-template-columns: minmax(0, 1fr); }
  .track-profile-identity img { display: none; }
  .track-profile-history > div { padding-inline: 5px; }
  .track-profile-history span { font-size: 8px; }
  .track-profile-history strong { font-size: 12px; }
  .track-profile-record-card { padding-inline: 7px; }
}

@container (max-width: 560px) {
  .openf1-widget-board [data-openf1-widget="driver-input"] > .cards,
  .openf1-widget-board [data-openf1-widget="selected-pit"] .cards,

  .openf1-widget-board .panel > .cards {
    gap: 8px;
    padding: 10px;
  }

  .openf1-widget-board .metric { padding: 9px; }
  .openf1-widget-board .metric label { margin-bottom: 4px; }
  .openf1-widget-board .metric strong { font-size: 20px; }
  .openf1-widget-board .bar { height: 6px; margin-top: 7px; }

  .openf1-widget-board .fastest-list { gap: 4px; padding: 8px; }
  .openf1-widget-board .telemetry-fastest-row { min-height: 41px; padding: 6px 8px; grid-template-columns: 68px minmax(0, 1fr) auto; }

  .openf1-widget-board .pit-panel { gap: 8px; padding: 10px; }
  .openf1-widget-board .pit-summary { min-height: 40px; padding: 8px; }
  .openf1-widget-board .pit-time { font-size: 22px; }
}

.timeline {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 14px;
  left: 18px;
  border: 1px solid rgba(123, 134, 150, .32);
  border-radius: 8px;
  background: rgba(17, 19, 24, .72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transform: translateY(0);
  opacity: 1;
  transition: transform 360ms cubic-bezier(.22, .8, .24, 1), opacity 260ms ease 70ms, border-color 180ms ease;
  will-change: transform, opacity;
}

.timeline.is-auto-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, calc(100% + 30px), 0);
}

body[data-telemetry-section="data"] [data-playback-bar] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .timeline { transition-duration: 1ms; }
}

.play-icon-button {
  width: 38px;
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.play-icon-button svg {
  width: 17px;
  height: 17px;
}

.download-progress {
  position: fixed;
  /* Keep the home logo and all header controls available while replay assets load. */
  z-index: 9;
  pointer-events: none;
  top: 82px;
  right: 18px;
  left: 18px;
  width: auto;
  display: grid;
  gap: 8px;
  padding: 11px 16px 12px;
  border: 1px solid rgba(255, 64, 87, .58);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  background: rgba(22, 24, 29, .98);
  box-shadow: var(--shadow);
}
.download-progress[hidden] { display: none; }
.download-progress > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: #e6eaf0; font-size: 12px; font-weight: 700; }
.download-progress output { flex: none; color: #ff6679; font-size: 13px; font-variant-numeric: tabular-nums; }
.download-progress progress { width: 100%; height: 6px; accent-color: var(--red); }

@media (max-width: 1240px) {
  .download-progress { top: 132px; }
}

@media (max-width: 480px) {
  .download-progress { top: 126px; right: 12px; left: 12px; padding-inline: 12px; }
}

.is-session-dialog-open { overflow: hidden; }
.session-dialog { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 24px; overscroll-behavior: contain; }
.session-dialog[hidden] { display: none; }
.session-dialog-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(3, 6, 10, .78); backdrop-filter: blur(4px) saturate(.82); -webkit-backdrop-filter: blur(4px) saturate(.82); cursor: default; }
button.session-dialog-backdrop:hover,
button.session-dialog-backdrop:focus-visible,
button.session-dialog-backdrop:active { border: 0; background: rgba(3, 6, 10, .78); outline: 0; }
.session-picker { position: relative; z-index: 1; width: min(540px, 100%); max-height: calc(100dvh - 48px); display: grid; gap: 14px; overflow-x: hidden; overflow-y: auto; padding: 22px; border: 1px solid #454b57; border-top: 3px solid var(--red); border-radius: 8px; background: #181b21; box-shadow: 0 28px 86px rgba(0, 0, 0, .64); }
.session-dialog .session-picker .panel-head { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 148px); align-items: center; gap: 12px; margin: -22px -22px 4px; padding: 14px 56px 14px 18px; border-bottom-color: #3a404a; }
.session-dialog .session-picker .panel-title { letter-spacing: 0; }
.session-dialog .session-picker .panel-note { min-width: 0; overflow: hidden; color: #aeb8c8; font-size: 11px; line-height: 1.35; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.session-picker label { display: grid; gap: 7px; color: #aeb8c8; font-size: 12px; font-weight: 700; }
.session-picker select { width: 100%; min-height: 38px; }
.session-picker .primary { min-height: 42px; margin-top: 2px; }
.session-dialog-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; min-height: 34px; display: grid; place-items: center; padding: 0; border-color: #454b57; border-radius: 6px; color: #c9d1dd; background: #222730; }
.session-dialog-close:hover { border-color: #ff687b; color: #fff; background: #39313a; }
.session-dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.session-dialog-close svg { width: 17px; height: 17px; }

@media (max-width: 600px) {
  .session-dialog { place-items: end stretch; padding: 0; }
  .session-picker { width: 100%; max-height: calc(100dvh - 12px); padding: 18px 18px max(22px, env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 8px 8px 0 0; }
  .session-dialog .session-picker .panel-head { grid-template-columns: minmax(0, 1fr); gap: 3px; min-height: 72px; margin: -18px -18px 4px; padding: 14px 54px 12px 18px; }
  .session-dialog .session-picker .panel-note { text-align: left; }
  .session-dialog-close { top: 10px; right: 12px; }
}

.replay-empty-page { min-height: 100vh; background: var(--bg); }
.replay-empty-header { position: sticky; z-index: 10; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; min-height: 68px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: rgba(16, 17, 20, .95); }
.replay-empty-brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.replay-empty-logo { display: inline-flex; align-items: center; }
.replay-empty-logo img { display: block; width: 44px; height: 44px; object-fit: contain; }
.replay-empty-nav { justify-self: center; display: flex; align-items: center; gap: 4px; }
.replay-empty-nav button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 4px; padding: 0 16px; color: #8f99a9; background: transparent; font-size: 14px; font-weight: 800; white-space: nowrap; }
.replay-empty-nav button::after { content: ''; position: absolute; right: 15px; bottom: 3px; left: 15px; height: 2px; background: transparent; transform: scaleX(.35); transition: background .18s ease, transform .18s ease; }
.replay-empty-nav button:hover { color: #eef2f8; background: #171a20; }
.replay-empty-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.replay-empty-nav button.is-active { color: #fff; background: #1b1e24; }
.replay-empty-nav button.is-active::after { background: var(--red); transform: scaleX(1); }
.replay-empty-nav svg, .replay-empty-brand svg { width: 17px; height: 17px; flex: none; stroke-width: 2; }
.replay-empty-nav button.is-active svg, .replay-empty-brand svg { color: var(--red); }
.replay-empty-header-balance { justify-self: end; min-width: 1px; }
.replay-empty-main { flex: none; display: block; width: min(1380px, 100%); margin: 0 auto; padding: 28px 22px 80px; }
.replay-empty-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
.replay-empty-intro p { margin: 0 0 8px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.replay-empty-intro h1 { margin: 0; color: var(--text); font-size: clamp(28px, 4vw, 52px); line-height: 1.05; }
.replay-empty-intro span, .replay-empty-intro output { display: block; margin-top: 9px; color: var(--muted); font-size: 14px; }
.replay-empty-intro output { max-width: 320px; text-align: right; }
.replay-empty-panel { min-height: 430px; display: grid; place-content: center; justify-items: center; gap: 9px; margin-top: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #111318; text-align: center; }
.replay-empty-panel > strong { color: var(--text); font-size: 24px; }
.replay-empty-panel > p { margin: 0; color: var(--muted); font-size: 14px; }
.replay-empty-picker.session-picker { position: static; z-index: auto; width: min(470px, 100%); max-height: none; gap: 12px; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-top-width: 1px; border-radius: 8px; background: var(--panel); box-shadow: none; text-align: left; }
.replay-empty-picker .replay-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.replay-empty-picker .replay-picker-heading output { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 400; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.replay-empty-picker .primary { min-height: 38px; margin-top: 0; }
.replay-empty-picker .session-dialog-close { display: none; }

.session-dialog > .replay-empty-picker.session-picker { position: relative; z-index: 1; }
.session-dialog > .replay-empty-picker .replay-picker-heading { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 148px); align-items: center; gap: 12px; margin: -22px -22px 4px; padding: 14px 56px 14px 18px; border-bottom: 1px solid #3a404a; }
.session-dialog > .replay-empty-picker .replay-picker-heading output { color: #aeb8c8; text-align: right; }
.session-dialog > .replay-empty-picker .session-dialog-close { display: grid; }

@media (max-width: 1240px) {
  .replay-empty-header { grid-template-columns: auto 1fr; gap: 10px 12px; padding: 10px 12px; }
  .replay-empty-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .replay-empty-nav button { flex: 1; min-width: 0; padding-inline: 10px; }
}

@media (max-width: 700px) {
  .replay-empty-intro { align-items: start; flex-direction: column; }
  .replay-empty-intro output { text-align: left; }
}

@media (max-width: 520px) {
  .replay-empty-main { padding: 18px 12px 70px; }
  .replay-empty-panel { padding: 18px 12px; }
  .session-dialog > .replay-empty-picker .replay-picker-heading { grid-template-columns: minmax(0, 1fr); gap: 3px; min-height: 72px; margin: -18px -18px 4px; padding: 14px 54px 12px 18px; }
  .session-dialog > .replay-empty-picker .replay-picker-heading output { text-align: left; }
}

.session-progress { width: 52px; height: 3px; display: inline-block; overflow: hidden; background: #303540; }
.session-progress b { display: block; width: 0; height: 100%; background: var(--red); }
.time-mode { min-height: 24px; height: 24px; padding: 2px 8px; }

.team-line { width: 3px; height: 24px; flex: none; background: var(--team-color, #7f8794); }
.team-name { color: var(--muted); font-size: 10px; }
.sector-times { min-width: 150px; color: #ffb000; font-size: 10px; white-space: nowrap; }
.driver-status { font-size: 10px; font-weight: 800; }
.driver-status.is-pit { color: var(--amber); }.driver-status.is-dnf, .driver-status.is-dsq { color: var(--red); }.driver-status.is-run { color: var(--green); }
.tyre-code { width: 25px; height: 25px; display: grid; place-items: center; border: 3px solid currentColor; border-radius: 50%; background: radial-gradient(circle at center, #232832 0 33%, #0b0d11 34% 58%, #050609 59% 100%); font-size: 10px; }
.tyre-code.is-soft { color: #ea1b21; }.tyre-code.is-medium { color: #e9c949; }.tyre-code.is-hard { color: #fff; }.tyre-code.is-inter { color: #149338; }.tyre-code.is-wet { color: #14619c; }
.tyre-code.is-used { box-shadow: 0 0 0 2px rgba(255,255,255,.12); transform: rotate(-12deg); }
.tyre-code b { transform: rotate(12deg); }

.running-order-panel {
  --timing-board-columns: 34px minmax(72px, .72fr) minmax(82px, .78fr) minmax(94px, .9fr) minmax(200px, 2.2fr) 68px 42px 44px 40px;
  --timing-board-gap: 6px;
  container-type: inline-size;
}
.running-order-panel .timing-board-scroll { min-width: 0; overflow: auto; background: #17191d; scrollbar-gutter: stable; }
.running-order-panel .timing-board-grid,
.running-order-panel .telemetry-leaderboard { width: 100%; min-width: 740px; max-width: 1040px; margin-inline: auto; }
.running-order-panel .timing-board-grid,
.running-order-panel .telemetry-leaderboard li:not(.telemetry-empty) { display: grid; grid-template-columns: var(--timing-board-columns); align-items: center; gap: var(--timing-board-gap); }
.running-order-panel .timing-board-head { position: sticky; z-index: 4; top: 0; min-height: 36px; padding: 0 8px; border-bottom: 1px solid #3b414b; color: #9ca6b6; background: #15171c; box-shadow: 0 5px 12px rgba(0, 0, 0, .18); }
.running-order-panel .timing-board-head span { overflow: hidden; font-size: 10px; font-weight: 800; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.running-order-panel .timing-board-head span:nth-child(3) { text-align: left; }
.running-order-panel .timing-board-head span:nth-child(n + 6) { text-align: center; }
.running-order-panel .telemetry-leaderboard { min-height: 0; max-height: none; flex: none; overflow: visible; }
.running-order-panel .telemetry-leaderboard li:not(.telemetry-empty) { min-height: 54px; padding: 7px 8px; border-bottom: 1px solid #343a43; background: #191b1f; cursor: pointer; }
.running-order-panel .telemetry-leaderboard li:not(.telemetry-empty):hover,
.running-order-panel .telemetry-leaderboard li:not(.telemetry-empty):focus-visible { background: #22262d; outline: 0; }
.running-order-panel .telemetry-leaderboard li.is-selected { background: color-mix(in srgb, var(--row-team-color, #7f8794) 18%, transparent); }
.running-order-panel .telemetry-leaderboard li.is-selected:hover,
.running-order-panel .telemetry-leaderboard li.is-selected:focus-visible { background: color-mix(in srgb, var(--row-team-color, #7f8794) 26%, transparent); }
.running-order-panel .telemetry-leaderboard .position { color: #f2f4f8; font-size: 14px; font-weight: 500; text-align: left; }
.running-order-panel .timing-driver { min-width: 0; display: flex; align-items: center; gap: 7px; }
.running-order-panel .team-marker { width: 13px; height: 13px; flex: none; border-radius: 50%; background: var(--team-color, #7f8794); box-shadow: 0 0 0 4px color-mix(in srgb, var(--team-color, #7f8794) 22%, transparent); }
.running-order-panel .driver-code { overflow: hidden; color: #f4f6fa; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.running-order-panel .telemetry-leaderboard .interval { width: 100%; min-width: 0; display: grid; justify-items: start; gap: 2px; margin-top: 0; overflow: hidden; color: #e2e7ef; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }
.running-order-panel .telemetry-leaderboard .interval b,
.running-order-panel .telemetry-leaderboard .interval small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.running-order-panel .telemetry-leaderboard .interval b { color: #e2e7ef; font-size: 12px; font-weight: 800; }
.running-order-panel .telemetry-leaderboard .interval small { color: #8f99a9; font-size: 10px; font-weight: 700; }
.running-order-panel .telemetry-leaderboard .interval.is-unavailable b { color: #737d8b; }
.running-order-panel .last-lap { min-width: 0; display: grid; gap: 2px; color: #aeb7c5; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.running-order-panel .last-lap b { overflow: hidden; color: inherit; font-size: 13px; font-weight: 900; text-overflow: ellipsis; }
.running-order-panel .last-lap small { overflow: hidden; color: #7f8999; font-size: 10px; font-weight: 500; text-overflow: ellipsis; }
.running-order-panel .last-lap small.is-fastest { color: #b887ff; font-weight: 800; }
.running-order-panel .last-lap.is-faster { color: #53d17d; }
.running-order-panel .last-lap.is-slower { color: #ffb000; }
.running-order-panel .last-lap.is-fastest { color: #b887ff; }
.running-order-panel .timing-sectors { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.running-order-panel .sector-value { min-width: 0; display: grid; gap: 2px; }
.running-order-panel .sector-mini-grid { width: 100%; height: 8px; display: flex; align-items: center; gap: 1.5px; overflow: hidden; }
.running-order-panel .sector-mini-grid > span { width: 6px; min-width: 5px; max-width: 7px; height: 8px; flex: 1 1 6px; border-radius: 1px; background: rgba(255,255,255,.055); box-shadow: none; }
.running-order-panel .sector-mini-grid > .is-slower { background: #ffb000; }
.running-order-panel .sector-mini-grid > .is-faster { background: #53d17d; }
.running-order-panel .sector-mini-grid > .is-fastest { background: #b887ff; }
.running-order-panel .sector-mini-grid > .is-pit { background: #f04452; }
.running-order-panel .sector-mini-grid > .is-unavailable { background: #202630; }
.running-order-panel .sector-value b { overflow: hidden; color: #66717f; font-size: 10px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.running-order-panel .sector-value.has-time b { color: #aeb7c5; }
.running-order-panel .sector-value.is-slower b { color: #ffb000; }
.running-order-panel .sector-value.is-faster b { color: #53d17d; }
.running-order-panel .sector-value.is-fastest b { color: #b887ff; }
.running-order-panel .driver-status { width: fit-content; min-width: 58px; min-height: 28px; display: inline-grid; place-self: center; place-items: center; padding: 3px 9px; border: 1px solid #2a9bc1; border-radius: 999px; color: #dff7ff; background: rgba(21, 110, 139, .22); font-size: 10px; font-weight: 900; white-space: nowrap; }
.running-order-panel .driver-status.is-pit { color: #ffe294; border-color: #d99d16; background: rgba(217, 157, 22, .14); }
.running-order-panel .driver-status.is-out { color: #b9f4ff; border-color: #36b8d4; background: rgba(54, 184, 212, .13); }
.running-order-panel .driver-status.is-in { color: #ffe294; border-color: #d99d16; background: rgba(217, 157, 22, .11); }
.running-order-panel .driver-status.is-run { color: #bff5ce; border-color: #53d17d; background: rgba(83, 209, 125, .11); }
.running-order-panel .driver-status.is-fin { color: #d3d8e0; border-color: #687280; background: rgba(104, 114, 128, .13); }
.running-order-panel .driver-status.is-waiting { color: #8f99a9; border-color: #4b535f; background: rgba(75, 83, 95, .12); }
.running-order-panel .driver-status.is-dnf,
.running-order-panel .driver-status.is-dsq,
.running-order-panel .driver-status.is-dns { color: #ffbdc5; border-color: var(--red); background: rgba(255, 64, 87, .13); }
.running-order-panel .timing-tyre { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.running-order-panel .timing-tyre-age { color: #9da7b7; font-size: 8px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.running-order-panel .pit-count { min-width: 0; color: #9ca6b6; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.running-order-panel .pit-count.is-active { color: #ffe294; }
.cosmos-tyre-icon { --tyre-color: #aaa; position: relative; width: 28px !important; height: 28px !important; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: visible; border: 0 !important; border-radius: 50% !important; color: #f9fafb !important; background: #030712 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.6px !important; font-style: normal; font-weight: 700; line-height: 12.6px; text-shadow: none; box-shadow: none; transform: none; }
.cosmos-tyre-icon::before { content: ""; position: absolute; z-index: 0; inset: 2.8px; border-radius: 50%; background: linear-gradient(to right, transparent calc(50% - 1.96px), #000 calc(50% - 1.96px) calc(50% + 1.96px), transparent calc(50% + 1.96px)), var(--tyre-color); }
.cosmos-tyre-icon::after { content: none; }
.cosmos-tyre-icon.is-used::after { content: ""; position: absolute; z-index: 1; top: 2.8px; left: calc(50% - 1.96px); width: 3.92px; height: 22.4px; background: var(--tyre-color); transform: rotate(45deg) scaleY(1.33); }
.cosmos-tyre-icon > b { position: relative; z-index: 2; width: 16.8px !important; height: 16.8px !important; display: grid !important; place-items: center; border-radius: 50%; color: inherit !important; background: #111827 !important; font: inherit !important; transform: none; }
.cosmos-tyre-icon.tyre-code.is-used { box-shadow: none; transform: none; }
.cosmos-tyre-icon.is-soft { --tyre-color: #ea1b21; }
.cosmos-tyre-icon.is-medium { --tyre-color: #e9c949; }
.cosmos-tyre-icon.is-hard { --tyre-color: #fff; }
.cosmos-tyre-icon.is-inter { --tyre-color: #149338; }
.cosmos-tyre-icon.is-wet { --tyre-color: #14619c; }
.cosmos-tyre-icon.is-unknown { --tyre-color: #aaa; }
.running-order-panel .lap-number { color: #f3f5f8; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.running-order-panel .telemetry-empty { min-width: 740px; }

@container (min-width: 900px) {
  .running-order-panel .timing-board-scroll {
    --timing-board-columns: 36px 82px 96px 108px minmax(280px, 1fr) 70px 44px 48px 42px;
    --timing-board-gap: 8px;
  }
}

@container (min-width: 1200px) {
  .running-order-panel .timing-board-scroll { --timing-board-gap: 10px; }
}

.telemetry-fastest-row { min-height: 42px; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.telemetry-fastest-label, .telemetry-fastest-driver small { color: var(--muted); font-size: 10px; }
.telemetry-fastest-driver { display: flex; align-items: center; gap: 8px; }
.telemetry-fastest-driver-copy { min-width: 0; display: flex; gap: 7px; align-items: baseline; }
.telemetry-fastest-avatar { width: 28px; height: 28px; display: grid; place-items: center; flex: none; overflow: hidden; border: 1px solid color-mix(in srgb, var(--team-color, #7f8794) 72%, #fff); border-radius: 50%; color: #f5f7fa; background: color-mix(in srgb, var(--team-color, #7f8794) 30%, #15181d); font-size: 8px; font-weight: 900; }
.telemetry-fastest-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.telemetry-fastest-row > b { color: #b887ff; }
.telemetry-fastest-row.is-fastest-lap .telemetry-fastest-label,
.telemetry-fastest-row.is-fastest-lap > b { color: #b887ff; }

.openf1-widget-board [data-openf1-widget="driver-input"] .driver-telemetry-dashboard { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(176px, .88fr); gap: 14px; flex: 1 1 auto; padding: 14px; background: #090d13; overflow: hidden; }
.driver-telemetry-copy { min-width: 0; display: grid; align-content: center; gap: 16px; }
.driver-telemetry-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.driver-telemetry-avatar { --team-color: #7f8794; width: 44px; height: 44px; display: grid; place-items: center; flex: none; overflow: hidden; border: 2px solid var(--team-color); border-radius: 50%; color: #f4f6f8; background: color-mix(in srgb, var(--team-color) 30%, #15181d); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.driver-telemetry-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.driver-telemetry-name { min-width: 0; display: grid; gap: 3px; }
.driver-telemetry-name > span { color: #c8d0db; font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.driver-telemetry-name > strong { overflow: hidden; color: #f7f8fa; font-size: 20px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.driver-telemetry-name > small { overflow: hidden; color: var(--team-color, #aeb7c5); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.driver-telemetry-race-data { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 0; border-block: 1px solid rgba(121, 137, 155, .18); }
.driver-telemetry-race-data > div { min-width: 0; display: grid; gap: 4px; }
.driver-telemetry-race-data span { overflow: hidden; color: #8995a5; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.driver-telemetry-race-data strong { min-width: 0; overflow: hidden; color: #edf1f6; font: 800 11px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.driver-telemetry-race-data strong:has(i) { display: flex; align-items: center; gap: 5px; }
.driver-telemetry-race-data strong b { overflow: hidden; font: inherit; text-overflow: ellipsis; }
.driver-telemetry-lap-times { display: grid; gap: 5px; }
.driver-telemetry-lap-times > span { color: #aeb8c6; font-size: 10px; font-weight: 800; }
.driver-telemetry-lap-times > strong { display: flex; align-items: baseline; gap: 6px; color: #f4f6fa; font: 800 18px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; white-space: nowrap; }
.driver-telemetry-lap-times i { color: #7e8998; font-style: normal; }
.driver-telemetry-sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.driver-telemetry-sectors > div { min-width: 0; display: grid; gap: 5px; }
.driver-telemetry-sectors span { color: #8e99aa; font-size: 10px; font-weight: 800; }
.driver-telemetry-sectors i { height: 7px; display: block; border-radius: 2px; background: #35404d; }
.driver-telemetry-sectors strong { overflow: hidden; color: #dfe5ed; font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.driver-telemetry-sectors > div.is-faster i { background: #53d17d; }.driver-telemetry-sectors > div.is-faster strong { color: #53d17d; }
.driver-telemetry-sectors > div.is-slower i { background: #ffb000; }.driver-telemetry-sectors > div.is-slower strong { color: #ffb000; }
.driver-telemetry-sectors > div.is-fastest i { background: #b887ff; }.driver-telemetry-sectors > div.is-fastest strong { color: #b887ff; }
.driver-telemetry-gauge { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; place-items: center; position: relative; padding-top: 4px; }
.driver-telemetry-speed-dial { --throttle-arc: 0deg; --brake-arc: 0deg; width: min(100%, 214px); aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(from 225deg, #426df0 0deg var(--throttle-arc), #1c2735 var(--throttle-arc) 120deg, transparent 120deg 180deg, #d93a43 180deg calc(180deg + var(--brake-arc)), #252a34 calc(180deg + var(--brake-arc)) 300deg, transparent 300deg 360deg); filter: drop-shadow(0 7px 14px rgba(0,0,0,.32)); transition: --throttle-arc 180ms linear, --brake-arc 160ms ease-out; will-change: --throttle-arc, --brake-arc; }
.driver-telemetry-speed-dial::before { position: absolute; inset: 17px; content: ""; border: 1px solid #2d3744; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 25px, rgba(110,128,146,.17) 26px 27px, transparent 28px 41px), #080d13; box-shadow: 0 0 0 2px rgba(7,12,18,.82); }
.driver-telemetry-speed-dial::after { position: absolute; inset: 34%; content: ""; border: 1px solid rgba(140,153,169,.22); border-radius: 50%; }
.driver-telemetry-speed-readout { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px; transform: translateY(-2px); }
.driver-telemetry-speed-readout > strong { color: #f7f8fa; font: 800 58px/.84 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.driver-telemetry-speed-readout > span { color: #f4f6fa; font-size: 15px; font-weight: 900; }
.driver-telemetry-speed-readout > b { margin-top: 10px; color: #f4f6fa; font: 800 26px/.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.driver-telemetry-speed-readout > small { color: #d9dee7; font-size: 10px; font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  .driver-telemetry-speed-dial { transition: none; }
}
.driver-telemetry-drs { position: absolute; z-index: 4; top: 7px; right: 2px; min-width: 49px; min-height: 30px; display: grid; place-items: center; border: 1px solid #294452; border-radius: 6px; color: #647b86; background: rgba(9,27,33,.7); font-size: 11px; font-weight: 900; transition: color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.driver-telemetry-drs.is-active { border-color: #00a878; color: #00d49b; background: rgba(0,104,78,.2); box-shadow: 0 0 14px rgba(0,206,148,.17); }
.driver-telemetry-gear { align-self: center; color: #d9e0e8; font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.driver-telemetry-gear strong { margin-left: 5px; color: #f8f9fb; font-size: 30px; line-height: .8; }
.driver-telemetry-controls { width: min(100%, 212px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.driver-telemetry-pedal-state { grid-column: 1 / -1; color: #97a4b3; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.driver-telemetry-controls[data-pedal-state="throttle"] .driver-telemetry-pedal-state { color: #6f9dff; }
.driver-telemetry-controls[data-pedal-state="brake"] .driver-telemetry-pedal-state { color: #ff6570; }
.driver-telemetry-controls[data-pedal-state="throttle"] > span:first-of-type > i,
.driver-telemetry-controls[data-pedal-state="throttle"] > span:first-of-type > b { color: #6f9dff; }
.driver-telemetry-controls[data-pedal-state="brake"] > span:last-of-type > i,
.driver-telemetry-controls[data-pedal-state="brake"] > span:last-of-type > b { color: #ff6570; }
.driver-telemetry-controls > span { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; align-items: center; color: #96a3b2; font-size: 8px; font-weight: 800; }
.driver-telemetry-controls > span > i { font-style: normal; }.driver-telemetry-controls > span > b { color: #e5eaf0; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.driver-telemetry-controls em { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: #26303a; }.driver-telemetry-controls em > i { height: 100%; display: block; background: #4d7dff; transition: width .1s linear; }.driver-telemetry-controls em.is-brake > i { background: #f04b57; }

.driver-comparison-panel { min-height: 0; display: flex; flex-direction: column; }
.driver-comparison-dashboard { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; padding: 14px; background: #090d13; overflow: auto; }
.driver-comparison-side { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .82fr); gap: 10px; align-items: center; }
.driver-comparison-side .driver-telemetry-copy { align-content: start; gap: 10px; }
.driver-comparison-side .driver-telemetry-gauge { min-height: 0; }
.driver-comparison-side .driver-telemetry-speed-dial { width: min(100%, 190px); }
.driver-comparison-divider { position: relative; min-width: 1px; display: grid; place-items: center; color: #eef2f8; font: 900 17px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.driver-comparison-divider::before { position: absolute; content: ''; width: 1px; height: 78%; background: rgba(121,137,155,.3); }
.driver-comparison-divider span { position: relative; z-index: 1; padding: 7px 4px; background: #090d13; }

@container (max-width: 940px) {
  .driver-comparison-side { grid-template-columns: minmax(0, 1fr) minmax(128px, .72fr); gap: 7px; }
  .driver-comparison-side .driver-telemetry-speed-dial { width: min(100%, 148px); }
  .driver-comparison-side .driver-telemetry-speed-readout > strong { font-size: 41px; }
  .driver-comparison-side .driver-telemetry-speed-readout > span { font-size: 11px; }
  .driver-comparison-side .driver-telemetry-speed-readout > b { margin-top: 6px; font-size: 18px; }
  .driver-comparison-side .driver-telemetry-speed-readout > small { font-size: 8px; }
}

@container (max-width: 700px) {
  .driver-comparison-dashboard { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 10px; }
  .driver-comparison-divider { min-height: 25px; }
  .driver-comparison-divider::before { width: 78%; height: 1px; }
  .driver-comparison-divider span { padding: 4px 8px; }
  .driver-comparison-side { grid-template-columns: minmax(0, 1fr) minmax(132px, .68fr); }
}

@container (max-width: 410px) {
  .openf1-widget-board [data-openf1-widget="driver-input"] .driver-telemetry-dashboard { grid-template-columns: minmax(0, 1fr) minmax(130px, .74fr); gap: 8px; padding: 10px; }
  .driver-telemetry-copy { gap: 11px; }.driver-telemetry-avatar { width: 38px; height: 38px; border-width: 2px; font-size: 9px; }.driver-telemetry-name > strong { font-size: 16px; }.driver-telemetry-name > span { font-size: 11px; }
  .driver-telemetry-lap-times > strong { gap: 4px; font-size: 13px; }.driver-telemetry-sectors { gap: 5px; }.driver-telemetry-sectors strong { font-size: 11px; }
  .driver-telemetry-race-data { gap: 5px; padding-block: 6px; }.driver-telemetry-race-data span { font-size: 8px; }.driver-telemetry-race-data strong { font-size: 10px; }
  .driver-telemetry-speed-dial { width: min(100%, 148px); }.driver-telemetry-speed-dial::before { inset: 10px; }.driver-telemetry-speed-readout > strong { font-size: 41px; }.driver-telemetry-speed-readout > span { font-size: 11px; }.driver-telemetry-speed-readout > b { margin-top: 6px; font-size: 18px; }.driver-telemetry-speed-readout > small { font-size: 8px; }
  .driver-telemetry-gear { font-size: 10px; }.driver-telemetry-gear strong { font-size: 23px; }.driver-telemetry-controls { width: 100%; gap: 5px; margin-top: 5px; }
}

@container (max-width: 330px) {
  .openf1-widget-board [data-openf1-widget="driver-input"] .driver-telemetry-dashboard { grid-template-columns: 1fr; overflow: auto; }.driver-telemetry-gauge { grid-template-columns: minmax(116px, 1fr) minmax(0, .8fr); grid-template-rows: auto auto; }.driver-telemetry-speed-dial { grid-row: span 2; width: 124px; }.driver-telemetry-gear { grid-column: 2; grid-row: 1; }.driver-telemetry-controls { display: none; }
}

.strategy-list { padding: 8px 12px 14px; }
.strategy-row { min-height: 44px; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.strategy-driver { min-width: 0; display: flex; align-items: center; gap: 7px; }
.strategy-driver i { width: 13px; height: 13px; flex: none; border-radius: 50%; background: var(--team-color, #7f8794); box-shadow: 0 0 0 4px color-mix(in srgb, var(--team-color, #7f8794) 22%, transparent); }
.strategy-driver span { overflow: hidden; color: #f4f6fa; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.strategy-track { position: relative; height: 34px; overflow: visible; background: transparent; }
.strategy-track::before { position: absolute; inset: 50% 0 auto; height: 10px; content: ""; border-radius: 2px; background: #202b3a; transform: translateY(-50%); }
.strategy-stint { position: absolute; inset-block: 0; min-width: 3px; overflow: visible; padding: 0; color: #090b0e; font-size: 9px; }
.strategy-stint-bar { position: absolute; z-index: 1; top: 50%; right: 0; left: 0; height: 10px; border-radius: 2px; background: var(--stint-color, #9ba6b7); transform: translateY(-50%); }
.strategy-stint.is-soft { --stint-color: #ff2938; }.strategy-stint.is-medium { --stint-color: #ffd12e; }.strategy-stint.is-hard { --stint-color: #f1f2f4; }.strategy-stint.is-inter { --stint-color: #20a767; }.strategy-stint.is-wet { --stint-color: #2378c9; }
.strategy-stint.is-used .strategy-stint-bar { background: repeating-linear-gradient(-45deg, rgba(0,0,0,.28) 0 3px, transparent 3px 7px), var(--stint-color); }
.strategy-tyre-marker { position: absolute; z-index: 3; top: 50%; left: 0; width: 28px !important; height: 28px !important; transform: translate(-50%, -50%); }
.strategy-stint-laps { position: absolute; z-index: 4; top: 50%; left: 50%; display: block; width: auto; min-width: 18px; height: auto; padding: 0; border: 0; border-radius: 0; color: #0b0e13; background: transparent; font-family: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", sans-serif; font-size: 12px; font-stretch: condensed; font-style: italic; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.28); transform: translate(-50%, -50%); }
.strategy-stint:is(.is-soft, .is-inter, .is-wet) .strategy-stint-laps { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.72); }
.strategy-stint.is-future { visibility: hidden; opacity: 0; pointer-events: none; }
.strategy-stint.is-complete { opacity: .9; }
.strategy-stint.is-active { z-index: 2; opacity: 1; }
.strategy-stint.is-active .strategy-stint-laps { right: 0; left: auto; width: 28px; min-width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--stint-color) 68%, #171b22); border-radius: 50%; color: #0b0e13; background: var(--stint-color); font-size: 11px; font-style: normal; text-shadow: none; box-shadow: 0 0 0 2px #171b22, inset 0 0 0 1px rgba(255,255,255,.24); transform: translate(50%, -50%); }
.strategy-stint.is-active:is(.is-soft, .is-inter, .is-wet) .strategy-stint-laps { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.65); }
.event-filter { position: relative; flex: none; }
.event-filter-toggle { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #3c4654; border-radius: 5px; color: #aeb8c8; background: #171d25; cursor: pointer; transition: border-color .16s ease, color .16s ease, background-color .16s ease; }
.event-filter-toggle:hover, .event-filter-toggle[aria-expanded="true"] { border-color: #ff4057; color: #fff; background: #252c37; }
.event-filter-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.event-filter-toggle svg { width: 15px; height: 15px; }
.event-filter-menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; display: grid; gap: 2px; min-width: 132px; padding: 5px; border: 1px solid #414b5a; border-radius: 6px; background: #171d25; box-shadow: 0 16px 38px rgba(0,0,0,.45); }
.event-filter-menu[hidden] { display: none; }
.event-filter-menu button { display: flex; width: 100%; min-height: 30px; align-items: center; justify-content: space-between; padding: 0 9px; border: 0; border-radius: 4px; color: #aeb8c8; background: transparent; font-size: 10px; font-weight: 800; text-align: left; cursor: pointer; }
.event-filter-menu button:hover, .event-filter-menu button.is-active { color: #fff; background: #293341; }
.event-filter-menu button.is-active::after { width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--red); }
.openf1-widget-board [data-event-list] { display: block; margin: 0; padding: 4px 0 10px; list-style: none; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.race-event-item { --event-color: #7f8b9b; min-width: 0; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px 12px 4px 10px; color: #eef2f6; }
.race-event-item::after { position: absolute; z-index: 0; top: 42px; bottom: -10px; left: 24px; width: 1px; content: ""; background: color-mix(in srgb, var(--event-color) 22%, #27303a); }
.race-event-item:last-child::after { display: none; }
.race-event-item.is-warning { --event-color: #ffb21a; }.race-event-item.is-danger, .race-event-item.is-red-flag { --event-color: #ff4057; }.race-event-item.is-blue-flag { --event-color: #438cff; }.race-event-item.is-double-yellow-flag { --event-color: #ff9f1c; }.race-event-item.is-yellow-flag { --event-color: #ffd447; }.race-event-item.is-green-flag { --event-color: #25c58a; }.race-event-item.is-chequered-flag { --event-color: #f1f3f5; }.race-event-item.is-black-flag { --event-color: #b8c0cc; }.race-event-item.is-white-flag { --event-color: #f1f3f5; }.race-event-item.is-success { --event-color: #25c58a; }.race-event-item.is-pit { --event-color: #42b5e8; }.race-event-item.is-finish { --event-color: #f1f3f5; }
.race-event-marker { width: 28px; height: 28px; position: relative; z-index: 1; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--event-color) 70%, #303844); border-radius: 50%; color: var(--event-color); background: #10151c; }
.race-event-marker svg { width: 15px; height: 15px; }
.race-event-item.is-chequered-flag .race-event-marker { border-color: #737b86; border-radius: 50%; background: #10151c; }
.race-event-item.is-chequered-flag .race-event-marker svg { opacity: 0; }
.race-event-item.is-chequered-flag .race-event-marker::before { width: 15px; height: 10px; position: absolute; top: 5px; left: 9px; content: ""; border: 1px solid rgba(255,255,255,.62); background: conic-gradient(#f7f8fa 25%, #111318 0 50%, #f7f8fa 0 75%, #111318 0) 0 0 / 6px 6px; clip-path: polygon(0 0, 100% 8%, 88% 50%, 100% 92%, 0 84%); }
.race-event-item.is-chequered-flag .race-event-marker::after { width: 2px; height: 18px; position: absolute; top: 5px; left: 7px; content: ""; border-radius: 2px; background: #e8ebef; box-shadow: 0 0 0 1px rgba(0,0,0,.34); }
.race-event-content { min-width: 0; display: grid; gap: 7px; padding-bottom: 9px; }
.race-event-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #858f9f; }
.race-event-time { min-width: 0; display: inline-flex; align-items: center; gap: 5px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.race-event-time svg { width: 12px; height: 12px; }
.race-event-lap { flex: none; padding: 3px 7px; border: 1px solid #343c48; border-radius: 10px; color: #aeb7c4; background: #171d25; font-size: 9px; font-weight: 800; line-height: 1; }
.race-event-content p { min-width: 0; margin: 0; padding: 9px 10px; border: 1px solid #222b36; border-radius: 5px; color: #e8edf3; background: #111720; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.race-event-item.is-warning .race-event-content p, .race-event-item.is-danger .race-event-content p, .race-event-item.is-red-flag .race-event-content p, .race-event-item.is-blue-flag .race-event-content p, .race-event-item.is-double-yellow-flag .race-event-content p, .race-event-item.is-yellow-flag .race-event-content p, .race-event-item.is-green-flag .race-event-content p, .race-event-item.is-chequered-flag .race-event-content p, .race-event-item.is-black-flag .race-event-content p, .race-event-item.is-white-flag .race-event-content p { border-left-color: color-mix(in srgb, var(--event-color) 72%, #222b36); }

@container (max-width: 390px) {
  .race-event-item { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; padding-inline: 8px; }.race-event-item::after { left: 20px; }.race-event-marker { width: 25px; height: 25px; }.race-event-content p { padding: 8px; font-size: 10px; }
}

[data-team-radio-list] { min-height: 0; align-content: start; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.radio-item { height: 100px; min-height: 100px; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 36px; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #15191e; transition: background-color .16s ease; }
.radio-item.is-latest { background: linear-gradient(90deg, color-mix(in srgb, var(--team-color) 10%, #15191e) 0%, #15191e 68%); }
.radio-item.is-latest::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; content: ""; background: var(--team-color); }
.radio-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: none; overflow: hidden; border: 2px solid var(--team-color); border-radius: 50%; color: #f4f6f8; background: color-mix(in srgb, var(--team-color, #7f8794) 30%, #15181d); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.radio-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.radio-copy { min-width: 0; display: grid; gap: 4px; }
.radio-driver { min-width: 0; display: flex; align-items: center; gap: 7px; }
.radio-copy .radio-driver strong { min-width: 0; overflow: hidden; margin: 0; color: #f4f6f8; font-size: 14px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.radio-copy .radio-driver small { flex: none; min-width: 28px; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--team-color) 55%, #343b44); border-radius: 3px; color: var(--team-color); background: color-mix(in srgb, var(--team-color) 8%, transparent); font: 900 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; white-space: nowrap; }
.radio-team { min-width: 0; overflow: hidden; margin: 0; color: var(--team-color); font-size: 10px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.radio-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.radio-timestamp { min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; overflow: hidden; color: #7f8995; white-space: nowrap; }
.radio-timestamp span { font-size: 8px; font-weight: 800; }
.radio-timestamp b { overflow: hidden; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; }
.radio-duration { min-height: 25px; display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--team-color) 62%, #3b434e); border-radius: 4px; color: #f1f5f8; background: color-mix(in srgb, var(--team-color) 15%, #14191f); }
.radio-duration svg { width: 12px; height: 12px; color: var(--team-color); }
.radio-duration span { color: #aeb8c5; font-size: 8px; font-weight: 800; }
.radio-duration b { color: #fff; font: 900 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.radio-duration.is-loading { border-color: #343b44; color: #77818e; background: #171c22; }
.radio-progress { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 6px; height: 9px; margin-top: 1px; }
.radio-progress input[type="range"] { width: 100%; height: 12px; margin: 0; padding: 0; appearance: none; accent-color: var(--team-color); background: transparent; cursor: pointer; }
.radio-progress input[type="range"]:disabled { cursor: default; opacity: .58; }
.radio-progress input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--team-color) 0 var(--radio-progress, 0%), #343b46 var(--radio-progress, 0%) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.radio-progress input[type="range"]::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -3px; border: 2px solid #f5f7fa; border-radius: 50%; appearance: none; background: var(--team-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-color) 28%, transparent); }
.radio-progress input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: #343b46; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.radio-progress input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--team-color); }
.radio-progress input[type="range"]::-moz-range-thumb { width: 8px; height: 8px; border: 2px solid #f5f7fa; border-radius: 50%; background: var(--team-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-color) 28%, transparent); }
.radio-progress time { color: #cbd3df; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.radio-play { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--team-color) 65%, #343b44); border-radius: 50%; color: #f5f7fa; background: color-mix(in srgb, var(--team-color) 13%, #14191f); }
.radio-play:hover:not(:disabled) { color: #fff; background: color-mix(in srgb, var(--team-color) 24%, #14191f); }
.radio-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.radio-play:disabled { border-color: #343a43; color: #66717d; background: #161b21; }
.radio-play svg { width: 14px; height: 14px; }
.radio-copy audio { display: none; }

@container (max-width: 390px) {
  .radio-item { height: 96px; min-height: 96px; grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 9px; padding-inline: 9px; }.radio-avatar { width: 38px; height: 38px; }.radio-play { width: 32px; height: 32px; }.radio-duration span, .radio-timestamp span { display: none; }.radio-duration { padding-inline: 6px; }.radio-progress { grid-template-columns: minmax(0, 1fr) 30px; }.radio-progress time { font-size: 8px; }
}

.is-layout-editing .grid-stack-item-content { outline: 1px dashed var(--red); outline-offset: -4px; }
.is-layout-editing .panel-head, .is-layout-editing .telemetry-workspace-bar { cursor: grab; }

@media (max-width: 700px) {
  .openf1-widget-board.grid-stack {
    margin-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
    padding: 0 12px;
  }
  .timeline { right: 12px; bottom: 10px; left: 12px; }
}
@media (hover: none) and (pointer: coarse) {
  :focus-visible { outline: 0; }
}