#boost-lesson{position:absolute;inset:0;z-index:12;pointer-events:none;color:#fff0d5}
#boost-lesson[hidden]{display:none!important}
.boost-lesson-active #start-screen,.boost-lesson-active #test-screen,.boost-lesson-active #pause-screen,.boost-lesson-active #result-screen,.boost-lesson-active #driving-tutorial,.boost-lesson-active #sound-toggle,.boost-lesson-active .deadline-vignette{display:none!important}
.boost-lesson-copy{position:absolute;top:12%;left:7%;right:7%;padding:18px;border-radius:16px;background:#102438eb;text-align:center}
#boost-lesson small{font:11px/1.4 system-ui!important;color:#eac38b;display:block}
#boost-lesson h2{font:700 25px/1.35 system-ui!important;margin:10px 0;color:#ffe1a0;word-break:keep-all;overflow-wrap:anywhere}
#boost-lesson p{font:16px/1.5 system-ui!important;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.lesson-meter{height:12px;border-radius:8px;background:#fff1d32b;overflow:hidden;margin-top:16px}.lesson-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffc159,#fff3a5)}
.lesson-actions{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:7%;right:7%;display:grid;gap:8px;pointer-events:none}.lesson-actions button{pointer-events:auto;min-height:46px;width:100%;font:700 15px system-ui!important}.lesson-actions button[hidden]{display:none}
.lesson-gesture{position:absolute;top:74%;left:50%;width:150px;height:58px;transform:translateX(-50%);border:2px dashed #fff1d599;border-radius:35px;background:#10243855}
.lesson-gesture span{display:block;text-align:center;font:38px/52px system-ui;color:#ffe09b}.lesson-gesture i{position:absolute;left:50%;top:50%;width:28px;height:28px;border:3px solid #fff0d5;border-radius:50%;background:#ed765f88;animation:lesson-slide 1.8s ease-in-out infinite}
@keyframes lesson-slide{0%,20%{transform:translate(-50%,-50%);opacity:.4}65%,100%{transform:translate(calc(-50% + var(--lesson-direction,-1)*44px),-50%);opacity:1}}
[data-state=charging] .lesson-gesture i{animation:none;transform:translate(calc(-50% + var(--lesson-direction,-1)*44px),-50%)}
[data-state=ready] .lesson-gesture i{animation:lesson-lift 1.5s ease-in-out infinite}
@keyframes lesson-lift{0%,20%{transform:translate(calc(-50% + var(--lesson-direction,-1)*44px),-50%);opacity:1}70%,100%{transform:translate(calc(-50% + var(--lesson-direction,-1)*44px),-38px);opacity:0}}
#boost-lesson[data-state=intro],#boost-lesson[data-state=paused]{background:#10243870}
#boost-lesson[data-state=paused] .lesson-gesture,#boost-lesson[data-state=success] .lesson-gesture{display:none}
#boost-lesson[data-state=intro] .lesson-meter,#boost-lesson[data-state=paused] .lesson-meter,#boost-lesson[data-state=success] .lesson-meter{display:none}
.lesson-demo{display:flex;justify-content:center;margin-top:18px}
.lesson-demo .lesson-gesture{position:relative;top:auto;left:auto;transform:none}
#boost-lesson:not([data-state=intro]) .lesson-demo{display:none}
@media(max-height:620px){.boost-lesson-copy{top:8%;padding:14px}#boost-lesson h2{font-size:22px!important}#boost-lesson p{font-size:14px!important}.lesson-gesture{top:69%}}
@media(prefers-reduced-motion:reduce){.lesson-gesture i{animation:none!important;transform:translate(calc(-50% + var(--lesson-direction,-1)*44px),-50%)}}
/* Clearly separated, reader-paced onboarding cards before and after practice. */
#boost-lesson:is([data-state=welcome],[data-state=intro],[data-state=success],[data-state=leaving]){display:grid;grid-template-rows:minmax(0,1fr) auto;gap:20px;padding:calc(24px + env(safe-area-inset-top)) 7% calc(24px + env(safe-area-inset-bottom));background:#102438ed;pointer-events:auto}
#boost-lesson:is([data-state=welcome],[data-state=intro],[data-state=success],[data-state=leaving]) .boost-lesson-copy{position:static;align-self:center;max-height:100%;overflow:auto;width:100%;padding:18px 8px;background:transparent;text-align:center}
#boost-lesson:is([data-state=welcome],[data-state=intro],[data-state=success],[data-state=leaving]) .lesson-actions{position:static;width:100%;margin:0}
#boost-lesson:is([data-state=welcome],[data-state=leaving]) :is(.lesson-gesture,.lesson-meter,.lesson-demo){display:none}
#boost-lesson:is([data-state=welcome],[data-state=intro],[data-state=success]) .boost-lesson-copy{animation:lesson-copy-in .35s ease-out both}
#boost-lesson :is(h2,p,small){text-align:center;font-style:normal!important;letter-spacing:0;text-wrap:balance}
#boost-lesson[data-state=leaving]{pointer-events:none}
#boost-lesson[data-state=leaving] button{pointer-events:none}
#boost-lesson[data-state=boosting] :is(.lesson-gesture,.lesson-meter){display:none}
@keyframes lesson-copy-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#boost-lesson .boost-lesson-copy{animation:none!important}}