/* Motion is decoration: the complete lesson stays readable without it. */
.slide{isolation:isolate}
.slide:not(.cover-scene) h1{position:relative}
.slide:not(.cover-scene) h1:after{content:"";position:absolute;left:0;bottom:-9px;width:115px;height:4px;border-radius:4px;background:#3156e7;transform-origin:left center}
.slide.dark:not(.cover-scene) h1:after{background:#8fdec9}
.slide.active:not(.cover-scene) .meta{animation:lesson-fade .4s both}
.slide.active:not(.cover-scene) h1{animation:lesson-title .6s cubic-bezier(.2,.75,.2,1) both}
.slide.active:not(.cover-scene) h1:after{animation:lesson-line .75s .12s both}
.slide.active:not(.cover-scene) .sub{animation:lesson-fade .5s .08s both}
.slide.active:not(.cover-scene) .body>*{animation:lesson-rise .6s cubic-bezier(.2,.75,.2,1) both}
.slide.active:not(.cover-scene) .body>:nth-child(2){animation-delay:.10s}
.slide.active:not(.cover-scene) .body>:nth-child(3){animation-delay:.18s}
.slide.active:not(.cover-scene) .body>:nth-child(4){animation-delay:.24s}
.slide.active .step-num{animation:lesson-number .7s .2s both}
.slide .callout{border-radius:0 10px 10px 0}
.slide .media,.slide .pair img{box-shadow:0 9px 30px #13264212}
.footer{box-shadow:0 -5px 22px #1429430a}
.footer button{transition:background .18s,color .18s,transform .18s}
.footer button:hover{transform:translateY(-2px)}
.course-progress{position:absolute;left:0;right:0;bottom:62px;height:4px;z-index:12;background:#d9e3ef;pointer-events:none}
.course-progress:after{content:"";display:block;width:100%;height:100%;background:linear-gradient(90deg,#3156e7,#78d7c0);transform:scaleX(var(--course-progress,.023));transform-origin:left;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
#motionToggle{white-space:nowrap}
.mobile-course #motionToggle{font-size:22px;min-width:100px}

.slide.cover-scene{padding:36px 64px 82px;background:#0c2031;color:#f5fbff;gap:14px;overflow:hidden}
.cover-scene:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 88% 62%,#187f7666,transparent 45%),radial-gradient(ellipse at 15% -10%,#275d9866,transparent 50%),linear-gradient(125deg,#0d263b,#0a1e2c 72%)}
.cover-scene:after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(#a0ead50a 1px,transparent 1px),linear-gradient(90deg,#a0ead50a 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(120deg,transparent 12%,#000 80%);pointer-events:none}
.cover-scene .meta{font-size:18px;letter-spacing:.2px;color:#d4e7ef;z-index:2}
.cover-scene .meta .chapter:before{background:#9fe5ce;box-shadow:0 0 18px #9fe5ce70}
.cover-scene .meta .page{color:#9db7c7}
.cover-scene h1{position:relative;font-size:96px;line-height:1.02;letter-spacing:-4.8px;font-weight:800;z-index:2;margin:4px 0 0;flex-shrink:0}
.cover-scene .title-line{display:block;overflow:hidden;padding:3px 0 10px}
.cover-scene .title-line>span{display:block}
.cover-scene .title-line:first-child{font-size:87px;letter-spacing:-4px}
.cover-scene .title-line:last-child{font-size:132px;letter-spacing:-6px;padding-bottom:13px}
.cover-scene .title-line:last-child>span{color:#a9efd7;background:linear-gradient(100deg,#fff 0%,#c3ffed 38%,#74d6cc 78%,#d8fff2 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 8px 28px #6fd3c726)}
.cover-scene .sub{color:#9fbac9;font-size:23px;line-height:1.4;margin:0;z-index:2}
.cover-scene .body{padding-bottom:26px;gap:0;z-index:2}
.cover-scene .cover{grid-template-columns:1fr 1.03fr;gap:55px;align-items:center;min-height:0}
.cover-scene .eyebrow{color:#e7c181;font-size:18px;line-height:1.5}
.cover-scene .cover .lead{font-size:39px;line-height:1.33;letter-spacing:-1.2px;margin:14px 0;color:#edf8ff}
.cover-scene .pill-row{gap:9px;margin:16px 0 20px;max-width:650px}
.cover-scene .pill-row span{background:#bcf5df12;border:1px solid #a9efd733;border-radius:999px;color:#b8e9d9;font-size:18px;padding:9px 14px;line-height:1.25}
.cover-scene .cover .small{color:#9eb6c7;font-size:18px;line-height:1.55}
.cover-scene .source{left:64px;right:64px;color:#6f91a5;font-size:14px;z-index:2}
.cover-art{position:relative;min-width:0;transform:rotate(-1deg);padding:15px;border-radius:25px;background:#f9fcff;box-shadow:0 28px 85px #0005,0 0 0 1px #a2edd547}
.cover-scene .cover .cover-art img{display:block;padding:0;border-radius:13px;width:100%;height:auto}
.cover-art:before,.cover-art:after{content:"";position:absolute;width:44px;height:44px;border:3px solid #97e4d1;z-index:2}
.cover-art:before{left:-12px;top:-12px;border-right:0;border-bottom:0;border-radius:14px 0 0}
.cover-art:after{right:-12px;bottom:-12px;border-left:0;border-top:0;border-radius:0 0 14px}
.cover-graphics{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cover-graphics svg{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.cover-trail{fill:none;stroke:#9de7d2;stroke-width:1.2;stroke-dasharray:5 20 140 620}
.cover-trail.secondary{stroke:#e7c181;opacity:.6;stroke-dasharray:100 600 4 30}
.cover-orbit{position:absolute;width:720px;height:720px;right:-110px;top:210px;border:1px solid #90e3ce22;border-radius:50%}
.cover-orbit:before{content:"";position:absolute;inset:62px;border:1px dashed #90e3ce33;border-radius:50%}
.cover-orbit:after{content:"";position:absolute;width:12px;height:12px;top:18%;left:12%;border-radius:50%;background:#d2ffe9;box-shadow:0 0 40px #a6efce}
.cover-wave{position:absolute;right:78px;bottom:99px;width:600px;height:75px;display:flex;align-items:center;gap:7px;opacity:.2}
.cover-wave i{display:block;flex:1;min-width:0;height:var(--bar-height);border-radius:4px;background:linear-gradient(#d3ffeb,#66ccbc);transform-origin:center}
.slide.active.cover-scene .title-line>span{animation:cover-title 1s cubic-bezier(.15,.8,.15,1) both}
.slide.active.cover-scene .title-line:last-child>span{animation-delay:.12s}
.slide.active.cover-scene .meta,.slide.active.cover-scene .sub{animation:lesson-fade .9s .18s both}
.slide.active.cover-scene .cover>div:first-child{animation:lesson-rise .85s .3s both}
.slide.active.cover-scene .cover-art{animation:cover-art-enter 1.1s .2s cubic-bezier(.2,.7,.2,1) both,cover-float 7s 1.3s ease-in-out infinite}
.slide.active.cover-scene .cover-orbit{animation:cover-orbit 44s linear infinite}
.slide.active.cover-scene .cover-trail{animation:cover-trail 16s linear infinite}
.slide.active.cover-scene .cover-trail.secondary{animation-direction:reverse;animation-duration:23s}
.slide.active.cover-scene .cover-wave i{animation:cover-wave var(--bar-speed) var(--bar-delay) ease-in-out infinite alternate}
@keyframes lesson-fade{from{opacity:0}to{opacity:1}}
@keyframes lesson-title{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes lesson-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lesson-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes lesson-number{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes cover-title{from{opacity:0;transform:translateY(105%) rotate(1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes cover-art-enter{from{opacity:0;translate:24px 20px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes cover-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(.3deg)}}
@keyframes cover-orbit{to{transform:rotate(360deg)}}
@keyframes cover-trail{to{stroke-dashoffset:-1570}}
@keyframes cover-wave{from{transform:scaleY(.35);opacity:.5}to{transform:scaleY(1);opacity:1}}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation:none!important;transition:none!important}
html.motion-paused .cover-art{transform:rotate(-1deg)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* v18 motion graphics: ambient backdrop, staggered items, chapter bumper, playing meter. All decorative. */
.slide:not(.cover-scene):before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(520px 380px at 92% 8%,#3156e714,transparent 70%),radial-gradient(460px 340px at 4% 96%,#78d7c01c,transparent 70%);background-repeat:no-repeat}
.slide.dark:not(.cover-scene):before{background:radial-gradient(560px 400px at 92% 8%,#8fdec91f,transparent 70%),radial-gradient(520px 380px at 4% 96%,#3f6fd62e,transparent 70%),linear-gradient(#a0ead508 1px,transparent 1px),linear-gradient(90deg,#a0ead508 1px,transparent 1px);background-size:auto,auto,58px 58px,58px 58px;background-repeat:no-repeat,no-repeat,repeat,repeat}
.slide.active:not(.cover-scene):before{animation:ambient-drift 18s ease-in-out infinite alternate}
#stage[data-dir="back"] .slide.active:not(.cover-scene) h1{animation-name:lesson-title-back}
.slide.active .steps>article,.slide.active .rules>article,.slide.active .pair>*,.slide.active .resource-row>*,.slide.active .race-card{animation:item-rise .55s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.16s + var(--item,0)*.09s)}
.slide.active table tr{animation:row-in .5s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.2s + var(--item,0)*.07s)}
.slide.active .checks>*,.slide.active .checklist>*{animation:row-in .5s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.18s + var(--item,0)*.08s)}
.slide :first-child{--item:0}.slide :nth-child(2){--item:1}.slide :nth-child(3){--item:2}.slide :nth-child(4){--item:3}.slide :nth-child(5){--item:4}.slide :nth-child(6){--item:5}.slide :nth-child(n+7){--item:6}
.steps>article,.rules>article{position:relative}
.steps>article:after,.rules>article:after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:linear-gradient(90deg,#3156e7,#78d7c0);transform:scaleX(0);transform-origin:left}
.rules>article:after{top:-2px;height:2px}
.slide.active .steps>article:after,.slide.active .rules>article:after{animation:lesson-line .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.3s + var(--item,0)*.14s)}
.slide.active .step-num{animation:step-pop .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.28s + var(--item,0)*.09s);transform-origin:left center}
.slide.active .rules b{animation:step-pop .7s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.3s + var(--item,0)*.1s);transform-origin:left center}
.slide .callout{background-image:linear-gradient(105deg,transparent 42%,#ffffff5c 50%,transparent 58%);background-size:260% 100%;background-position:130% 0;background-repeat:no-repeat}
.slide.dark .callout{background-image:linear-gradient(105deg,transparent 42%,#ffffff1f 50%,transparent 58%)}
.slide.active .callout{animation:callout-sheen 1.3s .55s ease-out both}
.slide.active .media{animation:media-in .7s .12s cubic-bezier(.2,.75,.2,1) both}
.media-label .eq{display:none;align-items:flex-end;gap:3px;height:15px;margin-left:9px;vertical-align:-1px}
.media.is-playing .media-label .eq{display:inline-flex}
.media-label .eq i{display:block;width:3px;height:100%;border-radius:2px;background:#9de7d2;transform-origin:bottom;animation:eq-bar .7s ease-in-out infinite alternate}
.media-label .eq i:nth-child(2){animation-duration:.5s;animation-delay:-.2s}
.media-label .eq i:nth-child(3){animation-duration:.9s;animation-delay:-.4s}
.course-progress i{position:absolute;top:50%;left:calc(var(--course-progress,.023)*100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#baf3e2;box-shadow:0 0 0 3px #78d7c040,0 0 14px #78d7c0;transition:left .65s cubic-bezier(.2,.7,.2,1);animation:head-pulse 2.2s ease-in-out infinite}
.chapter-bumper{position:absolute;z-index:9;inset:0 0 66px;display:none;align-items:center;gap:34px;padding:0 110px;background:linear-gradient(115deg,#0d263b,#143a4a);color:#f5fbff;pointer-events:none;overflow:hidden}
.chapter-bumper.run{display:flex;animation:bumper-wipe 1.25s cubic-bezier(.7,0,.2,1) both}
.chapter-bumper b{font-size:210px;line-height:1;font-weight:800;letter-spacing:-8px;color:transparent;-webkit-text-stroke:3px #9de7d2}
.chapter-bumper span{font-size:74px;font-weight:800;letter-spacing:-2.5px}
.chapter-bumper em{position:absolute;left:110px;right:110px;bottom:150px;height:4px;border-radius:4px;background:linear-gradient(90deg,#3156e7,#78d7c0);transform-origin:left}
.chapter-bumper.run b{animation:bumper-num 1.25s cubic-bezier(.2,.8,.2,1) both}
.chapter-bumper.run span{animation:bumper-text 1.25s cubic-bezier(.2,.8,.2,1) both}
.chapter-bumper.run em{animation:lesson-line .8s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes ambient-drift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:-90px 60px,80px -50px,0 0,0 0}}
@keyframes lesson-title-back{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
@keyframes item-rise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes row-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes step-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes callout-sheen{from{background-position:130% 0}to{background-position:-60% 0}}
@keyframes media-in{from{opacity:0;clip-path:inset(0 100% 0 0 round 6px)}to{opacity:1;clip-path:inset(0 0 0 0 round 6px)}}
@keyframes eq-bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes head-pulse{50%{box-shadow:0 0 0 6px #78d7c022,0 0 20px #78d7c0}}
@keyframes bumper-wipe{0%{clip-path:inset(0 100% 0 0)}22%,70%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes bumper-num{0%{opacity:0;transform:translateX(-60px)}25%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateX(40px)}}
@keyframes bumper-text{0%,10%{opacity:0;transform:translateY(30px)}32%,75%{opacity:1;transform:none}100%{opacity:0}}
html.motion-paused .chapter-bumper,html.motion-paused .media-label .eq{display:none!important}
@media print{.chapter-bumper,.course-progress{display:none!important}}
@media(prefers-reduced-motion:reduce){.chapter-bumper,.media-label .eq{display:none!important}}