@inventure71/paddockjs 3.0.0 → 4.0.0

package/src/styles.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@85,500;100,700;110,900&family=IBM+Plex+Mono:wght@500;600;700&display=swap');
-
 .f1-sim-component {
   container-type: inline-size;
   color-scheme: dark;
@@ -22,8 +20,8 @@
   --blue: var(--paddock-color-info, var(--paddock-blue-color, #39a7ff));
   --track: var(--paddock-color-track, var(--paddock-track-color, #262a31));
   --track-edge: var(--paddock-color-track-edge, var(--paddock-track-edge-color, #f4f7fb));
-  --font-display: 'Archivo', sans-serif;
-  --font-mono: 'IBM Plex Mono', monospace;
+  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', ui-monospace, monospace;
   --timing-columns: 1.9rem 2.1rem minmax(4.6rem, 1fr) 4.55rem 1.6rem;
   --paddock-entry-count: 10;
   --timing-board-max-width: var(--paddock-timing-tower-max-width, 390px);
@@ -471,7 +469,7 @@
   min-inline-size: 0;
 }
 
-.sim-shell {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell {
   min-height: 100svh;
   padding:
     max(clamp(0.85rem, 2vw, 1.4rem), var(--paddock-safe-area-top))
@@ -481,14 +479,14 @@
   background: #000;
 }
 
-.sim-workspace {
+:where(.f1-sim-component, .f1-sim-component *).sim-workspace {
   min-height: calc(100svh - clamp(1.7rem, 4vw, 2.8rem));
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
 }
 
-.sim-topbar {
+:where(.f1-sim-component, .f1-sim-component *).sim-topbar {
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -499,8 +497,8 @@
   box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
 }
 
-.sim-backlink,
-.sim-control {
+:where(.f1-sim-component, .f1-sim-component *).sim-backlink,
+:where(.f1-sim-component, .f1-sim-component *).sim-control {
   min-height: 44px;
   min-width: 44px;
   overflow: hidden;
@@ -518,30 +516,30 @@
   cursor: pointer;
 }
 
-.sim-backlink:hover,
-.sim-control:hover {
+:where(.f1-sim-component, .f1-sim-component *).sim-backlink:hover,
+:where(.f1-sim-component, .f1-sim-component *).sim-control:hover {
   border-color: var(--text);
   background: rgba(255, 255, 255, 0.1);
 }
 
-.sim-control--safety.is-active {
+:where(.f1-sim-component, .f1-sim-component *).sim-control--safety.is-active {
   color: #0a0b0d;
   background: var(--yellow);
   border-color: var(--yellow);
 }
 
-.camera-controls button.is-active,
-.camera-controls button[aria-pressed='true'] {
+:where(.f1-sim-component, .f1-sim-component *).camera-controls button.is-active,
+:where(.f1-sim-component, .f1-sim-component *).camera-controls button[aria-pressed='true'] {
   color: #08090b;
   background: var(--text);
   border-color: var(--text);
 }
 
-.sim-title-block {
+:where(.f1-sim-component, .f1-sim-component *).sim-title-block {
   min-width: 0;
 }
 
-.sim-kicker {
+:where(.f1-sim-component, .f1-sim-component *).sim-kicker {
   margin: 0 0 0.2rem;
   color: var(--red);
   font-family: var(--font-mono);
@@ -559,7 +557,7 @@
   letter-spacing: 0;
 }
 
-.sim-controls {
+:where(.f1-sim-component, .f1-sim-component *).sim-controls {
   min-width: 0;
   display: flex;
   gap: 0.6rem;
@@ -567,37 +565,38 @@
 }
 
 @container (max-width: 860px) {
-  .sim-topbar {
+  :where(.f1-sim-component, .f1-sim-component *).sim-topbar {
     grid-template-columns: minmax(0, 1fr);
     align-items: stretch;
   }
 
-  .sim-controls,
-  .sim-backlink {
+  :where(.f1-sim-component, .f1-sim-component *).sim-controls,
+:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
     justify-content: stretch;
   }
 
-  .sim-controls {
+  :where(.f1-sim-component, .f1-sim-component *).sim-controls {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .sim-topbar h1 {
-    line-height: 1.06;
+  :where(.f1-sim-component, .f1-sim-component *).sim-topbar h1 {
+    line-height: 0.92;
+    min-height: 1.08em;
   }
 
-  .sim-control,
-  .sim-backlink {
+  :where(.f1-sim-component, .f1-sim-component *).sim-control,
+:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
     text-align: center;
   }
 }
 
-.sim-external-camera-controls {
+:where(.f1-sim-component, .f1-sim-component *).sim-external-camera-controls {
   display: flex;
   justify-content: flex-start;
 }
 
-.sim-grid {
+:where(.f1-sim-component, .f1-sim-component *).sim-grid {
   flex: 1;
   min-height: 0;
   position: relative;
@@ -606,8 +605,8 @@
   gap: 0.9rem;
 }
 
-.sim-shell--left-tower-overlay .sim-grid,
-.sim-shell--left-tower-overlay.sim-grid {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-grid,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-grid {
   --timing-board-width: max(255px, calc((100cqw - 1.8rem) * 0.78 / 4.68));
   --race-data-safe-left: calc(2rem + var(--timing-board-width));
   --race-data-right-gutter: 1rem;
@@ -617,11 +616,11 @@
   grid-template-columns: minmax(620px, 1fr) minmax(270px, 0.9fr);
 }
 
-.sim-shell--left-tower-overlay .sim-canvas-panel {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel {
   grid-column: 1;
 }
 
-.sim-canvas-panel--with-timing-tower {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower {
   --timing-board-width: min(var(--timing-board-max-width), max(255px, calc((100cqw - 1.8rem) * 0.78 / 4.68)));
   --race-data-safe-left: calc(2rem + var(--timing-board-width));
   --race-data-right-gutter: 1rem;
@@ -629,15 +628,15 @@
   container-type: inline-size;
 }
 
-.sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
   min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
 }
 
-.sim-canvas-panel--with-timing-tower.sim-canvas-panel--timing-expand-race-view {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower.sim-canvas-panel--timing-expand-race-view {
   min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
 }
 
-.sim-shell--left-tower-overlay .sim-timing {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing {
   position: absolute;
   z-index: 5;
   top: 1rem;
@@ -652,7 +651,7 @@
   pointer-events: auto;
 }
 
-.sim-canvas-panel--with-timing-tower > .sim-timing {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .sim-timing {
   position: absolute;
   z-index: 5;
   top: 1rem;
@@ -668,7 +667,7 @@
   pointer-events: auto;
 }
 
-.timing-panel-toggle {
+:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle {
   position: absolute;
   z-index: 14;
   top: 0.75rem;
@@ -689,13 +688,13 @@
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
 }
 
-.timing-panel-toggle[aria-expanded='true'] {
+:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true'] {
   color: transparent;
   background: rgba(8, 10, 16, 0.82);
   border-color: color-mix(in srgb, var(--green) 74%, rgba(255, 255, 255, 0.22));
 }
 
-.timing-panel-toggle[aria-expanded='true'] {
+:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true'] {
   width: 44px;
   min-width: 44px;
   padding: 0;
@@ -704,8 +703,8 @@
   font-size: 0;
 }
 
-.timing-panel-toggle[aria-expanded='true']::before,
-.timing-panel-toggle[aria-expanded='true']::after {
+:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::before,
+:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -716,107 +715,107 @@
   border-radius: 999px;
 }
 
-.timing-panel-toggle[aria-expanded='true']::before {
+:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::before {
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.timing-panel-toggle[aria-expanded='true']::after {
+:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
 
-.sim-shell--left-tower-overlay.sim-shell--timing-scroll .sim-timing {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-shell--timing-scroll .sim-timing {
   overflow: hidden;
 }
 
-.sim-canvas-panel--timing-scroll .sim-timing {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--timing-scroll .sim-timing {
   overflow: hidden;
 }
 
-.sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
   left: calc(2rem + var(--timing-board-width));
   max-width: calc(100% - (2rem + var(--timing-board-width)) - 1rem);
 }
 
-.sim-canvas-panel--with-timing-tower > .camera-controls {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .camera-controls {
   left: calc(2rem + var(--timing-board-width));
   max-width: calc(100% - (2rem + var(--timing-board-width)) - 1rem);
 }
 
-.sim-shell--left-tower-overlay .start-lights {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .start-lights {
   left: calc((2rem + var(--timing-board-width)) + (100% - (2rem + var(--timing-board-width))) / 2);
 }
 
-.sim-canvas-panel--with-timing-tower > .start-lights {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .start-lights {
   left: calc((2rem + var(--timing-board-width)) + (100% - (2rem + var(--timing-board-width))) / 2);
 }
 
-.sim-shell--left-tower-overlay .race-data-panel {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-panel {
   z-index: 12;
   grid-template-columns: clamp(4.6rem, 7.5cqw, 7rem) minmax(0, 1fr) auto;
 }
 
-.sim-canvas-panel--with-timing-tower .race-data-panel {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-panel {
   z-index: 12;
   grid-template-columns: clamp(4.6rem, 7.5cqw, 7rem) minmax(0, 1fr) auto;
 }
 
 @container (min-width: 980px) {
-  .sim-shell--left-tower-overlay .race-data-panel--auto,
-  .sim-canvas-panel--with-timing-tower .race-data-panel--auto {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-panel--auto,
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-panel--auto {
     --race-data-banner-left: calc(var(--race-data-safe-left) + (var(--race-data-available-width) / 2));
     --race-data-banner-width: min(860px, calc(var(--race-data-available-width) - 0.5rem));
     --race-data-banner-translate-x: -50%;
   }
 }
 
-.sim-shell--left-tower-overlay .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-copy {
   padding-inline: 0.45rem 0.8rem;
 }
 
-.sim-canvas-panel--with-timing-tower .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-copy {
   padding-inline: 0.45rem 0.8rem;
 }
 
-.sim-shell--left-tower-overlay .race-data-number {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-number {
   padding-inline: 0.45rem;
   font-size: clamp(3.2rem, 6cqw, 5.3rem);
 }
 
-.sim-canvas-panel--with-timing-tower .race-data-number {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-number {
   padding-inline: 0.45rem;
   font-size: clamp(3.2rem, 6cqw, 5.3rem);
 }
 
-.sim-shell--left-tower-overlay .race-data-link {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-link {
   min-width: clamp(104px, 10cqw, 140px);
   margin-right: 0.55rem;
   padding-inline: 0.75rem;
   font-size: 0.64rem;
 }
 
-.sim-canvas-panel--with-timing-tower .race-data-link {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-link {
   min-width: clamp(104px, 10cqw, 140px);
   margin-right: 0.55rem;
   padding-inline: 0.75rem;
   font-size: 0.64rem;
 }
 
-.sim-timing,
-.sim-telemetry,
-.sim-canvas-panel {
+:where(.f1-sim-component, .f1-sim-component *).sim-timing,
+:where(.f1-sim-component, .f1-sim-component *).sim-telemetry,
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel {
   min-height: 0;
   background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
   border: 1px solid var(--line);
 }
 
-.sim-timing,
-.sim-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).sim-timing,
+:where(.f1-sim-component, .f1-sim-component *).sim-telemetry {
   position: relative;
   padding: 0.9rem;
   overflow: hidden;
 }
 
-.telemetry-stack {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-stack {
   display: grid;
   grid-auto-rows: max-content;
   align-content: start;
@@ -827,15 +826,15 @@
   scrollbar-width: thin;
 }
 
-.telemetry-stack > .sim-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-stack > .sim-telemetry {
   min-height: auto;
 }
 
-.telemetry-component {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-component {
   width: 100%;
 }
 
-.sim-timing.broadcast-tower {
+:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower {
   position: relative;
   width: min(100%, var(--timing-board-max-width));
   max-width: var(--timing-board-max-width);
@@ -847,15 +846,15 @@
   overflow: hidden;
 }
 
-.sim-shell--left-tower-overlay .sim-timing.broadcast-tower,
-.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing.broadcast-tower,
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
   position: absolute;
   width: var(--timing-board-width);
   max-width: var(--timing-board-width);
   height: auto;
 }
 
-.broadcast-tower-frame {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-tower-frame {
   position: relative;
   height: 100%;
   min-height: 0;
@@ -874,7 +873,7 @@
     0 24px 70px rgba(0, 0, 0, 0.42);
 }
 
-.broadcast-tower-frame::before {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-tower-frame::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -886,16 +885,16 @@
   opacity: 0.7;
 }
 
-.broadcast-brand,
-.broadcast-lap,
-.broadcast-race-control-banner,
-.broadcast-column-head,
-.timing-list {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-brand,
+:where(.f1-sim-component, .f1-sim-component *).broadcast-lap,
+:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner,
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head,
+:where(.f1-sim-component, .f1-sim-component *).timing-list {
   position: relative;
   z-index: 1;
 }
 
-.broadcast-brand {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-brand {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -905,7 +904,7 @@
   text-transform: uppercase;
 }
 
-.broadcast-f1-logo {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-f1-logo {
   display: block;
   width: 6.9rem;
   max-width: 74%;
@@ -913,7 +912,7 @@
   object-fit: contain;
 }
 
-.broadcast-lap {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-lap {
   display: flex;
   align-items: baseline;
   justify-content: center;
@@ -930,14 +929,14 @@
   text-transform: uppercase;
 }
 
-.broadcast-lap strong {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-lap strong {
   color: #fff;
   font-size: 1.62rem;
   font-weight: 900;
   letter-spacing: -0.04em;
 }
 
-.broadcast-race-control-banner {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner {
   display: grid;
   grid-template-columns: 3.4rem minmax(0, 1fr);
   align-items: center;
@@ -947,21 +946,21 @@
   text-transform: uppercase;
 }
 
-.broadcast-race-control-banner.is-safety-car {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner.is-safety-car {
   background: #e0ce00;
   color: #0a0b0d;
 }
 
-.broadcast-race-control-banner.is-red-flag {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner.is-red-flag {
   background: var(--race-control-red);
   color: #fff;
 }
 
-.broadcast-race-control-banner[hidden] {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner[hidden] {
   display: none;
 }
 
-.broadcast-race-control-banner span {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner span {
   display: grid;
   place-items: center;
   min-height: 2.65rem;
@@ -972,14 +971,14 @@
   letter-spacing: -0.06em;
 }
 
-.broadcast-race-control-banner strong {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner strong {
   padding: 0 0.65rem;
   font-size: 1.1rem;
   font-weight: 900;
   line-height: 0.9;
 }
 
-.broadcast-gap-mode-toggle {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle {
   position: relative;
   isolation: isolate;
   justify-self: end;
@@ -1002,7 +1001,7 @@
   cursor: pointer;
 }
 
-.broadcast-gap-mode-toggle::before {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle::before {
   content: '';
   position: absolute;
   inset: 11px 4px;
@@ -1017,24 +1016,24 @@
     transform 160ms ease;
 }
 
-.broadcast-gap-mode-toggle.is-active,
-.broadcast-gap-mode-toggle[aria-pressed='true'] {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle.is-active,
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle[aria-pressed='true'] {
   color: #f5f6f8;
 }
 
-.broadcast-gap-mode-toggle.is-active::before,
-.broadcast-gap-mode-toggle[aria-pressed='true']::before {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle.is-active::before,
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle[aria-pressed='true']::before {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.24);
   box-shadow: inset 0 0 0 1px rgba(244, 247, 251, 0.05);
 }
 
-.broadcast-gap-mode-toggle:hover::before {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle:hover::before {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.24);
 }
 
-.broadcast-gap-mode-toggle:active::before {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle:active::before {
   transform: scale(0.96);
 }
 
@@ -1047,7 +1046,7 @@
   outline-offset: 1px;
 }
 
-.broadcast-column-head {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head {
   display: grid;
   grid-template-columns: var(--timing-columns);
   align-items: center;
@@ -1063,55 +1062,55 @@
   text-transform: uppercase;
 }
 
-.broadcast-column-head span:nth-child(1),
-.broadcast-column-head span:nth-child(2),
-.broadcast-column-head span:nth-child(5) {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(1),
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(2),
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(5) {
   text-align: center;
 }
 
-.broadcast-column-head span:nth-child(1),
-.timing-position {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(1),
+:where(.f1-sim-component, .f1-sim-component *).timing-position {
   grid-column: 1;
 }
 
-.broadcast-column-head span:nth-child(2),
-.timing-icon {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(2),
+:where(.f1-sim-component, .f1-sim-component *).timing-icon {
   grid-column: 2;
 }
 
-.broadcast-column-head span:nth-child(3),
-.timing-name {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(3),
+:where(.f1-sim-component, .f1-sim-component *).timing-name {
   grid-column: 3;
 }
 
-.broadcast-column-head span:nth-child(4),
-.broadcast-gap-mode-toggle,
-.timing-gap {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(4),
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle,
+:where(.f1-sim-component, .f1-sim-component *).timing-gap {
   grid-column: 4;
 }
 
-.broadcast-column-head span:nth-child(5),
-.timing-tire {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(5),
+:where(.f1-sim-component, .f1-sim-component *).timing-tire {
   grid-column: 5;
 }
 
-.broadcast-column-head span:nth-child(3) {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(3) {
   padding-inline: 0.45rem;
 }
 
-.broadcast-column-head span:nth-child(4),
-.broadcast-gap-mode-toggle {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(4),
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle {
   padding-right: 0.25rem;
   text-align: right;
 }
 
-.broadcast-gap-mode-toggle {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle {
   padding-right: 0;
   text-align: center;
 }
 
-.timing-header,
-.telemetry-header {
+:where(.f1-sim-component, .f1-sim-component *).timing-header,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1121,21 +1120,21 @@
   text-transform: uppercase;
 }
 
-.timing-header span,
-.telemetry-header span {
+:where(.f1-sim-component, .f1-sim-component *).timing-header span,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-header span {
   color: var(--muted);
   font-family: var(--font-mono);
   font-size: 0.72rem;
   letter-spacing: 0.12em;
 }
 
-.timing-header strong {
+:where(.f1-sim-component, .f1-sim-component *).timing-header strong {
   color: var(--green);
   font-family: var(--font-mono);
   font-size: 0.74rem;
 }
 
-.timing-list {
+:where(.f1-sim-component, .f1-sim-component *).timing-list {
   flex: 1 1 auto;
   list-style: none;
   padding: 0;
@@ -1150,72 +1149,72 @@
   scrollbar-width: thin;
 }
 
-.timing-list > li {
+:where(.f1-sim-component, .f1-sim-component *).timing-list > li {
   min-width: 0;
   overflow: hidden;
 }
 
-.sim-shell--left-tower-overlay .timing-list {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .timing-list {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.sim-shell--left-tower-overlay .broadcast-column-head,
-.sim-shell--left-tower-overlay .timing-row {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .broadcast-column-head,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .timing-row {
   grid-template-columns: 1.7rem 1.8rem minmax(0, 1fr) minmax(44px, 3.45rem) 1.25rem;
 }
 
-.sim-shell--left-tower-overlay .broadcast-column-head {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .broadcast-column-head {
   overflow: hidden;
 }
 
-.sim-shell--left-tower-overlay .broadcast-column-head span {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .broadcast-column-head span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 @container (max-width: 255px) {
-  .sim-timing.broadcast-tower .broadcast-column-head,
-  .sim-timing.broadcast-tower .timing-row {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head,
+:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-row {
     grid-template-columns: 1.45rem 1.55rem minmax(2.25rem, 1fr) minmax(2.75rem, 3rem) minmax(0.9rem, 1rem);
   }
 
-  .sim-timing.broadcast-tower .broadcast-column-head {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head {
     font-size: 0.48rem;
     letter-spacing: 0.06em;
   }
 
-  .sim-timing.broadcast-tower .broadcast-column-head span:nth-child(3),
-  .sim-timing.broadcast-tower .timing-name {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head span:nth-child(3),
+:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-name {
     padding-inline: 0.28rem;
   }
 
-  .sim-timing.broadcast-tower .broadcast-column-head span:nth-child(4),
-  .sim-timing.broadcast-tower .broadcast-gap-mode-toggle,
-  .sim-timing.broadcast-tower .timing-gap {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head span:nth-child(4),
+:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-gap-mode-toggle,
+:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-gap {
     padding-right: 0.1rem;
   }
 
-  .sim-timing.broadcast-tower .timing-position {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-position {
     font-size: 0.72rem;
   }
 
-  .sim-timing.broadcast-tower .timing-name {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-name {
     gap: 0.16rem;
     font-size: 0.7rem;
   }
 
-  .sim-timing.broadcast-tower .timing-gap {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-gap {
     font-size: 0.62rem;
   }
 
-  .sim-timing.broadcast-tower .timing-tire {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-tire {
     font-size: 0.68rem;
   }
 }
 
-.timing-row {
+:where(.f1-sim-component, .f1-sim-component *).timing-row {
   display: grid;
   grid-template-columns: var(--timing-columns);
   gap: 0;
@@ -1231,26 +1230,26 @@
   cursor: pointer;
 }
 
-.broadcast-column-head,
-.timing-row {
+:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head,
+:where(.f1-sim-component, .f1-sim-component *).timing-row {
   min-width: 0;
 }
 
-.timing-row > * {
+:where(.f1-sim-component, .f1-sim-component *).timing-row > * {
   min-width: 0;
 }
 
-.sim-shell--left-tower-overlay .timing-row {
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .timing-row {
   min-width: 0;
 }
 
-.timing-row:hover {
+:where(.f1-sim-component, .f1-sim-component *).timing-row:hover {
   background:
     linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 22%, transparent), transparent 52%),
     rgba(28, 31, 38, 0.86);
 }
 
-.timing-row.is-selected {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected {
   color: #08090b;
   outline: 0;
   background: #f5f6f8;
@@ -1259,37 +1258,37 @@
     0 0 0 1px rgba(255, 255, 255, 0.68);
 }
 
-.timing-row.is-dnf {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf {
   color: rgba(244, 247, 251, 0.56);
   background:
     linear-gradient(90deg, rgba(148, 163, 184, 0.14), transparent 42%),
     rgba(10, 12, 17, 0.58);
 }
 
-.timing-row.is-dnf .timing-icon,
-.timing-row.is-dnf .timing-tire {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-icon,
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-tire {
   filter: grayscale(1);
   opacity: 0.64;
 }
 
-.timing-row.is-dnf .timing-position {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-position {
   color: rgba(244, 247, 251, 0.68);
   background: rgba(30, 35, 44, 0.78);
 }
 
-.timing-row.is-dnf .timing-gap {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-gap {
   color: rgba(244, 247, 251, 0.68);
 }
 
-.timing-position,
-.timing-icon,
-.timing-tire,
-.timing-gap {
+:where(.f1-sim-component, .f1-sim-component *).timing-position,
+:where(.f1-sim-component, .f1-sim-component *).timing-icon,
+:where(.f1-sim-component, .f1-sim-component *).timing-tire,
+:where(.f1-sim-component, .f1-sim-component *).timing-gap {
   font-family: var(--font-mono);
   font-weight: 700;
 }
 
-.timing-position {
+:where(.f1-sim-component, .f1-sim-component *).timing-position {
   align-self: stretch;
   display: grid;
   place-items: center;
@@ -1299,16 +1298,16 @@
   font-size: 0.78rem;
 }
 
-.timing-row:first-child .timing-position {
+:where(.f1-sim-component, .f1-sim-component *).timing-row:first-child .timing-position {
   background: var(--red);
 }
 
-.timing-row.is-selected .timing-position {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-position {
   color: #fff;
   background: var(--red);
 }
 
-.timing-icon {
+:where(.f1-sim-component, .f1-sim-component *).timing-icon {
   display: grid;
   place-items: center;
   justify-self: center;
@@ -1322,11 +1321,11 @@
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
 }
 
-.timing-team-icon {
+:where(.f1-sim-component, .f1-sim-component *).timing-team-icon {
   background: var(--team-color, var(--driver-color, var(--red)));
 }
 
-.timing-name {
+:where(.f1-sim-component, .f1-sim-component *).timing-name {
   min-width: 0;
   display: flex;
   align-items: center;
@@ -1342,13 +1341,13 @@
   text-transform: uppercase;
 }
 
-.timing-name > span:first-child {
+:where(.f1-sim-component, .f1-sim-component *).timing-name > span:first-child {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.timing-penalty-badge {
+:where(.f1-sim-component, .f1-sim-component *).timing-penalty-badge {
   flex: 0 0 auto;
   display: grid;
   place-items: center;
@@ -1365,7 +1364,7 @@
   box-shadow: 0 0 14px rgba(225, 6, 0, 0.42);
 }
 
-.timing-gap {
+:where(.f1-sim-component, .f1-sim-component *).timing-gap {
   color: rgba(244, 247, 251, 0.76);
   font-size: 0.66rem;
   overflow: hidden;
@@ -1375,36 +1374,36 @@
   white-space: nowrap;
 }
 
-.timing-row.is-selected .timing-gap {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-gap {
   color: #08090b;
 }
 
-.timing-tire {
+:where(.f1-sim-component, .f1-sim-component *).timing-tire {
   justify-self: center;
   color: #f3e35f;
   font-size: 0.72rem;
   text-align: center;
 }
 
-.timing-tire--s {
+:where(.f1-sim-component, .f1-sim-component *).timing-tire--s {
   color: #ff3b30;
 }
 
-.timing-tire--m {
+:where(.f1-sim-component, .f1-sim-component *).timing-tire--m {
   color: #f3e35f;
 }
 
-.timing-tire--h {
+:where(.f1-sim-component, .f1-sim-component *).timing-tire--h {
   color: #e9eef5;
 }
 
-.timing-row.is-selected .timing-tire--h,
-.timing-row.is-selected .timing-tire--m,
-.timing-row.is-selected .timing-tire--s {
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-tire--h,
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-tire--m,
+:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-tire--s {
   color: #08090b;
 }
 
-.sim-canvas-panel {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel {
   position: relative;
   min-height: var(--paddock-race-view-min-height, 620px);
   overflow: hidden;
@@ -1413,7 +1412,7 @@
     0 24px 70px rgba(0, 0, 0, 0.32);
 }
 
-.track-canvas {
+:where(.f1-sim-component, .f1-sim-component *).track-canvas {
   position: absolute;
   inset: 0;
   z-index: 0;
@@ -1423,13 +1422,13 @@
   touch-action: auto;
 }
 
-.track-canvas canvas {
+:where(.f1-sim-component, .f1-sim-component *).track-canvas canvas {
   width: 100% !important;
   height: 100% !important;
   display: block;
 }
 
-.physics-mode-indicator {
+:where(.f1-sim-component, .f1-sim-component *).physics-mode-indicator {
   position: absolute;
   z-index: 18;
   top: 0.85rem;
@@ -1441,15 +1440,15 @@
   pointer-events: none;
 }
 
-.physics-mode-indicator--arcade {
+:where(.f1-sim-component, .f1-sim-component *).physics-mode-indicator--arcade {
   background: #168cff;
 }
 
-.physics-mode-indicator--advanced {
+:where(.f1-sim-component, .f1-sim-component *).physics-mode-indicator--advanced {
   background: #e10600;
 }
 
-.race-telemetry-drawer {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer {
   --telemetry-drawer-width: min(390px, max(300px, 30cqw));
   --race-toolbar-height: 3.4rem;
   position: relative;
@@ -1465,50 +1464,50 @@
 }
 
 @container (max-width: 520px) {
-  .race-telemetry-drawer--responsive-narrow {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow {
     --telemetry-drawer-width: min(88%, 360px);
     height: auto;
   }
 
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar {
     flex-direction: column;
     align-items: stretch;
     gap: 0.5rem;
   }
 
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar .camera-controls--external {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar .camera-controls--external {
     width: 100%;
     flex: 0 0 auto;
     justify-content: stretch;
   }
 
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar .camera-controls--external button {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar .camera-controls--external button {
     flex: 1 1 min(9.25rem, 44%);
   }
 
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.45rem;
     width: 100%;
   }
 
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls .sim-control,
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls .telemetry-drawer-toggle {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls .sim-control,
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls .telemetry-drawer-toggle {
     width: 100%;
     min-width: 0;
     white-space: nowrap;
   }
 
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__race,
-  .race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__race,
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
     flex: 0 0 auto;
     margin-right: 0;
     padding-right: 0;
     margin-bottom: 0;
   }
 
-  .race-telemetry-drawer--responsive-narrow .telemetry-drawer {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .telemetry-drawer {
     top: 0.75rem;
     right: 0.75rem;
     bottom: 0.75rem;
@@ -1524,12 +1523,12 @@
       transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
-  .race-telemetry-drawer--responsive-narrow.is-telemetry-open .telemetry-drawer {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .telemetry-drawer {
     transform: translate3d(0, 0, 0);
   }
 }
 
-.race-telemetry-drawer__toolbar {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__toolbar {
   position: relative;
   z-index: 13;
   display: flex;
@@ -1542,11 +1541,11 @@
   border-bottom: 1px solid var(--line);
 }
 
-.race-telemetry-drawer__toolbar .camera-controls--external {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__toolbar .camera-controls--external {
   flex: 1 1 auto;
 }
 
-.race-telemetry-drawer__race {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__race {
   position: relative;
   min-width: 0;
   display: flex;
@@ -1558,17 +1557,17 @@
   transition: padding-right 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
   padding-right: var(--telemetry-drawer-width);
 }
 
-.race-telemetry-drawer__race > .sim-canvas-panel {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__race > .sim-canvas-panel {
   flex: 1 1 auto;
   min-height: 0;
   height: 100%;
 }
 
-.race-telemetry-drawer__controls {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__controls {
   min-width: 0;
   display: flex;
   flex-wrap: wrap;
@@ -1576,13 +1575,13 @@
   gap: 0.45rem;
 }
 
-.race-telemetry-drawer__controls .sim-control,
-.race-telemetry-drawer__controls .telemetry-drawer-toggle {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__controls .sim-control,
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__controls .telemetry-drawer-toggle {
   min-height: 44px;
   padding: 0.62rem 0.72rem;
 }
 
-.telemetry-drawer-toggle {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer-toggle {
   border: 1px solid rgba(255, 255, 255, 0.26);
   color: #08090b;
   background: var(--green);
@@ -1594,7 +1593,7 @@
   cursor: pointer;
 }
 
-.telemetry-drawer {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer {
   position: absolute;
   z-index: 11;
   top: 0;
@@ -1620,14 +1619,14 @@
     opacity 180ms ease;
 }
 
-.race-telemetry-drawer.is-telemetry-open .telemetry-drawer {
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer.is-telemetry-open .telemetry-drawer {
   clip-path: inset(0);
   transform: translate3d(0, 0, 0);
   opacity: 1;
   pointer-events: auto;
 }
 
-.telemetry-drawer__content {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer__content {
   height: 100%;
   padding: 0.72rem;
   min-height: 0;
@@ -1635,11 +1634,11 @@
   scrollbar-width: thin;
 }
 
-.telemetry-drawer__content > .telemetry-stack {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer__content > .telemetry-stack {
   height: 100%;
 }
 
-.camera-controls {
+:where(.f1-sim-component, .f1-sim-component *).camera-controls {
   position: absolute;
   top: 1rem;
   left: 1rem;
@@ -1653,7 +1652,7 @@
   backdrop-filter: blur(14px);
 }
 
-.camera-controls--external {
+:where(.f1-sim-component, .f1-sim-component *).camera-controls--external {
   position: relative;
   top: auto;
   left: auto;
@@ -1662,7 +1661,7 @@
   background: rgba(8, 9, 11, 0.84);
 }
 
-.camera-controls button {
+:where(.f1-sim-component, .f1-sim-component *).camera-controls button {
   min-width: 44px;
   min-height: 44px;
   border: 1px solid rgba(255, 255, 255, 0.22);
@@ -1677,11 +1676,11 @@
   cursor: pointer;
 }
 
-.camera-controls button:hover {
+:where(.f1-sim-component, .f1-sim-component *).camera-controls button:hover {
   border-color: var(--text);
 }
 
-.steward-message {
+:where(.f1-sim-component, .f1-sim-component *).steward-message {
   --steward-panel-bg: rgba(8, 9, 11, 0.92);
   --steward-chip-bg: color-mix(in srgb, var(--steward-color, var(--yellow)) 18%, rgba(8, 9, 11, 0.94));
   --steward-chip-color: var(--steward-color, var(--yellow));
@@ -1709,24 +1708,24 @@
     transform 160ms ease;
 }
 
-.steward-message.is-penalty {
+:where(.f1-sim-component, .f1-sim-component *).steward-message.is-penalty {
   --steward-panel-bg: linear-gradient(110deg, rgba(68, 6, 8, 0.96), rgba(8, 9, 11, 0.94) 58%);
   --steward-chip-bg: #e10600;
   --steward-chip-color: #fff;
 }
 
-.steward-message.is-warning {
+:where(.f1-sim-component, .f1-sim-component *).steward-message.is-warning {
   --steward-panel-bg: linear-gradient(110deg, rgba(70, 56, 8, 0.96), rgba(8, 9, 11, 0.94) 58%);
   --steward-chip-bg: var(--yellow);
   --steward-chip-color: #111318;
 }
 
-.steward-message.is-hidden {
+:where(.f1-sim-component, .f1-sim-component *).steward-message.is-hidden {
   opacity: 0;
   transform: translate(-50%, -0.55rem);
 }
 
-.steward-message__kicker {
+:where(.f1-sim-component, .f1-sim-component *).steward-message__kicker {
   grid-row: span 2;
   align-self: center;
   min-width: 4.9rem;
@@ -1743,7 +1742,7 @@
   text-transform: uppercase;
 }
 
-.steward-message strong {
+:where(.f1-sim-component, .f1-sim-component *).steward-message strong {
   min-width: 0;
   overflow-wrap: anywhere;
   overflow: hidden;
@@ -1754,7 +1753,7 @@
   white-space: normal;
 }
 
-.steward-message span:last-child {
+:where(.f1-sim-component, .f1-sim-component *).steward-message span:last-child {
   min-width: 0;
   overflow-wrap: anywhere;
   overflow: hidden;
@@ -1764,7 +1763,7 @@
   white-space: normal;
 }
 
-.fps-counter {
+:where(.f1-sim-component, .f1-sim-component *).fps-counter {
   position: absolute;
   top: 1rem;
   right: 1rem;
@@ -1785,12 +1784,12 @@
   backdrop-filter: blur(10px);
 }
 
-.fps-counter strong {
+:where(.f1-sim-component, .f1-sim-component *).fps-counter strong {
   color: #fff;
   font-size: 0.74rem;
 }
 
-.race-finish-panel {
+:where(.f1-sim-component, .f1-sim-component *).race-finish-panel {
   position: absolute;
   z-index: 9;
   left: 50%;
@@ -1813,7 +1812,7 @@
   text-transform: uppercase;
 }
 
-.race-finish-panel span {
+:where(.f1-sim-component, .f1-sim-component *).race-finish-panel span {
   color: var(--muted);
   font-family: var(--font-mono);
   font-size: 0.66rem;
@@ -1821,14 +1820,14 @@
   letter-spacing: 0.12em;
 }
 
-.race-finish-panel > strong {
+:where(.f1-sim-component, .f1-sim-component *).race-finish-panel > strong {
   grid-column: 1;
   font-size: clamp(1.45rem, 3vw, 2.4rem);
   font-weight: 900;
   line-height: 0.92;
 }
 
-.race-finish-panel ol {
+:where(.f1-sim-component, .f1-sim-component *).race-finish-panel ol {
   grid-column: 2;
   grid-row: 1 / span 2;
   display: grid;
@@ -1839,7 +1838,7 @@
   list-style: none;
 }
 
-.race-finish-panel li {
+:where(.f1-sim-component, .f1-sim-component *).race-finish-panel li {
   display: grid;
   grid-template-columns: 2.2rem minmax(0, 1fr);
   gap: 0.45rem;
@@ -1848,25 +1847,25 @@
   font-size: 0.72rem;
 }
 
-.race-finish-panel li strong {
+:where(.f1-sim-component, .f1-sim-component *).race-finish-panel li strong {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.standalone-control {
+:where(.f1-sim-component, .f1-sim-component *).standalone-control {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 0;
 }
 
-.standalone-control > .sim-control {
+:where(.f1-sim-component, .f1-sim-component *).standalone-control > .sim-control {
   width: 100%;
 }
 
-.start-lights {
+:where(.f1-sim-component, .f1-sim-component *).start-lights {
   position: absolute;
   top: 4.15rem;
   left: 50%;
@@ -1887,24 +1886,24 @@
   backdrop-filter: blur(14px);
 }
 
-.start-lights[hidden] {
+:where(.f1-sim-component, .f1-sim-component *).start-lights[hidden] {
   display: none;
 }
 
-.start-lights__label {
+:where(.f1-sim-component, .f1-sim-component *).start-lights__label {
   color: rgba(244, 247, 251, 0.78);
   font-size: 0.62rem;
   font-weight: 900;
   letter-spacing: 0.16em;
 }
 
-.start-lights__gantry {
+:where(.f1-sim-component, .f1-sim-component *).start-lights__gantry {
   display: grid;
   grid-template-columns: repeat(5, 1.35rem);
   gap: 0.34rem;
 }
 
-.start-lights__gantry span {
+:where(.f1-sim-component, .f1-sim-component *).start-lights__gantry span {
   width: 1.35rem;
   height: 1.35rem;
   border-radius: 50%;
@@ -1916,7 +1915,7 @@
   transition: background 80ms linear, box-shadow 80ms linear, border-color 80ms linear;
 }
 
-.start-lights__gantry span.is-lit {
+:where(.f1-sim-component, .f1-sim-component *).start-lights__gantry span.is-lit {
   background: #e10600;
   border-color: rgba(255, 210, 210, 0.86);
   box-shadow:
@@ -1924,17 +1923,17 @@
     0 0 18px rgba(225, 6, 0, 0.72);
 }
 
-.start-lights.is-lights-out .start-lights__label {
+:where(.f1-sim-component, .f1-sim-component *).start-lights.is-lights-out .start-lights__label {
   color: #fff;
 }
 
-.start-lights.is-lights-out .start-lights__gantry span {
+:where(.f1-sim-component, .f1-sim-component *).start-lights.is-lights-out .start-lights__gantry span {
   background: #08090b;
   border-color: rgba(255, 255, 255, 0.12);
   box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.9);
 }
 
-.paddock-loading {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading {
   position: absolute;
   inset: 0;
   z-index: 30;
@@ -1955,13 +1954,13 @@
   backdrop-filter: blur(10px);
 }
 
-.paddock-loading__lights {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights {
   display: grid;
   grid-template-columns: repeat(5, 1rem);
   gap: 0.28rem;
 }
 
-.paddock-loading__lights span {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span {
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
@@ -1973,31 +1972,31 @@
   animation: paddock-loading-pulse 900ms ease-in-out infinite;
 }
 
-.paddock-loading__lights span:nth-child(2) {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(2) {
   animation-delay: 90ms;
 }
 
-.paddock-loading__lights span:nth-child(3) {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(3) {
   animation-delay: 180ms;
 }
 
-.paddock-loading__lights span:nth-child(4) {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(4) {
   animation-delay: 270ms;
 }
 
-.paddock-loading__lights span:nth-child(5) {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(5) {
   animation-delay: 360ms;
 }
 
-.paddock-loading__label {
+:where(.f1-sim-component, .f1-sim-component *).paddock-loading__label {
   text-shadow: 0 0 16px rgba(225, 6, 0, 0.48);
 }
 
-[data-paddock-component].is-loaded > .paddock-loading {
+:where(.f1-sim-component, .f1-sim-component *)[data-paddock-component].is-loaded > .paddock-loading {
   opacity: 0;
 }
 
-.paddock-unsupported-size {
+:where(.f1-sim-component, .f1-sim-component *).paddock-unsupported-size {
   position: absolute;
   inset: 0;
   z-index: 60;
@@ -2015,14 +2014,14 @@
   text-transform: uppercase;
 }
 
-.paddock-unsupported-size strong {
+:where(.f1-sim-component, .f1-sim-component *).paddock-unsupported-size strong {
   color: var(--yellow);
   font-size: 0.82rem;
   font-weight: 900;
   letter-spacing: 0.12em;
 }
 
-.paddock-unsupported-size span {
+:where(.f1-sim-component, .f1-sim-component *).paddock-unsupported-size span {
   max-width: 28rem;
   color: var(--muted);
   font-size: 0.68rem;
@@ -2031,29 +2030,29 @@
   line-height: 1.35;
 }
 
-[data-paddock-size-unsupported='true'] {
+:where(.f1-sim-component, .f1-sim-component *)[data-paddock-size-unsupported='true'] {
   position: relative;
   min-block-size: 7rem;
   overflow: hidden;
 }
 
-[data-paddock-size-unsupported='true'] > :not(.paddock-unsupported-size) {
+:where(.f1-sim-component, .f1-sim-component *)[data-paddock-size-unsupported='true'] > :not(.paddock-unsupported-size) {
   visibility: hidden;
   pointer-events: none;
 }
 
-[data-paddock-size-unsupported='true'] > .paddock-unsupported-size {
+:where(.f1-sim-component, .f1-sim-component *)[data-paddock-size-unsupported='true'] > .paddock-unsupported-size {
   display: grid;
   visibility: visible;
   pointer-events: auto;
 }
 
-[data-f1-simulator-shell][data-paddock-size-unsupported='true'] {
+:where(.f1-sim-component, .f1-sim-component *)[data-f1-simulator-shell][data-paddock-size-unsupported='true'] {
   display: grid;
   min-block-size: min(100svh, 24rem);
 }
 
-[data-f1-simulator-shell][data-paddock-size-unsupported='true'] > .sim-workspace {
+:where(.f1-sim-component, .f1-sim-component *)[data-f1-simulator-shell][data-paddock-size-unsupported='true'] > .sim-workspace {
   display: none;
 }
 
@@ -2095,7 +2094,7 @@
   }
 }
 
-.race-data-panel {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel {
   --race-data-banner-left: 50%;
   --race-data-banner-width: min(1080px, calc(100% - 1.5rem));
   --race-data-banner-translate-x: -50%;
@@ -2123,19 +2122,19 @@
   transition: opacity 180ms ease, transform 180ms ease, width 180ms ease, min-height 180ms ease, background-color 180ms ease;
 }
 
-.race-data-panel.is-hidden {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-hidden {
   opacity: 0;
   pointer-events: none;
   transform: translate(var(--race-data-banner-translate-x), 18px);
 }
 
-.race-data-panel--custom {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--custom {
   --race-data-banner-left: 50%;
   --race-data-banner-width: min(1080px, calc(100% - 1.5rem));
   --race-data-banner-translate-x: -50%;
 }
 
-.race-data-panel::before {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -2146,7 +2145,7 @@
   pointer-events: none;
 }
 
-.race-data-panel::after {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel::after {
   content: "";
   position: absolute;
   top: 0;
@@ -2157,15 +2156,15 @@
   pointer-events: none;
 }
 
-.race-data-copy,
-.race-data-number,
-.race-data-link,
-.race-data-dismiss {
+:where(.f1-sim-component, .f1-sim-component *).race-data-copy,
+:where(.f1-sim-component, .f1-sim-component *).race-data-number,
+:where(.f1-sim-component, .f1-sim-component *).race-data-link,
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss {
   position: relative;
   z-index: 1;
 }
 
-.race-data-dismiss {
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss {
   --race-data-dismiss-icon-color: rgba(244, 247, 251, 0.9);
   --race-data-dismiss-fill: rgba(8, 10, 16, 0.58);
   --race-data-dismiss-ring: rgba(244, 247, 251, 0.2);
@@ -2194,8 +2193,8 @@
   z-index: 4;
 }
 
-.race-data-dismiss::before,
-.race-data-dismiss::after {
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::before,
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -2206,32 +2205,32 @@
   border-radius: 999px;
 }
 
-.race-data-dismiss::before {
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::before {
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.race-data-dismiss::after {
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
 
-.race-data-dismiss:hover {
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss:hover {
   --race-data-dismiss-icon-color: #fff;
   --race-data-dismiss-fill: color-mix(in srgb, var(--driver-color, var(--red)) 48%, rgba(8, 10, 16, 0.72));
   --race-data-dismiss-ring: color-mix(in srgb, var(--driver-color, var(--red)) 64%, #ffffff);
   color: transparent;
 }
 
-.race-data-dismiss:focus-visible {
+:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss:focus-visible {
   outline: 2px solid var(--driver-color, var(--red));
   outline-offset: 2px;
 }
 
-.race-data-panel--with-telemetry .race-data-dismiss,
-.race-data-panel.is-radio-mode .race-data-dismiss {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-dismiss,
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-dismiss {
   z-index: 4;
 }
 
-.race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).race-data-copy {
   grid-column: 2;
   grid-row: 1;
   min-width: 0;
@@ -2239,7 +2238,7 @@
   padding: 0.92rem 1.45rem 0.98rem 0.55rem;
 }
 
-.race-data-kicker {
+:where(.f1-sim-component, .f1-sim-component *).race-data-kicker {
   display: block;
   margin-bottom: 0.22rem;
   color: var(--driver-color, var(--red));
@@ -2250,7 +2249,7 @@
   text-transform: uppercase;
 }
 
-.race-data-copy strong {
+:where(.f1-sim-component, .f1-sim-component *).race-data-copy strong {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2261,7 +2260,7 @@
   text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 24px color-mix(in srgb, var(--driver-color, var(--red)) 28%, transparent);
 }
 
-.race-data-subtitle {
+:where(.f1-sim-component, .f1-sim-component *).race-data-subtitle {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2275,7 +2274,7 @@
   text-transform: uppercase;
 }
 
-.race-data-number {
+:where(.f1-sim-component, .f1-sim-component *).race-data-number {
   grid-column: 1;
   grid-row: 1;
   display: grid;
@@ -2297,16 +2296,16 @@
   transition: opacity 160ms ease, transform 160ms ease;
 }
 
-.race-data-panel.is-project-mode .race-data-number {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-project-mode .race-data-number {
   transform: translateX(-8px);
 }
 
-.race-data-panel--with-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry {
   grid-template-columns: clamp(6.5rem, 11vw, 8.7rem) minmax(0, 1fr) minmax(150px, 0.48fr) auto;
   min-height: 112px;
 }
 
-.race-data-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).race-data-telemetry {
   position: relative;
   z-index: 1;
   grid-column: 3;
@@ -2319,53 +2318,53 @@
   border-left: 1px solid var(--line);
 }
 
-.race-data-telemetry__bars {
+:where(.f1-sim-component, .f1-sim-component *).race-data-telemetry__bars {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.28rem;
   min-width: 0;
 }
 
-.race-data-sector-bar {
+:where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar {
   min-height: 3.85rem;
   padding: 0.52rem 0.42rem;
 }
 
-.race-data-panel--with-telemetry .race-data-link {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-link {
   grid-column: 4;
 }
 
-.race-data-panel.is-radio-mode .race-data-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-telemetry {
   display: none;
 }
 
-.race-data-panel.is-radio-mode {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode {
   grid-template-columns: minmax(0, 1fr);
 }
 
-.race-data-panel.is-radio-mode .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-copy {
   grid-column: 1;
   padding-left: 1.45rem;
 }
 
-.race-data-panel.is-radio-mode .race-data-copy strong {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-copy strong {
   color: #f8fafc;
   font-size: clamp(1.6rem, 3.2vw, 2.35rem);
 }
 
-.race-data-panel[data-idle-mode="quote"] .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel[data-idle-mode="quote"] .race-data-copy {
   padding-top: 0.8rem;
   padding-bottom: 0.88rem;
 }
 
-.race-data-panel[data-idle-mode="quote"] .race-data-copy strong {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel[data-idle-mode="quote"] .race-data-copy strong {
   color: rgba(244, 247, 251, 0.78);
   font-size: clamp(0.95rem, 1.55vw, 1.2rem);
   letter-spacing: 0.05em;
   line-height: 1;
 }
 
-.race-data-panel[data-idle-mode="quote"] .race-data-subtitle {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel[data-idle-mode="quote"] .race-data-subtitle {
   max-width: 100%;
   margin-top: 0.34rem;
   color: #fff;
@@ -2377,15 +2376,15 @@
   text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52), 0 0 22px color-mix(in srgb, var(--driver-color, var(--red)) 30%, transparent);
 }
 
-.race-data-panel.is-radio-mode .race-data-number {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-number {
   display: none;
 }
 
-.race-data-panel.is-radio-mode .race-data-link {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-link {
   display: none;
 }
 
-.race-data-link {
+:where(.f1-sim-component, .f1-sim-component *).race-data-link {
   grid-column: 3;
   grid-row: 1;
   display: grid;
@@ -2421,12 +2420,12 @@
   line-height: 1;
 }
 
-.race-data-link:hover {
+:where(.f1-sim-component, .f1-sim-component *).race-data-link:hover {
   color: #fff;
   filter: brightness(1.12);
 }
 
-.telemetry-grid dt {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-grid dt {
   display: block;
   min-width: 0;
   overflow: hidden;
@@ -2440,7 +2439,7 @@
   text-transform: uppercase;
 }
 
-.telemetry-grid dd {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-grid dd {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2450,18 +2449,18 @@
   font-size: clamp(0.86rem, 1.6vw, 1.15rem);
 }
 
-.telemetry-header {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-header {
   align-items: flex-start;
 }
 
-.telemetry-header strong {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-header strong {
   min-width: 0;
   text-align: right;
   font-size: 0.92rem;
   text-transform: uppercase;
 }
 
-.telemetry-grid {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-grid {
   margin: 1rem 0 0;
   display: grid;
   grid-template-columns: 1fr;
@@ -2469,7 +2468,7 @@
   background: var(--line);
 }
 
-.telemetry-grid > div {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-grid > div {
   min-width: 0;
   display: flex;
   justify-content: space-between;
@@ -2478,12 +2477,12 @@
   background: var(--surface-panel);
 }
 
-.telemetry-grid dd {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-grid dd {
   color: var(--text);
   text-align: right;
 }
 
-.telemetry-module-header {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-module-header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
@@ -2492,7 +2491,7 @@
   text-transform: uppercase;
 }
 
-.telemetry-module-header span {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-module-header span {
   color: var(--muted);
   font-family: var(--font-mono);
   font-size: 0.66rem;
@@ -2500,7 +2499,7 @@
   letter-spacing: 0.14em;
 }
 
-.telemetry-module-header strong {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-module-header strong {
   color: var(--green);
   font-family: var(--font-mono);
   font-size: 0.7rem;
@@ -2508,13 +2507,13 @@
   letter-spacing: 0.08em;
 }
 
-.telemetry-sector-bars {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bars {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.35rem;
 }
 
-.telemetry-sector-bar {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar {
   --sector-status-color: var(--green);
   --sector-status-bg: color-mix(in srgb, var(--sector-status-color) 10%, rgba(8, 10, 14, 0.94));
   position: relative;
@@ -2530,49 +2529,49 @@
   box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.05);
 }
 
-.telemetry-sector-bar.is-active {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-active {
   border-color: color-mix(in srgb, var(--green) 65%, rgba(255, 255, 255, 0.22));
   box-shadow:
     inset 0 -2px 0 var(--green),
     0 0 24px rgba(20, 199, 132, 0.12);
 }
 
-.telemetry-sector-bar.is-complete {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-complete {
   color: #08090b;
 }
 
-.telemetry-sector-bar.is-overall-best,
-.telemetry-sector-table td.is-overall-best {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-overall-best,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-overall-best {
   --sector-status-color: #c77dff;
   --sector-status-bg: color-mix(in srgb, #c77dff 23%, rgba(8, 10, 14, 0.94));
   color: #fff;
 }
 
-.telemetry-sector-bar.is-personal-best,
-.telemetry-sector-table td.is-personal-best {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-personal-best,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-personal-best {
   --sector-status-color: var(--green);
   --sector-status-bg: color-mix(in srgb, var(--green) 20%, rgba(8, 10, 14, 0.94));
   color: #ecfff7;
 }
 
-.telemetry-sector-bar.is-slower,
-.telemetry-sector-table td.is-slower {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-slower,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-slower {
   --sector-status-color: var(--yellow);
   --sector-status-bg: color-mix(in srgb, var(--yellow) 16%, rgba(8, 10, 14, 0.94));
   color: #fff2b8;
 }
 
-.telemetry-sector-table td.is-overall-best,
-.telemetry-sector-table td.is-personal-best,
-.telemetry-sector-table td.is-slower {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-overall-best,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-personal-best,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-slower {
   background:
     linear-gradient(90deg, color-mix(in srgb, var(--sector-status-color) 28%, transparent), transparent 72%),
     var(--sector-status-bg);
   box-shadow: inset 3px 0 0 var(--sector-status-color);
 }
 
-.telemetry-sector-bar span,
-.telemetry-sector-bar strong {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar span,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar strong {
   position: relative;
   z-index: 1;
   display: block;
@@ -2581,14 +2580,14 @@
   text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
 }
 
-.telemetry-sector-bar span {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar span {
   margin-bottom: 0.4rem;
   font-size: 0.58rem;
   font-weight: 900;
   letter-spacing: 0.16em;
 }
 
-.telemetry-sector-bar strong {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar strong {
   overflow: hidden;
   font-size: 0.72rem;
   font-weight: 900;
@@ -2596,7 +2595,7 @@
   white-space: nowrap;
 }
 
-.telemetry-sector-banner {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner {
   --sector-status-color: var(--green);
   --sector-banner-color: var(--driver-color, var(--green));
   position: absolute;
@@ -2608,6 +2607,7 @@
   gap: 0.65rem;
   align-items: stretch;
   width: min(560px, calc(100% - 2rem));
+  min-height: 88px;
   padding: 0.65rem;
   color: var(--text);
   background:
@@ -2619,17 +2619,17 @@
   box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.12);
 }
 
-.sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
   bottom: 8.3rem;
 }
 
-.telemetry-sector-banner__copy {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy {
   min-width: 0;
   padding: 0.28rem 0.35rem;
   text-transform: uppercase;
 }
 
-.telemetry-sector-banner__copy span {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy span {
   display: block;
   color: var(--sector-banner-color);
   font-family: var(--font-mono);
@@ -2638,12 +2638,12 @@
   letter-spacing: 0.14em;
 }
 
-.telemetry-sector-banner__copy b {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy b {
   color: inherit;
   font: inherit;
 }
 
-.telemetry-sector-banner__copy strong {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy strong {
   display: block;
   margin-top: 0.2rem;
   overflow: hidden;
@@ -2654,7 +2654,7 @@
   white-space: nowrap;
 }
 
-.telemetry-sector-banner__copy em {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy em {
   display: block;
   margin-top: 0.28rem;
   color: rgba(244, 247, 251, 0.68);
@@ -2665,15 +2665,15 @@
   letter-spacing: 0.12em;
 }
 
-.telemetry-sector-banner__bars {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__bars {
   align-self: stretch;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.32rem;
 }
 
-.telemetry-lap-table,
-.telemetry-sector-table {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table {
   width: 100%;
   min-width: 0;
   table-layout: fixed;
@@ -2683,20 +2683,20 @@
   font-family: var(--font-mono);
 }
 
-.telemetry-lap-table tr,
-.telemetry-sector-table tr {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table tr,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table tr {
   border-bottom: 1px solid rgba(255, 255, 255, 0.075);
 }
 
-.telemetry-lap-table tr:last-child,
-.telemetry-sector-table tr:last-child {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table tr:last-child,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table tr:last-child {
   border-bottom: 0;
 }
 
-.telemetry-lap-table th,
-.telemetry-lap-table td,
-.telemetry-sector-table th,
-.telemetry-sector-table td {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table th,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table td,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table th,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td {
   overflow: hidden;
   padding: 0.55rem 0.5rem;
   font-size: 0.68rem;
@@ -2706,8 +2706,8 @@
   white-space: nowrap;
 }
 
-.telemetry-lap-table th,
-.telemetry-sector-table th {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table th,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table th {
   color: var(--muted);
   font-weight: 800;
   letter-spacing: 0.09em;
@@ -2715,20 +2715,20 @@
   text-transform: uppercase;
 }
 
-.telemetry-lap-table td,
-.telemetry-sector-table td {
+:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table td,
+:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td {
   color: var(--text);
   font-weight: 900;
 }
 
-.car-overview {
+:where(.f1-sim-component, .f1-sim-component *).car-overview {
   position: relative;
   margin-top: 1rem;
   padding-top: 0.85rem;
   border-top: 1px solid var(--line);
 }
 
-.car-overview-header {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2737,7 +2737,7 @@
   text-transform: uppercase;
 }
 
-.car-overview-header span {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-header span {
   color: var(--muted);
   font-family: var(--font-mono);
   font-size: 0.64rem;
@@ -2745,21 +2745,21 @@
   letter-spacing: 0.12em;
 }
 
-.car-overview-header strong {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-header strong {
   color: var(--driver-color, var(--red));
   font-family: var(--font-mono);
   font-size: 0.72rem;
   letter-spacing: 0.08em;
 }
 
-.car-overview-toggle {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.35rem;
   margin-bottom: 0.7rem;
 }
 
-.car-overview-toggle button {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle button {
   min-width: 0;
   min-height: 44px;
   color: var(--muted);
@@ -2773,14 +2773,14 @@
   cursor: pointer;
 }
 
-.car-overview-toggle button.is-active,
-.car-overview-toggle button[aria-pressed='true'] {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle button.is-active,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle button[aria-pressed='true'] {
   color: #fff;
   background: color-mix(in srgb, var(--driver-color, var(--red)) 30%, rgba(255, 255, 255, 0.075));
   border-color: color-mix(in srgb, var(--driver-color, var(--red)) 72%, rgba(255, 255, 255, 0.18));
 }
 
-.car-overview-diagram {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram {
   --arrow-line: color-mix(in srgb, var(--driver-color, var(--red)) 72%, rgba(255, 255, 255, 0.36));
   position: relative;
   display: grid;
@@ -2796,7 +2796,7 @@
   border: 1px solid rgba(255, 255, 255, 0.12);
 }
 
-.car-overview-diagram::before {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram::before {
   content: '';
   position: absolute;
   inset: 0.55rem;
@@ -2809,7 +2809,7 @@
   opacity: 0.62;
 }
 
-.car-overview-diagram::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram::after {
   content: '';
   position: absolute;
   inset: 0;
@@ -2822,7 +2822,7 @@
   opacity: 0.44;
 }
 
-.car-overview-car {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-car {
   position: relative;
   z-index: 1;
   grid-column: 1 / -1;
@@ -2837,7 +2837,7 @@
   transform: skewX(-10deg);
 }
 
-.car-overview-car::before {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-car::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -2851,7 +2851,7 @@
     0 0 28px color-mix(in srgb, var(--driver-color, var(--red)) 44%, transparent);
 }
 
-.car-overview-car::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-car::after {
   content: '';
   position: absolute;
   inset: 0.58rem 0.86rem;
@@ -2862,7 +2862,7 @@
   opacity: 0.34;
 }
 
-.car-overview-car-image {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-car-image {
   position: absolute;
   z-index: 2;
   inset: 0.25rem 0.2rem;
@@ -2876,9 +2876,9 @@
   transform: skewX(10deg);
 }
 
-.car-overview-icon,
-.car-overview-number,
-.car-overview-core-stat {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-icon,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-number,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-core-stat {
   position: relative;
   z-index: 3;
   transform: skewX(10deg);
@@ -2886,12 +2886,12 @@
   font-weight: 900;
 }
 
-.car-overview-icon {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-icon {
   font-size: 0.86rem;
   letter-spacing: -0.07em;
 }
 
-.car-overview-number {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-number {
   position: absolute;
   right: 0.42rem;
   bottom: 0.18rem;
@@ -2899,7 +2899,7 @@
   font-size: 0.54rem;
 }
 
-.car-overview-core-stat {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-core-stat {
   position: absolute;
   left: 50%;
   bottom: -1.05rem;
@@ -2910,7 +2910,7 @@
   transform: translateX(-50%) skewX(10deg);
 }
 
-.car-overview-cell {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell {
   position: relative;
   z-index: 1;
   min-width: 0;
@@ -2920,7 +2920,7 @@
   box-shadow: inset 3px 0 0 color-mix(in srgb, var(--driver-color, var(--red)) 78%, transparent);
 }
 
-.car-overview-cell::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell::after {
   content: '';
   position: absolute;
   width: 0.42rem;
@@ -2929,76 +2929,76 @@
   transform: rotate(45deg);
 }
 
-.car-overview-cell--slot-1 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-1 {
   grid-column: 1;
   grid-row: 1;
   justify-self: stretch;
   width: auto;
 }
 
-.car-overview-cell--slot-1::after,
-.car-overview-cell--slot-2::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-1::after,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-2::after {
   right: 50%;
   bottom: -0.25rem;
   transform: translateX(50%) rotate(45deg);
 }
 
-.car-overview-cell--slot-2 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-2 {
   grid-column: 2;
   grid-row: 1;
   justify-self: stretch;
   width: auto;
 }
 
-.car-overview-cell--slot-3 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3 {
   grid-column: 1;
   grid-row: 2;
   justify-self: stretch;
   width: auto;
 }
 
-.car-overview-cell--slot-4 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4 {
   grid-column: 2;
   grid-row: 2;
   justify-self: stretch;
   width: auto;
 }
 
-.car-overview-cell--slot-3::after,
-.car-overview-cell--slot-4::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3::after,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4::after {
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
 }
 
-.car-overview-cell--slot-3::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3::after {
   right: -0.25rem;
 }
 
-.car-overview-cell--slot-4::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4::after {
   left: -0.25rem;
 }
 
-.car-overview-cell--slot-5,
-.car-overview-cell--slot-6 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6 {
   grid-row: 4;
 }
 
-.car-overview-cell--slot-5 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5 {
   grid-column: 1;
 }
 
-.car-overview-cell--slot-6 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6 {
   grid-column: 2;
 }
 
-.car-overview-cell--slot-5::after,
-.car-overview-cell--slot-6::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5::after,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6::after {
   right: 50%;
   top: -0.25rem;
   transform: translateX(50%) rotate(45deg);
 }
 
-.car-overview-cell--slot-7 {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 {
   grid-column: 1 / -1;
   grid-row: 5;
   justify-self: stretch;
@@ -3009,21 +3009,21 @@
   width: auto;
 }
 
-.car-overview-cell--slot-7::after {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7::after {
   left: 50%;
   top: -0.25rem;
   transform: translateX(-50%) rotate(45deg);
 }
 
-.car-overview-cell--slot-7 > span {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 > span {
   margin-bottom: 0;
 }
 
-.car-overview-cell--slot-7 strong {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 strong {
   text-align: right;
 }
 
-.car-overview-cell > span {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell > span {
   display: block;
   margin-bottom: 0.18rem;
   color: var(--muted);
@@ -3034,7 +3034,7 @@
   text-transform: uppercase;
 }
 
-.car-overview-cell strong {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell strong {
   display: block;
   overflow: hidden;
   color: #fff;
@@ -3046,7 +3046,7 @@
   white-space: nowrap;
 }
 
-.car-overview-cell strong span {
+:where(.f1-sim-component, .f1-sim-component *).car-overview-cell strong span {
   display: inline;
   margin: 0;
   color: inherit;
@@ -3056,31 +3056,31 @@
 }
 
 @media (max-width: 1120px) {
-  .sim-grid,
-  .sim-shell--left-tower-overlay .sim-grid,
-  .sim-shell--left-tower-overlay.sim-grid {
+  :where(.f1-sim-component, .f1-sim-component *).sim-grid,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-grid,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-grid {
     grid-template-columns: 1fr;
   }
 
-  .sim-canvas-panel,
-  .sim-shell--left-tower-overlay .sim-canvas-panel {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel {
     min-height: 62svh;
     grid-column: auto;
     order: -1;
   }
 
-  .sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
     min-height: 62svh;
   }
 
-  .sim-shell--left-tower-overlay .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing {
     position: static;
     width: auto;
     max-width: 390px;
     clip-path: none;
   }
 
-  .sim-shell--left-tower-overlay .sim-timing.broadcast-tower {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing.broadcast-tower {
     position: relative;
     inset: auto;
     width: min(100%, var(--timing-board-max-width));
@@ -3089,41 +3089,41 @@
     clip-path: none;
   }
 
-  .sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
     left: 1rem;
     max-width: calc(100% - 2rem);
   }
 
-  .sim-shell--left-tower-overlay .start-lights {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .start-lights {
     left: 50%;
   }
 
-  .sim-shell--left-tower-overlay .race-data-panel {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-panel {
     --race-data-banner-left: 50%;
     --race-data-banner-width: min(1080px, calc(100% - 1.5rem));
     left: 50%;
   }
 
-  .sim-timing,
-  .sim-telemetry {
+  :where(.f1-sim-component, .f1-sim-component *).sim-timing,
+:where(.f1-sim-component, .f1-sim-component *).sim-telemetry {
     min-height: auto;
   }
 
-  .sim-telemetry:not(.telemetry-component) {
+  :where(.f1-sim-component, .f1-sim-component *).sim-telemetry:not(.telemetry-component) {
     display: grid;
     grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
     gap: 1rem;
   }
 
-  .telemetry-header {
+  :where(.f1-sim-component, .f1-sim-component *).telemetry-header {
     grid-column: 1 / -1;
   }
 
-  .telemetry-grid {
+  :where(.f1-sim-component, .f1-sim-component *).telemetry-grid {
     margin-top: 0;
   }
 
-  .car-overview {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview {
     margin-top: 0;
     padding-top: 0;
     border-top: 0;
@@ -3131,65 +3131,65 @@
 }
 
 @media (max-width: 760px) {
-  .sim-shell {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell {
     padding: 0.75rem;
   }
 
-  .sim-grid,
-  .sim-shell--left-tower-overlay .sim-grid,
-  .sim-shell--left-tower-overlay.sim-grid {
+  :where(.f1-sim-component, .f1-sim-component *).sim-grid,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-grid,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-grid {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .sim-shell--left-tower-overlay .sim-timing,
-  .sim-canvas-panel--with-timing-tower > .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing,
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .sim-timing {
     width: min(100%, var(--timing-board-max-width));
   }
 
-  .sim-shell--left-tower-overlay .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing {
     width: 100%;
     max-width: 100%;
   }
 
-  .sim-topbar {
+  :where(.f1-sim-component, .f1-sim-component *).sim-topbar {
     grid-template-columns: 1fr;
     align-items: stretch;
   }
 
-  .sim-controls,
-  .sim-backlink {
+  :where(.f1-sim-component, .f1-sim-component *).sim-controls,
+:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
     justify-content: stretch;
   }
 
-  .sim-controls {
+  :where(.f1-sim-component, .f1-sim-component *).sim-controls {
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
 
-  .sim-control,
-  .sim-backlink {
+  :where(.f1-sim-component, .f1-sim-component *).sim-control,
+:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
     text-align: center;
   }
 
-  .sim-canvas-panel {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel {
     min-height: 58svh;
   }
 
-  .race-telemetry-drawer--responsive-narrow {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow {
     --telemetry-drawer-width: min(88%, 360px);
   }
 
-  .race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__race,
-  .race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__race,
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
     margin-right: 0;
     padding-right: 0;
   }
 
-  .race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
     margin-bottom: 0;
   }
 
-  .race-telemetry-drawer--responsive-narrow .telemetry-drawer {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .telemetry-drawer {
     top: 0.75rem;
     right: 0.75rem;
     bottom: 0.75rem;
@@ -3205,58 +3205,58 @@
       transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
-  .race-telemetry-drawer--responsive-narrow.is-telemetry-open .telemetry-drawer {
+  :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .telemetry-drawer {
     transform: translate3d(0, 0, 0);
   }
 
-  .camera-controls {
+  :where(.f1-sim-component, .f1-sim-component *).camera-controls {
     max-width: calc(100% - 1.5rem);
   }
 
-  .race-data-panel {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-panel {
     left: 50%;
-    bottom: 0.75rem;
+    bottom: 1.1rem;
     grid-template-columns: minmax(4.6rem, 0.26fr) minmax(0, 1fr) minmax(6.5rem, 7rem);
     width: calc(100% - 1.5rem);
     min-height: 88px;
   }
 
-  .telemetry-sector-banner {
+  :where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner {
     right: 0.75rem;
     bottom: 0.75rem;
     grid-template-columns: 1fr;
     width: calc(100% - 1.5rem);
   }
 
-  .sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
     bottom: 8rem;
   }
 
-  .race-data-panel.is-radio-mode {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .race-data-panel--with-telemetry {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry {
     --race-data-action-rail: 0.45rem;
     grid-template-columns: minmax(4.6rem, 0.26fr) minmax(0, 1fr) minmax(6.5rem, 7rem);
     grid-template-rows: auto auto;
   }
 
-  .race-data-panel:not(.race-data-panel--with-telemetry):not(.is-radio-mode) {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-panel:not(.race-data-panel--with-telemetry):not(.is-radio-mode) {
     grid-template-columns: minmax(4.2rem, 0.24fr) minmax(0, 1fr) minmax(8.85rem, 8.85rem);
   }
 
-  .race-data-copy {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-copy {
     grid-column: 2;
     padding: 0.78rem 0.7rem 0.85rem 0.45rem;
   }
 
-  .race-data-panel--with-telemetry .race-data-copy {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-copy {
     grid-column: 2;
     padding-bottom: 0.35rem;
   }
 
-  .race-data-telemetry {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-telemetry {
     grid-column: 1 / -1;
     grid-row: 2;
     align-self: start;
@@ -3265,35 +3265,35 @@
     border-left: 0;
   }
 
-  .race-data-telemetry__bars {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-telemetry__bars {
     align-items: start;
     gap: 0.32rem;
   }
 
-  .race-data-sector-bar {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar {
     min-height: 2.75rem;
     padding: 0.42rem 0.42rem 0.38rem;
   }
 
-  .race-data-sector-bar span {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar span {
     margin-bottom: 0.22rem;
   }
 
-  .race-data-sector-bar strong {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar strong {
     font-size: 0.68rem;
   }
 
-  .race-data-panel--with-telemetry .race-data-link {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-link {
     grid-column: 3;
     grid-row: 1;
   }
 
-  .race-data-panel.is-radio-mode .race-data-copy {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-copy {
     grid-column: 1;
     padding-left: 0.95rem;
   }
 
-  .race-data-number {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-number {
     grid-column: 1;
     min-width: 4.8rem;
     height: auto;
@@ -3301,10 +3301,10 @@
     font-size: clamp(2.9rem, 11cqw, 3.4rem);
   }
 
-  .race-data-link,
-  .f1-sim-component .race-data-link,
-  .sim-shell--left-tower-overlay .race-data-link,
-  .sim-canvas-panel--with-timing-tower .race-data-link {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-link,
+.f1-sim-component .race-data-link,
+:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-link,
+:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-link {
     grid-column: 3;
     grid-row: 1;
     min-width: 5.4rem;
@@ -3317,102 +3317,102 @@
     letter-spacing: 0.055em;
   }
 
-  .race-data-dismiss {
+  :where(.f1-sim-component, .f1-sim-component *).race-data-dismiss {
     top: 0;
     right: var(--race-data-action-rail, 0.45rem);
     width: 44px;
     height: 44px;
   }
 
-  .sim-telemetry {
+  :where(.f1-sim-component, .f1-sim-component *).sim-telemetry {
     display: block;
   }
 
-  .telemetry-grid {
+  :where(.f1-sim-component, .f1-sim-component *).telemetry-grid {
     margin-top: 1rem;
   }
 
-  .car-overview {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview {
     margin-top: 1rem;
     padding-top: 0.85rem;
     border-top: 1px solid var(--line);
   }
 
-  .car-overview-diagram {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-diagram {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(2, auto) 5.3rem repeat(4, auto);
   }
 
-  .car-overview-diagram::before {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-diagram::before {
     background:
       linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 18% / 1px 16% no-repeat,
       linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 82% / 1px 16% no-repeat;
   }
 
-  .car-overview-cell,
-  .car-overview-car {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell,
+:where(.f1-sim-component, .f1-sim-component *).car-overview-car {
     grid-column: 1;
     justify-self: stretch;
     width: auto;
   }
 
-  .car-overview-cell--slot-1 {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-1 {
     grid-row: 1;
   }
 
-  .car-overview-cell--slot-2 {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-2 {
     grid-row: 2;
   }
 
-  .car-overview-car {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-car {
     grid-row: 3;
     justify-self: center;
   }
 
-  .car-overview-cell--slot-3 {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3 {
     grid-row: 4;
   }
 
-  .car-overview-cell--slot-4 {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4 {
     grid-row: 5;
   }
 
-  .car-overview-cell--slot-5 {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5 {
     grid-row: 6;
   }
 
-  .car-overview-cell--slot-6 {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6 {
     grid-row: 7;
   }
 
-  .car-overview-cell--slot-7 {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 {
     grid-row: 8;
     display: block;
   }
 
-  .car-overview-cell--slot-7 strong {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 strong {
     text-align: left;
   }
 
-  .car-overview-cell::after {
+  :where(.f1-sim-component, .f1-sim-component *).car-overview-cell::after {
     display: none;
   }
 }
 
 @media (max-width: 520px) {
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower {
     --race-overlay-banner-clearance: 0px;
     min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance {
     min-height: max(
       calc(var(--paddock-race-view-min-height, 620px) + var(--race-overlay-banner-clearance)),
       calc(var(--timing-board-min-height) + var(--race-overlay-banner-clearance))
     );
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing {
     position: absolute;
     top: 0.75rem;
     bottom: 0.75rem;
@@ -3429,40 +3429,40 @@
       transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
     position: absolute;
     width: min(82%, var(--timing-board-max-width));
     max-width: var(--timing-board-max-width);
     height: auto;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance > .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance > .sim-timing {
     bottom: var(--race-overlay-banner-clearance);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.is-timing-panel-open > .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.is-timing-panel-open > .sim-timing {
     transform: translate3d(0, 0, 0);
     opacity: 1;
     pointer-events: auto;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .timing-panel-toggle {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .timing-panel-toggle {
     display: grid;
     place-items: center;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .camera-controls {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .camera-controls {
     left: 0.75rem;
     top: 4.45rem;
     max-width: calc(100% - 1.5rem);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .start-lights {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .start-lights {
     top: 7.2rem;
     left: 50%;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message {
     top: 4.1rem;
     left: 0.75rem;
     right: 0.75rem;
@@ -3478,39 +3478,39 @@
     transform: none;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message.is-hidden {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message.is-hidden {
     transform: translateY(-0.55rem);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message .steward-message__kicker {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message .steward-message__kicker {
     min-width: 4.7rem;
     padding: 0.44rem 0.52rem;
     font-size: 0.92rem;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message strong {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message strong {
     font-size: 0.86rem;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message span:last-child {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message span:last-child {
     font-size: 0.66rem;
   }
 }
 
 @container (max-width: 520px) {
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower {
     --race-overlay-banner-clearance: 0px;
     min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance {
     min-height: max(
       calc(var(--paddock-race-view-min-height, 620px) + var(--race-overlay-banner-clearance)),
       calc(var(--timing-board-min-height) + var(--race-overlay-banner-clearance))
     );
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing {
     position: absolute;
     top: 0.75rem;
     bottom: 0.75rem;
@@ -3524,40 +3524,40 @@
     clip-path: inset(0 round 1.25rem);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
     position: absolute;
     width: min(82%, var(--timing-board-max-width));
     max-width: var(--timing-board-max-width);
     height: auto;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance > .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance > .sim-timing {
     bottom: var(--race-overlay-banner-clearance);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.is-timing-panel-open > .sim-timing {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.is-timing-panel-open > .sim-timing {
     transform: translate3d(0, 0, 0);
     opacity: 1;
     pointer-events: auto;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .timing-panel-toggle {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .timing-panel-toggle {
     display: grid;
     place-items: center;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .camera-controls {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .camera-controls {
     left: 0.75rem;
     top: 4.45rem;
     max-width: calc(100% - 1.5rem);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .start-lights {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .start-lights {
     top: 7.2rem;
     left: 50%;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message {
     top: 4.1rem;
     left: 0.75rem;
     right: 0.75rem;
@@ -3573,26 +3573,26 @@
     transform: none;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message.is-hidden {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message.is-hidden {
     transform: translateY(-0.55rem);
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message .steward-message__kicker {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message .steward-message__kicker {
     min-width: 4.7rem;
     padding: 0.44rem 0.52rem;
     font-size: 0.92rem;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message strong {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message strong {
     font-size: 0.86rem;
   }
 
-  .sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message span:last-child {
+  :where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message span:last-child {
     font-size: 0.66rem;
   }
 }
 
-.race-data-panel--standalone {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone {
   position: relative;
   left: auto;
   right: auto;
@@ -3604,29 +3604,29 @@
   min-height: 0;
 }
 
-.race-data-panel--standalone .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-copy {
   grid-column: 2;
   grid-row: 1;
   min-width: 0;
   padding: 0.75rem 0.68rem 0.55rem;
 }
 
-.race-data-panel--standalone .race-data-kicker {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-kicker {
   font-size: 0.54rem;
   letter-spacing: 0.12em;
 }
 
-.race-data-panel--standalone .race-data-copy strong {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-copy strong {
   font-size: clamp(1.05rem, 3vw, 1.45rem);
   line-height: 0.98;
 }
 
-.race-data-panel--standalone .race-data-subtitle {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-subtitle {
   font-size: 0.55rem;
   letter-spacing: 0.06em;
 }
 
-.race-data-panel--standalone .race-data-number {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-number {
   grid-column: 1;
   grid-row: 1;
   min-width: 0;
@@ -3634,7 +3634,7 @@
   font-size: clamp(2.3rem, 5vw, 3.9rem);
 }
 
-.race-data-panel--standalone .race-data-link {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-link {
   grid-column: 1 / -1;
   grid-row: 2;
   margin: 0;
@@ -3643,16 +3643,16 @@
   font-size: 0.62rem;
 }
 
-.race-data-panel--standalone.race-data-panel--with-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone.race-data-panel--with-telemetry {
   grid-template-columns: minmax(4.6rem, 0.35fr) minmax(0, 1fr);
 }
 
-.race-data-panel--standalone.race-data-panel--with-telemetry .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone.race-data-panel--with-telemetry .race-data-copy {
   grid-column: 2;
   padding-bottom: 0.35rem;
 }
 
-.race-data-panel--standalone .race-data-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-telemetry {
   grid-column: 1 / -1;
   grid-row: auto;
   padding: 0 0.68rem 0.65rem;