/* Little Leash step illustrations (scenes.js). transform/opacity only; runs only on .sc.on (visible). */
.sc{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:18px;background:#FFF4E8;--sk:#EFC4A0;--hr:#6B4A3A;--sk2:#D9A27A;--hr2:#3E2E2A;--sk3:#F6D3B5;--hr3:#B5774A}
.sc *{transform-box:view-box}
.sc text{font-family:Poppins,system-ui,-apple-system,sans-serif;font-weight:700}
.sc .sk{fill:var(--sk)}.sc .hr{fill:var(--hr)}.sc .sk2{fill:var(--sk2)}.sc .hr2{fill:var(--hr2)}.sc .sk3{fill:var(--sk3)}.sc .hr3{fill:var(--hr3)}
.sc .fa{opacity:0}
.sc.on .w{animation:sc-w .42s ease-in-out infinite alternate}
.sc.on .wf{animation:sc-w .2s ease-in-out infinite alternate}
.sc.on .bl{animation:sc-bl 4.2s infinite}
.sc.on .er{animation:sc-er 3.6s ease-in-out infinite}
.sc.on .br{animation:sc-br 3.2s ease-in-out infinite}
.sc.on .bob{animation:sc-bob .6s ease-in-out infinite alternate}
.sc.on .hop{animation:sc-hop 1.1s cubic-bezier(.3,.7,.4,1) infinite}
.sc.on .prs{animation:sc-prs 3.2s infinite}
.sc.on .rip{animation:sc-rip 3.2s ease-out infinite}
.sc.on .fly{animation:sc-fly 3.2s ease-in-out infinite}
.sc.on .go{animation:sc-go 3.2s ease-in-out infinite}
.sc.on .mv{animation:sc-mv 3.2s ease-in-out infinite}
.sc.on .ar{animation:sc-ar 3.2s ease-in-out infinite}
.sc.on .pop{animation:sc-pop 3.2s ease-out infinite}
.sc.on .hrt{animation:sc-hrt 3.2s ease-out infinite}
.sc.on .fa{animation:sc-fa 3.2s ease-in-out infinite}
.sc.on .fb{animation:sc-fb 3.2s ease-in-out infinite}
.sc.on .la{animation:sc-leg .5s ease-in-out infinite alternate}
.sc.on .lb{animation:sc-leg .5s ease-in-out infinite alternate-reverse}
.sc.on .pa{animation:sc-pleg .6s ease-in-out infinite alternate}
.sc.on .pb{animation:sc-pleg .6s ease-in-out infinite alternate-reverse}
.sc.on .rot{animation:sc-rot 3.2s linear infinite}
.sc.on .flp{animation:sc-flp 1.6s ease-in-out infinite}
.sc.on .snf{animation:sc-snf .35s ease-in-out infinite alternate}
.sc.on .tw{animation:sc-tw 2.2s ease-in-out infinite}
.sc.on .glw{animation:sc-glw 1.6s ease-in-out infinite}
.sc.on .shk{animation:sc-shk .26s ease-in-out infinite alternate}
.sc.on .scr{animation:sc-scr 2.4s linear infinite}
.sc.on .fal{animation:sc-fal 1.8s ease-in infinite}
.sc.on .bf{animation:sc-bf 3.2s ease-in-out infinite}
.sc.on .wg{animation:sc-wg .22s ease-in-out infinite alternate}
.sc.on .dor{animation:sc-dor 3.2s ease-in-out infinite}
.sc.on .q1{animation:sc-q1 3.2s infinite}.sc.on .q2{animation:sc-q2 3.2s infinite}.sc.on .q3{animation:sc-q3 3.2s infinite}.sc.on .q4{animation:sc-q4 3.2s infinite}.sc.on .q5{animation:sc-q5 3.2s infinite}
@keyframes sc-w{from{transform:rotate(-14deg)}to{transform:rotate(18deg)}}
@keyframes sc-bl{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
@keyframes sc-er{0%,70%,100%{transform:none}80%{transform:rotate(-9deg)}90%{transform:rotate(3deg)}}
@keyframes sc-br{50%{transform:scale(1.015,1.035)}}
@keyframes sc-bob{to{transform:translateY(-2.5px)}}
@keyframes sc-hop{0%,55%,100%{transform:none}64%{transform:scale(1.05,.94)}78%{transform:translateY(-12px)}90%{transform:scale(1.03,.97)}}
@keyframes sc-prs{0%,10%,22%,100%{transform:none}15%{transform:scale(.7)}}
@keyframes sc-rip{0%,12%{transform:scale(.3);opacity:0}16%{opacity:1}42%,100%{transform:scale(1.7);opacity:0}}
@keyframes sc-fly{0%,20%{transform:translate(var(--x),var(--y));opacity:0}26%{transform:translate(var(--x),var(--y));opacity:1}40%{transform:translate(calc(var(--x)*.5),calc(var(--y)*.5 - 22px))}54%,82%{transform:none;opacity:1}90%,100%{transform:none;opacity:0}}
@keyframes sc-go{0%{transform:translate(var(--x),var(--y));opacity:0}8%{opacity:1}50%,86%{transform:none;opacity:1}95%,100%{transform:none;opacity:0}}
@keyframes sc-mv{0%,100%{transform:translate(var(--x),var(--y))}40%,72%{transform:none}}
@keyframes sc-ar{0%,100%{transform:rotate(var(--a,20deg))}40%,72%{transform:none}}
@keyframes sc-pop{0%,6%{transform:scale(0)}14%{transform:scale(1.12)}20%,86%{transform:none}94%,100%{transform:scale(0)}}
@keyframes sc-hrt{0%,52%{transform:translate(0,6px) scale(.4);opacity:0}60%{opacity:1}100%{transform:translate(4px,-28px);opacity:0}}
@keyframes sc-fa{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes sc-fb{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes sc-leg{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes sc-pleg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes sc-rot{to{transform:rotate(360deg)}}
@keyframes sc-flp{0%,100%{transform:none}50%{transform:scaleX(-1)}}
@keyframes sc-snf{to{transform:rotate(5deg)}}
@keyframes sc-tw{0%,100%{transform:scale(.45);opacity:.3}50%{transform:scale(1.1);opacity:1}}
@keyframes sc-glw{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sc-shk{from{transform:scale(.85);opacity:.6}to{transform:scale(1.12);opacity:1}}
@keyframes sc-scr{to{transform:translateX(-80px)}}
@keyframes sc-fal{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(60px) rotate(220deg);opacity:0}}
@keyframes sc-bf{0%,100%{transform:none}25%{transform:translate(-14px,-10px)}50%{transform:translate(-4px,-20px)}75%{transform:translate(8px,-8px)}}
@keyframes sc-wg{to{transform:scaleX(.35)}}
@keyframes sc-dor{0%,20%{transform:scaleX(.18)}34%,66%{transform:none}80%,100%{transform:scaleX(.18)}}
@keyframes sc-q1{0%,8%{opacity:0}12%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes sc-q2{0%,24%{opacity:0}28%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes sc-q3{0%,40%{opacity:0}44%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes sc-q4{0%,56%{opacity:0}60%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes sc-q5{0%,70%{opacity:0}74%,92%{opacity:1}97%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sc *{animation:none!important}}
/* in the lesson: picture above the step text, cover under the title */
.pst{flex-wrap:wrap}
.pst .pill{flex:1 0 100%;display:block;margin:-2px 0 4px}
.pst .pill .sc{max-width:400px;margin:0 auto}
.pcov{margin-top:14px}
.pcov .sc{max-width:420px;margin:0 auto;box-shadow:0 10px 30px rgba(120,80,50,.12)}
.sc .fl{opacity:0}.sc.on .fl{animation:sc-fl 3.2s ease-out infinite}
@keyframes sc-fl{0%,30%{opacity:0}33%{opacity:.85}48%,100%{opacity:0}}
.pst .pill~span:last-child{flex:1 1 0;min-width:0}