.animated-lesson {
  --lesson-accent: var(--purple, #397858);
  --lesson-accent-soft: color-mix(in srgb, var(--lesson-accent) 13%, transparent);
  margin: 18px 0;
  padding: clamp(14px, 2.2vw, 20px);
  overflow: hidden;
  border: 1px solid var(--line, #dce7dc);
  border-radius: 18px;
  color: var(--ink, #20362b);
  background: linear-gradient(145deg, var(--white, #fff), var(--lav, #eaf3eb));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink, #20362b) 7%, transparent);
}
.animated-lesson-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.animated-lesson-header > div { display:grid; gap:4px; min-width:0; }
.animated-lesson-eyebrow { color:var(--lesson-accent); font-size:9px; font-weight:800; letter-spacing:.15em; }
.animated-lesson-header strong { color:var(--ink); font:700 15px/1.35 var(--display, inherit); }
.animated-lesson-play, .animated-lesson-controls > button {
  min-height:36px; padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--white); color:var(--ink); font:700 11px/1.2 var(--font, inherit); cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.animated-lesson-play { flex:none; border-color:var(--lesson-accent); background:var(--lesson-accent); color:#fff; }
.animated-lesson-play:hover, .animated-lesson-controls > button:hover:not(:disabled) { transform:translateY(-1px); border-color:var(--lesson-accent); box-shadow:0 5px 14px var(--lesson-accent-soft); }
.animated-lesson button:focus-visible { outline:3px solid color-mix(in srgb, var(--lesson-accent) 48%, transparent); outline-offset:2px; }
.animated-lesson-scene {
  position:relative; height:clamp(174px, 25vw, 218px); display:grid; place-items:center;
  overflow:hidden; border:1px solid var(--line); border-radius:14px;
  background:radial-gradient(ellipse at 50% 100%, var(--lesson-accent-soft), transparent 70%), var(--paper);
}
.animated-lesson-scene::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.38; background-image:radial-gradient(var(--line) .7px, transparent .7px); background-size:18px 18px; mask-image:linear-gradient(to bottom, #000, transparent 90%); }
.animated-lesson-scene svg { position:relative; z-index:1; display:block; width:min(100%, 540px); height:100%; overflow:visible; }
.animated-lesson-scene text { fill:var(--ink); font:600 12px var(--font, inherit); }
.animated-lesson-scene .scene-note { fill:var(--muted); font-size:10px; font-weight:600; }

/* Algebra: the active transformation gets a clear accent and a gentle entrance. */
.eq-path { fill:none; stroke:var(--line); stroke-width:4; stroke-linecap:round; }
.eq-marker { fill:var(--lesson-accent); stroke:var(--paper); stroke-width:4; filter:drop-shadow(0 3px 5px color-mix(in srgb, var(--lesson-accent) 35%, transparent)); transition:cy .45s cubic-bezier(.2,.8,.2,1); }
.eq-row rect { fill:var(--white); stroke:var(--line); stroke-width:1.5; transition:fill .3s ease, stroke .3s ease, transform .35s ease; }
.eq-row text { font-size:15px; font-weight:750; transition:fill .3s ease; }
.eq-row.current rect { fill:var(--mint); stroke:var(--lesson-accent); animation:lesson-row-in .38s both; }
.eq-row.current text { fill:var(--lesson-accent); }

/* Geometry, data and reading visuals share the same muted canvas and brand green. */
.triangle { fill:var(--lesson-accent-soft); stroke:var(--lesson-accent); stroke-width:4; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:0; animation:lesson-draw .7s ease both; }
.angle-one,.angle-two,.angle-three { fill:none; stroke:#d99a45; stroke-width:4; stroke-linecap:round; opacity:.28; transition:opacity .3s, stroke-width .3s; }
.animated-lesson[data-step="0"] .angle-one,.animated-lesson[data-step="1"] .angle-two,.animated-lesson[data-step="2"] .angle-three { opacity:1; stroke-width:5; }
.missing-angle { fill:var(--lesson-accent)!important; font-size:20px!important; font-weight:850!important; }
.triangle-pulse { fill:var(--lesson-accent); stroke:var(--paper); stroke-width:4; filter:drop-shadow(0 2px 6px var(--lesson-accent-soft)); animation:lesson-pulse 1.8s ease-in-out infinite; }
.data-axis { fill:none; stroke:var(--line); stroke-width:2; stroke-linecap:round; }
.data-bar { fill:color-mix(in srgb, var(--lesson-accent) 18%, var(--line)); transform-box:fill-box; transform-origin:center bottom; transition:fill .35s ease, opacity .35s ease; }
.data-bar.favorable { fill:color-mix(in srgb, var(--lesson-accent) 52%, var(--paper)); }
.data-bar.revealed { fill:var(--lesson-accent); animation:lesson-bar-in .5s cubic-bezier(.2,.8,.2,1) both; }
.data-count { fill:var(--lesson-accent)!important; font-size:17px!important; font-weight:800!important; }
.reading-sheet { fill:var(--white); stroke:var(--line); stroke-width:1.5; }
.reading-lines { fill:none; stroke:var(--muted); stroke-width:4; stroke-linecap:round; opacity:.36; }
.evidence-highlight { fill:var(--lesson-accent-soft); stroke:var(--lesson-accent); stroke-width:1; transition:y .35s ease, width .35s ease; }
.evidence-dot { fill:var(--lesson-accent); stroke:var(--paper); stroke-width:3; transition:cx .35s ease, cy .35s ease; }
.sentence-part { font-size:13px!important; }
.sentence-comma { fill:var(--lesson-accent)!important; font-size:20px!important; font-weight:800!important; }
.sentence-underline { fill:none; stroke:var(--line); stroke-width:2; stroke-linecap:round; }
.process-path,.process-fill { fill:none; stroke-width:5; stroke-linecap:round; }
.process-path { stroke:var(--line); }
.process-fill { stroke:var(--lesson-accent); transition:d .45s cubic-bezier(.2,.8,.2,1); }
.process-node circle { fill:var(--white); stroke:var(--line); stroke-width:3; transition:fill .3s,stroke .3s,r .3s; }
.process-node text { font-size:10px; font-weight:750; }
.process-node.current circle { fill:var(--mint); stroke:var(--lesson-accent); }
.process-node.current text { fill:var(--lesson-accent); }

/* Topic-specific models used by chemistry, physics, biology, statistics and ACT/SAT lessons. */
.lesson-topic-visual .lesson-label { fill:var(--ink); font-size:12px; font-weight:750; }
.lesson-topic-visual .lesson-orbit,.lesson-topic-visual .lesson-axis,.lesson-topic-visual .lesson-motion-track { fill:none; stroke:var(--line); stroke-width:2; }
.lesson-topic-visual .lesson-orbit { stroke-dasharray:5 5; }
.lesson-topic-visual .lesson-nucleus,.lesson-topic-visual .lesson-center { fill:var(--lesson-accent); }
.lesson-topic-visual .lesson-electron,.lesson-topic-visual .lesson-stage-dot,.lesson-topic-visual .lesson-observation { fill:var(--line); stroke:var(--paper); stroke-width:3; transition:fill .3s,transform .35s; }
.lesson-topic-visual .lesson-electron.is-lit,.lesson-topic-visual .lesson-stage-dot,.lesson-topic-visual .lesson-observation { fill:var(--lesson-accent); }
.lesson-topic-visual .lesson-atom,.lesson-topic-visual .lesson-stage,.lesson-topic-visual .lesson-value,.lesson-topic-visual .lesson-object,.lesson-topic-visual .lesson-measure-shape,.lesson-topic-visual .lesson-cell { fill:var(--mint); stroke:var(--lesson-accent); stroke-width:2; }
.lesson-topic-visual .lesson-atom.atom-b,.lesson-topic-visual .lesson-stage.result,.lesson-topic-visual .lesson-value.result { fill:var(--lesson-accent-soft); }
.lesson-topic-visual .lesson-bond-arrow,.lesson-topic-visual .lesson-flow-arrow,.lesson-topic-visual .lesson-reaction-arrow { fill:none; stroke:var(--lesson-accent); stroke-width:3; stroke-linecap:round; marker-end:url(#lesson-arrow); }
.lesson-topic-visual .lesson-flow-arrow,.lesson-topic-visual .lesson-reaction-arrow { marker-end:none; }
.lesson-topic-visual .lesson-wave,.lesson-topic-visual .lesson-graph,.lesson-topic-visual .lesson-model-line,.lesson-topic-visual .lesson-radius,.lesson-topic-visual .lesson-measure-line { fill:none; stroke:var(--lesson-accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; transition:d .4s ease; }
.lesson-topic-visual .lesson-wave { stroke-dasharray:10 7; animation:lesson-wave-flow 2.4s linear infinite; }
.lesson-topic-visual .lesson-vector { fill:none; stroke:#d99a45; stroke-width:4; stroke-linecap:round; marker-end:none; transition:d .35s; }
.lesson-topic-visual .lesson-vector.vector-right,.lesson-topic-visual .lesson-radius.secondary { stroke:var(--lesson-accent); }
.lesson-topic-visual .lesson-interval,.lesson-topic-visual .lesson-cap { fill:none; stroke:var(--lesson-accent); stroke-width:5; stroke-linecap:round; transition:d .35s; }
.lesson-topic-visual .lesson-cap { stroke-width:2; }
.lesson-topic-visual .lesson-estimate { fill:var(--paper); stroke:var(--lesson-accent); stroke-width:4; }
.lesson-topic-visual .distribution-bar,.lesson-topic-visual .lesson-bar { fill:color-mix(in srgb,var(--lesson-accent) 30%,var(--line)); transition:height .35s,y .35s,fill .35s; }
.lesson-topic-visual .distribution-bar.is-lit,.lesson-topic-visual .lesson-bar:not(.secondary) { fill:var(--lesson-accent); }
.lesson-topic-visual .lesson-bar.secondary { fill:color-mix(in srgb,var(--lesson-accent) 48%,var(--paper)); }
.lesson-topic-visual .lesson-dna { fill:none; stroke:var(--lesson-accent); stroke-width:4; stroke-linecap:round; }
.lesson-topic-visual .lesson-rung { fill:none; stroke:var(--line); stroke-width:3; }
.lesson-topic-visual .lesson-protein { fill:var(--mint); stroke:var(--lesson-accent); stroke-width:2; }
.lesson-topic-visual .lesson-membrane { fill:none; stroke:var(--lesson-accent); stroke-width:5; stroke-dasharray:5 5; }
.lesson-topic-visual .lesson-particle { fill:#e0a44e; stroke:var(--paper); stroke-width:3; transition:cx .35s,cy .35s; }
.lesson-topic-visual .lesson-particle.low { fill:var(--lesson-accent); }
.lesson-topic-visual .lesson-ground,.lesson-topic-visual .lesson-environment { fill:none; stroke:var(--line); stroke-width:3; }
.lesson-topic-visual .selection-creature { fill:var(--muted); opacity:.65; transition:cy .35s,fill .35s,opacity .35s; }
.lesson-topic-visual .selection-creature.selected { fill:var(--lesson-accent); opacity:1; }
.lesson-topic-visual .lesson-organelle { fill:var(--white); stroke:var(--lesson-accent); stroke-width:2; }
.lesson-topic-visual .lesson-organelle.mitochondria { fill:var(--lesson-accent-soft); }
.lesson-topic-visual .lesson-organelle-ridge { fill:none; stroke:var(--lesson-accent); stroke-width:2; }
.lesson-topic-visual .lesson-circle { fill:var(--lesson-accent-soft); stroke:var(--lesson-accent); stroke-width:3; }
.lesson-topic-visual .lesson-angle-wedge { fill:color-mix(in srgb,#e0a44e 36%,transparent); stroke:#d99a45; stroke-width:2; }
.lesson-topic-visual .lesson-person { fill:var(--lesson-accent); }
.lesson-topic-visual .lesson-person-body { fill:var(--lesson-accent-soft); stroke:var(--lesson-accent); stroke-width:3; }
.lesson-topic-visual .lesson-shield { fill:var(--mint); stroke:var(--lesson-accent); stroke-width:3; }
.lesson-topic-visual .lesson-check { fill:none; stroke:var(--lesson-accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.lesson-topic-visual .lesson-graph-dot,.lesson-topic-visual .lesson-wave-dot { fill:#d99a45; stroke:var(--paper); stroke-width:3; transition:cx .35s,cy .35s; }
.lesson-topic-visual .lesson-model-line.model-b { stroke:#d99a45; stroke-dasharray:7 6; }
.lesson-topic-visual .lesson-interval { stroke:var(--lesson-accent); }
.lesson-topic-visual .lesson-reaction-arrow,.lesson-topic-visual .lesson-flow-arrow { stroke-dasharray:6 5; }
.lesson-topic-visual .lesson-flow-arrow,.lesson-topic-visual .lesson-reaction-arrow { stroke-dasharray:6 5; animation:lesson-flow 1.8s linear infinite; }
@keyframes lesson-wave-flow { to { stroke-dashoffset:-34; } }
@keyframes lesson-flow { to { stroke-dashoffset:-22; } }

.animated-lesson-caption { min-height:42px; margin:12px 2px 10px; color:var(--muted); font-size:12px; line-height:1.6; }
.animated-lesson-progress { height:5px; overflow:hidden; border-radius:99px; background:var(--line); }
.animated-lesson-progress span { display:block; width:33.333%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--lesson-accent),var(--purple2,var(--lesson-accent))); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.animated-lesson-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.animated-lesson-controls > button { min-width:92px; }
.animated-lesson-step-dots { display:flex; align-items:center; gap:7px; }
.animated-lesson-step-dots button { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--muted); font:700 10px var(--font, inherit); cursor:pointer; transition:transform .2s,background .2s,color .2s,border-color .2s; }
.animated-lesson-step-dots button:hover { transform:translateY(-1px); border-color:var(--lesson-accent); }
.animated-lesson-step-dots button.active { transform:scale(1.08); border-color:var(--lesson-accent); background:var(--lesson-accent); color:#fff; }

@keyframes lesson-row-in { from { opacity:.5; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes lesson-draw { from { stroke-dashoffset:420; opacity:.45; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes lesson-bar-in { from { transform:scaleY(.2); opacity:.5; } to { transform:scaleY(1); opacity:1; } }
@keyframes lesson-pulse { 50% { filter:drop-shadow(0 0 7px color-mix(in srgb, var(--lesson-accent) 55%, transparent)); transform:scale(1.12); } }

@media (max-width:600px) {
  .animated-lesson { margin:14px 0; padding:13px; border-radius:15px; }
  .animated-lesson-header strong { font-size:14px; }
  .animated-lesson-play { min-height:34px; padding:8px 10px; font-size:10px; }
  .animated-lesson-scene { height:166px; }
  .animated-lesson-caption { min-height:48px; font-size:11px; }
  .animated-lesson-controls > button { min-width:0; padding:8px; font-size:10px; }
  .animated-lesson-step-dots { gap:5px; }
  .animated-lesson-step-dots button { width:27px; height:27px; }
}
@media (prefers-reduced-motion:reduce) {
  .animated-lesson *, .animated-lesson *::before, .animated-lesson *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}