:root {
  --bg-top: #fcf6ee;
  --bg-bottom: #eef3ef;
  --ink: #172430;
  --muted: #5d6c76;
  --panel: rgba(255, 255, 255, 0.76);
  --panel-strong: rgba(16, 31, 43, 0.94);
  --line: rgba(23, 36, 48, 0.12);
  --accent: #ff7a00;
  --accent-soft: rgba(255, 122, 0, 0.14);
  --teal: #0d8f8c;
  --teal-soft: rgba(13, 143, 140, 0.14);
  --gold: #e0b04b;
  --shadow: 0 24px 70px rgba(17, 31, 43, 0.12);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --content-width: 1200px;
  --card-bg: rgba(255, 255, 255, 0.62);
  --card-border: rgba(255, 255, 255, 0.55);
  --card-shadow: 0 4px 24px rgba(17, 31, 43, 0.06);
  /* ── Vertical rhythm tokens ──
     Pick from this scale when authoring inline <style>; do not invent ad-hoc gap values.
     --rhythm-step  = spacing between sibling [data-present-step] blocks inside a <section>
     --rhythm-card  = gap inside card grids (insight-grid, comparison-grid, etc.)
     --rhythm-inline= gap between chips / inline tags / small badges
     --rhythm-tight = gap inside dense lists / pill rows */
  --rhythm-step: 32px;
  --rhythm-card: 18px;
  --rhythm-inline: 12px;
  --rhythm-tight: 8px;
}

[data-theme="dark"] {
  --bg-top: #0f1318;
  --bg-bottom: #111820;
  --ink: #e4e6ea;
  --muted: #9ca3af;
  --panel: rgba(30, 38, 48, 0.82);
  --panel-strong: rgba(16, 31, 43, 0.96);
  --line: rgba(255, 255, 255, 0.1);
  --accent-soft: rgba(255, 122, 0, 0.18);
  --teal-soft: rgba(13, 143, 140, 0.18);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  --card-bg: rgba(22, 27, 38, 0.72);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 122, 0, 0.1), transparent 30%),
    radial-gradient(circle at 84% 10%, rgba(13, 143, 140, 0.08), transparent 24%),
    linear-gradient(180deg, var(--bg-top) 0%, #12171d 38%, var(--bg-bottom) 100%);
}

[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

[data-theme="dark"] .orb { opacity: 0.2; }

[data-theme="dark"] .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .button-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .metric {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .insight-card::before {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.08), rgba(13, 143, 140, 0));
}

[data-theme="dark"] .card-index {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .layer-list li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .layer-number {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

[data-theme="dark"] .reference-list li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .challenge-list li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .subsection-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .subsection-toggle::after {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .subsection-item.is-open {
  background: linear-gradient(180deg, rgba(30, 40, 52, 0.9), rgba(24, 36, 44, 0.92));
}

[data-theme="dark"] .comparison-label,
[data-theme="dark"] .pattern-type {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .quote-block {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.08), rgba(13, 143, 140, 0.1));
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mesh-board {
  background:
    radial-gradient(circle at 50% 50%, rgba(13, 143, 140, 0.06), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255, 122, 0, 0.04), transparent 42%),
    rgba(20, 28, 36, 0.8);
}

[data-theme="dark"] .mesh-node {
  background: rgba(30, 40, 52, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mesh-core {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .quadrant-board {
  background:
    linear-gradient(180deg, rgba(20, 28, 36, 0.95), rgba(24, 36, 44, 0.92));
}

[data-theme="dark"] .quadrant-point {
  background: rgba(30, 40, 52, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .quadrant-point strong { color: var(--ink); }

[data-theme="dark"] .simple-table th,
[data-theme="dark"] .matrix-table th {
  color: var(--ink);
}

[data-theme="dark"] .simple-table th,
[data-theme="dark"] .simple-table td,
[data-theme="dark"] .matrix-table th,
[data-theme="dark"] .matrix-table td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .matrix-view-switch {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .matrix-view-button { color: var(--muted); }
[data-theme="dark"] .matrix-view-button:hover { color: var(--ink); }

[data-theme="dark"] .matrix-controls select,
[data-theme="dark"] .decision-controls select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

[data-theme="dark"] .decision-result {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.08), rgba(13, 143, 140, 0.1));
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tab-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tab-button:hover { color: var(--ink); }

[data-theme="dark"] .pattern-card:hover {
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════
   Article style presets: clean (default) | warm | academic | vivid
   Controlled by html[data-style="..."], stored in localStorage('article-style').
   ══════════════════════════════════════════════════════════ */

/* ── Clean (default) — no decorative elements, information-first ── */
.orb { opacity: 0; pointer-events: none; }
.insight-card::before { display: none; }
.flow-step { box-shadow: 0 4px 12px rgba(255, 122, 0, 0.10); }
.flow-list > .flow-step::before,
.flow-number { box-shadow: 0 4px 12px rgba(255, 122, 0, 0.10); }
.insight-card,
.pattern-card,
.comparison-card,
.comparison-cell,
.mesh-copy,
.mesh-board {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── Warm — original rich style with full decorations ── */
[data-style="warm"] .orb { opacity: 0.48; pointer-events: auto; }
[data-theme="dark"][data-style="warm"] .orb { opacity: 0.2; }
[data-style="warm"] .insight-card::before { display: block; }
[data-style="warm"] .flow-step { box-shadow: 0 14px 28px rgba(255, 122, 0, 0.18); }
[data-style="warm"] .flow-list > .flow-step::before,
[data-style="warm"] .flow-number { box-shadow: 0 14px 28px rgba(255, 122, 0, 0.18); }
[data-style="warm"] .insight-card,
[data-style="warm"] .pattern-card,
[data-style="warm"] .comparison-card,
[data-style="warm"] .comparison-cell,
[data-style="warm"] .mesh-copy,
[data-style="warm"] .mesh-board {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ── Academic — minimal shadows, more whitespace, high readability ── */
[data-style="academic"] .orb { opacity: 0; }
[data-style="academic"] .insight-card::before { display: none; }
[data-style="academic"] .insight-card,
[data-style="academic"] .pattern-card,
[data-style="academic"] .comparison-card,
[data-style="academic"] .comparison-cell {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  border: 1px solid rgba(23, 36, 48, 0.12);
}
[data-theme="dark"][data-style="academic"] .insight-card,
[data-theme="dark"][data-style="academic"] .pattern-card,
[data-theme="dark"][data-style="academic"] .comparison-card,
[data-theme="dark"][data-style="academic"] .comparison-cell {
  background: rgba(30, 38, 48, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-style="academic"] .subsection-content p,
[data-style="academic"] .section-head > p {
  font-size: 1.05rem;
  line-height: 2;
}
[data-style="academic"] .section {
  padding-top: 64px;
  padding-bottom: 64px;
}
[data-style="academic"] .flow-step {
  box-shadow: none;
  background: var(--accent);
}
[data-style="academic"] .flow-list > .flow-step::before,
[data-style="academic"] .flow-number {
  box-shadow: none;
  background: var(--accent);
}

/* ── Vivid — colored accent borders, strong structure ── */
[data-style="vivid"] .orb { opacity: 0; }
[data-style="vivid"] .insight-card::before { display: none; }
[data-style="vivid"] .insight-card,
[data-style="vivid"] .pattern-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md) var(--radius-lg) var(--radius-lg) var(--radius-md);
}
[data-style="vivid"] .comparison-card,
[data-style="vivid"] .comparison-cell {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-left: 4px solid var(--teal);
}
[data-style="vivid"] .card-index {
  background: var(--accent);
  color: #fff;
}
[data-style="vivid"] .flow-step {
  box-shadow: 0 6px 18px rgba(255, 122, 0, 0.14);
}
[data-style="vivid"] .flow-list > .flow-step::before,
[data-style="vivid"] .flow-number {
  box-shadow: 0 6px 18px rgba(255, 122, 0, 0.14);
}
[data-style="vivid"] .section-head h2 {
  letter-spacing: -0.02em;
}

/* Legacy compat: data-decor="rich" maps to warm */
[data-decor="rich"] .orb { opacity: 0.48; pointer-events: auto; }
[data-theme="dark"][data-decor="rich"] .orb { opacity: 0.2; }
[data-decor="rich"] .insight-card::before { display: block; }
[data-decor="rich"] .flow-step { box-shadow: 0 14px 28px rgba(255, 122, 0, 0.18); }
[data-decor="rich"] .flow-list > .flow-step::before,
[data-decor="rich"] .flow-number { box-shadow: 0 14px 28px rgba(255, 122, 0, 0.18); }
[data-decor="rich"] .insight-card,
[data-decor="rich"] .pattern-card,
[data-decor="rich"] .comparison-card,
[data-decor="rich"] .comparison-cell,
[data-decor="rich"] .mesh-copy,
[data-decor="rich"] .mesh-board {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--reading-font, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 122, 0, 0.18), transparent 30%),
    radial-gradient(circle at 84% 10%, rgba(13, 143, 140, 0.14), transparent 24%),
    linear-gradient(180deg, var(--bg-top) 0%, #f4ede3 38%, var(--bg-bottom) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 36, 48, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 36, 48, 0.03) 1px, transparent 1px);
  background-size: 112px 112px;
  pointer-events: none;
  opacity: 0.55;
}

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

.page-shell {
  position: relative;
  padding: 22px;
}

.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.48;
}

.orb-a {
  width: 280px;
  height: 280px;
  background: rgba(255, 122, 0, 0.18);
  top: 8%;
  left: -80px;
  animation: driftA 16s ease-in-out infinite;
}

.orb-b {
  width: 340px;
  height: 340px;
  background: rgba(13, 143, 140, 0.16);
  top: 48%;
  right: -110px;
  animation: driftB 18s ease-in-out infinite;
}

.orb-c {
  width: 200px;
  height: 200px;
  background: rgba(224, 176, 75, 0.18);
  bottom: 8%;
  left: 42%;
  animation: driftC 14s ease-in-out infinite;
}

.site {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin: 0 auto;
}

.hero {
  min-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 28px;
  padding: 78px 0 28px;
}


.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 62px;
  margin-left: 0;
  margin-right: 0;
  padding: 10px clamp(20px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.62);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 24px -18px rgba(15, 23, 42, 0.35);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

[data-theme="dark"] .topbar {
  background: rgba(15, 23, 42, 0.55);
  border-bottom-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 6px 24px -18px rgba(0, 0, 0, 0.6);
}

.topbar-slot {
  min-width: 0;
  display: flex;
  align-items: center;
}

.topbar-slot-start {
  justify-content: flex-start;
  gap: 12px;
}

.topbar-slot-center {
  justify-content: center;
  overflow: hidden;
}

.topbar-slot-end {
  justify-content: flex-end;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--teal));
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .brand-mark {
  box-shadow: none;
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: min(100%, 920px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(23, 36, 48, 0.08);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(23, 36, 48, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

[data-theme="dark"] .nav-links {
  background: rgba(28, 32, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.nav-links::-webkit-scrollbar {
  display: none;
}

/* ── Mobile nav toggle (hidden on desktop) ── */
.nav-toggle {
  display: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.nav-links a {
  position: relative;
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 16px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.nav-links a:hover {
  color: var(--ink);
  background: rgba(23, 36, 48, 0.05);
}

[data-theme="dark"] .nav-links a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.nav-links a[aria-current="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #ff7a00), #ff9340);
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.35);
}

.nav-links a[aria-current="true"]:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #ff7a00), #ff9340);
}

/* ── In-place pager: nav never scrolls; JS trims items and inserts "…" prev/next ── */
nav.nav-links[data-nav-pager] {
  overflow: hidden;
  flex-wrap: nowrap;
}
.nav-links a.nav-ellipsis {
  cursor: pointer;
  letter-spacing: 1px;
  padding-bottom: 2px;
  opacity: 0.7;
  user-select: none;
}
.nav-links a.nav-ellipsis:hover { opacity: 1; }
.nav-links a.nav-ellipsis::after { display: none !important; }

.home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.home-link:hover {
  color: var(--ink);
  background: rgba(23, 36, 48, 0.06);
  transform: translateX(-1px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 34px;
  align-items: end;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--teal));
}

.hero-copy h1 {
  margin: 18px 0 20px;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
}

.hero-copy p {
  margin: 0;
  max-width: 60ch;
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(17, 31, 43, 0.12);
}

.button-primary {
  background: linear-gradient(135deg, var(--accent), #ff9340);
  color: #fff;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.58);
  border-color: var(--line);
  color: var(--ink);
}

.present-toggle,
.present-style-toggle,
.share-btn,
.present-exit,
.present-nav {
  color: var(--ink);
  font: inherit;
}

.present-exit {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.present-toggle,
.present-style-toggle,
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.22s ease, opacity 0.22s ease;
}

.present-toggle:hover,
.present-toggle:focus-visible,
.present-style-toggle:hover,
.present-style-toggle:focus-visible,
.share-btn:hover,
.share-btn:focus-visible {
  color: var(--ink);
}

.present-toggle-icon,
.share-btn svg {
  width: 20px;
  height: 20px;
}

.topbar-action-label {
  display: none;
}

/* Topbar inline theme + lang toggles (replace legacy palette panel) */
.topbar-theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .topbar-theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .topbar-theme-toggle .theme-icon-moon { display: inline-block; }
.topbar-lang-toggle .topbar-lang-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.topbar-lang-toggle {
  min-width: 42px;
}

/* Launch panel: bg selector (migrated from style panel) */
.launch-toggle-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--line);
}
[data-theme="dark"] .launch-toggle-group {
  background: rgba(255, 255, 255, 0.06);
}
.launch-toggle {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.launch-toggle:hover { color: var(--ink); }
.launch-toggle.is-active {
  background: var(--accent, #6c5ce7);
  color: #fff;
}

.present-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
}

.present-exit:hover,
.present-exit:focus-visible {
  opacity: 1;
  filter: saturate(1.05);
}

.present-toggle.is-active {
  color: var(--accent);
}

.present-exit {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}

/* ── Share dropdown ── */
.share-wrapper {
  position: relative;
}

.share-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(23, 36, 48, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 60;
}

.share-wrapper.is-open .share-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.share-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.share-menu-item:hover {
  background: rgba(23, 36, 48, 0.06);
}

.share-menu-item:disabled {
  opacity: 0.55;
  cursor: wait;
}

.share-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
}

.share-menu-item .share-item-label {
  flex: 1;
}

.share-copied-tip {
  font-size: 0.78rem;
  color: var(--teal);
  font-weight: 700;
  margin-left: auto;
}

[data-theme="dark"] .share-menu {
  background: rgba(30, 38, 48, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .share-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ── WeChat QR inline panel ── */
.share-wechat-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-top: 1px solid var(--line);
}

.share-wechat-qr-img {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

.share-wechat-qr-tip {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

[data-theme="dark"] .share-wechat-qr {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .share-wechat-qr-img {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.present-floating {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.present-exit {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}

.present-exit:hover {
  color: #fff;
  background: transparent;
  border: none;
}

.present-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(23, 36, 48, 0.52);
  opacity: 0.48;
  box-shadow: none;
  transform: translateY(-50%);
  transition: opacity 0.22s ease, color 0.22s ease;
}

.present-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.present-nav-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.present-nav:hover,
.present-nav:focus-visible {
  background: none;
  border: none;
  color: var(--ink);
  opacity: 1;
}

.present-nav:disabled {
  opacity: 0.22;
  cursor: not-allowed;
  box-shadow: none;
  transform: translateY(-50%);
}

.present-nav-prev {
  left: 12px;
}

.present-nav-next {
  right: 12px;
}

.present-deck {
  position: absolute;
  top: clamp(22px, 3.8vh, 40px);
  left: clamp(28px, 4.4vw, 56px);
  max-width: calc(100vw - 220px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

.present-deck-label {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.present-deck-title {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.present-floating.is-hero-step .present-deck {
  display: none;
}

.present-status {
  position: fixed;
  right: 92px;
  bottom: 32px;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  height: 52px;
  gap: 2px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: right;
  overflow: visible;
  transition: none;
}

[data-theme="dark"] .present-toggle,
[data-theme="dark"] .share-btn {
  color: var(--muted);
}

[data-theme="dark"] .present-toggle:hover,
[data-theme="dark"] .present-toggle:focus-visible,
[data-theme="dark"] .share-btn:hover,
[data-theme="dark"] .share-btn:focus-visible {
  color: var(--ink);
}

[data-theme="dark"] .present-exit {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .present-nav {
  color: rgba(228, 230, 234, 0.58);
}

[data-theme="dark"] .present-nav:hover,
[data-theme="dark"] .present-nav:focus-visible {
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] .present-status {
  background: transparent;
  border: none;
}

.present-counter {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}
[data-theme="dark"] .present-counter {
  color: rgba(255, 255, 255, 0.55);
}

.present-status-title,
.present-status-tip {
  display: none;
}

/* Narration prefetch progress bar */
.present-prefetch-bar {
  position: relative;
  align-self: stretch;
  height: 3px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.1);
  margin-top: 6px;
  overflow: visible;
}
[data-theme="dark"] .present-prefetch-bar {
  background: rgba(255, 255, 255, 0.1);
}

.present-prefetch-fill {
  height: 100%;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.3);
  width: 0;
  transition: width 0.4s ease;
}
[data-theme="dark"] .present-prefetch-fill {
  background: rgba(255, 255, 255, 0.25);
}

.present-prefetch-pointer {
  position: absolute;
  top: -2px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  transform: translateX(-50%);
  transition: left 0.3s ease;
}
[data-theme="dark"] .present-prefetch-pointer {
  background: rgba(255, 255, 255, 0.7);
}

/* ── Narration auto-play controls ── */

/* Fallback FAB styles (when article-assistant.js doesn't run) */
.assistant-fab {
  position: fixed;
  right: 28px;
  bottom: 32px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--accent, #ff7a00);
  color: #fff;
  box-shadow: 0 8px 28px rgba(255, 122, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.assistant-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 36px rgba(255, 122, 0, 0.45);
}

.assistant-fab svg {
  width: 24px;
  height: 24px;
}

/* FAB narration mode — capsule that expands on hover */
.is-presentation-mode .assistant-fab.is-narration-mode {
  position: fixed;
  right: 28px;
  bottom: 32px;
  z-index: 10002;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: none;
  background: var(--accent, #ff7a00);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(255, 122, 0, 0.35);
  transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.28s ease, box-shadow 0.2s;
}

.is-presentation-mode .assistant-fab.is-narration-mode svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.is-presentation-mode .assistant-fab.is-narration-mode:hover {
  height: var(--capsule-expanded-height, 198px);
  border-radius: 26px;
  box-shadow: 0 12px 36px rgba(255, 122, 0, 0.45);
  transform: none;
}

/* Capsule action buttons */
.narration-capsule-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.is-presentation-mode .assistant-fab.is-narration-mode:hover .narration-capsule-actions {
  opacity: 1;
}

.narration-capsule-btn {
  width: 52px;
  height: 44px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.narration-capsule-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.narration-capsule-btn svg {
  width: 18px;
  height: 18px;
}

/* The main narrator area (bottom of capsule) */
.narration-capsule-main {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* Hide capsule actions in non-hover state */
.narration-capsule-divider {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.is-presentation-mode .assistant-fab.is-narration-mode:hover .narration-capsule-divider {
  opacity: 1;
}

/* Narration speaking indicator (inline in FAB) */
.narration-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.narration-indicator span {
  width: 3px;
  background: currentColor;
  border-radius: 1.5px;
}

/* Static heights when not animating */
.narration-indicator span:nth-child(1) { height: 35%; }
.narration-indicator span:nth-child(2) { height: 70%; }
.narration-indicator span:nth-child(3) { height: 50%; }

/* Animate only when active (playing) */
.narration-indicator.is-active span {
  animation: narration-wave 1.2s ease-in-out infinite;
}

.narration-indicator.is-active span:nth-child(1) { animation-delay: 0s; }
.narration-indicator.is-active span:nth-child(2) { animation-delay: 0.2s; }
.narration-indicator.is-active span:nth-child(3) { animation-delay: 0.4s; }

@keyframes narration-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Generating spinner */
.narration-generating-spinner {
  display: block;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: narration-spin 0.8s linear infinite;
}

@keyframes narration-spin {
  to { transform: rotate(360deg); }
}

/* Settings button — now inside capsule, old top-right styles removed */
.present-settings {
  display: none;
}

/* Exit button SVG icon */
.present-exit svg {
  width: 18px;
  height: 18px;
}

/* Narration settings panel */
.narration-settings-panel {
  position: fixed;
  bottom: 96px;
  right: 26px;
  z-index: 10003;
  width: 320px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-theme="dark"] .narration-settings-panel {
  background: rgba(20, 28, 36, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.narration-settings-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.narration-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.narration-settings-header strong {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
}

.narration-settings-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s;
}

.narration-settings-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .narration-settings-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.narration-setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.84rem;
  color: var(--ink);
}

.narration-setting-row:last-child {
  margin-bottom: 0;
}

.narration-setting-row > span:first-child {
  width: 40px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--muted);
}

.narration-select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card-bg, #fff);
  color: var(--ink);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.narration-voice-select {
  font-size: 0.78rem;
}

[data-theme="dark"] .narration-select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Voice row — needs flex-wrap for long voice names */
.narration-voice-row {
  flex-wrap: nowrap;
}

/* Voice test/preview button */
.narration-voice-test {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.narration-voice-test:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 122, 0, 0.06);
}

.narration-voice-test.is-testing {
  color: var(--accent);
  border-color: var(--accent);
  animation: narration-test-pulse 1s ease-in-out infinite;
}

@keyframes narration-test-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

[data-theme="dark"] .narration-voice-test {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .narration-voice-test:hover {
  background: rgba(255, 122, 0, 0.12);
}

.narration-range {
  flex: 1;
  accent-color: var(--accent);
}

.narration-rate-value {
  width: 32px;
  text-align: right;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Narration subtitle overlay */
.narration-subtitle {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 70%;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  font-size: 0.86rem;
  line-height: 1.65;
  text-align: center;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.narration-subtitle.is-visible {
  opacity: 1;
}

/* Hide nav arrows during auto-play narration */
.is-narrating .present-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease;
}

/* Recording indicator — red dot on counter */
.is-recording .present-counter::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 6px;
  vertical-align: middle;
  animation: narration-test-pulse 1s ease-in-out infinite;
}

/* ── Presentation brand logo (bottom-left) ── */

/* Countdown overlay */
.present-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.present-countdown-overlay.is-fading-out {
  opacity: 0;
}

.present-countdown-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.present-countdown-num.is-animating {
  opacity: 1;
  transform: scale(1.2);
}

/* Prep progress steps */
.prep-progress {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 260px;
  max-width: 380px;
}

.prep-step {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
}

.prep-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.prep-step-pending {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}

.prep-step-active {
  background: rgba(99, 102, 241, 0.8);
  color: #fff;
  transform: scale(1.1);
  animation: prep-pulse 1.2s ease-in-out infinite;
}

.prep-step-done {
  background: rgba(34, 197, 94, 0.8);
  color: #fff;
}

.prep-step-label {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  flex: 1;
}

.prep-step-status {
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.prep-status-active {
  color: rgba(165, 180, 252, 0.9);
}

.prep-status-done {
  color: rgba(134, 239, 172, 0.9);
}

@keyframes prep-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}

.present-brand-logo {
  position: fixed;
  left: 28px;
  bottom: 32px;
  display: none;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.is-presentation-mode .present-brand-logo {
  display: flex;
  opacity: 0.55;
  visibility: visible;
}
[data-theme="dark"].is-presentation-mode .present-brand-logo,
[data-theme="dark"] .is-presentation-mode .present-brand-logo {
  opacity: 0.4;
}

/* ── Launch panel display options: hide logo / hide FAB / background presets ── */
body.present-hide-logo .present-brand-logo {
  display: none !important;
}
body.present-hide-fab .assistant-fab {
  display: none !important;
}
body.present-bg-white,
body.present-bg-white::before {
  background: #ffffff !important;
  background-image: none !important;
}
body.present-bg-black,
body.present-bg-black::before {
  background: #000000 !important;
  background-image: none !important;
}
body.present-bg-gray,
body.present-bg-gray::before {
  background: #e5e7eb !important;
  background-image: none !important;
}
[data-theme="dark"] body.present-bg-gray,
body.present-bg-gray[data-theme="dark"] {
  background: #1f2937 !important;
}

/* Slide font preset — applied via launch panel font picker */
body.present-custom-font,
body.present-custom-font main,
body.present-custom-font p,
body.present-custom-font li,
body.present-custom-font h1,
body.present-custom-font h2,
body.present-custom-font h3,
body.present-custom-font h4,
body.present-custom-font h5,
body.present-custom-font h6,
body.present-custom-font td,
body.present-custom-font th,
body.present-custom-font span,
body.present-custom-font div {
  font-family: var(--present-font) !important;
}

.present-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--teal));
  flex-shrink: 0;
}

.present-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.present-brand-owner {
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.6);
  text-transform: uppercase;
  margin-bottom: 2px;
}
[data-theme="dark"] .present-brand-owner {
  color: rgba(255, 255, 255, 0.5);
}

.present-brand-name {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, 0.78);
}
[data-theme="dark"] .present-brand-name {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Presentation end slide ── */
.present-end-slide {
  display: none;
}

.is-presentation-mode .present-end-slide {
  display: none;
}

.is-presentation-mode .present-end-slide.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.present-end-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 40px;
}

.present-end-icon {
  color: var(--accent);
  opacity: 0.8;
}

.present-end-icon svg {
  width: 64px;
  height: 64px;
}

.present-end-title {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}

.present-end-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
  max-width: 480px;
  line-height: 1.6;
}

.present-end-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.present-end-qr img {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px;
}

.present-end-qr-tip {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.present-end-brand {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.5;
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hide deck overlay on end slide */
.present-floating.is-end-slide .present-deck {
  display: none;
}

.present-inline-head {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.is-presentation-mode body {
  overflow: hidden;
}

.is-presentation-mode .page-shell {
  min-height: 100vh;
  padding: 0;
}

.is-presentation-mode .site {
  --present-side-gap: 80px;
  /* Header band = .present-deck top(clamp22-40) + label/title stack ≈ clamp(110px,12vh,140px) */
  --present-safe-top: clamp(110px, 12vh, 140px);
  /* Footer band = .present-status bottom32 + height52 + breathing ≈ clamp(96px,10vh,116px) */
  --present-safe-bottom: clamp(96px, 10vh, 116px);
  --present-body-max-width: 1480px;
  --present-body-font: clamp(1.05rem, 1.25vw, 1.25rem);
  --present-body-line-height: 1.75;
  width: 100%;
  max-width: none;
  min-height: 100vh;
}

.is-presentation-mode .present-floating {
  opacity: 1;
  visibility: visible;
}

.is-presentation-mode .present-exit,
.is-presentation-mode .present-nav,
.is-presentation-mode .present-status {
  pointer-events: auto;
}

.is-presentation-mode main {
  padding-bottom: 0;
}

.is-presentation-mode .topbar {
  display: none !important;
}

.is-presentation-mode .hero {
  padding-top: 8px;
}

/* ── Normal-flow spacing for data-present-step blocks ──
   Consecutive step blocks and section-head → step transitions
   need vertical rhythm; presentation mode overrides display.
   Exclude .subsection-accordion children — grid gap handles their spacing.
   OPT-OUT: any container that handles its own step spacing via
   `display: grid|flex; gap: ...` MUST add the `data-gap-managed`
   attribute so this rule does not double-charge spacing.
   See .github/instructions/article-pages.instructions.md §0.8. */
[data-present-step] + [data-present-step] {
  margin-top: var(--rhythm-step, 32px);
}
.subsection-accordion > [data-present-step] + [data-present-step],
[data-gap-managed] > [data-present-step] + [data-present-step] {
  margin-top: 0;
}
.section-head + [data-present-step] {
  margin-top: 24px;
}
/* Vertical rhythm between sibling blocks inside a present-step */
[data-present-step] > * + .insight-grid,
[data-present-step] > * + .pain-card,
[data-present-step] > * + .poc-grid,
[data-present-step] > * + .flow-list,
[data-present-step] > * + .quote-block {
  margin-top: 28px;
}

.is-presentation-mode .is-presentation-hidden,
.is-presentation-mode footer {
  display: none;
}

.is-presentation-mode [data-present-step]:not(.is-active) {
  display: none !important;
}

.is-presentation-mode [data-present-step].is-active {
  display: grid;
  box-sizing: border-box;
  grid-auto-rows: min-content;
  align-content: center;
  width: min(var(--present-body-max-width), calc(100vw - (var(--present-side-gap) * 2)));
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  margin: 0 auto;
  overflow: auto;
  padding: var(--present-safe-top) 0 var(--present-safe-bottom);
  scroll-padding-top: var(--present-safe-top);
  scroll-padding-bottom: var(--present-safe-bottom);
  animation: presentFade 0.24s ease;
}

html.is-presentation-mode body.present-transition-fade [data-present-step].is-active {
  animation: presentFade 0.55s ease;
}

html.is-presentation-mode body.present-transition-morph [data-present-step].is-active {
  animation: presentMorph 0.85s cubic-bezier(0.2, 0.9, 0.25, 1);
}

html.is-presentation-mode body.present-transition-slide [data-present-step].is-active {
  animation: presentSlide 0.7s cubic-bezier(0.2, 0.84, 0.24, 1);
}

html.is-presentation-mode body.present-transition-zoom [data-present-step].is-active {
  animation: presentZoom 0.7s cubic-bezier(0.2, 0.84, 0.24, 1);
}

.is-presentation-mode [data-present-step].is-active.is-step-overflowing {
  align-content: start;
}

.is-presentation-mode .hero[data-present-step].is-active {
  min-height: 100vh;
}

.is-presentation-mode .present-inline-head {
  display: block;
}

/* ═══════════════════════════════════════════════════════
   Accordion steps in presentation mode
   Applies to ALL articles with [data-accordion] sections.
   When a .section contains accordion items, the section
   itself becomes an overview step (head + collapsed list),
   then each accordion item becomes its own detail step.
   ═══════════════════════════════════════════════════════ */

/* 1. Hide the parent section's head + stray <p> when nested steps exist
      — the deck label/title carry the section context.
      Covers both accordion-split steps and explicit data-present-step children.
      EXCEPTION: if the section-head itself IS the active step (i.e. it carries
      data-present-step and is the chapter-overview slide), keep it visible. */
.is-presentation-mode .section:has([data-present-step]) > .section-head:not(.is-active) {
  display: none;
}
.is-presentation-mode .section:has([data-present-step]) > p {
  display: none;
}

/* 1-bis. When a nested accordion-item step (or any inner step) is active,
   hide ALL non-step direct children of the section (tables, grids, etc.).
   Otherwise stray content blocks push the active step below the viewport. */
.is-presentation-mode .section:has(> .subsection-accordion [data-present-step].is-active) > *:not(.subsection-accordion):not([data-present-step]) {
  display: none !important;
}

/* 1-bis-2. Neutralize the accordion container's own spacing so the active
   step starts at viewport top (not 18px below). */
.is-presentation-mode .subsection-accordion:has(> [data-present-step].is-active) {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* 1-bis-3. Hide non-step (or inactive step) siblings inside the same accordion
   when one accordion item is the active step. Otherwise other accordion items
   render below the active step and inflate measured content height. */
.is-presentation-mode .subsection-accordion:has(> [data-present-step].is-active) > *:not(.is-active) {
  display: none !important;
}

/* 1-bis-4. Substep support — when an active [data-present-substep] step is
   nested deeper inside a subsection-item, hide all the chrome around it so
   only the substep block remains visible.
   - Hide accordion sibling items that don't contain the active substep.
   - Neutralize the host subsection-item's padding/border/toggle.
   - Hide subsection-content children that aren't the active substep. */
.is-presentation-mode .subsection-accordion:has([data-present-substep].is-active) > .subsection-item:not(.is-active):not(:has([data-present-substep].is-active)) {
  display: none !important;
}
.is-presentation-mode .subsection-accordion:has([data-present-substep].is-active) {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
/* Host subsection-item that wraps the active substep: collapse the article box
   completely so the substep becomes a direct child of .subsection-accordion and
   inherits the standard [data-present-step].is-active centering / sizing.
   Without this, the article's box-shadow + border-radius leak through as a
   visible "white card", and its narrower .subsection-content (1180px) clips
   the substep horizontally. */
.is-presentation-mode .subsection-item:has(> .subsection-content [data-present-substep].is-active),
.is-presentation-mode .subsection-item:has(> .subsection-content [data-present-substep].is-active) > .subsection-content {
  display: contents !important;
}
.is-presentation-mode .subsection-item:has(> .subsection-content [data-present-substep].is-active) > .subsection-toggle {
  display: none !important;
}
.is-presentation-mode .subsection-content > [data-present-substep]:not(.is-active) {
  display: none !important;
}
/* Ensure the active substep itself centers its inner content. Top-level steps
   inherit text-align via .section, but substeps escape that chain via display:contents. */
.is-presentation-mode [data-present-substep].is-active {
  justify-items: center;
}
.is-presentation-mode [data-present-substep].is-active > * {
  width: 100%;
  max-width: var(--present-body-max-width);
}

/* Nested accordion chrome removal — when a .subsection-item lives INSIDE an
   active substep (e.g. the "Conditional & Break-Glass" footnote accordion),
   strip its card background / border / shadow / padding and hide its toggle
   button so only the inner content renders. Without this, the nested
   accordion looks like a floating tinted card, breaking the centered slide. */
.is-presentation-mode [data-present-substep].is-active .subsection-item {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.is-presentation-mode [data-present-substep].is-active .subsection-item > .subsection-toggle {
  display: none !important;
}
.is-presentation-mode [data-present-substep].is-active .subsection-item > .subsection-content {
  padding: 0 !important;
  margin: 0 !important;
}
.is-presentation-mode [data-present-substep].is-active .subsection-accordion {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Grid symmetry — when a 3-col concept-grid has exactly 5 items, the default
   wrap leaves the bottom row left-aligned (3+2 orphan). In presentation mode
   re-pitch onto a 6-fr track and center the trailing 2 across cols 2-5 so the
   layout reads as balanced 3+2-centered. Mirrors visual-layout.md grid rule. */
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(6, 1fr) !important;
}
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) > * {
  grid-column: span 2;
}
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) > :nth-child(4) {
  grid-column: 2 / span 2;
}
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) > :nth-child(5) {
  grid-column: 4 / span 2;
}

/* Density tweak — 5-card 3-col grids in presentation mode have ~6 lines of body
   copy per card and overflow 100vh at default 1rem. Pull body text down a notch
   so all 5 cards fit without scroll. Title size unchanged. */
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) .concept-card {
  padding: 14px 16px;
}
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) .concept-card p {
  font-size: 0.84rem;
  line-height: 1.5;
}
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) .concept-card .role-portals,
.is-presentation-mode [data-present-step].is-active .concept-grid.is-3-col:has(> :nth-child(5):last-child) .concept-card .role-portal-chip {
  font-size: 0.74rem;
}

/* Trailing Note paragraph that sits as a sibling of a 5-card grid should
   shrink in lockstep with the cards — otherwise it visually dominates the slide. */
.is-presentation-mode [data-present-substep].is-active:has(> .concept-grid.is-3-col > :nth-child(5):last-child) > p {
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Conditional / footnote-style paragraphs (.source-note) carry secondary
   reference content. In presentation mode they should read smaller than the
   primary card body so they don't compete visually with the cards above. */
.is-presentation-mode [data-present-substep].is-active .source-note,
.is-presentation-mode [data-present-step].is-active .source-note {
  font-size: 0.82rem;
  line-height: 1.55;
}
/* Bulleted footnote lists should be a notch smaller than the lead paragraph
   so the lead reads as the label and the items as its expanded detail. */
.is-presentation-mode [data-present-substep].is-active .source-note-list,
.is-presentation-mode [data-present-step].is-active .source-note-list {
  font-size: 0.72rem;
  line-height: 1.45;
}
/* Force list items to inherit the smaller font from .source-note-list
   instead of the larger .subsection-content li preset. */
.is-presentation-mode [data-present-substep].is-active .source-note-list li,
.is-presentation-mode [data-present-step].is-active .source-note-list li {
  font-size: inherit;
  line-height: inherit;
}

/* 1-pre. Reset the default .section top padding so the active step
   actually fills the viewport from y=0. Otherwise the 82px section padding
   pushes the centered content visibly below viewport mid-line. */
.is-presentation-mode .section:has([data-present-step]),
.is-presentation-mode .section:first-of-type:has([data-present-step]) {
  padding: 0;
}

/* 1-pre-2. If a section owns multiple direct child steps (for example a task
   slide followed by a reference slide), only the active child may remain visible.
   Otherwise the parent section leaks the inactive sibling into the viewport. */
.is-presentation-mode .section:has(> [data-present-step].is-active) > *:not(.section-head):not([data-present-step]) {
  display: none !important;
}
.is-presentation-mode .section:has(> [data-present-step].is-active) > [data-present-step]:not(.is-active) {
  display: none !important;
}

/* 1-pre-2b. When the active step is a DEEPER descendant (e.g. .maturity-grid
   > .maturity-card[data-present-step] or .task-grid > article[data-present-step]),
   the section-direct-sibling rule above misses it. Hide any direct section child
   that is neither the section-head, nor itself a step, nor an ancestor of the
   active step. Containers that wrap the active step (.maturity-grid, .task-grid,
   .task-references, etc.) stay visible via the :has() escape clause. */
.is-presentation-mode .section:has([data-present-step].is-active) > *:not(.section-head):not([data-present-step]):not(:has([data-present-step].is-active)) {
  display: none !important;
}

/* 1-pre-3. Task-references slides — a section may contain a Task X main
   slide (.task-grid > article[data-present-step]) followed by a reference
   block (.task-references > details[data-present-step]). When a reference
   step is active, hide every direct section child except .task-references,
   and collapse the .task-references chrome (kicker, summary, hint, inactive
   sibling details) so the active details body fills the slide. */
.is-presentation-mode .section:has(.task-references > [data-present-step].is-active) > *:not(.task-references) {
  display: none !important;
}
.is-presentation-mode .task-references:has(> [data-present-step].is-active) {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.is-presentation-mode .task-references:has(> [data-present-step].is-active) > .task-references-kicker,
.is-presentation-mode .task-references:has(> [data-present-step].is-active) > [data-present-step]:not(.is-active) {
  display: none !important;
}
.is-presentation-mode .task-collapsible[data-present-step].is-active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.is-presentation-mode .task-collapsible[data-present-step].is-active > summary,
.is-presentation-mode .task-collapsible[data-present-step].is-active > .tref-summary-hint {
  display: none !important;
}
.is-presentation-mode .task-collapsible[data-present-step].is-active > .tref-body {
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide the inner section-head H2/kicker/intro of a task-reference-block —
   the deck title already carries the slide identity, and we need the
   vertical space for the grid content. */
.is-presentation-mode .task-collapsible[data-present-step].is-active .task-reference-block > .section-head {
  display: none !important;
}

/* 1-pre-4. Neutralize wrapper margin / padding / gap when a deep grid
   (.maturity-grid, .task-grid, .env-grid, .insight-grid, …) contains the
   active step. Otherwise the wrapper's own block-flow margin (e.g. 18px on
   .maturity-grid) pushes the active step past the viewport edge. */
.is-presentation-mode .maturity-grid:has(> [data-present-step].is-active),
.is-presentation-mode .task-grid:has(> [data-present-step].is-active) {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* 1-pre-5. Compression for cards that are the active step but carry rich
   content (maturity tiers, tcv-b step-card lists). Slightly tighter padding
   / font / gap so the card fits the viewport at 16:9 without scroll. */
.is-presentation-mode .maturity-card[data-present-step].is-active {
  padding: 18px 22px 16px;
}
.is-presentation-mode .maturity-card[data-present-step].is-active .mat-profile {
  margin: 4px 0 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.is-presentation-mode .maturity-card[data-present-step].is-active .mat-priorities {
  gap: 8px;
  margin-bottom: 10px;
}
.is-presentation-mode .maturity-card[data-present-step].is-active .mat-priority-row {
  padding: 8px 10px;
}
.is-presentation-mode .maturity-card[data-present-step].is-active .mat-priority-row ul li {
  font-size: 0.78rem;
  padding: 1px 0;
  line-height: 1.5;
}
.is-presentation-mode .task-card[data-present-step].is-active .tcv-b-step-card {
  padding: 12px 14px;
}
.is-presentation-mode .task-card[data-present-step].is-active .tcv-b-step-cards {
  gap: 10px;
}
.is-presentation-mode .task-card[data-present-step].is-active .tcv-b-ttext {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 6px 0;
}
.is-presentation-mode .task-card[data-present-step].is-active .tcv-b-step-asset {
  padding: 6px 10px;
}

/* 1a. On overview step, hide non-accordion siblings (paradigm-grid, flow-list, etc.)
       Only .section-head, .subsection-accordion and [data-accordion] items should be visible */
.is-presentation-mode .section[data-present-overview].is-active > *:not(.section-head):not(.subsection-accordion):not([data-accordion]):not([data-present-step]) {
  display: none !important;
}

/* 1b. Overview step: show description + collapsed accordion list, but NOT kicker/h2 (deck carries those) */
.is-presentation-mode .section[data-present-overview].is-active > .section-head {
  display: block;
}
.is-presentation-mode .section[data-present-overview].is-active > .section-head .section-kicker,
.is-presentation-mode .section[data-present-overview].is-active > .section-head h2 {
  display: none;
}

/* Overview layout — vertically centered flex row-wrap */
.is-presentation-mode .section[data-present-overview].is-active {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  padding: 0 clamp(40px, 6vw, 100px);
  gap: 24px;
}
/* section-head: full width row, centered description */
.is-presentation-mode .section[data-present-overview].is-active > .section-head {
  flex: 0 0 100%;
  text-align: center;
  margin-bottom: 16px;
}
.is-presentation-mode .section[data-present-overview].is-active > .section-head p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  opacity: 0.78;
  margin: 0;
}

/* Card grid — .subsection-accordion wrapper */
.is-presentation-mode .section[data-present-overview].is-active .subsection-accordion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  flex: 0 0 100%;
  max-width: 1100px;
}
/* When no .subsection-accordion wrapper — direct children use flex sizing */
.is-presentation-mode .section[data-present-overview].is-active > [data-accordion][data-present-step] {
  flex: 1 1 260px;
  max-width: 380px;
}

/* Card item styling */
.is-presentation-mode .section[data-present-overview].is-active [data-accordion][data-present-step] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  max-height: none;
  min-height: 120px;
  width: auto;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: none;
  text-align: center;
}
.is-presentation-mode .section[data-present-overview].is-active .subsection-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 24px;
  pointer-events: none;
  text-align: center;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
}
.is-presentation-mode .section[data-present-overview].is-active .subsection-toggle::after {
  display: none;
}
.is-presentation-mode .section[data-present-overview].is-active .subsection-number {
  font-size: 2rem;
  opacity: 0.35;
  font-weight: 800;
  line-height: 1;
}
.is-presentation-mode .section[data-present-overview].is-active .subsection-content {
  display: none !important;
}
.is-presentation-mode .section[data-present-overview].is-active .subsection-item.is-open {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

/* 1c. Passthrough: overview container is visible but transparent when a child step is active */
.is-presentation-mode [data-present-overview].is-present-container-passthrough {
  display: block !important;
  height: auto;
  max-height: none;
  min-height: 0;
  width: auto;
  overflow: visible;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  animation: none;
}
.is-presentation-mode [data-present-overview].is-present-container-passthrough > .section-head {
  display: none;
}
/* 1d. Passthrough: hide non-accordion siblings so only the active detail step shows */
.is-presentation-mode [data-present-overview].is-present-container-passthrough > *:not(.subsection-accordion):not(.section-head):not([data-accordion]):not([data-present-step]) {
  display: none !important;
}

/* 2. Strip accordion card chrome so content floats cleanly on the slide */
.is-presentation-mode .subsection-item[data-present-step].is-active {
  border: none;
  box-shadow: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 3. Hide toggle bar — deck title already shows "Section - Subsection" */
.is-presentation-mode .subsection-item[data-present-step].is-active > .subsection-toggle {
  display: none;
}

/* 4. Force .subsection-content visible — override collapsed max-height/opacity defaults */
.is-presentation-mode .subsection-item[data-present-step].is-active > .subsection-content {
  display: block;
  max-height: none;
  opacity: 1;
  overflow: visible;
  padding: 0;
  width: min(1180px, 100%);
  margin: 0 auto;
  justify-self: center;
}

.is-presentation-mode .hero-grid,
.is-presentation-mode .hero-metrics,
.is-presentation-mode .comparison-grid,
.is-presentation-mode .insight-grid,
.is-presentation-mode .pattern-grid,
.is-presentation-mode .mesh-layout,
.is-presentation-mode .subsection-accordion,
.is-presentation-mode .tab-shell,
.is-presentation-mode [data-tabs],
.is-presentation-mode .section-head,
.is-presentation-mode .comparison-card,
.is-presentation-mode .comparison-cell,
.is-presentation-mode .hero-panel,
.is-presentation-mode .hero-copy {
  max-width: 100%;
}

.is-presentation-mode .section-head {
  margin-bottom: 8px;
}

.is-presentation-mode .section-head .section-kicker,
.is-presentation-mode .section-head h2 {
  display: none;
}

.is-presentation-mode .hero-copy p,
.is-presentation-mode .section-head p,
.is-presentation-mode .tab-panel p {
  max-width: none;
}

.is-presentation-mode .section-head p {
  margin-top: 0;
}

.is-presentation-mode .hero-copy h1 {
  max-width: 18ch;
}

.is-presentation-mode .comparison-card,
.is-presentation-mode .comparison-cell,
.is-presentation-mode .hero-panel,
.is-presentation-mode .present-step-block,
.is-presentation-mode .tab-shell {
  break-inside: avoid;
}

/* ── Phase 1: Presentation typography scale-up (Type A + B shared baseline) ── */
.is-presentation-mode .comparison-grid,
.is-presentation-mode .insight-grid {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Cap insight-grid to 3 columns in presentation — prevents orphan cards (5+1, 7+1) */
.is-presentation-mode .insight-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 100%;
}

.is-presentation-mode .subsection-content p,
.is-presentation-mode .subsection-content li {
  font-size: var(--present-body-font);
  line-height: var(--present-body-line-height);
}

.is-presentation-mode .event-field p {
  font-size: var(--present-body-font);
  line-height: var(--present-body-line-height);
}

.is-presentation-mode .event-field-label {
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  color: var(--teal);
  font-weight: 700;
}

.is-presentation-mode .insight-text,
.is-presentation-mode .comparison-card p,
.is-presentation-mode .flow-list p {
  font-size: var(--present-body-font);
  line-height: var(--present-body-line-height);
}

.is-presentation-mode .bib-list li {
  font-size: var(--present-body-font);
}

.is-presentation-mode .compare-table,
.is-presentation-mode .spec-table,
.is-presentation-mode .checklist-table {
  font-size: var(--present-body-font);
}

.is-presentation-mode .compare-table th,
.is-presentation-mode .spec-table th,
.is-presentation-mode .checklist-table th {
  font-size: clamp(0.82rem, 1vw, 0.92rem);
}

/* Compact data-table rows in presentation mode so 10+ row tables fit while
   keeping readable type. Trade vertical padding before font-size. */
.is-presentation-mode .data-table th,
.is-presentation-mode .data-table td {
  padding: 4px 12px;
  font-size: 1.12em;
  line-height: 1.4;
}

/* Font consistency in presentation mode: hero metric values mix Latin (Space Grotesk)
   with Chinese fallback which can clash with the user-selected slide font. Force the
   present-font stack so all hero-metric text matches the body. Falls back to the
   normal reading font (sans-serif) when the user keeps "Default". */
.is-presentation-mode .hero-metrics .metric strong,
.is-presentation-mode .hero-metrics .metric .metric-label,
.is-presentation-mode .hero-metrics .metric span,
.is-presentation-mode .hero-copy .eyebrow {
  font-family: var(--present-font, var(--reading-font, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif));
}

.is-presentation-mode .narration-subtitle {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  /* Width hugs content; max-width set inline by JS to clear logo (left) and FAB+counter (right) */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  padding: 12px 28px;
  line-height: 1.7;
  box-sizing: border-box;
}

/* ── Phase 2: Focus mode — Type B narration (anchors stay, rest dims) ── */
.is-focus-mode .subsection-content > *,
.is-focus-mode .event-field {
  opacity: 0.15;
  filter: blur(1px);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.is-focus-mode .subsection-content > .focus-keep,
.is-focus-mode .event-field.focus-keep,
.is-focus-mode .subsection-content > h2,
.is-focus-mode .subsection-content > h3,
.is-focus-mode .subsection-content > h4,
.is-focus-mode .subsection-content > img,
.is-focus-mode .subsection-content > blockquote,
.is-focus-mode .subsection-content > .insight-callout,
.is-focus-mode .subsection-content > .insight-grid,
.is-focus-mode .subsection-content > .comparison-grid,
.is-focus-mode .subsection-content > .metric-card {
  opacity: 1;
  filter: none;
}

/* Event-field anchor: first event-field always visible as lead context */
.is-focus-mode .event-field:first-child {
  opacity: 1;
  filter: none;
}

/* Ensure transition when focus mode is removed */
.is-presentation-mode .subsection-content > *,
.is-presentation-mode .event-field {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* ── Phase 3: Portrait recording viewport (Type B mobile optimized) ── */
.is-portrait-recording [data-present-step].is-active {
  width: min(56.25vh, 100vw);
  margin: 0 auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

.is-portrait-recording .subsection-content p,
.is-portrait-recording .subsection-content li,
.is-portrait-recording .event-field p {
  font-size: calc(var(--present-body-font) * 1.3);
}

.is-portrait-recording .narration-subtitle {
  width: 88%;
  max-width: 88%;
}

.is-portrait-recording .section[data-present-overview].is-active .subsection-accordion {
  grid-template-columns: 1fr;
}

.is-portrait-recording .comparison-grid,
.is-portrait-recording .insight-grid,
.is-portrait-recording .pattern-grid {
  grid-template-columns: 1fr;
}

.is-square-recording [data-present-step].is-active {
  width: min(100vh, 100vw);
  margin: 0 auto;
}

.is-square-recording .subsection-content p,
.is-square-recording .subsection-content li,
.is-square-recording .event-field p {
  font-size: calc(var(--present-body-font) * 1.15);
}

/* ── Phase 4: Mobile presentation mode (phone-optimized content) ── */
.is-mobile-present .site {
  --present-body-font: clamp(1.6rem, 4.5vw, 2.2rem);
  --present-body-line-height: 1.85;
  --present-side-gap: 24px;
  --present-safe-top: 64px;
  --present-safe-bottom: 100px;
}

.is-mobile-present [data-present-step].is-active {
  width: min(56.25vh, 100vw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: var(--present-safe-bottom);
}

/* Hide side nav arrows — bottom nav bar replaces them */
.is-mobile-present .present-nav {
  display: none;
}

/* Enlarge exit button for touch targets */
.is-mobile-present .present-exit {
  width: 48px;
  height: 48px;
}
.is-mobile-present .present-exit svg {
  width: 22px;
  height: 22px;
}

/* Enlarge deck bar for mobile readability */
.is-mobile-present .present-deck-label {
  font-size: 0.92rem;
}
.is-mobile-present .present-deck-title {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
}

/* Force single column on all grids */
.is-mobile-present .comparison-grid,
.is-mobile-present .insight-grid,
.is-mobile-present .pattern-grid {
  grid-template-columns: 1fr;
}
.is-mobile-present .section[data-present-overview].is-active .subsection-accordion {
  grid-template-columns: 1fr;
}
.is-mobile-present .hero-grid {
  grid-template-columns: 1fr;
}
.is-mobile-present .hero-metrics {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Enlarge event-field labels and insight text */
.is-mobile-present .event-field-label {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
}
.is-mobile-present .insight-text,
.is-mobile-present .comparison-card p,
.is-mobile-present .flow-list p {
  font-size: var(--present-body-font);
  line-height: var(--present-body-line-height);
}

/* Tables: enlarge cells */
.is-mobile-present .compare-table,
.is-mobile-present .spec-table,
.is-mobile-present .checklist-table {
  font-size: clamp(1rem, 3vw, 1.3rem);
}

/* Narration subtitle: full width, large font */
.is-mobile-present .narration-subtitle {
  left: 16px;
  right: 16px;
  width: auto;
  max-width: none;
  transform: none;
  padding: 14px 20px;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  line-height: 1.7;
}

/* Content density: scrollable steps */
.is-mobile-present [data-mobile-scrollable] {
  overflow-y: auto;
  align-content: start;
}
.is-mobile-present [data-mobile-scrollable]::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: block;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Mobile bottom navigation bar ── */
.mobile-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.7);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}
.is-mobile-present .mobile-nav-bar {
  display: flex;
}
.mobile-nav-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.mobile-nav-btn:active {
  background: var(--line);
}
.mobile-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.mobile-nav-btn svg {
  width: 22px;
  height: 22px;
}
.mobile-nav-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mobile-nav-counter {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.mobile-nav-progress {
  width: 100%;
  max-width: 160px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.mobile-nav-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--teal);
  transition: width 0.3s ease;
}

/* Hide nav bar and exit button during recording */
.is-recording .mobile-nav-bar {
  display: none;
}

/* Dark mode for mobile nav bar */
[data-theme="dark"] .mobile-nav-bar {
  background: rgba(30, 30, 30, 0.75);
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .mobile-nav-btn {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .mobile-nav-btn:active {
  background: rgba(255, 255, 255, 0.15);
}

/* Dark mode: scrollable indicator */
[data-theme="dark"] .is-mobile-present [data-mobile-scrollable]::after {
  background: linear-gradient(transparent, var(--bg, #141419));
}

@keyframes presentFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes presentMorph {
  from {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes presentSlide {
  from {
    opacity: 0;
    transform: translateX(28vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes presentZoom {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-note {
  margin-top: 18px;
  font-size: 0.94rem;
  color: var(--muted);
}

.hero-panel {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--panel-strong);
  color: #f6f8fb;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 122, 0, 0.24), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(13, 143, 140, 0.2), transparent 24%);
  pointer-events: none;
}

.panel-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe0bb, #77d7d0);
}

.hero-panel h2 {
  position: relative;
  margin: 18px 0 10px;
  font-size: 1.7rem;
  line-height: 1.25;
}

.hero-panel p {
  position: relative;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(246, 248, 251, 0.76);
}

.signal-map {
  position: relative;
  min-height: 420px;
  margin-top: 24px;
  isolation: isolate;
  --orbit-scale: 1;
  --signal-center-x: 48%;
  --signal-center-y: 55%;
}

.signal-map::before {
  content: "";
  position: absolute;
  top: var(--signal-center-y);
  left: var(--signal-center-x);
  width: 236px;
  height: 236px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 38%, transparent 72%);
  filter: blur(10px);
  opacity: 0.72;
  z-index: 0;
}

.signal-map::after {
  content: "";
  position: absolute;
  top: var(--signal-center-y);
  left: var(--signal-center-x);
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.28;
  z-index: 0;
}

.core-node {
  position: absolute;
  top: var(--signal-center-y);
  left: var(--signal-center-x);
  transform: translate(-50%, -50%);
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 122, 0, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 3;
  animation: corePulse 8s ease-in-out infinite;
}

.core-node::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.56;
  animation: coreHalo 8s ease-in-out infinite;
}

.core-node strong {
  display: block;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
}

.core-node span {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  color: rgba(246, 248, 251, 0.74);
}

.orbit {
  position: absolute;
  top: var(--signal-center-y);
  left: var(--signal-center-x);
  width: calc(var(--orbit-size) * var(--orbit-scale));
  height: calc(var(--orbit-size) * var(--orbit-scale));
  transform: translate(-50%, -50%) rotate(var(--start-angle));
  animation: orbitSpin var(--orbit-duration) linear infinite;
  z-index: 1;
}

.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  opacity: 0.56;
}

.orbit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.14);
  opacity: 0.42;
}

.signal-node {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(118px * var(--orbit-scale));
  padding: 12px 10px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border: 1px solid var(--node-accent, rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--start-angle)));
  animation: orbitCounterSpin var(--orbit-duration) linear infinite;
  box-shadow: 0 16px 32px rgba(6, 15, 24, 0.18);
}

.signal-node strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
}

.signal-node span {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(246, 248, 251, 0.68);
}

.orbit-erp {
  --orbit-size: 380px;
  --start-angle: 4deg;
  --orbit-duration: 44s;
  --node-accent: rgba(255, 147, 64, 0.34);
}

.orbit-crm {
  --orbit-size: 302px;
  --start-angle: 64deg;
  --orbit-duration: 44s;
  --node-accent: rgba(119, 215, 208, 0.32);
}

.orbit-lake {
  --orbit-size: 380px;
  --start-angle: 124deg;
  --orbit-duration: 44s;
  --node-accent: rgba(224, 176, 75, 0.34);
}

.orbit-iot {
  --orbit-size: 302px;
  --start-angle: 184deg;
  --orbit-duration: 44s;
  --node-accent: rgba(125, 205, 255, 0.3);
}

.orbit-fabric {
  --orbit-size: 380px;
  --start-angle: 244deg;
  --orbit-duration: 44s;
  --node-accent: rgba(168, 188, 255, 0.28);
}

.orbit-foundry {
  --orbit-size: 302px;
  --start-angle: 304deg;
  --orbit-duration: 44s;
  --node-accent: rgba(255, 216, 176, 0.34);
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.hero-metrics > .metric {
  flex: 1 1 180px;
  min-width: 0;
}

.metric {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.metric-label {
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.metric strong {
  display: block;
  margin-top: 10px;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.metric span {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
}

main {
  padding-bottom: 42px;
}

.section {
  padding: 82px 0 0;
}

.section:first-of-type {
  padding-top: 52px;
}

.section-head {
  margin-bottom: 8px;
}

.section-kicker {
  margin: 0 0 10px;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.section-head h2 {
  margin: 0;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.section-head p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
}

.insight-grid,
.pattern-grid {
  display: grid;
  gap: 12px;
}

.insight-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.insight-grid + .insight-grid,
[data-present-step].insight-grid + [data-present-step].insight-grid {
  margin-top: 12px;
}

.insight-card,
.pattern-card,
.comparison-card,
.comparison-cell,
.mesh-copy,
.mesh-board {
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.insight-card {
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.insight-card::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), rgba(13, 143, 140, 0));
  pointer-events: none;
}

.card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 34px;
  background: rgba(23, 36, 48, 0.06);
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.insight-card h3,
.pattern-card h3,
.comparison-card h3,
.comparison-cell h3,
.mesh-copy h3 {
  margin: 16px 0 10px;
  font-size: 1.2rem;
  line-height: 1.35;
}

.insight-card p,
.pattern-card p,
.comparison-card p,
.comparison-cell p,
.mesh-copy p,
.layer-list li,
.reference-list li {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.95rem;
}

.comparison-grid,
.mesh-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.comparison-card,
.comparison-cell {
  padding: 26px;
}

.comparison-label,
.pattern-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(23, 36, 48, 0.05);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.comparison-card.next {
  background: linear-gradient(180deg, rgba(16, 31, 43, 0.98), rgba(24, 50, 63, 0.98));
  color: #f6f8fb;
  border-color: rgba(255, 255, 255, 0.08);
}

.comparison-card.next p,
.comparison-card.next .layer-list li,
.comparison-card.next .comparison-label {
  color: rgba(246, 248, 251, 0.72);
}

.layer-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}

.layer-list li {
  padding: 12px 14px 12px 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(23, 36, 48, 0.08);
  position: relative;
}

.layer-number {
  position: absolute;
  left: 14px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(23, 36, 48, 0.08);
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

.comparison-card.next .layer-list li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Hero panel sits on a dark background — invert layer-list pills for contrast */
.hero-panel .layer-list li {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(246, 248, 251, 0.92);
}

.hero-panel .layer-number {
  background: rgba(255, 255, 255, 0.2);
  color: #f6f8fb;
}

.comparison-card.next .layer-number {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.mesh-board {
  position: relative;
  min-height: 540px;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(13, 143, 140, 0.09), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255, 122, 0, 0.07), transparent 42%),
    radial-gradient(circle at 16% 14%, rgba(255, 122, 0, 0.12), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(13, 143, 140, 0.12), transparent 24%),
    rgba(255, 255, 255, 0.7);
}

.mesh-board::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 26px;
  border: 1px dashed rgba(23, 36, 48, 0.1);
  pointer-events: none;
  opacity: 0.72;
}

.mesh-board::after {
  content: "";
  position: absolute;
  inset: 54px;
  border-radius: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
  opacity: 0.4;
}

.mesh-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 196px;
  height: 196px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 122, 0, 0.12), rgba(13, 143, 140, 0.16));
  border: 1px solid rgba(23, 36, 48, 0.08);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  z-index: 2;
}

.mesh-core strong {
  display: block;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 1.5rem;
  line-height: 1.1;
}

.mesh-core span {
  display: block;
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
}

.mesh-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mesh-lines .mesh-path {
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

.mesh-lines .mesh-path-shadow {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.28;
}

.mesh-lines .mesh-anchor,
.mesh-lines .mesh-hub-dot {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1;
}

.mesh-lines .mesh-anchor {
  fill: rgba(255, 255, 255, 0.78);
}

.mesh-lines .mesh-hub-dot {
  fill: rgba(23, 36, 48, 0.18);
}

.mesh-node {
  position: absolute;
  width: 168px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 36, 48, 0.08);
  box-shadow: 0 18px 34px rgba(17, 31, 43, 0.08);
  z-index: 2;
}

.mesh-node strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 6px;
}

.mesh-node span {
  display: block;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
}

.mesh-node-a {
  top: 8%;
  left: 8%;
}

.mesh-node-b {
  top: 8%;
  right: 8%;
}

.mesh-node-c {
  top: 34%;
  left: 4%;
}

.mesh-node-d {
  top: 34%;
  right: 4%;
}

.mesh-node-e {
  bottom: 8%;
  left: 12%;
}

.mesh-node-f {
  width: 182px;
  bottom: 8%;
  right: 8%;
}

.mesh-node-f strong {
  font-size: 0.98rem;
  line-height: 1.3;
}

.mesh-copy {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.quote-block {
  margin-top: 18px;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.1), rgba(13, 143, 140, 0.12));
  border: 1px solid rgba(23, 36, 48, 0.08);
}

.quote-block strong {
  display: block;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.quote-block span {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.reference-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.reference-list li {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(23, 36, 48, 0.08);
}

.reference-list a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bib-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bib-list li {
  position: relative;
  padding: 10px 0 10px 22px;
  text-indent: -22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.75;
}

.bib-list li:last-child {
  border-bottom: none;
}

.is-presentation-mode .bib-list li {
  border-bottom: none;
}

.bib-list .bib-id {
  font-family: "Space Grotesk", monospace;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--teal);
  margin-right: 4px;
}

.bib-list .bib-author {
  color: var(--ink);
  font-weight: 500;
}

.bib-list a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.bib-list a:hover {
  border-bottom-color: var(--accent);
}

.bib-note {
  display: block;
  margin-top: 2px;
  font-size: 0.84rem;
  color: var(--muted);
  opacity: 0.8;
  text-indent: 0;
}

.section-grid-spaced {
  margin-top: 12px;
  margin-bottom: 12px;
}

.subsection-accordion {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.subsection-item {
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.subsection-item.is-open {
  border-color: rgba(13, 143, 140, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(243, 249, 248, 0.92));
  box-shadow: 0 20px 46px rgba(17, 31, 43, 0.1);
}

.subsection-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.24s ease, color 0.24s ease;
}

.subsection-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.subsection-toggle:focus-visible {
  outline: 2px solid rgba(13, 143, 140, 0.28);
  outline-offset: -2px;
}

.subsection-toggle::after {
  content: "+";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 36, 48, 0.08);
  color: rgba(23, 36, 48, 0.82);
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease;
}

/* Legacy inline icon — hidden; toggle indicator comes from ::after only */
.subsection-icon { display: none; }

.subsection-item.is-open .subsection-toggle::after {
  content: "-";
  background: rgba(13, 143, 140, 0.12);
  color: var(--teal);
}

.subsection-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 24px;
  transition: max-height 0.34s ease, opacity 0.24s ease, padding 0.24s ease;
}

.subsection-item.is-open .subsection-content {
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding: 0 24px 24px;
}

.subsection-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.96rem;
}

.flow-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
  counter-reset: flow-counter;
}

.flow-list li,
.flow-list > .flow-step,
.flow-list > .flow-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
}

/* When .flow-step is a direct child of .flow-list it acts as a row
   container, not as the numbered circle badge. Neutralise the badge
   styles and auto-generate the circle via ::before. */
.flow-list > .flow-step {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
  font-weight: inherit;
  counter-increment: flow-counter;
}

.flow-list > .flow-step::before {
  content: counter(flow-counter);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff9340);
  color: #fff;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.10);
  flex-shrink: 0;
}

/* .flow-number badge (variant of .flow-step used in .flow-item rows) */
.flow-number {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff9340);
  color: #fff;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.10);
  flex-shrink: 0;
}

.flow-step {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff9340);
  color: #fff;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(255, 122, 0, 0.18);
}

.flow-copy strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.flow-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.95rem;
}

.simple-table,
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.simple-table th,
.simple-table td,
.matrix-table th,
.matrix-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(23, 36, 48, 0.08);
  vertical-align: top;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
}

.simple-table th,
.matrix-table th {
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.matrix-panel {
  padding: 26px;
}

.matrix-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 10px;
}

.matrix-view-switch {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(23, 36, 48, 0.08);
  background: rgba(255, 255, 255, 0.56);
}

.matrix-view-button {
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.matrix-view-button:hover {
  transform: translateY(-1px);
  color: var(--ink);
}

.matrix-view-button[aria-selected="true"] {
  background: linear-gradient(135deg, var(--accent), #ff9340);
  color: #fff;
}

.matrix-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.matrix-controls label,
.decision-controls label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.matrix-controls select,
.decision-controls select {
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
}

.matrix-caption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.matrix-view-panel[hidden] {
  display: none;
}

.quadrant-board {
  position: relative;
  margin-top: 12px;
  min-height: 520px;
  border-radius: 28px;
  border: 1px solid rgba(23, 36, 48, 0.08);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 248, 0.9)),
    radial-gradient(circle at 20% 18%, rgba(255, 122, 0, 0.08), transparent 26%),
    radial-gradient(circle at 78% 20%, rgba(13, 143, 140, 0.08), transparent 24%);
}

.quadrant-board::before,
.quadrant-board::after {
  content: "";
  position: absolute;
  background: rgba(23, 36, 48, 0.08);
  z-index: 1;
}

.quadrant-board::before {
  top: 50%;
  left: 24px;
  right: 24px;
  height: 1px;
  transform: translateY(-50%);
}

.quadrant-board::after {
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.quadrant-label {
  position: absolute;
  z-index: 1;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(23, 36, 48, 0.46);
}

.quadrant-label-tl {
  top: 18px;
  left: 22px;
}

.quadrant-label-tr {
  top: 18px;
  right: 22px;
  text-align: right;
}

.quadrant-label-bl {
  bottom: 18px;
  left: 22px;
}

.quadrant-label-br {
  bottom: 18px;
  right: 22px;
  text-align: right;
}

.quadrant-axis-title {
  position: absolute;
  z-index: 1;
  color: rgba(23, 36, 48, 0.58);
  font-size: 0.82rem;
  font-weight: 700;
}

.quadrant-axis-title-x {
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}

.quadrant-axis-title-y {
  top: 50%;
  left: -8px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}

.quadrant-point {
  position: absolute;
  z-index: 2;
  width: 178px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(23, 36, 48, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 36px rgba(17, 31, 43, 0.09);
  transform: translate(-50%, -50%);
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.quadrant-point:hover {
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow: 0 24px 42px rgba(17, 31, 43, 0.12);
}

.quadrant-point[hidden] {
  display: none;
}

.quadrant-point::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--point-accent, rgba(255, 122, 0, 0.7));
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.8);
}

.quadrant-point strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--ink);
}

.quadrant-point p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.quadrant-point-single {
  top: 72%;
  left: 23%;
  --point-accent: rgba(255, 122, 0, 0.72);
}

.quadrant-point-router {
  top: 54%;
  left: 40%;
  --point-accent: rgba(224, 176, 75, 0.78);
}

.quadrant-point-planner {
  top: 41%;
  left: 56%;
  width: 170px;
  --point-accent: rgba(13, 143, 140, 0.76);
}

.quadrant-point-orchestrator {
  top: 48%;
  left: 72.5%;
  width: 164px;
  --point-accent: rgba(31, 78, 121, 0.78);
}

.quadrant-point-swarm {
  top: 18%;
  left: 86%;
  width: 162px;
  --point-accent: rgba(31, 78, 121, 0.78);
}

.challenge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.challenge-list li {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(23, 36, 48, 0.08);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.tab-shell {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.tab-button {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tab-button:hover {
  transform: translateY(-1px);
  color: var(--ink);
}

.tab-button[aria-selected="true"] {
  background: linear-gradient(135deg, var(--accent), #ff9340);
  color: #fff;
  border-color: transparent;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.96rem;
}

.decision-card {
  padding: 26px;
}

.decision-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.decision-result {
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.1), rgba(13, 143, 140, 0.12));
  border: 1px solid rgba(23, 36, 48, 0.08);
}

.decision-result strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
}

.decision-result p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.term {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px dotted rgba(13, 143, 140, 0.6);
  color: var(--ink);
  cursor: help;
}

.term-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(260px, 72vw);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(16, 31, 43, 0.96);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 3;
  text-transform: none;
  letter-spacing: normal;
}

.term:hover .term-tip,
.term:focus .term-tip,
.term:focus-within .term-tip {
  opacity: 1;
  transform: translateY(0);
}

.pattern-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pattern-card {
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.pattern-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 52px rgba(17, 31, 43, 0.14);
}

.pattern-card::after {
  content: "";
  position: absolute;
  inset: auto -18% -28% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(13, 143, 140, 0.08), rgba(255, 122, 0, 0.12));
  pointer-events: none;
}

footer {
  padding: 36px 0 22px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.load-in,
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.load-in.is-visible,
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes driftA {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(30px, 24px, 0);
  }
}

@keyframes driftB {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-26px, 18px, 0);
  }
}

@keyframes driftC {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(18px, -16px, 0);
  }
}

@keyframes orbitSpin {
  from {
    transform: translate(-50%, -50%) rotate(var(--start-angle));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--start-angle) + 360deg));
  }
}

@keyframes orbitCounterSpin {
  from {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--start-angle)));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(-360deg - var(--start-angle)));
  }
}

@keyframes corePulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 0 rgba(255, 147, 64, 0.08);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 18px rgba(255, 147, 64, 0.03);
  }
}

@keyframes coreHalo {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.42;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit,
  .signal-node,
  .core-node,
  .core-node::after,
  .subsection-content,
  .subsection-toggle::after {
    animation: none;
    transition: none;
  }
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .brand {
    display: none;
  }

  .hero-grid,
  .comparison-grid,
  .mesh-layout,
  .pattern-grid,
  .insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .challenge-list,
  .decision-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  .page-shell {
    padding: 16px;
  }

  .hero {
    min-height: 0;
    padding-top: 70px;
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 56px;
    padding: 8px 16px;
  }

  .topbar-actions {
    gap: 8px;
  }

  .nav-links {
    justify-content: flex-start;
    gap: 14px;
    max-width: 100%;
  }

  /* ── Mobile nav collapse ── */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
  }
  [data-theme="dark"] .nav-toggle {
    background: none;
    border-color: transparent;
  }
  .nav-toggle svg {
    width: 18px;
    height: 18px;
  }
  .nav-toggle[aria-expanded="true"] {
    color: var(--accent, #ff7a00);
    background: none;
    border-color: transparent;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 56px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-width: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 8px;
    border-radius: 14px;
    z-index: 100;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  }
  .nav-links.is-mobile-open {
    display: flex;
  }
  .nav-links.is-mobile-open a.nav-hidden {
    display: block !important;
  }
  .nav-links.is-mobile-open a.nav-ellipsis {
    display: none !important;
  }
  .nav-links a {
    padding: 10px 14px;
    font-size: 0.92rem;
    border-radius: 10px;
    text-align: left;
  }

  .present-toggle,
  .present-style-toggle,
  .share-btn {
    min-height: 36px;
    padding: 0 8px;
  }

  .hero-copy h1 {
    max-width: none;
  }

  .hero-metrics {
    flex-direction: column;
  }

  .hero-metrics > .metric {
    flex-basis: auto;
  }

  .comparison-grid,
  .mesh-layout,
  .pattern-grid,
  .insight-grid,
  .challenge-list,
  .decision-controls {
    grid-template-columns: 1fr;
  }

  .matrix-controls {
    flex-direction: column;
  }

  .matrix-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .matrix-view-switch {
    width: 100%;
    justify-content: space-between;
  }

  .matrix-view-button {
    flex: 1 1 0;
  }

  .quadrant-board {
    min-height: 600px;
  }

  .quadrant-axis-title-y {
    left: 4px;
  }

  .quadrant-point {
    width: 144px;
    padding: 12px 12px 14px;
  }

  .quadrant-point p {
    font-size: 0.8rem;
  }

  .quadrant-point-single {
    top: 74%;
    left: 28%;
  }

  .quadrant-point-router {
    top: 58%;
    left: 42%;
  }

  .quadrant-point-planner {
    top: 42%;
    left: 56%;
    width: 138px;
  }


  .present-exit {
    top: 12px;
    right: 12px;
  }

  .present-deck {
    top: 14px;
    left: 16px;
    max-width: calc(100vw - 112px);
    gap: 6px;
  }

  .present-deck-title {
    font-size: clamp(1.08rem, 5vw, 1.32rem);
  }

  .present-nav {
    top: auto;
    bottom: 92px;
    transform: none;
    width: 48px;
    height: 48px;
  }

  .present-nav-icon svg {
    width: 24px;
    height: 24px;
  }

  .present-nav:disabled {
    transform: none;
  }

  .present-nav-prev {
    left: 12px;
  }

  .present-nav-next {
    right: 12px;
  }

  .present-status {
    bottom: 12px;
    min-width: 0;
    width: calc(100vw - 88px);
  }

  .is-presentation-mode .site {
    --present-side-gap: 12px;
    --present-safe-top: 84px;
    --present-safe-bottom: 86px;
  }

  .quadrant-point-orchestrator {
    top: 47%;
    left: 71%;
    width: 132px;
  }

  .quadrant-point-swarm {
    top: 18%;
    left: 82%;
    width: 128px;
  }

  .tab-list {
    flex-direction: column;
  }

  .tab-button {
    width: 100%;
    text-align: left;
  }

  .subsection-toggle,
  .subsection-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .flow-list li,
  .flow-list > .flow-step,
  .flow-list > .flow-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .flow-step {
    width: 34px;
    height: 34px;
  }

  .flow-list > .flow-step::before,
  .flow-number {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }

  .signal-map {
    min-height: 390px;
    --orbit-scale: 0.76;
    --signal-center-x: 48%;
    --signal-center-y: 57%;
  }

  .core-node {
    width: 154px;
    height: 154px;
  }

  .signal-node {
    width: calc(104px * var(--orbit-scale));
    padding: 10px 8px;
  }

  .signal-node strong {
    font-size: 0.88rem;
  }

  .signal-node span {
    font-size: 0.72rem;
  }

  .mesh-board {
    min-height: 820px;
  }

  .mesh-core {
    top: 43%;
    width: 200px;
    height: 200px;
  }

  .mesh-node {
    width: calc(100% - 40px);
    left: 20px;
    right: 20px;
  }

  .mesh-node-a {
    top: 6%;
  }

  .mesh-node-b {
    top: 18%;
  }

  .mesh-node-c {
    top: 62%;
  }

  .mesh-node-d {
    top: 74%;
  }

  .mesh-node-e {
    bottom: 12%;
  }

  .mesh-node-f {
    bottom: 0;
  }

  .mesh-lines {
    display: none;
  }
}

/* ── Lightbox overlay ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  cursor: zoom-out;
}

.lightbox-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  transform: scale(0.92);
  transition: transform 0.28s ease;
  cursor: default;
}

.lightbox-overlay.is-active .lightbox-img {
  transform: scale(1);
}

/* Make article images look clickable */
.site img {
  cursor: zoom-in;
}

/* ── Presentation mode mobile breakpoint ── */
@media (max-width: 768px) {
  .is-presentation-mode .site {
    --present-body-font: 1.15rem;
    --present-side-gap: 16px;
  }

  .is-presentation-mode [data-present-step].is-active {
    padding-left: 16px;
    padding-right: 16px;
  }

  .is-presentation-mode .section[data-present-overview].is-active .subsection-accordion {
    grid-template-columns: 1fr;
  }

  .is-presentation-mode .comparison-grid,
  .is-presentation-mode .insight-grid,
  .is-presentation-mode .pattern-grid {
    grid-template-columns: 1fr;
  }

  .is-presentation-mode .present-deck-title {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }

  .is-presentation-mode .narration-subtitle {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: none;
    padding: 10px 16px;
  }
}

/* ── Print styles for PDF export ── */
@media print {
  .topbar,
  .present-floating,
  .share-wrapper,
  .home-link,
  .orb,
  .lightbox-overlay {
    display: none !important;
  }

  body,
  .site {
    background: #fff !important;
  }

  .hero {
    min-height: 0 !important;
    padding-top: 40px !important;
  }

  .section,
  .subsection-item,
  [data-accordion] {
    break-inside: avoid;
  }

  .subsection-item.is-open .subsection-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  a { color: var(--ink) !important; }
}