:root {
  color-scheme: dark;

  --bg: #0d1117;
  --bg-elevated: #141b24;
  --bg-elevated-2: #1a222c;
  --border: #232d38;
  --text: #eaf0f6;
  --text-muted: #9fadbd;
  --text-faint: #6b7889;

  --accent: #ff5a1f;
  --accent-strong: #ff7a45;
  --accent-soft: rgba(255, 90, 31, 0.14);
  --accent-soft-border: rgba(255, 90, 31, 0.35);

  --overlay-scrim: rgba(0, 0, 0, 0.35);
  --hero-glow-1: rgba(255, 90, 31, 0.16);
  --hero-glow-2: rgba(80, 130, 255, 0.10);

  --sys-engine: var(--accent);
  --sys-cabin: #5b8dff;
  --sys-fuel: #ffb020;
  --sys-exhaust: #9aa7b8;
  --sys-suspension: #34c98f;
  --sys-electric: #22c3d6;
  --sys-battery: #ff6bcb;
  --sys-transmission: #8b6bff;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-header: 0 2px 24px -8px rgba(0, 0, 0, 0.6);

  --container: 1180px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6f9;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #edf1f6;
  --border: #dde3ec;
  --text: #131a22;
  --text-muted: #4c5a6b;
  --text-faint: #7c8a9b;

  --accent: #e14e14;
  --accent-strong: #d94512;
  --accent-soft: rgba(225, 78, 20, 0.10);
  --accent-soft-border: rgba(225, 78, 20, 0.28);

  --overlay-scrim: rgba(20, 26, 34, 0.06);
  --hero-glow-1: rgba(225, 78, 20, 0.10);
  --hero-glow-2: rgba(80, 130, 255, 0.08);

  --sys-cabin: #3061d6;
  --sys-fuel: #c97a00;
  --sys-exhaust: #62707f;
  --sys-suspension: #1f9c5e;
  --sys-electric: #0f8fa3;
  --sys-battery: #c93f96;
  --sys-transmission: #5b3fc9;

  --shadow-card: 0 10px 26px -14px rgba(20, 26, 34, 0.18);
  --shadow-header: 0 2px 18px -10px rgba(20, 26, 34, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg: #f4f6f9;
    --bg-elevated: #ffffff;
    --bg-elevated-2: #edf1f6;
    --border: #dde3ec;
    --text: #131a22;
    --text-muted: #4c5a6b;
    --text-faint: #7c8a9b;

    --accent: #e14e14;
    --accent-strong: #d94512;
    --accent-soft: rgba(225, 78, 20, 0.10);
    --accent-soft-border: rgba(225, 78, 20, 0.28);

    --overlay-scrim: rgba(20, 26, 34, 0.06);
    --hero-glow-1: rgba(225, 78, 20, 0.10);
    --hero-glow-2: rgba(80, 130, 255, 0.08);

    --sys-cabin: #3061d6;
    --sys-fuel: #c97a00;
    --sys-exhaust: #62707f;
    --sys-suspension: #1f9c5e;
    --sys-electric: #0f8fa3;
    --sys-battery: #c93f96;
    --sys-transmission: #5b3fc9;

    --shadow-card: 0 10px 26px -14px rgba(20, 26, 34, 0.18);
    --shadow-header: 0 2px 18px -10px rgba(20, 26, 34, 0.12);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  /* No webfont is shipped or fetched, so name only fonts that are actually
     present: system-ui resolves to SF Pro on Apple, Segoe UI on Windows and
     Roboto on Android. Adding "Inter" here would have been a promise the site
     never keeps. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.brand__mark {
  width: 36px;
  height: 36px;
  color: var(--accent);
  flex-shrink: 0;
}

.brand__name {
  color: var(--text);
}

.brand__name span:last-child {
  color: var(--accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav__list {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__list a {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
  padding: 6px 0;
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--text);
}

.main-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.main-nav__list a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language picker — a dropdown, not the row of pills it used to be. The row grew
   with every language: four already overflowed the header below ~470px, and with
   DE/IT/FR planned it would crowd the nav on desktop too. The trigger's width is
   fixed no matter how many languages the menu holds, so adding a language is a
   menu row and nothing else. */
.lang-picker {
  position: relative;
}

.lang-picker__trigger {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px; /* same as .theme-toggle, so the two sit level */
  padding: 0 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.lang-picker__trigger:hover {
  color: var(--accent-strong);
  border-color: var(--accent-soft-border);
}

.lang-picker.is-open .lang-picker__trigger {
  color: var(--text);
  border-color: var(--accent-soft-border);
}

.lang-picker__globe {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lang-picker__current {
  text-transform: uppercase;
}

.lang-picker__chevron {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.2s ease;
}

.lang-picker.is-open .lang-picker__chevron {
  transform: rotate(180deg);
}

.lang-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60; /* .site-header is 50 */
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.lang-picker__menu[hidden] {
  display: none;
}

/* Kept from the old pill row: js/i18n.js finds the options by this class. */
.lang-switch__option {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-switch__option:hover {
  background: var(--bg-elevated-2);
  color: var(--text);
}

.lang-switch__code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lang-switch__option.is-active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

.lang-switch__option.is-active .lang-switch__code {
  color: var(--accent-strong);
}

.theme-toggle {
  appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--accent-strong);
  border-color: var(--accent-soft-border);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle__icon--sun {
  display: none;
}

.theme-toggle.is-light .theme-toggle__icon--moon {
  display: none;
}

.theme-toggle.is-light .theme-toggle__icon--sun {
  display: block;
}

.nav-toggle {
  display: none;
  appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(60% 60% at 85% 0%, var(--hero-glow-1), transparent 60%),
    radial-gradient(40% 50% at 5% 100%, var(--hero-glow-2), transparent 60%);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

/* Hero language line. Styled as a caption rather than a control on purpose: an
   earlier version of this element looked like a row of buttons while not being
   clickable, which is why it was removed. The switch is in the header; this only
   states that the site is translated. */
.hero__langs {
  display: flex;
  align-items: center;
  /* Wraps rather than overflows: the code list grows with every language added. */
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 16px;
  color: var(--text-faint);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.hero__langs-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hero__langs-list {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.hero h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.hero p {
  color: var(--text-muted);
  font-size: 1.08rem;
  max-width: 46ch;
  margin: 0 0 34px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent), #ff3b0d);
  color: #180a03;
  box-shadow: 0 10px 24px -8px rgba(255, 90, 31, 0.55);
}

.btn--primary:hover {
  box-shadow: 0 14px 30px -8px rgba(255, 90, 31, 0.7);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--text-faint);
  background: var(--bg-elevated);
}

.hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__art svg {
  width: 100%;
  max-width: 460px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

@keyframes hero-sweep {
  0% { transform: translateX(0); }
  50% { transform: translateX(287px); }
  100% { transform: translateX(0); }
}

.hero-sweep {
  animation: hero-sweep 9.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-sweep { animation: none; }
}

/* ---------- Section heading ---------- */

.section {
  padding: 84px 0;
}

.section--alt {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section__head {
  max-width: 620px;
  margin: 0 0 44px;
}

.section__head h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.section__head p {
  color: var(--text-muted);
  margin: 0;
  font-size: 1.02rem;
}

/* ---------- Cutaway showcase ---------- */

.section--cutaway {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 84px 0;
}

.cutaway-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}

.cutaway-legend {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cutaway-types-hint {
  color: var(--text-faint);
  font-size: 0.88rem;
  margin: 0 0 22px;
}

.cutaway-legend__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--text);
}

.cutaway-legend__num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cutaway-art {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.cutaway-art svg {
  width: 100%;
  height: auto;
}

.cutaway-shadow {
  fill: var(--overlay-scrim);
  pointer-events: none;
}

.cutaway-shell {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  pointer-events: none;
}

.cutaway-chassis {
  stroke: var(--border);
  stroke-width: 2;
  pointer-events: none;
}

.cutaway-tire {
  fill: var(--bg-elevated-2);
  stroke: var(--text-faint);
  stroke-width: 5;
}

.cutaway-disc {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 3;
}

.cutaway-hub {
  fill: currentColor;
}

.cutaway-strut {
  stroke: var(--text-muted);
  stroke-width: 4;
  fill: none;
}

.cutaway-spring {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

.cutaway-exhaust {
  stroke: currentColor;
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  opacity: 0.85;
}

.cutaway-exhaust-tip {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.cutaway-fuel {
  fill: currentColor;
  opacity: 0.85;
}

.cutaway-fuel-cap {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cutaway-cabin {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.cutaway-cabin-divider {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.35;
}

.cutaway-seat {
  fill: currentColor;
  opacity: 0.65;
}

.cutaway-engine {
  fill: var(--bg-elevated-2);
  stroke: var(--text-muted);
  stroke-width: 2;
}

.cutaway-cylinder {
  fill: currentColor;
  opacity: 0.32;
  stroke: currentColor;
  stroke-width: 1.4;
}

.cutaway-pulley {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2.4;
}

.cutaway-belt {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
}

.cutaway-gearbox {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.cutaway-motor {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.cutaway-motor-core {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0.6;
}

.cutaway-battery {
  fill: currentColor;
  opacity: 0.28;
  stroke: currentColor;
  stroke-width: 2;
}

.cutaway-battery-cell {
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.55;
}

.cutaway-charge-port {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.cutaway-charge-plug {
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
}

.cutaway-airbag {
  fill: color-mix(in srgb, currentColor 30%, transparent);
  stroke: currentColor;
  stroke-width: 1.8;
}

.hotspot--engine { color: var(--sys-engine); }
.hotspot--cabin { color: var(--sys-cabin); }
.hotspot--fuel { color: var(--sys-fuel); }
.hotspot--exhaust { color: var(--sys-exhaust); }
.hotspot--suspension { color: var(--sys-suspension); }
.hotspot--transmission { color: var(--sys-transmission); }
.hotspot--motor { color: var(--sys-electric); }
.hotspot--battery { color: var(--sys-battery); }
.hotspot--charging { color: var(--sys-fuel); }
.hotspot--spring { color: var(--sys-fuel); }
.hotspot--damper { color: var(--sys-engine); }
.hotspot--arm { color: var(--sys-cabin); }
.hotspot--stabilizer { color: var(--sys-battery); }
.hotspot--balljoint { color: var(--sys-exhaust); }
.hotspot--subframe { color: var(--sys-electric); }
.hotspot--airbags { color: var(--sys-battery); }

.cutaway-marker circle {
  fill: var(--bg-elevated);
  stroke: currentColor;
  stroke-width: 2.5;
}

.cutaway-marker text {
  fill: currentColor;
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
  font-family: inherit;
}

.cutaway-caption {
  fill: var(--text);
  stroke: var(--bg-elevated);
  stroke-width: 4px;
  paint-order: stroke fill;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ---------- Cutaway detail page ---------- */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  color: var(--text-faint);
  font-size: 0.88rem;
}

.breadcrumbs a {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.breadcrumbs a:hover {
  color: var(--accent-strong);
}

.page-hero {
  padding: 20px 0 44px;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.page-hero p {
  color: var(--text-muted);
  font-size: 1.02rem;
  margin: 0;
  max-width: 56ch;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

.detail-stage {
  position: sticky;
  top: 96px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.detail-stage svg {
  width: 100%;
  height: auto;
}

.cutaway-hotspot {
  cursor: pointer;
  transition: filter 0.15s ease;
}

.cutaway-hotspot:hover,
.cutaway-hotspot:focus-visible,
.cutaway-hotspot.is-active {
  filter: drop-shadow(0 0 7px currentColor);
}

.cutaway-hotspot:focus-visible {
  outline: none;
}

.cutaway-hotspot.is-active .cutaway-marker circle {
  fill: currentColor;
}

.cutaway-hotspot.is-active .cutaway-marker text {
  fill: var(--bg-elevated);
}

/* .cutaway-marker is a plain child of a positioned <g transform="translate(...)">,
   never the positioned element itself — scaling it directly would otherwise
   wipe out the parent's translate (CSS transform overrides the SVG attribute). */
.cutaway-marker {
  transition: transform 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.cutaway-hotspot:hover .cutaway-marker,
.cutaway-hotspot:focus-visible .cutaway-marker,
.cutaway-hotspot.is-active .cutaway-marker {
  transform: scale(1.2);
}

.cutaway-hotspot:hover .cutaway-caption,
.cutaway-hotspot:focus-visible .cutaway-caption,
.cutaway-hotspot.is-active .cutaway-caption {
  opacity: 1;
}

.detail-panels {
  display: flex;
  flex-direction: column;
}

.detail-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.detail-panel.is-active {
  display: flex;
}

.detail-panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.detail-panel[data-accent="engine"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.detail-panel[data-accent="cabin"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.detail-panel[data-accent="fuel"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.detail-panel[data-accent="exhaust"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.detail-panel[data-accent="suspension"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.detail-panel[data-accent="transmission"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.detail-panel[data-accent="motor"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.detail-panel[data-accent="battery"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.detail-panel[data-accent="charging"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.detail-panel[data-accent="airbags"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }

.detail-panel__head h2 {
  margin: 0;
  font-size: 1.3rem;
}

.detail-panel__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.detail-panel__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 8px 0 0;
}

.detail-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-panel__list li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  font-size: 0.95rem;
}

.detail-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Catalog grid ---------- */

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-soft-border);
  background: var(--bg-elevated-2);
}

.card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
}

.card__icon svg {
  width: 28px;
  height: 28px;
}

.card h3 {
  margin: 0;
  font-size: 1.12rem;
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  flex-grow: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
}

.card__link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}

.card:hover .card__link svg {
  transform: translateX(3px);
}

.card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-faint);
  font-size: 0.85rem;
}

.site-footer__inner strong {
  color: var(--text-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer__links a {
  color: var(--text-muted);
  font-weight: 600;
}

.site-footer__links a:hover {
  color: var(--accent-strong);
}

/* ---------- General overview page ---------- */

.intro-block {
  max-width: 760px;
  margin: 0 0 56px;
}

.intro-block h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  margin: 0 0 14px;
}

.intro-block p {
  color: var(--text-muted);
  font-size: 1.02rem;
  margin: 0;
}

.type-tabs {
  position: relative;
}

.type-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.type-tabs__nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.type-tabs__nav label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.type-tabs__nav label svg {
  width: 16px;
  height: 16px;
}

.type-tabs__nav label:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.type-tabs input#tab-ice:checked ~ .type-tabs__nav label[for="tab-ice"],
.type-tabs input#tab-hybrid:checked ~ .type-tabs__nav label[for="tab-hybrid"],
.type-tabs input#tab-ev:checked ~ .type-tabs__nav label[for="tab-ev"] {
  background: var(--accent);
  border-color: transparent;
  color: #180a03;
}

.type-tabs__panel {
  display: none;
}

.type-tabs input#tab-ice:checked ~ .type-tabs__panels #panel-ice,
.type-tabs input#tab-hybrid:checked ~ .type-tabs__panels #panel-hybrid,
.type-tabs input#tab-ev:checked ~ .type-tabs__panels #panel-ev {
  display: block;
}

.flow-panel {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 40px;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.flow-panel__copy h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.flow-panel__copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* blank-line gap before the "Components" label in type cards */
.flow-panel__copy .detail-panel__label {
  margin-top: 24px;
}

.flow-diagram {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
}

.flow-diagram svg {
  width: 100%;
  height: auto;
}

.flow-box {
  fill: var(--bg-elevated-2);
  stroke: var(--text-muted);
  stroke-width: 2;
}

.flow-box__title {
  fill: var(--text);
  font-family: inherit;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 10px;
  font-weight: 700;
}

.flow-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 7;
  animation: flow-move 0.9s linear infinite;
}

@keyframes flow-move {
  to {
    stroke-dashoffset: -32;
  }
}

.flow-path--branch {
  stroke-width: 2.4;
  opacity: 0.75;
}

.flow-path--regen {
  stroke-dasharray: 5 6;
  animation-direction: reverse;
  opacity: 0.85;
}

.flow-label {
  fill: currentColor;
  stroke: var(--bg);
  stroke-width: 5px;
  paint-order: stroke fill;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  text-anchor: middle;
}

.flow--ice { color: var(--sys-engine); }
.flow--electric { color: var(--sys-electric); }
.flow--regen { color: var(--sys-suspension); }
.flow--charge { color: var(--text-muted); }

.system-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.system-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}

.system-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.system-card__head h3 {
  margin: 0;
  font-size: 1.12rem;
}

.system-card__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.system-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
}

.tag--ice {
  color: var(--sys-engine);
  border-color: color-mix(in srgb, var(--sys-engine) 40%, transparent);
  background: color-mix(in srgb, var(--sys-engine) 12%, transparent);
}

.tag--ev {
  color: var(--sys-electric);
  border-color: color-mix(in srgb, var(--sys-electric) 40%, transparent);
  background: color-mix(in srgb, var(--sys-electric) 12%, transparent);
}

.tag--all {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--bg-elevated-2);
}

/* ---------- Suspension page ---------- */

.susp-type-card {
  margin-bottom: 28px;
}

.susp-type-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.susp-type-card__head h3 {
  margin: 0;
  font-size: 1.25rem;
}

.susp-type-card__badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  flex-shrink: 0;
}

.susp-type-card__badge svg {
  width: 20px;
  height: 20px;
}

.susp-stage {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.susp-stage svg,
.susp-mini-stage svg {
  width: 100%;
  height: auto;
  display: block;
}

.susp-mini-stage {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 6px;
}

.susp-road {
  stroke: var(--border);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.susp-chassis {
  stroke: var(--text-muted);
  stroke-width: 4;
  stroke-linecap: round;
}

.susp-body {
  fill: var(--bg-elevated-2);
  stroke: var(--text-muted);
  stroke-width: 2;
}

.susp-tire {
  fill: var(--bg-elevated-2);
  stroke: var(--text-faint);
  stroke-width: 5;
}

.susp-disc {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2.5;
}

.susp-hub {
  fill: currentColor;
}

.susp-arm {
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
}

.susp-strut-body {
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
}

.susp-spring {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

.susp-beam {
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
}

.susp-twist {
  stroke: currentColor;
  stroke-width: 3;
}

.susp-bellow {
  fill: currentColor;
  opacity: 0.28;
  stroke: currentColor;
  stroke-width: 2;
}

.susp-bellow-ring {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: 0.75;
}

.susp-joint {
  fill: var(--bg-elevated);
  stroke: currentColor;
  stroke-width: 2;
}

.susp-label {
  fill: var(--text-faint);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  text-anchor: middle;
}

.susp-type--mcpherson { color: var(--sys-suspension); }
.susp-type--multilink { color: var(--sys-cabin); }
.susp-type--wishbone { color: var(--sys-engine); }
.susp-type--torsion { color: var(--sys-exhaust); }
.susp-type--air { color: var(--sys-electric); }
.susp-type--stabilizer { color: var(--sys-battery); }

.map-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.map-intro {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 20px;
}

.map-stage {
  margin-bottom: 44px;
}

/* The overview diagram fills a much wider box (relative to its viewBox) than
   the cutaway page's stage, so the shared .cutaway-caption font-size (tuned
   for that smaller scale) renders far too large here and can overflow the
   viewBox at the edges. Scale it back down and thin the halo to match. */
.map-stage .cutaway-caption {
  font-size: 6px;
  stroke-width: 2.5px;
}

.map-stage .cutaway-marker text {
  font-size: 7px;
}

.system-card[data-accent="spring"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="damper"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="arm"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="stabilizer"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="balljoint"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="subframe"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }

.system-card.is-highlight {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-card);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@keyframes susp-bump {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-15px); }
  65% { transform: translateY(8px); }
}

@keyframes susp-bump-soft {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-7px); }
  65% { transform: translateY(4px); }
}

@keyframes susp-bump-invert {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(14px); }
  65% { transform: translateY(-8px); }
}

@keyframes susp-spring-scale {
  0%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(0.6); }
  65% { transform: scaleY(1.2); }
}

@keyframes susp-arm-rotate {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-9deg); }
  65% { transform: rotate(5deg); }
}

@keyframes susp-arm-rotate-soft {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-5deg); }
  65% { transform: rotate(3deg); }
}

@keyframes susp-airride {
  0%, 50%, 100% { transform: translateY(0); }
  75% { transform: translateY(-16px); }
}

@keyframes susp-bellow-scale {
  0%, 50%, 100% { transform: scaleY(1); }
  75% { transform: scaleY(1.4); }
}

.susp-anim-wheel {
  animation: susp-bump 2.6s ease-in-out infinite;
  transform-box: fill-box;
}

.susp-anim-wheel-soft {
  animation: susp-bump-soft 2.6s ease-in-out infinite;
  transform-box: fill-box;
}

.susp-anim-wheel-delay {
  animation: susp-bump-soft 2.6s ease-in-out infinite;
  animation-delay: 0.45s;
  transform-box: fill-box;
}

.susp-anim-wheel-invert {
  animation: susp-bump-invert 2.6s ease-in-out infinite;
  transform-box: fill-box;
}

.susp-anim-spring {
  animation: susp-spring-scale 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: top;
}

.susp-anim-arm {
  animation: susp-arm-rotate 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 0px 0px;
}

.susp-anim-arm-soft {
  animation: susp-arm-rotate-soft 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 0px 0px;
}

.susp-anim-arm-mirror {
  animation: susp-arm-rotate-soft 2.6s ease-in-out infinite reverse;
  animation-delay: 0.45s;
  transform-box: fill-box;
  transform-origin: 0px 0px;
}

/* The overview diagram is drawn much larger than the card illustrations, so the
   spring/rod/arm amplitudes above (tuned for those) would desync from the 15px
   wheel travel of susp-bump. These two are matched to the overview's geometry:
   the spring is 83px tall and the damper rod 80px, so scaleY 0.82 / 1.10 moves
   their lower ends by the same 15px up / 8px down the wheel travels, and the
   222px control arm needs ±asin(15/222) ≈ 3.9deg to follow it. */
@keyframes susp-strut-compress {
  0%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(0.82); }
  65% { transform: scaleY(1.1); }
}

@keyframes susp-arm-pivot {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-3.9deg); }
  65% { transform: rotate(2.1deg); }
}

.susp-anim-strut {
  animation: susp-strut-compress 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: top;
}

/* origin = bottom-left of the bbox, i.e. the arm's inner pivot on the subframe
   (the line runs up to the right, so it is not 0 0 like .susp-anim-arm) */
.susp-anim-pivot {
  animation: susp-arm-pivot 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 0% 100%;
}

.susp-anim-airbody {
  animation: susp-airride 4s ease-in-out infinite;
  transform-box: fill-box;
}

.susp-anim-bellow {
  animation: susp-bellow-scale 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom;
}

.pt-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pt-diff-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.pt-diff-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pt-diff-card__head svg {
  width: 20px;
  height: 20px;
}

.pt-diff-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.pt-diff-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ---------- Brakes page ---------- */

.brake-disc {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.brake-vane {
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.55;
}

.brake-caliper {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.brake-pad {
  fill: currentColor;
  opacity: 0.7;
}

.brake-drum {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.brake-shoe {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  opacity: 0.7;
}

.brake-cylinder {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.brake-piston {
  fill: currentColor;
  opacity: 0.7;
}

.brake-fluid-line {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

.brake-lever {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

.brake-module {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.brake-pulse {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.brake-type--disc { color: var(--sys-cabin); }
.brake-type--drum { color: var(--sys-exhaust); }
.brake-type--parking { color: var(--sys-fuel); }
.brake-type--regen { color: var(--sys-electric); }

.hotspot--disc { color: var(--sys-cabin); }
.hotspot--caliper { color: var(--sys-engine); }
.hotspot--mastercyl { color: var(--sys-battery); }
.hotspot--abs { color: var(--sys-electric); }
.hotspot--lines { color: var(--sys-exhaust); }
.hotspot--booster { color: var(--sys-suspension); }

.system-card[data-accent="disc"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="caliper"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="mastercyl"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="abs"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="lines"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="booster"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }

@keyframes brake-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes brake-clamp-left {
  0%, 100% { transform: translateX(0); }
  40%, 60% { transform: translateX(7px); }
}

@keyframes brake-clamp-right {
  0%, 100% { transform: translateX(0); }
  40%, 60% { transform: translateX(-7px); }
}

@keyframes brake-shoe-expand {
  0%, 100% { transform: scale(1); }
  40%, 60% { transform: scale(1.1); }
}

@keyframes brake-piston-slide {
  0%, 100% { transform: translateX(0); }
  40%, 60% { transform: translateX(10px); }
}

@keyframes brake-pulse-fast {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.brake-anim-spin {
  animation: brake-spin 3s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.brake-anim-pad-left {
  animation: brake-clamp-left 2.4s ease-in-out infinite;
  transform-box: fill-box;
}

.brake-anim-pad-right {
  animation: brake-clamp-right 2.4s ease-in-out infinite;
  transform-box: fill-box;
}

.brake-anim-shoe {
  animation: brake-shoe-expand 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.brake-anim-piston {
  animation: brake-piston-slide 2.4s ease-in-out infinite;
  transform-box: fill-box;
}

.brake-anim-pulse {
  animation: brake-pulse-fast 0.5s ease-in-out infinite;
}

/* ---------- Transmission page ---------- */

.trans-gear {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.trans-tooth {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.trans-shaft {
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
}

.trans-housing {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.trans-clutch-plate {
  fill: currentColor;
  opacity: 0.65;
}

.trans-pulley {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.trans-fluid {
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.55;
  fill: none;
}

.trans-type--manual { color: var(--sys-engine); }
.trans-type--auto { color: var(--sys-cabin); }
.trans-type--dct { color: var(--sys-battery); }
.trans-type--cvt { color: var(--sys-fuel); }
.trans-type--reducer { color: var(--sys-electric); }

.hotspot--clutch { color: var(--sys-engine); }
.hotspot--gearset { color: var(--sys-cabin); }
.hotspot--driveshaft { color: var(--sys-exhaust); }
.hotspot--differential { color: var(--sys-battery); }
.hotspot--axle { color: var(--sys-suspension); }
.hotspot--housing { color: var(--sys-electric); }

.system-card[data-accent="clutch"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="gearset"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="driveshaft"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="differential"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="axle"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.system-card[data-accent="housing"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }

@keyframes trans-spin-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes trans-pulley-a {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.62); }
}

@keyframes trans-pulley-b {
  0%, 100% { transform: scale(0.62); }
  50% { transform: scale(1); }
}

.trans-anim-spin-reverse {
  animation: trans-spin-reverse 3s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.trans-anim-pulley-a {
  animation: trans-pulley-a 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.trans-anim-pulley-b {
  animation: trans-pulley-b 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Engine page ---------- */

.eng-block {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-wall {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: 0.6;
}

.eng-piston {
  fill: currentColor;
  opacity: 0.7;
}

.eng-rod {
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
}

.eng-crank {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-crankpin {
  fill: currentColor;
  opacity: 0.75;
}

.eng-flywheel {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-head {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-chamber {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-valve {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

.eng-cam {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-cam-lobe {
  fill: currentColor;
  opacity: 0.7;
}

.eng-spark-body {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

.eng-spark {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.eng-pipe {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

.eng-throttle-plate {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

.eng-injector {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-spray {
  fill: currentColor;
}

.eng-flame {
  fill: currentColor;
}

.eng-coolant {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  opacity: 0.6;
  stroke-linecap: round;
}

.eng-turbo {
  fill: var(--bg-elevated-2);
  stroke: currentColor;
  stroke-width: 2;
}

.eng-vane {
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.6;
}

.eng-oil {
  fill: currentColor;
  opacity: 0.32;
}

.eng-type--inline { color: var(--sys-engine); }
.eng-type--v { color: var(--sys-cabin); }
.eng-type--boxer { color: var(--sys-battery); }
.eng-type--petrol { color: var(--sys-fuel); }
.eng-type--diesel { color: var(--sys-exhaust); }
.eng-type--gas { color: var(--sys-electric); }

.hotspot--block { color: var(--sys-engine); }
.hotspot--piston { color: var(--sys-cabin); }
.hotspot--conrod { color: var(--sys-transmission); }
.hotspot--crankshaft { color: var(--sys-battery); }
.hotspot--head { color: var(--sys-exhaust); }
.hotspot--camshaft { color: var(--sys-suspension); }
.hotspot--sparkplug { color: var(--sys-electric); }
.hotspot--flywheel { color: var(--sys-fuel); }
.hotspot--intake { color: var(--sys-cabin); }
.hotspot--throttle { color: var(--sys-suspension); }
.hotspot--injector { color: var(--sys-fuel); }
.hotspot--cooling { color: var(--sys-electric); }
.hotspot--oilpump { color: var(--sys-battery); }
.hotspot--turbo { color: var(--sys-transmission); }

.system-card[data-accent="block"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="piston"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="conrod"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.system-card[data-accent="crankshaft"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="head"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="camshaft"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.system-card[data-accent="sparkplug"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="flywheel"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="intake"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="throttle"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.system-card[data-accent="injector"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="cooling"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="oilpump"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="turbo"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }

@keyframes eng-piston-move {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(26px); }
}

@keyframes eng-valve-move {
  0%, 100% { transform: translateY(0); }
  45%, 55% { transform: translateY(7px); }
}

@keyframes eng-throttle-turn {
  0%, 100% { transform: rotate(-34deg); }
  50% { transform: rotate(34deg); }
}

.eng-anim-piston {
  animation: eng-piston-move 1.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.eng-anim-valve {
  animation: eng-valve-move 1.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.eng-anim-throttle {
  animation: eng-throttle-turn 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Lighting & fuses page ---------- */

.light-rail {
  stroke: var(--text-faint);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  opacity: 0.5;
}

.light-flow-line {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
  animation: light-flow 0.7s linear infinite;
}

.light-fusebox { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.light-fuse-body { fill: currentColor; opacity: 0.7; }
.light-fuse-clip { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.light-fuse-filament { stroke: currentColor; stroke-width: 2; fill: none; }
.light-relay { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.light-relay-arm { stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.light-coil { stroke: currentColor; stroke-width: 2; fill: none; opacity: 0.75; }
.light-module { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.light-battery { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.light-terminal { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

.lamp-housing { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.lamp-lens { fill: currentColor; opacity: 0.16; }
.lamp-glow { fill: currentColor; }
.lamp-ray { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.lamp-arc { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
.lamp-led { fill: currentColor; }
.lamp-filament { stroke: currentColor; stroke-width: 2.5; fill: none; }

.light-type--halogen { color: var(--sys-fuel); }
.light-type--xenon { color: var(--sys-electric); }
.light-type--led { color: var(--sys-cabin); }
.light-type--laser { color: var(--sys-battery); }

.hotspot--headlight { color: var(--sys-electric); }
.hotspot--drl { color: var(--sys-cabin); }
.hotspot--turn { color: var(--sys-fuel); }
.hotspot--braketail { color: var(--sys-engine); }
.hotspot--reverse { color: var(--sys-exhaust); }
.hotspot--fog { color: var(--sys-fuel); }
.hotspot--fusebox { color: var(--sys-transmission); }
.hotspot--fuse { color: var(--sys-battery); }
.hotspot--relay { color: var(--sys-suspension); }
.hotspot--wiring { color: var(--sys-electric); }
.hotspot--bcm { color: var(--sys-transmission); }

.system-card[data-accent="headlight"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="drl"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="turn"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="braketail"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="reverse"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="fog"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="fusebox"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.system-card[data-accent="fuse"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="relay"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.system-card[data-accent="wiring"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="bcm"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }

@keyframes light-flow {
  to { stroke-dashoffset: -12; }
}

@keyframes light-blink {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0.12; }
  100% { opacity: 1; }
}

@keyframes light-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes light-relay-click {
  0%, 40% { transform: rotate(0deg); }
  55%, 90% { transform: rotate(-15deg); }
}

.light-anim-glow {
  animation: light-pulse 1.8s ease-in-out infinite;
}

.light-anim-blink {
  animation: light-blink 1.1s ease-in-out infinite;
}

.light-anim-relay {
  animation: light-relay-click 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: left center;
}

/* ---------- Interior layout page ---------- */

.int-panel { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.int-trim { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.55; }
.int-screen { fill: currentColor; opacity: 0.7; }
.int-screen-dim { fill: currentColor; opacity: 0.26; }
.int-seat { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.int-cushion { fill: currentColor; opacity: 0.5; }
.int-wheel { fill: none; stroke: currentColor; stroke-width: 5; }
.int-spoke { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.int-hub { fill: currentColor; opacity: 0.7; }
.int-vent { fill: none; stroke: currentColor; stroke-width: 2; }
.int-airflow { stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 4 6; opacity: 0.8; }
.int-pedal { fill: currentColor; opacity: 0.7; }
.int-dial { fill: none; stroke: currentColor; stroke-width: 2.5; }
.int-needle { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.int-line { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.int-belt { stroke: currentColor; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.int-airbag { fill: currentColor; opacity: 0.45; }
.int-glass { fill: currentColor; opacity: 0.14; stroke: currentColor; stroke-width: 1.5; }
.int-knob { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }

.int-type--classic { color: var(--sys-fuel); }
.int-type--digital { color: var(--sys-electric); }
.int-type--minimal { color: var(--sys-transmission); }

.hotspot--dashboard { color: var(--sys-cabin); }
.hotspot--cluster { color: var(--sys-electric); }
.hotspot--steering { color: var(--sys-engine); }
.hotspot--infotainment { color: var(--sys-transmission); }
.hotspot--console { color: var(--sys-suspension); }
.hotspot--seatfront { color: var(--sys-fuel); }
.hotspot--seatrear { color: var(--sys-battery); }
.hotspot--door { color: var(--sys-exhaust); }
.hotspot--pedals { color: var(--sys-engine); }
.hotspot--hvac { color: var(--sys-electric); }
.hotspot--safety { color: var(--sys-battery); }
.hotspot--sunroof { color: var(--sys-cabin); }

.system-card[data-accent="dashboard"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="cluster"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="steering"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="infotainment"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.system-card[data-accent="console"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.system-card[data-accent="seatfront"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="seatrear"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="door"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="pedals"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="hvac"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="safety"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="sunroof"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }

@keyframes int-steer {
  0%, 100% { transform: rotate(-11deg); }
  50% { transform: rotate(11deg); }
}

@keyframes int-recline {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-9deg); }
}

@keyframes int-airflow-move {
  to { stroke-dashoffset: -20; }
}

@keyframes int-window-slide {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(15px); }
}

@keyframes int-roof-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-24px); }
}

@keyframes int-pedal-press {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-7deg); }
}

@keyframes int-needle-sweep {
  0%, 100% { transform: rotate(-42deg); }
  50% { transform: rotate(52deg); }
}

@keyframes int-screen-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.82; }
}

.int-anim-steer { animation: int-steer 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.int-anim-recline { animation: int-recline 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.int-anim-airflow { animation: int-airflow-move 0.9s linear infinite; }
.int-anim-window { animation: int-window-slide 4s ease-in-out infinite; transform-box: fill-box; }
.int-anim-roof { animation: int-roof-slide 5s ease-in-out infinite; transform-box: fill-box; }
.int-anim-pedal { animation: int-pedal-press 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
.int-anim-needle { animation: int-needle-sweep 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.int-anim-screen { animation: int-screen-glow 2.6s ease-in-out infinite; }

/* ---------- Tires & wheels page ---------- */

.tw-tire { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.tw-tread-band { fill: none; stroke: currentColor; }
.tw-tread-block { fill: currentColor; }
.tw-rim { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.tw-spoke { stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.tw-hub { fill: currentColor; opacity: 0.7; }
.tw-bolt { fill: currentColor; }
.tw-valve { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
.tw-belt { stroke: currentColor; stroke-width: 3; fill: none; opacity: 0.75; }
.tw-ply { stroke: currentColor; stroke-width: 2; fill: none; opacity: 0.5; }
.tw-liner { stroke: currentColor; stroke-width: 3; fill: none; opacity: 0.5; }
.tw-bead { fill: currentColor; }
.tw-signal { stroke: currentColor; stroke-width: 2; fill: none; }
.tw-sipe { stroke: currentColor; stroke-width: 1.5; opacity: 0.55; stroke-linecap: round; }
.tw-sensor { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.tw-water { stroke: currentColor; stroke-width: 2.5; fill: none; opacity: 0.6; stroke-linecap: round; }

.tw-type--summer { color: var(--sys-fuel); }
.tw-type--winter { color: var(--sys-electric); }
.tw-type--studded { color: var(--sys-cabin); }
.tw-type--allseason { color: var(--sys-suspension); }
.tw-type--offroad { color: var(--sys-engine); }
.tw-type--regular { color: var(--sys-cabin); }
.tw-type--runflat { color: var(--sys-transmission); }

.hotspot--tread { color: var(--sys-exhaust); }
.hotspot--sidewall { color: var(--sys-cabin); }
.hotspot--casing { color: var(--sys-transmission); }
.hotspot--rim { color: var(--sys-electric); }
.hotspot--hub { color: var(--sys-battery); }
.hotspot--valve { color: var(--sys-fuel); }
.hotspot--tpms { color: var(--sys-suspension); }

.system-card[data-accent="tread"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="sidewall"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="casing"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.system-card[data-accent="rim"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="hub"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="valve"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="tpms"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }

@keyframes tw-flex {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.93); }
}

.tw-anim-flex {
  animation: tw-flex 1.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom center;
}

/* ---------- Steering system page ---------- */

.steer-wheel { fill: none; stroke: currentColor; stroke-width: 4; }
.steer-spoke { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.steer-column { stroke: currentColor; stroke-width: 6; stroke-linecap: round; }
.steer-shaft { stroke: currentColor; stroke-width: 6; stroke-linecap: round; }
.steer-rack { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.steer-tooth { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.steer-pinion { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.steer-tierod { stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.steer-knuckle { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.steer-roadwheel { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.steer-motor { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.steer-housing { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.steer-sensor { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.steer-fluid { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
.steer-signal { stroke: currentColor; stroke-width: 2; fill: none; }

.steer-type--manual { color: var(--sys-exhaust); }
.steer-type--hps { color: var(--sys-fuel); }
.steer-type--eps { color: var(--sys-electric); }
.steer-type--sbw { color: var(--sys-battery); }

.hotspot--wheel { color: var(--sys-cabin); }
.hotspot--column { color: var(--sys-transmission); }
.hotspot--rack { color: var(--sys-engine); }
.hotspot--assist { color: var(--sys-electric); }
.hotspot--sensor { color: var(--sys-fuel); }
.hotspot--tierod { color: var(--sys-exhaust); }
.hotspot--knuckle { color: var(--sys-suspension); }

.system-card[data-accent="wheel"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="column"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.system-card[data-accent="rack"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="assist"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="sensor"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="tierod"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="knuckle"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }

@keyframes steer-turn {
  0%, 100% { transform: rotate(-26deg); }
  50% { transform: rotate(26deg); }
}

@keyframes steer-slide {
  0%, 100% { transform: translateX(-9px); }
  50% { transform: translateX(9px); }
}

@keyframes steer-toe {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}

@keyframes steer-signal-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.steer-anim-turn {
  animation: steer-turn 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.steer-anim-slide {
  animation: steer-slide 3.4s ease-in-out infinite;
  transform-box: fill-box;
}

.steer-anim-toe {
  animation: steer-toe 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.steer-anim-signal {
  animation: steer-signal-pulse 1s ease-in-out infinite;
}

/* ---------- Safety & driver assistance page ---------- */

.sf-body { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.sf-glass { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.55; }
.sf-outline { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.4; }
.sf-seat { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.sf-wheel { fill: currentColor; opacity: 0.35; }
.sf-road { stroke: var(--text-faint); stroke-width: 3; stroke-linecap: round; opacity: 0.6; }
.sf-lane { stroke: currentColor; stroke-width: 3; fill: none; stroke-dasharray: 14 12; opacity: 0.5; }
.sf-bag { fill: currentColor; opacity: 0.45; stroke: currentColor; stroke-width: 2; }
.sf-inflator { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.sf-belt { stroke: currentColor; stroke-width: 6; fill: none; stroke-linecap: round; }
.sf-buckle { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.sf-cage { stroke: currentColor; stroke-width: 5; fill: none; stroke-linecap: round; opacity: 0.85; }
.sf-crumple { stroke: currentColor; stroke-width: 3; fill: none; stroke-linejoin: round; }
.sf-box { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.sf-signal { stroke: currentColor; stroke-width: 2; fill: none; }
.sf-wave { stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.sf-cone { fill: currentColor; opacity: 0.16; }
.sf-target { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; opacity: 0.85; }
.sf-pulse { fill: currentColor; }
.sf-disc { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.sf-tooth { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: 0.75; }
.sf-arrow { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.sf-type--passive { color: var(--sys-battery); }
.sf-type--active { color: var(--sys-fuel); }
.sf-type--adas { color: var(--sys-electric); }
.sf-type--sensing { color: var(--sys-transmission); }

.hotspot--sf-airbag { color: var(--sys-battery); }
.hotspot--sf-belt { color: var(--sys-cabin); }
.hotspot--sf-cage { color: var(--sys-exhaust); }
.hotspot--sf-crash { color: var(--sys-engine); }
.hotspot--sf-abs { color: var(--sys-fuel); }
.hotspot--sf-esp { color: var(--sys-suspension); }
.hotspot--sf-radar { color: var(--sys-electric); }
.hotspot--sf-camera { color: var(--sys-transmission); }
.hotspot--sf-ultra { color: var(--sys-cabin); }
.hotspot--sf-adas { color: var(--sys-engine); }

.system-card[data-accent="sf-airbag"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="sf-belt"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="sf-cage"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="sf-crash"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="sf-abs"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="sf-esp"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.system-card[data-accent="sf-radar"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="sf-camera"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.system-card[data-accent="sf-ultra"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="sf-adas"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }

/* SAE automation levels scale */
.sae-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.sae-step {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.sae-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: currentColor;
  opacity: 0.85;
}

.sae-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.sae-step h4 {
  margin: 12px 0 6px;
  font-size: 1rem;
  color: var(--text);
}

.sae-step p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.sae-step--l0 { color: var(--sys-exhaust); }
.sae-step--l1 { color: var(--sys-cabin); }
.sae-step--l2 { color: var(--sys-electric); }
.sae-step--l3 { color: var(--sys-suspension); }
.sae-step--l4 { color: var(--sys-fuel); }
.sae-step--l5 { color: var(--sys-battery); }

@keyframes sf-inflate {
  0%, 12% { transform: scale(0.08); opacity: 0; }
  24% { transform: scale(1.12); opacity: 1; }
  32%, 88% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.08); opacity: 0; }
}

@keyframes sf-tighten {
  0%, 100% { transform: translateX(0); }
  45%, 70% { transform: translateX(7px); }
}

@keyframes sf-crumple {
  0%, 25% { transform: scaleX(1); }
  50%, 80% { transform: scaleX(0.55); }
  100% { transform: scaleX(1); }
}

@keyframes sf-impact {
  0%, 25% { transform: translateX(0); }
  50%, 80% { transform: translateX(-22px); }
  100% { transform: translateX(0); }
}

@keyframes sf-wave-out {
  0% { transform: scale(0.35); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes sf-scan {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(18deg); }
}

@keyframes sf-swerve {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(9deg); }
  60% { transform: rotate(-5deg); }
  85% { transform: rotate(0deg); }
}

@keyframes sf-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@keyframes sf-approach {
  0% { transform: translateX(0); opacity: 0.35; }
  70% { transform: translateX(-46px); opacity: 1; }
  100% { transform: translateX(-46px); opacity: 0.35; }
}

.sf-anim-inflate {
  animation: sf-inflate 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.sf-anim-tighten {
  animation: sf-tighten 3.6s ease-in-out infinite;
  transform-box: fill-box;
}

.sf-anim-crumple {
  animation: sf-crumple 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: right center;
}

.sf-anim-impact {
  animation: sf-impact 3.6s ease-in-out infinite;
  transform-box: fill-box;
}

.sf-anim-wave {
  animation: sf-wave-out 2s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.sf-anim-scan {
  animation: sf-scan 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.sf-anim-swerve {
  animation: sf-swerve 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.sf-anim-blink {
  animation: sf-blink 1.1s ease-in-out infinite;
}

.sf-anim-approach {
  animation: sf-approach 3.4s ease-in-out infinite;
  transform-box: fill-box;
}

/* ---------- Electrical system & charging page ---------- */

.el-case { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.el-box { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.el-cell { fill: currentColor; opacity: 0.28; }
.el-fill { fill: currentColor; opacity: 0.45; }
.el-terminal { fill: currentColor; }
.el-wire { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
.el-wire-hv { stroke: currentColor; stroke-width: 6; fill: none; stroke-linecap: round; }
.el-wire-thin { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.el-signal { stroke: currentColor; stroke-width: 2; fill: none; opacity: 0.75; }
.el-pulse { fill: currentColor; }
.el-coil { stroke: currentColor; stroke-width: 3; fill: none; }
.el-pulley { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.el-belt { stroke: currentColor; stroke-width: 3.5; fill: none; opacity: 0.7; }
.el-gear-tooth { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: 0.75; }
.el-hub { fill: currentColor; opacity: 0.7; }
.el-plug { fill: var(--bg-elevated-2); stroke: currentColor; stroke-width: 2; }
.el-pin { fill: currentColor; opacity: 0.8; }
.el-arrow { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.el-bolt { fill: currentColor; opacity: 0.85; }
.el-label-line { stroke: currentColor; stroke-width: 1.6; fill: none; opacity: 0.4; stroke-dasharray: 4 4; }

.el-type--12v { color: var(--sys-fuel); }
.el-type--48v { color: var(--sys-suspension); }
.el-type--hv { color: var(--sys-battery); }
.el-type--charge { color: var(--sys-electric); }

.hotspot--el-battery12 { color: var(--sys-fuel); }
.hotspot--el-alternator { color: var(--sys-engine); }
.hotspot--el-starter { color: var(--sys-transmission); }
.hotspot--el-bsg { color: var(--sys-suspension); }
.hotspot--el-hvbattery { color: var(--sys-battery); }
.hotspot--el-bms { color: var(--sys-cabin); }
.hotspot--el-inverter { color: var(--sys-electric); }
.hotspot--el-dcdc { color: var(--sys-exhaust); }
.hotspot--el-charger { color: var(--sys-engine); }
.hotspot--el-port { color: var(--sys-suspension); }

.system-card[data-accent="el-battery12"] .card__icon { color: var(--sys-fuel); background: color-mix(in srgb, var(--sys-fuel) 14%, transparent); border-color: color-mix(in srgb, var(--sys-fuel) 35%, transparent); }
.system-card[data-accent="el-alternator"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="el-starter"] .card__icon { color: var(--sys-transmission); background: color-mix(in srgb, var(--sys-transmission) 14%, transparent); border-color: color-mix(in srgb, var(--sys-transmission) 35%, transparent); }
.system-card[data-accent="el-bsg"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }
.system-card[data-accent="el-hvbattery"] .card__icon { color: var(--sys-battery); background: color-mix(in srgb, var(--sys-battery) 14%, transparent); border-color: color-mix(in srgb, var(--sys-battery) 35%, transparent); }
.system-card[data-accent="el-bms"] .card__icon { color: var(--sys-cabin); background: color-mix(in srgb, var(--sys-cabin) 14%, transparent); border-color: color-mix(in srgb, var(--sys-cabin) 35%, transparent); }
.system-card[data-accent="el-inverter"] .card__icon { color: var(--sys-electric); background: color-mix(in srgb, var(--sys-electric) 14%, transparent); border-color: color-mix(in srgb, var(--sys-electric) 35%, transparent); }
.system-card[data-accent="el-dcdc"] .card__icon { color: var(--sys-exhaust); background: color-mix(in srgb, var(--sys-exhaust) 14%, transparent); border-color: color-mix(in srgb, var(--sys-exhaust) 35%, transparent); }
.system-card[data-accent="el-charger"] .card__icon { color: var(--sys-engine); background: color-mix(in srgb, var(--sys-engine) 14%, transparent); border-color: color-mix(in srgb, var(--sys-engine) 35%, transparent); }
.system-card[data-accent="el-port"] .card__icon { color: var(--sys-suspension); background: color-mix(in srgb, var(--sys-suspension) 14%, transparent); border-color: color-mix(in srgb, var(--sys-suspension) 35%, transparent); }

/* Current flowing along a conductor: the signature effect of this page. Works on any
   stroked path — the dash pattern is set here, so don't also set stroke-dasharray inline. */
@keyframes el-flow {
  to { stroke-dashoffset: -24; }
}

@keyframes el-charge {
  0%, 8% { transform: scaleY(0.12); }
  92%, 100% { transform: scaleY(1); }
}

@keyframes el-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@keyframes el-swing {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(14deg); }
}

.el-anim-flow {
  stroke-dasharray: 6 6;
  animation: el-flow 0.8s linear infinite;
}

.el-anim-flow-slow {
  stroke-dasharray: 6 6;
  animation: el-flow 1.6s linear infinite;
}

.el-anim-flow-rev {
  stroke-dasharray: 6 6;
  animation: el-flow 0.8s linear infinite reverse;
}

.el-anim-charge {
  animation: el-charge 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom center;
}

.el-anim-blink {
  animation: el-blink 1.1s ease-in-out infinite;
}

.el-anim-swing {
  animation: el-swing 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- About page ---------- */

/* Fact cards reuse .card / .catalog-grid, but they are not links — kill the
   hover lift so nothing looks clickable. */
.ab-fact:hover {
  transform: none;
  border-color: var(--border);
  background: var(--bg-elevated);
}

/* The intro is one block of running text, so its paragraphs get a normal
   paragraph gap instead of a full .intro-block margin between them. */
.ab-intro p + p {
  margin-top: 16px;
}

.ab-intro-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.ab-intro-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ab-intro-list svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 3px;
  color: var(--accent-strong);
}

/* Support / "say thanks" panel */
.ab-support {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-card);
}

.ab-support__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
}

.ab-support__icon svg {
  width: 30px;
  height: 30px;
}

.ab-support h2 {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
}

.ab-support p {
  margin: 0 auto 14px;
  max-width: 640px;
  color: var(--text-muted);
  font-size: 1rem;
}

.ab-free-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 26px;
}

.ab-free-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
}

.ab-free-tag svg {
  width: 14px;
  height: 14px;
  color: var(--sys-suspension);
}

/* The donate page does not exist yet: the button is present but inert. */
.btn--soon {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: default;
}

.btn--soon:active {
  transform: none;
}

.btn--soon .btn__soon {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Educational-use disclaimer */
.ab-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  background: var(--bg-elevated);
}

.ab-note__icon {
  flex: 0 0 22px;
  color: var(--sys-fuel);
}

.ab-note__icon svg {
  width: 22px;
  height: 22px;
}

.ab-note h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.ab-note p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.ab-note p a {
  color: var(--accent);
}

.ab-note + .ab-note {
  margin-top: 16px;
}

/* Promo block that replaces the old thin #about section on the home page */
.ab-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: var(--shadow-card);
}

.ab-promo__text {
  max-width: 720px;
}

.ab-promo__text h2 {
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.ab-promo__text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .cutaway-layout {
    grid-template-columns: 1fr;
  }

  .cutaway-art {
    order: -1;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-stage {
    position: static;
  }

  .hero__art {
    order: -1;
  }

  .hero__art svg {
    max-width: 320px;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow-panel {
    grid-template-columns: 1fr;
  }

  .system-grid {
    grid-template-columns: 1fr;
  }

  .pt-diff-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .main-nav__list {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    display: none;
  }

  .main-nav__list a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .main-nav__list a::after {
    display: none;
  }

  .main-nav.is-open .main-nav__list {
    display: flex;
  }

  .nav-toggle {
    display: flex;
    width: 38px;
    height: 38px;
  }

  /* Phone-width budget for the header row. At 390px the container gutters (48),
     the brand and the three action controls left nothing to spare, so trim the
     row rather than let it push the burger off-screen: the chevron goes (the
     trigger still reads as a menu from the globe), the action gap tightens and
     the brand mark drops a size. */
  .header-actions {
    gap: 8px;
  }

  .lang-picker__chevron {
    display: none;
  }

  .brand {
    font-size: 1rem;
    gap: 8px;
  }

  .brand__mark {
    width: 30px;
    height: 30px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 64px 0 56px;
  }

  .section {
    padding: 56px 0;
  }
}