:root {
  --bg: #f5ead9;
  --bg-soft: #f0ddbf;
  --paper: rgba(255, 250, 240, 0.86);
  --paper-strong: rgba(255, 248, 233, 0.94);
  --ink: #1f2a2e;
  --muted: #596166;
  --accent: #0f766e;
  --accent-2: #d97706;
  --accent-3: #b45309;
  --line: rgba(31, 42, 46, 0.12);
  --shadow: 0 24px 80px rgba(56, 37, 18, 0.12);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --display: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(15, 118, 110, 0.15), transparent 18%),
    linear-gradient(135deg, #f8eddc 0%, #efd7af 42%, #f7f0e4 100%);
}

button,
input,
a {
  font: inherit;
}

.sidebar-toggle,
.sidebar-close {
  border: 1px solid transparent;
  border-radius: 999px;
}

.sidebar-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: rgba(22, 47, 44, 0.96);
  color: #f8f0e4;
  box-shadow: var(--shadow);
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(18, 35, 37, 0.42);
  backdrop-filter: blur(4px);
}

.sidebar-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.sidebar-close {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff3df;
}

.page-shell {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  align-items: start;
}

.sidebar,
.panel,
.hero {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px 22px;
  background:
    linear-gradient(180deg, rgba(22, 47, 44, 0.96), rgba(18, 35, 37, 0.96)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent);
  color: #f8f0e4;
}

.brand-block h1,
.hero h2,
.chapter-header h3,
.lab-header h3,
.section-heading h3 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: 0.02em;
  line-height: 0.96;
}

.brand-block h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.brand-copy,
.section-label,
.sidebar-footer,
.hero-copy p,
.lab-caption,
.annotated-copy,
.bullet-list,
.assistant-answer,
.term-detail,
.deep-dives,
.derivations,
.notes-panel {
  line-height: 1.5;
}

.eyebrow,
.section-label,
.mini-label,
.chapter-kicker {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-family: var(--display);
  color: var(--accent-2);
}

.sidebar .eyebrow,
.sidebar .section-label {
  color: #f5d08d;
}

.sidebar-section + .sidebar-section {
  margin-top: 30px;
}

.assistant-quick-actions,
.term-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-action,
.term-chip,
.chapter-link,
.action-button,
.nav-button,
.inline-term {
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.chapter-nav {
  display: grid;
  gap: 10px;
}

.sidebar-search input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff6ea;
}

.sidebar-search input::placeholder {
  color: rgba(255, 246, 234, 0.6);
}

.search-results {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.search-result {
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  cursor: pointer;
}

.search-result small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.search-result strong,
.search-result span {
  display: block;
}

.search-result span {
  margin-top: 6px;
  color: rgba(248, 240, 228, 0.82);
}

.chapter-link {
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.chapter-link.active {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(244, 171, 47, 0.16), rgba(15, 118, 110, 0.22));
  border-color: rgba(255, 231, 196, 0.35);
}

.chapter-link span {
  display: block;
}

.chapter-link-number {
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.74;
}

.chapter-link-title {
  margin-top: 5px;
  font-size: 1.05rem;
}

.sidebar-footer {
  margin-top: 28px;
}

.main-panel {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 32px;
  background:
    linear-gradient(140deg, rgba(255, 249, 238, 0.85), rgba(252, 236, 205, 0.88)),
    radial-gradient(circle at 80% 20%, rgba(15, 118, 110, 0.2), transparent 22%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0, transparent 48%, rgba(15, 118, 110, 0.08) 48.5%, transparent 49%),
    linear-gradient(transparent 0, transparent 48%, rgba(217, 119, 6, 0.08) 48.5%, transparent 49%);
  background-size: 110px 110px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 80%);
  pointer-events: none;
}

.hero h2 {
  max-width: 12ch;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 60ch;
}

.hero-subtitle {
  max-width: 58ch;
  font-size: 1.08rem;
  color: var(--muted);
}

.hero-orbit {
  position: absolute;
  inset: auto 24px 24px auto;
  width: 180px;
  height: 180px;
  opacity: 0.82;
}

.hero-orbit span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 50%;
  animation: spin 16s linear infinite;
}

.hero-orbit span:nth-child(2) {
  inset: 20px;
  animation-direction: reverse;
  animation-duration: 9s;
}

.hero-orbit span:nth-child(3) {
  inset: 55px;
  animation-duration: 6s;
}

.hero-orbit span:nth-child(4) {
  inset: 75px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.48), transparent 70%);
  border: none;
  animation: pulse 3.2s ease-in-out infinite;
}

.chapter-stage,
.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}
.detail-grid[hidden] {
  display: none;
}

.chapter-stage > .chapter-summary,
.chapter-stage > .learn-mode-container,
.chapter-stage > .discovery-mode-container,
.chapter-stage > .math-tab-container,
.chapter-stage > .test-tab-container,
.chapter-stage > #chapter-overview-body {
  grid-column: 1 / -1;
}

.panel {
  padding: 26px;
  background: var(--paper);
}

.chapter-header,
.lab-header,
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.chapter-header h3,
.lab-header h3,
.section-heading h3 {
  font-size: 2.2rem;
}

/* Chapter Tabs */

.chapter-tabs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.chapter-tab {
  padding: 9px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.chapter-tab:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.65);
}

.chapter-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Math Tab */

.math-tab-container {
  margin-top: 8px;
}

.math-tab-empty {
  padding: 24px 0;
  color: rgba(248, 240, 228, 0.5);
  font-style: italic;
}

.math-tab-topic {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  background: var(--paper);
}

.math-tab-topic > summary {
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.math-tab-topic > summary::-webkit-details-marker {
  display: none;
}

.math-tab-topic > summary h4 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--accent);
}

.math-tab-topic[open] > summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.math-tab-topic-body {
  padding: 16px 20px;
}

.math-tab-section {
  margin-bottom: 18px;
}

.math-tab-section h5 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 0.95rem;
  color: #f8f0e4;
}

.math-tab-section p {
  margin: 0;
  line-height: 1.7;
  color: rgba(248, 240, 228, 0.82);
}

.math-tab-exercises {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Test Tab */

.test-tab-container {
  margin-top: 8px;
}

.test-tab-section {
  margin-bottom: 24px;
}

.test-tab-section:last-child {
  margin-bottom: 0;
}

.test-problem-num {
  font-weight: 700;
  color: var(--ink-dim);
  margin-right: 4px;
}

.test-problem {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.4);
}

.test-problem > summary {
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  line-height: 1.6;
  color: var(--ink);
}

.test-problem > summary::-webkit-details-marker {
  display: none;
}

.test-problem[open] > summary {
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.test-problem-hint {
  padding: 14px 18px;
}

.test-problem-hint p {
  margin: 0;
  line-height: 1.7;
}

.test-problem-item {
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
  color: var(--ink);
}

.test-type-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin: 0 0 10px 0;
}

.long-problem {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.long-problem-header {
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

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

.long-problem[open] .long-problem-header {
  border-bottom: 1px solid var(--line);
}

.long-problem-body {
  padding: 18px;
}

.long-problem-image {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  background: var(--paper);
}

.long-problem-context {
  margin: 0 0 16px 0;
  line-height: 1.7;
  color: var(--ink-dim);
  font-style: italic;
}

.long-problem-part {
  margin-bottom: 12px;
}

.long-problem-part-q {
  margin: 0 0 4px 0;
  line-height: 1.6;
  font-weight: 500;
}

.long-problem-part-a {
  margin: 0;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  line-height: 1.7;
  color: var(--ink-dim);
}

.long-problem-part-a summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  list-style: none;
}

.long-problem-part-a summary::-webkit-details-marker {
  display: none;
}

.long-problem-part-a p {
  margin: 8px 0 0 0;
  color: var(--ink);
}

.view-solutions-link {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.view-solutions-link:hover {
  background: var(--accent);
  color: var(--paper-strong);
}

.answers-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 35, 37, 0.52);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

.answers-overlay[hidden] {
  display: none;
}

.answers-panel {
  width: min(90vw, 780px);
  margin: 24px auto;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--paper-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.answers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.answers-problem {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.answers-problem:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.answers-problem h3 {
  margin: 0 0 16px 0;
  font-size: 1.1rem;
}

.answers-part {
  margin-bottom: 16px;
}

.answers-part-q {
  margin: 0 0 6px 0;
  line-height: 1.6;
  font-weight: 500;
}

.answers-part-a {
  margin: 0;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  line-height: 1.7;
}

.answers-part-a p {
  margin: 0;
}

.test-mastery {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdf-link {
  align-self: start;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--paper-strong);
  background: linear-gradient(135deg, var(--accent), #134e4a);
}

.pdf-link-full {
  display: inline-flex;
}

.annotated-copy {
  margin-top: 20px;
  color: var(--ink);
  font-size: 1.06rem;
}

.source-summary-note {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(217, 119, 6, 0.08));
  border: 1px solid rgba(15, 118, 110, 0.14);
}

.source-summary-note[hidden] {
  display: none;
}

.source-summary-note h4 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.25rem;
}

.source-summary-note p {
  margin: 0;
  color: var(--muted);
}

.source-summary-note p + p {
  margin-top: 10px;
}

.annotated-copy p {
  margin: 0 0 14px;
}

.inline-term {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
  padding: 0 8px;
  background: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.16);
  color: var(--accent);
  cursor: pointer;
}

.inline-term:hover,
.inline-term:focus-visible,
.quick-action:hover,
.quick-action.active,
.term-chip:hover,
.term-chip.active,
.action-button:hover,
.nav-button:hover,
.chapter-link:hover {
  transform: translateY(-2px);
}

.goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.bullet-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.bullet-list li + li {
  margin-top: 8px;
}

.scene {
  position: relative;
  min-height: 320px;
  margin-top: 20px;
  border-radius: calc(var(--radius-lg) - 8px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15, 118, 110, 0.14), rgba(250, 243, 230, 0.88)),
    radial-gradient(circle at top center, rgba(244, 171, 47, 0.14), transparent 35%);
  border: 1px solid rgba(15, 118, 110, 0.12);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 86%);
  pointer-events: none;
}

.assistant-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 16px;
}

.assistant-controls input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  background: rgba(255, 255, 255, 0.72);
}

.quick-action,
.term-chip,
.action-button,
.nav-button {
  cursor: pointer;
}

.quick-action,
.term-chip {
  padding: 10px 14px;
  background: rgba(15, 118, 110, 0.08);
  border-color: rgba(15, 118, 110, 0.1);
  color: var(--ink);
}

.action-button,
.nav-button {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  border: 1px solid rgba(180, 83, 9, 0.12);
  color: white;
}

.assistant-answer,
.term-detail {
  min-height: 180px;
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  color: var(--muted);
}

.assistant-answer h4,
.term-detail h4 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--ink);
}

.term-source {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.term-source p {
  margin: 10px 0 0;
}

.derivations,
.deep-dives {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.derivation-card,
.dive-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.58);
  overflow: hidden;
}

.derivation-card summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.derivation-card summary::-webkit-details-marker {
  display: none;
}

.derivation-card h4,
.dive-card h4 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
}

.derivation-meta {
  color: var(--muted);
}

.derivation-body,
.dive-card {
  padding: 0 20px 18px;
}

.derivation-body ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.derivation-result {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--ink);
}

.source-derivation {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.1);
}

.source-derivation h5 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.05rem;
}

.source-derivation p {
  margin: 0;
  color: var(--muted);
}

.source-equation-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.source-equation-list li + li {
  margin-top: 6px;
}

.dive-card {
  padding-top: 18px;
}

.notes-panel iframe {
  width: 100%;
  min-height: 520px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.source-summary {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
}

.source-meta {
  margin: 0;
  color: var(--muted);
}

.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.source-link-button {
  color: var(--paper-strong);
}

.source-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.source-sections-list li.active,
.source-equations-list li.active {
  color: var(--ink);
  font-weight: 600;
}

.footer-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}

.tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(22, 47, 44, 0.96);
  color: #fcf3e5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 140ms ease;
  pointer-events: none;
}

.tooltip.visible {
  opacity: 1;
}

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

.scene-title {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 2;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(31, 42, 46, 0.72);
}

.particle,
.energy-dot,
.tile,
.card,
.band-electron,
.boson,
.star-ring,
.lattice-node,
.bar,
.wave-line,
.phase-point,
.piston-head,
.spring-ball {
  position: absolute;
}

.particle,
.energy-dot,
.band-electron,
.boson {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), #f59e0b);
  box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.08);
}

.bar {
  bottom: 28px;
  width: 44px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.82), rgba(15, 118, 110, 0.28));
  animation: barPulse 2.6s ease-in-out infinite;
}

.prob-grid .particle {
  animation: orbitProb 5.4s linear infinite;
}

.diffusion-scene .particle {
  animation: diffuse 5s linear infinite;
}

.equilibrium-beam {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 52%;
  height: 8px;
  border-radius: 999px;
  background: #37504e;
  transform-origin: center;
  animation: balance 5.2s ease-in-out infinite;
}

.equilibrium-pivot {
  position: absolute;
  left: calc(50% - 26px);
  top: 52%;
  width: 52px;
  height: 80px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: rgba(55, 80, 78, 0.9);
}

.equilibrium-weight {
  position: absolute;
  top: calc(52% + 4px);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.88), rgba(12, 74, 110, 0.72));
}

.thermometer {
  position: absolute;
  right: 14%;
  top: 18%;
  width: 48px;
  height: 210px;
  border-radius: 999px;
  border: 4px solid rgba(31, 42, 46, 0.2);
  background: rgba(255, 255, 255, 0.4);
}

.thermometer::after {
  content: "";
  position: absolute;
  inset: auto 8px 8px 8px;
  height: 58%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb7185, #d97706);
  animation: mercury 3s ease-in-out infinite;
}

.temperature-cluster .energy-dot {
  animation: jitter 1.4s ease-in-out infinite;
}

.piston-chamber {
  position: absolute;
  left: 16%;
  top: 18%;
  width: 42%;
  height: 190px;
  border: 5px solid rgba(31, 42, 46, 0.26);
  border-radius: 24px;
}

.piston-head {
  left: 18%;
  width: 38%;
  height: 20px;
  top: 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.85), rgba(15, 118, 110, 0.82));
  animation: piston 3.2s ease-in-out infinite;
}

.piston-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.72);
  animation: bounce 2.8s linear infinite;
}

.entropy-board {
  position: absolute;
  inset: 54px 18px 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.tile {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.22), rgba(217, 119, 6, 0.26));
  animation: shuffle 3.4s ease-in-out infinite;
}

.tile:nth-child(odd) {
  animation-delay: -1.2s;
}

.ensemble-stack .card {
  width: 180px;
  height: 220px;
  border-radius: 22px;
  left: calc(50% - 90px);
  top: 54px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 42, 46, 0.14);
  box-shadow: 0 16px 30px rgba(31, 42, 46, 0.08);
}

.ensemble-stack .card:nth-child(2) {
  transform: rotate(-8deg) translateX(-22px);
}

.ensemble-stack .card:nth-child(3) {
  transform: rotate(8deg) translateX(24px);
}

.ensemble-stack .card:nth-child(4) {
  transform: translateY(18px);
}

.ensemble-stack .card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 24px;
  bottom: 24px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15, 118, 110, 0.14), rgba(255, 255, 255, 0.36)),
    linear-gradient(90deg, transparent 0, transparent 48%, rgba(15, 118, 110, 0.1) 49%, transparent 50%);
}

.landscape {
  position: absolute;
  inset: auto 6% 14% 6%;
  height: 52%;
}

.landscape svg {
  width: 100%;
  height: 100%;
}

.spring-ball {
  width: 24px;
  height: 24px;
  left: 18%;
  top: 38%;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e, #0ea5e9);
  animation: rollLandscape 5s ease-in-out infinite;
}

.phase-diagram {
  position: absolute;
  inset: 54px 44px 36px 44px;
  border-left: 3px solid rgba(31, 42, 46, 0.46);
  border-bottom: 3px solid rgba(31, 42, 46, 0.46);
}

.phase-line {
  position: absolute;
  transform-origin: left center;
  height: 3px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.8);
}

.phase-point {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.9);
  animation: phaseWander 5s ease-in-out infinite;
}

.quantum-ladder {
  position: absolute;
  inset: 60px 24px 30px;
}

.energy-level {
  position: absolute;
  left: 10%;
  right: 18%;
  height: 4px;
  border-radius: 999px;
  background: rgba(31, 42, 46, 0.3);
}

.energy-level .particle {
  right: 8%;
  top: -4px;
}

.phonon-field .wave-line {
  left: 7%;
  right: 7%;
  height: 2px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.7);
  animation: waveShift 2.6s ease-in-out infinite;
}

.phonon-field .particle {
  animation: pulseTravel 3.2s linear infinite;
}

.bec-basin {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 16%;
  height: 120px;
  border-radius: 0 0 120px 120px;
  border: 4px solid rgba(31, 42, 46, 0.2);
  border-top: none;
}

.bec-cluster .boson {
  animation: condense 3.8s ease-in-out infinite;
}

.metal-lattice,
.semi-bands {
  position: absolute;
  inset: 56px 24px 24px;
}

.lattice-node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.32);
}

.electron-stream {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 20%;
  height: 68px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.1), rgba(14, 165, 233, 0.2));
}

.electron-stream .particle {
  animation: drift 3s linear infinite;
}

.band {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 56px;
  border-radius: 16px;
  background: rgba(15, 118, 110, 0.14);
}

.band.top {
  top: 34px;
}

.band.bottom {
  bottom: 34px;
}

.band-gap {
  position: absolute;
  left: 10%;
  right: 10%;
  top: calc(50% - 18px);
  height: 36px;
  border-top: 2px dashed rgba(217, 119, 6, 0.44);
  border-bottom: 2px dashed rgba(217, 119, 6, 0.44);
}

.band-electron {
  left: 40%;
  bottom: 60px;
  animation: promote 3.4s ease-in-out infinite;
}

.star-core {
  position: absolute;
  left: calc(50% - 74px);
  top: calc(50% - 74px);
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde68a, #f97316 72%, rgba(180, 83, 9, 0.96));
  box-shadow: 0 0 0 18px rgba(249, 115, 22, 0.12);
}

.star-ring {
  left: calc(50% - 110px);
  top: calc(50% - 110px);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid rgba(15, 118, 110, 0.22);
  animation: pulse 3.8s ease-in-out infinite;
}

.star-arrow {
  position: absolute;
  width: 58px;
  height: 3px;
  background: rgba(31, 42, 46, 0.4);
  transform-origin: left center;
}

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

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.68;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes barPulse {
  0%,
  100% {
    transform: scaleY(0.65);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes orbitProb {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(110px, -42px);
  }
  50% {
    transform: translate(210px, 12px);
  }
  75% {
    transform: translate(90px, 58px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes diffuse {
  0% {
    transform: translateX(-48px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateX(460px);
    opacity: 0.8;
  }
}

@keyframes balance {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

@keyframes mercury {
  0%,
  100% {
    height: 34%;
  }
  50% {
    height: 68%;
  }
}

@keyframes jitter {
  0%,
  100% {
    transform: translate(0, 0) scale(0.94);
  }
  50% {
    transform: translate(6px, -9px) scale(1.08);
  }
}

@keyframes piston {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(88px);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(70px, 42px);
  }
  50% {
    transform: translate(130px, 8px);
  }
  75% {
    transform: translate(40px, 98px);
  }
}

@keyframes shuffle {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(4px, -6px) rotate(-1deg);
  }
  50% {
    transform: translate(-3px, 5px) rotate(1deg);
  }
  75% {
    transform: translate(5px, 2px) rotate(-1deg);
  }
}

@keyframes rollLandscape {
  0%,
  100% {
    transform: translate(0, 14px);
  }
  35% {
    transform: translate(170px, 60px);
  }
  60% {
    transform: translate(250px, 16px);
  }
  100% {
    transform: translate(360px, 52px);
  }
}

@keyframes phaseWander {
  0%,
  100% {
    transform: translate(28px, 184px);
  }
  35% {
    transform: translate(150px, 102px);
  }
  65% {
    transform: translate(242px, 68px);
  }
}

@keyframes waveShift {
  0%,
  100% {
    transform: scaleX(0.96) translateY(0);
  }
  50% {
    transform: scaleX(1.03) translateY(8px);
  }
}

@keyframes pulseTravel {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(420px);
  }
}

@keyframes condense {
  0%,
  100% {
    transform: translate(0, -70px);
  }
  60% {
    transform: translate(0, 0);
  }
}

@keyframes drift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(420px);
  }
}

@keyframes promote {
  0%,
  100% {
    transform: translate(0, 0);
  }
  45% {
    transform: translate(0, -128px);
  }
  55% {
    transform: translate(36px, -128px);
  }
}

@media (max-width: 1120px) {
  .page-shell,
  .chapter-stage,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .page-shell {
    padding-top: 84px;
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  .sidebar-mobile-bar {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: min(86vw, 360px);
    max-height: none;
    overflow-y: auto;
    z-index: 40;
    transform: translateX(calc(-100% - 24px));
    transition: transform 180ms ease;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-toggle {
    opacity: 0;
    pointer-events: none;
  }

  .hero-orbit {
    width: 130px;
    height: 130px;
  }
}

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

  .panel,
  .hero,
  .sidebar {
    padding: 20px;
  }

  .hero h2 {
    font-size: 2.7rem;
  }

  .goal-grid,
  .assistant-controls,
  .footer-nav,
  .source-columns {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    display: grid;
  }
}

.quiz-deck {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.quiz-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.58);
  overflow: hidden;
}

.quiz-card summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
}

.quiz-card summary::-webkit-details-marker {
  display: none;
}

.quiz-card h4 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.25rem;
}

.quiz-card p {
  margin: 0;
  color: var(--muted);
}

.quiz-body {
  padding: 0 20px 18px;
}

.quiz-answer {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(217, 119, 6, 0.08);
}

.quiz-link,
.source-anchor-link {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  background: rgba(15, 118, 110, 0.08);
  color: var(--accent);
  cursor: pointer;
}

.notes-reader-panel iframe,
.notes-panel iframe {
  width: 100%;
  min-height: 520px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.source-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.source-sections-list,
.source-equations-list {
  padding-left: 0;
  list-style: none;
}

.source-sections-list li,
.source-equations-list li {
  margin-top: 10px;
}

.source-section-button {
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  background: rgba(15, 118, 110, 0.06);
  color: var(--ink);
  cursor: pointer;
}

.source-section-button.active {
  border-color: rgba(15, 118, 110, 0.24);
  background: rgba(15, 118, 110, 0.12);
}

.term-source-summary {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.1);
}

.roadmap-panel {
  background: linear-gradient(140deg, rgba(255, 249, 238, 0.92), rgba(247, 240, 228, 0.94));
}

.roadmap-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.roadmap-card {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.64);
}

.roadmap-card-primary {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(217, 119, 6, 0.08));
}

.roadmap-copy {
  margin: 8px 0 0;
  color: var(--ink);
}

.roadmap-watchout {
  color: var(--accent-3);
}

.roadmap-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-family: var(--display);
  background: rgba(15, 118, 110, 0.12);
  color: var(--accent);
}

.roadmap-card h4 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.25rem;
}

.roadmap-card p {
  margin: 0;
  color: var(--muted);
}

.roadmap-jump {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  background: rgba(15, 118, 110, 0.08);
  color: var(--accent);
  cursor: pointer;
}

.panel-summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 26px;
}

.panel-summary::-webkit-details-marker {
  display: none;
}

.panel-summary span {
  color: var(--muted);
  font-family: var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.notes-panel {
  overflow: hidden;
}

.notes-panel-body {
  padding: 0 26px 26px;
  border-top: 1px solid var(--line);
}

.dive-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.62);
  padding: 0;
}

.dive-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
}

.dive-card summary::-webkit-details-marker {
  display: none;
}

.dive-card h4 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
}

.dive-card span {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dive-card p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
}

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

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

.chapter-opening {
  margin-top: 20px;
}

.chapter-lede {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.65;
  color: var(--ink);
}

.chapter-bridge {
  margin: 12px 0 0;
  color: var(--muted);
}

.chapter-explanation-more {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.chapter-explanation-more summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--accent);
}

.chapter-explanation-more summary::-webkit-details-marker {
  display: none;
}

.section-guide {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.section-guide-card {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.64);
}

.section-guide-card h4 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.22rem;
}

.section-guide-card p {
  margin: 0;
  color: var(--muted);
}

.term-toggle {
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  background: rgba(15, 118, 110, 0.06);
  color: var(--accent);
  cursor: pointer;
}

.term-toggle[hidden] {
  display: none;
}

@media (max-width: 1120px) {
  .section-guide {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .section-guide {
    grid-template-columns: 1fr;
  }
}

.chapter-link-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}


.mastery-progress {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.mastery-checklist {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.mastery-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.mastery-item input {
  margin-top: 4px;
}

.mastery-item span {
  color: var(--ink);
  line-height: 1.5;
}

.mastery-item.checked {
  border-color: rgba(15, 118, 110, 0.24);
  background: rgba(15, 118, 110, 0.08);
}

/* ===== Learn Mode ===== */

.learn-mode-container {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.learn-mode-container[hidden] {
  display: none;
}

.hero[hidden] {
  display: none;
}

.learn-mode-inner {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  background: var(--paper);
}

.learn-mode-inner .chapter-header h3 {
  font-size: 2.2rem;
}

.lecture-toc {
  margin-top: 16px;
  padding: 4px 20px 4px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}

.lecture-toc[open] {
  padding: 4px 20px 12px;
}

.lecture-toc .toc-toggle {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 10px 0;
  cursor: pointer;
  list-style: revert;
}

.lecture-toc ol {
  margin: 8px 0 0;
  padding-left: 8px;
  list-style: none;
  line-height: 1.8;
}

.lecture-toc a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.92rem;
  font-family: var(--display);
}

.lecture-toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.lecture-sections {
  margin-top: 24px;
}

.lecture-section {
  margin-top: 28px;
  padding: 22px 24px;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(255, 255, 255, 0.5);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lecture-section:first-child {
  margin-top: 0;
}

.lecture-section h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  line-height: 0.96;
}

.lecture-section-body {
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.65;
}

.lecture-section-body p {
  margin: 0 0 14px;
}

.lecture-section .scene,
.lecture-scene {
  min-height: 200px;
  margin-top: 18px;
}

.lecture-math-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.lecture-derivations {
  margin-top: 28px;
}

.lecture-derivations .derivation-card {
  margin-top: 14px;
}

/* Math Prerequisite Bar */

.math-prereq-bar {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), rgba(217, 119, 6, 0.06));
  border: 1px solid rgba(15, 118, 110, 0.12);
}

.math-prereq-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.math-prereq-pill {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  background: rgba(15, 118, 110, 0.08);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  transition: transform 160ms ease, background-color 160ms ease;
}

.math-prereq-pill:hover {
  transform: translateY(-2px);
  background: rgba(15, 118, 110, 0.14);
}

/* Math Lesson Overlay */

.math-lesson-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 35, 37, 0.52);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

.math-lesson-overlay[hidden] {
  display: none;
}

.math-lesson-panel {
  width: min(90vw, 780px);
  margin: 24px auto;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--paper-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.math-lesson-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.math-lesson-header h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: 0.02em;
  line-height: 0.96;
}

.math-lesson-body {
  margin-top: 24px;
}

.math-lesson-section {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
}

.math-lesson-section:first-child {
  margin-top: 0;
}

.math-lesson-section h4 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.3rem;
}

.math-lesson-section p {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.02rem;
}

.math-lesson-interactive {
  min-height: 180px;
  margin-top: 14px;
}

.math-lesson-exercises {
  margin-top: 28px;
}

.math-exercise {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.58);
  overflow: hidden;
}

.math-exercise summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
}

.math-exercise summary::-webkit-details-marker {
  display: none;
}

.math-exercise summary h4 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--accent);
}

.math-exercise summary p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

.math-exercise-answer {
  padding: 0 20px 18px;
}

.math-exercise-answer strong {
  color: var(--accent);
  font-family: var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.math-exercise-answer p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

/* Lecture Summary */

.lecture-summary {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), rgba(217, 119, 6, 0.06));
  border: 1px solid rgba(15, 118, 110, 0.14);
}

.lecture-summary > p {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* Lecture Problems */

.lecture-problems {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
}

.lecture-problem {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(217, 119, 6, 0.06);
  border: 1px solid rgba(217, 119, 6, 0.12);
  color: var(--ink);
  line-height: 1.5;
}

.lecture-problem:first-of-type {
  margin-top: 14px;
}

/* Inline Math Link */

.inline-math-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(217, 119, 6, 0.2);
  background: rgba(217, 119, 6, 0.08);
  color: var(--accent-3);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  transition: transform 160ms ease, background-color 160ms ease;
}

.inline-math-link:hover {
  transform: translateY(-2px);
  background: rgba(217, 119, 6, 0.14);
}

.math-lesson-close {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .math-lesson-panel {
    width: 100%;
    padding: 20px;
  }

  .math-lesson-header {
    flex-direction: column;
  }

  .lecture-section {
    padding: 16px 18px;
  }

  .math-prereq-pills {
    gap: 8px;
  }
}

/* ==========================================================================
   WAVE INTERACTIVE SCENES
   ========================================================================== */

/* --- Shared scene child positioning --- */

.oscillator-scene,
.driven-scene,
.coupled-scene,
.n-modes-scene,
.fourier-scene,
.waves-scene,
.music-scene,
.ft-scene,
.impedance-scene,
.power-scene,
.wavepacket-scene,
.em-scene,
.light-scene,
.polarization-scene,
.refraction-scene,
.prism-scene,
.color-scene,
.antenna-scene,
.diffraction-scene,
.quantum-scene,
.doppler-scene,
.shm-spring-scene,
.shm-oscillator-scene,
.damped-osc-scene,
.damping-regimes-scene {
  position: absolute;
  inset: 44px 16px 16px;
}

/* ==========================================================================
   Scene 1 — Oscillator
   ========================================================================== */

.spring-coil {
  position: absolute;
  left: 12%;
  top: 8%;
  width: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

.coil-segment {
  position: relative;
  width: 28px;
  height: 10px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  border-top-color: transparent;
  animation: coilCompress 2.4s ease-in-out infinite;
}

@keyframes coilCompress {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.45); }
}

.spring-mass {
  position: absolute;
  left: 6%;
  top: 55%;
  width: 48px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #134e4a);
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.25);
  animation: massBob 2.4s ease-in-out infinite;
}

@keyframes massBob {
  0%, 100% { transform: translateY(-30px); }
  50% { transform: translateY(30px); }
}

.sine-trail {
  position: absolute;
  right: 6%;
  top: 20%;
  width: 55%;
  height: 60%;
  opacity: 0.8;
  animation: trailDraw 4s linear infinite;
}

@keyframes trailDraw {
  0% { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}

.sine-trail path {
  stroke-dasharray: 600;
  animation: trailDraw 4s linear infinite;
}

.osc-dot {
  position: absolute;
  top: 48%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.4);
  animation: oscDotMove 2.4s ease-in-out infinite;
}

@keyframes oscDotMove {
  0%, 100% { transform: translateY(-20px); opacity: 0.9; }
  50% { transform: translateY(20px); opacity: 1; }
}

.equilibrium-line {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 0;
  border-top: 2px dashed rgba(31, 42, 46, 0.2);
}

.potential-curve {
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 35%;
  height: 30%;
  opacity: 0.7;
}

.potential-curve svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Lecture-section scenes — SHM spring, SHM oscillator, damped, regimes
   ========================================================================== */

.shm-oscillator-scene,
.damped-osc-scene,
.damping-regimes-scene {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- SHM spring (mass attached to spring, vertical) -- */

.shm-ceiling {
  position: absolute;
  top: 8%;
  left: 20%;
  width: 30%;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.6;
}

.shm-spring-svg {
  position: absolute;
  left: 25%;
  top: 12%;
  width: 60px;
  height: 55%;
  animation: shmBounce 2.4s ease-in-out infinite;
}

@keyframes shmBounce {
  0%, 100% { transform: scaleY(0.78) translateY(-12px); }
  50% { transform: scaleY(1.22) translateY(12px); }
}

.shm-eq-line {
  position: absolute;
  left: 15%;
  right: 30%;
  top: 55%;
  height: 0;
  border-top: 2px dashed rgba(255,255,255,0.15);
}

.shm-arrow-up, .shm-arrow-down {
  position: absolute;
  left: 55%;
  font-size: 12px;
  opacity: 0.55;
  color: var(--accent-2);
}
.shm-arrow-up { top: 25%; }
.shm-arrow-down { top: 60%; }

/* -- SHM oscillator (sine wave with phase dot) -- */

.shm-osc-canvas {
  width: 90%;
  height: 80%;
}

.shm-phase-dot {
  animation: phaseDotMove 2.4s linear infinite;
}

@keyframes phaseDotMove {
  0%   { cx: 20;  cy: 70; }
  12.5%  { cx: 57;  cy: 10; }
  25%  { cx: 95;  cy: 70; }
  37.5%  { cx: 132; cy: 130; }
  50%  { cx: 170; cy: 70; }
  62.5%  { cx: 207; cy: 10; }
  75%  { cx: 245; cy: 70; }
  87.5%  { cx: 282; cy: 130; }
  100% { cx: 320; cy: 70; }
}

.shm-sine-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
}

/* -- Damped oscillator -- */

.damped-osc-canvas {
  width: 90%;
  height: 80%;
}

.damped-wave {
  animation: dampenFadeIn 3s ease-out infinite;
}

@keyframes dampenFadeIn {
  0% { stroke-dashoffset: 600; opacity: 0.5; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* -- Damping regimes comparison -- */

.damping-regimes-canvas {
  width: 90%;
  height: 80%;
}

/* ==========================================================================
   Scene 2 — Driven oscillator
   ========================================================================== */

.drive-piston {
  position: absolute;
  left: 4%;
  top: 38%;
  width: 30px;
  height: 50px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent-3));
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
  animation: pistonDrive 2s ease-in-out infinite;
}

@keyframes pistonDrive {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(18px); }
}

.drive-spring {
  position: absolute;
  left: 14%;
  top: 45%;
  width: 22%;
  display: flex;
  gap: 0;
  align-items: center;
}

.drive-spring .coil-segment {
  width: 20px;
  height: 20px;
  border-width: 2px;
  animation: driveCoil 2s ease-in-out infinite;
}

@keyframes driveCoil {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.6); }
}

.driven-mass {
  position: absolute;
  left: 38%;
  top: 35%;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #0ea5e9);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.25);
  animation: drivenResponse 2s ease-in-out infinite;
}

@keyframes drivenResponse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(14px); }
  75% { transform: translateX(-10px); }
}

.resonance-glow {
  position: absolute;
  left: 36%;
  top: 33%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.35), transparent 70%);
  animation: resGlow 3s ease-in-out infinite;
}

@keyframes resGlow {
  0%, 100% { transform: scale(0.6); opacity: 0.2; }
  50% { transform: scale(2.2); opacity: 0.8; }
}

.amplitude-envelope {
  position: absolute;
  right: 6%;
  top: 15%;
  width: 40%;
  height: 60%;
  opacity: 0.7;
}

.amplitude-envelope svg {
  width: 100%;
  height: 100%;
}

.drive-wave {
  position: absolute;
  top: 52%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-2);
  opacity: 0.5;
  animation: driveWavePulse 2s ease-in-out infinite;
}

@keyframes driveWavePulse {
  0%, 100% { transform: scale(0.6); opacity: 0.3; }
  50% { transform: scale(1.4); opacity: 0.8; }
}

.response-curve {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 35%;
  height: 28%;
  opacity: 0.8;
}

.response-curve svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Scene 3 — Coupled oscillators
   ========================================================================== */

.wall-left,
.wall-right {
  position: absolute;
  top: 30%;
  width: 10px;
  height: 40%;
  border-radius: 3px;
  background: rgba(31, 42, 46, 0.5);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

.wall-left {
  left: 4%;
}

.wall-right {
  right: 4%;
}

.coupled-spring {
  position: absolute;
  top: 46%;
  height: 14px;
  display: flex;
  align-items: center;
}

.coupled-spring .coil-segment {
  width: 16px;
  height: 14px;
  border-width: 1.5px;
}

.coupled-spring.spring-1 {
  left: 7%;
  width: 18%;
}

.coupled-spring.spring-2 {
  left: 37%;
  width: 20%;
}

.coupled-spring.spring-3 {
  left: 68%;
  width: 18%;
}

.coupled-mass {
  position: absolute;
  top: 40%;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.2);
}

.coupled-mass.mass-1 {
  left: 26%;
  background: linear-gradient(135deg, var(--accent), #0ea5e9);
  animation: coupledMass1 3s ease-in-out infinite;
}

.coupled-mass.mass-2 {
  left: 58%;
  background: linear-gradient(135deg, #0ea5e9, var(--accent));
  animation: coupledMass2 3s ease-in-out infinite;
}

@keyframes coupledMass1 {
  0%, 100% { transform: translateX(20px); }
  50% { transform: translateX(-20px); }
}

@keyframes coupledMass2 {
  0%, 100% { transform: translateX(-18px); }
  50% { transform: translateX(18px); }
}

.beat-envelope {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  height: 25%;
  opacity: 0.7;
}

.beat-envelope svg {
  width: 100%;
  height: 100%;
}

.energy-arrow {
  position: absolute;
  top: 55%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(217, 119, 6, 0.5);
  animation: energyBounce 3s ease-in-out infinite;
}

@keyframes energyBounce {
  0%, 100% { transform: translateX(10px) rotate(90deg); opacity: 0.3; }
  50% { transform: translateX(-10px) rotate(-90deg); opacity: 0.8; }
}

/* ==========================================================================
   Scene 4 — N-modes
   ========================================================================== */

.chain-wall-left,
.chain-wall-right {
  position: absolute;
  top: 28%;
  width: 8px;
  height: 44%;
  border-radius: 3px;
  background: rgba(31, 42, 46, 0.5);
}

.chain-wall-left {
  left: 4%;
}

.chain-wall-right {
  right: 4%;
}

.chain-mass {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #0ea5e9);
  box-shadow: 0 0 8px rgba(15, 118, 110, 0.2);
  animation: chainOscillate 3s ease-in-out infinite;
}

@keyframes chainOscillate {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--chain-amp, 12px)); }
}

.chain-spring {
  position: absolute;
  top: 49%;
  width: 8%;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0px,
    var(--accent) 2px,
    transparent 2px,
    transparent 5px
  );
  opacity: 0.5;
  animation: chainSpringStretch 3s ease-in-out infinite;
}

@keyframes chainSpringStretch {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.15); }
}

.n-modes-scene .mode-shape,
.n-modes-scene .mode-shape-2 {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 20%;
  height: 60%;
  pointer-events: none;
}

.mode-label {
  position: absolute;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.mode-label.mode-1 {
  right: 8%;
  top: 18%;
  color: rgba(99, 179, 237, 0.8);
}

.mode-label.mode-2 {
  right: 8%;
  bottom: 18%;
  color: rgba(159, 122, 234, 0.8);
}

/* ==========================================================================
   Scene 5 — Fourier series
   ========================================================================== */

.fourier-canvas {
  position: absolute;
  inset: 6% 8%;
  width: 84%;
  height: 88%;
}

.fourier-canvas .harmonic {
  animation: harmonicShimmer 4s ease-in-out infinite;
}

.fourier-canvas .harmonic.h3 {
  animation-delay: -0.6s;
}

.fourier-canvas .harmonic.h5 {
  animation-delay: -1.2s;
}

@keyframes harmonicShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.fourier-canvas .square-target {
  animation: squareFlash 4s ease-in-out infinite;
}

@keyframes squareFlash {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.freq-label {
  position: absolute;
  bottom: 8%;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  animation: freqLabelPop 4s ease-in-out infinite;
}

@keyframes freqLabelPop {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

.sum-arrow {
  position: absolute;
  right: 10%;
  top: 50%;
  width: 24px;
  height: 3px;
  background: var(--accent-2);
  border-radius: 2px;
}

.sum-arrow::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 8px solid var(--accent-2);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ==========================================================================
   Scene 6 — Waves (traveling wave)
   ========================================================================== */

.wave-canvas {
  position: absolute;
  inset: 10% 4%;
  width: 92%;
  height: 50%;
}

.wave-canvas .traveling-wave {
  animation: wavePropagateStroke 3s linear infinite;
  stroke-dasharray: 800;
}

@keyframes wavePropagateStroke {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -160; }
}

.wave-canvas .traveling-wave-2 {
  animation: wavePropagateStroke 3s linear infinite;
  animation-delay: -1s;
  stroke-dasharray: 800;
}

.medium-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.5);
  animation: mediumOscillate 3s ease-in-out infinite;
}

@keyframes mediumOscillate {
  0%, 100% { transform: translateY(-14px); }
  50% { transform: translateY(14px); }
}

.wave-direction-arrow {
  position: absolute;
  left: 50%;
  top: 16%;
  width: 60px;
  height: 3px;
  background: var(--accent-2);
  border-radius: 2px;
  animation: arrowPulse 3s ease-in-out infinite;
}

.wave-direction-arrow::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 10px solid var(--accent-2);
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.crest-label,
.trough-label {
  position: absolute;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.crest-label {
  left: 25%;
  top: 22%;
}

.trough-label {
  left: 45%;
  top: 68%;
}

.wavelength-bracket {
  position: absolute;
  left: 20%;
  bottom: 10%;
  width: 25%;
  height: 12px;
  border: 2px solid rgba(31, 42, 46, 0.25);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.wavelength-bracket::after {
  content: "lambda";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Scene 7 — Music (string harmonics)
   ========================================================================== */

.string-bridge-left,
.string-bridge-right {
  position: absolute;
  top: 10%;
  width: 8px;
  height: 80%;
  border-radius: 3px;
  background: rgba(31, 42, 46, 0.4);
}

.string-bridge-left {
  left: 2%;
}

.string-bridge-right {
  right: 2%;
}

.harmonics-canvas {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 4%;
  height: 92%;
}

.string-mode {
  animation: stringVibrate 2.5s ease-in-out infinite;
}

.string-mode.m2 {
  animation-duration: 1.8s;
}

.string-mode.m3 {
  animation-duration: 1.4s;
}

.string-mode.m4 {
  animation-duration: 1.1s;
}

@keyframes stringVibrate {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  25% { opacity: 1; transform: scaleY(1.15); }
  75% { opacity: 1; transform: scaleY(0.85); }
}

.harmonic-label {
  position: absolute;
  right: 6%;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  animation: harmonicLabelPulse 3s ease-in-out infinite;
}

@keyframes harmonicLabelPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.note-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.35);
  animation: notePulse 2s ease-in-out infinite;
}

@keyframes notePulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* ==========================================================================
   Scene 8 — Fourier Transform
   ========================================================================== */

.ft-scene {
  display: flex;
  align-items: stretch;
}

.time-domain,
.freq-domain {
  position: absolute;
  top: 8%;
  width: 38%;
  height: 55%;
}

.time-domain {
  left: 4%;
}

.freq-domain {
  right: 4%;
}

.time-domain svg,
.freq-domain svg {
  width: 100%;
  height: 100%;
}

.time-signal {
  animation: signalOsc 3s ease-in-out infinite;
}

@keyframes signalOsc {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.lorentzian-peak {
  animation: peakGlow 3s ease-in-out infinite;
}

@keyframes peakGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.envelope-decay,
.envelope-decay-2 {
  opacity: 0.5;
}

.domain-label {
  position: absolute;
  bottom: -4px;
  right: 8px;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.peak-label {
  position: absolute;
  bottom: -4px;
  left: 42%;
  font-family: var(--display);
  font-size: 0.7rem;
  color: rgba(159, 122, 234, 0.9);
}

.width-label {
  position: absolute;
  bottom: 22%;
  left: 56%;
  font-family: var(--display);
  font-size: 0.65rem;
  color: var(--muted);
}

.ft-arrow {
  position: absolute;
  left: 44%;
  top: 28%;
  width: 12%;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ft-arrow::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--accent-2);
  border-radius: 2px;
}

.ft-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-left: 10px solid var(--accent-2);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.arrow-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: arrowParticleFlow 1.5s linear infinite;
}

@keyframes arrowParticleFlow {
  0% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ==========================================================================
   Scene 9 — Impedance
   ========================================================================== */

.medium-1,
.medium-2 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.medium-1 {
  left: 0;
  background: rgba(99, 179, 237, 0.06);
  border-radius: 8px 0 0 8px;
}

.medium-2 {
  right: 0;
  background: rgba(72, 187, 120, 0.06);
  border-radius: 0 8px 8px 0;
}

.boundary-line {
  position: absolute;
  left: 50%;
  top: 4%;
  bottom: 4%;
  width: 3px;
  background: rgba(31, 42, 46, 0.35);
  border-radius: 2px;
  transform: translateX(-50%);
}

.incident-wave,
.reflected-wave,
.transmitted-wave {
  position: absolute;
  height: 30%;
}

.incident-wave {
  left: 2%;
  top: 20%;
  width: 46%;
  animation: incidentSlide 3s linear infinite;
}

@keyframes incidentSlide {
  0% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}

.reflected-wave {
  left: 2%;
  top: 55%;
  width: 46%;
  animation: reflectedSlide 3s linear infinite;
}

@keyframes reflectedSlide {
  0% { transform: translateX(8px); }
  100% { transform: translateX(-8px); }
}

.transmitted-wave {
  right: 2%;
  top: 25%;
  width: 46%;
  animation: transmittedSlide 3s linear infinite;
}

@keyframes transmittedSlide {
  0% { transform: translateX(-8px); }
  100% { transform: translateX(8px); }
}

.z-label {
  position: absolute;
  top: 8%;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.z1-label {
  left: 18%;
}

.z2-label {
  right: 18%;
}

.inc-arrow,
.ref-arrow,
.trans-arrow {
  position: absolute;
  width: 0;
  height: 0;
  animation: impArrowPulse 2s ease-in-out infinite;
}

.inc-arrow {
  top: 36%;
  border-left: 6px solid rgba(99, 179, 237, 0.7);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.ref-arrow {
  top: 70%;
  border-right: 6px solid rgba(237, 137, 54, 0.6);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.trans-arrow {
  top: 40%;
  border-left: 6px solid rgba(72, 187, 120, 0.7);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

@keyframes impArrowPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ==========================================================================
   Scene 10 — Power / energy transport
   ========================================================================== */

.power-wave {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 10%;
  height: 42%;
}

.power-wave path {
  animation: powerWaveSlide 3s linear infinite;
  stroke-dasharray: 600;
}

@keyframes powerWaveSlide {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -120; }
}

.intensity-bar {
  position: absolute;
  bottom: 18%;
  width: 6%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.7), rgba(15, 118, 110, 0.2));
  animation: intensityPulse 3s ease-in-out infinite;
}

@keyframes intensityPulse {
  0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.power-arrow {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 8%;
  height: 3px;
  background: var(--accent-2);
  border-radius: 2px;
}

.power-arrow::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 10px solid var(--accent-2);
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}

.energy-particle {
  position: absolute;
  top: 6%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: energyFlow 3s linear infinite;
}

@keyframes energyFlow {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(200px); opacity: 0; }
}

.power-label {
  position: absolute;
  right: 6%;
  bottom: 6%;
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

/* ==========================================================================
   Scene 11 — Wavepackets
   ========================================================================== */

.gaussian-envelope {
  position: absolute;
  left: 25%;
  top: 15%;
  width: 50%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(159, 122, 234, 0.12), transparent 70%);
  animation: envelopeSpread 5s ease-in-out infinite;
}

@keyframes envelopeSpread {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.3); }
}

.packet-canvas {
  position: absolute;
  inset: 10% 6%;
  width: 88%;
  height: 50%;
}

.carrier-wave {
  animation: carrierSlide 2.5s linear infinite;
  stroke-dasharray: 500;
}

@keyframes carrierSlide {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -60; }
}

.envelope-top,
.envelope-bottom {
  opacity: 0.7;
}

.group-arrow,
.phase-arrow {
  position: absolute;
  padding: 3px 10px;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #fff;
  border-radius: 8px;
}

.group-arrow {
  left: 35%;
  bottom: 16%;
  background: rgba(159, 122, 234, 0.7);
  animation: groupSlide 5s linear infinite;
}

@keyframes groupSlide {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(20px); }
}

.phase-arrow {
  left: 50%;
  bottom: 8%;
  background: rgba(99, 179, 237, 0.7);
  animation: phaseSlide 2.5s linear infinite;
}

@keyframes phaseSlide {
  0% { transform: translateX(-30px); }
  100% { transform: translateX(30px); }
}

.dispersion-dot {
  position: absolute;
  top: 45%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(159, 122, 234, 0.6);
  animation: disperse 5s ease-in-out infinite;
}

@keyframes disperse {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.8; }
  50% { transform: translateX(var(--disp-x, 12px)) scale(1.4); opacity: 0.4; }
}

/* ==========================================================================
   Scene 12 — EM waves
   ========================================================================== */

.propagation-axis {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 2px;
  background: rgba(31, 42, 46, 0.25);
  border-radius: 2px;
}

.propagation-axis::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 10px solid rgba(31, 42, 46, 0.3);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.e-field-arrow {
  position: absolute;
  top: 50%;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(237, 137, 54, 0.8), transparent);
  transform-origin: bottom center;
  animation: eFieldOsc 3s ease-in-out infinite;
}

@keyframes eFieldOsc {
  0%, 100% { transform: scaleY(1); }
  25% { transform: scaleY(-0.6); }
  75% { transform: scaleY(1.2); }
}

.b-field-arrow {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(72, 187, 120, 0.8), transparent);
  transform-origin: left center;
  animation: bFieldOsc 3s ease-in-out infinite;
}

@keyframes bFieldOsc {
  0%, 100% { transform: scaleX(1); }
  25% { transform: scaleX(-0.6); }
  75% { transform: scaleX(1.2); }
}

.e-wave-path,
.b-wave-path {
  position: absolute;
  left: 6%;
  right: 6%;
  pointer-events: none;
}

.e-wave-path {
  top: 15%;
  height: 35%;
  animation: eWaveSlide 3s linear infinite;
}

.b-wave-path {
  top: 50%;
  height: 35%;
  animation: bWaveSlide 3s linear infinite;
}

.e-wave-path svg,
.b-wave-path svg {
  width: 100%;
  height: 100%;
}

@keyframes eWaveSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-20px); }
}

@keyframes bWaveSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-20px); }
}

.field-label {
  position: absolute;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.e-label {
  left: 6%;
  top: 18%;
  color: rgba(237, 137, 54, 0.9);
}

.b-label {
  left: 6%;
  bottom: 12%;
  color: rgba(72, 187, 120, 0.9);
}

.k-label {
  right: 4%;
  top: 46%;
  color: rgba(31, 42, 46, 0.5);
}

/* ==========================================================================
   Scene 13 — Light
   ========================================================================== */

.beam-core {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 220, 80, 0.9), rgba(255, 200, 50, 0.6));
  box-shadow: 0 0 16px rgba(255, 200, 50, 0.4);
}

.e-oscillation {
  position: absolute;
  top: 30%;
  width: 4px;
  height: 40%;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(237, 137, 54, 0.7), rgba(237, 137, 54, 0.1));
  transform-origin: center bottom;
  animation: eOsc 2s ease-in-out infinite;
}

@keyframes eOsc {
  0%, 100% { transform: scaleY(1); }
  25% { transform: scaleY(-0.5); }
  75% { transform: scaleY(1.1); }
}

.beam-glow {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 35%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 220, 80, 0.2), transparent 70%);
  animation: beamGlow 3s ease-in-out infinite;
}

@keyframes beamGlow {
  0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
  50% { opacity: 0.9; transform: scaleY(1.2); }
}

.photon-dot {
  position: absolute;
  top: 47%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 220, 80, 0.9);
  box-shadow: 0 0 8px rgba(255, 200, 50, 0.6);
  animation: photonTravel 2s linear infinite;
}

@keyframes photonTravel {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(120px); opacity: 0; }
}

.spectrum-bar {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  height: 10px;
  border-radius: 999px;
  display: flex;
  overflow: hidden;
}

.spectrum-segment {
  flex: 1;
}

.spectrum-segment.red { background: rgba(255, 50, 50, 0.7); }
.spectrum-segment.orange { background: rgba(255, 165, 0, 0.7); }
.spectrum-segment.yellow { background: rgba(255, 255, 0, 0.7); }
.spectrum-segment.green { background: rgba(50, 205, 50, 0.7); }
.spectrum-segment.blue { background: rgba(30, 144, 255, 0.7); }
.spectrum-segment.violet { background: rgba(148, 0, 211, 0.7); }

/* ==========================================================================
   Scene 14 — Polarization
   ========================================================================== */

.pol-axis {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: rgba(31, 42, 46, 0.15);
  border-radius: 2px;
}

.linear-pol,
.circular-pol {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 30%;
}

.linear-pol {
  top: 12%;
}

.circular-pol {
  top: 55%;
}

.pol-arrow {
  position: absolute;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  transform-origin: center bottom;
}

.pol-arrow.linear {
  background: linear-gradient(180deg, rgba(99, 179, 237, 0.8), transparent);
  animation: linearPolOsc 2s ease-in-out infinite;
}

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

.pol-arrow.circular {
  background: linear-gradient(180deg, rgba(159, 122, 234, 0.7), transparent);
  animation: circularPolRot 3s linear infinite;
}

@keyframes circularPolRot {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pol-helix {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 24%;
}

.pol-helix svg {
  width: 100%;
  height: 100%;
}

.pol-label {
  position: absolute;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.linear-label {
  right: 6%;
  top: 18%;
}

.circular-label {
  right: 6%;
  top: 60%;
}

/* ==========================================================================
   Scene 15 — Refraction
   ========================================================================== */

.medium-air {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 50%;
  background: rgba(135, 206, 250, 0.08);
  border-radius: 8px 8px 0 0;
}

.medium-glass {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 50%;
  background: rgba(99, 179, 237, 0.12);
  border-radius: 0 0 8px 8px;
}

.refraction-boundary {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 3px;
  background: rgba(31, 42, 46, 0.3);
  border-radius: 2px;
  transform: translateY(-50%);
}

.normal-line {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 0;
  border-left: 2px dashed rgba(31, 42, 46, 0.2);
  transform: translateX(-50%);
}

.incident-ray {
  position: absolute;
  left: 22%;
  top: 8%;
  width: 4px;
  height: 48%;
  background: linear-gradient(180deg, rgba(99, 179, 237, 0.9), rgba(99, 179, 237, 0.4));
  border-radius: 2px;
  transform: rotate(-25deg);
  transform-origin: bottom center;
  animation: incidentRayPulse 3s ease-in-out infinite;
}

@keyframes incidentRayPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.refracted-ray {
  position: absolute;
  left: 48%;
  top: 50%;
  width: 4px;
  height: 44%;
  background: linear-gradient(180deg, rgba(72, 187, 120, 0.5), rgba(72, 187, 120, 0.9));
  border-radius: 2px;
  transform: rotate(-15deg);
  transform-origin: top center;
  animation: refractedRayPulse 3s ease-in-out infinite;
}

@keyframes refractedRayPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.reflected-ray-small {
  position: absolute;
  left: 60%;
  top: 8%;
  width: 3px;
  height: 44%;
  background: linear-gradient(180deg, rgba(237, 137, 54, 0.3), rgba(237, 137, 54, 0.6));
  border-radius: 2px;
  transform: rotate(25deg);
  transform-origin: bottom center;
  opacity: 0.5;
}

.wavefront-line {
  position: absolute;
  width: 30%;
  height: 2px;
  border-radius: 2px;
}

.wavefront-line.inc {
  left: 12%;
  background: rgba(99, 179, 237, 0.4);
  transform: rotate(-25deg);
  animation: wfSlideDown 3s linear infinite;
}

.wavefront-line.ref {
  left: 35%;
  background: rgba(72, 187, 120, 0.3);
  transform: rotate(-15deg);
  animation: wfSlideDown 3s linear infinite;
}

@keyframes wfSlideDown {
  0% { opacity: 0; transform: translateY(-10px) rotate(inherit); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(10px) rotate(inherit); }
}

.angle-label {
  position: absolute;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.angle-label.theta1 {
  left: 52%;
  top: 34%;
}

.angle-label.theta2 {
  left: 52%;
  top: 58%;
}

.medium-label {
  position: absolute;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.medium-label.air-label {
  right: 8%;
  top: 8%;
}

.medium-label.glass-label {
  right: 8%;
  bottom: 8%;
}

/* ==========================================================================
   Scene 16 — Prisms
   ========================================================================== */

.prism-body {
  position: absolute;
  left: 30%;
  top: 10%;
  width: 40%;
  height: 80%;
}

.prism-body svg {
  width: 100%;
  height: 100%;
}

.white-beam {
  position: absolute;
  left: 4%;
  top: 38%;
  width: 30%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 240, 0.7));
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  animation: beamEnter 3s ease-in-out infinite;
}

@keyframes beamEnter {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.spectrum-ray {
  position: absolute;
  right: 4%;
  width: 28%;
  height: 3px;
  border-radius: 999px;
  transform-origin: left center;
  animation: spectrumSpread 4s ease-in-out infinite;
}

.spectrum-ray:nth-child(3) { top: 30%; }
.spectrum-ray:nth-child(4) { top: 36%; }
.spectrum-ray:nth-child(5) { top: 42%; }
.spectrum-ray:nth-child(6) { top: 48%; }
.spectrum-ray:nth-child(7) { top: 54%; }
.spectrum-ray:nth-child(8) { top: 60%; }

@keyframes spectrumSpread {
  0%, 100% { transform: scaleX(0.7) rotate(var(--ray-angle, 0deg)); opacity: 0.5; }
  50% { transform: scaleX(1) rotate(var(--ray-angle, 0deg)); opacity: 1; }
}

.prism-photon {
  position: absolute;
  top: 40%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  animation: prismPhotonFlow 3s linear infinite;
}

@keyframes prismPhotonFlow {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translateX(180px); opacity: 0; }
}

/* ==========================================================================
   Scene 17 — Color mixing
   ========================================================================== */

.color-circle {
  position: absolute;
  width: 36%;
  height: 55%;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: colorPulse 4s ease-in-out infinite;
}

.color-circle.red {
  left: 18%;
  top: 8%;
  background: radial-gradient(circle, rgba(255, 60, 60, 0.55), rgba(255, 60, 60, 0.1));
}

.color-circle.green {
  right: 18%;
  top: 8%;
  background: radial-gradient(circle, rgba(50, 205, 50, 0.55), rgba(50, 205, 50, 0.1));
  animation-delay: -1.3s;
}

.color-circle.blue {
  left: 32%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(30, 144, 255, 0.55), rgba(30, 144, 255, 0.1));
  animation-delay: -2.6s;
}

@keyframes colorPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}

.color-overlap {
  position: absolute;
  width: 14%;
  height: 20%;
  border-radius: 50%;
  opacity: 0.5;
}

.color-overlap.rg {
  left: 42%;
  top: 18%;
  background: rgba(255, 255, 0, 0.45);
}

.color-overlap.gb {
  right: 32%;
  top: 50%;
  background: rgba(0, 255, 255, 0.45);
}

.color-overlap.rb {
  left: 30%;
  top: 50%;
  background: rgba(255, 0, 255, 0.45);
}

.color-overlap-center {
  position: absolute;
  left: 42%;
  top: 38%;
  width: 12%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
  animation: whitePulse 4s ease-in-out infinite;
}

@keyframes whitePulse {
  0%, 100% { transform: scale(0.85); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.9; }
}

.color-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: colorDotFloat 5s ease-in-out infinite;
}

@keyframes colorDotFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50% { transform: translate(4px, -6px); opacity: 0.9; }
}

.color-label,
.mix-label {
  position: absolute;
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.r-label { left: 22%; top: 6%; color: rgba(255, 60, 60, 0.8); }
.g-label { right: 22%; top: 6%; color: rgba(50, 205, 50, 0.8); }
.b-label { left: 40%; bottom: 4%; color: rgba(30, 144, 255, 0.8); }

.mix-label {
  font-size: 0.62rem;
  color: var(--muted);
}

.yellow-label { left: 42%; top: 12%; }
.cyan-label { right: 28%; top: 52%; }
.magenta-label { left: 24%; top: 52%; }
.white-label { left: 46%; top: 40%; color: rgba(31, 42, 46, 0.6); }

/* ==========================================================================
   Scene 18 — Antennas
   ========================================================================== */

.dipole-rod {
  position: absolute;
  left: calc(50% - 3px);
  top: 20%;
  width: 6px;
  height: 60%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(31, 42, 46, 0.6), rgba(31, 42, 46, 0.35));
}

.dipole-feed {
  position: absolute;
  left: calc(50% - 6px);
  top: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.5);
  animation: feedPulse 2s ease-in-out infinite;
}

@keyframes feedPulse {
  0%, 100% { transform: scale(0.8); box-shadow: 0 0 6px rgba(217, 119, 6, 0.3); }
  50% { transform: scale(1.2); box-shadow: 0 0 18px rgba(217, 119, 6, 0.6); }
}

.wavefront-circle {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(99, 179, 237, 0.35);
  transform: translate(-50%, -50%);
  animation: wavefrontExpand 3s ease-out infinite;
}

@keyframes wavefrontExpand {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.radiation-lobe {
  position: absolute;
  left: calc(50% - 40px);
  width: 80px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid rgba(72, 187, 120, 0.3);
  background: rgba(72, 187, 120, 0.06);
  animation: lobePulse 3s ease-in-out infinite;
}

.radiation-lobe.lobe-top {
  top: 12%;
}

.radiation-lobe.lobe-bottom {
  bottom: 12%;
}

@keyframes lobePulse {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.9; }
}

.rad-arrow {
  position: absolute;
  left: calc(50% - 2px);
  top: calc(50% - 2px);
  width: 35px;
  height: 3px;
  border-radius: 2px;
  background: rgba(237, 137, 54, 0.4);
  transform-origin: left center;
  animation: radArrowPulse 3s ease-in-out infinite;
}

@keyframes radArrowPulse {
  0%, 100% { opacity: 0.2; transform: rotate(var(--rad-angle, 0deg)) scaleX(0.6); }
  50% { opacity: 0.7; transform: rotate(var(--rad-angle, 0deg)) scaleX(1); }
}

.antenna-label {
  position: absolute;
  right: 8%;
  bottom: 8%;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 8px;
}

/* ==========================================================================
   Scene 19 — Diffraction
   ========================================================================== */

.diff-barrier {
  position: absolute;
  left: 38%;
  top: 0;
  bottom: 0;
  width: 8px;
  background: rgba(31, 42, 46, 0.5);
  border-radius: 3px;
}

.diff-slit {
  position: absolute;
  left: 37%;
  top: 40%;
  width: 12px;
  height: 20%;
  background: transparent;
  z-index: 2;
  box-shadow:
    -2px 0 0 rgba(31, 42, 46, 0.5),
    2px 0 0 rgba(31, 42, 46, 0.5);
}

.incoming-wavefront {
  position: absolute;
  top: 10%;
  height: 80%;
  width: 2px;
  border-radius: 2px;
  background: rgba(99, 179, 237, 0.45);
  animation: incomingWfSlide 3s linear infinite;
}

@keyframes incomingWfSlide {
  0% { transform: translateX(0); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateX(60px); opacity: 0; }
}

.huygens-wavelet {
  position: absolute;
  left: 42%;
  top: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(72, 187, 120, 0.35);
  transform: translate(-10%, -50%);
  animation: huygensExpand 3.5s ease-out infinite;
}

@keyframes huygensExpand {
  0% { transform: translate(-10%, -50%) scale(0.2); opacity: 0.8; }
  100% { transform: translate(-10%, -50%) scale(2.5); opacity: 0; }
}

.intensity-screen {
  position: absolute;
  right: 4%;
  top: 10%;
  width: 8%;
  height: 80%;
}

.intensity-screen svg {
  width: 100%;
  height: 100%;
}

.diffraction-dot {
  position: absolute;
  right: 8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(99, 179, 237, 0.7);
  animation: diffDotPulse 3s ease-in-out infinite;
}

@keyframes diffDotPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.4; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* ==========================================================================
   Scene 20 — Quantum (particle in a well)
   ========================================================================== */

.potential-well {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 8%;
  height: 82%;
}

.potential-well svg {
  width: 100%;
  height: 100%;
}

.wavefunction-canvas {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 12%;
  height: 70%;
}

.psi-1 {
  animation: psiOsc 3s ease-in-out infinite;
}

.psi-2 {
  animation: psiOsc 2.2s ease-in-out infinite;
  animation-delay: -0.5s;
}

.psi-3 {
  animation: psiOsc 1.6s ease-in-out infinite;
  animation-delay: -1s;
}

@keyframes psiOsc {
  0%, 100% { opacity: 0.5; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.08); }
}

.energy-level-line {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 2px;
  background: rgba(31, 42, 46, 0.2);
  border-radius: 2px;
  animation: levelGlow 4s ease-in-out infinite;
}

.energy-level-line span {
  position: absolute;
  right: -30px;
  top: -8px;
  font-family: var(--display);
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

@keyframes levelGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.prob-dot {
  position: absolute;
  top: 55%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(99, 179, 237, 0.6);
  animation: probJump 3s ease-in-out infinite;
}

@keyframes probJump {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-20px); opacity: 1; }
  70% { transform: translateY(10px); opacity: 0.7; }
}

.quantum-label {
  position: absolute;
  right: 6%;
  bottom: 6%;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 8px;
}

/* ==========================================================================
   Scene 21 — Doppler effect
   ========================================================================== */

.doppler-source {
  position: absolute;
  left: 42%;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), #f59e0b);
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.4);
  animation: dopplerMove 4s ease-in-out infinite;
}

@keyframes dopplerMove {
  0%, 100% { transform: translateX(-40px); }
  50% { transform: translateX(40px); }
}

.doppler-wavefront {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(99, 179, 237, 0.3);
  transform: translate(-50%, -50%);
  animation: dopplerExpand 4s ease-out infinite;
}

@keyframes dopplerExpand {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.7; border-color: rgba(99, 179, 237, 0.6); }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

.observer-ahead,
.observer-behind {
  position: absolute;
  top: calc(50% - 14px);
  display: flex;
  align-items: center;
  gap: 6px;
}

.observer-ahead {
  right: 6%;
}

.observer-behind {
  left: 6%;
}

.obs-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(31, 42, 46, 0.35);
  border: 2px solid rgba(31, 42, 46, 0.25);
}

.obs-label {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.source-velocity-arrow {
  position: absolute;
  left: 45%;
  top: 28%;
  width: 50px;
  height: 3px;
  background: var(--accent-2);
  border-radius: 2px;
  animation: velArrowSlide 4s ease-in-out infinite;
}

.source-velocity-arrow::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 10px solid var(--accent-2);
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}

@keyframes velArrowSlide {
  0%, 100% { transform: translateX(-30px); opacity: 0.5; }
  50% { transform: translateX(30px); opacity: 1; }
}

.compressed-wave {
  position: absolute;
  top: 42%;
  width: 3px;
  height: 16%;
  border-radius: 2px;
  background: rgba(99, 179, 237, 0.5);
  animation: compWavePulse 2s ease-in-out infinite;
}

@keyframes compWavePulse {
  0%, 100% { transform: scaleY(0.7); opacity: 0.4; }
  50% { transform: scaleY(1.3); opacity: 0.9; }
}

.stretched-wave {
  position: absolute;
  top: 42%;
  width: 3px;
  height: 16%;
  border-radius: 2px;
  background: rgba(237, 137, 54, 0.4);
  animation: stretchWavePulse 2.5s ease-in-out infinite;
}

@keyframes stretchWavePulse {
  0%, 100% { transform: scaleY(1.2); opacity: 0.4; }
  50% { transform: scaleY(0.6); opacity: 0.8; }
}

/* ===== Interactive Scene Labels & Captions ===== */
.scene-label {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 16px 18px 2px;
}

.interactive-anchor {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.interactive-anchor:visited,
.interactive-anchor:hover,
.interactive-anchor:active {
  color: inherit;
  text-decoration: none;
}

.interactive-highlight {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
  transition: outline-color 0.5s;
}

.interactive-highlight.fade {
  outline-color: transparent;
}

.scene-caption {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 18px 8px;
  max-width: 550px;
}

/* ===== Interactive Scene Controls ===== */
.interactive-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.interactive-scene canvas {
  max-width: 100%;
  border-radius: 8px;
  cursor: default;
  background: #faf5ec;
}

.scene-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink);
}

.scene-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent);
}

.scene-controls input[type="range"] {
  width: 100px;
  accent-color: var(--accent);
}

.scene-val {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 12px;
  color: var(--muted);
  min-width: 32px;
}

.scene-btn {
  padding: 4px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--body);
}

.scene-btn:hover {
  opacity: 0.85;
}

.scene-btn-active {
  background: #1f2a2e;
  box-shadow: 0 0 0 2px var(--accent);
}

.w-play-btn {
  transition: background 0.15s;
}

/* ===== Fourier Magnitude vs Phase Interactive ===== */
#fmp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
}
.fmp-top {
  display: flex;
  gap: 32px;
  justify-content: center;
}
.fmp-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fmp-panel canvas {
  border: 3px solid var(--rule, #d4c9b8);
  border-radius: 6px;
  image-rendering: pixelated;
  width: 160px;
  height: 160px;
  background: #000;
}
.fmp-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  max-width: 220px;
}
.fmp-btn-group .scene-btn {
  font-size: 11px;
  padding: 2px 8px;
}
.fmp-panel-label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.fmp-bottom {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.fmp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fmp-cell canvas {
  border: 2px solid var(--rule, #d4c9b8);
  border-radius: 4px;
  image-rendering: pixelated;
  width: 128px;
  height: 128px;
  background: #000;
}
.fmp-cell-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.fmp-cell-label.fmp-highlight {
  color: var(--accent);
}
.fmp-result canvas {
  border-color: var(--accent, #0f766e);
}
.fmp-verdict {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  max-width: 500px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ── Discovery mode (Intuition → Guided Discovery) ── */

.discovery-mode-container {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.discovery-mode-container[hidden] {
  display: none;
}

.discovery-lab-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.discovery-lab-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.discovery-lab-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.discovery-lab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.discovery-interactive {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.discovery-interactive .scene {
  min-height: 200px;
}

.discovery-questions {
  display: grid;
  gap: 16px;
}

.discovery-question-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: grid;
  gap: 0;
}

.discovery-question {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.discovery-question h4 {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}

.discovery-try summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.discovery-try summary::-webkit-details-marker {
  display: none;
}
.discovery-try summary::before {
  content: "▶";
  font-size: 10px;
  transition: transform 0.2s;
}
.discovery-try[open] summary::before {
  transform: rotate(90deg);
}

.discovery-try p {
  padding: 0 0 16px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

.discovery-answer-wrapper {
  padding-top: 14px;
}
.discovery-answer-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent-2);
  cursor: pointer;
  transition: all 0.15s;
}
.discovery-answer-btn:hover {
  background: var(--accent-2);
  color: #fff;
}
.discovery-answer-btn.revealed {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.discovery-answer-btn.revealed:hover {
  border-color: var(--muted);
  background: transparent;
  color: var(--ink);
}
.discovery-answer-body {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-card, var(--bg));
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.discovery-answer-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

.discovery-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--muted);
  padding: 48px 26px;
}

/* Landing page */
.landing-chapters {
  padding: 0 0 48px;
}

.landing-chapters .section-heading {
  margin-bottom: 24px;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.landing-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
}

.landing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-1);
}

.landing-card-number {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-family: var(--display);
  color: var(--accent-2);
}

.landing-card-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}

.landing-card-caption {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.brand-block {
  cursor: pointer;
}

.landing-chapters[hidden] {
  display: none;
}

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