.lesson-main{height:100dvh}.lesson-column{--chrome:13.5rem;width:min(100%, max(36rem, calc((100dvh - var(--chrome)) * 16 / 9)));container-type:inline-size}.lesson-stage{flex-direction:column;flex:1 1 0;justify-content:flex-end;min-height:10rem;max-height:calc(56.25cqw + 2px);margin-top:auto;display:flex;container-type:size}.lesson-column>:last-child{margin-bottom:auto}.lesson-fit .lesson-column>*,.lesson-main[data-fullscreen] .lesson-column>*{margin-block:0}.lesson-board{width:min(100cqw,177.778cqh);margin-inline:auto;position:relative}.lesson-fit .lesson-main{height:auto}.lesson-fit .lesson-column{width:100%}.lesson-fit .lesson-stage{flex:none;min-height:0;max-height:none;container-type:inline-size}.lesson-fit .lesson-board{width:100%}.lesson-caption-band{justify-content:center;align-items:center;min-height:3.25rem;padding:.5rem .75rem 0;display:flex}.lesson-caption{text-align:center;text-wrap:balance;max-width:48rem;font-size:.9375rem;line-height:1.45}.lesson-toolbar{height:3.5rem}@media (max-width:639px){.lesson-main{height:auto}.lesson-stage{flex:none;min-height:0;max-height:none;container-type:normal}.lesson-column>.lesson-stage,.lesson-column>:last-child{margin-block:0}.lesson-board{width:100%}.lesson-toolbar{flex-wrap:wrap;row-gap:.25rem;height:auto;min-height:3.5rem}}.lesson-main:not([data-fullscreen]) .lesson-board[data-shape=tall]{box-sizing:content-box;aspect-ratio:2/3;border-width:0;border-radius:0;width:auto;margin-inline:-1rem}.lesson-main:not([data-fullscreen]) .lesson-controls[data-shape=tall]{border-inline-width:0;border-radius:0;width:auto;margin-inline:-1rem}@media (max-width:639px) and (orientation:portrait){.lesson-main:not([data-fullscreen]) .lesson-board:not([data-shape=wide]){--tall-chrome:14.5rem;box-sizing:content-box;width:min(100% + 2rem, (var(--steady-vh,100dvh) - var(--tall-chrome)) * 2 / 3);aspect-ratio:2/3;margin-inline:max(-1rem, (100% - (var(--steady-vh,100dvh) - var(--tall-chrome)) * 2 / 3) / 2);border-width:0;border-radius:0}.lesson-main:not([data-fullscreen]) .lesson-controls:not([data-shape=wide]){border-inline-width:0;border-radius:0;width:auto;margin-inline:-1rem}}@media not ((max-width:639px) and (orientation:portrait)){.lesson-main[data-written=tall]:not([data-fullscreen]) .lesson-column{--chrome:16.5rem;width:min(100%, max(22rem, calc((100dvh - var(--chrome)) * 2 / 3)))}.lesson-main[data-written=tall]:not([data-fullscreen]) .lesson-toolbar{flex-wrap:wrap;row-gap:.25rem;height:auto;min-height:3.5rem}.lesson-main[data-written=tall]:not([data-fullscreen]) .lesson-stage{max-height:calc(150cqw + 2px)}.lesson-main[data-written=tall]:not([data-fullscreen]) .lesson-board[data-shape=tall]{box-sizing:border-box;border-radius:var(--radius-box) var(--radius-box) 0 0;border-width:1px;width:min(100cqw,66.6667cqh);margin-inline:auto}.lesson-main[data-written=tall]:not([data-fullscreen]) .lesson-controls[data-shape=tall]{border-radius:0 0 var(--radius-box) var(--radius-box);border-inline-width:1px;width:100%;margin-inline:0}}@media (pointer:coarse){.lesson-main .d-btn{--d-size:calc(var(--size-field,.25rem) * 10);min-width:var(--d-size)}.lesson-main .d-input{--d-size:calc(var(--size-field,.25rem) * 12)}.lesson-main .d-menu :where(li>a,li>button),.lesson-main .lesson-caption{min-height:2.5rem}}@media (max-width:639px) and (orientation:portrait){.dboard-scaled[data-pick=wide]{display:none}}@media not ((max-width:639px) and (orientation:portrait)){.dboard-scaled[data-pick=tall]{display:none}}.lesson-main[data-fullscreen]{z-index:40;background:var(--color-base-100);height:100dvh;position:fixed;inset:0}html[data-player-cover] body{min-height:calc(100lvh + 4rem)}.lesson-main[data-fullscreen]:has(.lesson-controls[data-idle]):not(:has(.lesson-controls :focus-visible)){cursor:none}.lesson-main[data-fullscreen] .lesson-column{width:100%;position:relative}.lesson-main[data-fullscreen] .lesson-stage{flex:1 1 0;justify-content:center;min-height:0;max-height:none;container-type:size}.lesson-main[data-fullscreen] .lesson-board{border-width:0;border-radius:0;width:min(100cqw,177.778cqh);margin-inline:auto}.lesson-main[data-fullscreen] .lesson-board[data-shape=tall]{width:min(100cqw,66.6667cqh)}.lesson-main[data-fullscreen] .lesson-controls{inset-inline:0;width:auto;padding-bottom:env(safe-area-inset-bottom);background:color-mix(in oklab, var(--color-base-100) 90%, transparent);border-width:0;border-radius:0;margin-inline:0;position:absolute;bottom:0}.lesson-main[data-fullscreen] .lesson-controls[data-idle]:not(:has(:focus-visible)){background:0 0}.lesson-main[data-fullscreen] .lesson-controls[data-idle]:not(:has(:focus-visible))>:not(.lesson-caption-band){display:none}.lesson-main[data-fullscreen] .lesson-controls[data-idle]:not(:has(:focus-visible)) .lesson-caption{border-radius:var(--radius-box);background:color-mix(in oklab, var(--color-base-100) 90%, transparent);padding:.25rem .75rem}.lesson-scrub{--thumb:14px;touch-action:none;flex:1 1 0;min-width:0;height:1.5rem;position:relative}.lesson-scrub-track{inset-inline:0;pointer-events:none;height:4px;transition:height .12s;position:absolute;top:50%;transform:translateY(-50%)}.lesson-scrub-seg{background:var(--color-base-300);border-radius:999px;position:absolute;top:0;bottom:0;overflow:hidden}.lesson-scrub-fill{background:var(--color-primary);height:100%;transition:width .25s linear;display:block}.lesson-scrub:is([data-dragging],[data-jump]) .lesson-scrub-fill{transition:none}.lesson-scrub-seg[data-waiting] .lesson-scrub-fill{background:linear-gradient(90deg, transparent 0 25%, var(--color-primary) 50%, transparent 75% 100%) 0 0 / 200% 100%;animation:1.5s linear infinite lesson-scrub-wait}@keyframes lesson-scrub-wait{0%{background-position-x:100%}to{background-position-x:-100%}}@media (prefers-reduced-motion:reduce){.lesson-scrub-fill{transition:none}.lesson-scrub-seg[data-waiting] .lesson-scrub-fill{background:repeating-linear-gradient(135deg, var(--color-primary) 0 3px, transparent 3px 6px);animation:none}}.lesson-scrub-input{top:0;left:calc(var(--thumb) / -2);width:calc(100% + var(--thumb));appearance:none;cursor:pointer;background:0 0;height:100%;margin:0;position:absolute}.lesson-scrub-input:focus{outline:none}.lesson-scrub-input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-field)}.lesson-scrub-input::-webkit-slider-runnable-track{background:0 0;height:100%}.lesson-scrub-input::-moz-range-track{background:0 0}.lesson-scrub-input::-webkit-slider-thumb{appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((1.5rem - var(--thumb)) / 2);border:2px solid var(--color-base-100);background:var(--color-primary);box-shadow:0 1px 3px color-mix(in oklab, var(--color-base-content) 30%, transparent);border-radius:50%;transition:transform .12s;transform:scale(0)}.lesson-scrub-input::-moz-range-thumb{width:var(--thumb);height:var(--thumb);box-sizing:border-box;border:2px solid var(--color-base-100);background:var(--color-primary);box-shadow:0 1px 3px color-mix(in oklab, var(--color-base-content) 30%, transparent);border-radius:50%;transition:transform .12s;transform:scale(0)}.lesson-scrub[data-dragging] .lesson-scrub-track,.lesson-scrub:focus-within .lesson-scrub-track{height:8px}.lesson-scrub[data-dragging] .lesson-scrub-input::-webkit-slider-thumb{transform:scale(1)}.lesson-scrub:focus-within .lesson-scrub-input::-webkit-slider-thumb{transform:scale(1)}.lesson-scrub[data-dragging] .lesson-scrub-input::-moz-range-thumb{transform:scale(1)}.lesson-scrub:focus-within .lesson-scrub-input::-moz-range-thumb{transform:scale(1)}@media (hover:hover){.lesson-scrub:hover .lesson-scrub-track{height:8px}.lesson-scrub:hover .lesson-scrub-input::-webkit-slider-thumb{transform:scale(1)}.lesson-scrub:hover .lesson-scrub-input::-moz-range-thumb{transform:scale(1)}}@media (pointer:coarse){.lesson-scrub{--thumb:18px;height:2.75rem}.lesson-scrub-input::-webkit-slider-thumb{margin-top:calc((2.75rem - var(--thumb)) / 2);transform:scale(1)}.lesson-scrub-input::-moz-range-thumb{transform:scale(1)}}.lesson-scrub-tip{z-index:10;border-radius:var(--radius-field);background:var(--color-neutral);max-width:min(20rem,90vw);color:var(--color-neutral-content);white-space:nowrap;pointer-events:none;padding:.25rem .5rem;font-size:.75rem;line-height:1.4;position:absolute;bottom:calc(100% + .375rem)}