.section--cockpit { --field: var(--field-cockpit); padding-block: clamp(84px, 11vh, 128px) clamp(112px, 15vh, 160px); }
.section--cockpit .section__head { margin-bottom: 22px; }
.cockpit { --pin-opacity: 0; --pin-scale: 0.7; position: relative; left: 50%; width: min(96vw, calc(var(--max) + 2 * var(--gutter))); transform: translateX(-50%); }
.cockpit__toolbar { position: absolute; top: 0; right: 0; z-index: 2; display: flex; justify-content: flex-end; }
.cockpit__toggle-dot { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; }
.cockpit__toggle[aria-pressed="true"] .cockpit__toggle-dot { background: currentColor; }
.cockpit__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.5vw, 26px); }
.cockpit__vehicle { margin: 0; min-width: 0; }
.cockpit__vehicle-name { display: flex; align-items: center; gap: 8px; min-height: 46px; margin-bottom: 16px; font-size: clamp(28px, 2.7vw, 42px); line-height: 1; }
.cockpit__vehicle-name .src { vertical-align: baseline; font-size: 12px; }
.cockpit__photo { position: relative; aspect-ratio: 1.65; overflow: hidden; border-radius: 12px; background: #292b31; }
/* A single uniform scale (112% of width), preserving the original 3:2 ratio.
   Only the vertical crop differs to bring the steering wheels to the same level. */
.cockpit__photo > img { position: absolute; left: -6%; width: 112%; max-width: none; height: auto; }
.cockpit__photo--r1s > img { top: -19%; }
.cockpit__photo--r2 > img { top: -3.5%; }
.cockpit__annotations { position: absolute; inset: 0; opacity: var(--pin-opacity); }
.cockpit__annotations[hidden] { display: none; }
.cockpit__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cockpit__leaders polyline { fill: none; stroke: rgb(255 255 255 / 0.88); stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.8)); }
.cockpit__leaders circle { fill: var(--c-glow); stroke: #18191f; stroke-width: 1.5px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transform: scale(var(--pin-scale)); }
.cockpit__annotation { position: absolute; z-index: 1; padding: 6px 10px; border-radius: 7px; background: rgb(18 20 25 / 0.88); color: var(--on-dark); font-size: var(--t-small); line-height: 1.25; white-space: nowrap; transform: translate(-50%, -50%) scale(var(--pin-scale)); transform-origin: center; box-shadow: 0 2px 12px rgb(0 0 0 / 0.16); }
.cockpit__annotation > div { display: flex; align-items: center; justify-content: center; }
.cockpit__annotation strong { font-size: clamp(18px, 1.8vw, 28px); font-weight: 750; letter-spacing: -0.04em; }
.cockpit__annotation > span { display: block; color: #dce0ed; text-align: center; }
.cockpit__annotation .src { margin-left: 7px; font-size: 12px; }
.cockpit__annotation--driver { left: 25%; top: 11%; }
.cockpit__annotation--center { left: 82%; top: 17%; }
.cockpit__annotation--controls { left: 33%; top: 86%; }
.cockpit__annotation--controls strong { font-size: clamp(14px, 1.22vw, 19px); letter-spacing: -0.025em; }
.cockpit__caption { margin: 22px 0 0; color: var(--on-dark-2); font-size: var(--t-small); text-align: center; }
@media (max-width: 1000px) {
  .cockpit__annotation { padding: 5px 7px; }
  .cockpit__annotation strong { font-size: 18px; }
  .cockpit__annotation--controls strong { font-size: 13px; }
  .cockpit__annotation--center { left: 81%; }
}
@media (max-width: 700px) {
  .cockpit__pair { grid-template-columns: 1fr; gap: 30px; }
  .cockpit__annotation strong { font-size: 24px; }
  .cockpit__annotation--controls strong { font-size: 16px; }
  .cockpit__caption { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cockpit { --pin-opacity: 1; --pin-scale: 1; }
  .cockpit__annotation, .cockpit__leaders circle { transform: none; }
  .cockpit__annotation { translate: -50% -50%; }
}