/* Layered, real lesson footage; accents inherit the current niche palette. */
:is(.demo-panel--lessons,.demo-panel--materials){grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:38px}
.platform-grid .lesson-showcase{border:0;border-radius:0;background:transparent;overflow:visible}
.lesson-stage{position:relative;isolation:isolate;aspect-ratio:1.72;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse at 50% 64%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 72%)}
.lesson-card{position:absolute;inset:37px 12px 16px;background:#0c0d11;border:1px solid color-mix(in srgb,var(--accent) 28%,#dce0e8);border-radius:13px;overflow:hidden;transform-origin:50% 0;box-shadow:0 8px 20px #10162a12;transition:transform 850ms cubic-bezier(.22,.8,.22,1),opacity 650ms ease;will-change:transform,opacity;backface-visibility:hidden}
.lesson-card video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.lesson-card[data-position=front]{transform:translate3d(0,0,0) scale(1);opacity:1;z-index:4}
.lesson-card[data-position=back-one]{transform:translate3d(0,-16px,0) scale(.95);opacity:.82;z-index:3}
.lesson-card[data-position=back-two]{transform:translate3d(0,-31px,0) scale(.90);opacity:.50;z-index:2}
.lesson-card[data-position=waiting]{transform:translate3d(0,46%,0) scale(.92);opacity:0;z-index:1}
.lesson-showcase.is-preparing .lesson-card{transition:none}
.platform-grid .lesson-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 12px 0;border:0;background:transparent;min-height:44px}
.lesson-caption{color:var(--ink);font-size:13px;font-weight:500;line-height:1.4;transition:opacity .22s ease,transform .22s ease}
.lesson-showcase.is-changing .lesson-caption{opacity:0;transform:translateY(4px)}
.lesson-controls,.lesson-selectors{display:flex;align-items:center;flex-shrink:0}
.lesson-controls{gap:6px}
.lesson-dot{display:grid;place-items:center;width:24px;height:44px;padding:0;background:transparent}
.lesson-dot span{width:5px;height:5px;border-radius:10px;background:#d7d9e2;transition:width .4s ease,background .4s ease}
.lesson-dot[aria-pressed=true] span{width:17px;background:var(--accent)}
.lesson-toggle{width:36px;height:36px;display:grid;place-items:center;padding:8px;border-radius:50%;background:color-mix(in srgb,var(--accent) 7%,white);color:var(--accent);transition:background .2s}
.lesson-toggle:hover{background:color-mix(in srgb,var(--accent) 14%,white)}
.lesson-toggle svg{width:16px;height:16px;grid-area:1/1}
.lesson-pause{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lesson-play{fill:currentColor;display:none}
.lesson-showcase.is-paused .lesson-pause{display:none}
.lesson-showcase.is-paused .lesson-play{display:block}
.lesson-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:1000px) and (min-width:761px){:is(.demo-panel--lessons,.demo-panel--materials){gap:24px;grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr)}}
@media(max-width:760px){:is(.demo-panel--lessons,.demo-panel--materials){grid-template-columns:minmax(0,1fr);gap:24px}.lesson-stage{aspect-ratio:1.55}.lesson-card{inset:34px 5px 14px;border-radius:10px}.platform-grid .lesson-footer{padding-inline:5px;gap:8px}.lesson-caption{font-size:12px}.lesson-dot{width:21px}.lesson-controls{gap:3px}.lesson-toggle{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.lesson-card,.lesson-caption,.lesson-dot span{transition:none!important}}

/* Match the lesson frame and preserve the full, wider catalog recording. */
.materials-screen{background:#0b0a0d;transition:none;will-change:auto}

.platform-grid .lesson-showcase{min-width:0}.platform-grid .lesson-footer{margin:0}.lesson-controls button{border:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){.platform-grid .lesson-footer{flex-wrap:wrap;gap:0}.lesson-caption{flex:1 1 100%}.lesson-controls{margin-left:auto}}

/* LP controls stay attached to the demo, with readable captions and touch targets. */
.platform-grid .lesson-footer{padding:4px 12px 0;column-gap:16px;row-gap:0;flex-wrap:wrap}
.platform-grid .lesson-caption{flex:1 1 180px;font-size:14px;line-height:1.5}
.platform-grid .lesson-controls{gap:4px;margin-left:auto}
.platform-grid .lesson-dot{width:32px;height:44px}
.platform-grid .lesson-dot span{width:6px;height:6px;background:#777b89}
.platform-grid .lesson-dot[aria-pressed=true] span{width:20px;background:var(--accent)}
.platform-grid .lesson-toggle{width:44px;height:44px;padding:12px;background:color-mix(in srgb,var(--accent) 10%,white)}
@media(max-width:480px){.platform-grid .lesson-footer{padding-inline:5px;column-gap:8px}.platform-grid .lesson-caption{flex-basis:100%;font-size:13px}.platform-grid .lesson-controls{gap:2px}.platform-grid .lesson-dot{width:32px}}