.lesson{--lesson-bar:0px;max-width:var(--col-wide);min-height:calc(100dvh - var(--lesson-bar));padding:var(--s-6) var(--gutter) var(--s-9);background:var(--bg);color:var(--fg);font-size:var(--t-ui);margin-inline:auto}.app-body .lesson{--lesson-bar:var(--bar-h)}.lesson :where(h1,h2,p,ol){margin:0}.lesson :where(ol){padding:0;list-style:none}.lesson-head{justify-content:space-between;align-items:flex-end;gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap;display:flex}.lesson-title{gap:var(--s-2);min-width:0;display:grid}.lesson-question{font-size:var(--t-display);line-height:var(--lh-display);text-wrap:balance}.lesson-facts{font-size:var(--t-ui);font-variant-numeric:tabular-nums;color:var(--fg-muted)}.lesson-actions{align-items:center;gap:var(--s-1);display:flex}.lesson-grid{gap:var(--s-6);display:grid}.lesson-main{gap:var(--s-4);min-width:0;display:grid}.lesson-stage-figure{margin:0}.lesson-stage-figure .stage-frame{border-radius:var(--r-xl);border:0;overflow:hidden}.lesson-caption{min-height:calc(2 * var(--t-caption) * var(--lh-title));font-size:var(--t-caption);line-height:var(--lh-title);text-wrap:pretty}.lesson-held{align-items:baseline;gap:var(--s-2);color:var(--learner);display:flex}.lesson-side{align-content:start;gap:var(--s-4);min-width:0;display:grid}@media (min-width:1000px){.lesson-grid{grid-template-columns:minmax(0, 1fr) var(--side-column);gap:var(--s-7);align-items:start}.lesson-side{top:calc(var(--lesson-bar) + var(--s-5));max-height:calc(100dvh - var(--lesson-bar) - var(--s-7));position:sticky;overflow:auto}}@media (max-width:639px){.lesson{padding-top:var(--s-4)}.lesson-head{margin-bottom:var(--s-4);flex-wrap:nowrap;align-items:flex-start}.lesson-stage-figure .stage-frame{margin-inline:calc(-1 * var(--gutter));border-radius:0}}.transport{align-items:center;column-gap:var(--s-3);min-inline-size:0;padding:0;padding-top:var(--s-2);border:0;grid-template-columns:auto auto minmax(0,1fr) auto;margin:0;display:grid}.transport legend{position:absolute}.control{min-width:var(--hit);min-height:var(--hit);padding:0 var(--s-2);border:var(--bw-hair) solid transparent;border-radius:var(--r-md);color:inherit;font:inherit;font-size:var(--t-label);font-weight:var(--w-strong);cursor:pointer;transition:background-color var(--dur-in) var(--ease-std);background:0 0;place-items:center;display:inline-grid}@media (hover:hover){.control:hover{background:var(--control-hover)}}.control:focus-visible{outline:var(--ring);outline-offset:var(--ring-offset)}.control:active{transform:translateY(var(--bw-hair))}.control.play{width:var(--hit);border-color:var(--surround-rule);border-radius:var(--r-full)}.control.play svg{width:var(--s-4);height:var(--s-4)}.control.captions[aria-pressed=true]{background:var(--control-hover)}.control.captions[aria-pressed=false]{color:var(--surround-muted);text-decoration:line-through}.time{font-size:var(--t-label);font-variant-numeric:tabular-nums;white-space:nowrap}.time .total{color:var(--surround-muted)}.secondary{gap:var(--s-1);display:flex}.scrub,.slider{--track:var(--s-1);height:var(--hit);border-radius:var(--r-sm);position:relative}.scrub input,.slider input{opacity:0;cursor:pointer;width:100%;margin:0;position:absolute;inset:0}.scrub:focus-within,.slider:focus-within{outline:var(--ring);outline-offset:var(--ring-offset)}.scrub-track,.scrub-played,.scrub-tick,.scrub-moment,.scrub-head,.slider-rail,.slider-fill,.slider-default,.slider-thumb{pointer-events:none;position:absolute}.scrub-track,.scrub-played,.slider-rail,.slider-fill{left:0;top:calc(50% - var(--track) / 2);height:var(--track);border-radius:var(--r-full)}.scrub-track,.slider-rail{background:var(--surround-track);right:0}.scrub-played{background:var(--surround-ink)}.scrub-tick,.slider-default{top:calc(50% - var(--s-2));width:var(--bw-hair);height:var(--s-4);margin-left:calc(-1 * var(--bw-hair))}.scrub-tick{background:var(--bg)}.scrub-moment{top:calc(50% - var(--s-1));width:var(--s-2);height:var(--s-2);margin-left:calc(-1 * var(--s-1));border-radius:var(--r-full);background:var(--learner)}.scrub-head{top:calc(50% - var(--s-2));width:var(--s-4);height:var(--s-4);margin-left:calc(-1 * var(--s-2));border-radius:var(--r-full);background:var(--surround-ink)}.player-notice{font-size:var(--t-label);color:var(--surround-muted)}@media (max-width:639px){.transport{row-gap:var(--s-2);grid-template-columns:auto 1fr auto}.scrub{grid-area:1/1/auto/-1}}
.moment{gap:var(--s-5);padding:var(--s-5);border-radius:var(--r-lg);background:var(--bg-raised);box-shadow:inset 0 0 0 var(--bw-hair) var(--hair-strong);animation:ui-rise var(--dur-move) var(--ease-std);display:grid}.moment-eyebrow{font:var(--w-strong) var(--t-label) / var(--lh-ui) var(--font-ui);color:var(--learner)}.moment-prompt{margin-top:calc(-1 * var(--s-3));font-size:var(--t-title);font-weight:var(--w-strong);line-height:var(--lh-ui);text-wrap:pretty}@media (prefers-reduced-motion:reduce){.moment{animation:none}}.moment-prompt:focus{outline:none}.feedback:empty{display:none}.feedback-verdict{font-weight:var(--w-strong)}.feedback-verdict[data-correct=false]{color:var(--danger)}.feedback-explanation{margin-top:var(--s-1);color:var(--fg-muted);line-height:var(--lh-read)}.moment-act{justify-items:start;gap:var(--s-2);display:grid}.moment-note{font-size:var(--t-label);color:var(--fg-muted)}.param-head{justify-content:space-between;align-items:baseline;gap:var(--s-3);display:flex}.param-head label,.param-label{font-weight:var(--w-ui);font-size:var(--t-ui);margin:0}.param-head output{white-space:nowrap;font-size:var(--t-title);font-weight:var(--w-strong);font-variant-numeric:tabular-nums;color:var(--learner)}.slider{margin-top:var(--s-1)}.slider input{cursor:grab}.slider-fill{width:var(--at);background:var(--learner)}.slider-default{left:var(--default);border-radius:var(--r-full);background:var(--fg-muted)}.slider-thumb{left:var(--at);top:calc(50% - var(--s-5) / 2);width:var(--s-5);height:var(--s-5);margin-left:calc(-1 * var(--s-5) / 2);border:var(--bw-hair) solid var(--bg-raised);border-radius:var(--r-full);background:var(--learner)}.param-scale{font-size:var(--t-label);font-variant-numeric:tabular-nums;color:var(--fg-muted);justify-content:space-between;display:flex}.switch-row{align-items:center;gap:var(--s-3);width:100%;min-height:var(--hit);padding:var(--s-3) 0 0;border:0;border-top:var(--bw-hair) solid var(--hair);color:inherit;font:inherit;font-weight:var(--w-regular);font-size:var(--t-ui);text-align:start;cursor:pointer;background:0 0;display:flex}.switch-row:focus-visible{outline:var(--ring);outline-offset:var(--ring-offset)}.switch-state{font-weight:var(--w-ui);font-size:var(--t-label);color:var(--fg-muted);margin-left:auto}.switch{width:calc(var(--s-6) + var(--s-2));height:var(--s-5);border-radius:var(--r-full);background:var(--surround-track);transition:background-color var(--dur-in) var(--ease-std);flex:none;position:relative}.switch:after{content:"";top:var(--bw-hair);left:var(--bw-hair);width:calc(var(--s-5) - 2 * var(--bw-hair));height:calc(var(--s-5) - 2 * var(--bw-hair));border-radius:var(--r-full);background:var(--surround-ink);transition:transform var(--dur-in) var(--ease-std);position:absolute}.switch-row[aria-checked=true] .switch{background:var(--learner)}.switch-row[aria-checked=true] .switch:after{transform:translateX(var(--s-4));background:var(--bg-raised)}@media (prefers-reduced-motion:reduce){.switch,.switch:after{transition:none}}.ui-pad-field+.param-scale{margin-top:var(--s-1)}
.guide{gap:var(--s-3);min-height:0;display:grid}.guide-panel{overscroll-behavior:contain;max-height:26rem;overflow-y:auto}@media (min-width:1000px){.guide-panel{max-height:calc(100dvh - var(--lesson-bar) - var(--s-7) - var(--hit) - var(--s-3))}}.guide-row,.guide-line{align-items:center;gap:var(--s-3);width:100%;min-height:var(--hit);padding:var(--s-2);border-radius:var(--r-md);color:var(--fg-muted);font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;display:flex}.guide-row-text{gap:var(--s-1);display:grid}.guide-row-title{color:var(--fg);font-weight:var(--w-ui)}.guide-thumb{flex:none;width:72px}.guide-row[aria-current],.guide-line[aria-current]{background:var(--bg-raised);color:var(--fg);box-shadow:inset 0 0 0 var(--bw-hair) var(--hair)}.guide-line{line-height:var(--lh-read);align-items:baseline}.guide-time{font-size:var(--t-label);font-variant-numeric:tabular-nums;color:var(--fg-faint)}.guide-line .guide-time{flex:none;width:2.6em}@media (hover:hover){.guide-row:hover,.guide-line:hover{background:var(--bg-hover);color:var(--fg)}}.guide-row:focus-visible,.guide-line:focus-visible{outline:var(--ring);outline-offset:calc(-1 * var(--ring-w))}