/* The lesson lives entirely inside the existing whiteboard iframe. */
.lesson-player { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:minmax(110px,1fr) auto; height:100%; min-height:0; overflow:auto; overscroll-behavior:contain; color:#203129; background:#fffefa; font:15px/1.65 system-ui,sans-serif; }
.lesson-player, .lesson-player * { box-sizing:border-box; }
.lesson-drawing { grid-column:1; grid-row:1 / 3; min-width:0; min-height:0; display:flex; flex-direction:column; padding:12px; }
.lesson-scene-stage { position:relative; min-height:0; flex:1; overflow:auto; }
.lesson-tutor-pointer { position:absolute; z-index:7; pointer-events:none; border:3px solid #1f7a5b; border-radius:999px; box-shadow:0 0 0 9999px rgba(31,122,91,.05); transition:left .32s cubic-bezier(.2,.8,.2,1),top .32s cubic-bezier(.2,.8,.2,1),width .2s ease,height .2s ease,opacity .12s ease; will-change:left,top,width,height; }
.lesson-tutor-pointer::before { content:""; position:absolute; left:-18px; top:-21px; width:22px; height:28px; background:#1f7a5b; clip-path:polygon(0 0,100% 62%,60% 67%,78% 100%,60% 100%,43% 70%,14% 100%); filter:drop-shadow(0 2px 1px rgba(0,0,0,.18)); }
.lesson-tutor-pointer.action-point,.lesson-tutor-pointer.action-arrow,.lesson-tutor-pointer.action-draw,
.lesson-tutor-pointer.action-write,.lesson-tutor-pointer.action-highlight,.lesson-tutor-pointer.action-morph,
.lesson-tutor-pointer.action-trace,.lesson-tutor-pointer.action-follow,.lesson-tutor-pointer.action-decompose,
.lesson-tutor-pointer.action-align,.lesson-tutor-pointer.action-move,.lesson-tutor-pointer.action-fade,
.lesson-tutor-pointer.action-check { border-color:transparent; box-shadow:none; }
.lesson-tutor-pointer.action-point::before,.lesson-tutor-pointer.action-highlight::before,.lesson-tutor-pointer.action-morph::before,
.lesson-tutor-pointer.action-align::before,.lesson-tutor-pointer.action-fade::before,
.lesson-tutor-pointer.action-check::before { left:50%; top:50%; transform:translate(-95%,12%); }
.lesson-tutor-pointer.action-draw::before,.lesson-tutor-pointer.action-trace::before,.lesson-tutor-pointer.action-follow::before,
.lesson-tutor-pointer.action-decompose::before,.lesson-tutor-pointer.action-move::before { left:auto; right:-9px; top:auto; bottom:-11px; }
.lesson-tutor-pointer.action-write::before { left:auto; right:-7px; top:50%; transform:translateY(-25%); }
.lesson-tutor-pointer.action-arrow::after { content:""; position:absolute; right:-9px; bottom:-9px; width:14px; height:14px; border-right:4px solid #1f7a5b; border-bottom:4px solid #1f7a5b; transform:rotate(45deg); }
.lesson-tutor-pointer.action-underline { border-width:0 0 4px; border-radius:0; box-shadow:none; }
.lesson-tutor-pointer.action-spotlight { border-color:#ef9c3b; box-shadow:0 0 0 9999px rgba(18,36,29,.18); }
.lesson-tutor-pointer.action-pulse { animation:lesson-tutor-pulse .65s ease-out 1; }
.lesson-tutor-focus { filter:drop-shadow(0 0 5px rgba(31,122,91,.55)); }
.lesson-formula-link { animation:lesson-formula-link-in .9s ease-out both; }
.lesson-dictation-pending { visibility:hidden!important; pointer-events:none!important; }
.lesson-action-draw line,.lesson-action-draw path,.lesson-action-draw polyline,.lesson-action-draw polygon,.lesson-action-draw circle,.lesson-action-draw ellipse,
line.lesson-action-draw,path.lesson-action-draw,polyline.lesson-action-draw,polygon.lesson-action-draw,circle.lesson-action-draw,ellipse.lesson-action-draw {
  stroke-dasharray:1200; stroke-dashoffset:1200; animation:lesson-stroke-in .9s cubic-bezier(.25,.8,.25,1) forwards;
}
.lesson-action-write { animation:lesson-write-in .48s ease-out both; }
.lesson-action-highlight,.lesson-action-morph { animation:lesson-highlight-in .72s ease-out both; }
.lesson-action-trace { animation:lesson-trace-in 1.1s ease-out both; }
.lesson-action-decompose { animation:lesson-decompose-in .82s cubic-bezier(.2,.8,.2,1) both; }
.lesson-action-align { animation:lesson-align-in .72s ease-out both; }
.lesson-action-move { animation:lesson-move-in .72s cubic-bezier(.2,.8,.2,1) both; }
.lesson-action-fade { animation:lesson-fade-in .7s ease-out both; }
.lesson-action-check { animation:lesson-check-in .72s ease-out both; }
.lesson-scene-enter { animation:lesson-scene-enter .32s ease-out both; }
.lesson-scene-reveal { transform-box:fill-box; transform-origin:center; animation:lesson-scene-reveal .52s cubic-bezier(.2,.8,.2,1) both; }
.lesson-scene-update { animation:lesson-scene-update .58s ease-out both; }
.lesson-scene-emphasis { animation:lesson-scene-emphasis .68s ease-out both; }
.lesson-scene-retire { position:absolute!important; inset:0; width:100%; pointer-events:none!important; animation:lesson-scene-retire .34s ease-out both; }
@keyframes lesson-stroke-in { to { stroke-dashoffset:0; } }
@keyframes lesson-write-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes lesson-highlight-in { 0% { opacity:.35; } 45% { opacity:1; filter:drop-shadow(0 0 9px #ef9c3b); } 100% { opacity:1; } }
@keyframes lesson-trace-in { 0% { opacity:.25; } 50% { opacity:1; filter:drop-shadow(0 0 7px #1f7a5b); } 100% { opacity:1; } }
@keyframes lesson-decompose-in { from { opacity:0; transform:translate(8px,-5px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes lesson-align-in { 0%,100% { transform:none; } 45% { transform:translateY(-3px); filter:drop-shadow(0 4px 5px rgba(31,122,91,.45)); } }
@keyframes lesson-move-in { 0%,100% { transform:none; } 45% { transform:translate(4px,-3px); filter:drop-shadow(0 4px 5px rgba(31,122,91,.45)); } }
@keyframes lesson-fade-in { from { opacity:1; } to { opacity:.38; } }
@keyframes lesson-check-in { 0%,100% { filter:none; } 45% { filter:drop-shadow(0 0 9px #2d9a68); } }
@keyframes lesson-dictation-progress { from { transform:scaleX(0); opacity:.45; } to { transform:scaleX(1); opacity:1; } }
@keyframes lesson-formula-link-in { 0% { opacity:.45; filter:drop-shadow(0 0 0 currentColor); } 45% { opacity:1; filter:drop-shadow(0 0 8px currentColor); } 100% { opacity:1; filter:drop-shadow(0 0 3px currentColor); } }
@keyframes lesson-tutor-pulse { 0%{transform:scale(.86);opacity:.35} 70%{transform:scale(1.05);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes lesson-scene-enter { from { opacity:0; } to { opacity:1; } }
@keyframes lesson-scene-reveal { from { opacity:0; transform:translateY(7px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes lesson-scene-update { 0% { opacity:.55; } 55% { opacity:1; filter:drop-shadow(0 0 6px rgba(31,122,91,.45)); } 100% { opacity:1; } }
@keyframes lesson-scene-emphasis { 0%,100% { filter:none; } 45% { filter:drop-shadow(0 0 9px #ef9c3b); } }
@keyframes lesson-scene-retire { from { opacity:1; } to { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .lesson-tutor-pointer,.lesson-tutor-focus,.lesson-formula-link,[class*=lesson-action-],.lesson-dictation-item.is-active::after,
  .lesson-scene-enter,.lesson-scene-reveal,.lesson-scene-update,.lesson-scene-emphasis,.lesson-scene-retire { transition:none; animation:none!important; } }
.lesson-dictation-stream { position:absolute; z-index:6; left:clamp(8px,2vw,20px); bottom:clamp(8px,2vw,18px); width:min(76%,560px); pointer-events:none; }
.lesson-scene-stage.dictating { display:grid; grid-template-columns:minmax(190px,.72fr) minmax(0,1.45fr); align-items:stretch; }
.lesson-scene-stage.dictating .lesson-custom-scene { grid-column:2; grid-row:1; min-width:0; }
.lesson-scene-stage.dictating .lesson-dictation-stream { position:static; grid-column:1; grid-row:1; align-self:center; width:auto; max-height:100%; padding:10px 8px 10px 4px; overflow:hidden; }
.lesson-dictation-items { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.lesson-dictation-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:center; max-width:100%; padding:8px 12px; border:1px solid rgba(25,84,64,.18); border-radius:10px; background:rgba(255,254,250,.94); box-shadow:0 5px 16px rgba(25,61,50,.12); animation:lesson-write-in .32s ease-out both; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lesson-dictation-item.is-complete { opacity:.62; transform:scale(.985); box-shadow:none; animation:none; transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease; }
.lesson-dictation-item.is-active { opacity:1; box-shadow:0 7px 22px rgba(25,61,50,.17); }
.lesson-dictation-item.is-active::after { content:""; grid-column:1/-1; height:2px; border-radius:2px; background:linear-gradient(90deg,#2e7d65,#73b69d); transform-origin:left; animation:lesson-dictation-progress var(--dictation-duration,1.2s) linear both; }
.lesson-dictation-kind { color:#64736b; font:700 10px/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.lesson-dictation-text { min-width:0; color:#173f32; font:650 clamp(14px,1.45vw,20px)/1.3 Georgia,serif; overflow-wrap:anywhere; }
.lesson-dictation-part { display:inline; color:inherit; }
.lesson-dictation-part.lesson-role-neutral { color:#60746a; }
.lesson-dictation-part.lesson-role-target { color:#d64b3c; }
.lesson-dictation-part.lesson-role-coordinate { color:#2d9bc3; }
.lesson-dictation-part.lesson-role-construction { color:#a67a0d; }
.lesson-dictation-part.lesson-role-check { color:#23845d; }
.lesson-dictation-part.lesson-role-supporting { color:#a955a8; }
.lesson-dictation-part .katex { color:inherit; }
.lesson-dictation-item.kind-formula { border-left:4px solid #2e7d65; }
.lesson-dictation-item.kind-reason { border-left:4px solid #d19a46; }
.lesson-dictation-item.kind-result { border-left:4px solid #b54d3e; background:rgba(255,250,240,.96); }
.lesson-custom-scene { position:relative; height:100%; }
.interactive-scene { margin:0; height:100%; display:flex; flex-direction:column; }
.interactive-scene>svg { width:100%; flex:1 0 190px; min-height:190px; max-height:560px; background:#fffefa; outline-offset:-3px; }
.interactive-scene figcaption { font-size:12px; color:#64736b; padding:4px 8px; }
.scene-rotatable { cursor:grab; touch-action:none; }
.scene-rotatable:active { cursor:grabbing; }
.scene-edge,.scene-focus,.scene-secondary { stroke:#344d43; stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.scene-focus { stroke:#197455; stroke-width:3; }
.scene-secondary { stroke:#ae762f; stroke-width:2.5; }
.scene-face { fill:#729b74; fill-opacity:.13; stroke:none; }
.scene-section { fill:#dfa54c; fill-opacity:.2; stroke:none; }
.scene-section-edge { stroke:#aa701f; stroke-width:2; }
.scene-label { font:15px system-ui,sans-serif; fill:#193d32; paint-order:stroke; stroke:#fffefa; stroke-width:4; stroke-linejoin:round; }
.scene-label-connector { stroke:#8b9b92; stroke-width:1; stroke-dasharray:2 3; vector-effect:non-scaling-stroke; pointer-events:none; }
.scene-tools { font:12px/1.5 system-ui; padding:4px 8px; }
.scene-tools p { margin:0; color:#64736b; }
.scene-slider { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.scene-slider input { flex:1; min-width:100px; accent-color:#195440; }
.scene-slider output { width:100%; font-variant-numeric:tabular-nums; color:#195440; }
.lesson-drawing-tools { display:flex; gap:6px; flex-wrap:wrap; padding-top:8px; }
.lesson-player button { background:#f6f7f0; color:#195440; border:1px solid #dce2d9; border-radius:6px; padding:6px 10px; font:inherit; font-size:12px; cursor:pointer; }
.lesson-player button:hover,.lesson-player button[aria-pressed=true] { background:#e6eee3; }
.lesson-player button:focus-visible,.scene-slider input:focus-visible { outline:2px solid #195440; outline-offset:2px; }
.lesson-ledger { grid-column:2; grid-row:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:16px; border-left:1px solid #e1e6dc; }
.lesson-established-step { border-left:2px solid #dce2d9; padding:0 0 18px 12px; margin-bottom:8px; overflow-wrap:anywhere; }
.lesson-established-step.current { border-left-color:#195440; }
.lesson-established-step:not(.current) { padding-bottom:0; margin-bottom:4px; }
.lesson-established-step>button { display:block; background:transparent; border:0; text-align:left; padding:0 0 7px; font-size:14px; font-weight:650; }
.lesson-established-step>div { font-family:Georgia,serif; line-height:1.75; }
.lesson-current-question { grid-column:2; border-top:1px solid #e1e6dc; padding:12px 16px; background:#f1f5ec; overflow-wrap:anywhere; min-height:0; max-height:44vh; overflow:auto; }
.lesson-player.expanded { grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); padding:24px; box-sizing:border-box; }
.lesson-player.expanded .lesson-drawing { padding:24px; }
.lesson-player.expanded .interactive-scene>svg { min-height:clamp(190px, 45vh, 360px); }
.lesson-current-question strong { display:block; font-size:12px; color:#195440; margin-bottom:5px; }
.lesson-current-question small { display:block; margin-top:8px; color:#64736b; font-size:12px; }
.lesson-check-options { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.lesson-check-options button { flex:1; min-width:100px; font-size:14px; background:white; }
.lesson-check-answer { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.lesson-check-answer input { min-width:100px; flex:1; border:1px solid #c8d3c5; border-radius:6px; padding:8px; font:14px system-ui; background:white; color:#203129; }
.lesson-player [data-check-control]:disabled { opacity:.6; cursor:wait; }
.lesson-ink { position:absolute; top:0; left:0; width:100%; height:calc(100% - 85px); pointer-events:none; }
.lesson-ink.drawing { pointer-events:auto; touch-action:none; cursor:crosshair; }
.lesson-ink polyline { fill:none; stroke:#b66730; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.lesson-playing #board-panel { height:100%; overflow:auto; }
.lesson-playing #board-panel .bl-title,.lesson-playing #board-panel .note-line,.lesson-playing #board-panel .bl-result { display:none!important; }
.lesson-playing #board-panel #jxgbox { width:calc(100% - 16px); margin:8px; }
/* The iframe width is the available board width, not the browser width. */
@media(max-width:900px), (max-height:520px) {
  .lesson-player, .lesson-player.expanded { display:flex; flex-direction:column; padding:0; }
  .lesson-player > * { flex:0 0 auto; }
  .lesson-drawing, .lesson-player.expanded .lesson-drawing { padding:12px; order:1; min-height:0; }
  .lesson-scene-stage { flex:none; overflow:visible; }
  .lesson-custom-scene, .interactive-scene { height:auto; }
  .lesson-ledger { order:0; overflow:visible; border-left:0; border-bottom:1px solid #e1e6dc; padding:12px; }
  .lesson-established-step { padding-bottom:0; margin-bottom:0; }
  .interactive-scene>svg, .lesson-player.expanded .interactive-scene>svg { flex:none; height:auto; aspect-ratio:3 / 2; min-height:180px; max-height:360px; }
  .lesson-playing #board-panel { height:auto; overflow:visible; }
  .lesson-playing #board-panel #board-notes { padding:0; }
  .lesson-current-question { order:2; min-height:0; max-height:none; overflow:visible; padding:10px 12px; }
  .lesson-check-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
  .lesson-check-options button { min-width:0; overflow-wrap:anywhere; }
  .lesson-check-answer input { width:100%; min-width:0; }
}
@media(prefers-reduced-motion:no-preference) { .lesson-established-step.current { animation:lesson-arrive .25s ease-out; } @keyframes lesson-arrive { from { opacity:.5; } to { opacity:1; } } }

.scene-draggable-point { cursor: grab; touch-action: none; stroke: white; stroke-width: 2; }
.scene-draggable-point:active { cursor: grabbing; }

.scene-solid-face { fill:#edf3e9; stroke:none; }
.scene-sphere-surface { fill:#edf3e9; stroke:#344d43; stroke-width:2; }
.scene-integral-positive { fill:#7cbaa0; fill-opacity:.35; stroke:none; }
.scene-integral-negative { fill:#d9a265; fill-opacity:.35; stroke:none; }
.scene-integral-handle { fill:#a76520; stroke:white; stroke-width:2; cursor:ew-resize; }
.scene-integral-readout { display:block; margin:6px 0 12px; color:#195440; font-weight:600; }
.scene-integral-bounds { display:flex; flex-wrap:wrap; gap:12px; }
.scene-integral-bounds>.scene-slider { flex:1 1 150px; min-width:0; }
.scene-hidden-edge { opacity:.5; }

.scene-sphere-edge { stroke:#718eae; stroke-width:1.5; }

.scene-edge.scene-narration-focus,.scene-focus.scene-narration-focus,.scene-secondary.scene-narration-focus { stroke:#b46b12; stroke-width:4; }
.scene-label.scene-narration-focus { fill:#8c4d00; font-weight:750; }
circle.scene-narration-focus { fill:#b46b12; stroke:#fffefa; stroke-width:3; }

.scene-construction-line { stroke:#b46b12; stroke-width:2.5; }
.scene-interactive-plot { touch-action:none; }
.scene-translatable { touch-action:none; }
[data-transform-piece] { cursor:grab; }
[data-transform-piece]:active { cursor:grabbing; }

.scene-awaiting-cue { visibility:hidden; pointer-events:none; }

.scene-sphere-edge.scene-narration-focus { stroke:#b46b12; stroke-width:3; }

.scene-section.scene-narration-focus { fill-opacity:.35; }

.scene-edge.scene-plot-frame { stroke:#9ba9a1; stroke-width:1; }

.scene-curve { fill:none; stroke:var(--curve-color); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.scene-curve.scene-narration-focus { stroke:#b46b12; stroke-width:4; }
.scene-curve-legend { display:flex; flex-wrap:wrap; gap:6px 16px; padding:8px 12px; font:12px/1.5 system-ui; }
.scene-curve-legend > span { display:flex; align-items:baseline; gap:7px; overflow-wrap:anywhere; min-width:0; }
.scene-curve-sample { display:inline-block; width:20px; height:3px; flex:none; align-self:center; }
.scene-curve-legend .scene-narration-focus { font-weight:700; }

/* Voice-first teaching: navigation, diagram/check, and subtitles each own a
   layout track. Nothing floats over the diagram or answer controls. */
.lesson-player, .lesson-player.expanded {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,310px);
  grid-template-rows:auto minmax(0,1fr) auto; padding:0; overflow:hidden;
}
.lesson-ledger {
  grid-column:1 / -1; grid-row:1; display:flex; gap:8px; padding:10px 16px;
  overflow:auto; border:0; border-bottom:1px solid #e1e6dc; max-height:90px;
}
.lesson-established-step, .lesson-established-step:not(.current) {
  flex:0 0 auto; max-width:280px; margin:0; padding:0; border:0;
}
.lesson-established-step>button { padding:7px 10px; font-size:13px; line-height:1.4; border-radius:8px; }
.lesson-drawing, .lesson-player.expanded .lesson-drawing {
  grid-column:1; grid-row:2; padding:clamp(10px,2vw,24px); overflow:hidden; min-height:0;
}
.lesson-scene-stage { flex:1; min-height:0; overflow:auto; }
.lesson-custom-scene, .interactive-scene { height:100%; }
.interactive-scene>svg, .lesson-player.expanded .interactive-scene>svg {
  flex:1 0 160px; min-height:160px; max-height:none; height:auto;
}
.lesson-drawing-tools { flex-shrink:0; gap:6px; }
.lesson-current-question {
  grid-column:2; grid-row:2; border-top:0; border-left:1px solid #e1e6dc;
  padding:16px; max-height:none; overflow:auto; font-size:15px; line-height:1.5;
}
.lesson-check-options { display:grid; grid-template-columns:1fr; gap:8px; }
.lesson-check-options button {
  display:flex; align-items:center; gap:10px; min-width:0; overflow-wrap:anywhere;
  padding:11px 12px; text-align:left; line-height:1.5; box-shadow:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.lesson-choice-letter {
  display:grid; place-items:center; flex:none; width:25px; height:25px;
  border:1px solid #d8e1d7; border-radius:7px; color:#60756b;
  background:#f5f7f1; font:650 11px/1 system-ui,sans-serif;
}
.lesson-choice-text { min-width:0; flex:1; }
.lesson-check-options button:not(:disabled):hover { background:#edf3e9; border-color:#7b9d8e; transform:translateX(2px); }
.lesson-check-options button.is-pending { border-color:#195440; background:#e6eee3; }
.lesson-check-options button.is-pending .lesson-choice-letter { color:#fffefa; background:#195440; border-color:#195440; }
.lesson-player button:disabled { cursor:default; }
.lesson-check-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.lesson-check-actions button { flex:1; box-shadow:none; }
.lesson-current-question[data-presentation=speaking]>strong::before {
  content:''; display:inline-block; width:7px; height:7px; margin-right:7px;
  border-radius:50%; background:#2e8c65; box-shadow:0 0 0 3px rgba(46,140,101,.12);
}
.lesson-check-answer>button { background:#195440; color:#fffefa; border-color:#195440; box-shadow:none; }
.lesson-check-answer>button:not(:disabled):hover { background:#123f30; }
.lesson-player .lesson-drawing-tools button { box-shadow:none; }
.lesson-current-question .katex-display { max-width:100%; overflow-x:auto; overflow-y:hidden; padding:3px 0; }
@media(prefers-reduced-motion:reduce) {
  .lesson-check-options button { transition:none; }
  .lesson-check-options button:not(:disabled):hover { transform:none; }
}
.lesson-check-answer input { width:100%; min-width:0; flex:1 0 100%; }
.lesson-reference { margin:12px 0; font-size:13px; }
.lesson-reference summary { cursor:pointer; color:#195440; }
.lesson-reference>div { padding-top:8px; line-height:1.65; }
.lesson-subtitles {
  grid-column:1 / -1; grid-row:3; align-self:end; min-width:0;
  margin:8px clamp(10px,2vw,22px) 10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.2); border-radius:12px;
  background:rgba(24,54,43,.84); color:#fffefa;
  box-shadow:0 5px 18px rgba(18,38,30,.16); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); overflow-wrap:anywhere;
}
.lesson-player button.lesson-subtitle-toggle {
  display:flex; align-items:center; gap:10px; width:100%; min-height:42px;
  padding:9px 14px; border:0; border-radius:0; background:transparent;
  color:inherit; text-align:left; font:500 clamp(14px,1.2vw,17px)/1.4 system-ui,sans-serif;
}
.lesson-player button.lesson-subtitle-toggle:hover { background:rgba(255,255,255,.08); }
.lesson-player button.lesson-subtitle-toggle::after {
  content:'⌃'; flex:none; margin-left:auto; color:rgba(255,255,255,.78);
  font-size:15px; line-height:1; transition:transform .16s ease;
}
.lesson-subtitles.is-expanded .lesson-subtitle-toggle::after { transform:rotate(180deg); }
.lesson-subtitle-current {
  display:-webkit-box; min-width:0; overflow:hidden; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2;
}
.lesson-subtitle-history {
  max-height:112px; overflow-y:auto; overscroll-behavior:contain;
  padding:10px 14px 12px; border-top:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.92);
  text-align:left; white-space:pre-wrap; font:13px/1.55 system-ui,sans-serif;
  scrollbar-color:rgba(255,255,255,.45) transparent;
}
.lesson-subtitle-history:focus-visible { outline:2px solid #fffefa; outline-offset:-3px; }
@media(max-width:760px) {
  .lesson-player, .lesson-player.expanded { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(160px,1fr) minmax(100px,auto) auto; }
  .lesson-ledger { max-height:64px; padding:8px; }
  .lesson-drawing, .lesson-player.expanded .lesson-drawing { grid-row:2; grid-column:1; padding:10px; }
  .lesson-current-question { grid-column:1; grid-row:3; max-height:34vh; border-left:0; border-top:1px solid #e1e6dc; padding:10px 12px; }
  .lesson-check-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lesson-subtitles { grid-row:4; margin:6px 8px 8px; }
  .lesson-scene-stage.dictating { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .lesson-scene-stage.dictating .lesson-custom-scene { grid-column:1; grid-row:1; height:auto; min-height:0; overflow:auto; }
  .lesson-scene-stage.dictating .lesson-dictation-stream { grid-column:1; grid-row:2; padding:6px 4px; max-height:112px; overflow:auto; pointer-events:auto; }
  .lesson-custom-scene .lesson-visual { min-width:0; overflow-x:auto; }
  .lesson-custom-scene .lesson-visual table { min-width:440px; }
  .lesson-custom-scene .lesson-visual th:first-child,
  .lesson-custom-scene .lesson-visual td:first-child { min-width:112px; overflow-wrap:normal; }
  .lesson-subtitle-history { max-height:96px; }
  .lesson-dictation-stream { width:calc(100% - 16px); left:8px; bottom:8px; }
  .lesson-dictation-item { padding:7px 9px; }
  .lesson-playing #board-panel { height:100%; overflow:auto; }
}
@media(max-height:480px) {
  .lesson-player, .lesson-player.expanded { overflow:auto; }
  .lesson-drawing, .lesson-player.expanded .lesson-drawing { min-height:220px; }
  .lesson-scene-stage.dictating { grid-template-rows:minmax(0,1fr); }
  .lesson-scene-stage.dictating .lesson-dictation-stream {
    align-self:stretch; height:100%; min-height:0; max-height:none; overflow:auto;
    overscroll-behavior:contain; pointer-events:auto; scrollbar-width:thin;
  }
  .lesson-dictation-items { gap:4px; }
  .lesson-dictation-item { gap:6px; padding:5px 7px; }
  .lesson-dictation-text { font-size:14px; line-height:1.2; }
  .lesson-dictation-kind { font-size:9px; }
}