/* ============================================================================
   Live overlay scene — shared by /overlays (hero) and / (overlays section).
   Single source of truth: edit here, both pages pick it up on next load.

   Pair with /overlay-scene.js, which drives every panel in this file.

   The scene is authored in a fixed 1560x790 design space and uniformly scaled
   to whatever width its wrapper gets, so it drops into any column width.

   Palette: the mockups use the cool in-sim HUD palette, not the page palette.
   /overlays declares those vars at :root already; index.html does not and its
   --red/--muted/--text differ, so the .tio wrapper class restates every var the
   scene reads. Put .tio on the .shot-sec element on any page that mounts this.
   ========================================================================== */

.tio {
  --line:      rgba(255,255,255,0.08);
  --line2:     rgba(255,255,255,0.15);
  --text:      #ede6d8;
  --muted:     rgba(245,239,228,0.72);
  --faint:     rgba(245,239,228,0.45);
  --bright:    #f5efe4;
  --red:       #dd1216;
  --red-dim:   #8e0c0e;
  --ov-bg:     rgba(9,11,15,0.74);
  --ov-line:   rgba(255,255,255,0.12);
  --ov-text:   #f3f6fa;
  --ov-mut:    rgba(243,246,250,0.52);
  --grn:       #34d35f;
  --amb:       #ffb020;
  --rd:        #ff4d3d;
  --cy:        #3ec9dd;
  --ti-display:'Manrope', system-ui, sans-serif;
  --ti-mono:   'JetBrains Mono', ui-monospace, monospace;
  text-align: left;
  line-height: 1.6;
}
.tio *, .tio *::before, .tio *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* live hero scene: the real screenshot as a dimmed backdrop, the five section
     mockups mounted on it as live floating panels, driven by the same mockup
     engine as the section demos below. Fixed 1560x790 design space, uniformly
     scaled to the viewport by JS. Breaks out wider than the 1180px text column. */
  .shot-sec { position: relative; z-index: 2; width: min(96vw, 1560px); left: 50%; transform: translateX(-50%); margin-top: 4.5rem; }
  .scene { position: relative; width: 1560px; height: 790px; transform-origin: top left; }
  .scene-shot { position: absolute; left: 0; right: 0; top: 64px; height: 439px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 28px 70px rgba(0,0,0,0.6); overflow: hidden; }
  /* Not `> img`: the screenshot is wrapped in a <picture> so it can serve WebP. */
  .scene-shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) saturate(0.8); }
  .scene-shot .shade { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 90% at 50% 30%, transparent 45%, rgba(8,7,6,0.7) 100%); }
  .hl { position: absolute; border: 1px solid rgba(221,18,22,0.75); backdrop-filter: brightness(2.3) saturate(1.25); -webkit-backdrop-filter: brightness(2.3) saturate(1.25); box-shadow: 0 0 0 3px rgba(221,18,22,0.14), 0 0 26px rgba(221,18,22,0.22); border-radius: 2px; }
  .hl b { position: absolute; top: -1px; left: -1px; background: var(--red); color: #fff; font-family: var(--ti-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; padding: 2px 4px; }
  .hl-1 { left: 63.6%; top: 0.5%;  width: 13.2%; height: 13.5%; } /* battle bar + timing */
  .hl-2 { left: 66.8%; top: 41.7%; width: 8.6%;  height: 24.3%; } /* radar */
  .hl-3 { left: 72.4%; top: 79.5%; width: 7.9%;  height: 20%;   } /* fuel */
  .hl-4 { left: 42.8%; top: 84.7%; width: 11.6%; height: 14.8%; } /* dash */
  .hl-5 { left: 12.5%; top: 83.7%; width: 16%;   height: 15.8%; } /* relative */
  /* callout lines from each highlight window to its floating panel, drawn by JS in scene coordinates */
  .shot-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
  .shot-links line { stroke: rgba(221,18,22,0.7); stroke-width: 1; }
  .shot-links circle { fill: var(--red); }
  /* floating live panels: fly in on load, lift on hover, spotlight tour + click-to-pin via JS */
  .sp { position: absolute; z-index: 3; cursor: pointer; transition: transform 0.45s cubic-bezier(0.2,0.7,0.3,1), opacity 0.45s, filter 0.45s; animation: sp-fly 0.8s cubic-bezier(0.16,0.8,0.3,1) backwards; }
  @keyframes sp-fly { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
  .sp-battle { left: 400px;  top: 0;     width: 470px; animation-delay: 0.25s; }
  .sp-radar  { left: 1272px; top: 6px;   width: 212px; animation-delay: 0.4s; }
  .sp-fuel   { left: 1215px; top: 560px; width: 330px; animation-delay: 0.55s; }
  .sp-dash   { left: 635px;  top: 570px; width: 495px; animation-delay: 0.7s; }
  .sp-dashlow{ left: 10px;   top: 8px;   width: 385px; animation-delay: 0.95s; }
  .sp-rel    { left: 20px;   top: 560px; width: 545px; animation-delay: 0.85s; }
  .sp .ov { border-radius: 4px; box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
  .sp-lab { position: absolute; top: -30px; left: 0; z-index: 2; display: flex; align-items: center; gap: 6px; font-family: var(--ti-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,239,228,0.85); background: rgba(10,11,14,0.92); border: 1px solid rgba(255,255,255,0.18); padding: 4px 8px; border-radius: 2px; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
  .sp-lab b { color: #fff; background: var(--red); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 4px; line-height: 1; }
  .sp-radar .sp-lab { top: -24px; left: 24px; }
  .sp-fuel .sp-lab { left: auto; right: 0; }
  .sp-disc { position: relative; width: 212px; height: 212px; filter: drop-shadow(0 16px 30px rgba(0,0,0,0.62)); }
  .sp-disc .disc { width: 100%; height: 100%; }
  /* the Apex dashes are authored at native size (990x390 / 874x236, same markup
     as section 02) and mounted scaled down */
  .sp-dashbox { width: 495px; height: 195px; filter: drop-shadow(0 26px 44px rgba(0,0,0,0.55)); }
  .sp-dashbox > div { transform: scale(0.5); transform-origin: top left; }
  .sp-dashlowbox { width: 385px; height: 104px; filter: drop-shadow(0 20px 36px rgba(0,0,0,0.55)); }
  .sp-dashlowbox > div { transform: scale(0.44); transform-origin: top left; }
  /* the two Race Dash designs the hero mounts, at their own native sizes */
  .sp-podbox { width: 495px; height: 150px; filter: drop-shadow(0 26px 44px rgba(0,0,0,0.55)); }
  .sp-podbox > div { transform: scale(0.5723); transform-origin: top left; }
  .sp-wingbox { width: 385px; height: 115px; filter: drop-shadow(0 20px 36px rgba(0,0,0,0.55)); }
  .sp-wingbox > div { transform: scale(0.4936); transform-origin: top left; }
  /* ============ OVERLAY PANEL COMPONENT (mockup, matched to the real app) ============ */
  .ov { background: var(--ov-bg); border: 1px solid var(--ov-line); border-radius: 7px; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: 0 18px 50px rgba(0,0,0,0.5); overflow: hidden; }
  .ov-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--ov-line); }
  .ov-title { font-family: var(--ti-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ov-text); }
  .ov-sim { font-family: var(--ti-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ov-mut); }
  .ov-body { padding: 12px; color: var(--ov-text); }
  .ov-foot { display: flex; align-items: center; justify-content: space-between; padding: 5px 11px; border-top: 1px solid var(--ov-line); }
  .ov-time { font-family: var(--ti-mono); font-size: 10px; color: var(--ov-mut); font-variant-numeric: tabular-nums; }
  .ov-flag { font-family: var(--ti-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--grn); }
  .ov-num { font-family: var(--ti-mono); font-variant-numeric: tabular-nums; }
  /* ============ APEX PANEL (new app design: battle bar + relative) ============ */
  .axp { background: linear-gradient(180deg, #1a2130, #141926); border: 1px solid rgba(74,84,104,0.55); border-radius: 4px; }
  .ax-name { font-family: var(--ti-display); font-style: italic; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; }

  /* ============ BATTLE BAR (Apex layout) ============ */
  .abb { padding: 8px 12px 0; }
  .abb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 5px; }
  .abb-side { font-family: var(--ti-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; }
  .abb-side.ah { color: #2dd06e; }
  .abb-side.be { color: #ff6b5b; text-align: right; }
  .abb-ctx { display: flex; align-items: center; gap: 5px; font-family: var(--ti-mono); }
  .abb-ctx .k { font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; color: #8f97a6; }
  .abb-ctx .v { font-size: 10.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
  .abb-ctx .dvd { width: 1px; height: 11px; background: rgba(74,84,104,0.8); margin: 0 4px; }
  .abb-track { position: relative; height: 12px; background: #242e42; transform: skewX(-14deg); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); overflow: hidden; }
  .abb-band { position: absolute; top: 0; bottom: 0; }
  .abb-band.g { left: 0; width: 32%; background: linear-gradient(90deg, rgba(45,208,110,0.12), rgba(45,208,110,0.6)); }
  .abb-band.r { right: 0; width: 30%; background: linear-gradient(90deg, rgba(255,77,61,0.6), rgba(255,77,61,0.12)); }
  .abb-mark { position: absolute; top: 0; bottom: 0; width: 2px; will-change: left; }
  .abb-mark.a { background: #2dd06e; box-shadow: 0 0 6px #2dd06e; }
  .abb-mark.me { left: 50%; width: 3px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.9); }
  .abb-mark.b { background: #ff4d3d; box-shadow: 0 0 6px #ff4d3d; }
  .abb-row { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px 0 11px; }
  .abb-cluster { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .abb-cluster.r { justify-content: flex-end; }
  .abb-chip { font-family: var(--ti-mono); font-size: 10px; font-weight: 700; padding: 3px 8px; transform: skewX(-14deg); flex-shrink: 0; }
  .abb-chip.g { background: #2dd06e; color: #06240f; }
  .abb-chip.r { background: #ff4d3d; color: #2a0803; }
  .abb-driver { min-width: 0; }
  .abb-nm { display: block; font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 3px; }
  .abb-sub { display: flex; align-items: center; gap: 6px; font-family: var(--ti-mono); font-size: 9px; margin-top: 1px; }
  .abb-sub.r { justify-content: flex-end; }
  .abb-cbar { width: 3px; height: 10px; background: #4aa3ff; transform: skewX(-14deg); }
  .abb-cn { color: #c3cad6; }
  .abb-lic { color: #6aa9ff; }
  .abb-gaps { display: flex; gap: 16px; align-items: center; }
  .abb-gap { font-family: var(--ti-mono); font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .abb-gap.a { color: #fff; }
  .abb-gap.b { color: #ff6b5b; }
  .abb-stripes { position: absolute; right: -12px; bottom: -3px; width: 46px; height: 14px; background: repeating-linear-gradient(115deg, rgba(255,45,26,0.3) 0 6px, transparent 6px 22px); }
  .abb-foot { display: flex; align-items: center; justify-content: space-between; margin: 0 -12px; padding: 4px 12px; background: rgba(20,25,38,0.9); border-top: 1px solid rgba(74,84,104,0.55); font-family: var(--ti-mono); font-size: 10.5px; }
  .abb-foot .k { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; color: #8f97a6; }
  .abb-foot .t { font-variant-numeric: tabular-nums; }
  .abb-foot .t.ah { color: #ff6b5b; }
  .abb-foot .t.me { color: #fff; }
  .abb-foot .t.be { color: #2dd06e; }

  /* ============ RELATIVE (Apex grid) ============ */
  .axt-h, .axt-r { display: grid; gap: 5px; align-items: center; padding: 4px 8px; }
  .axt-h { font-family: var(--ti-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.05em; color: #8f97a6; border-bottom: 1px solid rgba(74,84,104,0.55); padding-top: 5px; padding-bottom: 5px; }
  .axt-h.rel, .axt-r.rel { grid-template-columns: 26px 24px minmax(0,1fr) 27px 24px 27px 29px 30px 23px 27px 37px 11px; }
  .axt-h.mini, .axt-r.mini { grid-template-columns: 27px 26px minmax(0,1fr) 30px 34px 12px; }
  .axt-r { min-height: 27px; font-family: var(--ti-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
  .axt-r.alt { background: rgba(255,255,255,0.02); }
  .axt-r.you { background: linear-gradient(90deg, rgba(255,45,26,0.22), rgba(255,45,26,0.04)); box-shadow: inset 3px 0 0 #ff2d1a; min-height: 30px; }
  .axt-p { justify-self: start; font-family: var(--ti-mono); font-size: 9px; font-weight: 700; color: #c3cad6; border: 1px solid rgba(74,84,104,0.9); padding: 2.5px 0; width: 27px; text-align: center; transform: skewX(-14deg); }
  .axt-r.you .axt-p { background: linear-gradient(135deg, #ff2d1a, #c40f00); border-color: transparent; color: #fff; }
  .axt-num { display: flex; align-items: center; gap: 6px; color: #c3cad6; }
  .axt-num::before { content: ''; width: 3px; height: 13px; background: #4aa3ff; transform: skewX(-14deg); flex-shrink: 0; }
  .axt-r.you .axt-num { color: #fff; }
  .axt-nm { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .axt-nm .you-tag { font-family: var(--ti-mono); font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; color: #ff2d1a; margin-left: 7px; vertical-align: 1px; }
  .axt-ir { color: #fff; text-align: right; }
  .axt-gain { text-align: right; }
  .axt-gain.pos { color: #2dd06e; } .axt-gain.neg { color: #ff6b5b; }
  .axt-lic { color: #6aa9ff; text-align: right; }
  .axt-int { text-align: right; color: #c3cad6; }
  .axt-int.threat { color: #ff6b5b; }
  .axt-delta { text-align: right; }
  .axt-delta.pos { color: #ff6b5b; } .axt-delta.neg { color: #2dd06e; }
  .axt-make { position: relative; display: flex; align-items: center; font-size: 10px; color: #c3cad6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .axt-make img { display: block; width: 19px; height: 19px; object-fit: contain; }
  /* Glow badge = the app's battle indicator: it lights up while that car is
     within a second of you. Toggled by .battle on the row. */
  .axt-make img.bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 260ms ease; }
  .axt-r.battle .axt-make img.bg { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .axt-make img.bg { transition: none; } }
  .axt-gap { text-align: right; color: #fff; }
  .axt-last { text-align: right; color: #c3cad6; }
  .axt-r.you .axt-last { color: #fff; }
  .axt-ty { justify-self: center; width: 11px; height: 11px; border-radius: 50%; border: 3px solid; }
  .axt-ty.s { border-color: #ff5c8a; } .axt-ty.m { border-color: #ffc233; } .axt-ty.h { border-color: #e8ecf2; }

  /* ============ FUEL (Apex tri-hero) ============ */
  .axf { font-family: var(--ti-mono); }
  .axf-hero { display: flex; align-items: stretch; padding: 9px 14px 0; }
  .axf-g { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .axf-g.add { margin-left: auto; text-align: right; }
  .axf-dvd { width: 1px; background: rgba(74,84,104,0.55); margin: 2px 14px 0; }
  .axf-k { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; color: #8f97a6; }
  .axf-v { display: flex; align-items: baseline; gap: 5px; }
  .axf-g.add .axf-v { justify-content: flex-end; }
  .axf-v .n { font-size: 25px; font-weight: 700; line-height: 1; color: #e8ecf2; font-variant-numeric: tabular-nums; }
  .axf-v .u { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: #8f97a6; }
  .axf-g.add .n { font-size: 20px; color: #2dd06e; }
  .axf-bar { position: relative; height: 13px; margin: 10px 16px 0; background: #242e42; transform: skewX(-14deg); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); overflow: hidden; }
  .axf-bar .f { position: absolute; inset: 0; background: linear-gradient(90deg, #1fb85c, #6fe8a4); box-shadow: 0 0 10px rgba(45,208,110,0.45); transform-origin: left; will-change: transform; }
  .axf-scale { display: flex; justify-content: space-between; padding: 4px 16px 9px; font-size: 8px; color: #8f97a6; }
  .axf-foot { display: flex; align-items: center; padding: 5px 12px; background: rgba(20,25,38,0.9); border-top: 1px solid rgba(74,84,104,0.55); }
  .axf-chip { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 11px; background: #2dd06e; color: #06240f; transform: skewX(-14deg); }
  .axf-pair { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 10.5px; font-variant-numeric: tabular-nums; }
  .axf-pair .k { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; color: #8f97a6; }
  .axf-pair .v { color: #e8ecf2; }
  .axf-pair .v.neg { color: #ff4d3d; }
  .axf-pair .dvd { width: 1px; height: 12px; background: rgba(74,84,104,0.8); margin: 0 5px; }
  /* ============ SPOTTER DISC (circular radar) ============ */
  .disc { position: relative; width: 196px; height: 196px; margin: 0 auto; }
  .disc svg { width: 100%; height: 100%; display: block; }
  .disc-ring { fill: none; stroke: rgba(255,255,255,0.10); }
  .disc-ring.inner { stroke: rgba(255,255,255,0.05); }
  .disc-head { fill: rgba(255,255,255,0.05); }
  .disc-arch path { fill: none; stroke: #ed292e; stroke-linecap: round; }
  .disc-blip { will-change: transform, opacity; }
  .disc-blip .rim { fill: none; }
  .disc-blip .num { font-family: var(--ti-mono); font-size: 8px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
  /* ---- Apex dash (the current design language, mirrored from the real
          renderer: ApexTheme.h palette, Titillium/JetBrains/Chakra faces,
          skewX(-14deg) gesture, hard edges, no border radius) ---- */
  .axdash, .axlow {
    --ax-accent:#FF2D1A; --ax-grad-b:#C40F00;
    /* panel surfaces sit darker than the app's authored values so the three
       dashes read at a similar brightness next to the classic cluster */
    --ax-bg-top:#111726; --ax-bg-bot:#0C111B; --ax-border:#3E4759;
    --ax-inner:#0F141F; --ax-track:#1D2536;
    --ax-mid:#C3CAD6; --ax-low:#8F97A6; --ax-rpm:#FF6B5B;
    --ax-green:#2DD06E; --ax-red:#FF4D3D; --ax-redt:#FF6B5B; --ax-amber:#FFC233;
    --ax-white:#E8ECF2;
    --ax-met-hi:#454D5E; --ax-met-mid:#3C4454; --ax-met-dark:#1D212B; --ax-met-deep:#161B26;
    position: relative;
  }
  .axd-panel { background: linear-gradient(180deg, var(--ax-bg-top), var(--ax-bg-bot));
    border: 1px solid var(--ax-border); position: relative; overflow: hidden; }
  .axd-lab  { font: italic 700 8.5px 'Titillium Web', sans-serif; letter-spacing: 1.3px; color: var(--ax-low); }
  .axd-mono { font: 700 13px 'JetBrains Mono', ui-monospace, monospace; color: var(--ax-white); font-variant-numeric: tabular-nums; }

  /* full cluster: 990x390, footer 42 */
  .axdash { width:990px; height:390px; }
  .axdash .axd-panel { width:100%; height:100%; display:grid; grid-template-rows:1fr 42px; }
  .axd-body { position:relative; display:flex; align-items:center; padding:0 18px; min-height:0; }
  .axd-col { display:flex; flex-direction:column; gap:8px; width:280px; flex-shrink:0; }
  .axd-row { display:flex; gap:8px; }
  .axd-slot { position:relative; width:136px; height:136px; }
  .axd-slot.wide { width:280px; }
  .axd-mid { position:relative; flex:1; height:100%; display:flex; align-items:center; justify-content:center; }

  /* dial (shared): static face is JS-built SVG, digits are an HTML overlay */
  .axd-dial { position:relative; }
  .axdash .axd-dial { width:330px; height:330px; }
  .axlow  .axd-dial { width:230px; height:230px; }
  .axd-dial svg { position:absolute; inset:0; width:100%; height:100%; }

  /* wheel widget (authored 118px envelope, scales down in the low-profile row) */
  .axd-wheel { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .axd-wheel svg { width:118px; height:118px; }
  .axlow .axd-wheel svg { width:76px; height:76px; }

  /* gear ring widget (shift ring) */
  .axd-ring { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .axd-ring svg { width:110px; height:110px; }
  .axlow .axd-ring svg { width:72px; height:72px; }
  .axd-ring .rg { position:absolute; font: 700 34px 'Chakra Petch', monospace; color:var(--ax-mid); }
  .axlow .axd-ring .rg { font-size:24px; }

  /* input trace widget (wide) */
  .axd-trace { position:absolute; inset:10px; background:var(--ax-inner);
    border:1px solid rgba(74,84,104,0.55); box-shadow: inset 0 1px 2px rgba(0,0,0,0.45); }
  .axd-trace svg { width:100%; height:100%; display:block; }

  /* pedal bars, vertical (full cluster) */
  .axd-peds { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:14px 0 12px; }
  .axd-ped { display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; }
  .axd-ped .well { position:relative; width:24px; flex:1; background:var(--ax-track);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.45); overflow:hidden; }
  .axd-ped .fill { position:absolute; left:0; right:0; bottom:0; height:0%; }
  .axd-ped .fill.t { background:var(--ax-green); box-shadow: 0 0 8px rgba(45,208,110,0.55); }
  .axd-ped .fill.b { background:var(--ax-red); box-shadow: 0 0 8px rgba(255,77,61,0.55); }
  .axd-ped .fill.c { background:#4AA3FF; box-shadow: 0 0 8px rgba(74,163,255,0.45); }
  .axd-ped .pv { font: 700 9px 'JetBrains Mono', monospace; color:var(--ax-mid); }
  .axd-ped .pl { font: italic 700 8px 'Titillium Web', sans-serif; letter-spacing:1px; color:var(--ax-low); }

  /* pedal rows, horizontal (low profile) */
  .axd-pedrows { position:absolute; inset:8px 6px; display:flex; flex-direction:column; justify-content:space-around; }
  .axd-prow { display:flex; align-items:center; gap:7px; }
  .axd-prow .pl { width:24px; font: italic 700 8px 'Titillium Web', sans-serif; letter-spacing:1px; color:var(--ax-low); }
  .axd-prow .well { position:relative; flex:1; height:8px; background:var(--ax-track);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.45); transform: skewX(-14deg); overflow:hidden; }
  .axd-prow .fill { position:absolute; left:0; top:0; bottom:0; width:0%; }
  .axd-prow .fill.t { background:var(--ax-green); } .axd-prow .fill.b { background:var(--ax-red); } .axd-prow .fill.c { background:#4AA3FF; }

  /* battle slot (wide): gap rows around a mini proximity track with a YOU chip */
  .axd-bt { position:absolute; inset:10px 12px; display:flex; flex-direction:column; justify-content:space-between; }
  .axd-bt .row { display:flex; align-items:center; justify-content:space-between; }
  .axd-bt .lbl { font: italic 700 8px 'Titillium Web', sans-serif; letter-spacing:1.4px; }
  .axd-bt .lbl.g { color:var(--ax-green); } .axd-bt .lbl.r { color:var(--ax-red); }
  .axd-bt .val { font: 700 13px 'JetBrains Mono', ui-monospace, monospace; color:var(--ax-white); font-variant-numeric: tabular-nums; }
  .axd-bt .val.r { color:var(--ax-redt); }
  .axd-bt .track { position:relative; height:12px; background:var(--ax-track);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); transform: skewX(-14deg); overflow:hidden; }
  .axd-bt .band { position:absolute; top:0; bottom:0; }
  .axd-bt .band.g { left:0; width:36%; background:linear-gradient(90deg, rgba(45,208,110,0.10), rgba(45,208,110,0.60)); }
  .axd-bt .band.r { right:0; width:36%; background:linear-gradient(90deg, rgba(255,77,61,0.60), rgba(255,77,61,0.10)); }
  .axd-bt .mk { position:absolute; top:0; bottom:0; width:2px; }
  .axd-bt .mk.a { background:var(--ax-green); box-shadow:0 0 4px 2px rgba(45,208,110,0.25); }
  .axd-bt .mk.b { background:var(--ax-red); box-shadow:0 0 4px 2px rgba(255,77,61,0.25); }
  .axd-bt .youchip { position:absolute; left:50%; top:-1px; bottom:-1px; width:18px; margin-left:-9px;
    background:#E8ECF2; box-shadow:0 0 6px 2px rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; }
  .axd-bt .youchip i { font: italic 700 5.5px 'Titillium Web', sans-serif; letter-spacing:0.5px; color:#0B0E14; font-style:normal; transform: skewX(14deg); }
  .axd-bt .tl span { font: 700 6.5px 'JetBrains Mono', monospace; letter-spacing:1px; }
  .axd-bt .tl span:first-child { color:var(--ax-green); opacity:0.75; }
  .axd-bt .tl span:last-child { color:var(--ax-redt); opacity:0.75; }
  .axd-prow .pv { width:30px; text-align:right; font: 700 9px 'JetBrains Mono', monospace; color:var(--ax-mid); }

  /* g-force widget */
  .axd-g { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .axd-g svg { width:96px; height:96px; }
  .axd-g .gv { font: 700 9.5px 'JetBrains Mono', monospace; color:var(--ax-mid); font-variant-numeric: tabular-nums; }

  /* flag widget */
  .axd-flag { position:absolute; inset:10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
  .axd-flag.green  { background: linear-gradient(135deg, #2DD06E, #1FA354); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 18px rgba(45,208,110,0.25); }

  /* footer info strip */
  .axd-foot { display:flex; align-items:center; padding:0 18px; gap:10px;
    background:var(--ax-inner); border-top:1px solid var(--ax-border); }
  .axd-foot .f { display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
  .axd-foot .axd-mono { color: var(--ax-mid); }
  .axd-foot .dvd { width:1px; height:16px; background:var(--ax-border); opacity:0.6; margin:0 6px; align-self:center; }
  .axd-foot .fsp { flex:1; }

  /* low profile: 874x236 = 62 dial overhang + (34 header + 104 body + 36 footer) */
  .axlow { width:874px; height:236px; }
  .axlow .axd-panel { position:absolute; left:0; right:0; bottom:0; height:174px;
    display:grid; grid-template-rows:34px 1fr 36px; overflow:visible; }
  .axl-hdr { position:relative; display:flex; align-items:center; padding:0 14px;
    background:var(--ax-inner); border-bottom:1px solid var(--ax-border); gap:9px; }
  .axl-hdr .wing { position:relative; flex:1; height:10px; background:var(--ax-track);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.45); transform: skewX(-14deg); overflow:hidden; }
  .axl-hdr .wing .fg { position:absolute; top:0; bottom:0; right:0;
    background: linear-gradient(90deg, rgba(45,208,110,0.12), #2DD06E); }
  .axl-hdr .wing .fr { position:absolute; top:0; bottom:0; left:0;
    background: linear-gradient(90deg, #FF4D3D, rgba(255,77,61,0.12)); }
  .axl-gap { width:254px; flex-shrink:0; }
  .axl-body { display:flex; align-items:center; justify-content:space-between; padding:0 14px; min-height:0; }
  .axl-col { display:flex; gap:8px; width:280px; flex-shrink:0; }
  .axl-slot { position:relative; width:136px; height:84px; }
  .axlow .axd-dial { position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:2; }
  .axlow .axd-foot { border-top:1px solid var(--ax-border); }


  /* ---- Race Dash designs (Pod / Wing / Halo), mirrored from the real
          renderer: DashRaceDash_2A/2C/2D.cpp. These layouts deliberately do NOT
          follow the Apex palette (they carry the export's own col:: namespace,
          see DashRaceDash.h), so the vars below are their own. Every literal
          coordinate is authored in each layout's own reference space:
            Pod  865x261 (the 820x216 drawing at tacho option 1, origin 45/22.5)
            Wing 780x232
            Halo 392x320
          The dial in all three IS the Apex instrument (rdDrawTacho mounts the
          same drawApexDial), so they reuse svg[data-axdial] unchanged. ---- */
  .rd {
    --rd-body-top:#151D29; --rd-body-bot:#0D131C;
    --rd-wing-mid:#141C27; --rd-wing-end:#101722;
    --rd-tray:#161F2B;     --rd-tray2:#141C27;
    --rd-text:#E9EEF5;     --rd-dim:#8494A8;   --rd-faint:#5A6A7E;
    --rd-ahead:#2FBF71;    --rd-behind:#E8432C;
    --rd-thr:#2DD06E;      --rd-brk:#FF4D3D;
    --rd-pos:#F0A13A;      --rd-info:#4D9FDF;
    --rd-hair:rgba(255,255,255,0.08);
    position: relative;
  }
  /* every part is placed at its own literal coordinate */
  .rd i, .rd b, .rd div, .rd span { position: absolute; }
  .rd-lab { font: italic 600 10px 'Titillium Web', sans-serif; letter-spacing: 0.5px;
    color: var(--rd-dim); white-space: nowrap; display: flex; align-items: center; }
  .rd-val { font: 700 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--rd-text);
    white-space: nowrap; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
  .rd-nm  { font: italic 700 12px 'Titillium Web', sans-serif; color: var(--rd-text);
    white-space: nowrap; display: flex; align-items: center; }
  .rd-val.g { color: var(--rd-ahead); }
  .rd-val.r { color: var(--rd-behind); }
  .rd-val.i { color: var(--rd-info); }
  /* skewed P chip: an unsheared badge is the fastest way to get this design wrong */
  .rd-bdg { display: flex; align-items: center; justify-content: center; border-radius: 2px;
    transform: skewX(-12deg); font: italic 700 10px 'Titillium Web', sans-serif; }
  .rd-bdg.g { background: var(--rd-ahead); color: #07150D; }
  .rd-bdg.r { background: var(--rd-behind); color: #1A0503; }
  /* info-bar row: label + value pairs with 1x12 ticks between cells (rdInfoBar) */
  .rd-info { display: flex; align-items: center; }
  .rd .rd-info > * { position: static; }
  .rd-info .rd-lab { margin-right: 4.5px; }
  .rd-info .rd-val { margin-right: 8px; }
  .rd-info .tick { width: 1px; height: 12px; background: rgba(255,255,255,0.12); margin-right: 8px; }
  .rd-info .fx { flex: 1; }
  .rd svg { display: block; width: 100%; height: 100%; }
  .rd-dial svg { position: absolute; inset: 0; }

  /* ---- Pod+ (2A): one machined pod with the dial cut into its left end, the
          battle fused into its top edge, a skewed data tray under the nose ---- */
  .rdpod { width: 865px; height: 261px; }
  .rdpod-in { left: 45px; top: 22.5px; width: 820px; height: 216px; }
  .rdpod-tray { background: var(--rd-tray); border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px; transform: skewX(-10deg); }
  .rdpod-body { background: linear-gradient(180deg, var(--rd-body-top), var(--rd-body-bot));
    border: 1px solid var(--rd-hair); border-radius: 26px 74px 74px 26px; overflow: hidden; }
  .rdpod-strip { left: -1px; top: 0; width: 736px; height: 36px; box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(90deg, rgba(47,191,113,0.10) 0%, rgba(9,13,19,0.55) 26%,
      rgba(9,13,19,0.55) 74%, rgba(232,67,44,0.12) 100%); }
  .rdpod-bar { height: 5px; border-radius: 3px; background: linear-gradient(90deg,
    var(--rd-ahead) 0%, rgba(47,191,113,0.08) 45%, rgba(232,67,44,0.08) 55%, var(--rd-behind) 100%); }
  .rdpod-mk { width: 3px; height: 11px; background: var(--rd-text); will-change: left; }
  /* segment cell: label over a big numeral, the design's own cell language */
  .rd-cell { display: flex; flex-direction: column; justify-content: center; }
  .rd .rd-cell > * { position: static; }
  .rd-cell .k { font: italic 700 7.5px 'Titillium Web', sans-serif; letter-spacing: 0.3px;
    color: var(--rd-dim); white-space: nowrap; }
  .rd-cell .v { margin-top: 3px; font: 700 26px 'JetBrains Mono', ui-monospace, monospace;
    color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
  .rd-cell.mid { align-items: center; text-align: center; }
  .rd-cell.mid .v { font-size: 38px; }
  .rd-cell.mid .s { margin-top: 7px; font: italic 700 9.5px 'Titillium Web', sans-serif;
    letter-spacing: 1.1px; color: var(--rd-dim); }
  .rd-pos { display: flex; align-items: center; justify-content: center;
    font: italic 700 31px 'Titillium Web', sans-serif; color: var(--rd-pos); }
  /* vertical pedal wells */
  .rd-ped { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.06); border-radius: 2px; }
  .rd-ped .f { left: 1px; right: 1px; bottom: 1px; height: 0%; border-radius: 2px; will-change: height; }
  .rd-ped .f.t { background: var(--rd-thr); box-shadow: 0 0 8px rgba(45,208,110,0.45); }
  .rd-ped .f.b { background: var(--rd-brk); box-shadow: 0 0 8px rgba(255,77,61,0.45); }
  .rd-pv { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--rd-text);
    display: flex; align-items: center; justify-content: center; }
  .rd-pl { font: italic 700 8.5px 'Titillium Web', sans-serif; letter-spacing: 0.8px;
    color: var(--rd-faint); display: flex; align-items: center; justify-content: center; }
  /* track map + input trace wells */
  .rd path.trk { fill: none; stroke: #C3CAD6; stroke-width: 1.6; stroke-linejoin: round; }
  .rd-well { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 3px; }

  /* ---- Delta Wing+ (2C): a wing either side of the dial, each with a rotated
          data band tucked under it ---- */
  .rdwing { width: 780px; height: 232px; }
  .rdwing-w { width: 310px; height: 132px; }
  .rdwing-w.l { clip-path: polygon(0 17.2px, 310px 0, 310px 132px, 0 108.2px);
    background: linear-gradient(90deg, rgba(47,191,113,0.16) 0%, var(--rd-wing-mid) 45%,
      var(--rd-wing-end) 100%); }
  .rdwing-w.r { clip-path: polygon(0 0, 310px 17.2px, 310px 108.2px, 0 132px);
    background: linear-gradient(270deg, rgba(232,67,44,0.16) 0%, var(--rd-wing-mid) 45%,
      var(--rd-wing-end) 100%); }
  .rdwing-band { background: rgba(0,0,0,0.30); border-top: 1px solid rgba(255,255,255,0.07); }
  .rdwing .gap { font: 700 22px 'JetBrains Mono', ui-monospace, monospace; color: var(--rd-text);
    display: flex; align-items: center; font-variant-numeric: tabular-nums; }
  .rdwing .gap.r { color: var(--rd-behind); justify-content: flex-end; }
  .rdwing .side { font: italic 600 10px 'Titillium Web', sans-serif; letter-spacing: 2px;
    display: flex; align-items: center; }
  .rdwing .side.g { color: var(--rd-ahead); }
  .rdwing .side.r { color: var(--rd-behind); justify-content: flex-end; }
  .rdwing .det { font: 500 11px 'JetBrains Mono', ui-monospace, monospace; color: var(--rd-info);
    display: flex; align-items: center; }
  .rdwing .det.r { justify-content: flex-end; }
  /* both wing bands carry the 8/10px pair the design authored (rdWingInfoStyle) */
  .rdwing .rd-info .rd-lab { font-size: 8px; margin-right: 4px; }
  .rdwing .rd-info .rd-val { font-size: 10px; margin-right: 7px; }
  .rdwing .rd-info .tick { height: 10px; margin-right: 7px; }
  .rdwing .rd-nm { font-size: 14px; }
  .rdwing .rd-nm.r { justify-content: flex-end; }

  /* ---- Halo+ (2D): one curved battle brow over the dial, throttle and brake on
          the rim arcs, a scooped data tray underneath ---- */
  .rdhalo { width: 392px; height: 320px; }
  .rdhalo-svg { left: 0; top: 0; width: 392px; height: 320px; }
  .rdhalo .gap { font: 700 14px 'JetBrains Mono', ui-monospace, monospace; color: var(--rd-text);
    display: flex; align-items: center; font-variant-numeric: tabular-nums; }
  .rdhalo .gap.r { color: var(--rd-behind); justify-content: flex-end; }
  .rdhalo .arcl { font: italic 600 9px 'Titillium Web', sans-serif; color: var(--rd-faint);
    display: flex; align-items: center; justify-content: center; }
  /* each end of the tray is barely 110 DIP wide, so the type lands noticeably
     smaller here than on the roomier designs -- rdInfoBar shrinks it the same way */
  .rdhalo .rd-info .rd-lab { font-size: 7.5px; letter-spacing: 0.3px; margin-right: 3px; }
  .rdhalo .rd-info .rd-val { font-size: 9.5px; margin-right: 5px; }
  .rdhalo .rd-info .tick { height: 10px; margin-right: 5px; }

/* responsive + motion */
@media (max-width: 940px) { .shot-sec { margin-top: 3rem; } }
@media (prefers-reduced-motion: reduce) { .sp { animation: none !important; } }