:root {
    color-scheme: dark;
    /* Aligned with frontend/css/form-theme.css .theme-mimwise */
    --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-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-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-color: #f7f2d8;
    --mw-chalk-color-dim: rgba(247, 242, 216, 0.72);
    --mw-chalk-accent: #fde68a;
    --mw-chalk-stroke-width: 2.1;
    --mw-chalk-duration: 2600ms;
    --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);
  }

  body {
    margin: 0;
    min-height: 100vh;
    background:
      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);
    color: var(--mw-text-main);
    font: var(--mw-body-size) / 1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  
  /* 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-image: var(--mw-cta-grad);
    color: #111;
    border: none;
    font-weight: 700;
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(217, 164, 65, 0.35);
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
  }
  .btn-gold:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.6),
      0 0 28px rgba(217, 164, 65, 0.45);
    filter: brightness(1.04);
  }
  .btn-gold:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
      0 8px 16px rgba(0, 0, 0, 0.5),
      0 0 16px rgba(217, 164, 65, 0.3);
  }

  .mw-btn-cta {
    background: var(--mw-cta-grad) !important;
    color: #111 !important;
    border: none !important;
    font-weight: 700;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.45),
      0 0 20px rgba(217, 164, 65, 0.32);
  }
  .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: rgba(2, 8, 12, 0.95);
    border: 1px solid rgba(246, 211, 101, 0.2);
    border-radius: 12px;
    text-align: center;
  }
  .mermaid-host svg {
    max-width: 100% !important;
    height: auto !important;
  }
  .mw-diagram-fs {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    background: rgba(11, 16, 32, 0.78);
    color: var(--text, #f7f2d8);
    border: 1px solid rgba(247, 242, 216, 0.22);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
  }
  .mw-diagram-fs:hover { background: rgba(11, 16, 32, 0.95); }
  .mermaid-host.is-fullscreen,
  .svg-host.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 200 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(2, 8, 12, 0.98) !important;
    padding: 28px !important;
    overflow: auto !important;
  }
  .mermaid-host.is-fullscreen svg,
  .svg-host.is-fullscreen svg {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 64px) !important;
  }
  .svg-host {
    min-height: 360px;
    max-height: min(72vh, 820px);
    overflow: auto;
    padding: 12px 10px;
    background: rgba(2, 8, 12, 0.95);
    border: 1px solid rgba(246, 211, 101, 0.2);
    border-radius: 12px;
  }
  .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-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: auto;
    flex: 1 1 auto;
    min-height: clamp(280px, 52vh, 1400px);
    max-height: none;
    text-align: center;
    padding: 8px;
  }
  #lessonPdfCanvas {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: top;
  }
  .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: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .follow-along-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    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 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    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: 15px;
    line-height: 1.55;
    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%;
  }
  .mw-tutor-frame-inner {
    position: relative;
    flex: 0 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    /* Fixed height prevents flex slack below the iframe so subtitles stay flush with the video. */
    height: clamp(240px, 58vh, 640px);
    display: flex;
    flex-direction: column;
  }
  iframe#teacher {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #020a07;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9);
  }
  .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 shell (aligned with Grader theme-mimwise) */
  .mw-lesson-v1 {
    --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);
    min-height: 100vh;
    background: var(--lt-bg);
    color: var(--lt-text);
  }
  .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: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid var(--mw-card-border);
    background: linear-gradient(180deg, rgba(14, 59, 45, 0.22), rgba(5, 8, 7, 0.92));
    backdrop-filter: blur(12px);
  }
  .mw-topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    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 rgba(255, 255, 255, 0.1);
    background: radial-gradient(circle at top, rgba(217, 164, 65, 0.12), transparent 60%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .mw-topbar-logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(217, 164, 65, 0.25);
  }
  .mw-topbar-logo img {
    max-height: 40px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 6px rgba(217, 164, 65, 0.2));
  }
  .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 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }
  .mw-topbar-tools .form-select {
    background: rgba(5, 8, 7, 0.75);
    color: var(--mw-text-main);
    border: 1px solid var(--mw-card-border);
    font-size: 0.8rem;
  }
  .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-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:
      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));
    border: 1px solid var(--mw-card-border);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  }
  .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; }
  .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(380px, 44vh, 920px);
  }

  /* 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: auto minmax(420px, 0.85fr);
  }
  /* 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: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: min(280px, 40vh);
    height: auto;
    /* Cap only runaway height; do not use 40vh/360px caps that shrink the face area */
    max-height: min(640px, 70vh);
  }
  .mw-stage.mw-stage--lecture-theatre .mw-pane--tutor iframe#teacher {
    flex: 1 1 auto;
    min-height: min(260px, 38vh);
  }

  .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-subs-overlay {
    position: relative;
    margin: 8px 10px 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    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: 85%;
    margin-left: auto;
    margin-right: auto;
    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: 10px;
    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: 999px;
    border: 1px solid var(--mw-card-border);
    background: linear-gradient(165deg, rgba(14, 59, 45, 0.22), rgba(5, 8, 7, 0.92));
    backdrop-filter: blur(14px);
    z-index: 25;
    box-shadow: 0 11px 28px rgba(0, 0, 0, 0.45), 0 0 1px rgba(217, 164, 65, 0.15);
  }
  .mw-action-bar .btn { border-radius: 999px; }
  /* 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: rgba(217, 164, 65, 0.85);
    background: linear-gradient(165deg, rgba(217, 164, 65, 0.32), rgba(14, 59, 45, 0.55));
    color: var(--mw-chalk-color);
    font-weight: 650;
    padding-inline: 1.1rem;
    box-shadow: 0 0 0 1px rgba(217, 164, 65, 0.22);
  }
  .mw-action-bar[data-lesson-phase="page-end"] #btnNextPage:hover {
    border-color: var(--mw-gold);
    background: linear-gradient(165deg, rgba(217, 164, 65, 0.42), rgba(14, 59, 45, 0.62));
    color: #fff;
  }
  .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 .mw-pane--pdf,
  .mw-lesson-v1.mw-study-mode .mw-pane--history,
  .mw-lesson-v1.mw-study-mode #transcriptSection {
    display: none !important;
  }
  .mw-lesson-v1.mw-study-mode .mw-stage.mw-stage--tutor-focused {
    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";
  }
  @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;
    }
    .mw-stage.mw-stage--lecture-theatre {
      grid-template-areas:
        "pdf"
        "history"
        "tutor"
        "board";
    }
    .mw-topbar-tools input { width: 150px; }
    .mw-action-bar {
      left: 50%;
      transform: translateX(-50%);
      right: auto;
      width: calc(100% - 20px);
      max-width: none;
      bottom: 8px;
      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; }
    .mw-topbar-title { font-size: 0.96rem; }
    .mw-pane-head { padding: 0.62rem 0.7rem; }
    .mw-pane-body { padding: 0.7rem; }
    .mw-action-bar .btn { flex: 1 1 100%; justify-content: center; }
    .mw-action-bar .dropdown { flex: 1 1 100%; }
    .mw-action-bar .dropdown .btn { width: 100%; }
  }

  .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);
  }
  /* (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);
  }
  .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 {
    background: transparent;
    color: var(--mw-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 0.76rem;
    padding: 0.28rem 0.7rem;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .mw-topbar-ghost:hover {
    background: rgba(246, 211, 101, 0.08);
    color: var(--mw-gold);
    border-color: var(--mw-gold);
  }

  /* -- Hero drop zone (empty state). -- */
  .mw-hero-upload {
    position: relative;
    margin: clamp(1.2rem, 5vh, 4rem) auto;
    max-width: 640px;
    padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.3rem, 3vw, 2.4rem);
    border-radius: 26px;
    background:
      radial-gradient(circle at 20% 0%, rgba(246, 211, 101, 0.12), transparent 55%),
      radial-gradient(circle at 80% 100%, rgba(14, 59, 45, 0.45), transparent 60%),
      linear-gradient(150deg, #060a0a 0%, #081413 60%, #05100d 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(246, 211, 101, 0.05);
    text-align: center;
    overflow: hidden;
  }
  .mw-hero-chalk-frame {
    position: absolute;
    inset: 10px;
    border-radius: 20px;
    border: 1px dashed rgba(247, 242, 216, 0.14);
    pointer-events: none;
  }
  .mw-hero-drop {
    position: relative;
    display: block;
    border-radius: 18px;
    padding: 2.2rem 1.4rem 2rem;
    cursor: pointer;
    transition: background 220ms ease, transform 180ms ease, box-shadow 220ms ease;
    background: rgba(255, 255, 255, 0.015);
  }
  .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: rgba(5, 8, 7, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    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: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: #f5f5f5;
    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: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: #f5f5f5;
    color-scheme: dark;
    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 {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.14);
    color: #f5f5f5;
    border-radius: 999px;
    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: 18px;
    background: var(--mw-board-surface);
    border: 1px solid rgba(247, 242, 216, 0.06);
    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-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 rgba(247, 242, 216, 0.07);
  }
  .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);
    /* Default flow: equations on top, diagram stacked below at full
       width so it can actually be large. Row heights are intrinsic so
       the board grows with its content rather than squeezing diagrams
       into a tiny square. */
    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;
  }
  /* 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;
    /* 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: transparent;
    border: none;
    padding: 0;
    width: 75%;
    max-width: 75%;
    flex: 0 0 auto;
    min-height: 0;
    display: block;
    /* 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: transparent;
    border: none;
    padding: 0;
    /* Full width of the board column so flowcharts are not letterboxed. */
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    display: block;
    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;
    filter:
      drop-shadow(0 0 4px rgba(0, 0, 0, 0.4))
      drop-shadow(0 0 1px rgba(247, 242, 216, 0.18));
  }
  /* 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: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    filter:
      drop-shadow(0 0 4px rgba(0, 0, 0, 0.4))
      drop-shadow(0 0 1px rgba(247, 242, 216, 0.18));
  }
  /* 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: 240px;
    max-height: min(72vh, 820px);
    overflow: auto;
  }
  @media (min-width: 1280px) {
    .mw-blackboard-col--visual > .svg-host {
      min-height: 315px;
    }
    .mw-blackboard-col--visual > .mermaid-host {
      max-height: min(70vh, 880px);
    }
  }
  /* Mermaid: compact labels (theme fontSize is small; this caps runaway HTML). */
  .mw-blackboard-col--visual .mermaid-host svg.mw-mermaid-svg,
  .mw-blackboard-col--visual .mermaid-host svg {
    max-width: 100%;
  }
  .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 text {
    font-family: "Inter", system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    fill: var(--mw-chalk-color) !important;
    color: var(--mw-chalk-color) !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 {
    background: transparent !important;
    background-color: transparent !important;
    max-width: 22rem;
  }
  .mw-blackboard-col--visual .mermaid-host svg .edgeLabel rect,
  .mw-blackboard-col--visual .mermaid-host svg .labelBkg {
    fill: rgba(14, 40, 34, 0.75) !important;
    stroke: rgba(217, 164, 65, 0.35) !important;
    stroke-width: 1px !important;
  }
  /* Template SVGs (exam_coach) use light-theme fills; lift captions on the board. */
  .mw-blackboard-col--visual .svg-host svg.mw-lesson-embedded-diagram text.mw-svg-layer-caption {
    fill: rgba(226, 237, 231, 0.9) !important;
  }
  .mw-blackboard-col--visual .svg-host svg.mw-lesson-embedded-diagram text.mw-svg-subtitle {
    fill: rgba(200, 220, 210, 0.82) !important;
  }
  /* Node outlines: chalk-gold stroke so they pop against the dark board. */
  .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: rgba(217, 164, 65, 0.75) !important;
    stroke-width: 1.5px !important;
    fill: rgba(14, 59, 45, 0.35) !important;
  }
  /* Edges: brighter chalk color + thicker stroke so arrows are readable. */
  .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 marker path {
    stroke: rgba(247, 242, 216, 0.85) !important;
    stroke-width: 1.75px !important;
  }
  .mw-blackboard-col--visual .mermaid-host svg marker path,
  .mw-blackboard-col--visual .mermaid-host svg defs marker path {
    fill: rgba(247, 242, 216, 0.9) !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, never overlaps chrome. -- */
  .mw-subs-overlay {
    font-size: 1.05rem;
    padding: 12px 18px;
    max-width: 94%;
    color: #fff6d0;
    border-radius: 14px;
  }

  /* -- 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 .mw-chalk-svg {
    display: block;
    max-width: 100%;
    height: auto;
    min-height: 2.4em;
  }

  /* -- 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;
    align-items: center;
    justify-content: center;
    color: #c8cbd5;
    font-size: 0.95rem;
    text-align: center;
    padding: 1rem;
  }
  .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); }
  .mw-widget-modal.is-fullscreen {
    padding: 0;
  }
  .mw-widget-modal.is-fullscreen .mw-widget-card {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
  .mw-widget-modal.is-fullscreen .mw-widget-body iframe {
    border-radius: 0;
    min-height: calc(100vh - 56px);
  }

  /* 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;
  }