@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --radius-md: 0.5rem; --radius-xl: 1rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --topic-scroll-margin: 5.75rem;
  --content-narrow: 720px;
  --content-wide: 1480px;
  --page-pad-inline: clamp(1rem, 2.4vw, 2.5rem);
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.22);
  --font-display: 'Lora', 'Georgia', serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-lg: 0.75rem;
  --callout-teal: oklch(0.38 0.08 185);
  --callout-green: oklch(0.52 0.12 152);
  --callout-orange: oklch(0.62 0.14 60);
  --callout-purple: oklch(0.50 0.14 300);
}
:root, [data-theme="dark"] {
  --color-bg: #0e1318; --color-surface: rgba(18, 24, 30, 0.88); --color-surface-2: rgba(22, 30, 38, 0.94); --color-divider: rgba(120, 150, 175, 0.12); --color-border: rgba(120, 150, 175, 0.18);
  --color-text: #edf2f7; --color-text-muted: #a8b5c2; --color-text-faint: #6b7d8e;
  --color-primary: oklch(0.72 0.1 185); --color-primary-highlight: oklch(0.72 0.1 185 / 0.16); --color-accent-amber: #f0b56b;
  --chip-foundation: #7b8794; --chip-math: #9a8cff; --chip-physics: #82c6ff;
  --chip-chemistry: #f0b56b; --chip-biology: #87d6a0; --chip-cs: #df8a9d;
  --chip-bridge: oklch(0.72 0.1 185);
}
[data-theme="light"] {
  --color-bg: oklch(0.985 0.008 80); --color-surface: rgba(255, 253, 248, 0.92); --color-surface-2: rgba(252, 249, 242, 0.96); --color-divider: rgba(55, 68, 80, 0.1); --color-border: rgba(55, 68, 80, 0.14);
  --color-text: #1a2230; --color-text-muted: #4d5c6a; --color-text-faint: #7a8a98;
  --color-primary: oklch(0.38 0.08 185); --color-primary-highlight: oklch(0.38 0.08 185 / 0.12); --color-accent-amber: #b56e12;
  --chip-foundation: #66727e; --chip-math: #6b57da; --chip-physics: #1d78b7;
  --chip-chemistry: #b56e12; --chip-biology: #1f8651; --chip-cs: #b25570;
  --chip-bridge: oklch(0.38 0.08 185);
  --shadow-sm: 0 8px 24px rgba(38, 44, 52, 0.06);
  --shadow-lg: 0 18px 48px rgba(38, 44, 52, 0.10);
}
[data-accent="amber"] {
  --color-primary: #f0b56b;
  --color-primary-highlight: rgb(240 181 107 / 0.15);
}
[data-theme="light"][data-accent="amber"] {
  --color-primary: #9f5c00;
  --color-primary-highlight: rgb(159 92 0 / 0.13);
}
[data-accent="green"] {
  --color-primary: #87d6a0;
  --color-primary-highlight: rgb(135 214 160 / 0.15);
}
[data-theme="light"][data-accent="green"] {
  --color-primary: #1f8651;
  --color-primary-highlight: rgb(31 134 81 / 0.13);
}
[data-accent="rose"] {
  --color-primary: #df8a9d;
  --color-primary-highlight: rgb(223 138 157 / 0.15);
}
[data-theme="light"][data-accent="rose"] {
  --color-primary: #b25570;
  --color-primary-highlight: rgb(178 85 112 / 0.13);
}
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}
[data-density="compact"] {
  --space-5: 1rem;
  --space-6: 1.2rem;
  --space-8: 1.6rem;
  --space-10: 2rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text);
  background:
    radial-gradient(circle at top left, oklch(from var(--color-primary) l c h / 0.10), transparent 28%),
    radial-gradient(circle at 84% 8%, oklch(from var(--chip-math) l c h / 0.07), transparent 28%),
    radial-gradient(circle at 50% 100%, oklch(from var(--chip-chemistry) l c h / 0.06), transparent 34%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg));
  line-height: 1.72;
  letter-spacing: 0.005em;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

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

.topic-zone { scroll-margin-top: var(--topic-scroll-margin); }
.topic-zone:not(.topic-zone--first):not(.topic-zone--collapsible) {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-divider);
}
.topic-zone--first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.topic-zone[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.nexus-premium-lock {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  box-shadow: var(--shadow-lg);
  overflow: clip;
  backdrop-filter: blur(18px);
}
.nexus-premium-lock__header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.nexus-premium-lock__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-4);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.26);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}
.nexus-premium-lock__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.05;
  margin-bottom: var(--space-4);
}
.nexus-premium-lock__lead {
  max-width: 62ch;
  color: var(--color-text-muted);
}
.nexus-premium-lock__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-divider);
}
.nexus-premium-lock__tier {
  padding: var(--space-6);
}
.nexus-premium-lock__tier + .nexus-premium-lock__tier {
  border-left: 1px solid var(--color-divider);
}
.nexus-premium-lock__tier h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.nexus-premium-lock__tier ul {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}
.nexus-premium-lock__tier--paid h3 {
  color: var(--color-primary);
}
.nexus-premium-lock__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
}
.nexus-premium-lock__status {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.nexus-premium-modal-open {
  overflow: hidden;
}
.nexus-premium-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.nexus-premium-modal[hidden] {
  display: none !important;
}
.nexus-premium-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 14, 0.68);
  backdrop-filter: blur(16px);
}
.nexus-premium-modal__panel {
  position: relative;
  width: min(620px, 100%);
  max-height: min(88vh, 860px);
  overflow: auto;
  z-index: 1;
  border: 1px solid oklch(from var(--color-primary) l c h / 0.16);
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at top left, oklch(from var(--color-primary) l c h / 0.22), transparent 34%),
    radial-gradient(circle at 100% 0%, oklch(from var(--chip-math) l c h / 0.16), transparent 24%),
    linear-gradient(180deg, oklch(from var(--color-surface-2) l c h / 0.98), oklch(from var(--color-surface) l c h / 0.98));
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.34);
}
.nexus-premium-modal__header {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: var(--space-4);
}
.nexus-premium-modal__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-right: 3rem;
}
.nexus-premium-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.28);
  background: oklch(from var(--color-primary) l c h / 0.12);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nexus-premium-modal__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-text) l c h / 0.06);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.nexus-premium-modal__account:hover {
  border-color: oklch(from var(--color-primary) l c h / 0.35);
  background: oklch(from var(--color-primary) l c h / 0.12);
}
.nexus-premium-modal__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 2.1vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.nexus-premium-modal__lead {
  max-width: 38rem;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
.nexus-premium-modal__body {
  display: grid;
  gap: var(--space-5);
  padding: 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
}
.nexus-premium-modal__summary {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
  background: linear-gradient(180deg, oklch(from var(--color-primary) l c h / 0.12), oklch(from var(--color-text) l c h / 0.035));
}
.nexus-premium-modal__price {
  font-size: clamp(1.8rem, 1.35rem + 1vw, 2.4rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}
.nexus-premium-modal__price span {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}
.nexus-premium-modal__features {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  color: var(--color-text-muted);
}
.nexus-premium-modal__features li {
  position: relative;
  padding-left: 1.65rem;
  line-height: 1.55;
}
.nexus-premium-modal__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--chip-biology);
  font-weight: 800;
}
.nexus-premium-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.nexus-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
}
.nexus-tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 1.5rem;
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, oklch(from var(--color-text) l c h / 0.06), oklch(from var(--color-text) l c h / 0.025));
  box-shadow: inset 0 1px 0 oklch(from white l c h / 0.06);
}
.nexus-tier-card--pro {
  border-color: oklch(from var(--color-primary) l c h / 0.24);
  background:
    linear-gradient(180deg, oklch(from var(--color-primary) l c h / 0.18), transparent 42%),
    linear-gradient(180deg, oklch(from var(--color-text) l c h / 0.06), oklch(from var(--color-text) l c h / 0.025));
}
.nexus-tier-card__head {
  display: grid;
  gap: var(--space-2);
}
.nexus-tier-card__label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}
.nexus-tier-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 1vw, 2.5rem);
  line-height: 0.95;
}
.nexus-tier-card__price {
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.2rem);
  font-weight: 800;
  color: var(--color-text);
}
.nexus-tier-card__price span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.nexus-tier-card__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.nexus-tier-card__item {
  position: relative;
  padding-left: 2rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.nexus-tier-card__item::before {
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
}
.nexus-tier-card__item--included::before {
  content: '✓';
  background: oklch(from var(--chip-biology) l c h / 0.18);
  color: var(--chip-biology);
}
.nexus-tier-card__item--excluded::before {
  content: '×';
  background: oklch(from var(--chip-chemistry) l c h / 0.14);
  color: var(--chip-chemistry);
}
.nexus-tier-card__button {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  min-height: 3rem;
  font-weight: 800;
}
.nexus-tier-card__button.nexus-tier-card__button--current {
  border-color: var(--color-border);
  background: oklch(from var(--color-text) l c h / 0.045);
  background-clip: padding-box;
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.nexus-tier-card__button.nexus-tier-card__button--pro {
  border-color: oklch(from var(--color-primary) l c h / 0.34);
  background-image: linear-gradient(135deg, oklch(from var(--color-primary) l c h / 0.26), oklch(from var(--chip-physics) l c h / 0.14));
  background-clip: padding-box;
}
.nexus-premium-modal__primary {
  justify-content: center;
  min-height: 3rem;
  border-color: oklch(from var(--color-primary) l c h / 0.34);
  background-image: linear-gradient(135deg, oklch(from var(--color-primary) l c h / 0.26), oklch(from var(--chip-physics) l c h / 0.14));
  background-clip: padding-box;
  font-weight: 800;
}
.nexus-premium-modal__status {
  padding: 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.nexus-premium-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: oklch(from var(--color-surface-2) l c h / 0.94);
  color: var(--color-text);
  font-size: 1.4rem;
  cursor: pointer;
}
.nexus-premium-modal__close:hover {
  background: oklch(from var(--color-primary) l c h / 0.14);
}
.nexus-premium-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nexus-premium-link__lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0.95;
}
.nexus-premium-link__lock svg {
  width: 100%;
  height: 100%;
}
.nexus-premium-link:hover .nexus-premium-link__lock,
.nexus-premium-link[aria-current="page"] .nexus-premium-link__lock {
  color: var(--color-text);
}
@media (max-width: 760px) {
  .nexus-tier-grid {
    grid-template-columns: 1fr;
  }
  .nexus-premium-modal__actions {
    grid-template-columns: 1fr;
  }
  .nexus-premium-lock__compare {
    grid-template-columns: 1fr;
  }
  .nexus-premium-lock__tier + .nexus-premium-lock__tier {
    border-left: 0;
    border-top: 1px solid var(--color-divider);
  }
  .nexus-premium-modal {
    padding: 0.75rem;
  }
  .nexus-premium-modal__topbar {
    padding-right: 2.6rem;
  }
  .nexus-premium-modal__account {
    width: 100%;
  }
  .nexus-premium-modal__close {
    top: var(--space-3);
    right: var(--space-3);
  }
}

/* Collapsible sections (lab, cards, quizzes, related, map) — Learn & Path stay open divs */
.topic-zone--collapsible {
  scroll-margin-top: var(--topic-scroll-margin);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  overflow: clip;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
}
.topic-zone--collapsible:not(.topic-zone--first) {
  margin-top: var(--space-10);
}
.topic-zone__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  background: linear-gradient(135deg, oklch(from var(--color-primary) l c h / 0.12), oklch(from var(--color-text) l c h / 0.04));
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.topic-zone__summary::-webkit-details-marker {
  display: none;
}
.topic-zone__summary::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-interactive);
  flex-shrink: 0;
  opacity: 0.75;
}
details.topic-zone--collapsible[open] > .topic-zone__summary::after {
  transform: rotate(-135deg);
  margin-top: 0.2em;
}
.topic-zone__collapsible-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
}
@media (prefers-reduced-motion: reduce) {
  .topic-zone__summary::after {
    transition: none;
  }
}

.topic-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.topic-toc__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  flex-shrink: 0;
}
.topic-toc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.topic-toc__chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: oklch(from var(--color-text) l c h / 0.055);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.12);
  box-shadow: inset 0 1px 0 oklch(from white l c h / 0.06);
  transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive);
}
.topic-toc__chip:hover {
  color: var(--color-text);
  background: oklch(from var(--color-primary) l c h / 0.12);
  border-color: oklch(from var(--color-primary) l c h / 0.28);
}
.topic-toc__chip[hidden] { display: none !important; }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, oklch(from var(--color-bg) l c h / 0.84), oklch(from var(--color-bg) l c h / 0.56)); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-divider);
}
.nav__logo { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; }
.nav__logo-icon { width: 28px; height: 28px; }
.nav__links { display: flex; align-items: center; gap: var(--space-6); list-style: none; }
.nav__links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--transition-interactive); }
.nav__links a:hover { color: var(--color-text); }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--color-border);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--color-text);
  background: linear-gradient(180deg, oklch(from var(--color-text) l c h / 0.08), oklch(from var(--color-text) l c h / 0.03));
  background-clip: padding-box;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), background var(--transition-interactive);
}
.btn:hover { transform: translateY(-1px); color: var(--color-text); border-color: oklch(from var(--color-primary) l c h / 0.35); background: oklch(from var(--color-primary) l c h / 0.12); background-clip: padding-box; }
.theme-toggle {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); color: var(--color-text-muted); border: none; background: none; cursor: pointer;
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface); }
@media (max-width: 768px) { .nav__links { display: none; } }

.topic-main {
  max-width: var(--content-narrow); margin-inline: auto;
  padding: calc(5rem + var(--space-10)) var(--page-pad-inline) var(--space-16);
}
.topic-main--split {
  max-width: min(var(--content-wide), 100%);
}
.topic-shell {
  display: grid;
  grid-template-columns: minmax(208px, 248px) minmax(0, 1fr);
  gap: clamp(1.5rem, 2vw, 2.75rem);
  align-items: start;
}
.topic-sidebar {
  grid-column: 1;
  position: sticky;
  top: calc(5rem + var(--space-3));
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding: var(--space-5);
  padding-bottom: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
[data-theme="light"] .topic-sidebar {
  background: #fffdf7;
  color: #1a2230;
  border-color: rgba(55, 68, 80, 0.12);
}
.topic-sidebar__topic {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.topic-sidebar__topic-link {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.topic-sidebar__topic-link:hover {
  color: var(--color-primary);
}
.topic-sidebar__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topic-sidebar__item--group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.topic-sidebar__group-label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  font-size: 0.68rem;
}
.topic-sidebar__sublist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-primary-highlight);
  margin-bottom: var(--space-2);
}
.topic-sidebar__link {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-xs);
  transition: background var(--transition-interactive), color var(--transition-interactive);
}
.topic-sidebar__link:hover {
  color: var(--color-text);
  background: var(--color-divider);
}
.topic-sidebar__link--active,
.topic-sidebar__link[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.topic-sidebar__link--sub {
  font-weight: 500;
  font-size: 0.82rem;
}
.topic-sidebar__tick {
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.85em;
  color: oklch(0.72 0.12 152);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
}
.topic-sidebar__tick--done {
  opacity: 1;
  transform: scale(1);
}
.topic-sidebar__tick--done::before {
  content: '✓';
  font-weight: 700;
}
.topic-content {
  grid-column: 2;
  min-width: 0;
  padding-bottom: var(--space-8);
}
.topic-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.24);
  background: oklch(from var(--color-primary) l c h / 0.1);
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-6);
}
.topic-learn-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.topic-learn-pager__pos {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.topic-learn-pager__btn {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--transition-interactive), color var(--transition-interactive), background var(--transition-interactive);
}
.topic-learn-pager__btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.topic-learn-pager__btn--primary {
  border-color: oklch(from var(--color-primary) l c h / 0.45);
  color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.1);
}
.topic-learn-pager__btn--primary:hover {
  background: oklch(from var(--color-primary) l c h / 0.2);
}
.topic-zone--page {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.topic-zone--lab {
  margin-top: var(--space-4);
}
.topic-summary--hub {
  margin-bottom: var(--space-4);
}
.topic-hub-cta a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}
.topic-hub-cta a:hover {
  border-bottom-color: var(--color-primary);
}
.topic-learning__warm-tip {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.topic-lesson-single {
  margin-top: var(--space-4);
}
.topic-learn-connection-slot {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.topic-connection-pick__group-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-text-muted);
}
.topic-connection-pick__group-title:first-of-type {
  margin-top: 0;
}
.topic-connection-pick__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .topic-connection-pick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.topic-connection-pick__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.topic-connection-pick__link {
  font-weight: 600;
  color: var(--color-text);
  flex: 1 1 auto;
  min-width: 0;
}
.topic-connection-pick__link:hover {
  color: var(--color-primary);
}
/* Keep lesson steps in a vertical left nav; do not turn them into a top chip row. */
@media (max-width: 900px) {
  .topic-shell {
    grid-template-columns: minmax(176px, 220px) minmax(0, 1fr);
    gap: var(--space-6);
  }
}
@media (max-width: 520px) {
  .topic-shell {
    grid-template-columns: 1fr;
  }
  .topic-sidebar {
    grid-column: 1;
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    border-right: none;
    padding-right: var(--space-5);
    border-bottom: 1px solid oklch(0.35 0.02 200);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
  }
  .topic-content {
    grid-column: 1;
  }
  /* Still a vertical list above the article — not horizontal chips */
  .topic-sidebar__list,
  .topic-sidebar__sublist {
    flex-direction: column;
  }
}
.section-label {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-primary); margin-bottom: var(--space-4);
}
.topic-field {
  display: inline-block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  margin-bottom: var(--space-4); border: 1px solid var(--color-border); background: oklch(from var(--color-text) l c h / 0.04);
}
.topic-field--foundation { color: var(--chip-foundation); border-color: oklch(from var(--chip-foundation) l c h / 0.4); }
.topic-field--math { color: var(--chip-math); border-color: oklch(from var(--chip-math) l c h / 0.35); }
.topic-field--physics { color: var(--chip-physics); border-color: oklch(from var(--chip-physics) l c h / 0.35); }
.topic-field--chemistry { color: var(--chip-chemistry); border-color: oklch(from var(--chip-chemistry) l c h / 0.35); }
.topic-field--biology { color: var(--chip-biology); border-color: oklch(from var(--chip-biology) l c h / 0.35); }
.topic-field--cs { color: var(--chip-cs); border-color: oklch(from var(--chip-cs) l c h / 0.35); }
.topic-field--bridge { color: var(--chip-bridge); border-color: oklch(from var(--chip-bridge) l c h / 0.38); }

.topic-main h1 {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.12; margin-bottom: var(--space-6);
}
.topic-summary {
  font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.8;
  margin-bottom: var(--space-8);
  max-width: 65ch;
}
.topic-summary p + p { margin-top: var(--space-6); }

.topic-section-title {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: var(--space-3); color: var(--color-text);
}
.topic-section-lead {
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); line-height: 1.65; max-width: 62ch;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Connection hub (top of page) --- */
.topic-hub {
  margin-bottom: var(--space-12);
  padding: var(--space-8);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
}
.topic-hub__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-8);
  max-width: 62ch;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.22);
  background: oklch(from var(--color-primary) l c h / 0.09);
}
.topic-hub__subhead {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.topic-hub__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.65;
  max-width: 62ch;
}
.topic-hub__empty {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
  line-height: 1.65;
}
.topic-hub-out,
.topic-hub-in {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.topic-hub-out {
  background: oklch(from var(--color-primary) l c h / 0.06);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.14);
  border-bottom: 1px solid var(--color-divider);
}
.topic-hub-in {
  background: oklch(from var(--color-text) l c h / 0.03);
}
@media (min-width: 900px) {
  .topic-hub__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-2);
  }
  .topic-hub__grid .topic-hub-out,
  .topic-hub__grid .topic-hub-in {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    padding-right: var(--space-6);
    border-right: 1px solid var(--color-divider);
  }
  .topic-hub__grid .topic-hub-in {
    padding-right: 0;
    border-right: none;
  }
}
@media (max-width: 899px) {
  .topic-hub-in {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.topic-hub-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.topic-hub-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.topic-hub-list__name {
  font-weight: 600;
  color: var(--color-text);
}
.topic-hub-list__link {
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}
.topic-hub-list__link:hover { border-color: var(--color-primary); }
.topic-hub-list__actions {
  flex-basis: 100%;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.topic-hub-list__actions a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.3);
}
.topic-hub-list__actions a:hover { border-color: var(--color-primary); }
.topic-hub-list__primed { font-weight: 700; }

.topic-zone--edge-bundles {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: oklch(from var(--color-primary) l c h / 0.04);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  max-width: 70ch;
}
.topic-zone--edge-bundles .topic-section-title {
  margin-top: 0;
  font-size: var(--text-lg);
}
.topic-edge-bundles__list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.topic-edge-bundles__link {
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}
.topic-edge-bundles__link:hover { border-color: var(--color-primary); }
.topic-edge-bundles__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
  margin-left: 0;
}
.topic-sidebar__topic-link--edge {
  font-weight: 600;
  color: var(--color-text);
  cursor: default;
  text-decoration: none;
}

.connect-page--nav-only {
  max-width: 52ch;
}
.connect-page--nav-only .lesson-progress {
  display: none;
}
.topic-connect-next {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-connect-next__item {
  margin: 0;
  padding: 0;
}
.topic-connect-next__link {
  display: block;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: oklch(from var(--color-primary) l c h / 0.05);
}
.topic-connect-next__link:hover {
  border-color: var(--color-primary);
}

.topic-connection-practice-root {
  margin-bottom: 0;
}
.topic-arrival-context {
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: oklch(from var(--color-primary) l c h / 0.06);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
  border-radius: var(--radius-md);
}
.topic-arrival-context__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 65ch;
  margin-bottom: var(--space-3);
}
.topic-arrival-context__lead a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}
.topic-arrival-context__badge { margin: 0; }
.topic-connection-practice {
  padding: var(--space-6) 0 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--color-divider);
  background: transparent;
}
.topic-arrival-context + .topic-connection-practice {
  border-top: none;
  padding-top: 0;
}
.topic-connection-practice--warn {
  border-color: oklch(from var(--chip-chemistry) l c h / 0.45);
  background: oklch(from var(--chip-chemistry) l c h / 0.06);
}
.topic-connection-practice__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.topic-connection-practice__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  max-width: 65ch;
}
.topic-connection-practice__lead a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}
.topic-connection-practice__tip {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.65;
  max-width: 62ch;
}
.topic-connection-practice__warn {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.topic-connection-practice__badge {
  margin-bottom: var(--space-4);
}
.topic-connection-practice__reference {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}
.topic-connection-practice__reference-sum {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.topic-connection-practice__reference-body {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}
.topic-connection-practice__reference-body p + p { margin-top: var(--space-3); }

.topic-connection-ex {
  margin-bottom: 0;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-divider);
}
.topic-connection-ex:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
article.topic-connection-ex:has(+ .topic-connection-critical) {
  border-bottom: none;
  padding-bottom: var(--space-2);
}
.topic-connection-critical {
  margin-top: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.topic-connection-ex__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.topic-connection-ex__mc,
.topic-connection-ex__tf {
  border: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-connection-ex__choice {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  line-height: 1.45;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--transition-interactive), border-color var(--transition-interactive);
}
.topic-connection-ex__choice:hover {
  background: oklch(from var(--color-text) l c h / 0.04);
  border-color: var(--color-divider);
}
.topic-connection-ex__choice input { margin-top: 0.2rem; flex-shrink: 0; }
.topic-connection-ex__tf {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --- Connection lesson: Path studio (pedagogy + local map + games; all topics) --- */
.topic-connection-lab {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-text) l c h / 0.03);
}
.topic-connection-lab__studio-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.topic-connection-lab__pedagogy {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
  background: oklch(from var(--color-primary) l c h / 0.05);
}
.topic-connection-lab__pedagogy-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.35rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 72ch;
}
.topic-connection-lab__pedagogy-list li + li {
  margin-top: var(--space-2);
}
.topic-connection-lab__panel-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.topic-connection-lab__panel-title--sub {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.topic-connection-lab__panel-caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.65;
  max-width: 68ch;
  margin: 0 0 var(--space-3);
}
.topic-connection-lab__neighborhood {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.topic-connection-lab__neo-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-2) 0 0;
  padding-bottom: var(--space-2);
}
.topic-connection-lab__neo-svg {
  display: block;
  min-width: 440px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}
.topic-connection-lab__neo-edge {
  stroke: oklch(from var(--color-text) l c h / 0.12);
  stroke-width: 1.5;
}
.topic-connection-lab__neo-edge--active {
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
}
.topic-connection-lab--prereq .topic-connection-lab__neo-edge--active {
  stroke: oklch(from var(--color-primary) l c h / 0.85);
}
.topic-connection-lab--bridge .topic-connection-lab__neo-edge--active {
  stroke: oklch(from var(--chip-chemistry) l c h / 0.75);
  stroke-dasharray: 7 5;
}
.topic-connection-lab__neo-arrowhead {
  fill: oklch(from var(--color-primary) l c h / 0.75);
}
.topic-connection-lab--bridge .topic-connection-lab__neo-arrowhead {
  fill: oklch(from var(--chip-chemistry) l c h / 0.7);
}
.topic-connection-lab__neo-disc {
  fill: var(--color-surface);
  stroke-width: 2;
}
.topic-connection-lab__neo-disc--foundation {
  stroke: var(--chip-foundation);
}
.topic-connection-lab__neo-disc--math {
  stroke: var(--chip-math);
}
.topic-connection-lab__neo-disc--physics {
  stroke: var(--chip-physics);
}
.topic-connection-lab__neo-disc--chemistry {
  stroke: var(--chip-chemistry);
}
.topic-connection-lab__neo-disc--biology {
  stroke: var(--chip-biology);
}
.topic-connection-lab__neo-disc--cs {
  stroke: var(--chip-cs);
}
.topic-connection-lab__neo-disc--bridge {
  stroke: var(--chip-bridge);
}
.topic-connection-lab__neo-node--page .topic-connection-lab__neo-disc {
  stroke-width: 3;
  filter: drop-shadow(0 0 6px oklch(from var(--color-primary) l c h / 0.35));
}
.topic-connection-lab__neo-node--tail .topic-connection-lab__neo-disc {
  stroke-dasharray: 4 3;
}
.topic-connection-lab__neo-node--head .topic-connection-lab__neo-disc {
  stroke-width: 2.5;
}
.topic-connection-lab__neo-label {
  font-family: var(--font-body);
  font-size: 9px;
  fill: var(--color-text-muted);
  pointer-events: none;
}
.topic-connection-lab__checks {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed oklch(from var(--color-divider) l c h / 0.9);
}
.topic-connection-lab__checks-lead {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0 0 var(--space-4);
  font-style: italic;
}
.topic-connection-lab__mini-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
  max-width: 65ch;
}
.topic-connection-lab__mini-fieldset {
  border: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-connection-lab__mini-fb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-5);
  min-height: 1.2em;
}
.topic-connection-lab__intro,
.topic-connection-lab__step {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 68ch;
  margin: 0 0 var(--space-3);
}
.topic-connection-lab__step {
  font-weight: 600;
  color: var(--color-text);
}
.topic-connection-lab__canvas {
  max-width: 460px;
  margin: var(--space-4) auto var(--space-3);
}
.topic-connection-lab__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.topic-connection-lab__edge--base {
  fill: none;
  stroke: oklch(from var(--color-text) l c h / 0.22);
  stroke-width: 3;
  stroke-linecap: round;
}
.topic-connection-lab--prereq .topic-connection-lab__edge--base {
  stroke: oklch(from var(--color-primary) l c h / 0.55);
  stroke-width: 3.5;
}
.topic-connection-lab--bridge .topic-connection-lab__edge--base {
  stroke: oklch(from var(--color-text) l c h / 0.4);
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
}
.topic-connection-lab__edge--energy {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.85;
  stroke-dasharray: 10 140;
  stroke-dashoffset: 0;
  pointer-events: none;
}
.topic-connection-lab--bridge .topic-connection-lab__edge--energy {
  stroke: oklch(from var(--chip-chemistry) l c h / 0.9);
  opacity: 0.75;
}
.topic-connection-lab--prereq .topic-connection-lab__edge--energy {
  animation: topic-conn-energy 2.2s ease-in-out infinite;
}
.topic-connection-lab--bridge .topic-connection-lab__edge--energy {
  animation: topic-conn-energy 2.8s ease-in-out infinite;
}
.topic-connection-lab__arrowhead {
  fill: oklch(from var(--color-text) l c h / 0.45);
}
.topic-connection-lab--prereq .topic-connection-lab__arrowhead {
  fill: oklch(from var(--color-primary) l c h / 0.75);
}
.topic-connection-lab--bridge .topic-connection-lab__arrowhead {
  fill: oklch(from var(--chip-chemistry) l c h / 0.65);
}
.topic-connection-lab__disc {
  fill: var(--color-surface);
  stroke: oklch(from var(--color-text) l c h / 0.35);
  stroke-width: 2.5;
  transition: stroke var(--transition-interactive), filter var(--transition-interactive);
}
.topic-connection-lab__node {
  cursor: pointer;
  outline: none;
}
.topic-connection-lab__node:focus-visible .topic-connection-lab__disc {
  stroke: var(--color-primary);
  stroke-width: 3;
}
.topic-connection-lab__node:hover .topic-connection-lab__disc {
  filter: brightness(1.03);
  stroke: oklch(from var(--color-primary) l c h / 0.5);
}
.topic-connection-lab__node--current .topic-connection-lab__disc {
  stroke: var(--color-primary);
  stroke-width: 3.5;
  fill: oklch(from var(--color-primary) l c h / 0.12);
}
.topic-connection-lab__node--tail .topic-connection-lab__disc {
  stroke: oklch(from var(--color-primary) l c h / 0.85);
  stroke-width: 3;
  stroke-dasharray: 4 3;
}
.topic-connection-lab__node--current.topic-connection-lab__node--tail .topic-connection-lab__disc {
  stroke-dasharray: none;
}
.topic-connection-lab__nodetext {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  fill: var(--color-text);
  pointer-events: none;
}

@media (max-width: 480px) {
  .topic-connection-lab__neo-svg {
    min-width: 400px;
  }
}
.topic-connection-lab__packet {
  fill: var(--color-primary);
  filter: drop-shadow(0 0 4px oklch(from var(--color-primary) l c h / 0.5));
}
.topic-connection-lab--bridge .topic-connection-lab__packet {
  fill: oklch(from var(--chip-chemistry) l c h / 0.85);
}
.topic-connection-lab__legend {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--space-2);
  line-height: 1.6;
}
.topic-connection-lab__legend .topic-tag {
  margin-right: var(--space-2);
  vertical-align: middle;
}
.topic-connection-lab__feedback {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
  min-height: 1.25em;
}
.topic-connection-lab__replay {
  margin-top: var(--space-3);
}
.topic-connection-lab--complete {
  border-color: oklch(from var(--color-primary) l c h / 0.35);
  background: oklch(from var(--color-primary) l c h / 0.05);
}
.topic-connection-lab--shake {
  animation: topic-conn-shake 0.38s ease;
}
.topic-connection-lab--pulse-static .topic-connection-lab__edge--base {
  animation: topic-conn-pulse-edge 0.55s ease;
}

@keyframes topic-conn-energy {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -150;
  }
}

@keyframes topic-conn-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes topic-conn-pulse-edge {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-connection-lab--shake {
    animation: none;
  }
  .topic-connection-lab--prereq .topic-connection-lab__edge--energy,
  .topic-connection-lab--bridge .topic-connection-lab__edge--energy {
    animation: none;
    opacity: 0.35;
  }
}

.topic-modal__body .topic-connection-lab {
  margin-top: 0;
  padding: var(--space-4);
}

/* --- Practice more (topic + cross-edge MCQ) --- */
.topic-practice-more {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.topic-practice-more__subhead {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: var(--space-10) 0 var(--space-4);
  color: var(--color-text);
}
.topic-practice-more__subhead:first-of-type {
  margin-top: 0;
}
.topic-practice-more__relation-lead,
.topic-practice-more__miss {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 65ch;
}
.topic-practice-more__topic-actions,
.topic-lesson-quiz-bank__actions {
  margin: 0 0 var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.topic-practice-more__block {
  margin-bottom: var(--space-4);
}
.topic-practice-more__block--relation {
  padding-top: var(--space-6);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.topic-practice-more__item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid oklch(from var(--color-divider) l c h / 0.85);
}
.topic-practice-more__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.topic-practice-more__prompt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
.topic-practice-more__choices {
  border: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-practice-more__choice {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  line-height: 1.45;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--transition-interactive), border-color var(--transition-interactive);
}
.topic-practice-more__choice:hover {
  background: oklch(from var(--color-text) l c h / 0.04);
  border-color: var(--color-divider);
}
.topic-practice-more__choice input {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.topic-practice-more__choice--correct {
  border-color: var(--lab-success);
  background: var(--lab-success-bg);
  color: var(--color-text);
}
.topic-practice-more__choice--wrong {
  border-color: var(--lab-error);
  background: var(--lab-error-bg);
  color: var(--color-text);
}
.topic-practice-more__response {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
}
.topic-practice-more__entry {
  flex: 1 1 14rem;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.topic-practice-more__entry:focus {
  outline: none;
  border-color: oklch(from var(--color-primary) l c h / 0.55);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.12);
}
.topic-practice-more__entry--correct {
  border-color: var(--lab-success);
  background: var(--lab-success-bg);
}
.topic-practice-more__entry--wrong {
  border-color: var(--lab-error);
  background: var(--lab-error-bg);
}
.topic-practice-more__note {
  margin: calc(var(--space-3) * -0.5) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.topic-practice-more__feedback {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: oklch(from var(--color-primary) l c h / 0.06);
  margin-top: var(--space-2);
}

/* --- Flashcards (topic + connection) --- */
.topic-flashcards-bundle {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.topic-flashcards-bundle--edge {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
#topic-flashcards-topic-mount:empty + #topic-flashcards-edge-mount .topic-flashcards-bundle--edge {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.topic-flashcards__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .topic-flashcards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .topic-flashcards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.topic-flashcard-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.topic-flashcard {
  width: 100%;
  min-height: 7.5rem;
  padding: var(--space-4);
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-bg) l c h / 0.7);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
  position: relative;
}
.topic-flashcard:hover {
  border-color: oklch(from var(--color-primary) l c h / 0.45);
  background: oklch(from var(--color-primary) l c h / 0.06);
}
.topic-flashcard:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.topic-flashcard__face {
  display: block;
}
.topic-flashcard__face--front {
  font-weight: 600;
  color: var(--color-text);
}
.topic-flashcard__face--back {
  display: none;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-divider);
  font-weight: 400;
  color: var(--color-text-muted);
}
.topic-flashcard--open .topic-flashcard__face--front {
  display: none;
}
.topic-flashcard--open .topic-flashcard__face--back {
  display: block;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.topic-flashcard__hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding-left: var(--space-1);
}
.topic-flashcards__subhead {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: var(--space-8) 0 var(--space-4);
  color: var(--color-text);
}
.topic-flashcards .topic-flashcards__grid + .topic-flashcards__subhead {
  margin-top: var(--space-10);
}
.topic-flashcards__thinking-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.topic-flashcards__thinking-item {
  margin-bottom: var(--space-5);
}
.topic-flashcards__thinking-q {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.topic-flashcards__thinking-details {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
}
.topic-flashcards__thinking-sum {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-primary);
}
.topic-flashcards__thinking-ans {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}
.topic-flashcards__miss {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 62ch;
}

.flash-study {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.flash-overview,
.flash-controls,
.flash-deck {
  width: 100%;
}
.flash-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .flash-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1120px) {
  .flash-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.flash-overview-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-height: 5.5rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive);
}
.flash-overview-card:hover,
.flash-overview-card--active {
  border-color: oklch(from var(--color-primary) l c h / 0.55);
  background: oklch(from var(--color-primary) l c h / 0.07);
}
.flash-overview-card:hover {
  transform: translateY(-1px);
}
.flash-overview-card:focus-visible,
.flash-select:focus-visible,
.flash-filter-chip input:focus-visible + .flash-filter-chip__text,
.flash-save:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.flash-overview-card__title {
  font-weight: 700;
  line-height: 1.35;
}
.flash-overview-card__meta,
.flash-deck__meta,
.flash-card-shell__meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.flash-controls {
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  background: oklch(from var(--color-bg) l c h / 0.66);
}
.flash-controls__title {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-base);
}
.flash-controls__top,
.flash-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}
.flash-controls__top {
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.flash-select-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: min(100%, 18rem);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.flash-select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.flash-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .flash-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.flash-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.flash-filter-group__legend {
  width: 100%;
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.flash-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 2.15rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.2;
  cursor: pointer;
}
.flash-filter-chip input {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
}
.flash-filter-chip__text {
  overflow-wrap: anywhere;
}
.flash-deck__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.flash-deck__meta {
  margin: var(--space-1) 0 0;
}
.flash-deck__grid {
  align-items: stretch;
}
.flash-card-shell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}
.flash-card-shell__meta {
  min-height: 1.15rem;
  overflow-wrap: anywhere;
}
.flash-card-shell__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.flash-save {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}
.flash-save[aria-pressed="true"] {
  border-color: oklch(from var(--color-primary) l c h / 0.45);
  background: oklch(from var(--color-primary) l c h / 0.1);
  color: var(--color-text);
}
.flash-study-card,
.flash-card-shell .topic-flashcard {
  min-height: 12rem;
  padding: 0;
  perspective: none;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.flash-card-shell .topic-flashcard__face,
.flash-card-shell .topic-flashcard--open .topic-flashcard__face--front,
.flash-card-shell .topic-flashcard--open .topic-flashcard__face--back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border: 0;
  margin: 0;
  backface-visibility: hidden;
  overflow: auto;
}
.flash-card-shell .topic-flashcard__face--front {
  color: var(--color-text);
  font-weight: 700;
}
.flash-card-shell .topic-flashcard__face--back {
  transform: rotateY(180deg);
  color: var(--color-text-muted);
  font-weight: 500;
}
.flash-card-shell .topic-flashcard--open {
  transform: rotateY(180deg) !important;
}
.flash-card-shell .topic-flashcard:hover {
  box-shadow: 0 12px 30px oklch(0 0 0 / 0.16);
}

.topic-next {
  margin-bottom: var(--space-12);
  padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.topic-next-list {
  list-style: none; display: flex; flex-direction: column; gap: var(--space-3);
}
.topic-next-list a {
  color: var(--color-primary); font-weight: 600; font-size: var(--text-sm);
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
  display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.topic-next-list a:hover { border-color: var(--color-primary); }
.topic-tag {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  color: var(--color-text-faint); font-weight: 500;
}
.topic-tag--prereq { color: var(--color-text-muted); border-color: var(--color-divider); }
.topic-tag--bridge { color: var(--color-primary); border-color: oklch(from var(--color-primary) l c h / 0.35); }

.topic-relations { margin-bottom: var(--space-12); }
.topic-relation {
  margin-bottom: var(--space-10); padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-divider);
}
.topic-relation:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.topic-relation__title {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  margin-bottom: var(--space-2); line-height: 1.35; color: var(--color-text);
}
.topic-relation__title a { color: var(--color-primary); border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35); }
.topic-relation__title a:hover { border-color: var(--color-primary); }
.topic-relation__subtitle {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-faint); margin-bottom: var(--space-4);
}
.topic-relation__body {
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8;
}
.topic-relation__body p + p { margin-top: var(--space-4); }

.topic-relations__empty {
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75; max-width: 58ch;
  margin-top: var(--space-2);
}
.topic-relations__empty code { font-family: var(--font-mono); font-size: 0.88em; color: var(--color-text-faint); }
.topic-relations__empty--warn {
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-accent-amber);
  padding-left: var(--space-4); margin-top: var(--space-2);
}

.topic-meta {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint);
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.topic-meta code { font-size: 0.95em; }
.topic-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  padding-top: var(--space-8); border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm); font-weight: 500;
}
.topic-nav a { color: var(--color-primary); border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35); }
.topic-nav a:hover { border-color: var(--color-primary); }

.footer {
  padding: var(--space-8) var(--page-pad-inline); border-top: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
  max-width: min(var(--content-wide), 100%); margin-inline: auto;
}
.footer__copy { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__links { display: flex; gap: var(--space-5); }
.footer__links a { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__links a:hover { color: var(--color-text-muted); }

/* --- Evidence-based learning blocks --- */
.topic-learning {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.topic-learning__subhead {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: var(--space-10) 0 var(--space-4);
  color: var(--color-text);
}
.topic-learning__subhead:first-of-type { margin-top: 0; }
.topic-learning__objectives {
  margin: 0 0 var(--space-6);
  padding-left: 1.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.75;
}
.topic-learning__objectives li + li { margin-top: var(--space-2); }

.topic-learning__figure {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.topic-learning__figure-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.topic-learning__svg-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.topic-learning__svg-wrap svg {
  display: block;
  width: 100%;
  max-height: 220px;
  color: var(--color-text-muted);
}
.topic-learning__figure-caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
  line-height: 1.6;
}

.topic-learning__aside {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-4);
  border-left: 3px solid var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.08);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-6) 0;
  line-height: 1.65;
}
.topic-learning__aside--closure {
  border-left-color: var(--chip-biology);
  background: oklch(from var(--chip-biology) l c h / 0.08);
  margin-top: var(--space-6);
}
.topic-learning__interleave {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.topic-learning__interleave a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}
.topic-learning__interleave a:hover { border-color: var(--color-primary); }

/* Multi-step lesson track (one panel at a time) */
.topic-lesson-track {
  margin-top: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: clip;
}
.topic-lesson-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  background: oklch(from var(--color-text) l c h / 0.03);
}
.topic-lesson-rail__btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-interactive), border-color var(--transition-interactive), background var(--transition-interactive);
  max-width: 100%;
}
.topic-lesson-rail__btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-faint);
}
.topic-lesson-rail__btn--active {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.topic-lesson-rail__btn--active:hover {
  color: var(--color-bg);
  border-color: var(--color-primary);
}
.topic-lesson-panels {
  position: relative;
  min-height: 12rem;
}
.topic-lesson-panel {
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.topic-lesson-panel[hidden] {
  display: none !important;
}
.topic-lesson-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}
.topic-lesson-panel__body > *:first-child.topic-learning__subhead {
  margin-top: 0;
}
.topic-lesson-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-divider);
  background: oklch(from var(--color-text) l c h / 0.02);
}
.topic-lesson-nav__progress {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  flex: 1;
  text-align: center;
  min-width: 8rem;
}
.topic-lesson-nav__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 520px) {
  .topic-lesson-rail__btn {
    flex: 1 1 100%;
  }
}

.topic-lesson {
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 0 var(--space-5);
  background: var(--color-surface);
}
.topic-lesson[open] {
  border-color: oklch(from var(--color-primary) l c h / 0.22);
  box-shadow: 0 1px 0 oklch(from var(--color-primary) l c h / 0.08);
}
.topic-lesson__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
  list-style: none;
  color: var(--color-text);
}
.topic-lesson__summary::-webkit-details-marker { display: none; }
.topic-lesson__summary::before {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
  margin-right: var(--space-3);
  vertical-align: middle;
  transition: transform var(--transition-interactive);
}
.topic-lesson[open] .topic-lesson__summary::before { transform: rotate(45deg); }

.topic-phase {
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-left: 4px solid var(--callout-teal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: oklch(from var(--callout-teal) l c h / 0.04);
  margin-top: var(--space-4);
  transition: background 0.25s ease;
}
.topic-phase__label {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: oklch(from var(--callout-teal) l c h / 0.1);
  color: var(--callout-teal);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
  width: fit-content;
}
.topic-phase__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}
.topic-phase__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: oklch(from var(--color-text) l c h / 0.06);
}

/* ── KaTeX rendered math ── */
.katex-rendered {
  font-size: 1.05em;
}
.katex-rendered .katex {
  font-size: 1em;
}
.lesson-section__phase-body .katex-rendered,
.topic-phase__body .katex-rendered,
.topic-solution-stack .katex-rendered,
.worked-example .katex-rendered {
  display: inline;
  vertical-align: baseline;
}
/* Display math blocks */
.katex-display {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  background: oklch(from oklch(0.55 0.12 250) l c h / 0.06);
  border-left: 4px solid oklch(0.55 0.12 250);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  overflow-x: auto;
}
.katex-display > .katex {
  text-align: left;
}
.topic-lesson__visual {
  margin: var(--space-4) 0;
  overflow-x: auto;
}
.topic-lesson__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.topic-lesson__table th,
.topic-lesson__table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  vertical-align: top;
  text-align: left;
}
.topic-lesson__table th {
  color: var(--color-text);
  background: oklch(from var(--color-primary) l c h / 0.1);
}
.lesson-animation {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid oklch(from var(--callout-teal) l c h / 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, oklch(from var(--callout-teal) l c h / 0.06), oklch(from var(--color-text) l c h / 0.025));
  color: var(--color-text);
  transition: border-color 0.25s ease;
}
.lesson-animation__svg {
  display: block;
  width: 100%;
  max-width: 34rem;
  min-height: 10rem;
  margin-inline: auto;
}
.lesson-animation__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.lesson-animation [data-anim] {
  transform-box: fill-box;
  transform-origin: center;
}
/*
 * Motion is disabled site-wide. The SVG markup is preserved so lessons render
 * as clean static schematics; moving dashed, drawn, and faded lines were adding
 * visual noise without improving the underlying explanation.
 */
.lesson-animation [data-anim] {
  animation: none !important;
}
.lesson-animation [data-delay="1"] { animation-delay: 0.25s; }
.lesson-animation [data-delay="2"] { animation-delay: 0.5s; }
.lesson-animation [data-delay="3"] { animation-delay: 0.75s; }
@keyframes lesson-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes lesson-slide-x {
  0% { opacity: 0.15; transform: translateX(-24px); }
  35%, 65% { opacity: 1; }
  100% { opacity: 0.15; transform: translateX(24px); }
}
@keyframes lesson-slide-y {
  0% { opacity: 0.15; transform: translateY(-18px); }
  35%, 65% { opacity: 1; }
  100% { opacity: 0.15; transform: translateY(18px); }
}
@keyframes lesson-dash {
  to { stroke-dashoffset: -36; }
}
@keyframes lesson-draw {
  0%, 100% { opacity: 0.2; stroke-dashoffset: 42; }
  50% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes lesson-rotate {
  to { transform: rotate(360deg); }
}
@keyframes lesson-swing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes lesson-fade {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-animation [data-anim] {
    animation: none !important;
  }
}
.topic-lesson__h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-2);
  letter-spacing: -0.01em;
}
.topic-lesson__h4:first-child { margin-top: 0; }
.topic-lesson__analogy {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  border-left: 4px solid var(--callout-purple);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.78;
  background: oklch(from var(--callout-purple) l c h / 0.06);
  transition: background 0.25s ease;
}
.topic-lesson__analogy strong {
  color: var(--color-text);
}
.topic-lesson__funfact {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  border-left: 4px solid var(--callout-green);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.78;
  background: oklch(from var(--callout-green) l c h / 0.06);
  transition: background 0.25s ease;
}
.topic-lesson__funfact strong {
  color: var(--color-text);
}
.topic-lesson__funfact p {
  margin: 0;
}
.topic-lesson__funfact p + p {
  margin-top: var(--space-2);
}
.topic-lesson__steps {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 1.35rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: var(--text-sm);
}
.topic-lesson__steps li + li {
  margin-top: var(--space-3);
}
.topic-lesson__steps strong {
  color: var(--color-text);
}

.topic-learning__lesson-parts-hint {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  line-height: 1.6;
}
.topic-learning__ct-lead {
  margin-bottom: var(--space-5);
}

.topic-critical {
  margin: 0 0 var(--space-8);
  padding-left: var(--space-5);
  list-style: decimal;
}
.topic-critical__item {
  margin-bottom: var(--space-6);
  padding-left: var(--space-2);
}
.topic-critical__prompt {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.topic-critical__reveal-row {
  margin-top: var(--space-3);
}
.topic-critical__answer {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-left: 4px solid var(--callout-purple);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: oklch(from var(--callout-purple) l c h / 0.05);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 72ch;
}
.topic-critical__answer strong {
  color: var(--color-text);
}
.topic-critical__area {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  min-height: 5rem;
}

.topic-connection-critical__title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.topic-connection-critical__lead {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.topic-connection-critical__list {
  margin: 0;
  padding-left: var(--space-5);
  list-style: decimal;
}
.topic-connection-critical__item {
  margin-bottom: var(--space-5);
  padding-left: var(--space-2);
}
.topic-connection-critical__prompt {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: var(--space-2);
}
.topic-connection-critical__area {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  min-height: 4.5rem;
}

.topic-check {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--callout-teal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: oklch(from var(--callout-teal) l c h / 0.04);
  transition: background 0.25s ease;
}
.topic-check__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.topic-check__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  color: var(--color-text-faint);
}
.topic-check__confidence-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.topic-check__confidence {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}
.topic-check__prompt {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}
.topic-check__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.topic-check__btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}
.topic-check__btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.topic-check__btn--primary {
  border-color: oklch(from var(--color-primary) l c h / 0.5);
  color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.1);
}
.topic-check__btn--primary:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.topic-check__hint,
.topic-check__answer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-top: var(--space-2);
}
.topic-check__answer { color: var(--color-text); }

.lesson-page,
.practice-page,
.overview-page,
.connect-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.lesson-progress {
  position: sticky;
  top: calc(var(--topic-scroll-margin) - var(--space-3));
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, oklch(from var(--color-surface-2) l c h / 0.96), oklch(from var(--color-surface) l c h / 0.98));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
}

.lesson-progress__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.lesson-progress__steps {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.lesson-progress__step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-bg) l c h / 0.78);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  transition: color var(--transition-interactive), border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive);
  white-space: nowrap;
}

.lesson-progress__step:hover {
  color: var(--color-text);
  border-color: var(--color-text-faint);
  transform: translateY(-1px);
}

.lesson-progress__step--active {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px oklch(from var(--color-primary) l c h / 0.3);
}

.lesson-progress__step--done {
  border-color: oklch(from var(--color-primary) l c h / 0.4);
  background: oklch(from var(--color-primary) l c h / 0.12);
  color: var(--color-text);
}

.lesson-hook,
.lesson-section,
.lesson-recap,
.lesson-optional,
.overview-hook,
.overview-section,
.overview-recap,
.connect-hook,
.connect-section,
.connect-recap,
.practice-hook,
.practice-section,
.practice-recap {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, oklch(from var(--color-surface-2) l c h / 0.96), oklch(from var(--color-surface) l c h / 0.98));
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.lesson-hook,
.lesson-section,
.lesson-recap,
.overview-hook,
.overview-section,
.overview-recap,
.connect-hook,
.connect-section,
.connect-recap,
.practice-hook,
.practice-section,
.practice-recap {
  padding: var(--space-6);
}

.lesson-hook,
.overview-hook,
.connect-hook,
.practice-hook {
  position: relative;
  overflow: hidden;
}

.lesson-hook::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--callout-teal), var(--callout-green));
  opacity: 0.9;
}

.overview-hook::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--callout-purple), var(--callout-teal));
  opacity: 0.9;
}

.connect-hook::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--callout-orange), var(--callout-teal));
  opacity: 0.9;
}

.practice-hook::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--callout-green), var(--callout-teal));
  opacity: 0.9;
}

.hook-text,
.practice-hook__text {
  max-width: 68ch;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.85;
  font-style: italic;
  opacity: 0.92;
}

.lesson-section,
.overview-section,
.connect-section,
.practice-section {
  scroll-margin-top: calc(var(--topic-scroll-margin) + var(--space-6));
}

.connect-section > .topic-connection-practice {
  padding-top: 0;
  border-top: none;
}

.connect-section .topic-connection-practice__title {
  margin-top: 0;
}

.connect-section .topic-arrival-context {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.section-headline,
.recap-heading,
.practice-heading {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 0.9vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.practice-section__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.practice-section__lead,
.practice-note__body {
  margin-top: var(--space-3);
  max-width: 72ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.practice-section__grid,
.practice-recap__grid {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.practice-note {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-bg) l c h / 0.5);
}

.practice-note__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}

.practice-note__list {
  margin-top: var(--space-3);
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.practice-note__link {
  color: var(--color-primary);
  font-weight: 600;
}

.practice-note__link:hover {
  color: var(--color-text);
}

.practice-section .topic-critical,
.practice-section .topic-quiz {
  margin-top: var(--space-4);
}

.practice-section .topic-critical {
  margin-bottom: 0;
}

.section-explanation {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.lesson-section__phase + .lesson-section__phase {
  margin-top: var(--space-5);
}

.lesson-section__phase {
  --phase-accent: var(--callout-teal);
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--phase-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: oklch(from var(--phase-accent) l c h / 0.05);
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* Color-coded phase accents by phase key */
/* Teal: core teaching — orient, explain, warm, bridge */
.lesson-section__phase[data-phase-key="orient"],
.lesson-section__phase[data-phase-key="explain"],
.lesson-section__phase[data-phase-key="warm"],
.lesson-section__phase[data-phase-key="bridge"] {
  --phase-accent: var(--callout-teal);
}
/* Green: practice — guided, worked, apply, independent, game, practice, visualization */
.lesson-section__phase[data-phase-key="guided"],
.lesson-section__phase[data-phase-key="worked"],
.lesson-section__phase[data-phase-key="apply"],
.lesson-section__phase[data-phase-key="independent"],
.lesson-section__phase[data-phase-key="game"],
.lesson-section__phase[data-phase-key="practice"],
.lesson-section__phase[data-phase-key="visualization"] {
  --phase-accent: var(--callout-green);
}
/* Orange: caution/connection — misconception, mistake, example, real-world, context */
.lesson-section__phase[data-phase-key="misconception"],
.lesson-section__phase[data-phase-key="mistake"],
.lesson-section__phase[data-phase-key="example"],
.lesson-section__phase[data-phase-key="context"] {
  --phase-accent: var(--callout-orange);
}
/* Purple: deeper thinking — deepen, extend, bridge_gap, beginner_questions, closure, synth, carry, prep */
.lesson-section__phase[data-phase-key="deepen"],
.lesson-section__phase[data-phase-key="extend"],
.lesson-section__phase[data-phase-key="bridge_gap"],
.lesson-section__phase[data-phase-key="beginner_questions"],
.lesson-section__phase[data-phase-key="closure"],
.lesson-section__phase[data-phase-key="synth"],
.lesson-section__phase[data-phase-key="carry"],
.lesson-section__phase[data-phase-key="prep"] {
  --phase-accent: var(--callout-purple);
}

.lesson-section__phase-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phase-accent);
  margin-bottom: var(--space-3);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: oklch(from var(--phase-accent) l c h / 0.1);
  width: fit-content;
}

.lesson-section__phase-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.82;
}

.lesson-section__phase-body p + p,
.worked-example__body + .worked-example__body {
  margin-top: var(--space-3);
}

.worked-example {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--callout-green);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: oklch(from var(--callout-green) l c h / 0.06);
  transition: background 0.25s ease;
}

.example-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: oklch(from var(--callout-green) l c h / 0.12);
  color: var(--callout-green);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.worked-example__body {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.75;
}

.topic-solution-stack {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-left: 4px solid var(--callout-teal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: oklch(from var(--callout-teal) l c h / 0.04);
  transition: background 0.25s ease;
}

.topic-solution-stack + .topic-solution-stack {
  margin-top: var(--space-3);
}

.topic-solution-stack__problem {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.topic-solution-stack__lines {
  margin-top: var(--space-3);
  padding-left: 1.35rem;
  display: grid;
  gap: var(--space-3);
}

.topic-solution-stack__step {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.14);
  background: oklch(from var(--color-surface) l c h / 0.9);
}

.topic-solution-stack__equation {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.7;
}

.topic-solution-stack__equation .katex-rendered,
.topic-solution-stack__equation .katex-rendered .katex {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-weight: 400;
  vertical-align: middle;
}

.topic-solution-stack__equation .katex-html > .base {
  display: inline;
  white-space: nowrap;
}

.topic-solution-stack__reason {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.topic-solution-stack__mistake {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.topic-step-sequence {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.24);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, oklch(from var(--chip-math) l c h / 0.08), oklch(from var(--color-surface) l c h / 0.94));
}

.topic-step-sequence__prompt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.7;
}

.topic-step-sequence__tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.topic-step-sequence__chip {
  appearance: none;
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-bg) l c h / 0.84);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 0.65rem 0.95rem;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.55;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.topic-step-sequence__chip:hover,
.topic-step-sequence__chip:focus-visible {
  transform: translateY(-1px);
  border-color: oklch(from var(--color-primary) l c h / 0.4);
  background: oklch(from var(--color-primary) l c h / 0.1);
}

.topic-step-sequence__chip--used,
.topic-step-sequence__chip:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  background: oklch(from var(--color-surface) l c h / 0.8);
}

.topic-step-sequence__slots {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-left: 1.35rem;
}

.topic-step-sequence__slot {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  background: oklch(from var(--color-bg) l c h / 0.54);
}

.topic-step-sequence__slot--filled {
  border-style: solid;
}

.topic-step-sequence__slot--correct {
  border-color: oklch(from var(--color-success, var(--color-primary)) l c h / 0.38);
  background: oklch(from var(--color-primary) l c h / 0.08);
}

.topic-step-sequence__slot--wrong {
  border-color: oklch(from var(--color-danger, var(--chip-chemistry)) l c h / 0.38);
  background: oklch(from var(--chip-chemistry) l c h / 0.08);
}

.topic-step-sequence__slot-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.topic-step-sequence__slot-value {
  margin-top: var(--space-2);
  min-height: 1.5em;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.7;
}

.topic-step-sequence__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.topic-step-sequence__feedback {
  margin-top: var(--space-3);
  min-height: 1.4em;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
}

.topic-step-sequence__feedback--correct {
  color: oklch(from var(--color-primary) l c h / 0.9);
}

.topic-step-sequence__feedback--wrong {
  color: var(--color-text-muted);
}

.topic-expression-builder,
.topic-decision-path,
.topic-coordinate-pick,
.topic-square-builder,
.topic-number-line-builder,
.topic-model-pipeline {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.22);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, oklch(from var(--color-surface-2) l c h / 0.95), oklch(from var(--color-surface) l c h / 0.92));
}

.topic-expression-builder__prompt,
.topic-decision-path__prompt,
.topic-coordinate-pick__prompt,
.topic-square-builder__prompt,
.topic-number-line-builder__prompt,
.topic-model-pipeline__prompt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.7;
}

.topic-expression-builder__equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.topic-expression-builder__paren,
.topic-expression-builder__operator {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
}

.topic-expression-builder__slot {
  appearance: none;
  min-width: 10rem;
  min-height: 3.2rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  background: oklch(from var(--color-bg) l c h / 0.58);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.topic-expression-builder__slot--active {
  border-color: oklch(from var(--color-primary) l c h / 0.44);
  background: oklch(from var(--color-primary) l c h / 0.1);
  transform: translateY(-1px);
}

.topic-expression-builder__slot--filled {
  border-style: solid;
}

.topic-expression-builder__slot--correct {
  border-color: oklch(from var(--color-success, var(--color-primary)) l c h / 0.38);
  background: oklch(from var(--color-primary) l c h / 0.08);
}

.topic-expression-builder__slot--wrong {
  border-color: oklch(from var(--color-danger, var(--chip-chemistry)) l c h / 0.38);
  background: oklch(from var(--chip-chemistry) l c h / 0.08);
}

.topic-expression-builder__bank,
.topic-model-pipeline__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.topic-expression-builder__token,
.topic-square-builder__choice,
.topic-model-pipeline__card {
  appearance: none;
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-surface) l c h / 0.92);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 0.65rem 0.95rem;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.55;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.topic-expression-builder__token:hover,
.topic-expression-builder__token:focus-visible,
.topic-square-builder__choice:hover,
.topic-square-builder__choice:focus-visible,
.topic-model-pipeline__card:hover,
.topic-model-pipeline__card:focus-visible,
.topic-square-builder__choice--selected,
.topic-model-pipeline__card--selected {
  transform: translateY(-1px);
  border-color: oklch(from var(--color-primary) l c h / 0.44);
  background: oklch(from var(--color-primary) l c h / 0.12);
}

.topic-expression-builder__token--used,
.topic-expression-builder__token:disabled,
.topic-model-pipeline__card--used,
.topic-model-pipeline__card:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
  background: oklch(from var(--color-surface) l c h / 0.82);
}

.topic-expression-builder__actions,
.topic-model-pipeline__actions,
.topic-number-line-builder__actions,
.topic-square-builder__actions,
.topic-coordinate-pick__actions,
.topic-decision-path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.topic-expression-builder__feedback,
.topic-coordinate-pick__feedback,
.topic-square-builder__feedback,
.topic-number-line-builder__feedback,
.topic-model-pipeline__feedback,
.topic-decision-path__result {
  margin-top: var(--space-3);
  min-height: 1.4em;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
}

.topic-expression-builder__feedback--correct,
.topic-coordinate-pick__feedback--correct,
.topic-square-builder__feedback--correct,
.topic-number-line-builder__feedback--correct,
.topic-model-pipeline__feedback--correct,
.topic-decision-path__result--correct {
  color: oklch(from var(--color-primary) l c h / 0.9);
}

.topic-expression-builder__feedback--wrong,
.topic-coordinate-pick__feedback--wrong,
.topic-square-builder__feedback--wrong,
.topic-number-line-builder__feedback--wrong,
.topic-model-pipeline__feedback--wrong,
.topic-decision-path__result--wrong {
  color: var(--color-text-muted);
}

.topic-decision-path__stages {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-left: 1.3rem;
}

.topic-decision-path__stage {
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: oklch(from var(--color-bg) l c h / 0.5);
}

.topic-decision-path__stage--done {
  border-color: oklch(from var(--color-success, var(--color-primary)) l c h / 0.32);
  background: oklch(from var(--color-primary) l c h / 0.06);
}

.topic-decision-path__question {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.topic-decision-path__choices {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.topic-decision-path__choice {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-surface) l c h / 0.94);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1rem;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.topic-decision-path__choice:hover,
.topic-decision-path__choice:focus-visible,
.topic-decision-path__choice--selected {
  transform: translateY(-1px);
  border-color: oklch(from var(--color-primary) l c h / 0.42);
}

.topic-decision-path__choice--correct {
  background: oklch(from var(--color-primary) l c h / 0.11);
}

.topic-decision-path__choice--wrong {
  background: oklch(from var(--chip-chemistry) l c h / 0.08);
  border-color: oklch(from var(--chip-chemistry) l c h / 0.32);
}

.topic-decision-path__feedback {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
}

.topic-decision-path__feedback--correct {
  color: oklch(from var(--color-primary) l c h / 0.9);
}

.topic-decision-path__feedback--wrong {
  color: var(--color-text-muted);
}

.topic-coordinate-pick__board {
  position: relative;
  width: min(22rem, 100%);
  aspect-ratio: 1;
  margin-top: var(--space-4);
}

.topic-coordinate-pick__grid {
  width: 100%;
  height: 100%;
  display: block;
}

.topic-coordinate-pick__point {
  position: absolute;
  appearance: none;
  min-width: 2.9rem;
  min-height: 2.9rem;
  padding: 0.45rem;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: oklch(from var(--color-surface) l c h / 0.94);
  color: var(--color-text);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.topic-coordinate-pick__point:hover,
.topic-coordinate-pick__point:focus-visible,
.topic-coordinate-pick__point--selected {
  transform: translateY(-1px) scale(1.02);
  border-color: oklch(from var(--color-primary) l c h / 0.42);
}

.topic-coordinate-pick__point--correct {
  background: oklch(from var(--color-primary) l c h / 0.14);
}

.topic-coordinate-pick__point--wrong {
  background: oklch(from var(--chip-chemistry) l c h / 0.1);
  border-color: oklch(from var(--chip-chemistry) l c h / 0.34);
}

.topic-square-builder__preview {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-bg) l c h / 0.52);
}

.topic-square-builder__line {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.8;
}

.topic-square-builder__groups {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.topic-square-builder__group {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-bg) l c h / 0.5);
}

.topic-square-builder__group--correct {
  border-color: oklch(from var(--color-success, var(--color-primary)) l c h / 0.34);
}

.topic-square-builder__group--wrong {
  border-color: oklch(from var(--chip-chemistry) l c h / 0.32);
}

.topic-square-builder__question {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.topic-square-builder__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.topic-number-line-builder__board {
  position: relative;
  height: 5.2rem;
  margin-top: var(--space-4);
}

.topic-number-line-builder__board::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 2.35rem;
  height: 0.2rem;
  border-radius: 999px;
  background: oklch(from var(--color-text) l c h / 0.18);
}

.topic-number-line-builder__segment {
  position: absolute;
  top: 2.05rem;
  height: 0.8rem;
  border: none;
  border-radius: 999px;
  background: oklch(from var(--color-primary) l c h / 0.18);
  opacity: 0.24;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}

.topic-number-line-builder__segment[data-segment='left'] {
  left: 0;
  width: 33%;
}

.topic-number-line-builder__segment[data-segment='middle'] {
  left: 33%;
  width: 34%;
}

.topic-number-line-builder__segment[data-segment='right'] {
  left: 67%;
  width: 33%;
}

.topic-number-line-builder__segment:hover,
.topic-number-line-builder__segment:focus-visible,
.topic-number-line-builder__segment--active {
  opacity: 0.88;
  background: oklch(from var(--color-primary) l c h / 0.3);
  transform: translateY(-1px);
}

.topic-number-line-builder__endpoint {
  position: absolute;
  top: 1.35rem;
  appearance: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.topic-number-line-builder__endpoint[data-endpoint='left'] {
  left: calc(33% - 1.05rem);
}

.topic-number-line-builder__endpoint[data-endpoint='right'] {
  left: calc(67% - 1.05rem);
}

.topic-number-line-builder__endpoint:hover,
.topic-number-line-builder__endpoint:focus-visible {
  transform: translateY(-1px);
  border-color: oklch(from var(--color-primary) l c h / 0.42);
}

.topic-number-line-builder__endpoint--off {
  background: var(--color-surface);
}

.topic-number-line-builder__endpoint--open {
  background: var(--color-surface);
  border-color: oklch(from var(--color-primary) l c h / 0.5);
}

.topic-number-line-builder__endpoint--closed {
  background: oklch(from var(--color-primary) l c h / 0.22);
  border-color: oklch(from var(--color-primary) l c h / 0.5);
}

.topic-number-line-builder__caption,
.topic-model-pipeline__instructions {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.topic-model-pipeline__stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.topic-model-pipeline__station {
  appearance: none;
  min-height: 6.2rem;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  background: oklch(from var(--color-bg) l c h / 0.56);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.topic-model-pipeline__station:hover,
.topic-model-pipeline__station:focus-visible {
  transform: translateY(-1px);
  border-color: oklch(from var(--color-primary) l c h / 0.4);
}

.topic-model-pipeline__station--filled {
  border-style: solid;
}

.topic-model-pipeline__station--correct {
  border-color: oklch(from var(--color-success, var(--color-primary)) l c h / 0.34);
  background: oklch(from var(--color-primary) l c h / 0.08);
}

.topic-model-pipeline__station--wrong {
  border-color: oklch(from var(--chip-chemistry) l c h / 0.32);
  background: oklch(from var(--chip-chemistry) l c h / 0.08);
}

.topic-inline-sort {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.22);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, oklch(from var(--color-surface-2) l c h / 0.95), oklch(from var(--color-surface) l c h / 0.92));
}

.topic-inline-sort__prompt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
}

.topic-inline-sort__cards {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.topic-inline-sort__card {
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: oklch(from var(--color-bg) l c h / 0.5);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.topic-inline-sort__card--correct {
  border-color: oklch(from var(--color-success, var(--color-primary)) l c h / 0.38);
  background: oklch(from var(--color-primary) l c h / 0.08);
}

.topic-inline-sort__card--wrong {
  border-color: oklch(from var(--color-danger, var(--chip-chemistry)) l c h / 0.38);
  background: oklch(from var(--chip-chemistry) l c h / 0.08);
}

.topic-inline-sort__statement {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.topic-inline-sort__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.topic-inline-sort__choice {
  appearance: none;
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-surface) l c h / 0.92);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 0.55rem 0.9rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.topic-inline-sort__choice:hover,
.topic-inline-sort__choice:focus-visible,
.topic-inline-sort__choice--selected {
  border-color: oklch(from var(--color-primary) l c h / 0.42);
  background: oklch(from var(--color-primary) l c h / 0.12);
  transform: translateY(-1px);
}

.topic-inline-sort__feedback {
  margin-top: var(--space-3);
  min-height: 1.4em;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
}

.topic-inline-sort__feedback--correct {
  color: oklch(from var(--color-primary) l c h / 0.9);
}

.topic-inline-sort__feedback--wrong {
  color: var(--color-text-muted);
}

.embedded-check {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--callout-orange);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: oklch(from var(--callout-orange) l c h / 0.05);
  transition: background 0.25s ease;
}

.embedded-check__label,
.embedded-check__meta {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: oklch(from var(--callout-orange) l c h / 0.12);
  color: var(--callout-orange);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
}

.embedded-check__meta {
  margin-top: var(--space-2);
}

.embedded-check__prompt,
.lesson-optional__prompt,
.recap-text {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.75;
}

.embedded-check__prompt,
.lesson-optional__prompt {
  color: var(--color-text);
  font-weight: 500;
}

.recap-text {
  max-width: 72ch;
  color: var(--color-text-muted);
}

.embedded-check__field {
  width: 100%;
  min-height: 5.25rem;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  resize: vertical;
}

.embedded-check__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.embedded-check__choices {
  margin-top: var(--space-3);
  padding: 0;
  border: none;
  display: grid;
  gap: var(--space-2);
}

.embedded-check__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.embedded-check__choice input {
  margin-top: 0.15rem;
}

.embedded-check__hint,
.embedded-check__feedback,
.lesson-optional__feedback {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.embedded-check__hint {
  border: 1px solid oklch(from var(--chip-chemistry) l c h / 0.25);
  background: oklch(from var(--chip-chemistry) l c h / 0.08);
  color: var(--color-text-muted);
}

.embedded-check__feedback,
.lesson-optional__feedback {
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-text) l c h / 0.04);
  color: var(--color-text-muted);
}

.embedded-check__feedback strong,
.lesson-optional__feedback strong {
  color: var(--color-text);
}

.embedded-check__feedback--correct,
.lesson-optional__feedback--correct {
  border-color: oklch(from var(--chip-biology) l c h / 0.28);
  background: oklch(from var(--chip-biology) l c h / 0.1);
}

.embedded-check__feedback--wrong,
.lesson-optional__feedback--wrong {
  border-color: oklch(from var(--chip-chemistry) l c h / 0.32);
  background: oklch(from var(--chip-chemistry) l c h / 0.1);
}

.embedded-check__continue {
  margin-top: var(--space-3);
}

.lesson-optional {
  overflow: clip;
}

.optional-header {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.optional-header::-webkit-details-marker {
  display: none;
}

.optional-header::after {
  content: '';
  position: absolute;
  right: var(--space-6);
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-60%) rotate(45deg);
  transition: transform var(--transition-interactive);
}

.lesson-optional[open] .optional-header::after {
  transform: translateY(-30%) rotate(225deg);
}

.optional-content {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.lesson-optional__item {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: oklch(from var(--color-text) l c h / 0.03);
}

.lesson-optional__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: oklch(from var(--color-primary) l c h / 0.12);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .lesson-progress {
    top: calc(var(--topic-scroll-margin) - var(--space-4));
  }

  .lesson-hook,
  .lesson-section,
  .lesson-recap,
  .overview-hook,
  .overview-section,
  .overview-recap,
  .connect-hook,
  .connect-section,
  .connect-recap {
    padding: var(--space-5) var(--space-4);
  }

  .optional-header,
  .optional-content {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

.topic-quiz { margin-top: var(--space-4); }
.topic-quiz__item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-divider);
}
.topic-quiz__item:last-of-type { border-bottom: none; }
.topic-quiz__prompt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.55;
}
.topic-quiz__choices {
  border: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-quiz__choice {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--transition-interactive), border-color var(--transition-interactive);
}
.topic-quiz__choice:hover {
  background: oklch(from var(--color-text) l c h / 0.04);
  border-color: var(--color-divider);
}
.topic-quiz__choice input { margin-top: 0.25rem; flex-shrink: 0; }
.topic-quiz__short {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  resize: vertical;
  min-height: 4rem;
}
.topic-quiz__feedback {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: oklch(from var(--color-primary) l c h / 0.06);
  margin-top: var(--space-2);
}

/* --- Related topics + map nav + modal --- */
.topic-related-section {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.topic-related-section__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.topic-related-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .topic-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .topic-related-grid { grid-template-columns: repeat(3, 1fr); }
}
.topic-related-card {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-interactive);
}
.topic-related-card:hover {
  border-color: oklch(from var(--color-primary) l c h / 0.3);
}
.topic-related-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.topic-related-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}
.topic-related-card__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  background: oklch(from var(--color-primary) l c h / 0.12);
  cursor: pointer;
}
.topic-related-card__btn:hover {
  border-color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.2);
}
.topic-related-card__link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}

.topic-graph-nav {
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.topic-graph-nav__row {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
@media (min-width: 768px) {
  .topic-graph-nav__row { grid-template-columns: 1fr 1fr; }
}
.topic-graph-nav__subhead {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.topic-graph-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.topic-graph-nav__item {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.topic-graph-nav__link {
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}
.topic-graph-nav__empty,
.topic-graph-nav__note,
.topic-graph-nav__came {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-3);
}
.topic-graph-nav__came a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.35);
}

.topic-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6);
  overflow-y: auto;
}
.topic-modal[hidden] { display: none !important; }
.topic-modal__backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0.1 0.02 80 / 0.65);
  backdrop-filter: blur(4px);
}
.topic-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(42rem, 100%);
  max-height: min(90vh, 900px);
  overflow-y: auto;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px oklch(0 0 0 / 0.35);
}
.topic-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.topic-modal__close:hover { color: var(--color-text); }
.topic-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 var(--space-10) var(--space-6) 0;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.topic-modal__body .topic-connection-practice {
  border: none;
  padding: 0;
  background: transparent;
}
.topic-modal__body .topic-connection-practice__title { margin-top: 0; }

/* --- Lesson term hints (hover / focus micro-animations) --- */
.topic-term[data-term] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted oklch(from var(--color-primary) l c h / 0.55);
  text-decoration: none;
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}
.topic-term[data-term]:hover,
.topic-term[data-term]:focus {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.topic-term__pop {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.35rem);
  transform: translateX(-50%) translateY(4px) scale(0.97);
  min-width: 12.5rem;
  max-width: min(20rem, 85vw);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px oklch(0 0 0 / 0.22);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}
.topic-term[data-term]:hover .topic-term__pop,
.topic-term[data-term]:focus .topic-term__pop,
.topic-term[data-term]:focus-within .topic-term__pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
.topic-term__viz {
  display: block;
  height: 2.5rem;
  margin-bottom: var(--space-2);
  position: relative;
}
.topic-term__caption {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* log_step — shrinking bars */
.topic-term__viz--log_step {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 var(--space-2);
}
.topic-term__viz--log_step i {
  width: 0.65rem;
  border-radius: 2px;
  background: var(--color-primary);
  transform-origin: bottom;
}
.topic-term__viz--log_step i:nth-child(1) { animation: termLogA 2.2s ease-in-out infinite; }
.topic-term__viz--log_step i:nth-child(2) { animation: termLogB 2.2s ease-in-out infinite; }
.topic-term__viz--log_step i:nth-child(3) { animation: termLogC 2.2s ease-in-out infinite; }
@keyframes termLogA {
  0%, 100% { height: 55%; opacity: 0.85; }
  50% { height: 90%; opacity: 1; }
}
@keyframes termLogB {
  0%, 100% { height: 35%; opacity: 0.75; }
  50% { height: 70%; opacity: 1; }
}
@keyframes termLogC {
  0%, 100% { height: 18%; opacity: 0.65; }
  50% { height: 48%; opacity: 1; }
}

/* proton_pass — shuttle */
.topic-term__viz--proton_pass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}
.topic-term__viz--proton_pass i:nth-child(1),
.topic-term__viz--proton_pass i:nth-child(3) {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: oklch(from var(--color-primary) l c h / 0.35);
  border: 2px solid var(--color-primary);
}
.topic-term__viz--proton_pass i:nth-child(2) {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary);
  animation: termShuttle 1.6s ease-in-out infinite;
}
@keyframes termShuttle {
  0%, 100% { transform: translateX(-1.1rem); }
  50% { transform: translateX(1.1rem); }
}

/* seesaw */
.topic-term__viz--seesaw {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 0.15rem;
}
.topic-term__viz--seesaw i:nth-child(1) {
  width: 3.5rem;
  height: 3px;
  background: var(--color-text-muted);
  border-radius: 2px;
  transform-origin: center bottom;
  animation: termSeesaw 2s ease-in-out infinite;
}
.topic-term__viz--seesaw i:nth-child(2),
.topic-term__viz--seesaw i:nth-child(3) {
  position: absolute;
  bottom: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--color-primary);
}
.topic-term__viz--seesaw i:nth-child(2) { left: 28%; animation: termSeesawL 2s ease-in-out infinite; }
.topic-term__viz--seesaw i:nth-child(3) { right: 28%; animation: termSeesawR 2s ease-in-out infinite; }
@keyframes termSeesaw {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes termSeesawL {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes termSeesawR {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(1px); }
}

/* hill_barrier */
.topic-term__viz--hill_barrier {
  padding: 0 0.5rem;
}
.topic-term__viz--hill_barrier i:nth-child(1) {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.2rem;
  height: 2rem;
  border: 2px solid var(--color-text-muted);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom: none;
  opacity: 0.5;
}
.topic-term__viz--hill_barrier i:nth-child(2) {
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  animation: termHill 2.4s ease-in-out infinite;
}
@keyframes termHill {
  0%, 100% { transform: translate(-1.1rem, 0); opacity: 0.6; }
  40% { transform: translate(0, -1.35rem); opacity: 1; }
  80% { transform: translate(1.1rem, 0); opacity: 0.85; }
}

/* split_share */
.topic-term__viz--split_share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
.topic-term__viz--split_share i {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
}
.topic-term__viz--split_share i:nth-child(1) { animation: termPullL 2s ease-in-out infinite; }
.topic-term__viz--split_share i:nth-child(2) { animation: termPullR 2s ease-in-out infinite; }
@keyframes termPullL {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@keyframes termPullR {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

/* compare_two — balance */
.topic-term__viz--compare_two {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
}
.topic-term__viz--compare_two i {
  width: 1.1rem;
  height: 1.35rem;
  border-radius: 3px;
  background: oklch(from var(--color-primary) l c h / 0.25);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.5);
}
.topic-term__viz--compare_two i:nth-child(1) { animation: termCmpA 2.5s ease-in-out infinite; }
.topic-term__viz--compare_two i:nth-child(2) { animation: termCmpB 2.5s ease-in-out infinite; }
@keyframes termCmpA {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-4px); opacity: 1; }
}
@keyframes termCmpB {
  0%, 100% { transform: translateY(-3px); opacity: 1; }
  50% { transform: translateY(1px); opacity: 0.75; }
}

/* loop_cycle — dots in a ring */
.topic-term__viz--loop_cycle {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}
.topic-term__viz--loop_cycle i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.35rem;
  height: 0.35rem;
  margin: -0.175rem;
  border-radius: 50%;
  background: var(--color-primary);
  animation: termOrbit 5s linear infinite;
}
.topic-term__viz--loop_cycle i:nth-child(1) { --a: 0deg; }
.topic-term__viz--loop_cycle i:nth-child(2) { --a: 72deg; }
.topic-term__viz--loop_cycle i:nth-child(3) { --a: 144deg; }
.topic-term__viz--loop_cycle i:nth-child(4) { --a: 216deg; }
.topic-term__viz--loop_cycle i:nth-child(5) { --a: 288deg; }
@keyframes termOrbit {
  from { transform: rotate(var(--a)) translateY(-1rem); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateY(-1rem); }
}

/* nucleus_pulse */
.topic-term__viz--nucleus_pulse {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-term__viz--nucleus_pulse i:nth-child(1) {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  animation: termNuc 2s ease-in-out infinite;
}
.topic-term__viz--nucleus_pulse i:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  margin: -0.2rem;
  border-radius: 50%;
  background: var(--color-primary);
  animation: termElec 2.5s linear infinite;
}
@keyframes termNuc {
  0%, 100% { box-shadow: 0 0 0 0 oklch(from var(--color-primary) l c h / 0.4); }
  50% { box-shadow: 0 0 0 8px oklch(from var(--color-primary) l c h / 0); }
}
@keyframes termElec {
  from { transform: rotate(0deg) translateX(1.15rem) rotate(0deg); }
  to { transform: rotate(360deg) translateX(1.15rem) rotate(-360deg); }
}

/* stair_climb */
.topic-term__viz--stair_climb {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.25rem;
  padding: 0 0.25rem;
}
.topic-term__viz--stair_climb i {
  width: 0.55rem;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}
.topic-term__viz--stair_climb i:nth-child(1) { height: 35%; animation: termStair 2.2s ease-in-out infinite; }
.topic-term__viz--stair_climb i:nth-child(2) { height: 50%; animation: termStair 2.2s ease-in-out infinite 0.15s; }
.topic-term__viz--stair_climb i:nth-child(3) { height: 68%; animation: termStair 2.2s ease-in-out infinite 0.3s; }
.topic-term__viz--stair_climb i:nth-child(4) { height: 88%; animation: termStair 2.2s ease-in-out infinite 0.45s; }
@keyframes termStair {
  0%, 100% { opacity: 0.5; transform: scaleY(0.92); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* slope_line */
.topic-term__viz--slope_line {
  position: relative;
  border-bottom: 2px solid var(--color-text-muted);
  margin: 0 0.5rem;
  transform-origin: left bottom;
}
.topic-term__viz--slope_line i:nth-child(1) {
  position: absolute;
  left: 0.2rem;
  bottom: 0.15rem;
  right: 35%;
  height: 2px;
  background: oklch(from var(--color-text-muted) l c h / 0.35);
  transform-origin: left center;
}
.topic-term__viz--slope_line i:nth-child(2) {
  position: absolute;
  left: 18%;
  bottom: 0.15rem;
  width: 1.5rem;
  height: 2px;
  background: var(--color-primary);
  transform-origin: left center;
  animation: termTan 2s ease-in-out infinite;
}
@keyframes termTan {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(42deg); }
}

/* wave_wiggle */
.topic-term__viz--wave_wiggle {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: oklch(from var(--color-primary) l c h / 0.08);
  margin: 0 0.25rem;
}
.topic-term__viz--wave_wiggle i {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    oklch(from var(--color-primary) l c h / 0.45) 6px 8px,
    transparent 8px 14px
  );
  animation: termWave 2.5s linear infinite;
}
.topic-term__viz--wave_wiggle i:nth-child(2) { animation-delay: -0.8s; opacity: 0.6; }
.topic-term__viz--wave_wiggle i:nth-child(3) { animation-delay: -1.6s; opacity: 0.35; }
@keyframes termWave {
  from { transform: translateX(0); }
  to { transform: translateX(14px); }
}

/* shuffle_spread — dots diffuse */
.topic-term__viz--shuffle_spread {
  position: relative;
  margin: 0 auto;
  width: 3.25rem;
}
.topic-term__viz--shuffle_spread i {
  position: absolute;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--color-primary);
  left: 50%;
  top: 50%;
  margin: -0.14rem;
}
.topic-term__viz--shuffle_spread i:nth-child(1) { animation: termSpread 3s ease-in-out infinite; }
.topic-term__viz--shuffle_spread i:nth-child(2) { animation: termSpread 3s ease-in-out infinite 0.2s; }
.topic-term__viz--shuffle_spread i:nth-child(3) { animation: termSpread 3s ease-in-out infinite 0.4s; }
.topic-term__viz--shuffle_spread i:nth-child(4) { animation: termSpread 3s ease-in-out infinite 0.6s; }
.topic-term__viz--shuffle_spread i:nth-child(5) { animation: termSpread 3s ease-in-out infinite 0.8s; }
.topic-term__viz--shuffle_spread i:nth-child(6) { animation: termSpread 3s ease-in-out infinite 1s; }
.topic-term__viz--shuffle_spread i:nth-child(7) { animation: termSpread 3s ease-in-out infinite 1.2s; }
.topic-term__viz--shuffle_spread i:nth-child(8) { animation: termSpread 3s ease-in-out infinite 1.4s; }
@keyframes termSpread {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50% { transform: translate(var(--sx, 10px), var(--sy, -8px)) scale(0.9); opacity: 0.55; }
}
.topic-term__viz--shuffle_spread i:nth-child(1) { --sx: -14px; --sy: -6px; }
.topic-term__viz--shuffle_spread i:nth-child(2) { --sx: 12px; --sy: -10px; }
.topic-term__viz--shuffle_spread i:nth-child(3) { --sx: -8px; --sy: 12px; }
.topic-term__viz--shuffle_spread i:nth-child(4) { --sx: 16px; --sy: 4px; }
.topic-term__viz--shuffle_spread i:nth-child(5) { --sx: -16px; --sy: 8px; }
.topic-term__viz--shuffle_spread i:nth-child(6) { --sx: 6px; --sy: -14px; }
.topic-term__viz--shuffle_spread i:nth-child(7) { --sx: -4px; --sy: -12px; }
.topic-term__viz--shuffle_spread i:nth-child(8) { --sx: 10px; --sy: 10px; }

/* field_loop */
.topic-term__viz--field_loop {
  margin: 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px dashed oklch(from var(--color-primary) l c h / 0.45);
  animation: termSpin 6s linear infinite;
}
@keyframes termSpin {
  to { transform: rotate(360deg); }
}

/* cloud_pulse */
.topic-term__viz--cloud_pulse {
  margin: 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(from var(--color-primary) l c h / 0.35) 0%, transparent 70%);
  animation: termCloud 2.2s ease-in-out infinite;
}
@keyframes termCloud {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* spring_push */
.topic-term__viz--spring_push {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.5rem;
}
.topic-term__viz--spring_push i:nth-child(1) {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary);
}
.topic-term__viz--spring_push i:nth-child(2) {
  width: 1.25rem;
  height: 0.5rem;
  border: 2px solid var(--color-text-muted);
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 3px, var(--color-text-muted) 3px 4px);
  animation: termSpring 1.8s ease-in-out infinite;
}
.topic-term__viz--spring_push i:nth-child(3) {
  width: 0.35rem;
  height: 1.1rem;
  background: var(--color-text-muted);
  border-radius: 1px;
}
@keyframes termSpring {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.35); }
}

/* decay_flow */
.topic-term__viz--decay_flow {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: oklch(from var(--color-primary) l c h / 0.06);
}
.topic-term__viz--decay_flow i {
  position: absolute;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: var(--color-primary);
  left: 8%;
  bottom: 20%;
  opacity: 0;
  animation: termDecay 3s ease-out infinite;
}
.topic-term__viz--decay_flow i:nth-child(2) { animation-delay: 0.25s; }
.topic-term__viz--decay_flow i:nth-child(3) { animation-delay: 0.5s; }
.topic-term__viz--decay_flow i:nth-child(4) { animation-delay: 0.75s; }
.topic-term__viz--decay_flow i:nth-child(5) { animation-delay: 1s; }
.topic-term__viz--decay_flow i:nth-child(6) { animation-delay: 1.25s; }
.topic-term__viz--decay_flow i:nth-child(7) { animation-delay: 1.5s; }
.topic-term__viz--decay_flow i:nth-child(8) { animation-delay: 1.75s; }
.topic-term__viz--decay_flow i:nth-child(9) { animation-delay: 2s; }
.topic-term__viz--decay_flow i:nth-child(10) { animation-delay: 2.25s; }
.topic-term__viz--decay_flow i:nth-child(11) { animation-delay: 2.5s; }
.topic-term__viz--decay_flow i:nth-child(12) { animation-delay: 2.75s; }
@keyframes termDecay {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(2.5rem, -1.5rem); opacity: 0; }
}

/* vector_push */
.topic-term__viz--vector_push {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.topic-term__viz--vector_push i:nth-child(1) {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-primary);
}
.topic-term__viz--vector_push i:nth-child(2) {
  width: 1.6rem;
  height: 3px;
  background: var(--color-primary);
  transform-origin: left center;
  animation: termVec 2s ease-in-out infinite;
}
@keyframes termVec {
  0%, 100% { transform: scaleX(1) rotate(-8deg); }
  50% { transform: scaleX(1.2) rotate(8deg); }
}

/* machine_in_out */
.topic-term__viz--machine_in_out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.topic-term__viz--machine_in_out i {
  font-style: normal;
  font-family: var(--font-body), system-ui, sans-serif;
}
.topic-term__viz--machine_in_out i:nth-child(1),
.topic-term__viz--machine_in_out i:nth-child(3) {
  font-size: 0.65rem;
  font-weight: 800;
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
}
.topic-term__viz--machine_in_out i:nth-child(1)::after { content: 'x'; }
.topic-term__viz--machine_in_out i:nth-child(3)::after { content: 'y'; }
.topic-term__viz--machine_in_out i:nth-child(2) {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  animation: termMachine 2.4s ease-in-out infinite;
}
@keyframes termMachine {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 oklch(from var(--color-primary) l c h / 0.25); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 6px oklch(from var(--color-primary) l c h / 0); }
}

/* balance_scale */
.topic-term__viz--balance_scale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.topic-term__viz--balance_scale i:nth-child(1),
.topic-term__viz--balance_scale i:nth-child(3) {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  background: oklch(from var(--color-primary) l c h / 0.2);
  border: 1px solid var(--color-primary);
}
.topic-term__viz--balance_scale i:nth-child(2) {
  width: 2px;
  height: 1.25rem;
  background: var(--color-text-muted);
  animation: termBal 2.2s ease-in-out infinite;
}
@keyframes termBal {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

/* dice_spin */
.topic-term__viz--dice_spin {
  margin: 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  border: 2px solid var(--color-primary);
  background: radial-gradient(circle at 30% 30%, var(--color-primary) 0.12rem, transparent 0.14rem),
    radial-gradient(circle at 70% 70%, var(--color-primary) 0.12rem, transparent 0.14rem);
  animation: termDice 2.8s ease-in-out infinite;
}
@keyframes termDice {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.05); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.05); }
}

/* hub_spoke */
.topic-term__viz--hub_spoke {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
}
.topic-term__viz--hub_spoke i:nth-child(1) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.275rem;
  border-radius: 50%;
  background: var(--color-primary);
  z-index: 1;
}
.topic-term__viz--hub_spoke i:nth-child(2),
.topic-term__viz--hub_spoke i:nth-child(3),
.topic-term__viz--hub_spoke i:nth-child(4),
.topic-term__viz--hub_spoke i:nth-child(5) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 0.85rem;
  margin-left: -1px;
  margin-top: -0.85rem;
  background: oklch(from var(--color-primary) l c h / 0.45);
  transform-origin: bottom center;
  animation: termHub 3s ease-in-out infinite;
}
.topic-term__viz--hub_spoke i:nth-child(2) { transform: rotate(0deg); }
.topic-term__viz--hub_spoke i:nth-child(3) { transform: rotate(72deg); }
.topic-term__viz--hub_spoke i:nth-child(4) { transform: rotate(144deg); }
.topic-term__viz--hub_spoke i:nth-child(5) { transform: rotate(216deg); }
@keyframes termHub {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* membrane_wiggle */
.topic-term__viz--membrane_wiggle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  padding: 0 0.5rem;
}
.topic-term__viz--membrane_wiggle i {
  height: 3px;
  border-radius: 2px;
  background: oklch(from var(--color-primary) l c h / 0.35);
  animation: termMem 2s ease-in-out infinite;
}
.topic-term__viz--membrane_wiggle i:nth-child(1) { animation-delay: 0s; }
.topic-term__viz--membrane_wiggle i:nth-child(2) { animation-delay: 0.12s; }
.topic-term__viz--membrane_wiggle i:nth-child(3) { animation-delay: 0.24s; }
.topic-term__viz--membrane_wiggle i:nth-child(4) { animation-delay: 0.36s; }
.topic-term__viz--membrane_wiggle i:nth-child(5) { animation-delay: 0.48s; }
@keyframes termMem {
  0%, 100% { transform: scaleX(1); opacity: 0.6; }
  50% { transform: scaleX(1.06); opacity: 1; }
}

/* arrow_flow */
.topic-term__viz--arrow_flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0 0.25rem;
}
.topic-term__viz--arrow_flow i {
  height: 3px;
  flex: 1;
  max-width: 1.5rem;
  background: linear-gradient(90deg, var(--color-primary), oklch(from var(--color-primary) l c h / 0.2));
  border-radius: 2px;
  animation: termFlow 1.8s ease-in-out infinite;
}
.topic-term__viz--arrow_flow i:nth-child(2) { animation-delay: 0.2s; }
.topic-term__viz--arrow_flow i:nth-child(3) { animation-delay: 0.4s; }
.topic-term__viz--arrow_flow i:nth-child(4) { animation-delay: 0.6s; }
@keyframes termFlow {
  0%, 100% { opacity: 0.45; transform: scaleX(0.85); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* branch_two */
.topic-term__viz--branch_two {
  position: relative;
  width: 2.75rem;
  height: 2.25rem;
  margin: 0 auto;
}
.topic-term__viz--branch_two i:nth-child(1) {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 45%;
  margin-left: -1px;
  background: var(--color-text-muted);
}
.topic-term__viz--branch_two i:nth-child(2),
.topic-term__viz--branch_two i:nth-child(3) {
  position: absolute;
  top: 0;
  width: 42%;
  height: 2px;
  background: var(--color-primary);
  animation: termBranch 2.5s ease-in-out infinite;
}
.topic-term__viz--branch_two i:nth-child(2) { left: 8%; transform-origin: right bottom; transform: rotate(28deg); }
.topic-term__viz--branch_two i:nth-child(3) { right: 8%; transform-origin: left bottom; transform: rotate(-28deg); }
@keyframes termBranch {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* branch_filter */
.topic-term__viz--branch_filter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.35rem;
}
.topic-term__viz--branch_filter i {
  width: 0.4rem;
  border-radius: 2px 2px 0 0;
  background: var(--color-text-muted);
  animation: termFilter 2.4s ease-in-out infinite;
}
.topic-term__viz--branch_filter i:nth-child(1) { height: 55%; }
.topic-term__viz--branch_filter i:nth-child(2) { height: 40%; animation-delay: 0.15s; }
.topic-term__viz--branch_filter i:nth-child(3) { height: 70%; animation-delay: 0.3s; }
.topic-term__viz--branch_filter i:nth-child(4) {
  height: 25%;
  background: var(--color-primary);
  animation: termFilterDrop 2.4s ease-in-out infinite;
}
@keyframes termFilter {
  0%, 100% { opacity: 0.45; transform: translateY(2px); }
  50% { opacity: 1; transform: translateY(0); }
}
@keyframes termFilterDrop {
  0%, 100% { opacity: 0.3; transform: translateY(6px) scaleY(0.6); }
  50% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* web_tug */
.topic-term__viz--web_tug {
  position: relative;
  width: 2.6rem;
  height: 2.3rem;
  margin: 0 auto;
}
.topic-term__viz--web_tug i {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  animation: termWeb 3s ease-in-out infinite;
}
.topic-term__viz--web_tug i:nth-child(1) { left: 10%; top: 20%; }
.topic-term__viz--web_tug i:nth-child(2) { right: 12%; top: 15%; animation-delay: 0.4s; }
.topic-term__viz--web_tug i:nth-child(3) { left: 45%; top: 55%; animation-delay: 0.8s; }
.topic-term__viz--web_tug i:nth-child(4) { left: 20%; bottom: 10%; animation-delay: 1.2s; }
.topic-term__viz--web_tug i:nth-child(5) { right: 18%; bottom: 18%; animation-delay: 1.6s; }
@keyframes termWeb {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -4px); }
}

/* step_blocks */
.topic-term__viz--step_blocks {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 0.25rem;
}
.topic-term__viz--step_blocks i {
  width: 0.55rem;
  border-radius: 2px;
  background: var(--color-primary);
}
.topic-term__viz--step_blocks i:nth-child(1) { height: 30%; animation: termStep 2.2s ease-in-out infinite; }
.topic-term__viz--step_blocks i:nth-child(2) { height: 48%; animation: termStep 2.2s ease-in-out infinite 0.2s; }
.topic-term__viz--step_blocks i:nth-child(3) { height: 66%; animation: termStep 2.2s ease-in-out infinite 0.4s; }
.topic-term__viz--step_blocks i:nth-child(4) { height: 88%; animation: termStep 2.2s ease-in-out infinite 0.6s; }
@keyframes termStep {
  0%, 100% { opacity: 0.45; filter: brightness(0.95); }
  50% { opacity: 1; filter: brightness(1.15); }
}

/* ruler_tick */
.topic-term__viz--ruler_tick {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  height: 2rem;
  margin: 0 0.35rem;
  border-bottom: 2px solid var(--color-text-muted);
}
.topic-term__viz--ruler_tick i {
  flex: 1;
  max-width: 0.55rem;
  margin: 0 1px;
  background: oklch(from var(--color-primary) l c h / 0.4);
  border-radius: 1px 1px 0 0;
  animation: termTick 2.5s ease-in-out infinite;
}
.topic-term__viz--ruler_tick i:nth-child(1) { height: 25%; }
.topic-term__viz--ruler_tick i:nth-child(2) { height: 40%; animation-delay: 0.1s; }
.topic-term__viz--ruler_tick i:nth-child(3) { height: 55%; animation-delay: 0.2s; }
.topic-term__viz--ruler_tick i:nth-child(4) { height: 70%; animation-delay: 0.3s; }
.topic-term__viz--ruler_tick i:nth-child(5) { height: 90%; animation-delay: 0.4s; }
@keyframes termTick {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .topic-term__pop * {
    animation: none !important;
  }
  .topic-term__viz--log_step i:nth-child(1) { height: 72%; }
  .topic-term__viz--log_step i:nth-child(2) { height: 48%; }
  .topic-term__viz--log_step i:nth-child(3) { height: 28%; }
  .topic-term__viz--field_loop {
    transform: none;
  }
  .topic-term__viz--dice_spin {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Enhanced Flashcard Styles — More visual appeal & 3D flip
   ═══════════════════════════════════════════════════════════════ */
.topic-flashcard-wrap {
  perspective: 800px;
}
.topic-flashcard {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.topic-flashcard:hover {
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.15);
  transform: translateY(-2px);
}
.topic-flashcard--open {
  transform: rotateY(0deg) !important;
}
.topic-flashcard__hint {
  transition: opacity 0.3s ease;
}
.topic-flashcard--open + .topic-flashcard__hint {
  opacity: 0.3;
}

/* Enhanced quiz feedback colors */
.topic-practice-more__feedback--correct {
  color: #7ab894;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  background: oklch(from #7ab894 l c h / 0.08);
  border-left: 3px solid #7ab894;
  margin-top: 0.5rem;
}
.topic-practice-more__feedback--wrong {
  color: #d4708e;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  background: oklch(from #d4708e l c h / 0.08);
  border-left: 3px solid #d4708e;
  margin-top: 0.5rem;
}

/* Confidence selector for quizzes */
.topic-confidence {
  display: flex;
  gap: 0.4rem;
  margin: 0.5rem 0;
  align-items: center;
}
.topic-confidence__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: 0.5rem;
}
.topic-confidence__btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.topic-confidence__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.topic-confidence__btn.is-selected {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Worked example pause points */
.topic-pause-point {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid oklch(from var(--color-primary) l c h / 0.3);
  border-radius: var(--radius-md);
  background: oklch(from var(--color-primary) l c h / 0.04);
}
.topic-pause-point__prompt {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.topic-pause-point__input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  margin-bottom: 0.5rem;
  resize: vertical;
  min-height: 60px;
}
.topic-pause-point__reveal {
  display: none;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: oklch(from var(--color-primary) l c h / 0.08);
  font-size: var(--text-sm);
  margin-top: 0.5rem;
}
.topic-pause-point.is-revealed .topic-pause-point__reveal {
  display: block;
}
.topic-pause-point__btn {
  padding: 0.4rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.topic-pause-point__btn:hover {
  filter: brightness(1.1);
}

/* Misconception callout */
.topic-misconception {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: oklch(from #d4708e l c h / 0.06);
  border-left: 3px solid #d4708e;
}
.topic-misconception__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d4708e;
  margin-bottom: 0.3rem;
}
.topic-misconception__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Real-world connection sidebar */
.topic-real-world {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: oklch(from #e8a83a l c h / 0.06);
  border-left: 3px solid #e8a83a;
}
.topic-real-world__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e8a83a;
  margin-bottom: 0.3rem;
}
.topic-real-world__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   Shared Lab Game Styles (LabGames / topic-lab-games.js)
   ═══════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
  --lab-success: #4ade80;
  --lab-error: #f87171;
  --lab-warning: #fbbf24;
  --lab-success-bg: rgba(74, 222, 128, 0.10);
  --lab-error-bg: rgba(248, 113, 113, 0.10);
  --lab-warning-bg: rgba(251, 191, 36, 0.10);
  --radius-sm: 0.375rem;
}
[data-theme="light"] {
  --lab-success: #16a34a;
  --lab-error: #dc2626;
  --lab-warning: #d97706;
  --lab-success-bg: rgba(22, 163, 74, 0.08);
  --lab-error-bg: rgba(220, 38, 38, 0.08);
  --lab-warning-bg: rgba(217, 119, 6, 0.08);
}

/* buttons */
.lg-btn {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: 0.6rem 1.2rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-text) l c h / 0.06);
  color: var(--color-text); cursor: pointer;
  transition: transform 0.12s ease, background var(--transition-interactive), border-color var(--transition-interactive);
}
.lg-btn:hover { background: oklch(from var(--color-primary) l c h / 0.14); border-color: oklch(from var(--color-primary) l c h / 0.4); }
.lg-btn:active { transform: scale(0.97); }
.lg-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg); }
.lg-btn--primary:hover { filter: brightness(1.08); }
.lg-btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* feedback */
.lg-feedback { font-size: var(--text-sm); font-weight: 600; min-height: 1.4em; margin-top: var(--space-3); transition: color 0.2s; }
.lg-feedback--ok { color: var(--lab-success); }
.lg-feedback--no { color: var(--lab-error); }
.lg-feedback--warn { color: var(--lab-warning); }

/* drag & drop */
.lg-dd { display: flex; flex-direction: column; gap: var(--space-5); }
.lg-dd__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 48px; padding: var(--space-3); border-radius: var(--radius-md); border: 2px dashed var(--color-divider); background: oklch(from var(--color-text) l c h / 0.02); }
.lg-dd__chip {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  padding: 0.45rem 0.9rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: grab; user-select: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s, background 0.2s;
}
.lg-dd__chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); transform: translateY(-1px); }
.lg-dd__chip--dragging { opacity: 0.5; }
.lg-dd__chip--ghost { opacity: 0.8; transform: scale(1.05); }
.lg-dd__chip--placed { cursor: pointer; border-style: dashed; }
.lg-dd__chip--correct { border-color: var(--lab-success); background: var(--lab-success-bg); }
.lg-dd__chip--wrong { border-color: var(--lab-error); background: var(--lab-error-bg); }
.lg-dd__zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.lg-dd__zone {
  border-radius: var(--radius-md); border: 2px dashed var(--color-divider);
  padding: var(--space-3); min-height: 90px; background: oklch(from var(--color-text) l c h / 0.02);
  transition: border-color 0.2s, background 0.2s;
}
.lg-dd__zone--over { border-color: var(--color-primary); background: oklch(from var(--color-primary) l c h / 0.06); }
.lg-dd__zone-label {
  display: block; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.lg-dd__drop-slot { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 36px; }

/* matching */
.lg-match__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lg-match__col { display: flex; flex-direction: column; gap: var(--space-2); }
.lg-match__item {
  font-family: var(--font-body); font-size: var(--text-sm); text-align: left;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
}
.lg-match__item:hover:not(.lg-match__item--done) { border-color: oklch(from var(--color-primary) l c h / 0.5); transform: translateY(-1px); }
.lg-match__item--active { border-color: var(--color-primary); background: oklch(from var(--color-primary) l c h / 0.1); box-shadow: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.25); }
.lg-match__item--done { opacity: 0.7; cursor: default; }
.lg-match__item--correct { border-color: var(--lab-success); background: var(--lab-success-bg); }
.lg-match__item--wrong { border-color: var(--lab-error); background: var(--lab-error-bg); animation: lg-shake 0.4s ease; }

/* ordering */
.lg-order__prompt { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-4); }
.lg-order__list { display: flex; flex-direction: column; gap: var(--space-2); }
.lg-order__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  transition: background 0.2s, border-color 0.2s;
}
.lg-order__item--correct { border-color: var(--lab-success); background: var(--lab-success-bg); }
.lg-order__num { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); min-width: 1.5em; text-align: center; }
.lg-order__label { flex: 1; font-size: var(--text-sm); }
.lg-order__arrows { display: flex; gap: 2px; }
.lg-order__arrow {
  font-size: 0.7rem; padding: 0.2rem 0.45rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted);
  cursor: pointer; transition: background 0.15s;
}
.lg-order__arrow:hover:not(:disabled) { background: oklch(from var(--color-primary) l c h / 0.12); color: var(--color-primary); }
.lg-order__arrow:disabled { opacity: 0.3; cursor: default; }

/* slider challenge */
.lg-slider-challenge { padding: var(--space-4) 0; }
.lg-slider-challenge__prompt { font-size: var(--text-base); margin-bottom: var(--space-4); line-height: 1.6; }
.lg-slider-challenge__row { display: flex; align-items: center; gap: var(--space-4); }
.lg-slider-challenge__input { flex: 1; accent-color: var(--color-primary); height: 6px; }
.lg-slider-challenge__val { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); min-width: 4.5em; text-align: right; }

/* sprint (shared) */
.lg-sprint__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.lg-sprint__score { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.lg-sprint__score-val { font-size: var(--text-lg); font-weight: 700; }
.lg-sprint__streak-val { font-weight: 600; }
.lg-sprint__combo {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-full);
  background: linear-gradient(135deg, oklch(from var(--lab-warning) l c h / 0.2), oklch(from var(--lab-success) l c h / 0.15));
  color: var(--lab-warning); letter-spacing: 0.04em;
  animation: lg-combo-pop 0.3s cubic-bezier(0.16,1,0.3,1);
}
.lg-sprint__combo--hidden { display: none; }
.lg-sprint__timer {
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600;
  padding: 0.3rem 0.8rem; border-radius: var(--radius-md);
  background: oklch(from var(--color-text) l c h / 0.06);
  border: 1px solid var(--color-border);
}
.lg-sprint__timer--warn { color: var(--lab-error); border-color: oklch(from var(--lab-error) l c h / 0.4); animation: lg-pulse 0.6s ease-in-out infinite alternate; }
.lg-sprint__progress { height: 4px; background: oklch(from var(--color-text) l c h / 0.08); border-radius: 2px; margin-bottom: var(--space-5); overflow: hidden; }
.lg-sprint__progress-bar { height: 100%; background: var(--color-primary); border-radius: 2px; transition: width 1s linear; }
.lg-sprint__notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid oklch(from var(--lab-warning) l c h / 0.28);
  background: oklch(from var(--lab-warning) l c h / 0.12);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.lg-sprint__q { font-size: var(--text-base); line-height: 1.55; margin-bottom: var(--space-4); max-width: 48ch; }
.lg-sprint__choices { display: grid; gap: var(--space-2); }
@media (min-width: 520px) { .lg-sprint__choices { grid-template-columns: 1fr 1fr; } }
.lg-sprint__response {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.lg-sprint__entry {
  flex: 1 1 14rem;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.lg-sprint__entry:focus {
  outline: none;
  border-color: oklch(from var(--color-primary) l c h / 0.55);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.12);
}
.lg-sprint__entry--correct {
  border-color: var(--lab-success);
  background: var(--lab-success-bg);
}
.lg-sprint__entry--wrong {
  border-color: var(--lab-error);
  background: var(--lab-error-bg);
}
.lg-sprint__submit {
  flex: 0 0 auto;
}
.lg-sprint__response-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.lg-sprint__choice {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  text-align: left; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), transform 0.1s;
}
.lg-sprint__choice:hover:not(:disabled) { border-color: oklch(from var(--color-primary) l c h / 0.5); background: oklch(from var(--color-primary) l c h / 0.06); }
.lg-sprint__choice:active:not(:disabled) { transform: scale(0.98); }
.lg-sprint__choice:disabled { cursor: default; opacity: 0.85; }
.lg-sprint__choice--correct { border-color: var(--lab-success); background: var(--lab-success-bg); }
.lg-sprint__choice--wrong { border-color: var(--lab-error); background: var(--lab-error-bg); animation: lg-shake 0.4s ease; }
.lg-sprint__why { font-size: var(--text-sm); min-height: 1.2em; margin-top: var(--space-2); line-height: 1.5; }
.lg-sprint__why--ok { color: var(--lab-success); }
.lg-sprint__why--no { color: var(--color-text-muted); font-style: italic; }
.lg-sprint__leaderboard {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: oklch(from var(--color-text) l c h / 0.03);
}
.lg-sprint__share {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.lg-sprint__share-toggle { margin-top: 0.18rem; accent-color: var(--color-primary); }
.lg-sprint__share-copy { line-height: 1.5; }
.lg-sprint__share-note {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.lg-sprint__account-note {
  min-height: 1.4em;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.lg-sprint__account-note--ok { color: var(--lab-success); }
.lg-sprint__account-note--muted { color: var(--color-text-muted); }
.lg-sprint__leader-status {
  min-height: 1.4em;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.lg-sprint__leader-status--ok { color: var(--lab-success); }
.lg-sprint__leader-status--muted { color: var(--color-text-muted); }
.lg-sprint__leader-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lg-sprint__leader-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.lg-sprint__leader-item,
.lg-sprint__leader-empty {
  padding: var(--space-3) 0;
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.08);
}
.lg-sprint__leader-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
}
.lg-sprint__leader-item--new { color: var(--color-text); }
.lg-sprint__leader-item--self {
  background: oklch(from var(--color-primary) l c h / 0.05);
  border-radius: var(--radius-md);
  padding-inline: var(--space-2);
}
.lg-sprint__leader-rank {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}
.lg-sprint__leader-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.lg-sprint__leader-score {
  font-size: var(--text-sm);
  font-weight: 700;
}
.lg-sprint__leader-detail,
.lg-sprint__leader-time,
.lg-sprint__leader-empty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.lg-sprint__leader-time {
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 520px) {
  .lg-sprint__leader-item {
    grid-template-columns: auto 1fr;
  }
  .lg-sprint__leader-time {
    grid-column: 2;
    text-align: left;
  }
}

/* MC (shared) */
.lg-mc__q { font-size: var(--text-base); line-height: 1.55; margin-bottom: var(--space-4); }
.lg-mc__choices { display: grid; gap: var(--space-2); }
@media (min-width: 520px) { .lg-mc__choices { grid-template-columns: 1fr 1fr; } }
.lg-mc__choice {
  font-family: var(--font-body); font-size: var(--text-sm); text-align: left;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
}
.lg-mc__choice:hover:not(:disabled) { border-color: oklch(from var(--color-primary) l c h / 0.5); }
.lg-mc__choice:disabled { cursor: default; opacity: 0.85; }
.lg-mc__choice--correct { border-color: var(--lab-success); background: var(--lab-success-bg); }
.lg-mc__choice--wrong { border-color: var(--lab-error); background: var(--lab-error-bg); }

/* bar chart */
.lg-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.lg-bars__row { display: flex; align-items: center; gap: var(--space-3); }
.lg-bars__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); min-width: 5em; text-align: right; }
.lg-bars__bar-wrap { flex: 1; height: 22px; background: oklch(from var(--color-text) l c h / 0.06); border-radius: 4px; overflow: hidden; }
.lg-bars__bar { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.16,1,0.3,1); min-width: 2px; }
.lg-bars__val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); min-width: 3em; }

/* animations */
@keyframes lg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes lg-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes lg-combo-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lg-correct-pop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes lg-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .lg-match__item--wrong,
  .lg-sprint__choice--wrong,
  .lg-sprint__timer--warn,
  .lg-sprint__combo { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Enhanced UI — domain-colored accents and page polish
   ═══════════════════════════════════════════════════════════════ */

/* Domain accent gradients for field headers */
.topic-field--foundation { --field-accent: var(--chip-foundation); }
.topic-field--math { --field-accent: var(--chip-math); }
.topic-field--physics { --field-accent: var(--chip-physics); }
.topic-field--chemistry { --field-accent: var(--chip-chemistry); }
.topic-field--biology { --field-accent: var(--chip-biology); }
.topic-field--cs { --field-accent: var(--chip-cs); }
.topic-field--bridge { --field-accent: var(--chip-bridge); }

/* Sidebar domain accent left border */
.topic-sidebar {
  border-left: 3px solid var(--field-accent, var(--color-primary));
}

/* Phase left-border accents for lesson sections */
.topic-phase--orient { border-left: 3px solid var(--chip-physics); }
.topic-phase--explain { border-left: 3px solid var(--lab-success); }
.topic-phase--guided { border-left: 3px solid var(--lab-warning); }
.topic-phase--closure { border-left: 3px solid var(--chip-math); }
.topic-phase--orient,
.topic-phase--explain,
.topic-phase--guided,
.topic-phase--closure {
  padding-left: var(--space-5);
  margin-left: calc(-1 * var(--space-3));
}

/* Richer lesson figures */
.topic-learning__figure {
  border: 1px solid oklch(from var(--field-accent, var(--color-primary)) l c h / 0.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 24px oklch(from var(--field-accent, var(--color-primary)) l c h / 0.08);
}

/* Key insight pull-quote */
.topic-key-insight {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, oklch(from var(--field-accent, var(--color-primary)) l c h / 0.08), oklch(from var(--field-accent, var(--color-primary)) l c h / 0.03));
  border-left: 3px solid var(--field-accent, var(--color-primary));
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Vibrant learn pager buttons */
.topic-learn-pager__btn {
  border-color: oklch(from var(--field-accent, var(--color-primary)) l c h / 0.3);
  transition: all 0.2s;
}
.topic-learn-pager__btn:hover {
  border-color: var(--field-accent, var(--color-primary));
  background: oklch(from var(--field-accent, var(--color-primary)) l c h / 0.08);
  color: var(--field-accent, var(--color-primary));
}

/* Autonomous-course inspired topic surface */
.topic-content {
  max-width: 980px;
}

.topic-main h1,
.topic-section-title,
.section-headline,
.recap-heading,
.practice-heading,
.topic-lesson-panel__title,
.topic-learning__subhead,
.lesson-section__phase-label {
  letter-spacing: 0;
}

[data-theme="light"] .topic-content,
[data-theme="light"] .lesson-section__phase-body,
[data-theme="light"] .topic-phase__body,
[data-theme="light"] .worked-example__body {
  color: oklch(0.25 0.02 50);
}

[data-theme="light"] .section-label {
  color: oklch(0.30 0.08 185);
}

[data-theme="light"] .topic-field,
[data-theme="light"] .topic-page-eyebrow {
  background: oklch(0.94 0.012 80);
  border-color: oklch(0.86 0.012 80);
  color: oklch(0.42 0.025 60);
}

.topic-learning,
.lesson-page,
.overview-page,
.connect-page,
.practice-page {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
}

.lesson-page,
.overview-page,
.connect-page,
.practice-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

.lesson-page > *,
.overview-page > *,
.connect-page > *,
.practice-page > *,
.section-explanation,
.lesson-section__phase,
.lesson-section__phase-body,
.topic-phase,
.topic-phase__body {
  min-width: 0;
  max-width: 100%;
}

.section-explanation {
  grid-template-columns: minmax(0, 1fr);
}

.lesson-hook,
.lesson-section,
.lesson-recap,
.overview-hook,
.overview-section,
.overview-recap,
.connect-hook,
.connect-section,
.connect-recap,
.practice-hook,
.practice-section,
.practice-recap {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.lesson-hook::before,
.overview-hook::before,
.connect-hook::before,
.practice-hook::before {
  display: none;
}

.hook-text,
.practice-hook__text {
  font-style: normal;
  color: var(--color-text-muted);
  max-width: 70ch;
}

.lesson-page {
  counter-reset: lesson-section;
}

.lesson-section {
  counter-increment: lesson-section;
  padding-top: var(--space-8);
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.10);
}

.lesson-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.section-headline,
.recap-heading,
.practice-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  color: oklch(from var(--color-text) l c h / 0.96);
}

.lesson-section > .section-headline::before {
  content: counter(lesson-section);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
}

.lesson-progress {
  position: sticky;
  top: calc(5rem + var(--space-3));
  z-index: 4;
  border-radius: 8px;
  background: oklch(from var(--color-bg) l c h / 0.90);
  border-color: oklch(from var(--color-text) l c h / 0.12);
  backdrop-filter: blur(16px);
}

.lesson-progress__step,
.topic-learn-pager__btn,
.topic-check__btn,
.lg-btn {
  border-radius: 8px;
}

.lesson-section__phase,
.topic-phase {
  padding: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  transition: none;
}

.lesson-section__phase + .lesson-section__phase,
.topic-phase + .topic-phase {
  margin-top: var(--space-7, 1.75rem);
}

.lesson-section__phase-label,
.topic-phase__label {
  display: block;
  width: auto;
  padding: 0 0 0.35rem;
  border-radius: 0;
  border-bottom: 2px solid oklch(from var(--color-primary) l c h / 0.20);
  background: transparent;
  color: oklch(from var(--color-primary) l c h / 0.88);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.lesson-section__phase-body,
.topic-phase__body {
  font-size: 1rem;
  line-height: 1.82;
}

.lesson-section__phase-body p,
.topic-phase__body p,
.worked-example__body,
.recap-text {
  margin-bottom: 1rem;
}

.lesson-section__phase-body strong,
.topic-phase__body strong,
.callout-formula strong,
.callout-tip strong,
.callout-warning strong,
.callout-intuition strong {
  color: oklch(from var(--color-text) l c h / 0.98);
  font-weight: 700;
}

.lesson-section__phase-body code:not(.katex-rendered),
.topic-phase__body code:not(.katex-rendered),
.worked-example code:not(.katex-rendered) {
  background: oklch(from var(--color-text) l c h / 0.055);
  border: 1px solid oklch(from var(--color-text) l c h / 0.10);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

.callout-formula,
.callout-tip,
.callout-warning,
.callout-intuition,
.topic-lesson__analogy,
.topic-lesson__funfact,
.topic-key-insight {
  margin: 1.25rem 0;
  padding: 0.9rem 1.2rem;
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
  line-height: 1.72;
  box-shadow: none;
}

.callout-formula,
.topic-key-insight {
  background: oklch(0.96 0.015 185);
  border: 1px solid oklch(0.75 0.06 185);
  border-left: 5px solid oklch(0.38 0.08 185);
  color: oklch(0.25 0.04 185);
}

.callout-tip,
.topic-lesson__funfact {
  background: oklch(0.97 0.015 140);
  border: 1px solid oklch(0.78 0.07 140);
  border-left: 5px solid oklch(0.50 0.12 140);
  color: oklch(0.25 0.05 140);
}

.callout-warning {
  background: oklch(0.97 0.015 50);
  border: 1px solid oklch(0.80 0.08 50);
  border-left: 5px solid oklch(0.65 0.14 50);
  color: oklch(0.28 0.06 50);
}

.callout-intuition,
.topic-lesson__analogy {
  background: oklch(0.97 0.015 300);
  border: 1px solid oklch(0.78 0.07 300);
  border-left: 5px solid oklch(0.50 0.12 300);
  color: oklch(0.25 0.05 300);
}

[data-theme="dark"] .callout-formula,
[data-theme="dark"] .topic-key-insight,
[data-theme="dark"] .callout-tip,
[data-theme="dark"] .topic-lesson__funfact,
[data-theme="dark"] .callout-warning,
[data-theme="dark"] .callout-intuition,
[data-theme="dark"] .topic-lesson__analogy {
  background: oklch(from var(--color-surface-2) l c h / 0.86);
}

.math-block,
.topic-math-box,
.katex-display {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  background: oklch(0.97 0.008 200);
  border-left: 4px solid oklch(0.38 0.08 185);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.5rem;
  margin: 1.25rem 0;
  overflow-x: auto;
  font-size: 1.05rem;
}

[data-theme="dark"] .math-block,
[data-theme="dark"] .topic-math-box,
[data-theme="dark"] .katex-display {
  background: oklch(from var(--color-primary) l c h / 0.10);
}

.math-block > .katex-display,
.topic-math-box > .katex-display {
  width: 100%;
  margin: 0.25rem 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.katex-rendered .katex,
.katex-display .katex {
  font-family: KaTeX_Main, 'Times New Roman', serif;
}

.worked-example,
.embedded-check,
.topic-solution-stack {
  border-radius: 0 8px 8px 0;
  box-shadow: none;
}

.lesson-animation {
  border-radius: 8px;
  background: oklch(0.97 0.008 200);
  border: 1px solid oklch(0.82 0.04 185);
  overflow: visible;
}

[data-theme="dark"] .lesson-animation {
  background: oklch(from var(--color-primary) l c h / 0.09);
}

.lesson-animation__svg {
  width: min(100%, 46rem);
  height: auto;
  min-height: 0;
  aspect-ratio: var(--lesson-svg-aspect, 16 / 9);
  overflow: visible;
}

.lesson-animation__svg text {
  paint-order: stroke;
  stroke: oklch(from var(--color-bg) l c h / 0.82);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.lesson-animation [data-anim="pulse"],
.lesson-animation [data-anim="rotate"],
.lesson-animation [data-anim="swing"] {
  transform-box: fill-box;
  transform-origin: center;
}

.lesson-animation [data-anim="slide-x"],
.lesson-animation [data-anim="slide-y"],
.lesson-animation [data-anim="fade"],
.lesson-animation [data-anim="draw"],
.lesson-animation [data-anim="dash"] {
  transform-box: view-box;
  transform-origin: center;
}

@keyframes lesson-slide-x {
  0% { opacity: 0.18; transform: translateX(-10px); }
  35%, 65% { opacity: 1; }
  100% { opacity: 0.18; transform: translateX(10px); }
}

@keyframes lesson-slide-y {
  0% { opacity: 0.18; transform: translateY(-8px); }
  35%, 65% { opacity: 1; }
  100% { opacity: 0.18; transform: translateY(8px); }
}

@keyframes lesson-draw {
  0%, 100% { opacity: 0.24; stroke-dashoffset: var(--lesson-draw-offset, 42); }
  50% { opacity: 1; stroke-dashoffset: 0; }
}

.topic-zone--lab {
  padding-top: var(--space-6);
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.10);
}

.topic-zone--lab .topic-section-title {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
}

@media (max-width: 760px) {
  .topic-content {
    max-width: 100%;
  }

  .lesson-progress {
    position: relative;
    top: auto;
  }

  .section-headline,
  .recap-heading,
  .practice-heading {
    align-items: flex-start;
  }
}