:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #0c0e11;
  --surface-raised: #11151a;
  --surface-panel: #151a20;
  --surface-panel-strong: #1a2028;
  --surface-overlay: rgb(16 20 25 / 0.985);
  --surface-hover: rgb(255 255 255 / 0.055);
  --surface-selected: rgb(84 214 209 / 0.09);
  --border-default: #56616e;
  --border-subtle: #2d3540;
  --text-primary: #f2f5f7;
  --text-secondary: #a6b0bc;
  --text-tertiary: #8b96a3;
  --text-inverse: #0c0e11;
  --focus-ring: #54d6d1;
  --shadow-elevation: 0 24px 60px rgb(0 0 0 / 0.22);
  --chart-background: #11151a;
  --chart-grid: #2d3540;
  --chart-axis: #56616e;
  --chart-text: #f2f5f7;
  --chart-muted: #a6b0bc;
  --accent-orange: #ff7759;
  --accent-cyan: #54d6d1;
  --accent-amber: #ffc857;
  --accent-green: #8bd17c;
  --accent-violet: #b89cff;
  --accent-danger: #ff7b7b;
  --status-success: #8bd17c;
  --status-warning: #ffc857;
  --status-danger: #ff7b7b;
  --page-grid: rgb(255 255 255 / 0.018);
  --header-background: rgb(12 14 17 / 0.92);
  --soft-white-overlay: rgb(255 255 255 / 0.03);
  --soft-black-overlay: rgb(0 0 0 / 0.12);
  --bg: var(--surface-canvas);
  --bg-raised: var(--surface-raised);
  --bg2: var(--surface-raised);
  --panel: var(--surface-panel);
  --panel2: var(--surface-panel-strong);
  --panel-strong: var(--surface-panel-strong);
  --line: var(--border-default);
  --line2: var(--border-subtle);
  --line-soft: var(--border-subtle);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --quiet: var(--text-tertiary);
  --accent: var(--accent-orange);
  --accent2: var(--accent-cyan);
  --accent-bright: var(--accent-orange);
  --cyan: var(--accent-cyan);
  --amber: var(--accent-amber);
  --yellow: var(--accent-amber);
  --green: var(--accent-green);
  --violet: var(--accent-violet);
  --danger: var(--accent-danger);
  --radius: 18px;
  --container: 1240px;
  --shadow: var(--shadow-elevation);
  --font-display: "Arial Narrow", "Roboto Condensed", "DIN Condensed", system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --fd: var(--font-display);
  --fb: var(--font-body);
  --fm: var(--font-mono);
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-mono);
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-canvas: #f4f7fa;
  --surface-raised: #edf1f5;
  --surface-panel: #ffffff;
  --surface-panel-strong: #e8edf2;
  --surface-overlay: rgb(255 255 255 / 0.985);
  --surface-hover: #dfe6ed;
  --surface-selected: #d7efee;
  --border-default: #6b7785;
  --border-subtle: #b8c2cc;
  --text-primary: #17202a;
  --text-secondary: #42505f;
  --text-tertiary: #5d6a78;
  --text-inverse: #ffffff;
  --focus-ring: #006d6a;
  --shadow-elevation: 0 18px 46px rgb(17 24 39 / 0.14);
  --chart-background: #ffffff;
  --chart-grid: #c4ccd4;
  --chart-axis: #6b7785;
  --chart-text: #17202a;
  --chart-muted: #42505f;
  --accent-orange: #b93818;
  --accent-cyan: #006d6a;
  --accent-amber: #875d00;
  --accent-green: #2d6f25;
  --accent-violet: #6945b8;
  --accent-danger: #b4232d;
  --status-success: #2d6f25;
  --status-warning: #875d00;
  --status-danger: #b4232d;
  --page-grid: rgb(23 32 42 / 0.055);
  --header-background: rgb(244 247 250 / 0.94);
  --soft-white-overlay: rgb(23 32 42 / 0.045);
  --soft-black-overlay: rgb(17 24 39 / 0.08);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; background: var(--bg); }
body {
  margin: 0;
  min-width: 280px;
  color: var(--text);
  font-family: var(--font-body);
  background:
    linear-gradient(var(--page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px),
    var(--bg);
  background-size: 40px 40px, 40px 40px, auto, auto;
  overflow-x: clip;
}
a { color: inherit; }
.skip-link {
  position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px;
  color: #111; background: #fff; border-radius: 8px; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.site-header {
  position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: var(--header-background); backdrop-filter: blur(16px);
}
.header-inner, .section, .site-footer {
  width: min(calc(100% - 40px), var(--container)); margin-inline: auto;
}
.header-inner { width: min(calc(100% - 40px), 1680px); }
.header-inner {
  min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.brand {
  min-width: 0; display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none;
}
.brand-mark { width: 34px; height: 34px; display: block; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: var(--font-display); font-size: 1.03rem; letter-spacing: 0.06em; text-transform: uppercase; }
.brand small { color: var(--quiet); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; }
.primary-nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.primary-nav a {
  min-height: 44px; padding: 10px 13px; display: inline-flex; align-items: center; color: var(--muted);
  border-radius: 8px; text-decoration: none; font-size: 0.88rem; font-weight: 650;
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--text); background: rgb(255 255 255 / 0.05); }

/* C80 · canonical site-wide header and burger geometry */
.site-header{position:sticky!important;top:0!important;z-index:140!important}
.primary-nav{display:none!important}
.site-header .header-inner{width:min(calc(100% - 32px),var(--container));min-height:64px;margin-inline:auto;display:flex!important;align-items:center!important;gap:12px!important;min-width:0}
.site-header .brand{min-width:0;flex:1 1 auto;display:inline-flex!important;align-items:center;gap:12px;color:var(--text);text-decoration:none;overflow:hidden}
.site-header .brand>span{min-width:0;overflow:hidden}
.home-link{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;color:var(--text);border:1px solid var(--line);border-radius:10px;background:rgb(255 255 255/.025);text-decoration:none;transition:border-color .16s ease,background .16s ease,color .16s ease}
.home-link:hover{color:var(--text);border-color:currentColor;background:rgb(255 255 255/.055)}
.home-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.home-link[aria-current="page"]{background:rgb(255 255 255/.055)}
.home-icon{width:21px;height:21px;display:block}
.mobile-menu.global-menu{display:block!important;position:relative!important;flex:0 0 auto;margin-left:auto}
.mobile-menu.global-menu>summary{list-style:none;min-height:42px;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:8px 12px!important;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--text);background:rgb(255 255 255/.025)}
.mobile-menu.global-menu>summary::-webkit-details-marker{display:none}
.mobile-menu.global-menu>summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.mobile-menu.global-menu:not([open]) .mobile-nav{display:none!important}
.mobile-menu.global-menu[open] .mobile-nav{display:block!important}
.mobile-menu.global-menu .mobile-nav{position:absolute!important;z-index:160!important;top:calc(100% + 9px)!important;right:0!important;left:auto!important;width:min(390px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:min(78svh,720px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;padding:12px!important;border:1px solid var(--line);border-radius:14px;background:rgb(16 20 25/.985);box-shadow:0 24px 70px rgb(0 0 0/.5)}
.mobile-menu.global-menu .mobile-nav-group+ .mobile-nav-group{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.mobile-menu.global-menu .mobile-nav a{overflow-wrap:anywhere}
@media(max-width:560px){
 .site-header .header-inner{width:calc(100% - 24px);min-height:58px;gap:8px}
 .home-link{width:40px;height:40px;flex-basis:40px}
 .site-header .brand{gap:8px}
 .site-header .brand strong{font-size:.84rem!important;letter-spacing:.04em!important}
 .site-header .brand small{font-size:.60rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:48vw}
 .mobile-menu.global-menu>summary{min-height:40px;padding:7px 10px!important}
 .mobile-menu.global-menu .mobile-nav{width:min(390px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important;right:-2px!important}
}

@media(min-width:1601px){.chapter-nav-desktop{display:flex!important}}
@media(max-width:1600px){.chapter-nav-desktop{display:none!important}}

/* Universal SVG scroll container & grid item containment */
.static-svg-scroll,
.force-svg-scroll,
.lab-svg-scroll,
.chart-scroll,
.stribeck-chart-scroll,
.viscosity-chart-scroll,
.vehicle-chart-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.panel,
.lab-figure,
.vehicle-system-card,
.path-panel,
.concept-card,
.vehicle-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* F06 Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.pwa-status {
  position: fixed;
  z-index: 300;
  right: 16px;
  bottom: 16px;
  width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  border-radius: 10px;
  background: #11151a;
  box-shadow: var(--shadow);
  font-size: 0.86rem;
  line-height: 1.45;
}
.pwa-status[hidden] { display: none; }
.pwa-retry { display:block; margin-top:10px; min-height:44px; padding:8px 14px; border:1px solid currentColor; border-radius:8px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.pwa-retry:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.pwa-retry:disabled { opacity:.6; cursor:wait; }
.pwa-status--ready { border-left-color: var(--green); }
.pwa-status--update { border-left-color: var(--amber); }
.pwa-status--error { border-left-color: var(--accent); }
.pwa-install-button {
  position: fixed;
  z-index: 290;
  left: 16px;
  bottom: 16px;
  min-height: 44px;
  padding: 10px 14px;
  color: #0c0e11;
  border: 0;
  border-radius: 10px;
  background: var(--cyan);
  box-shadow: var(--shadow);
  font: 700 0.88rem/1 var(--font-body);
  cursor: pointer;
}
.pwa-install-button:disabled { opacity: 0.65; cursor: wait; }
.pwa-install-button:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
@media (max-width: 640px) {
  .pwa-install-available .pwa-status { bottom:80px; }
}

/* Theme switcher */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.theme-switcher {
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-panel);
  font: 700 0.7rem/1 var(--font-mono);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme-switcher:hover { background: var(--surface-hover); }
.theme-switcher:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.theme-switcher__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--focus-ring);
  font: 800 1rem/1 system-ui, sans-serif;
}
.theme-switcher + .mobile-menu.global-menu { margin-left: 0; }

/* Canonical surfaces override page-local dark-only literals. */
body {
  color: var(--text-primary) !important;
  background:
    linear-gradient(var(--page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px),
    var(--surface-canvas) !important;
  background-size: 40px 40px, 40px 40px, auto !important;
}
.site-header { background: var(--header-background) !important; border-color: var(--border-subtle) !important; }
.mobile-menu.global-menu .mobile-nav,
.mobile-nav { background: var(--surface-overlay) !important; border-color: var(--border-default) !important; }
.home-link,
.mobile-menu.global-menu > summary,
.mobile-menu > summary { background: var(--surface-panel) !important; }
.home-link:hover,
.primary-nav a:hover,
.primary-nav a[aria-current="page"],
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] { background: var(--surface-hover) !important; }

:root[data-theme="light"] :is(
  .card,
  .panel,
  .hero-callout,
  .hero-visual,
  .lab-figure,
  .metric,
  .metric-card,
  .concept-card,
  .chapter-card,
  .path-panel,
  .vehicle-panel,
  .vehicle-system-card,
  .thermal-card,
  .offline-card
) {
  color: var(--text-primary);
  border-color: var(--border-subtle);
  background: var(--surface-panel) !important;
  box-shadow: var(--shadow-elevation);
}
:root[data-theme="light"] :is(
  .lab-svg,
  .force-svg,
  .thermal-svg,
  .cooling-svg,
  .cycle-svg,
  .system-svg,
  .system-vehicle-svg,
  .vehicle-chart,
  .gradient-svg,
  .partition-svg
) { background: var(--chart-background) !important; }
:root[data-theme="light"] :is(
  input,
  select,
  textarea,
  .control-select,
  .formula,
  code,
  .energy-track,
  .supply-bar-track,
  .vehicle-track
) {
  color: var(--text-primary);
  border-color: var(--border-default);
  background-color: var(--surface-raised) !important;
}
:root[data-theme="light"] input[type="range"] { color-scheme: light; }
:root[data-theme="light"] :is(.lead, .notation, small, .muted) { color: var(--text-secondary) !important; }
:root[data-theme="light"] :is(.pwa-status) { background: var(--surface-panel); color: var(--text-primary); }
:root[data-theme="light"] .pwa-install-button { color: var(--text-inverse); background: var(--accent-cyan); }

/* Inline SVGs inherit the active palette, including JavaScript-generated fragments. */
:root[data-theme="light"] svg :is(
  [fill="#0c0e11" i], [fill="#0d1116" i], [fill="#101419" i],
  [fill="#111317" i], [fill="#11151a" i], [fill="#151a20" i],
  [fill="#151b22" i], [fill="#162025" i], [fill="#171c22" i],
  [fill="#1a2028" i], [fill="#1d2430" i], [fill="#20262e" i],
  [fill="#222933" i], [fill="#232b35" i], [fill="#28313b" i],
  [fill="#2b333d" i], [fill="#2d3540" i]
) { fill: var(--chart-background) !important; }
:root[data-theme="light"] svg :is(
  [stroke="#0c0e11" i], [stroke="#0d1116" i], [stroke="#101419" i],
  [stroke="#111317" i], [stroke="#11151a" i], [stroke="#151a20" i],
  [stroke="#151b22" i], [stroke="#162025" i], [stroke="#171c22" i],
  [stroke="#1a2028" i], [stroke="#1d2430" i], [stroke="#20262e" i],
  [stroke="#222933" i], [stroke="#232b35" i], [stroke="#28313b" i],
  [stroke="#2b333d" i], [stroke="#2d3540" i], [stroke="#39434e" i],
  [stroke="#485360" i], [stroke="#4b5563" i], [stroke="#56616e" i],
  [stroke="#596574" i], [stroke="#737f8d" i]
) { stroke: var(--chart-grid) !important; }
:root[data-theme="light"] svg :is(
  [fill="#fff" i], [fill="#ffffff" i], [fill="#f2f5f7" i], [fill="#ccd3da" i]
) { fill: var(--chart-text) !important; }
:root[data-theme="light"] svg :is(
  [fill="#a6b0bc" i], [fill="#8b96a3" i], [fill="#737f8d" i],
  [fill="#596574" i], [fill="#56616e" i]
) { fill: var(--chart-muted) !important; }
:root[data-theme="light"] svg [stroke="#f2f5f7" i] { stroke: var(--chart-text) !important; }
:root[data-theme="light"] svg [stroke="#a6b0bc" i] { stroke: var(--chart-muted) !important; }
:root[data-theme="light"] svg :is([fill="#ff5a36" i], [fill="#ff7759" i]) { fill: var(--accent-orange) !important; }
:root[data-theme="light"] svg :is([stroke="#ff5a36" i], [stroke="#ff7759" i]) { stroke: var(--accent-orange) !important; }
:root[data-theme="light"] svg [fill="#54d6d1" i] { fill: var(--accent-cyan) !important; }
:root[data-theme="light"] svg [stroke="#54d6d1" i] { stroke: var(--accent-cyan) !important; }
:root[data-theme="light"] svg [fill="#ffc857" i] { fill: var(--accent-amber) !important; }
:root[data-theme="light"] svg [stroke="#ffc857" i] { stroke: var(--accent-amber) !important; }
:root[data-theme="light"] svg [fill="#8bd17c" i] { fill: var(--accent-green) !important; }
:root[data-theme="light"] svg [stroke="#8bd17c" i] { stroke: var(--accent-green) !important; }
:root[data-theme="light"] svg [fill="#b89cff" i] { fill: var(--accent-violet) !important; }
:root[data-theme="light"] svg [stroke="#b89cff" i] { stroke: var(--accent-violet) !important; }
:root[data-theme="light"] svg [fill="#ff7b7b" i] { fill: var(--accent-danger) !important; }
:root[data-theme="light"] svg [stroke="#ff7b7b" i] { stroke: var(--accent-danger) !important; }

@media (max-width: 560px) {
  .theme-switcher { width: 40px; min-width: 40px; min-height: 40px; padding: 7px; }
  .theme-switcher__label { display: none; }
}

@media print {
  :root,
  :root[data-theme] {
    color-scheme: light !important;
    --surface-canvas: #ffffff;
    --surface-raised: #ffffff;
    --surface-panel: #ffffff;
    --surface-panel-strong: #ffffff;
    --text-primary: #111111;
    --text-secondary: #3d4650;
    --text-tertiary: #59636d;
    --border-default: #697480;
    --border-subtle: #aeb6be;
    --chart-background: #ffffff;
    --chart-grid: #c4ccd4;
    --chart-axis: #697480;
    --chart-text: #111111;
    --chart-muted: #3d4650;
    --shadow-elevation: none;
  }
  .theme-switcher,
  #theme-status { display: none !important; }
}