/* Shared sizing / motion (theme-agnostic) */
  :root {
    --mw-body-size: 15.5px;
    --mw-board-eq-size: 1.55rem;
    --mw-board-bullet-size: 1.18rem;
    --mw-board-title-size: 1.45rem;
    --mw-ascii-size: 13px;
    --mw-chalk-stroke-width: 2.1;
    --mw-chalk-duration: 2600ms;
    --mw-radius-md: 8px;
    --mw-radius-lg: 18px;
    --mw-radius-pill: 999px;
    --mw-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --mw-font-display: "Inter", system-ui, sans-serif;
    --mw-space-1: 8px;
    --mw-space-2: 16px;
    --mw-space-3: 24px;
    --mw-space-4: 32px;
    --mw-space-5: 40px;
    --mw-space-6: 48px;
  }

  /* Studio (default) — aligned with lesson_theater.css */
  body[data-lesson-theme="studio"],
  .mw-lesson-v1[data-theme="studio"],
  .mw-lesson-v1:not([data-theme]) {
    color-scheme: dark;
    --mw-bg: #02040a;
    --mw-bg-soft: #0a1115;
    --mw-fg: #f5f8fa;
    --mw-green: #1a262a;
    --mw-card: #131c20;
    --mw-card-border: rgba(255, 255, 255, 0.08);
    --mw-gold: #f6d365;
    --mw-gold-2: #e8c04a;
    --mw-gold-soft: rgba(246, 211, 101, 0.16);
    --mw-gold-faint: rgba(246, 211, 101, 0.08);
    --mw-accent-ink: #1a1500;
    --mw-cta-grad: linear-gradient(90deg, #f6d365, #e8c04a);
    --mw-text-main: var(--mw-fg);
    --mw-text-muted: #b7c1c9;
    --mw-placeholder-fg: #9aa6b2;
    --mw-chalk-color: #f5f8fa;
    --mw-chalk-color-dim: rgba(245, 248, 250, 0.72);
    --mw-chalk-accent: #f6d365;
    --mw-page-bg:
      radial-gradient(circle at 12% 0%, rgba(246, 211, 101, 0.07), transparent 42%),
      linear-gradient(180deg, #0a1115 0%, #02040a 100%);
    --mw-pane-bg: var(--mw-card);
    --mw-pane-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    --mw-topbar-bg: linear-gradient(180deg, rgba(246, 211, 101, 0.06), transparent);
    --mw-input-bg: rgba(0, 0, 0, 0.32);
    --mw-input-border: var(--mw-card-border);
    --mw-board-surface: linear-gradient(165deg, #111a1d 0%, #0a1115 100%);
    --mw-board-inner-border: 1px solid rgba(255, 255, 255, 0.08);
    --mw-board-outer-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 12px 28px rgba(0, 0, 0, 0.4);
    --mw-action-bar-bg: rgba(19, 28, 32, 0.92);
    --mw-hero-surface: var(--mw-card);
    --mw-board-border: rgba(255, 255, 255, 0.08);
    --mw-mermaid-node-fill: rgba(19, 28, 32, 0.95);
    --mw-mermaid-edge: #f5f8fa;
    --mw-mermaid-marker-fill: #f5f8fa;
    --lt-bg: var(--mw-bg);
    --lt-surface: #131c20;
    --lt-surface-hi: #1a262a;
    --lt-surface-top: #1f2d32;
    --lt-border: var(--mw-card-border);
    --lt-primary: var(--mw-gold);
    --lt-primary-strong: var(--mw-gold-2);
    --lt-text: var(--mw-text-main);
    --lt-muted: var(--mw-text-muted);
    --lt-gold: var(--mw-gold);
  }

  /* Light — exam walkthrough-inspired */
  body[data-lesson-theme="light"],
  .mw-lesson-v1[data-theme="light"] {
    color-scheme: light;
    --mw-bg: #f7f8fb;
    --mw-bg-soft: #ffffff;
    --mw-fg: #0f172a;
    --mw-green: #e8ecf4;
    --mw-card: #ffffff;
    --mw-card-border: #e4e7ee;
    --mw-gold: #d4a017;
    --mw-gold-2: #b8860b;
    --mw-gold-soft: rgba(212, 160, 23, 0.14);
    --mw-gold-faint: rgba(212, 160, 23, 0.08);
    --mw-accent-ink: #1a1500;
    --mw-cta-grad: linear-gradient(90deg, #f6d365, #e8c04a);
    --mw-text-main: var(--mw-fg);
    --mw-text-muted: #5b6472;
    --mw-placeholder-fg: #8891a1;
    --mw-chalk-color: #1e293b;
    --mw-chalk-color-dim: rgba(30, 41, 59, 0.72);
    --mw-chalk-accent: #b8860b;
    --mw-page-bg: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
    --mw-pane-bg: var(--mw-card);
    --mw-pane-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.06);
    --mw-topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 248, 251, 0.95));
    --mw-input-bg: #fafbfd;
    --mw-input-border: #d1d6df;
    --mw-board-surface: linear-gradient(165deg, #fafbfd 0%, #f1f3f7 100%);
    --mw-board-inner-border: 1px solid #e4e7ee;
    --mw-board-outer-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --mw-action-bar-bg: rgba(255, 255, 255, 0.94);
    --mw-hero-surface: var(--mw-card);
    --mw-board-border: #e4e7ee;
    --mw-mermaid-node-fill: rgba(241, 243, 247, 0.95);
    --mw-mermaid-edge: rgba(30, 41, 59, 0.75);
    --lt-bg: var(--mw-bg);
    --lt-surface: #ffffff;
    --lt-surface-hi: #f8fafc;
    --lt-surface-top: #f1f3f7;
    --lt-border: var(--mw-card-border);
    --lt-primary: var(--mw-gold);
    --lt-primary-strong: var(--mw-gold-2);
    --lt-text: var(--mw-text-main);
    --lt-muted: var(--mw-text-muted);
    --lt-gold: var(--mw-gold);
  }

  /* Classic — legacy forest + gold */
  body[data-lesson-theme="classic"],
  .mw-lesson-v1[data-theme="classic"] {
    color-scheme: dark;
    --mw-bg: #050807;
    --mw-bg-soft: #0a1210;
    --mw-fg: #e9e4d6;
    --mw-green: #0e3b2d;
    --mw-card: rgba(14, 59, 45, 0.28);
    --mw-card-border: rgba(24, 78, 62, 0.55);
    --mw-gold: #d9a441;
    --mw-gold-2: #b8862c;
    --mw-gold-soft: rgba(217, 164, 65, 0.34);
    --mw-gold-faint: rgba(217, 164, 65, 0.12);
    --mw-accent-ink: #111;
    --mw-cta-grad: linear-gradient(90deg, #d9a441, #0e3b2d);
    --mw-text-main: var(--mw-fg);
    --mw-text-muted: rgba(233, 228, 214, 0.78);
    --mw-placeholder-fg: rgba(233, 228, 214, 0.88);
    --mw-chalk-color: #f7f2d8;
    --mw-chalk-color-dim: rgba(247, 242, 216, 0.72);
    --mw-chalk-accent: #fde68a;
    --mw-page-bg:
      radial-gradient(circle at top left, rgba(217, 164, 65, 0.14), transparent 52%),
      radial-gradient(circle at top right, rgba(14, 59, 45, 0.35), transparent 58%),
      linear-gradient(to bottom, var(--mw-bg), #070d0a);
    --mw-pane-bg:
      radial-gradient(circle at top right, rgba(217, 164, 65, 0.07), transparent 58%),
      linear-gradient(165deg, rgba(14, 59, 45, 0.18), rgba(5, 8, 7, 0.88));
    --mw-pane-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
    --mw-topbar-bg: linear-gradient(180deg, rgba(14, 59, 45, 0.22), rgba(5, 8, 7, 0.92));
    --mw-input-bg: rgba(5, 8, 7, 0.75);
    --mw-input-border: var(--mw-card-border);
    --mw-board-surface:
      radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.035), transparent 55%),
      radial-gradient(circle at 88% 92%, rgba(34, 48, 44, 0.55), transparent 62%),
      linear-gradient(160deg, #070d0b 0%, #0b1513 48%, #050a09 100%);
    --mw-board-inner-border: 1px solid rgba(255, 255, 255, 0.055);
    --mw-board-outer-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      inset 0 2px 45px rgba(0, 0, 0, 0.55),
      0 20px 38px rgba(0, 0, 0, 0.55);
    --mw-action-bar-bg: linear-gradient(165deg, rgba(14, 59, 45, 0.22), rgba(5, 8, 7, 0.92));
    --mw-hero-surface: rgba(14, 59, 45, 0.2);
    --mw-board-border: rgba(247, 242, 216, 0.06);
    --mw-mermaid-node-fill: rgba(14, 59, 45, 0.35);
    --mw-mermaid-edge: rgba(247, 242, 216, 0.85);
    --lt-bg: var(--mw-bg);
    --lt-surface: rgba(14, 59, 45, 0.2);
    --lt-surface-hi: rgba(24, 78, 62, 0.25);
    --lt-surface-top: rgba(24, 78, 62, 0.35);
    --lt-border: var(--mw-card-border);
    --lt-primary: var(--mw-gold);
    --lt-primary-strong: var(--mw-gold-2);
    --lt-text: var(--mw-text-main);
    --lt-muted: var(--mw-text-muted);
    --lt-gold: var(--mw-gold);
  }

  /* Minimal — navy charcoal, borderless depth, Inter UI */
  body[data-lesson-theme="minimal"],
  .mw-lesson-v1[data-theme="minimal"] {
    color-scheme: dark;
    --mw-bg: #0f172a;
    --mw-bg-soft: #1e293b;
    --mw-bg-elevated: #334155;
    --mw-fg: #f8fafc;
    --mw-green: #1e293b;
    --mw-card: rgba(30, 41, 59, 0.55);
    --mw-card-border: transparent;
    --mw-gold: #f6d365;
    --mw-gold-2: #e8c04a;
    --mw-gold-soft: rgba(246, 211, 101, 0.14);
    --mw-gold-faint: rgba(246, 211, 101, 0.08);
    --mw-accent-ink: #0f172a;
    --mw-cta-grad: linear-gradient(90deg, #f6d365, #e8c04a);
    --mw-text-main: var(--mw-fg);
    --mw-text-muted: #94a3b8;
    --mw-placeholder-fg: #64748b;
    --mw-chalk-color: #f5f8fa;
    --mw-chalk-color-dim: rgba(245, 248, 250, 0.72);
    --mw-chalk-accent: #f6d365;
    --mw-page-bg: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
    --mw-pane-bg: var(--mw-bg-soft);
    --mw-pane-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    --mw-topbar-bg: var(--mw-bg-soft);
    --mw-input-bg: rgba(30, 41, 59, 0.5);
    --mw-input-border: rgba(148, 163, 184, 0.18);
    --mw-board-surface: linear-gradient(165deg, #1e293b 0%, #0f172a 100%);
    --mw-board-inner-border: none;
    --mw-board-outer-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    --mw-action-bar-bg: rgba(30, 41, 59, 0.92);
    --mw-hero-surface: var(--mw-bg-soft);
    --mw-board-border: rgba(148, 163, 184, 0.12);
    --mw-mermaid-node-fill: rgba(30, 41, 59, 0.65);
    --mw-mermaid-edge: rgba(248, 250, 252, 0.85);
    --lt-bg: var(--mw-bg);
    --lt-surface: #1e293b;
    --lt-surface-hi: #334155;
    --lt-surface-top: #475569;
    --lt-border: rgba(148, 163, 184, 0.12);
    --lt-primary: var(--mw-gold);
    --lt-primary-strong: var(--mw-gold-2);
    --lt-text: var(--mw-text-main);
    --lt-muted: var(--mw-text-muted);
    --lt-gold: var(--mw-gold);
  }

  html {
    scrollbar-gutter: stable;
  }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--mw-page-bg, #02040a);
    color: var(--mw-text-main, #f5f8fa);
    font: var(--mw-body-size) / 1.55 var(--mw-font);
    -webkit-font-smoothing: antialiased;
  }

  body.cookie-banner-open {
    padding-bottom: 7.5rem;
  }
  
  /* Line-by-line highlighting */
  .current-span {
    background-color: rgba(246, 211, 101, 0.3) !important;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .has-current-span {
    position: relative;
  }

  .wrap {
    max-width: min(1680px, 98vw);
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
  }

  /* ===== HERO ===== */
  .mw-hero {
    margin: 1.2rem auto 1.4rem;
    border-radius: 1.7rem;
    padding: 1.7rem 1.6rem;
    background:
      radial-gradient(circle at top left, rgba(246, 211, 101, 0.18), transparent 55%),
      radial-gradient(circle at bottom right, rgba(88, 255, 207, 0.14), transparent 60%),
      linear-gradient(135deg, #02040a, #051217);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 20px 45px rgba(0, 0, 0, 0.85),
      0 0 20px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    display: flex;
    align-items: center;
    gap: 1.8rem;
  }

  .mw-hero-logo-card {
    position: relative;
    padding: 1.1rem 1.25rem 1rem;
    border-radius: 1.6rem;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 55%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      0 16px 32px rgba(0, 0, 0, 0.9),
      0 0 20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mw-float 9s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
  }
  
  .mw-hero-logo-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
      0 22px 45px rgba(0, 0, 0, 0.95),
      0 0 22px rgba(246, 211, 101, 0.3);
  }

  .mw-hero-logo-glow {
    position: absolute;
    inset: -40%;
    background:
      radial-gradient(circle at 15% 0%, rgba(246, 211, 101, 0.26), transparent 60%),
      radial-gradient(circle at 80% 90%, rgba(88, 255, 207, 0.18), transparent 60%);
    opacity: 0.8;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .mw-hero-logo-card::before,
  .mw-hero-logo-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 999px;
    background: radial-gradient(circle, var(--mw-gold-soft) 0, transparent 60%);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transform: scale(0.7);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
  .mw-hero-logo-card::before {
    top: -40px;
    left: -32px;
  }
  .mw-hero-logo-card::after {
    bottom: -45px;
    right: -30px;
  }

  .mw-hero-logo-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 22px 45px rgba(0, 0, 0, 0.95),
      0 0 22px var(--mw-gold-faint);
  }
  .mw-hero-logo-card:hover::before,
  .mw-hero-logo-card:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  .mw-logo-img {
    position: relative;
    display: block;
    max-height: 96px;
    width: auto;
    filter:
      drop-shadow(0 0 12px rgba(0, 0, 0, 0.95))
      drop-shadow(0 0 8px rgba(246, 211, 101, 0.28));
    animation: mw-logo-pulse 5.5s ease-in-out infinite;
  }

  .mw-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .mw-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mw-gold);
  }
  .mw-title {
    margin: 0;
    font-size: 2.1rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--mw-text-main);
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.95);
  }
  .mw-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--mw-text-muted);
  }

  /* ===== CARDS / CONTENT ===== */

  .card {
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 55%),
                linear-gradient(145deg, rgba(0, 30, 26, 0.96), rgba(0, 18, 20, 0.98));
    border: 1px solid var(--mw-card-border);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75);
    color: #e5f3e9;
  }
  .card-header {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 600;
  }
  .card-body {
    padding: 0.9rem 1rem 1rem;
  }

  .muted { color: var(--mw-text-muted); }
  .katex, .katex-display { color: var(--mw-text-main) !important; }
  .chip {
    background: rgba(7, 30, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
  }

  .btn-gold {
    background: var(--mw-gold);
    background-image: none;
    color: var(--mw-accent-ink);
    border: none;
    font-weight: 600;
    border-radius: var(--mw-radius-pill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-gold:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  }
  .btn-gold:active {
    transform: translateY(0);
    filter: brightness(0.98);
  }

  .mw-btn-cta {
    background: var(--mw-gold) !important;
    background-image: none !important;
    color: var(--mw-accent-ink) !important;
    border: none !important;
    font-weight: 600;
    border-radius: var(--mw-radius-pill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  }
  .mw-btn-cta:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.5),
      0 0 26px rgba(217, 164, 65, 0.4);
  }
  .mw-btn-cta:disabled {
    opacity: 0.45;
    box-shadow: none;
  }

  .mw-btn-stop {
    background: rgba(8, 12, 10, 0.92) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(248, 113, 113, 0.45) !important;
    font-weight: 600;
  }
  .mw-btn-stop:hover:not(:disabled) {
    background: rgba(60, 20, 20, 0.5) !important;
    border-color: rgba(248, 113, 113, 0.65) !important;
  }

  .mw-btn-doubt {
    background: rgba(246, 211, 101, 0.12) !important;
    color: #ffd38a !important;
    border: 1px solid rgba(246, 211, 101, 0.45) !important;
    font-weight: 600;
  }
  .mw-btn-doubt:hover:not(:disabled) {
    background: rgba(246, 211, 101, 0.22) !important;
    border-color: rgba(246, 211, 101, 0.75) !important;
  }
  .mw-btn-doubt.mw-recording {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #fee2e2 !important;
    border-color: rgba(239, 68, 68, 0.9) !important;
    animation: mwDoubtPulse 1.2s ease-in-out infinite;
  }
  @keyframes mwDoubtPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.0); }
  }
  .mw-btn-video {
    background: rgba(255, 80, 80, 0.08) !important;
    color: #fecaca !important;
    border: 1px solid rgba(255, 80, 80, 0.35) !important;
  }
  .mw-btn-video:hover:not(:disabled) {
    background: rgba(255, 80, 80, 0.18) !important;
    border-color: rgba(255, 80, 80, 0.65) !important;
  }
  .mw-btn-icon { margin-right: 0.25rem; }
  @media (max-width: 640px) {
    .mw-btn-video .mw-btn-label,
    .mw-btn-doubt .mw-btn-label { display: none; }
    .mw-btn-video .mw-btn-icon,
    .mw-btn-doubt .mw-btn-icon { margin-right: 0; }
  }

  .btn-outline-light {
    border-radius: 999px;
    border-color: rgba(227, 243, 232, 0.6);
    color: #e7f5ec;
    font-weight: 500;
  }
  .btn-outline-light:hover {
    background: rgba(227, 243, 232, 0.08);
    border-color: rgba(246, 211, 101, 0.9);
    color: #fff9e1;
  }

  pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(3, 21, 21, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    padding: 12px;
    margin: 0;
    font-size: 13px;
  }

  pre.ascii-board-pre {
    font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: var(--mw-ascii-size);
    line-height: 1.35;
    min-height: 180px;
    max-height: min(52vh, 520px);
    overflow: auto;
    background: rgba(2, 8, 12, 0.95);
    border-color: rgba(246, 211, 101, 0.2);
    color: #e8f5e9;
  }

  .mermaid-host {
    min-height: 210px;
    max-height: min(52vh, 520px);
    overflow: auto;
    padding: 10px 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    color-scheme: light;
  }
  .mermaid-host svg {
    max-width: 100% !important;
    height: auto !important;
  }
  .mw-blackboard-col--visual {
    position: relative;
  }
  .mw-diagram-fs {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 20;
    background: rgba(11, 16, 32, 0.95);
    color: var(--mw-chalk-accent, #f6d365);
    border: 1px solid rgba(246, 211, 101, 0.55);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    opacity: 1;
    pointer-events: auto;
  }
  .mw-diagram-fs:hover {
    background: rgba(246, 211, 101, 0.18);
    border-color: rgba(246, 211, 101, 0.85);
  }
  .mw-diagram-dense-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--mw-text-muted);
    text-align: center;
  }
  .svg-host {
    min-height: 360px;
    max-height: min(72vh, 820px);
    overflow: auto;
    padding: 12px 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color-scheme: light;
  }
  .svg-host svg {
    width: 100% !important;
    min-height: 360px;
    height: auto !important;
    display: block;
  }

  #transcriptSection pre#log {
    font-size: 12px;
    margin: 0;
  }
  .mw-transcript-flyout pre#log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  .mw-layout-row {
    align-items: stretch;
  }

  #asciiBoardPanel .card-body {
    min-height: 200px;
  }

  /* === Show Derivation: chalkboard-matched aesthetic === */
  .mw-derivation-panel {
    position: relative;
    margin: 0.75rem auto 1rem;
    max-width: 920px;
    padding: 0 0.5rem;
    color: var(--mw-chalk-color);
  }
  .mw-derivation-card {
    position: relative;
    border-radius: 18px;
    background:
      radial-gradient(circle at 15% 0%, rgba(246, 211, 101, 0.08), transparent 55%),
      linear-gradient(160deg, #070d0b 0%, #0b1513 55%, #050a09 100%);
    border: 1px solid rgba(247, 242, 216, 0.08);
    box-shadow:
      inset 0 0 0 1px rgba(247, 242, 216, 0.03),
      0 22px 45px rgba(0, 0, 0, 0.55);
    overflow: hidden;
  }
  .mw-derivation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem 0.7rem;
    border-bottom: 1px solid rgba(247, 242, 216, 0.07);
  }
  .mw-derivation-kicker {
    font-family: "Caveat", "Kalam", cursive;
    font-size: 1.45rem;
    color: var(--mw-chalk-color);
    letter-spacing: 0.005em;
  }
  .mw-derivation-close {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(247, 242, 216, 0.15);
    background: transparent;
    color: var(--mw-chalk-color-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  .mw-derivation-close:hover {
    background: rgba(246, 211, 101, 0.1);
    color: var(--mw-gold);
    border-color: var(--mw-gold);
  }
  .mw-derivation-body {
    padding: 1.1rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--mw-chalk-color);
  }
  .mw-derivation-statement {
    font-family: "Caveat", "Kalam", cursive;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--mw-chalk-accent);
    padding: 0.5rem 0.25rem 0.75rem;
    border-bottom: 1px dashed rgba(247, 242, 216, 0.12);
  }
  .mw-derivation-context {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: rgba(247, 242, 216, 0.04);
    border: 1px dashed rgba(247, 242, 216, 0.12);
  }
  .mw-derivation-context-row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.95rem;
  }
  .mw-derivation-context-label {
    flex: 0 0 auto;
    min-width: 4.5rem;
    font-family: "Caveat", "Kalam", cursive;
    font-size: 1.05rem;
    color: var(--mw-gold);
    letter-spacing: 0.01em;
  }
  .mw-derivation-context-value {
    color: var(--mw-chalk-color);
  }
  .mw-derivation-step {
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    row-gap: 0.45rem;
    padding-top: 0.3rem;
  }
  .mw-derivation-step-head {
    grid-column: 1 / span 2;
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .mw-derivation-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1.5px solid rgba(217, 164, 65, 0.55);
    background: rgba(14, 59, 45, 0.35);
    color: var(--mw-gold);
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
  }
  .mw-derivation-step-title {
    font-family: "Caveat", "Kalam", cursive;
    font-size: 1.3rem;
    color: var(--mw-chalk-color);
    letter-spacing: 0.005em;
  }
  .mw-derivation-step-explanation {
    grid-column: 2;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--mw-chalk-color);
  }
  .mw-derivation-step-equation {
    grid-column: 2;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: rgba(247, 242, 216, 0.035);
    border-left: 3px solid var(--mw-gold);
    font-size: 1.1rem;
  }
  /* Override the chalk-reveal seed inside derivation equations — we
     don't want the clip-path animation running here, the student is
     reading, not watching a lecture. */
  .mw-derivation-step-equation .mw-chalk-svg {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transition: none !important;
  }
  .mw-derivation-summary {
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    background: rgba(246, 211, 101, 0.08);
    border: 1px solid rgba(246, 211, 101, 0.22);
    font-family: "Caveat", "Kalam", cursive;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--mw-chalk-color);
  }
  .derivation-visual-hint {
    grid-column: 2;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(247, 242, 216, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 4px;
    color: var(--mw-chalk-color-dim);
  }

  #blackboardEquations {
    font-family: "Latin Modern Math", "CMU Serif", "STIX Two Math", "Cambria Math", "Times New Roman", serif;
    font-size: var(--mw-board-eq-size) !important;
    color: var(--mw-chalk-color);
    line-height: 1.55;
    letter-spacing: 0.01em;
  }
  #blackboardBullets {
    font-size: var(--mw-board-bullet-size) !important;
    color: var(--mw-chalk-color);
    line-height: 1.55;
    margin: 0.4rem 0 0;
    padding-left: 1.35rem;
    list-style-type: disc;
  }
  #blackboardBullets li {
    margin-bottom: 0.35rem;
    color: var(--mw-chalk-color);
  }
  #blackboardBullets li::marker {
    color: var(--mw-chalk-accent);
  }

  .deck-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
    flex-shrink: 0;
  }
  .deck-tabs button {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.35);
    color: var(--mw-text-muted);
    font-size: 12px;
    padding: 0.35rem 0.85rem;
    font-weight: 500;
  }
  .deck-tabs button.active {
    border-color: var(--mw-gold);
    color: var(--mw-text-main);
    background: rgba(246, 211, 101, 0.12);
    box-shadow: 0 0 12px rgba(246, 211, 101, 0.15);
  }
  .deck-tab-flip {
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.28);
    color: var(--mw-text-muted);
    font-size: 11px;
    padding: 0.3rem 0.7rem;
    font-weight: 500;
  }
  .deck-tab-flip:hover {
    border-color: rgba(217, 164, 65, 0.45);
    color: var(--mw-text-main);
  }

  .deck-pane { display: none; }
  .deck-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .pdf-slide-wrap {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: clamp(160px, 32vh, 480px);
    max-height: min(42vh, 560px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
  #lessonPdfCanvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    vertical-align: top;
  }
  .pdf-slide-wrap--landscape {
    min-height: clamp(160px, 32vh, 480px);
    max-height: min(42vh, 560px);
  }
  .pdf-slide-hint {
    font-size: 13px;
    color: var(--mw-text-muted);
    padding: 1rem;
    line-height: 1.5;
  }

  .follow-along-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .follow-along-card {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(3, 18, 16, 0.75);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  .follow-along-card .follow-num {
    flex: 0 0 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10px;
    background: rgba(246, 211, 101, 0.15);
    color: var(--mw-gold);
    border: 1px solid rgba(246, 211, 101, 0.35);
  }
  .follow-along-card .follow-body {
    flex: 1;
    font-size: 12px;
    line-height: 1.4;
    color: #e8f5e9;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .follow-along-card.is-current {
    border-color: rgba(246, 211, 101, 0.65);
    background: rgba(246, 211, 101, 0.1);
    box-shadow:
      0 0 0 1px rgba(246, 211, 101, 0.25),
      0 8px 28px rgba(0, 0, 0, 0.55);
  }
  .follow-along-card.is-current .follow-num {
    background: rgba(246, 211, 101, 0.35);
    color: #1a1404;
  }

  .sent { background: transparent; }
  .hl-sent {
    background: #fef08a;
    color: #111827;
    border-radius: 4px;
  }

  .mw-tutor-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .mw-tutor-frame-inner {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(52vh, 520px);
    height: auto;
    overflow: hidden;
    border-radius: 14px;
    background: #020a07;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9);
  }
  iframe#teacher {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #020a07;
  }
  .mw-pane--tutor .mw-pane-body {
    justify-content: flex-start;
    gap: 0.35rem;
  }
  .mw-pane--tutor .mw-pane-body > .d-flex.flex-wrap {
    flex-shrink: 0;
  }

  /* ===== ANIMATIONS & RESPONSIVE ===== */
  @keyframes mw-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  @keyframes mw-logo-pulse {
    0%, 100% {
      filter:
        drop-shadow(0 0 10px rgba(0, 0, 0, 0.95))
        drop-shadow(0 0 6px rgba(246, 211, 101, 0.2));
    }
    50% {
      filter:
        drop-shadow(0 0 14px rgba(0, 0, 0, 1))
        drop-shadow(0 0 16px rgba(246, 211, 101, 0.4));
    }
  }

  @media (max-width: 900px) {
    .mw-hero {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .mw-hero-text {
      align-items: center;
    }
  }

  /* MimWise lesson shell */
  .mw-lesson-v1 {
    min-height: 100vh;
    background: var(--lt-bg);
    color: var(--lt-text);
    font-family: var(--mw-font);
  }
  .mw-lesson-v1 .text-muted {
    color: var(--mw-text-muted) !important;
  }
  /* Legacy placeholder (kept for backward-compat JS that toggles visibility). */
  .mw-board-empty { display: none !important; }
  .mw-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "content";
  }
  .mw-topbar {
    grid-area: topbar;
    position: relative;
    z-index: 100;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--mw-space-1);
    padding: var(--mw-space-1) var(--mw-space-2);
    border-bottom: 1px solid var(--mw-card-border);
    background: var(--mw-topbar-bg);
    backdrop-filter: blur(8px);
  }
  .mw-topbar-brand {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }
  .mw-topbar-center {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
  }
  .mw-topbar-logo {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--mw-card-border);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .mw-lesson-v1[data-theme="light"] .mw-topbar-logo {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }
  .mw-topbar-logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  }
  .mw-topbar-logo img {
    max-height: 40px;
    width: auto;
    display: block;
    filter: none;
  }
  .mw-topbar-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .mw-kicker--sm {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    margin: 0;
  }
  .mw-topbar-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mw-text-main);
    line-height: 1.2;
  }
  .mw-topbar-tabs { display: flex; align-items: center; gap: 1rem; }
  .mw-topbar-tab { color: var(--lt-muted); text-decoration: none; font-size: 0.86rem; border-bottom: 2px solid transparent; padding-bottom: 0.15rem; }
  .mw-topbar-tab.is-active { color: var(--mw-gold); border-bottom-color: var(--mw-gold); }
  .mw-topbar-tools {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }
  .mw-topbar-tools .form-select,
  .mw-topbar-theme {
    background: var(--mw-input-bg);
    color: var(--mw-text-main);
    border: 1px solid var(--mw-input-border);
    font-size: 0.8rem;
    border-radius: var(--mw-radius-pill);
  }
  .mw-topbar-tools .form-select:focus {
    border-color: var(--mw-gold);
    box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.22);
  }
  .mw-topbar-tools input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--lt-text);
    border-radius: 999px;
    padding: 0.36rem 0.75rem;
    width: 220px;
    font-size: 0.8rem;
  }
  .mw-icon-lite {
    background: transparent;
    border: 0;
    color: var(--lt-muted);
    font-size: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
  }
  .mw-sidebar {
    grid-area: sidebar;
    padding: 4.8rem 0.85rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(30, 32, 36, 0.76);
    backdrop-filter: blur(12px);
    display: none;
  }
  .mw-side-head { padding: 0 0.65rem 0.8rem; }
  .mw-side-head h2 { margin: 0; font-size: 1.7rem; letter-spacing: -0.03em; }
  .mw-side-head p { margin: 0.2rem 0 0; color: var(--mw-gold); font-size: 0.8rem; }
  .mw-side-link {
    border: 1px solid transparent;
    background: transparent;
    color: var(--lt-muted);
    text-align: left;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
  .mw-side-link.is-active {
    background: rgba(217, 164, 65, 0.12);
    border-color: rgba(217, 164, 65, 0.35);
    color: var(--mw-text-main);
  }
  .mw-side-cta {
    margin-top: auto;
    border: 0;
    border-radius: 999px;
    color: #111;
    font-weight: 700;
    background: var(--mw-cta-grad);
    padding: 0.72rem 1rem;
    box-shadow: 0 0 16px rgba(217, 164, 65, 0.25);
  }
  .mw-content {
    grid-area: content;
    overflow: auto;
    padding: 0.9rem 0.9rem 6.5rem;
    scroll-padding-bottom: 5rem;
  }

  .mw-lesson-v1[data-state="empty"] .mw-content,
  .mw-lesson-v1[data-state="loading"] .mw-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mw-pane--pdf .mw-pane-body,
  .mw-pane--history.mw-pane {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
  .mw-stage {
    display: grid;
    gap: 0.85rem;
    grid-template-areas:
      "tutor board"
      "pdf history";
    min-height: 0;
    /* Stretch panes in each row so tutor/board and pdf/history share the same height. */
    align-items: stretch;
  }
  .mw-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--mw-pane-bg);
    border: 1px solid var(--mw-card-border);
    border-radius: var(--mw-radius-lg);
    overflow: hidden;
    box-shadow: var(--mw-pane-shadow);
  }
  .mw-pane-head {
    flex: 0 0 auto;
    padding: 0.72rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: var(--mw-text-muted);
  }
  .mw-focus-tutor-head-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mw-pane-head strong {
    font-size: 0.92rem;
    color: var(--mw-text-main);
    letter-spacing: 0.01em;
  }
  .mw-pane-body {
    padding: 0.9rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .mw-pane--pdf .mw-pane-body {
    padding-bottom: 0.5rem;
    gap: 0.35rem;
  }
  .mw-lesson-line-detail {
    order: 2;
    flex: 0 1 auto;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 8, 7, 0.45);
    padding: 0.2rem 0.5rem 0.45rem;
  }
  .mw-lesson-line-detail summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mw-text-muted);
    list-style: none;
  }
  .mw-lesson-line-detail summary::-webkit-details-marker { display: none; }
  .mw-lesson-line-detail #nowSpan {
    margin-top: 0.35rem;
    font-size: 0.8rem !important;
    line-height: 1.45;
    max-height: 10rem;
    overflow-y: auto;
    word-break: break-word;
  }
  .mw-pane--tutor {
    grid-area: tutor;
    align-self: start;
  }
  .mw-pane--board { grid-area: board; }
  .mw-pane--pdf { grid-area: pdf; }
  .mw-pane--history { grid-area: history; }
  .mw-pane--pdf,
  .mw-pane--history:not(.mw-transcript-flyout) {
    min-height: clamp(200px, 30vh, 640px);
  }

  /* Layout presets: wider board column for equations + Mermaid. */
  .mw-stage.mw-stage--tutor-focused {
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
    grid-template-rows: minmax(320px, 1fr) minmax(180px, auto);
  }
  /* Slides + history first: top row = PDF + transcript; bottom = tutor + board */
  .mw-stage.mw-stage--lecture-theatre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Bottom row must be tall enough for Live2D (face + subs) — was min 400px + tight max-height on frame → clipped chin */
    grid-template-rows: auto minmax(480px, 0.9fr);
    grid-template-areas:
      "pdf history"
      "tutor board";
  }
  /* Theatre: let the video area use most of the pane; avoid tiny max-heights that clip the avatar */
  .mw-stage.mw-stage--lecture-theatre .mw-pane--tutor .mw-pane-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .mw-stage.mw-stage--lecture-theatre .mw-pane--tutor .mw-tutor-stage {
    flex: 1 1 auto;
    min-height: min(300px, 42vh);
    display: flex;
    flex-direction: column;
  }
  .mw-stage.mw-stage--lecture-theatre .mw-pane--tutor .mw-tutor-frame-inner {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(640px, 70vh);
    height: auto;
    min-height: min(280px, 40vh);
  }
  .mw-stage.mw-stage--lecture-theatre .mw-pane--tutor iframe#teacher {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .mw-pane--pdf #followAlongSection {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .mw-pane--pdf .pdf-slide-wrap,
  .mw-pane--pdf .follow-along-list {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Board pane stretches to fill its grid cell; the unified blackboard
     inside manages its own text/diagram split. */
  .mw-pane--board .mw-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .mw-pane--board .mw-pane-body > #blackboardPanel {
    flex: 1 1 auto;
    min-height: 0;
  }
  .mw-transcript-dock-head {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    color: var(--mw-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .mw-transcript-dock-head strong {
    color: var(--mw-text-main);
  }
  #transcriptSection.mw-pane--history:not(.mw-transcript-flyout) {
    margin-top: 0;
    border-radius: 14px;
    border: 1px solid var(--mw-card-border);
    background: rgba(8, 12, 10, 0.75);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #transcriptSection.mw-pane--history:not(.mw-transcript-flyout) pre#log {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 0.75rem 0.65rem;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 8, 7, 0.85);
    color: var(--mw-placeholder-fg);
    max-height: none;
    overflow-y: auto;
  }
  .mw-tutor-frame-inner .mw-subs-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 28px 14px 12px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.88));
    border: none;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 500;
    color: #fef9c3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    max-width: none;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
  }
  .mw-subs-overlay:empty,
  .mw-subs-overlay[hidden] { display: none; }
  .mw-action-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: max-content;
    max-width: min(720px, calc(100vw - 24px));
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 0.95rem;
    border-radius: var(--mw-radius-pill);
    border: 1px solid var(--mw-card-border);
    background: var(--mw-action-bar-bg);
    backdrop-filter: blur(12px);
    z-index: 25;
    box-shadow: var(--mw-pane-shadow);
  }
  .mw-action-bar .btn { border-radius: 999px; }

  /* -- Teaching-mode picker (Panic / Revision / Casual / Research) -- */
  .mw-mode-picker { position: relative; display: inline-flex; }
  .mw-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--mw-mode-accent, var(--mw-card-border));
    background: color-mix(in srgb, var(--mw-mode-accent, #888) 14%, transparent);
    color: var(--mw-text-main, #e9e4d6);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }
  .mw-mode-pill:hover { filter: brightness(1.08); }
  .mw-mode-pill:focus-visible { outline: 2px solid var(--mw-mode-accent, #d9a441); outline-offset: 2px; }
  .mw-mode-pill__icon { font-size: 0.95rem; }
  .mw-mode-pill__caret { font-size: 0.7rem; opacity: 0.8; }
  .mw-mode-pill--panic    { --mw-mode-accent: #e0a13a; }
  .mw-mode-pill--revision { --mw-mode-accent: #5b9bd5; }
  .mw-mode-pill--casual   { --mw-mode-accent: #5cb87a; }
  .mw-mode-pill--research { --mw-mode-accent: #a78bfa; }

  .mw-mode-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 248px;
    max-width: 84vw;
    padding: 0.35rem;
    border-radius: 14px;
    border: 1px solid var(--mw-card-border, rgba(255,255,255,0.12));
    background: var(--mw-action-bar-bg, rgba(19, 28, 32, 0.98));
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
  }
  .mw-mode-menu[hidden] { display: none; }
  .mw-mode-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mw-text-main, #e9e4d6);
    text-align: left;
    cursor: pointer;
  }
  .mw-mode-option:hover,
  .mw-mode-option:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
  .mw-mode-option__icon { font-size: 1.05rem; flex: 0 0 auto; }
  .mw-mode-option__text { display: flex; flex-direction: column; gap: 0.08rem; flex: 1 1 auto; }
  .mw-mode-option__name { font-size: 0.86rem; font-weight: 600; }
  .mw-mode-option__desc { font-size: 0.72rem; color: var(--mw-text-muted, #94a3b8); line-height: 1.25; }
  .mw-mode-option__check { opacity: 0; color: var(--mw-gold, #d9a441); font-weight: 700; flex: 0 0 auto; }
  .mw-mode-option[aria-checked="true"] .mw-mode-option__check { opacity: 1; }
  .mw-mode-option[aria-checked="true"] { background: rgba(255, 255, 255, 0.05); }
  .mw-mode-menu__sep { height: 1px; margin: 0.25rem 0.2rem; background: var(--mw-card-border, rgba(255,255,255,0.1)); }
  .mw-mode-reexplain {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mw-text-muted, #94a3b8);
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
  }
  .mw-mode-reexplain:hover,
  .mw-mode-reexplain:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--mw-text-main, #e9e4d6); outline: none; }
  @media (prefers-reduced-motion: reduce) {
    .mw-mode-pill { transition: none; }
  }
  .mw-podcast-mobile-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 4.25rem);
    width: min(720px, calc(100vw - 24px));
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem 0.55rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(217, 164, 65, 0.42);
    background: rgba(19, 28, 32, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: var(--mw-pane-shadow);
    z-index: 24;
  }
  .mw-podcast-mobile-banner[hidden] { display: none !important; }
  .mw-podcast-mobile-banner__text {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--mw-text-main, #e7f5ec);
  }
  .mw-podcast-mobile-banner__link {
    display: inline-block;
    margin-left: 0.35rem;
    color: var(--mw-gold);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }
  .mw-podcast-mobile-banner__link[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    text-decoration: none;
  }
  .mw-podcast-mobile-banner__dismiss {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--mw-text-muted, rgba(233, 228, 214, 0.72));
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
  }

  .mw-audio-unlock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 4.5rem);
    width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(217, 164, 65, 0.55);
    background: rgba(19, 28, 32, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    z-index: 36;
    text-align: center;
  }
  .mw-audio-unlock[hidden] { display: none !important; }
  .mw-audio-unlock p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--mw-text-main, #e7f5ec);
  }
  .mw-audio-unlock__btn {
    align-self: center;
    min-height: 44px;
    min-width: 10rem;
    padding: 0.45rem 1.25rem;
    border-radius: 999px;
    border: none;
    background: var(--mw-gold, #d9a441);
    color: #1a1200;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .mw-lesson-v1:has(.mw-audio-unlock:not([hidden])) .mw-podcast-mobile-banner {
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 8.5rem);
  }

  /* Page finished: one clear CTA instead of a row of disabled controls. */
  .mw-action-bar[data-lesson-phase="page-end"] #btnContinue,
  .mw-action-bar[data-lesson-phase="page-end"] #mwContinueHelper,
  .mw-action-bar[data-lesson-phase="page-end"] #btnStopMain {
    display: none !important;
  }
  .mw-action-bar[data-lesson-phase="page-end"] {
    justify-content: center;
    gap: 0.35rem;
  }
  .mw-action-bar[data-lesson-phase="page-end"] #btnNextPage {
    display: inline-flex !important;
    align-items: center;
    border-color: var(--mw-gold);
    background: var(--mw-gold);
    color: var(--mw-accent-ink);
    font-weight: 600;
    padding-inline: 1.1rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  }
  .mw-action-bar[data-lesson-phase="page-end"] #btnNextPage:hover {
    filter: brightness(1.05);
    color: var(--mw-accent-ink);
  }
  .mw-action-bar[data-lesson-phase="finished"] #btnContinue,
  .mw-action-bar[data-lesson-phase="finished"] #btnStopMain {
    display: none !important;
  }
  .mw-action-bar[data-lesson-phase="finished"] {
    justify-content: center;
  }
  .mw-continue-helper {
    color: rgba(233, 228, 214, 0.92);
    font-size: 0.79rem;
    border: 1px solid rgba(217, 164, 65, 0.4);
    background: rgba(217, 164, 65, 0.1);
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    max-width: 280px;
    line-height: 1.35;
  }
  /* (legacy `.mw-first-steps` replaced by the hero drop-zone below.) */
  .mw-first-steps, .mw-first-steps--hidden { display: none !important; }
  .mw-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--mw-gold);
    border: 1px solid rgba(217, 164, 65, 0.45);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(217, 164, 65, 0.06);
  }
  .mw-home-link:hover {
    color: var(--mw-text-main);
    border-color: var(--mw-gold);
    background: rgba(217, 164, 65, 0.12);
  }
  .mw-layout-hint {
    font-size: 0.72rem;
    color: var(--mw-text-muted);
    max-width: 14rem;
    line-height: 1.35;
    margin: 0;
    text-align: right;
  }
  .mw-layout-wrap {
    max-width: 14rem;
  }
  /* Reduce first-view clutter from disabled decorative controls. */
  .mw-side-link[disabled],
  .mw-side-cta[disabled],
  .mw-topbar-tab,
  .mw-icon-lite[disabled],
  .mw-topbar-tools input[disabled] {
    display: none !important;
  }
  .mw-hidden-legacy {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }
  .mw-transcript-flyout {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 95vw);
    z-index: 1200;
    background: #111317;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.9rem;
    display: flex !important;
    flex-direction: column;
  }
  .mw-history-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1190;
  }
  /*
   * Study mode: collapse PDF + history panes so only tutor + board remain.
   * Replaces the old broken focus-mode PiP. Keeps the same tutor/board grid,
   * but hides the bottom row so the teacher + blackboard get the full height.
   */
  .mw-lesson-v1.mw-study-mode:not(.mw-zen-mode) .mw-pane--pdf,
  .mw-lesson-v1.mw-study-mode .mw-pane--history,
  .mw-lesson-v1.mw-study-mode #transcriptSection {
    display: none !important;
  }
  /* Zen: minimize tutor hides float; PDF always visible */
  .mw-lesson-v1.mw-zen-mode.mw-study-mode .mw-pane--pdf {
    display: flex !important;
  }
  .mw-lesson-v1.mw-study-mode .mw-stage.mw-stage--tutor-focused {
    grid-template-rows: 1fr;
  }
  .mw-lesson-v1.mw-zen-mode.mw-study-mode .mw-stage.mw-stage--zen {
    grid-template-rows: 1fr;
  }
  .mw-lesson-v1.mw-study-mode .mw-stage.mw-stage--lecture-theatre {
    grid-template-rows: 1fr;
    grid-template-areas: "tutor board";
  }
  /* Immersive focus: no page-level scroll; panes scroll internally. */
  .mw-lesson-v1.mw-lesson-immersive .mw-shell {
    height: calc(100vh - 52px);
    max-height: calc(100vh - 52px);
    overflow: hidden;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-content {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-pane--board {
    min-height: min(52vh, 640px);
    display: flex;
    flex-direction: column;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-pane--board .mw-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-blackboard {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-blackboard-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    grid-template-rows: auto auto;
    row-gap: 2.5rem;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-blackboard-col--text {
    overflow: visible;
    max-height: none;
    position: relative;
    z-index: 2;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-blackboard-col--visual {
    position: relative;
    z-index: 1;
    margin-top: 0.5rem;
    clear: both;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-board-segment {
    margin-left: 0;
    margin-right: 0;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-blackboard-col--visual > .mermaid-host {
    min-height: 160px;
    max-height: min(42vh, 480px);
    overflow: auto;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38);
    color-scheme: light;
  }
  .mw-lesson-v1.mw-lesson-immersive .mw-blackboard-col--visual > .svg-host {
    min-height: 160px;
    max-height: min(42vh, 480px);
    overflow: auto;
  }
  /* Normal mode: transcript hidden — tutor+board get most of the viewport; PDF compact below */
  .mw-lesson-v1.mw-transcript-collapsed:not(.mw-study-mode) .mw-stage {
    grid-template-areas:
      "tutor board"
      "pdf pdf";
    grid-template-rows: minmax(0, 1fr) auto;
  }
  /* Lecture-theatre: same row order as tutor-focused — PDF under tutor+board */
  .mw-lesson-v1.mw-transcript-collapsed:not(.mw-study-mode) .mw-stage.mw-stage--lecture-theatre {
    grid-template-areas:
      "tutor board"
      "pdf pdf";
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .mw-lesson-v1.mw-transcript-collapsed:not(.mw-study-mode) .mw-pane--pdf {
    min-height: 0;
    max-height: min(34vh, 520px);
  }
  .mw-lesson-v1.mw-transcript-collapsed:not(.mw-study-mode) .mw-pane--pdf .mw-pane-body {
    max-height: min(34vh, 520px);
  }
  .mw-lesson-v1.mw-transcript-collapsed:not(.mw-study-mode) .pdf-slide-wrap {
    min-height: clamp(120px, 22vh, 360px);
    max-height: min(30vh, 440px);
    flex: 0 1 auto;
  }
  .mw-lesson-v1.mw-transcript-collapsed:not(.mw-study-mode) #lessonPdfCanvas {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  .mw-diagram-unavailable {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: var(--mw-text-muted);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(5, 8, 7, 0.5);
  }
  .mw-lesson-v1.mw-study-mode .mw-tutor-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 1024px) {
    .mw-shell {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto minmax(0, 1fr);
      grid-template-areas:
        "topbar"
        "sidebar"
        "content";
    }
    .mw-sidebar {
      padding-top: 0.8rem;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      max-height: 210px;
      overflow: auto;
    }
    .mw-stage {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "tutor"
        "board"
        "pdf"
        "history";
      min-height: 0;
    }
    .mw-stage .mw-pane {
      height: auto;
    }
    /* Specificity fix: the two-class layout selectors below would otherwise
       beat the single-class `.mw-stage` reset above and keep the desktop
       2-column split on phones (left pane ~32% wide → text wraps one word
       per line). Re-state column + area for each preset at this breakpoint. */
    .mw-stage.mw-stage--tutor-focused {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "tutor"
        "board"
        "pdf"
        "history";
    }
    .mw-stage.mw-stage--lecture-theatre {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "pdf"
        "tutor"
        "board"
        "history";
    }
    .mw-lesson-v1.mw-zen-mode .mw-stage.mw-stage--zen {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      grid-template-areas:
        "board"
        "pdf";
      height: auto;
      min-height: 0;
    }
    .mw-lesson-v1.mw-zen-mode[data-state="teaching"] .mw-shell {
      height: auto;
      max-height: none;
      min-height: 100dvh;
      min-height: 100vh;
    }
    .mw-lesson-v1.mw-zen-mode .mw-pane--pdf {
      max-height: 40vh;
      height: auto;
    }
    .mw-lesson-v1.mw-zen-mode .mw-pane--pdf .mw-pane-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* Drop the large desktop min-height so the PDF + transcript panes
       don't each reserve 380-920px on phones. */
    .mw-pane--pdf,
    .mw-pane--history:not(.mw-transcript-flyout) {
      min-height: auto;
    }
    .mw-topbar-tools input { width: 150px; }
    .mw-action-bar {
      left: 50%;
      transform: translateX(-50%);
      right: auto;
      width: calc(100% - 20px);
      max-width: none;
      bottom: max(8px, env(safe-area-inset-bottom, 0px));
      border-radius: 16px;
      justify-content: center;
    }
  }
  @media (max-width: 640px) {
    .mw-content { padding: 0.6rem 0.55rem 6.5rem; }
    .mw-topbar {
      padding: 0 0.6rem;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
    }
    .mw-topbar-brand { grid-column: 1; grid-row: 1; }
    .mw-topbar-center { grid-column: 1; grid-row: 2; justify-self: center; }
    .mw-topbar-tools {
      grid-column: 1;
      grid-row: 3;
      justify-self: stretch;
      justify-content: center;
    }
    .mw-topbar-title { font-size: 0.96rem; }
    .mw-pane-head { padding: 0.62rem 0.7rem; }
    .mw-pane-body { padding: 0.7rem; }
    /* Action bar: fit Next step / Ask doubt / Video / Deep Dive into <=2 rows
       instead of stacking every button onto its own row. */
    .mw-action-bar {
      gap: 0.35rem;
      padding: 0.45rem 0.55rem;
    }
    .mw-action-bar .btn {
      flex: 1 1 auto;
      min-width: 0;
      padding: 0.32rem 0.55rem;
      font-size: 0.82rem;
      justify-content: center;
    }
    .mw-action-bar__btn,
    .mw-action-bar .btn {
      min-width: 44px;
      min-height: 44px;
    }
    .mw-action-bar .dropdown { flex: 1 1 auto; min-width: 0; }
    .mw-action-bar .dropdown .btn { width: 100%; }
    .mw-continue-helper { display: none; }
    .mw-podcast-mobile-banner {
      bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 5.5rem);
    }
    /* Topbar: let the right-hand tools wrap below the brand without
       overflowing, and shrink the filename pill so it doesn't eat the row. */
    .mw-topbar-tools {
      flex-wrap: wrap;
      gap: 0.4rem;
      row-gap: 0.4rem;
    }
    .mw-topbar-file { max-width: 9rem; font-size: 0.74rem; padding: 0.16rem 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mw-topbar-pager { padding: 0.08rem 0.18rem; }
    .mw-topbar-lang { font-size: 0.78rem; padding: 0.18rem 0.4rem; }
    /* Tutor transport controls: keep the row horizontal and scrollable
       instead of stacking every button vertically inside the narrow pane. */
    .mw-tutor-controls,
    .mw-tutor-transport {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 0.3rem;
      padding-bottom: 0.2rem;
    }
    .mw-tutor-controls::-webkit-scrollbar,
    .mw-tutor-transport::-webkit-scrollbar { display: none; }
    .mw-tutor-controls .mw-ctrl,
    .mw-tutor-transport .mw-ctrl {
      flex: 0 0 auto;
      min-width: 32px;
      height: 30px;
      padding: 0 0.45rem;
      font-size: 0.78rem;
    }
    .mw-tutor-transport {
      position: relative;
      mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    .mw-tutor-transport::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0.2rem;
      width: 28px;
      pointer-events: none;
      background: linear-gradient(to right, transparent, rgba(19, 28, 32, 0.92));
    }
    /* Cap the avatar frame so the tutor isn't a tiny 80px square but
       also doesn't dominate the viewport on tall phones. */
    .mw-pane--tutor .mw-tutor-frame-inner {
      min-height: 260px;
      max-height: 56vh;
    }
  }

  .mw-board-claim {
    font-family: var(--mw-font-head, inherit);
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--mw-text-main, #f3f1e8);
    margin: 0.2rem 0 0.8rem;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid var(--mw-gold, #f6d365);
    background: linear-gradient(90deg, rgba(246, 211, 101, 0.12), rgba(246, 211, 101, 0.0));
    border-radius: 6px;
  }

  /* --- Chalk handwriting (MathJax-SVG + Vara.js) --- */
  .mw-board-segment {
    position: relative;
    transition: background 220ms ease, box-shadow 220ms ease;
    border-radius: 6px;
  }
  .mw-board-segment--active {
    background: rgba(246, 211, 101, 0.08);
    box-shadow: inset 3px 0 0 var(--mw-gold, #f6d365);
  }
  .mw-board-segment--pointed {
    box-shadow: inset 3px 0 0 var(--mw-gold, #f6d365), 0 0 0 2px rgba(246, 211, 101, 0.35);
  }
  .mw-stage {
    position: relative;
  }
  .mw-stage > .mw-board-pointer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    pointer-events: none;
    overflow: visible;
  }
  .mw-board-pointer-path {
    filter: drop-shadow(0 0 6px rgba(246, 211, 101, 0.45));
    stroke-dasharray: 6 4;
    animation: mw-pointer-dash 0.45s ease-out;
  }
  @keyframes mw-pointer-dash {
    from { stroke-dashoffset: 24; opacity: 0.4; }
    to { stroke-dashoffset: 0; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mw-board-pointer-path { animation: none; }
  }
  /* (legacy .mw-chalk-svg rules are overridden by the v2 block below) */
  .mw-chalk-bullet {
    display: inline-block;
    color: #fef9c3;
    min-height: 1.6em;
  }
  .mw-chalk-bullet svg path {
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* =============================================================
     DISRUPTIVE REDESIGN (v2)
     - Empty state = a single centered hero drop zone
     - Teaching state = tutor + real blackboard (no placeholder cards)
     - Diagram column hidden unless we have an actual diagram
     - Chalk math + bullet animations slow, thick, high-contrast
  ============================================================== */

  /* -- State gating. Root .mw-lesson-v1 carries data-state = "empty" | "loading" | "teaching". -- */
  .mw-lesson-v1[data-state="empty"] [data-show-state="teaching"],
  .mw-lesson-v1[data-state="loading"] [data-show-state="teaching"] {
    display: none !important;
  }
  .mw-lesson-v1[data-state="teaching"] [data-hide-state="teaching"] {
    display: none !important;
  }
  /* Hide the fixed action bar until we're teaching. */
  .mw-lesson-v1[data-state="empty"] .mw-action-bar,
  .mw-lesson-v1[data-state="loading"] .mw-action-bar {
    display: none !important;
  }

  /* -- Topbar slimmed: hide the brand subtitle outside teaching to reduce chrome. -- */
  .mw-topbar-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--mw-text-muted);
  }
  .mw-topbar-file,
  .mw-topbar-page {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mw-topbar-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 999px;
    padding: 0.12rem 0.22rem;
  }
  .mw-topbar-pager .mw-topbar-page {
    border: none;
    background: transparent;
    padding: 0.16rem 0.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--mw-text-main);
    cursor: pointer;
    font: inherit;
    transition: background 160ms ease, color 160ms ease;
  }
  .mw-topbar-pager .mw-topbar-page:hover {
    background: rgba(246, 211, 101, 0.14);
    color: var(--mw-gold);
    border-radius: 999px;
  }
  .mw-topbar-page-input {
    width: 3.4rem;
    padding: 0.14rem 0.4rem;
    border: 1px solid rgba(246, 211, 101, 0.5);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--mw-text-main);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .mw-topbar-page-input[hidden] { display: none; }
  .mw-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--mw-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
  }
  .mw-pager-btn:hover:not(:disabled) {
    background: rgba(246, 211, 101, 0.14);
    color: var(--mw-gold);
  }
  .mw-pager-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .mw-topbar-ghost,
  a.mw-topbar-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: var(--mw-input-bg);
    color: var(--mw-text-muted);
    border: 1px solid var(--mw-input-border);
    border-radius: var(--mw-radius-pill);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.32rem 0.82rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
  .mw-topbar-ghost:hover,
  a.mw-topbar-ghost:hover {
    background: rgba(246, 211, 101, 0.1);
    color: var(--mw-gold);
    border-color: rgba(246, 211, 101, 0.55);
    box-shadow: 0 0 0 1px rgba(246, 211, 101, 0.12);
    text-decoration: none;
  }

  /* -- Hero drop zone (empty state). -- */
  .mw-hero-upload {
    position: relative;
    margin: clamp(1.2rem, 5vh, 4rem) auto;
    width: 100%;
    max-width: 640px;
    padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.3rem, 3vw, 2.4rem);
    border-radius: var(--mw-radius-lg);
    background: var(--mw-hero-surface);
    border: 1px dashed var(--mw-card-border);
    box-shadow: var(--mw-pane-shadow);
    text-align: center;
    overflow: visible;
  }
  .mw-hero-chalk-frame {
    display: none;
  }
  .mw-hero-drop {
    position: relative;
    display: block;
    border-radius: calc(var(--mw-radius-lg) - 4px);
    padding: 2.2rem 1.4rem 2rem;
    cursor: pointer;
    transition: background 220ms ease, transform 180ms ease, box-shadow 220ms ease;
    background: var(--mw-input-bg);
    border: 1px solid var(--mw-input-border);
  }
  .mw-hero-drop:hover,
  .mw-hero-drop:focus-visible,
  .mw-hero-drop.is-dragover {
    background: rgba(246, 211, 101, 0.06);
    box-shadow: inset 0 0 0 1px rgba(246, 211, 101, 0.35);
    outline: none;
  }
  .mw-hero-drop.is-dragover {
    transform: translateY(-1px) scale(1.005);
  }
  .mw-hero-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
  }
  .mw-hero-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: radial-gradient(circle at top, rgba(246, 211, 101, 0.22), transparent 65%), rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(246, 211, 101, 0.28);
    color: var(--mw-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.3rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 0 12px rgba(246, 211, 101, 0.08);
  }
  .mw-hero-icon svg { width: 28px; height: 28px; }
  .mw-hero-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.3vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mw-text-main);
  }
  .mw-hero-sub {
    margin: 0;
    color: var(--mw-text-muted);
    font-size: 0.95rem;
    max-width: 42ch;
  }
  .mw-hero-browse {
    color: var(--mw-gold);
    border-bottom: 1px dashed rgba(246, 211, 101, 0.55);
    font-weight: 600;
  }
  .mw-hero-filename {
    margin-top: 0.4rem;
    color: var(--mw-chalk-color);
    font-size: 0.88rem;
    font-weight: 600;
    background: rgba(246, 211, 101, 0.1);
    border: 1px solid rgba(246, 211, 101, 0.3);
    border-radius: 999px;
    padding: 0.22rem 0.75rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mw-hero-controls {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.7rem;
    margin-top: 1.4rem;
    flex-wrap: wrap;
  }
  .mw-hero-page-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
  }
  .mw-hero-page-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mw-text-muted);
  }
  .mw-hero-page-input {
    width: 92px;
    background: var(--mw-input-bg);
    border: 1px solid var(--mw-input-border);
    color: var(--mw-text-main);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
    text-align: center;
  }
  .mw-hero-page-input:focus {
    border-color: var(--mw-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(246, 211, 101, 0.15);
  }
  .mw-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.3rem;
    font-size: 1rem;
    border-radius: 999px;
  }
  .mw-hero-cta[disabled] { opacity: 0.55; cursor: not-allowed; }
  .mw-hero-cta-arrow {
    transition: transform 180ms ease;
  }
  .mw-hero-cta:hover:not(:disabled) .mw-hero-cta-arrow {
    transform: translateX(3px);
  }
  .mw-hero-status {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.78rem;
    color: var(--mw-text-muted);
    letter-spacing: 0.02em;
  }
  .mw-hero-status[data-kind="error"] { color: #fca5a5; }
  .mw-hero-status[data-kind="working"] { color: var(--mw-gold); }

  .mw-hero-alt {
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: min(520px, 96%);
    margin-left: auto;
    margin-right: auto;
  }
  .mw-hero-alt-divider {
    position: relative;
    width: 100%;
    text-align: center;
    color: var(--mw-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .mw-hero-alt-divider::before,
  .mw-hero-alt-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: rgba(255,255,255,0.12);
  }
  .mw-hero-alt-divider::before { left: 0; }
  .mw-hero-alt-divider::after  { right: 0; }
  .mw-hero-alt-divider span { padding: 0 0.6rem; background: transparent; }
  .mw-hero-topic-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .mw-hero-topic-label,
  .mw-hero-lang-label {
    font-size: 0.78rem;
    color: var(--mw-text-muted);
    letter-spacing: 0.04em;
  }
  .mw-hero-topic-input {
    width: 100%;
    background: var(--mw-input-bg);
    border: 1px solid var(--mw-input-border);
    color: var(--mw-text-main);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.98rem;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .mw-hero-topic-input:focus {
    border-color: rgba(217, 164, 65, 0.65);
    box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18);
  }
  .mw-hero-lang-row {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
  }
  .mw-hero-lang-row .mw-hero-lang-label { margin-right: 0.2rem; }
  .mw-hero-lang-select {
    background: var(--mw-input-bg);
    border: 1px solid var(--mw-input-border);
    color: var(--mw-text-main);
    color-scheme: inherit;
    accent-color: var(--mw-gold);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    flex: 1 1 auto;
    min-width: 160px;
  }
  .mw-hero-lang-select option {
    background: #0b1513;
    color: #f5f5f5;
  }
  .mw-hero-cta--topic { margin-top: 0.1rem; }
  .mw-doubt-panel {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
  }
  .mw-doubt-panel[style*="display: block"],
  .mw-doubt-panel[style*="display:block"] { display: flex !important; }
  .mw-doubt-card {
    width: min(560px, 94vw);
    background: linear-gradient(180deg, rgba(18,24,22,0.98), rgba(10,14,13,0.98));
    color: #f5f5f5;
    border: 1px solid rgba(246, 211, 101, 0.35);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 20px 44px rgba(0,0,0,0.55);
  }
  .mw-doubt-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.6rem;
  }
  .mw-doubt-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffd38a;
  }
  .mw-doubt-close {
    background: transparent;
    color: #eee;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }
  .mw-doubt-mic-row {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-bottom: 0.55rem;
  }
  .mw-doubt-mic {
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.35rem;
  }
  .mw-doubt-mic.mw-recording {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
    animation: mwDoubtPulse 1.1s ease-in-out infinite;
  }
  .mw-doubt-status {
    font-size: 0.84rem;
    color: var(--mw-text-muted);
  }
  .mw-doubt-status[data-kind="error"] { color: #fca5a5; }
  .mw-doubt-status[data-kind="working"] { color: var(--mw-gold); }
  .mw-doubt-text {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.14);
    color: #f5f5f5;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 54px;
  }
  .mw-doubt-text:focus {
    outline: none;
    border-color: rgba(246, 211, 101, 0.65);
    box-shadow: 0 0 0 3px rgba(246, 211, 101, 0.18);
  }
  .mw-doubt-actions {
    display: flex; gap: 0.4rem; justify-content: flex-end; margin-top: 0.6rem;
  }

  .mw-topbar-lang,
  .mw-topbar-theme {
    background: var(--mw-input-bg);
    border: 1px solid var(--mw-input-border);
    color: var(--mw-text-main);
    border-radius: var(--mw-radius-pill);
    padding: 0.28rem 0.65rem;
    font-size: 0.82rem;
  }

  /* -- Topbar doesn't need the subtitle kicker in teaching mode; pushes breathing room. -- */
  .mw-lesson-v1[data-state="teaching"] .mw-topbar-brand-text .mw-kicker {
    display: none;
  }

  /* -- Blackboard redesign. The JS still toggles #blackboardPanel.style.display,
         so we style it via its new class "mw-blackboard". -- */
  .mw-blackboard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-radius: var(--mw-radius-lg);
    background: var(--mw-board-surface);
    border: var(--mw-board-inner-border);
    box-shadow: var(--mw-board-outer-shadow);
    overflow: hidden;
  }
  .mw-blackboard::before {
    /* Subtle noise / chalk dust to kill flat-black look. */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.025) 0.4px, transparent 1.2px),
      radial-gradient(circle at 72% 68%, rgba(255, 255, 255, 0.02) 0.4px, transparent 1.2px),
      radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.018) 0.3px, transparent 1px);
    background-size: 120px 120px, 160px 160px, 90px 90px;
    opacity: 0.6;
    mix-blend-mode: screen;
  }
  .mw-blackboard[data-has-diagram="true"]::before {
    display: none;
  }
  .mw-blackboard-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.9rem 1.15rem 0.5rem;
    border-bottom: 1px solid var(--mw-board-border);
  }
  .mw-blackboard-title {
    font-family: "Caveat", "Kalam", "Comic Sans MS", cursive;
    font-size: var(--mw-board-title-size);
    color: var(--mw-chalk-color);
    letter-spacing: 0.01em;
    font-weight: 500;
  }
  .mw-blackboard-meta {
    font-size: 0.8rem;
    color: var(--mw-chalk-color-dim);
    font-variant-numeric: tabular-nums;
  }
  .mw-blackboard-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  .mw-blackboard-dots {
    font-size: 0.78rem;
    color: var(--mw-chalk-color-dim);
    font-variant-numeric: tabular-nums;
  }
  /* Unified board body: a grid that auto-adjusts between a single
     full-width text column and a side-by-side text + diagram layout.
     The data-has-diagram flag on .mw-blackboard is toggled by JS when
     setBoardHasDiagram() detects real svg/mermaid/ascii content. */
  .mw-blackboard-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1.3rem 1.6rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 1.1rem;
  }
  /* Deliberately NO side-by-side layout. User requested the diagram
     always live below the text at full board width so it renders huge
     instead of being squeezed into a half-column that letterboxes the
     SVG and shrinks every label with it. */
  .mw-blackboard-col {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .mw-blackboard-col--text {
    overflow: visible;
    min-height: 0;
  }
  /* Visual column = "the diagram stage". Full bleed inside the board
     (no extra padding/border wasting edge pixels), grows tall based on
     SVG aspect ratio up to the board height. */
  .mw-blackboard-col--visual {
    display: none;
    position: relative;
    padding: 0;
    border: none;
  }
  .mw-blackboard[data-has-diagram="true"] .mw-blackboard-col--visual {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    margin-top: 0.25rem;
    isolation: isolate;
    /* Left-align the diagram so it lines up with the equations and
       bullets on the main chalkboard column, rather than floating
       centered in an empty frame. */
    align-items: flex-start;
    justify-content: flex-start;
  }
  .mw-blackboard-col--visual > .svg-host {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38);
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    display: block;
    position: relative;
    z-index: 2;
    color-scheme: light;
    /* Pin to the left edge of the column so text on the main board and
       diagrams here share the same visual baseline. */
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
  .mw-blackboard-col--visual > .mermaid-host {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38);
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
    color-scheme: light;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
  /* LLM SVG diagrams: let height follow viewBox. Mermaid: cap height so flowcharts
     do not dwarf the blackboard (scroll inside the host instead). */
  .mw-blackboard-col--visual > .svg-host svg {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* Do not cap SVG height here — it shrinks the whole graph; scroll the host instead. */
  .mw-blackboard-col--visual > .mermaid-host svg {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* Give the visual column a real minimum rendered height so the
     diagram never collapses to a tiny strip when it has a wide
     aspect ratio. Reduced ~25% alongside the width change. */
  .mw-blackboard-col--visual > .svg-host {
    min-height: 240px;
  }
  .mw-blackboard-col--visual > .mermaid-host {
    min-height: 200px;
    max-height: min(65vh, 720px);
    overflow: auto;
  }
  .mw-blackboard-col--visual > .mermaid-host svg.mw-mermaid-scaled {
    transform: none !important;
  }
  .mw-blackboard-col--visual .mermaid-host svg,
  .mw-blackboard-col--visual .svg-host svg {
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
  }
  @media (min-width: 1280px) {
    .mw-blackboard-col--visual > .svg-host {
      min-height: 315px;
    }
    .mw-blackboard-col--visual > .mermaid-host {
      max-height: min(70vh, 880px);
    }
  }
  /* Diagrams always render on a light "paper card" — fixed dark-on-light palette. */
  .mw-blackboard-col--visual .mermaid-host svg.mw-mermaid-svg,
  .mw-blackboard-col--visual .mermaid-host svg,
  .mw-blackboard-col--visual .svg-host svg {
    max-width: 100%;
    color-scheme: light;
  }
  .mw-blackboard-col--visual .mermaid-host svg .nodeLabel,
  .mw-blackboard-col--visual .mermaid-host svg .nodeLabel *,
  .mw-blackboard-col--visual .mermaid-host svg .edgeLabel,
  .mw-blackboard-col--visual .mermaid-host svg .edgeLabel *,
  .mw-blackboard-col--visual .mermaid-host svg foreignObject div,
  .mw-blackboard-col--visual .mermaid-host svg foreignObject span,
  .mw-blackboard-col--visual .mermaid-host svg foreignObject p,
  .mw-blackboard-col--visual .mermaid-host svg text,
  .mw-blackboard-col--visual .mermaid-host svg tspan,
  .mw-blackboard-col--visual .svg-host svg text,
  .mw-blackboard-col--visual .svg-host svg tspan {
    font-family: "Inter", system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    fill: #0f172a !important;
    color: #0f172a !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
  }
  .mw-blackboard-col--visual .mermaid-host svg foreignObject div,
  .mw-blackboard-col--visual .mermaid-host svg foreignObject span,
  .mw-blackboard-col--visual .mermaid-host svg foreignObject p {
    background: transparent !important;
    background-color: transparent !important;
    width: max-content !important;
    max-width: 200px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
  /* Never let a label's foreignObject clip its text — JS sizes boxes to the
     content, and this is the safety net for any residual overflow. */
  .mw-blackboard-col--visual .mermaid-host svg foreignObject,
  .mw-diagram-modal-body svg foreignObject {
    overflow: visible !important;
  }
  .mw-blackboard-col--visual .mermaid-host svg .edgeLabel rect,
  .mw-blackboard-col--visual .mermaid-host svg .labelBkg {
    fill: #f8fafc !important;
    stroke: #334155 !important;
    stroke-width: 1px !important;
  }
  .mw-blackboard-col--visual .svg-host svg.mw-lesson-embedded-diagram text.mw-svg-layer-caption,
  .mw-blackboard-col--visual .svg-host svg.mw-lesson-embedded-diagram text.mw-svg-subtitle {
    fill: #0f172a !important;
  }
  .mw-blackboard-col--visual .mermaid-host svg .node rect,
  .mw-blackboard-col--visual .mermaid-host svg .node polygon,
  .mw-blackboard-col--visual .mermaid-host svg .node circle,
  .mw-blackboard-col--visual .mermaid-host svg .node ellipse,
  .mw-blackboard-col--visual .mermaid-host svg .node path {
    stroke: #334155 !important;
    stroke-width: 2px !important;
    fill: #ffffff !important;
  }
  .mw-blackboard-col--visual .mermaid-host svg .flowchart-link,
  .mw-blackboard-col--visual .mermaid-host svg path.path,
  .mw-blackboard-col--visual .mermaid-host svg .edgePath path {
    stroke: #1e293b !important;
    stroke-width: 2.25px !important;
  }
  .mw-blackboard-col--visual .mermaid-host svg marker path,
  .mw-blackboard-col--visual .mermaid-host svg defs marker path {
    fill: #1e293b !important;
    stroke: #1e293b !important;
  }
  .mw-blackboard-col--visual > .ascii-board-pre {
    background: transparent;
    border: 1px dashed rgba(247, 242, 216, 0.14);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--mw-chalk-color-dim);
    font-size: 14px;
    line-height: 1.5;
    overflow: auto;
    max-height: 100%;
  }
  .mw-blackboard-diagram:empty,
  .mw-blackboard-anim:empty { display: none; }
  /* When the LLM returns a tiny inline physics SVG, scale it to the text column. */
  .mw-blackboard-diagram svg {
    width: 100%;
    max-width: 36rem;
    min-height: 180px;
    height: auto;
    display: block;
  }

  /* Below the side-by-side breakpoint the stacked default already gives
     the diagram full width — we just add a subtle divider so the split
     reads as one board with two sections. */
  @media (max-width: 1279.98px) {
    .mw-blackboard[data-has-diagram="true"] .mw-blackboard-col--visual {
      margin-top: 0.5rem;
      padding-top: 1rem;
      border-top: 1px dashed rgba(247, 242, 216, 0.12);
      min-height: 260px;
    }
  }

  /* -- Teaching claim headline — bigger, hand-chalk feel. -- */
  .mw-board-claim {
    font-family: "Caveat", "Kalam", "Comic Sans MS", cursive;
    font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    line-height: 1.3;
    color: var(--mw-chalk-accent);
    margin: 0 0 0.25rem;
    padding: 0.1rem 0;
    border: none;
    background: none;
    letter-spacing: 0.005em;
    text-shadow: 0 0 1px rgba(253, 230, 138, 0.25);
  }

  /* -- Tutor controls: compact icon pills replacing the old text buttons. -- */
  .mw-tutor-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
  }
  .mw-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 32px;
    padding: 0 0.6rem;
    font-size: 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--mw-text-main);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .mw-ctrl:hover:not(:disabled) {
    background: rgba(246, 211, 101, 0.1);
    border-color: rgba(246, 211, 101, 0.45);
    color: var(--mw-gold);
  }
  .mw-ctrl:disabled { opacity: 0.45; cursor: not-allowed; }
  .mw-ctrl--sm { min-width: 26px; height: 26px; padding: 0 0.4rem; font-size: 0.78rem; }
  .mw-ctrl--select {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.04);
    padding: 0 0.6rem;
  }

  /* -- Tutor pane cleaner: no redundant "AI Tutor · Live2D" head. -- */
  .mw-pane--tutor .mw-pane-body { padding-top: 0.65rem; }

  /* -- Subtitles: larger, clearer, docked on video. -- */
  .mw-tutor-frame-inner .mw-subs-overlay {
    font-size: 1.05rem;
    padding: 28px 18px 12px;
    color: #fff6d0;
  }

  /* -- Chalk reveal: left-to-right clip-path animation.
        MathJax glyphs are filled paths, so we DO NOT stroke them — we
        reveal the filled glyph with an animated clip-path inset. That
        gives a true "written as I speak" look instead of fade-to-bold. -- */
  .mw-chalk-svg {
    color: var(--mw-chalk-color);
    filter:
      drop-shadow(0 0 0.6px rgba(253, 230, 138, 0.55))
      drop-shadow(0 0 1.4px rgba(255, 255, 255, 0.08));
    will-change: clip-path;
  }
  .mw-chalk-svg path {
    fill: currentColor;
    stroke: none;
  }
  .mw-board-segment {
    padding: 0.35rem 0.55rem;
    margin: 0.25rem -0.55rem;
    border-radius: 10px;
    transition: background 260ms ease, box-shadow 260ms ease;
  }
  .mw-board-segment--active {
    background: linear-gradient(90deg, rgba(253, 230, 138, 0.22), rgba(253, 230, 138, 0.04));
    box-shadow: inset 4px 0 0 var(--mw-chalk-accent);
  }
  .mw-board-segment--complete { opacity: 0.92; }
  .mw-board-segment--complete .mw-chalk-svg { opacity: 0.94; }
  /* Equations can be wide — scale them down a bit rather than spawn a
     per-equation horizontal scrollbar, which looks awful on chalk. */
  .mw-board-segment--equation {
    overflow: hidden;
    text-align: left;
  }
  .mw-board-segment--equation:empty {
    display: none;
    margin: 0;
    min-height: 0;
  }
  .mw-board-segment--equation:not(:has(svg, .katex)) {
    display: none;
    margin: 0;
    min-height: 0;
  }
  .mw-board-segment--equation .mw-chalk-svg {
    display: block;
    max-width: 100%;
    height: auto;
    min-height: 1.6em;
  }
  .mw-chalk-svg--inline {
    display: inline-block;
    vertical-align: middle;
    max-height: 1.35em;
    width: auto;
    min-height: 0;
  }
  .mw-chalk-inline-wrap {
    display: inline;
    white-space: nowrap;
  }
  .mw-subs-overlay .mw-subs-math .mw-chalk-svg--inline {
    max-height: 1.2em;
  }
  .mw-katex-chalk-pending {
    opacity: 0;
    clip-path: inset(-8% 100% -8% -4%);
    -webkit-clip-path: inset(-8% 100% -8% -4%);
  }
  .mw-katex-chalk-reveal {
    opacity: 1;
    clip-path: none;
    -webkit-clip-path: none;
    transition: clip-path 3.8s cubic-bezier(0.55, 0.08, 0.42, 0.92),
      opacity 0.35s ease;
  }

  /* -- In teaching state, slim down the shell padding so the board eats the viewport. -- */
  .mw-lesson-v1[data-state="teaching"] .mw-content {
    padding: 0.75rem 0.75rem 6.5rem;
  }

  /* -- Mobile hero tweaks. -- */
  @media (max-width: 640px) {
    .mw-hero-upload {
      margin: 1.2rem 0.4rem;
      padding: 1.4rem 1rem;
    }
    .mw-hero-drop { padding: 1.6rem 0.8rem 1.3rem; }
    .mw-hero-title { font-size: 1.25rem; }
    .mw-hero-sub { font-size: 0.88rem; }
    .mw-blackboard-body { padding: 1rem 1.1rem 1.2rem; }
    :root { --mw-board-eq-size: 1.3rem; --mw-board-title-size: 1.25rem; }
  }

  /* (Caveat handwriting font is loaded via <link> in the template <head>.) */

  /* ---- Deep Dive: Interactive widget modal --------------------------- */
  /* Default display is flex; the template hides it via inline style="display:none;",
     and the JS toggles between "none" and "" (empty) to show/hide. */
  .mw-widget-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    padding: 1.2rem;
  }
  .mw-widget-card {
    width: min(1000px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0b1020 0%, #0a0f1c 100%);
    color: #f5f7fa;
    border: 1px solid rgba(246, 211, 101, 0.32);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
    overflow: hidden;
  }
  .mw-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(247, 242, 216, 0.08);
    background: rgba(246, 211, 101, 0.06);
  }
  .mw-widget-kicker {
    font-family: "Caveat", "Kalam", cursive;
    font-size: 1.25rem;
    color: #f6d365;
    letter-spacing: 0.02em;
  }
  .mw-widget-close {
    background: transparent;
    border: 1px solid rgba(247, 242, 216, 0.18);
    color: #f5f7fa;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
  }
  .mw-widget-close:hover { background: rgba(247, 242, 216, 0.08); }
  .mw-widget-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 360px;
    background: #0b1020;
  }
  .mw-widget-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #c8cbd5;
    font-size: 0.95rem;
    text-align: center;
    padding: 1rem;
    pointer-events: none;
  }
  .mw-widget-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(246, 211, 101, 0.2);
    border-top-color: var(--mw-gold, #f6d365);
    border-radius: 50%;
    animation: mw-spin 0.9s linear infinite;
  }
  @keyframes mw-spin {
    to { transform: rotate(360deg); }
  }
  .mw-widget-loading-bar {
    width: min(280px, 80%);
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  .mw-widget-loading-bar-fill {
    display: block;
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, var(--mw-gold, #f6d365), rgba(246, 211, 101, 0.5));
    border-radius: 4px;
    animation: mw-widget-bar 1.4s ease-in-out infinite;
  }
  @keyframes mw-widget-bar {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(120%); }
    100% { transform: translateX(220%); }
  }
  .mw-widget-body iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
    border-radius: 0 0 14px 14px;
    background: #0b1020;
  }
  .mw-widget-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .mw-widget-fs {
    background: transparent;
    border: 1px solid rgba(247, 242, 216, 0.18);
    color: var(--text);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
  }
  .mw-widget-fs:hover { background: rgba(247, 242, 216, 0.08); }

  /* Rate-limit / tutor busy notice from lesson/step JSON `notice` */
  .mw-lesson-notice {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--mw-gold-soft);
    background: rgba(217, 164, 65, 0.12);
    color: var(--mw-text-main);
    font-size: 0.92rem;
    line-height: 1.35;
  }
  .mw-lesson-notice[hidden] {
    display: none !important;
  }

  /* Subtitles: visible only when CC is on (.mw-captions-on on root). */
  .mw-lesson-v1:not(.mw-captions-on) .mw-subs-overlay {
    display: none !important;
  }
  .mw-ctrl--cc.is-off {
    opacity: 0.55;
  }
  .mw-topbar-study .form-check-label {
    color: var(--mw-text-muted);
    font-size: 0.76rem;
  }
  .mw-topbar-ghost--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
  }

  /* EU AI Act disclosure — compact strip; full text in <details>. */
  .mw-ai-disclosure {
    margin: 0;
    padding: 0.32rem 0.9rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(200, 190, 165, 0.82);
    background: rgba(8, 12, 10, 0.55);
    border-bottom: 1px solid rgba(217, 164, 65, 0.12);
  }
  .mw-ai-disclosure > summary {
    cursor: pointer;
    list-style: none;
    color: rgba(210, 198, 168, 0.88);
    font-weight: 500;
  }
  .mw-ai-disclosure > summary::-webkit-details-marker {
    display: none;
  }
  .mw-ai-disclosure-body {
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
    color: rgba(190, 185, 170, 0.9);
  }
  .mw-ai-disclosure-body p {
    margin: 0 0 0.4rem;
  }
  .mw-ai-disclosure-review {
    font-size: 0.68rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(217, 164, 65, 0.35);
    background: transparent;
    color: rgba(217, 164, 65, 0.9);
  }
  body:has(.mw-lesson-v1.mw-study-mode) .mw-ai-disclosure {
    padding: 0.22rem 0.75rem;
  }
  body:has(.mw-lesson-v1.mw-study-mode) .mw-ai-disclosure > summary {
    font-size: 0.68rem;
  }
  .mw-topbar-tools .form-check-input:checked {
    background-color: var(--mw-gold);
    border-color: var(--mw-gold);
  }

  /* Bootstrap scoped to lesson shell */
  .mw-lesson-v1 .btn-primary {
    background: var(--mw-gold);
    background-image: none;
    border-color: var(--mw-gold);
    color: var(--mw-accent-ink);
    font-weight: 600;
    border-radius: var(--mw-radius-pill);
  }
  .mw-lesson-v1 .btn-primary:hover:not(:disabled),
  .mw-lesson-v1 .btn-primary:focus {
    background: var(--mw-gold);
    border-color: var(--mw-gold-2);
    color: var(--mw-accent-ink);
    filter: brightness(1.05);
  }
  .mw-lesson-v1 .btn-outline-light {
    color: var(--mw-text-main);
    border-color: var(--mw-input-border);
    background: transparent;
    border-radius: var(--mw-radius-pill);
  }
  .mw-lesson-v1 .btn-outline-light:hover:not(:disabled) {
    background: var(--mw-gold-faint);
    border-color: var(--mw-gold);
    color: var(--mw-text-main);
  }
  .mw-lesson-v1 .form-select {
    background-color: var(--mw-input-bg);
    border-color: var(--mw-input-border);
    color: var(--mw-text-main);
  }
  .mw-lesson-v1[data-theme="light"] .btn-outline-light {
    color: var(--mw-text-main);
    border-color: var(--mw-input-border);
  }
  .mw-lesson-v1 .mw-pane--pdf .pdf-slide-wrap {
    background: var(--mw-input-bg);
    border-radius: 12px;
    border: 1px solid var(--mw-card-border);
  }

  .mw-blackboard-col--visual > .mermaid-host {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .mw-blackboard-col--visual:has(.mermaid-host svg) > .ascii-board-pre {
    display: none !important;
  }

  .mw-practice-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 72px;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(217, 164, 65, 0.45);
    background: rgba(14, 59, 45, 0.92);
    color: var(--mw-text-main);
    font-size: 0.86rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
  .mw-practice-toast-link {
    color: var(--mw-gold);
    font-weight: 600;
    text-decoration: none;
  }
  .mw-practice-toast-link:hover { text-decoration: underline; }
  .mw-practice-toast-close {
    background: transparent;
    border: none;
    color: var(--mw-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
  }

  .mw-action-bar[data-lesson-phase="page-end"] .mw-btn-doubt,
  .mw-action-bar[data-lesson-phase="page-end"] .mw-btn-video {
    opacity: 0.92;
  }

  /* Practice mode page — minimal theme */
  body.mw-practice-page {
    min-height: 100vh;
    color-scheme: dark;
    --mw-bg: #0b1220;
    --mw-bg-soft: #1a1a2e;
    --mw-fg: #f8fafc;
    --mw-gold: #d9a441;
    --mw-gold-2: #e8c04a;
    --mw-text-main: var(--mw-fg);
    --mw-text-muted: #94a3b8;
    --mw-topbar-bg: #1a1a2e;
    --mw-input-border: rgba(217, 164, 65, 0.22);
    background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
    color: var(--mw-text-main);
    font-family: var(--mw-font, "Inter", system-ui, sans-serif);
  }
  .mw-practice-topbar {
    margin-bottom: 0;
    background: var(--mw-topbar-bg);
    border-bottom: 1px solid rgba(217, 164, 65, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
  }
  .mw-practice-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
  }
  .mw-practice-card-shell {
    background: rgba(26, 26, 46, 0.72);
    border: 1px solid rgba(217, 164, 65, 0.18);
    border-radius: 18px;
    padding: 1.75rem 1.5rem 2rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  }
  .mw-practice-status,
  .mw-practice-filename {
    color: var(--mw-text-muted);
    margin: 0 0 1rem;
    font-size: 0.92rem;
  }
  .mw-practice-section-title {
    font-size: 1.05rem;
    margin: 0 0 0.85rem;
    color: var(--mw-gold);
    font-weight: 600;
  }
  .mw-practice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
  }
  .mw-practice-chip {
    border: 1px solid rgba(217, 164, 65, 0.35);
    background: rgba(11, 18, 32, 0.55);
    color: var(--mw-text-main);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .mw-practice-chip.is-selected {
    border-color: var(--mw-gold);
    background: rgba(217, 164, 65, 0.16);
    box-shadow: 0 0 0 1px rgba(217, 164, 65, 0.25);
  }
  .mw-practice-chip:hover:not(.mw-practice-chip--muted) {
    border-color: var(--mw-gold);
    background: rgba(217, 164, 65, 0.1);
  }
  .mw-practice-chip--muted {
    cursor: default;
    opacity: 0.75;
  }
  .mw-practice-all-pages {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--mw-text-muted);
    margin-bottom: 1.75rem;
  }
  .mw-practice-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (max-width: 640px) {
    .mw-practice-cards {
      grid-template-columns: 1fr;
    }
  }
  .mw-practice-card {
    border: 1px solid rgba(217, 164, 65, 0.22);
    border-radius: 14px;
    padding: 1.35rem 1.25rem 1.25rem;
    background: rgba(11, 18, 32, 0.5);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .mw-practice-card:hover,
  .mw-practice-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--mw-gold);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    outline: none;
  }
  .mw-practice-card-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.25rem;
  }
  .mw-practice-card h3 {
    margin: 0;
    font-size: 1.12rem;
    color: var(--mw-text-main);
  }
  .mw-practice-card p {
    margin: 0 0 0.75rem;
    color: var(--mw-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    flex: 1 1 auto;
  }
  .mw-practice-card-btn {
    align-self: flex-start;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    color: #1a1500;
    background: linear-gradient(90deg, var(--mw-gold), var(--mw-gold-2));
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .mw-practice-card-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
  }
  .mw-practice-insufficient {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    border: 1px dashed rgba(217, 164, 65, 0.35);
    color: var(--mw-text-muted);
    background: rgba(11, 18, 32, 0.4);
  }
  .mw-practice-insufficient a { color: var(--mw-gold); }

  /* ===== View Options menu (all themes) ===== */
  .mw-view-options .dropdown-toggle::after {
    margin-left: 0.35em;
  }
  .mw-view-options-menu {
    min-width: 260px;
    padding: var(--mw-space-1);
    z-index: 200;
  }
  .mw-view-options-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--mw-space-1);
  }
  .mw-view-options-item + .mw-view-options-item {
    border-top: 1px solid var(--mw-input-border);
  }
  .mw-view-options-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mw-text-muted);
    margin: 0;
  }
  .mw-view-options-sublabel {
    font-size: 0.78rem;
    color: var(--mw-text-muted);
    margin: 0.35rem 0 0.15rem;
  }
  .mw-voice-picker-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
  }
  .mw-voice-picker-row .form-select {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mw-voice-preview-btn {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--mw-radius-md);
    border: 1px solid var(--mw-input-border);
    background: var(--mw-input-bg, rgba(30, 41, 59, 0.5));
    color: var(--mw-gold);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
  }
  .mw-voice-preview-btn:hover {
    border-color: var(--mw-gold);
    background: rgba(217, 164, 65, 0.12);
  }
  .mw-voice-preview-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .mw-view-options-menu .mw-topbar-lang,
  .mw-view-options-menu .mw-topbar-theme,
  .mw-view-options-menu .form-select {
    width: 100%;
    border-radius: var(--mw-radius-md);
  }
  .mw-view-options-menu .mw-topbar-ghost {
    width: 100%;
    justify-content: center;
    border-radius: var(--mw-radius-md);
  }
  .mw-view-options-menu .mw-topbar-study {
    padding: 0 var(--mw-space-1);
  }

  /* ===== Minimal theme component overrides ===== */
  body[data-lesson-theme="minimal"] .mw-topbar,
  .mw-lesson-v1[data-theme="minimal"] .mw-topbar {
    border-bottom: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  }
  body[data-lesson-theme="minimal"] .mw-kicker,
  .mw-lesson-v1[data-theme="minimal"] .mw-kicker {
    display: none;
  }
  body[data-lesson-theme="minimal"] .mw-topbar-title,
  .mw-lesson-v1[data-theme="minimal"] .mw-topbar-title {
    font-weight: 600;
  }
  body[data-lesson-theme="minimal"] .mw-topbar-pager,
  .mw-lesson-v1[data-theme="minimal"] .mw-topbar-pager {
    border: none;
    background: var(--mw-input-bg);
    border-radius: var(--mw-radius-md);
    padding: var(--mw-space-1) var(--mw-space-2);
    gap: var(--mw-space-1);
  }
  body[data-lesson-theme="minimal"] .mw-topbar-file,
  .mw-lesson-v1[data-theme="minimal"] .mw-topbar-file {
    border: none;
    background: var(--mw-input-bg);
    border-radius: var(--mw-radius-md);
  }
  body[data-lesson-theme="minimal"] .mw-view-options-menu,
  .mw-lesson-v1[data-theme="minimal"] .mw-view-options-menu {
    background: var(--mw-bg-soft);
    border: none;
    box-shadow: var(--mw-pane-shadow);
    border-radius: var(--mw-radius-md);
  }
  body[data-lesson-theme="minimal"] .mw-view-options-item + .mw-view-options-item,
  .mw-lesson-v1[data-theme="minimal"] .mw-view-options-item + .mw-view-options-item {
    border-top-color: rgba(148, 163, 184, 0.12);
  }

  /* Hero / setup */
  body[data-lesson-theme="minimal"] .mw-hero-upload,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-upload {
    max-width: 560px;
    margin: var(--mw-space-4) auto;
    padding: var(--mw-space-4);
    background: var(--mw-bg-soft);
    border: none;
    box-shadow: var(--mw-pane-shadow);
    border-radius: var(--mw-space-2);
  }
  body[data-lesson-theme="minimal"] .mw-hero-drop,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-drop {
    background: rgba(15, 23, 42, 0.4);
    border: 2px dashed rgba(148, 163, 184, 0.25);
    padding: var(--mw-space-4) var(--mw-space-2);
  }
  body[data-lesson-theme="minimal"] .mw-hero-drop:hover,
  body[data-lesson-theme="minimal"] .mw-hero-drop:focus-visible,
  body[data-lesson-theme="minimal"] .mw-hero-drop.is-dragover,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-drop:hover,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-drop:focus-visible,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-drop.is-dragover {
    background: rgba(246, 211, 101, 0.06);
    box-shadow: none;
    border-color: rgba(246, 211, 101, 0.4);
  }
  body[data-lesson-theme="minimal"] .mw-hero-title,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-title {
    font-size: 1.25rem;
    font-weight: 600;
  }
  body[data-lesson-theme="minimal"] .mw-hero-alt-divider::before,
  body[data-lesson-theme="minimal"] .mw-hero-alt-divider::after,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-alt-divider::before,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-alt-divider::after {
    display: none;
  }
  body[data-lesson-theme="minimal"] .mw-hero-alt-divider,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-alt-divider {
    width: 100%;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: var(--mw-space-2) 0;
  }
  body[data-lesson-theme="minimal"] .mw-hero-alt-divider span,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-alt-divider span {
    position: relative;
    top: -0.65rem;
    background: var(--mw-bg-soft);
    padding: 0 var(--mw-space-1);
    color: var(--mw-text-muted);
    font-size: 0.78rem;
  }
  body[data-lesson-theme="minimal"] .mw-hero-controls,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-controls {
    margin-top: var(--mw-space-2);
    gap: var(--mw-space-1);
  }
  body[data-lesson-theme="minimal"] .mw-hero-lang-row,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-lang-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mw-space-1);
  }
  body[data-lesson-theme="minimal"] .mw-hero-lang-select,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-lang-select {
    min-width: 0;
    width: 100%;
    border-radius: var(--mw-radius-md);
  }
  body[data-lesson-theme="minimal"] .btn-gold.mw-hero-cta,
  .mw-lesson-v1[data-theme="minimal"] .btn-gold.mw-hero-cta {
    border-radius: var(--mw-radius-md);
    padding: 12px var(--mw-space-3);
    font-weight: 600;
  }
  body[data-lesson-theme="minimal"] .mw-hero-filename,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-filename {
    border: none;
    background: var(--mw-gold-faint);
  }

  /* Dashboard panes */
  body[data-lesson-theme="minimal"] .mw-stage,
  .mw-lesson-v1[data-theme="minimal"] .mw-stage {
    gap: var(--mw-space-2);
  }
  body[data-lesson-theme="minimal"] .mw-pane,
  .mw-lesson-v1[data-theme="minimal"] .mw-pane {
    border: none;
    background: var(--mw-bg-soft);
    box-shadow: var(--mw-pane-shadow);
    border-radius: var(--mw-space-2);
  }
  body[data-lesson-theme="minimal"] .mw-pane-body,
  .mw-lesson-v1[data-theme="minimal"] .mw-pane-body {
    padding: var(--mw-space-2);
  }
  body[data-lesson-theme="minimal"] .mw-pane-head,
  .mw-lesson-v1[data-theme="minimal"] .mw-pane-head {
    border-bottom: none;
    background: rgba(15, 23, 42, 0.35);
  }
  body[data-lesson-theme="minimal"] iframe#teacher,
  .mw-lesson-v1[data-theme="minimal"] iframe#teacher {
    border-radius: 12px;
    background: #0f172a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  }

  /* Deck tabs — segmented control */
  body[data-lesson-theme="minimal"] .deck-tabs,
  .mw-lesson-v1[data-theme="minimal"] .deck-tabs {
    background: var(--mw-input-bg);
    border-radius: var(--mw-radius-md);
    padding: 4px;
    gap: 4px;
    margin-bottom: var(--mw-space-1);
  }
  body[data-lesson-theme="minimal"] .deck-tabs button,
  .mw-lesson-v1[data-theme="minimal"] .deck-tabs button {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 6px var(--mw-space-2);
    font-weight: 500;
  }
  body[data-lesson-theme="minimal"] .deck-tabs button.active,
  .mw-lesson-v1[data-theme="minimal"] .deck-tabs button.active {
    background: var(--mw-bg-soft);
    color: var(--mw-gold);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  body[data-lesson-theme="minimal"] .deck-tab-flip,
  .mw-lesson-v1[data-theme="minimal"] .deck-tab-flip {
    border: none;
    background: transparent;
    margin-left: auto;
  }

  /* Outline / follow-along */
  body[data-lesson-theme="minimal"] .pdf-slide-wrap,
  .mw-lesson-v1[data-theme="minimal"] .pdf-slide-wrap {
    border: none;
    background: var(--mw-input-bg);
    padding: var(--mw-space-1);
    border-radius: var(--mw-radius-md);
  }
  body[data-lesson-theme="minimal"] .follow-along-list,
  .mw-lesson-v1[data-theme="minimal"] .follow-along-list {
    gap: var(--mw-space-1);
    padding: var(--mw-space-1);
  }
  body[data-lesson-theme="minimal"] .follow-along-card,
  .mw-lesson-v1[data-theme="minimal"] .follow-along-card {
    border: none;
    background: var(--mw-input-bg);
    padding: var(--mw-space-2);
    gap: var(--mw-space-2);
    border-radius: 12px;
  }
  body[data-lesson-theme="minimal"] .follow-along-card .follow-body,
  .mw-lesson-v1[data-theme="minimal"] .follow-along-card .follow-body {
    font-family: var(--mw-font);
    font-weight: 400;
    line-height: 1.625;
    color: var(--mw-text-main);
  }
  body[data-lesson-theme="minimal"] .follow-along-card .follow-num,
  .mw-lesson-v1[data-theme="minimal"] .follow-along-card .follow-num {
    border: none;
    background: var(--mw-gold-soft);
    flex: 0 0 24px;
    height: 24px;
    font-size: 12px;
    font-weight: 600;
  }
  body[data-lesson-theme="minimal"] .follow-along-card.is-current,
  .mw-lesson-v1[data-theme="minimal"] .follow-along-card.is-current {
    background: var(--mw-bg-elevated);
    box-shadow: inset 3px 0 0 var(--mw-gold);
    border-color: transparent;
  }
  body[data-lesson-theme="minimal"] .follow-along-card.is-current .follow-num,
  .mw-lesson-v1[data-theme="minimal"] .follow-along-card.is-current .follow-num {
    background: var(--mw-gold);
    color: var(--mw-accent-ink);
  }
  body[data-lesson-theme="minimal"] .mw-lesson-line-detail,
  .mw-lesson-v1[data-theme="minimal"] .mw-lesson-line-detail {
    border: none;
    background: var(--mw-input-bg);
    border-radius: var(--mw-radius-md);
    padding: var(--mw-space-1);
  }

  /* Action bar */
  body[data-lesson-theme="minimal"] .mw-action-bar,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar {
    background: var(--mw-action-bar-bg);
    backdrop-filter: blur(12px);
    border: none;
    border-radius: var(--mw-space-2);
    padding: var(--mw-space-1) var(--mw-space-2);
    gap: var(--mw-space-1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
  }
  body[data-lesson-theme="minimal"] .mw-action-bar .btn,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .btn {
    border-radius: var(--mw-radius-md);
  }
  body[data-lesson-theme="minimal"] .mw-action-bar .mw-btn-cta,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .mw-btn-cta {
    font-weight: 600;
    background: var(--mw-gold);
    border-color: var(--mw-gold);
    color: var(--mw-accent-ink);
  }
  body[data-lesson-theme="minimal"] .mw-action-bar .btn-outline-light,
  body[data-lesson-theme="minimal"] .mw-action-bar .btn-outline-warning,
  body[data-lesson-theme="minimal"] .mw-action-bar .mw-btn-doubt,
  body[data-lesson-theme="minimal"] .mw-action-bar .mw-btn-video,
  body[data-lesson-theme="minimal"] .mw-action-bar .dropdown-toggle,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .btn-outline-light,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .btn-outline-warning,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .mw-btn-doubt,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .mw-btn-video,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .dropdown-toggle {
    background: transparent;
    border: none;
    color: var(--mw-text-muted);
    box-shadow: none;
  }
  body[data-lesson-theme="minimal"] .mw-action-bar .btn-outline-light:hover,
  body[data-lesson-theme="minimal"] .mw-action-bar .btn-outline-warning:hover,
  body[data-lesson-theme="minimal"] .mw-action-bar .mw-btn-doubt:hover,
  body[data-lesson-theme="minimal"] .mw-action-bar .mw-btn-video:hover,
  body[data-lesson-theme="minimal"] .mw-action-bar .dropdown-toggle:hover,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .btn-outline-light:hover,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .btn-outline-warning:hover,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .mw-btn-doubt:hover,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .mw-btn-video:hover,
  .mw-lesson-v1[data-theme="minimal"] .mw-action-bar .dropdown-toggle:hover {
    background: var(--mw-gold-faint);
    color: var(--mw-text-main);
  }
  body[data-lesson-theme="minimal"] #transcriptSection.mw-pane--history:not(.mw-transcript-flyout),
  .mw-lesson-v1[data-theme="minimal"] #transcriptSection.mw-pane--history:not(.mw-transcript-flyout) {
    border: none;
    background: var(--mw-bg-soft);
    box-shadow: var(--mw-pane-shadow);
  }
  body[data-lesson-theme="minimal"] #transcriptSection.mw-pane--history:not(.mw-transcript-flyout) pre#log,
  .mw-lesson-v1[data-theme="minimal"] #transcriptSection.mw-pane--history:not(.mw-transcript-flyout) pre#log {
    border: none;
    background: var(--mw-input-bg);
  }
  body[data-lesson-theme="minimal"] .mw-hero-lang-select option,
  .mw-lesson-v1[data-theme="minimal"] .mw-hero-lang-select option {
    background: #1e293b;
    color: #f8fafc;
  }

  /* ===== PDF fullscreen overlay ===== */
  .mw-pdf-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mw-pdf-fullscreen[hidden] {
    display: none !important;
  }
  .mw-pdf-fullscreen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 12, 0.92);
    backdrop-filter: blur(6px);
  }
  .mw-pdf-fullscreen-body {
    position: relative;
    z-index: 1;
    width: min(96vw, 1200px);
    height: min(92vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px 16px;
  }
  .mw-pdf-fullscreen-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(30, 41, 59, 0.9);
    color: var(--mw-text-main);
    border: 1px solid var(--mw-input-border);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .mw-pdf-fullscreen-close:hover {
    background: var(--mw-bg-elevated, #334155);
  }
  #lessonPdfCanvasFs {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
  /* When zoomed past fit, let the canvas overflow and scroll within the body. */
  .mw-pdf-fullscreen-body.is-zoomed {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
  }
  .mw-pdf-fullscreen-body.is-zoomed #lessonPdfCanvasFs {
    max-width: none;
    max-height: none;
    margin: auto;
  }
  .mw-pdf-fullscreen-toolbar {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 32, 0.92);
    border: 1px solid var(--mw-input-border);
    border-radius: 10px;
    padding: 5px 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  }
  .mw-pdf-zoom-btn {
    background: rgba(30, 41, 59, 0.9);
    color: var(--mw-text-main);
    border: 1px solid var(--mw-input-border);
    border-radius: 7px;
    min-width: 30px;
    padding: 4px 9px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  .mw-pdf-zoom-btn--reset {
    font-size: 0.8rem;
    font-weight: 600;
  }
  .mw-pdf-zoom-btn:hover {
    background: var(--mw-bg-elevated, #334155);
    border-color: rgba(246, 211, 101, 0.5);
  }
  .mw-pdf-zoom-label {
    min-width: 48px;
    text-align: center;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--mw-text-main);
  }

  /* ===== Diagram expand modal ===== */
  .mw-diagram-modal {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .mw-diagram-modal[hidden] {
    display: none !important;
  }
  .mw-diagram-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 12, 0.9);
    backdrop-filter: blur(4px);
  }
  .mw-diagram-modal-card {
    position: relative;
    z-index: 1;
    width: min(96vw, 1100px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--mw-bg-soft, #1e293b);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
  }
  .mw-diagram-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mw-input-border);
  }
  .mw-diagram-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 8px;
  }
  .mw-diagram-modal-action {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: var(--mw-text-main, #f8fafc);
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
  }
  .mw-diagram-modal-action:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(246, 211, 101, 0.45);
  }
  .mw-diagram-modal-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mw-text-main);
  }
  .mw-diagram-modal-close {
    background: transparent;
    border: none;
    color: var(--mw-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
  }
  .mw-diagram-modal-close:hover {
    color: var(--mw-text-main);
  }
  .mw-diagram-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
  }
  .mw-diagram-modal-body svg {
    max-width: 95vw;
    max-height: 85vh;
    width: auto !important;
    height: auto !important;
    display: block;
    color-scheme: light;
  }
  .mw-diagram-modal-body svg .node rect,
  .mw-diagram-modal-body svg .node polygon,
  .mw-diagram-modal-body svg .node circle,
  .mw-diagram-modal-body svg .node path {
    fill: #f1f5f9 !important;
    stroke: #334155 !important;
  }
  .mw-diagram-modal-body svg .edgePath path,
  .mw-diagram-modal-body svg .flowchart-link {
    stroke: #1e293b !important;
  }
  .mw-diagram-modal-body svg marker path,
  .mw-diagram-modal-body svg marker polygon,
  .mw-diagram-modal-body svg marker circle {
    fill: var(--mw-mermaid-marker-fill, #1e293b) !important;
    stroke: var(--mw-mermaid-marker-fill, #1e293b) !important;
  }
  .mw-diagram-modal-body svg .nodeLabel,
  .mw-diagram-modal-body svg .label,
  .mw-diagram-modal-body svg text,
  .mw-diagram-modal-body svg tspan,
  .mw-diagram-modal-body svg foreignObject div,
  .mw-diagram-modal-body svg foreignObject span,
  .mw-diagram-modal-body svg foreignObject p {
    fill: #0f172a !important;
    color: #0f172a !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    max-width: 280px !important;
    line-height: 1.25 !important;
  }

  /* ===== Zen Mode (Part 2) ===== */
  #mwAiDisclosureContent,
  .mw-ai-disclosure-popover {
    display: none !important;
  }
  .mw-lesson-v1[data-state="empty"] .mw-action-bar,
  .mw-lesson-v1[data-state="loading"] .mw-action-bar {
    display: none !important;
  }
  .mw-lesson-v1[data-state="empty"] #mwContextDrawer,
  .mw-lesson-v1[data-state="loading"] #mwContextDrawer,
  .mw-lesson-v1[data-state="empty"] #mwContextBackdrop,
  .mw-lesson-v1[data-state="loading"] #mwContextBackdrop {
    display: none !important;
  }

  /* Zen desktop side-by-side grid — must not override mobile stack (see ≤1024px + reinforcement below) */
  @media (min-width: 1025px) {
  .mw-lesson-v1.mw-zen-mode[data-state="teaching"] .mw-shell {
    height: calc(100vh - 52px);
    max-height: calc(100vh - 52px);
    overflow: hidden;
  }
  .mw-lesson-v1.mw-zen-mode[data-state="teaching"] .mw-content {
    overflow: hidden;
    padding: 0.5rem 0.5rem 4.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .mw-lesson-v1.mw-zen-mode .mw-stage.mw-stage--zen {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    grid-template-rows: 1fr;
    grid-template-areas: "board pdf";
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: 0.65rem;
  }
  .mw-lesson-v1.mw-zen-mode .mw-pane--pdf {
    position: relative;
    min-height: 0;
    height: 100%;
    max-height: none !important;
    align-self: stretch;
  }
  .mw-lesson-v1.mw-zen-mode .mw-pane--board,
  .mw-lesson-v1.mw-zen-mode .mw-pane--pdf {
    min-height: 0;
    height: 100%;
  }
  .mw-lesson-v1.mw-zen-mode .mw-pane--board .mw-pane-body {
    overflow: hidden;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .mw-lesson-v1.mw-zen-mode .mw-pane--board .mw-pane-body > #blackboardPanel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-head {
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0.65rem 0.85rem 0.45rem;
    gap: 0.35rem 0.65rem;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-title {
    flex: 1 1 100%;
    display: block;
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.75rem 0.85rem 1rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-col--text,
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-col--visual {
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
    min-width: 0;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-col--text {
    overflow: visible;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-col--visual {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    clear: both;
  }
  .mw-lesson-v1.mw-zen-mode .mw-blackboard-col--visual > .mermaid-host {
    position: relative;
    width: 100%;
    align-items: flex-start;
    margin-top: 0;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38);
    color-scheme: light;
    max-height: min(42vh, 480px);
    overflow: auto;
    overflow-x: auto;
  }
  .mw-lesson-v1.mw-zen-mode .mermaid-host svg.mw-mermaid-scaled {
    transform: none !important;
  }
  .mw-lesson-v1.mw-zen-mode .mw-board-segment {
    margin-bottom: 0.65rem;
  }
  .mw-lesson-v1.mw-zen-mode .mw-diagram-fs {
    position: static;
    display: inline-flex;
    margin: 0.35rem 0 0;
    align-self: flex-start;
  }
  .mw-lesson-v1.mw-zen-mode .mw-pane--pdf .mw-pane-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: none !important;
    padding: 0.5rem;
    gap: 0;
  }
  @media (min-width: 900px) {
    .mw-lesson-v1.mw-zen-mode .mw-tutor-dock {
      min-width: 280px;
    }
  }
  .mw-lesson-v1.mw-zen-mode .mw-pane--pdf #followAlongSection {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    order: 0;
  }
  .mw-lesson-v1.mw-zen-mode .mw-pane--pdf .deck-pane.active {
    flex: 1 1 auto;
    min-height: 0;
  }
  .mw-lesson-v1.mw-zen-mode .pdf-slide-wrap {
    flex: 1 1 0;
    min-height: 0;
    max-height: none !important;
    height: auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 6px;
  }
  .mw-lesson-v1.mw-zen-mode .pdf-slide-wrap--landscape {
    max-height: none;
    min-height: 0;
  }
  .mw-lesson-v1.mw-zen-mode #lessonPdfCanvas {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .mw-lesson-v1.mw-zen-mode .mw-lesson-line-detail--pdf {
    display: none !important;
  }
  }

  /* Mobile zen stack reinforcement (after desktop block so it wins on phones) */
  @media (max-width: 1024px) {
    .mw-lesson-v1.mw-zen-mode .mw-stage.mw-stage--zen {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      grid-template-areas: "board" "pdf" !important;
      height: auto !important;
      min-height: 0 !important;
    }
    .mw-lesson-v1.mw-zen-mode .mw-pane--pdf {
      max-height: 40vh !important;
      height: auto !important;
    }
    .mw-lesson-v1.mw-zen-mode .mw-pane--pdf .mw-pane-body {
      max-height: none !important;
      height: auto !important;
    }
    .mw-lesson-v1.mw-zen-mode .mw-blackboard-title,
    .mw-lesson-v1.mw-zen-mode .mw-blackboard-body,
    .mw-lesson-v1.mw-zen-mode .mw-blackboard-col--text {
      word-break: normal;
      overflow-wrap: break-word;
      white-space: normal;
    }
    .mw-transcript-flyout {
      width: min(420px, 100vw) !important;
    }
    .mw-transcript-flyout pre#log {
      white-space: pre-wrap;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .mw-tutor-frame-inner .mw-subs-overlay,
    .mw-tutor-dock .mw-subs-overlay {
      max-width: calc(100vw - 1.5rem);
      left: 50%;
      transform: translateX(-50%);
    }
    .mw-captions-bar {
      max-width: calc(100vw - 1.5rem);
    }
  }

  @media (max-width: 768px) {
    .mw-tutor-frame-inner .mw-subs-overlay,
    .mw-captions-bar {
      bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 5.75rem);
      max-width: calc(100vw - 1rem);
    }
  }

  .mw-lesson-v1.mw-context-open .mw-action-bar {
    pointer-events: auto;
  }

  /* Right sidebar: slide deck + tutor dock stacked */
  .mw-sidebar-stack {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    gap: 0.5rem;
    position: relative;
  }
  .mw-zen-mode .mw-sidebar-stack #followAlongSection {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    order: 0;
  }
  .mw-tutor-dock {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin-top: auto;
    order: 1;
    border-radius: 12px;
    border: 1px solid var(--mw-card-border, rgba(148, 163, 184, 0.2));
    background: rgba(15, 23, 42, 0.92);
    overflow: hidden;
  }
  .mw-tutor-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    flex-shrink: 0;
  }
  .mw-tutor-dock-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mw-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .mw-tutor-minimize-btn {
    background: transparent;
    border: none;
    color: var(--mw-text-muted, #94a3b8);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .mw-tutor-minimize-btn:hover {
    background: rgba(148, 163, 184, 0.12);
    color: var(--mw-text-main, #f8fafc);
  }
  .mw-tutor-dock .mw-tutor-stage {
    padding: 0;
  }
  .mw-tutor-dock .mw-tutor-frame-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #000;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
  }
  .mw-tutor-dock .mw-tutor-video-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(38vh, 360px);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: #000;
  }
  .mw-tutor-dock .mw-tutor-video-slot iframe#teacher {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .mw-tutor-dock .mw-tutor-stage .mw-subs-overlay {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    flex-shrink: 0;
    max-height: 4.5em;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.82rem;
    line-height: 1.35;
    padding: 6px 10px 8px;
    font-weight: 500;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.88);
    border-radius: 0;
    color: #fff6d0;
    margin: 0;
    border: none;
    text-shadow: none;
  }
  .mw-lesson-v1.mw-tutor-minimized .mw-tutor-dock .mw-subs-overlay {
    display: none !important;
  }
  .mw-tutor-dock .mw-tutor-controls {
    padding: 6px 8px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    flex-shrink: 0;
  }
  .mw-lesson-v1.mw-tutor-minimized .mw-tutor-dock {
    display: none !important;
  }
  .mw-lesson-v1.mw-tutor-minimized #mwTutorDock .mw-tutor-frame-inner iframe#teacher {
    visibility: hidden;
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .mw-tutor-bubble {
    position: fixed;
    bottom: 96px;
    right: 20px;
    z-index: 1201;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(246, 211, 101, 0.35);
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    cursor: grab;
    touch-action: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .mw-tutor-bubble.mw-tutor-bubble--dragging {
    cursor: grabbing;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
  .mw-tutor-bubble[hidden] {
    display: none !important;
  }
  .mw-tutor-bubble-icon {
    font-size: 1.25rem;
    line-height: 1;
    position: relative;
    z-index: 1;
  }
  .mw-tutor-bubble-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(246, 211, 101, 0.45);
    animation: mw-tutor-pulse 2s ease-in-out infinite;
  }
  @keyframes mw-tutor-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.12); opacity: 0.2; }
  }

  /* Persistent chip to bring back subtitles after dismissing the captions bar. */
  .mw-captions-restore {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1201;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(246, 211, 101, 0.4);
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    color: var(--mw-text-main);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mw-captions-restore[hidden] {
    display: none !important;
  }
  .mw-captions-restore:hover {
    border-color: rgba(246, 211, 101, 0.75);
    background: rgba(246, 211, 101, 0.16);
  }
  .mw-captions-restore-label {
    line-height: 1;
  }

  /* ===== Auto-play "binge" mode ===== */
  .mw-btn-autoplay.is-active {
    border-color: rgba(246, 211, 101, 0.85) !important;
    color: var(--mw-gold) !important;
    background: rgba(246, 211, 101, 0.16) !important;
  }
  .mw-autoplay-beta-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.45em;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    border-radius: 999px;
    color: #0b1020;
    background: var(--mw-gold, #f6d365);
    vertical-align: middle;
  }
  .mw-autoplay-note {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #ffe6a8;
    background: rgba(246, 211, 101, 0.1);
    border: 1px solid rgba(246, 211, 101, 0.3);
    border-radius: 10px;
  }
  .mw-autoplay-panel {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 8, 12, 0.55);
    backdrop-filter: blur(3px);
  }
  .mw-autoplay-panel[hidden] {
    display: none !important;
  }
  .mw-autoplay-card {
    width: min(92vw, 420px);
    background: var(--mw-card, #131c20);
    border: 1px solid rgba(246, 211, 101, 0.35);
    border-radius: 14px;
    padding: 18px 20px 20px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    color: var(--mw-text-main);
  }
  .mw-autoplay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .mw-autoplay-title {
    font-size: 1.05rem;
    font-weight: 700;
  }
  .mw-autoplay-close {
    background: transparent;
    border: none;
    color: var(--mw-text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
  }
  .mw-autoplay-close:hover { color: var(--mw-text-main); }
  .mw-autoplay-sub {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--mw-text-muted);
    line-height: 1.45;
  }
  .mw-autoplay-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
  }
  .mw-autoplay-row label {
    font-size: 0.85rem;
    color: var(--mw-text-muted);
    min-width: 48px;
  }
  .mw-autoplay-dash {
    color: var(--mw-text-muted);
  }
  .mw-autoplay-input,
  .mw-autoplay-select {
    background: var(--mw-input-bg, rgba(0, 0, 0, 0.32));
    border: 1px solid var(--mw-input-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    color: var(--mw-text-main);
    padding: 6px 9px;
    font: inherit;
  }
  .mw-autoplay-input {
    width: 4.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .mw-autoplay-select {
    flex: 1;
  }
  .mw-autoplay-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }
  .mw-autoplay-actions .btn {
    flex: 1;
  }

  /* Context drawer — slides over PDF sidebar column only */
  .mw-context-backdrop {
    display: none !important;
  }
  .mw-context-drawer {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 12px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 300ms ease;
    visibility: hidden;
    pointer-events: none;
  }
  .mw-context-drawer[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
  }
  .mw-lesson-v1.mw-context-open .mw-context-drawer {
    transform: translateX(0);
  }
  .mw-context-drawer.is-expanded {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  /* Widget mode: break out of narrow sidebar into centered viewport modal */
  .mw-lesson-v1.mw-widget-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(2, 8, 12, 0.72);
    backdrop-filter: blur(3px);
    pointer-events: none;
  }
  .mw-context-drawer.mw-context-drawer--widget {
    position: fixed;
    z-index: 200;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(96vw, 1000px);
    height: min(88vh, 820px);
    max-height: none;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
    visibility: visible;
    pointer-events: auto;
  }
  .mw-lesson-v1.mw-context-open .mw-context-drawer.mw-context-drawer--widget:not(.is-expanded) {
    transform: translate(-50%, -50%);
  }
  .mw-context-drawer.mw-context-drawer--widget.is-expanded,
  .mw-context-drawer.mw-context-drawer--derivation.is-expanded {
    inset: 0;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    transform: none !important;
    border-radius: 0;
  }
  .mw-context-drawer.mw-context-drawer--derivation {
    position: fixed;
    z-index: 200;
    left: 50%;
    top: 50%;
    width: min(92vw, 720px);
    max-height: min(88vh, 900px);
    transform: translate(-50%, -50%);
  }
  .mw-derivation-body .mw-katex-chalk-pending {
    opacity: 1;
  }
  .mw-derivation-body .mw-board-segment--equation {
    display: block;
    min-height: 1.5em;
  }
  .mw-derivation-body .mw-board-segment--equation:not(:has(svg, .katex)) {
    display: block;
  }
  .mw-context-drawer--widget .mw-context-drawer-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 14px 14px;
  }
  .mw-context-drawer--widget .mw-context-section[data-context-mode="widget"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .mw-context-drawer--widget .mw-widget-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .mw-context-drawer--widget .mw-widget-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .mw-context-drawer--widget .mw-widget-body iframe {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.5);
  }
  .mw-yt-expand-btn {
    font-size: 0.78rem;
    padding: 4px 10px;
  }
  .mw-yt-embed-wrap:fullscreen {
    padding-bottom: 0;
    height: 100vh;
    background: #000;
  }
  .mw-yt-embed-wrap:fullscreen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .mw-context-drawer-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }
  .mw-context-drawer-title {
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mw-text-main, #f8fafc);
  }
  .mw-context-drawer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .mw-context-drawer-close {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    color: var(--mw-text-main, #f8fafc);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mw-context-drawer-close:hover {
    color: var(--mw-text-main, #f8fafc);
  }
  .mw-context-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 20px;
  }
  .mw-context-empty {
    font-size: 0.82rem;
    color: var(--mw-text-muted, #94a3b8);
    margin: 0;
    padding: 1rem 0;
  }
  .mw-context-section[hidden] {
    display: none !important;
  }
  .mw-context-card {
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 12px;
  }
  .mw-context-drawer .mw-derivation-card,
  .mw-context-drawer .mw-widget-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .mw-context-drawer .mw-derivation-body {
    color: #cbd5e1;
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .mw-context-drawer .mw-derivation-statement {
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 0.75rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--mw-gold, #f6d365);
  }
  .mw-context-drawer .mw-derivation-context {
    background: rgba(30, 41, 59, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 0.75rem;
  }
  .mw-context-drawer .mw-derivation-context-label {
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mw-gold, #f6d365);
    text-transform: uppercase;
  }
  .mw-context-drawer .mw-derivation-context-value {
    color: #cbd5e1;
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
  }
  .mw-context-drawer .mw-derivation-step {
    background: rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 0.6rem;
    border-left: 3px solid rgba(56, 189, 248, 0.5);
  }
  .mw-context-drawer .mw-derivation-step-num {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    font-weight: 600;
  }
  .mw-context-drawer .mw-derivation-step-title {
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    color: #f8fafc;
    font-weight: 600;
  }
  .mw-context-drawer .mw-derivation-step-explanation {
    color: #cbd5e1;
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
  }
  .mw-context-drawer .mw-derivation-step-equation {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 6px;
  }
  .mw-context-drawer .mw-derivation-summary {
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.45);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 0.5rem;
  }
  .mw-context-drawer .mw-widget-body iframe {
    width: 100%;
    min-height: 360px;
    border: 0;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.5);
  }
  .mw-context-video-card .mw-yt-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #0f172a;
  }
  .mw-context-video-card .mw-yt-embed-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .mw-context-video-body {
    font-family: var(--mw-font-body, Inter, system-ui, sans-serif);
    font-size: 0.88rem;
    color: #cbd5e1;
  }
  .mw-context-video-body strong {
    color: #f8fafc;
    font-weight: 600;
  }

  /* AI disclosure badge */
  .mw-ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
    color: rgba(246, 211, 101, 0.9);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: help;
    line-height: 1;
  }
  .mw-ai-badge:hover,
  .mw-ai-badge:focus {
    background: rgba(148, 163, 184, 0.22);
    color: var(--mw-gold, #f6d365);
  }
  .mw-ai-disclosure-popover p {
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
    color: #e2e8f0;
    max-width: 260px;
  }
  .popover.mw-ai-popover .popover-body {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
  }
  .popover.mw-ai-popover .popover-header {
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }

  /* Zen action capsule */
  .mw-lesson-v1.mw-zen-mode .mw-action-bar {
    padding: 0.45rem 0.75rem;
    gap: 0.4rem;
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.18);
    font-size: 0.82rem;
  }
  .mw-lesson-v1.mw-zen-mode .mw-action-bar .btn {
    font-size: 0.82rem;
    padding: 0.28rem 0.65rem;
  }
  .mw-lesson-v1.mw-zen-mode .mw-action-bar #btnStopMain {
    display: none !important;
  }
  .mw-topbar-ghost--danger {
    color: #f87171 !important;
  }
  .mw-btn-context {
    position: relative;
  }
  .mw-context-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mw-gold, #f6d365);
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9);
  }
  #lessonPdfCanvasFs {
    background: #fff;
    border-radius: 4px;
  }

  /* Captions bar (minimized tutor) */
  .mw-captions-bar {
    position: fixed;
    left: auto;
    right: 20px;
    transform: none;
    bottom: 24px;
    z-index: 1200;
    width: max-content;
    max-width: min(96vw, 900px);
    padding: 0.5rem 1.75rem 0.5rem 1.25rem;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.88);
    color: #fff6d0;
    font-size: 0.88rem;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .mw-captions-bar.mw-captions-bar--dragging {
    cursor: grabbing;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
  .mw-captions-bar.mw-captions-bar--collapsed {
    display: none !important;
  }
  .mw-captions-bar-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .mw-captions-bar-collapse {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff6d0;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .mw-captions-bar-collapse:hover {
    background: rgba(255, 255, 255, 0.22);
  }
  .mw-lesson-v1.mw-captions-size-small .mw-subs-overlay,
  .mw-lesson-v1.mw-captions-size-small .mw-captions-bar {
    font-size: 0.78rem;
  }
  .mw-lesson-v1.mw-captions-size-large .mw-subs-overlay,
  .mw-lesson-v1.mw-captions-size-large .mw-captions-bar {
    font-size: 1.05rem;
  }
  .mw-lesson-v1.mw-high-contrast {
    filter: contrast(1.08) saturate(1.05);
  }

  /* Settings modal (glassmorphism) */
  body.mw-settings-open {
    overflow: hidden;
  }
  .mw-settings-modal[hidden] {
    display: none !important;
  }
  .mw-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
  }
  .mw-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(8px);
  }
  .mw-settings-shell {
    position: relative;
    z-index: 1;
    width: min(920px, 96vw);
    max-height: min(80vh, 780px);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
  }
  .mw-settings-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  .mw-settings-nav {
    flex: 0 0 25%;
    min-width: 180px;
    padding: 1.25rem 0.75rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .mw-settings-nav-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0.5rem 0.75rem;
    color: var(--mw-text-main, #f8fafc);
  }
  .mw-settings-nav-item {
    text-align: left;
    border: none;
    background: transparent;
    color: var(--mw-text-muted, #94a3b8);
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
    border-left: 3px solid transparent;
  }
  .mw-settings-nav-item.is-active {
    background: rgba(59, 130, 246, 0.15);
    color: #e2e8f0;
    border-left-color: #3b82f6;
  }
  .mw-settings-nav-item:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
  }
  .mw-settings-panels {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
  }
  .mw-settings-panel[hidden] {
    display: none !important;
  }
  .mw-settings-panel-title {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mw-text-main, #f8fafc);
  }
  .mw-settings-profile-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mw-settings-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    font-size: 1.4rem;
  }
  .mw-settings-profile-name {
    margin: 0;
    font-weight: 600;
    color: var(--mw-text-main, #f8fafc);
  }
  .mw-settings-profile-email {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--mw-text-muted, #94a3b8);
  }
  .mw-settings-field {
    margin-bottom: 1.1rem;
  }
  .mw-settings-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mw-text-muted, #94a3b8);
    margin-bottom: 0.35rem;
  }
  .mw-settings-hint {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--mw-text-muted, #94a3b8);
    line-height: 1.4;
  }
  .mw-settings-link {
    color: var(--mw-gold, #f6d365);
    text-decoration: none;
    font-size: 0.9rem;
  }
  .mw-settings-link.mw-topbar-ghost--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .mw-settings-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .mw-settings-segment {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.6);
    color: var(--mw-text-muted, #94a3b8);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.82rem;
    cursor: pointer;
  }
  .mw-settings-segment.is-active {
    border-color: #3b82f6;
    color: #e2e8f0;
    background: rgba(59, 130, 246, 0.12);
  }
  .mw-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .mw-settings-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
  }
  .mw-settings-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .mw-settings-switch-track {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
    transition: background 0.2s ease;
    position: relative;
  }
  .mw-settings-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
  }
  .mw-settings-switch input:checked + .mw-settings-switch-track {
    background: #3b82f6;
  }
  .mw-settings-switch input:checked + .mw-settings-switch-track::after {
    transform: translateX(20px);
  }
  .mw-settings-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.35);
  }
  .mw-settings-btn {
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .mw-settings-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
  }
  .mw-settings-btn--primary {
    background: #3b82f6;
    color: #fff;
  }
  .mw-settings-btn--primary:hover {
    background: #2563eb;
  }
  @media (max-width: 720px) {
    .mw-settings-layout {
      flex-direction: column;
    }
    .mw-settings-nav {
      flex: 0 0 auto;
      flex-direction: row;
      flex-wrap: wrap;
      min-width: 0;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .mw-settings-nav-item {
      border-left: none;
      border-bottom: 2px solid transparent;
    }
    .mw-settings-nav-item.is-active {
      border-bottom-color: #3b82f6;
    }
  }

  /* Sprint: busy overlay, resume banner, minimized transport, guided focus */
  .mw-lesson-busy {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 20, 0.55);
    backdrop-filter: blur(3px);
    pointer-events: auto;
  }
  .mw-lesson-busy[hidden] { display: none !important; }
  .mw-lesson-busy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
  .mw-lesson-busy-text { font-size: 0.92rem; color: var(--mw-text-main); }
  .mw-resume-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: max(12px, env(safe-area-inset-top, 0px));
    z-index: 1250;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(246, 211, 101, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 0.88rem;
    color: var(--mw-text-main);
  }
  .mw-resume-banner[hidden] { display: none !important; }
  .mw-resume-banner-btn {
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    background: var(--mw-cta-grad);
    color: var(--mw-accent-ink);
    font-weight: 600;
    cursor: pointer;
  }
  .mw-resume-banner-dismiss {
    border: none;
    background: transparent;
    color: var(--mw-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
  }
  .mw-captions-bar-transport {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
  }
  .mw-captions-bar-ctrl {
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff6d0;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
  }
  .mw-captions-bar-ctrl[hidden] { display: none !important; }
  .mw-captions-bar-ctrl:disabled { opacity: 0.45; cursor: not-allowed; }
  .mw-ctrl--resume[hidden],
  .mw-ctrl--pause[hidden] { display: none !important; }
  .mw-lesson-v1.mw-guided-focus .mw-blackboard-col--visual {
    opacity: 0.92;
    transition: opacity 0.45s ease;
    pointer-events: auto;
  }
  .mw-lesson-v1.mw-guided-focus.mw-guided-focus--diagram .mw-blackboard-col--visual {
    opacity: 1;
    pointer-events: auto;
  }
  .mw-lesson-v1.mw-guided-focus .mw-blackboard-col--text {
    opacity: 0.72;
    transition: opacity 0.35s ease;
  }
  .mw-lesson-v1.mw-guided-focus.mw-guided-focus--board .mw-blackboard-col--text,
  .mw-lesson-v1.mw-guided-focus .mw-board-segment--active {
    opacity: 1;
  }