/* ==================================================================
   How a Car Works — styles
   Tokens first, then page layout, then the control kit, then every
   class the SVG diagrams paint with.
   ================================================================== */

:root {
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bg: #0b0e14;
  --bg-2: #0f131c;
  --panel: #141924;
  --panel-2: #1a2131;
  --line: #262e3f;
  --line-soft: #1d2433;
  --text: #e9edf5;
  --muted: #94a0b8;
  --faint: #5d6880;

  --accent: #ffb020;
  --accent-2: #4fc3e8;
  --ok: #5fd39a;
  --warn: #ffb020;
  --hot: #ff6b4a;

  --metal-hi: #46516a;
  --metal-lo: #29303f;
  --metal-edge: #5d6a84;
  --glass: #263049;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 36px rgb(0 0 0 / .28);
  --radius: 16px;
}
:root[data-theme='light'] {
  --bg: #f6f7fa;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #f0f2f7;
  --line: #dce1ea;
  --line-soft: #e7ebf2;
  --text: #111620;
  --muted: #59637a;
  --faint: #8b96ab;

  --accent: #b06c05;
  --accent-2: #0f7d9e;
  --ok: #158055;
  --warn: #b06c05;
  --hot: #c93f24;

  --metal-hi: #ccd4e0;
  --metal-lo: #a4afc1;
  --metal-edge: #7b8799;
  --glass: #d7e2ee;
  --shadow: 0 1px 2px rgb(16 22 32 / .06), 0 10px 30px rgb(16 22 32 / .08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f6f7fa; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f0f2f7;
    --line: #dce1ea; --line-soft: #e7ebf2; --text: #111620; --muted: #59637a; --faint: #8b96ab;
    --accent: #b06c05; --accent-2: #0f7d9e; --ok: #158055; --warn: #b06c05; --hot: #c93f24;
    --metal-hi: #ccd4e0; --metal-lo: #a4afc1; --metal-edge: #7b8799; --glass: #d7e2ee;
    --shadow: 0 1px 2px rgb(16 22 32 / .06), 0 10px 30px rgb(16 22 32 / .08);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.021em; margin: 0; }
p { margin: 0 0 1em; }
em { font-style: normal; color: var(--text); box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--accent) 22%, transparent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: #12161f; padding: 10px 16px; border-radius: 8px;
  font-weight: 600; text-decoration: none; transition: top .16s;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

/* ---------- top bar ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: 0 50%;
}
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__inner {
  max-width: 1400px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.02em; color: var(--text); text-decoration: none;
  white-space: nowrap;
}
.brand__mark { width: 24px; height: 24px; color: var(--accent); flex: none; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav__link {
  display: block; padding: 7px 11px; border-radius: 9px; font-size: 14px;
  color: var(--muted); text-decoration: none; font-weight: 500; transition: color .15s, background .15s;
}
.nav__link:hover { color: var(--text); background: var(--panel-2); }
.nav__link.is-current { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav__toggle { display: none; }

.theme {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 6px 12px 6px 9px; font: 500 13px var(--sans); cursor: pointer;
}
.theme:hover { color: var(--text); border-color: var(--metal-edge); }
.theme__dot { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

@media (max-width: 900px) {
  .nav__toggle {
    display: inline-flex; margin-left: auto; width: 38px; height: 34px; align-items: center; justify-content: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  }
  .nav__bars, .nav__bars::before, .nav__bars::after {
    display: block; width: 16px; height: 2px; background: var(--text); border-radius: 2px; position: relative;
  }
  .nav__bars::before, .nav__bars::after { content: ''; position: absolute; left: 0; }
  .nav__bars::before { top: -5px; } .nav__bars::after { top: 5px; }
  .nav { margin-left: 0; }
  .nav__list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
  }
  .nav__list.is-open { display: flex; }
  .nav__link { padding: 11px 14px; font-size: 15px; }
}

/* ---------- hero ---------- */
.hero {
  max-width: 1000px; margin: 0 auto; padding: 84px 20px 64px;
}
.hero__kicker {
  font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.hero__title { font-size: clamp(2.1rem, 6vw, 4rem); font-weight: 700; margin-bottom: 24px; }
.hero__lede { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--muted); max-width: 66ch; }
.hero__stats { display: flex; gap: 40px; flex-wrap: wrap; margin: 36px 0 32px; }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats b { font: 700 2rem/1.1 var(--sans); color: var(--accent); letter-spacing: -0.03em; }
.hero__stats span { font-size: 13px; color: var(--faint); }
.hero__cta {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: #14181f; font-weight: 650; text-decoration: none;
  transition: transform .15s, filter .15s;
}
.hero__cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---------- sections ---------- */
.system { max-width: 1400px; margin: 0 auto; padding: 56px 20px 24px; scroll-margin-top: 78px; }
.system + .system { border-top: 1px solid var(--line-soft); }
.system__head { max-width: 72ch; margin-bottom: 26px; }
.system__num {
  display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .16em;
  color: var(--accent); margin-bottom: 10px;
}
.system__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 10px; }
.system__lede { color: var(--muted); margin: 0; font-size: 1.03rem; }

.system__body {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1080px) {
  .system__body { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  .system__body--wide { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
  .panel { position: sticky; top: 78px; }
}

.stage {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 14px 10px; box-shadow: var(--shadow); min-width: 0;
}
.stage__svg { display: block; width: 100%; height: auto; }
.stage__hint { margin: 6px 4px 2px; font-size: 13px; color: var(--faint); }
.stage__error { color: var(--hot); font-size: 14px; padding: 24px; text-align: center; }

.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel__group {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; box-shadow: var(--shadow);
}
.panel__title {
  font: 600 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 13px;
}
.panel__note { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.55; }
.panel__group > .panel__note:first-child { margin-top: 0; }

/* ---------- notes / prose ---------- */
.notes { max-width: 1400px; margin: 30px auto 0; }
.notes__cols { display: grid; gap: 8px 48px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .notes__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notes h3 {
  font-size: 1rem; margin: 22px 0 8px; color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.notes h3::before { content: ''; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; flex: none; }
.notes p { color: var(--muted); max-width: 62ch; font-size: 15px; }
.notes__aside {
  border-left: 2px solid var(--line); padding-left: 16px; font-size: 14px !important; color: var(--faint) !important;
}

.closing { max-width: 760px; margin: 60px auto 0; padding: 0 20px; text-align: center; }
.closing h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 14px; }
.closing p { color: var(--muted); }

.footer {
  max-width: 760px; margin: 72px auto 0; padding: 28px 20px 64px;
  border-top: 1px solid var(--line-soft); text-align: center;
}
.footer p { font-size: 13.5px; color: var(--faint); }
.footer__meta { font-size: 12.5px; opacity: .8; }

/* ---------- control kit ---------- */
.ctl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.ctl:last-child { margin-bottom: 0; }
.ctl--inline { flex-direction: row; align-items: center; gap: 10px; }
.ctl__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctl__label { font-size: 13px; color: var(--muted); font-weight: 500; }
.ctl__value { font: 500 13px var(--mono); color: var(--accent); white-space: nowrap; }

.ctl__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer; margin: 0;
}
.ctl__range::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); }
.ctl__range::-moz-range-track { height: 5px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); }
.ctl__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; margin-top: -7px;
  background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / .4);
}
.ctl__range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--accent); box-shadow: 0 1px 4px rgb(0 0 0 / .4);
}

.seg { display: flex; flex-wrap: wrap; gap: 5px; }
.seg__btn {
  flex: 1 1 auto; min-width: 42px; padding: 7px 10px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font: 500 13px var(--sans); cursor: pointer; transition: all .13s;
}
.seg__btn:hover { color: var(--text); border-color: var(--metal-edge); }
.seg__btn.is-on { background: var(--accent); border-color: var(--accent); color: #14181f; font-weight: 650; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.btn-row:last-child { margin-bottom: 0; }
.btn {
  padding: 8px 15px; border-radius: 10px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); font: 550 13.5px var(--sans); cursor: pointer;
  transition: all .13s;
}
.btn:hover:not(:disabled) { border-color: var(--metal-edge); transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #14181f; font-weight: 650; }
.btn--hold { user-select: none; touch-action: none; }
.btn.is-urgent { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn.is-urgent { animation: none; } }

.sw { display: inline-flex; flex: none; cursor: pointer; }
.sw__input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw__track {
  display: block; width: 40px; height: 22px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--line); transition: background .16s, border-color .16s;
}
.sw__knob {
  display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--faint);
  margin: 2px; transition: transform .16s, background .16s;
}
.sw__input:checked + .sw__track { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.sw__input:checked + .sw__track .sw__knob { transform: translateX(18px); background: var(--accent); }
.sw__input:focus-visible + .sw__track { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sw--active .sw__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent); }

.ro-grid { display: grid; gap: 1px; background: var(--line-soft); border-radius: 10px; overflow: hidden; }
.ro {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 11px; background: var(--panel);
}
.ro__label { font-size: 12.5px; color: var(--faint); }
.ro__value { font: 500 13px var(--mono); color: var(--text); text-align: right; }
.ro__value[data-tone='cool'] { color: var(--accent-2); }
.ro__value[data-tone='warn'] { color: var(--warn); }
.ro__value[data-tone='hot'] { color: var(--hot); }
.ro__value[data-tone='mute'] { color: var(--faint); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 2px 2px; padding: 0; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); }
.legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* engine stroke badges */
.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; counter-reset: s; }
.badge {
  padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line-soft);
  background: var(--panel-2); transition: all .18s; opacity: .55;
}
.badge b { display: block; font-size: 13px; }
.badge span { font-size: 12px; color: var(--faint); }
.badge.is-on {
  opacity: 1; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
}
.badge.is-on b { color: var(--accent); }

/* gear ratio ladder */
.lad-wrap { display: grid; gap: 6px; }
.lad { display: grid; grid-template-columns: 18px minmax(0, 1fr) 62px; align-items: center; gap: 9px; }
.lad__key { font: 600 12px var(--mono); color: var(--muted); }
.lad__track { display: block; height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.lad__bar { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.lad__val { font: 500 12px var(--mono); color: var(--faint); text-align: right; }

/* overview part list */
.partlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.partlist__btn {
  display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 9px;
  background: transparent; border: 1px solid transparent; color: inherit; cursor: pointer;
  transition: all .13s;
}
.partlist__btn:hover, .partlist__btn:focus-visible { background: var(--panel-2); border-color: var(--line); }
.partlist__btn b { display: block; font-size: 13.5px; }
.partlist__btn span { font-size: 12.5px; color: var(--faint); }

/* ==================================================================
   Diagram paint classes
   ================================================================== */
.m-labels { pointer-events: none; }
.m-label {
  font: 500 13px var(--mono); fill: var(--muted);
  paint-order: stroke fill; stroke: var(--bg); stroke-width: 3.5px; stroke-linejoin: round;
}
.m-label--in { fill: var(--text); opacity: .75; font-size: 14px; letter-spacing: .1em; }
.m-label--head { fill: var(--muted); font-size: 13px; }

.m-block, .m-case, .m-housing { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-head { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-case { fill: var(--metal-lo); opacity: .9; }
.m-edge { fill: none; stroke: var(--metal-edge); stroke-width: 1.4; opacity: .55; }
.m-edge-dot { fill: var(--metal-edge); }
.m-jacket { fill: var(--accent-2); opacity: .3; }

.m-fly-face { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 2; }
.m-fly-inner { fill: none; stroke: var(--metal-edge); stroke-width: 1; opacity: .5; }
.m-fly-tooth { fill: var(--metal-edge); }
.m-fly-hole { fill: var(--bg); opacity: .8; }

.m-crank { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-journal { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-rod { fill: none; stroke: var(--metal-hi); stroke-width: 15; stroke-linecap: round; }
.m-piston path { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-ring { fill: var(--metal-edge); }
.m-pin { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.5; }

.m-port { fill: none; stroke: var(--bg); stroke-width: 26; stroke-linecap: round; opacity: .96; }
.m-flow { fill: none; stroke-width: 7; stroke-dasharray: 8 16; stroke-linecap: round; pointer-events: none; }
.m-flow--in { stroke: var(--accent-2); }
.m-flow--out { stroke: var(--hot); }
.m-flow--brake { stroke: var(--accent-2); stroke-width: 5; stroke-dasharray: 6 14; }
.m-flow--coolant { stroke: #fff; stroke-width: 5; stroke-dasharray: 5 15; opacity: .55; mix-blend-mode: overlay; }
.m-flow--current { stroke: var(--warn); stroke-width: 5; stroke-dasharray: 5 13; }
.m-flow--fuel { stroke: var(--accent-2); stroke-width: 5; stroke-dasharray: 5 13; }

.m-plug { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.2; }
.m-plug-tip { fill: none; stroke: var(--metal-edge); stroke-width: 3; stroke-linecap: round; }
.m-spark { fill: none; stroke: #ffe9a8; stroke-width: 2.6; stroke-linejoin: round; filter: drop-shadow(0 0 5px #ffd166); }

.m-stem { fill: var(--metal-edge); }
.m-valve { stroke: var(--metal-edge); stroke-width: 1.2; }
.m-valve--in { fill: #5aa9d8; }
.m-valve--out { fill: #c85a3c; }
.m-retainer { fill: var(--metal-hi); }
.m-spring { fill: none; stroke: var(--metal-edge); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.m-cam { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-cam-mark { fill: var(--accent); opacity: .85; }

/* pressure-volume chart */
.pv { width: 100%; height: auto; display: block; }
.pv-bg { fill: var(--panel-2); }
.pv-grid { stroke: var(--line); stroke-width: 1; }
.pv-tick, .pv-axis { font: 500 9px var(--mono); fill: var(--faint); }
.pv-loop { fill: none; stroke: var(--line); stroke-width: 1.6; }
.pv-trail { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.pv-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }

/* drivetrain */
.m-shaft { stroke: var(--metal-edge); stroke-width: 9; stroke-linecap: round; fill: none; }
.m-shaft-bar { fill: var(--metal-edge); }
.m-ujoint { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-clutch-fly { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.4; }
.m-clutch-disc { fill: var(--accent); opacity: .85; }
.m-clutch-plate { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.4; }
.m-slip { fill: var(--hot); filter: blur(3px); }
.m-gear { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.2; }
.m-gear--sel { fill: color-mix(in srgb, var(--accent-2) 55%, var(--metal-hi)); }
.m-gear--idler { fill: color-mix(in srgb, var(--warn) 45%, var(--metal-hi)); }
.m-gear--final { fill: color-mix(in srgb, var(--ok) 45%, var(--metal-hi)); }
.m-spider { fill: none; stroke: var(--metal-lo); stroke-width: 7; stroke-linecap: round; }
.m-spider-gear { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.2; }
.m-tyre { fill: var(--metal-lo); stroke: #101319; stroke-width: 3; }
:root[data-theme='light'] .m-tyre { stroke: #3a4351; }
.m-rim { fill: var(--metal-hi); }
.m-spoke { fill: var(--metal-lo); }
.m-tread { fill: var(--metal-edge); opacity: .55; }

/* brakes */
.m-lever { stroke: var(--metal-edge); stroke-width: 8; stroke-linecap: round; fill: none; }
.m-pad-plate { fill: var(--metal-hi); }
.m-reservoir { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.4; opacity: .9; }
.m-fluid { fill: var(--accent-2); opacity: .5; }
.m-bore { fill: var(--bg); stroke: none; }
.m-bore-fluid { fill: var(--accent-2); opacity: .38; }
.m-bore-outline { fill: none; stroke: var(--metal-edge); stroke-width: 1.6; }
.m-piston-h { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.2; }
.m-pipe { fill: none; stroke: var(--metal-edge); stroke-width: 11; stroke-linecap: round; }
.m-pipe-fluid { fill: none; stroke: var(--accent-2); stroke-width: 6; stroke-linecap: round; }
.m-rotor { stroke: var(--metal-edge); stroke-width: 2; }
.m-rotor-glow { fill: var(--hot); filter: blur(10px); }
.m-rotor-small { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-vane { fill: var(--bg); opacity: .32; }
.m-hat { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-caliper { fill: color-mix(in srgb, var(--hot) 32%, var(--metal-lo)); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-caliper-slot { fill: var(--bg); opacity: .65; }
.m-leader { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 4 5; }
.m-detail { fill: var(--panel-2); stroke: var(--line); stroke-width: 1.4; }
.m-disc-bar { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.2; }
.m-brakepad { fill: var(--accent); opacity: .85; }

/* steering */
.m-centreline { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 10 8; }
.m-rack { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.4; }
.m-rack-tooth { fill: var(--metal-edge); }
.m-balljoint { fill: var(--accent-2); stroke: var(--bg); stroke-width: 1.4; }
.m-tierod { stroke: var(--accent-2); stroke-width: 7; stroke-linecap: round; }
.m-arm { stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.m-kingpin { fill: var(--text); opacity: .7; }
.m-tyre-plan { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.6; }
.m-tread-line { stroke: var(--metal-edge); stroke-width: 1.2; opacity: .5; }
.m-steerwheel { cursor: grab; }
.m-steerwheel:active { cursor: grabbing; }
.m-sw-hit { fill: transparent; }
.m-sw-rim { fill: none; stroke: var(--metal-lo); stroke-width: 15; }
.m-sw-spoke { fill: var(--metal-lo); }
.m-sw-hub { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-steerwheel:hover .m-sw-rim, .m-steerwheel:focus-visible .m-sw-rim { stroke: var(--accent); }
.m-carbody { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.4; opacity: .7; }
.m-ic { fill: var(--ok); }
.m-ic-line { fill: none; stroke: var(--ok); stroke-width: 1.3; stroke-dasharray: 5 5; opacity: .8; }
.m-turncircle { fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 7 7; opacity: .5; }

/* suspension */
.m-road { fill: none; stroke: var(--metal-edge); stroke-width: 3.5; stroke-linecap: round; }
.m-road-fill { fill: var(--panel-2); }
.m-coil { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.m-damper { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.6; }
.m-damper-rod { stroke: var(--metal-edge); stroke-width: 7; stroke-linecap: round; }
.m-carbody-side { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.6; }
.m-contact { fill: var(--ok); opacity: .85; }
.m-contact.is-light { fill: var(--warn); }
.tr { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.tr--road { stroke: var(--accent-2); opacity: .8; }
.tr--wheel { stroke: var(--accent); }
.tr--body { stroke: var(--ok); stroke-width: 2.8; }

/* cooling */
.m-hose { fill: none; stroke: var(--metal-edge); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.m-hose--inner { stroke-width: 13; opacity: .7; }
.m-hose-fluid { fill: none; stroke: var(--accent-2); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.m-cyl-bore { fill: var(--bg); opacity: .5; }
.m-impeller { fill: none; stroke: var(--metal-hi); stroke-width: 4; stroke-linecap: round; }
.m-tstat { fill: var(--accent); }
.m-tank { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.5; }
.m-core { stroke: none; }
.m-core-outline { fill: none; stroke: var(--metal-edge); stroke-width: 1.6; }
.m-fin { stroke: var(--metal-edge); stroke-width: 1.4; opacity: .45; }
.m-cap { fill: var(--metal-hi); stroke: var(--metal-edge); stroke-width: 1.4; }
.m-fanring { fill: none; stroke: var(--metal-edge); stroke-width: 2; opacity: .6; }
.m-fanblade { fill: var(--metal-hi); opacity: .75; }
.m-airflow { pointer-events: none; }
.m-air-arrow { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.m-steam { fill: none; stroke: #cfd8e6; stroke-width: 3; stroke-linecap: round; opacity: .7; }

/* gauge */
.gauge { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.g-cold { fill: none; stroke: var(--accent-2); stroke-width: 7; opacity: .55; }
.g-ok { fill: none; stroke: var(--ok); stroke-width: 7; opacity: .75; }
.g-hot { fill: none; stroke: var(--hot); stroke-width: 7; opacity: .75; }
.g-tick { stroke: var(--faint); stroke-width: 1.6; }
.g-tick-label { font: 500 10px var(--mono); fill: var(--faint); }
.g-needle { stroke: var(--text); stroke-width: 3.4; stroke-linecap: round; }
.g-hub { fill: var(--accent); }
.g-value { font: 600 22px var(--mono); fill: var(--text); }

/* electrics */
.m-cable { fill: none; stroke: var(--metal-edge); stroke-width: 6; stroke-linecap: round; }
.m-cable--heavy { stroke-width: 11; }
.m-fuelline { fill: none; stroke: var(--metal-edge); stroke-width: 6; stroke-linecap: round; }
.m-flow--current.is-charging { stroke: var(--ok); }
.m-battery { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.6; }
.m-soc { opacity: .75; }
.m-terminal { fill: var(--metal-edge); }
.m-terminal--pos { fill: var(--hot); }
.m-key { fill: var(--accent); }
.m-coil-box { fill: var(--metal-lo); stroke: var(--metal-edge); stroke-width: 1.6; }
.m-injector { fill: var(--accent-2); }
.m-spray { fill: none; stroke: var(--accent-2); stroke-width: 2.4; stroke-linecap: round; }
.m-fuel { fill: var(--accent-2); opacity: .4; }
.m-belt { fill: none; stroke: var(--metal-edge); stroke-width: 5; opacity: .8; }

/* overview cutaway */
.m-ground { stroke: var(--line); stroke-width: 2; stroke-dasharray: 12 8; }
.m-shell { fill: var(--metal-lo); opacity: .34; stroke: var(--metal-edge); stroke-width: 2.6; stroke-linejoin: round; }
.m-glass { fill: var(--glass); opacity: .34; }
.ov-pillar { fill: none; stroke: var(--metal-edge); stroke-width: 2; opacity: .5; }
.m-exhaust { fill: none; stroke: var(--metal-edge); stroke-width: 8; stroke-linecap: round; }
.m-arch { fill: none; stroke: var(--metal-edge); stroke-width: 2.8; }

.ov-part { stroke: var(--metal-edge); stroke-width: 1.6; }
.ov--metal { fill: var(--metal-hi); }
.ov--mute  { fill: var(--metal-lo); }
.ov--cool  { fill: color-mix(in srgb, var(--accent-2) 62%, var(--metal-lo)); }
.ov--warm  { fill: color-mix(in srgb, var(--warn) 55%, var(--metal-lo)); }
.ov--hot   { fill: color-mix(in srgb, var(--hot) 55%, var(--metal-lo)); }
.ov--ok    { fill: color-mix(in srgb, var(--ok) 55%, var(--metal-lo)); }
.ov-line   { fill: none; stroke: var(--metal-edge); stroke-width: 1.4; opacity: .55; }
.ov-fin    { fill: none; stroke: var(--bg); stroke-width: 1.6; opacity: .45; }
.ov-hose   { fill: none; stroke: color-mix(in srgb, var(--accent-2) 62%, var(--metal-lo)); stroke-width: 7; stroke-linecap: round; }
.ov-shaft  { stroke: var(--metal-edge); stroke-width: 6; stroke-linecap: round; }
.ov-coil   { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.ov-arm    { stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }

.hot { cursor: pointer; }
.hot > * { transition: filter .16s; }
.hot:hover > *, .hot:focus-visible > *, .hot.is-hover > * {
  filter: drop-shadow(0 0 8px var(--accent)) brightness(1.2);
}
.hot__label {
  font: 600 14px var(--mono); fill: var(--muted); pointer-events: none;
  paint-order: stroke fill; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round;
  transition: fill .16s;
}
.hot__label--in { fill: var(--text); stroke-width: 3px; }
.hot__label.is-on { fill: var(--accent); }