/* Learner Apps: Zoom deck. Canvas 1920x1080, scaled to fit, letterboxed on Paper. */
:root{
  --ink:#141B3C; --ink-2:#2A3160; --paper:#FBF7EF; --card:#FFFFFF;
  --spark:#F7C808; --sky:#6DB2E2; --sky-soft:#E3F0F9; --deep:#355E9F; --plum:#813D97;
  --ok:#2F8F6B; --muted:#5B6180; --line:rgba(20,27,60,.12); --warn:#B8432F;
  --ravens:#3A2A7E;
  --ease:cubic-bezier(.2,.8,.2,1);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Manrope", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);overflow:hidden;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.hide-cursor, body.hide-cursor *{cursor:none!important}

/* the 1920x1080 stage lives inside a fixed, clipped viewport so it can never widen the page on phones */
#viewport{position:fixed;inset:0;overflow:hidden;background:var(--paper);touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;transform:translate(var(--x,0px),var(--y,0px)) scale(var(--s,1));overflow:hidden;background:var(--paper)}
#rotate{display:none;position:fixed;left:16px;right:16px;bottom:max(24px,env(safe-area-inset-bottom));align-items:center;justify-content:center;gap:10px;font:600 15px/1.35 var(--sans);color:var(--muted);text-align:center;z-index:80;pointer-events:none}
#rotate svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (orientation:portrait) and (max-width:600px){#rotate{display:flex}}
body.preview #rotate{display:none!important}
#stage.boot .slide{transition:none!important}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s;background:var(--paper);overflow:hidden}
.slide.active{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.slide.dark{background:var(--ink);color:var(--paper)}
.notes{display:none}

/* ---------- type ---------- */
.serif{font-family:var(--serif);font-optical-sizing:auto}
h1,h2,h3,p{margin:0}
.h-xl{font-family:var(--serif);font-weight:600;font-size:190px;line-height:.92;letter-spacing:-.025em;font-variation-settings:"opsz" 144,"SOFT" 50}
.h-l{font-family:var(--serif);font-weight:600;font-size:118px;line-height:1;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 50}
.h-m{font-family:var(--serif);font-weight:600;font-size:84px;line-height:1.04;letter-spacing:-.015em;font-variation-settings:"opsz" 120,"SOFT" 50}
.h-s{font-family:var(--serif);font-weight:600;font-size:60px;line-height:1.1;letter-spacing:-.01em;font-variation-settings:"opsz" 72}
.italic{font-style:italic;font-weight:400}
.kicker{font-family:var(--sans);font-weight:700;font-size:30px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.dark .kicker{color:var(--sky)}
.body{font-size:40px;line-height:1.35;font-weight:500}
.small{font-size:34px;line-height:1.35}
.muted{color:var(--muted)}
.dark .muted{color:rgba(251,247,239,.62)}
.hl{background:linear-gradient(transparent 58%, var(--spark) 58%, var(--spark) 90%, transparent 90%);padding:0 .06em}
.pos{position:absolute}
.credit{position:absolute;bottom:52px;font-size:24px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.credit b{color:var(--ink);font-weight:700}

/* ---------- spark glyph ---------- */
.spark-svg{display:block;overflow:visible}
.spark-svg use{fill:var(--spark)}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.86) rotate(12deg)}}
@keyframes ignite{from{transform:scale(0) rotate(-90deg);opacity:0}60%{opacity:1}to{transform:scale(1) rotate(0);opacity:1}}

/* ---------- enter animations (base style = final state; keyframes supply the start) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.86)}}
@keyframes slideL{from{opacity:0;transform:translateX(-40px)}}
@keyframes slideR{from{opacity:0;transform:translateX(40px)}}
@keyframes draw{from{stroke-dashoffset:1}}
.slide.active .rise{animation:rise .7s var(--ease) backwards;animation-delay:var(--d,0ms)}
.slide.active .fade{animation:fadeIn .8s var(--ease) backwards;animation-delay:var(--d,0ms)}
.slide.active .pop{animation:pop .6s var(--ease) backwards;animation-delay:var(--d,0ms)}
.slide.active .slide-l{animation:slideL .7s var(--ease) backwards;animation-delay:var(--d,0ms)}
.slide.active .slide-r{animation:slideR .7s var(--ease) backwards;animation-delay:var(--d,0ms)}
.draw-path{stroke-dasharray:1;stroke-dashoffset:0}
.slide.active .draw-path{animation:draw var(--dur,1.4s) var(--ease) backwards;animation-delay:var(--d,0ms)}

/* ---------- build steps: [data-b="n"] shows at step >= n; [data-bout="n"] leaves at step >= n ---------- */
[data-b]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-b].on{opacity:1;transform:none}
[data-b].b-fade{transform:none}
[data-b].b-pop{transform:scale(.9)}
[data-b].b-pop.on{transform:none}
[data-bout]{transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)}
[data-bout].off{opacity:0;transform:translateY(-16px);pointer-events:none}
[data-bout].dim.off{opacity:.18;transform:none}

/* ---------- chrome ---------- */
#progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(20,27,60,.06);z-index:50}
#progress i{display:block;height:100%;width:0;background:var(--sky);opacity:.75;transition:width .5s var(--ease)}
#stage.on-dark #progress{background:rgba(251,247,239,.06)}
/* step indicator: quiet on purpose (about 35% ink / paper), cross-fades in 200 ms */
#ind{position:absolute;right:30px;bottom:20px;height:18px;min-width:18px;z-index:50;color:var(--ink);opacity:.35}
#stage.on-dark #ind{color:var(--paper)}
#ind .dots,#ind .g{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .2s linear}
#ind .dots{display:flex;gap:8px}
#ind .dots b{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.6px currentColor;transition:background-color .2s linear}
#ind .dots b.done{background:currentColor}
#ind .g{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#ind .g.play{fill:currentColor;stroke:none}
#ind[data-show="dots"] .dots,#ind[data-show="slide"] .g.nxt,#ind[data-show="play"] .g.play,#ind[data-show="pause"] .g.pause{opacity:1}
#black{position:fixed;inset:0;background:#000;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s}
#black.on{opacity:1;pointer-events:auto}
body.preview #progress, body.preview #ind{display:none}

/* ---------- phone mockup ---------- */
.phone{position:absolute;width:380px;height:780px;border-radius:58px;background:var(--ink);padding:14px;box-shadow:0 40px 80px -30px rgba(20,27,60,.45),0 0 0 2px rgba(20,27,60,.9)}
.phone::before{content:"";position:absolute;top:26px;left:50%;width:108px;height:30px;border-radius:20px;background:var(--ink);transform:translateX(-50%);z-index:3}
.phone .screen{position:relative;width:100%;height:100%;border-radius:45px;overflow:hidden;background:var(--paper);font-family:var(--sans);color:var(--ink)}
.phone .screen > img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.app{position:absolute;inset:0;padding:70px 22px 22px;display:flex;flex-direction:column;gap:14px}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.app-name{font-weight:800;font-size:19px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.app-name svg{width:18px;height:18px}
.app-chip{font-size:13px;font-weight:700;padding:6px 10px;border-radius:99px;background:var(--sky-soft);color:var(--deep);white-space:nowrap}
.yards{display:flex;gap:4px}
.yards i{flex:1;height:10px;border-radius:3px;background:rgba(58,42,126,.14)}
.yards i.f{background:var(--ravens)}
.yards-label{font-size:13px;font-weight:700;color:var(--ravens);display:flex;justify-content:space-between}
.q-card{background:#fff;border-radius:22px;padding:20px 18px;box-shadow:0 8px 24px -14px rgba(20,27,60,.35);display:flex;flex-direction:column;gap:10px}
.q-title{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.12;letter-spacing:-.01em}
.q-body{font-size:18px;line-height:1.42;font-weight:500;color:#2A3160}
.answers{display:flex;flex-direction:column;gap:10px}
.ans{height:58px;border-radius:16px;border:2px solid rgba(20,27,60,.14);background:#fff;display:flex;align-items:center;padding:0 18px;font-weight:700;font-size:21px}
.ans.good{border-color:var(--ok);background:#E6F3EC;color:#1E6B4E}
.tools{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tool{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--muted);text-align:center;line-height:1.15}
.tool svg{width:34px;height:34px;padding:7px;border-radius:12px;background:var(--sky-soft);stroke:var(--deep);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tool.hot svg{background:var(--spark);stroke:var(--ink)}
.calm-note{font-size:13px;font-weight:700;color:var(--ok);display:flex;align-items:center;gap:6px}
.label-card{border-radius:14px;background:#fff;border:2px dashed rgba(129,61,151,.35);padding:14px 14px 12px;font-family:"Courier New",monospace;font-size:15px;line-height:1.35;font-weight:700;color:#2A3160}
.label-card small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--plum);margin-bottom:6px}
.app-keisha .app-name{color:var(--plum)}
.app-keisha .app-chip{background:#F2E8F5;color:var(--plum)}
.app-keisha .tool svg{background:#F2E8F5;stroke:var(--plum)}
.app-keisha .tool.hot svg{background:var(--spark);stroke:var(--ink)}

/* ---------- cards ---------- */
.card{background:#fff;border-radius:34px;box-shadow:0 30px 60px -36px rgba(20,27,60,.35),0 0 0 1px rgba(20,27,60,.06)}
.chip{display:inline-flex;align-items:center;justify-content:center;border-radius:22px;font-family:var(--serif);font-weight:700}

/* ---------- slide 1: title ---------- */
#s-title .logo{position:absolute;left:120px;top:92px;width:441px}
#s-title .tag{position:absolute;right:120px;top:106px;font-size:26px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--deep)}
#s-title .title{position:absolute;left:112px;top:240px}
#s-title .title .h-xl{font-size:212px}
#s-title .glint{position:absolute;left:1350px;top:258px;width:150px;height:150px}
#s-title .glint svg{width:100%;height:100%}
.slide.active .glint svg{animation:ignite .9s var(--ease) .5s backwards, twinkle 5s ease-in-out 1.6s infinite}
#s-title .sub{position:absolute;left:120px;top:700px;font-size:64px;color:var(--deep)}
#s-title .credit{left:120px;right:120px;display:flex;justify-content:space-between}
.skyline{position:absolute;left:0;right:0;bottom:100px;height:150px;width:1920px}
.skyline path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.16}
#s-title .skyline{left:auto;right:0}

/* ---------- slide 2: remember ---------- */
#s-remember .left{position:absolute;left:120px;top:250px;width:820px}
#s-remember .left .h-l{font-size:112px}
#s-remember .was{margin-top:28px}
#s-remember .now{margin-top:44px}
#s-remember .chat{position:absolute;left:1010px;top:170px;width:790px;height:740px;padding:44px;display:flex;flex-direction:column;gap:26px;transition:transform .8s var(--ease),opacity .8s var(--ease),filter .8s var(--ease)}
#s-remember[data-step="1"] .chat{transform:translate(-40px,20px) scale(.9);opacity:.35;filter:saturate(.2)}
.chat-head{display:flex;align-items:center;gap:14px;font-weight:700;font-size:26px;color:var(--muted);padding-bottom:18px;border-bottom:2px solid var(--line)}
.chat-head i{width:14px;height:14px;border-radius:50%;background:var(--sky)}
.bubble{max-width:560px;border-radius:30px;padding:24px 30px;font-size:34px;line-height:1.35;font-weight:600}
.bubble.me{align-self:flex-end;background:var(--deep);color:#fff;border-bottom-right-radius:8px}
.bubble.ai{align-self:flex-start;background:var(--paper);border-bottom-left-radius:8px;color:var(--ink)}
.bubble.ai .ln{display:block;height:16px;border-radius:8px;background:rgba(20,27,60,.12);margin-top:16px}
.dots{display:inline-flex;gap:8px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--muted);opacity:.4}
#s-remember .phone{left:1400px;top:170px;transform:scale(.92) translateY(40px);opacity:0;transition:transform .8s var(--ease) .15s,opacity .6s var(--ease) .15s}
#s-remember[data-step="1"] .phone{transform:scale(.92);opacity:1}

/* ---------- slide 3: darnell ---------- */
.portrait{position:absolute;overflow:hidden;border-radius:40px}
.portrait svg{position:absolute;inset:0;width:100%;height:100%}
#s-darnell .portrait{left:120px;top:120px;width:640px;height:840px;background:var(--sky-soft)}
#s-darnell .pname{position:absolute;left:44px;bottom:40px;font-size:92px;color:var(--ink)}
#s-darnell .pname small{display:block;font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--deep);margin-bottom:6px}
#s-darnell .facts{position:absolute;left:860px;top:150px;width:940px;display:flex;flex-direction:column;gap:30px}
.fact{display:flex;align-items:center;gap:34px;font-size:48px;font-weight:600;line-height:1.2}
.fact .ic{flex:none;width:96px;height:96px;border-radius:28px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(20,27,60,.08)}
.fact .ic svg{width:56px;height:56px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fact.wall .ic{background:var(--spark);box-shadow:none}
.fact.freeze .ic{background:var(--sky);box-shadow:none}
.fact em{font-style:normal;color:var(--deep)}
#s-darnell .invented{position:absolute;left:860px;bottom:96px;font-size:48px;color:var(--deep)}
.stopwatch .hand{transform-origin:28px 32px;transform:rotate(0deg)}
.slide.active .freeze.on .stopwatch .hand{animation:tick 1.2s steps(6) .3s backwards}
@keyframes tick{from{transform:rotate(-150deg)}}
.freeze .frost{opacity:0;transition:opacity .6s var(--ease) 1.4s}
.freeze.on .frost{opacity:1}

/* ---------- slide 4: old vs new ---------- */
#s-oldnew .col-label{position:absolute;top:96px;font-size:34px}
#s-oldnew .worksheet{position:absolute;left:170px;top:180px;width:640px;height:760px;background:#fff;border-radius:10px;padding:52px 56px;transform:rotate(-2.2deg);box-shadow:0 30px 60px -36px rgba(20,27,60,.4),0 0 0 1px rgba(20,27,60,.08);font-family:"Courier New",monospace;color:#3a3f55}
.ws-title{font-size:34px;font-weight:700;border-bottom:3px solid #3a3f55;padding-bottom:18px;display:flex;justify-content:space-between}
.ws-row{font-size:34px;padding:28px 0 12px;border-bottom:2px dashed rgba(58,63,85,.25);position:relative}
.ws-timer{color:var(--warn);font-weight:700}
.ws-x{position:absolute;right:-6px;top:10px;width:70px;height:70px}
.ws-x path{stroke:var(--warn);stroke-width:7;stroke-linecap:round;fill:none}
.ws-score{position:absolute;right:52px;bottom:48px;font-family:var(--serif);font-style:italic;font-size:64px;color:var(--warn);transform:rotate(-8deg)}
#s-oldnew .vs{position:absolute;left:944px;top:520px;width:32px;height:32px;opacity:.5}
#s-oldnew .phone{left:1270px;top:170px}
#s-oldnew .line{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-size:56px}

/* ---------- slide 5: SPARK ---------- */
#s-spark .lead{position:absolute;left:0;right:0;top:170px;text-align:center;font-size:84px;color:rgba(251,247,239,.86)}
#s-spark .letters{position:absolute;left:170px;right:170px;top:320px;display:grid;grid-template-columns:repeat(5,1fr);text-align:center}
.lt{position:relative;display:flex;flex-direction:column;align-items:center}
.lt .L{font-family:var(--serif);font-weight:700;font-size:300px;line-height:1;font-variation-settings:"opsz" 144,"SOFT" 30;color:transparent;-webkit-text-stroke:3px rgba(251,247,239,.22);transition:color .5s var(--ease)}
.lt .W{margin-top:26px;font-size:36px;font-weight:700;color:var(--sky);line-height:1.2;min-height:88px}
.lt .g{position:absolute;top:-14px;right:30px;width:64px;height:64px;opacity:0}
.slide.active .lt .L{animation:litL .01s linear forwards;animation-delay:calc(var(--d) + 250ms)}
@keyframes litL{to{color:var(--paper);-webkit-text-stroke-color:transparent}}
.slide.active .lt .g{animation:flash 1s var(--ease) forwards;animation-delay:var(--d)}
@keyframes flash{0%{opacity:0;transform:scale(0) rotate(-60deg)}35%{opacity:1;transform:scale(1.35) rotate(0)}100%{opacity:1;transform:scale(.62) rotate(15deg)}}
.slide.active .lt .W{animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--d) + 300ms)}
#s-spark .foot{position:absolute;left:0;right:0;bottom:110px;text-align:center;font-size:40px;color:rgba(251,247,239,.7)}

/* ---------- slides 6-10: Darnell's SPARK ---------- */
.rail{position:absolute;left:120px;top:84px;display:flex;gap:18px;align-items:center}
.rail .tok{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:40px;color:var(--muted);box-shadow:inset 0 0 0 3px rgba(20,27,60,.14)}
.rail .tok.done{background:var(--ink);color:var(--paper);box-shadow:none}
.rail .tok.cur{background:var(--spark);color:var(--ink);box-shadow:none;transform:scale(1.12)}
.rail .who{margin-left:26px;font-size:32px;font-weight:700;color:var(--muted)}
.big-letter{position:absolute;left:96px;top:190px;font-family:var(--serif);font-weight:700;font-size:600px;line-height:.9;font-variation-settings:"opsz" 144,"SOFT" 30;color:var(--ink)}
.big-letter .g{position:absolute;right:-40px;top:40px;width:110px;height:110px}
.slide.active .big-letter .g svg{animation:ignite .8s var(--ease) .3s backwards}
.sp-q{position:absolute;left:700px;top:230px;width:1100px}
.sp-q .kicker{margin-bottom:22px}
.sp-q .h-m{font-size:80px}
.sp-a{position:absolute;left:700px;top:600px;width:1100px;padding:40px 48px 44px;display:flex;gap:32px;align-items:flex-start}
.sp-a .av{flex:none;width:110px;height:110px;border-radius:50%;overflow:hidden;background:var(--sky-soft);position:relative}
.sp-a .av svg{position:absolute;left:-8%;top:-2%;width:116%;height:116%}
.sp-a .txt{font-size:44px;line-height:1.3;font-weight:600}
.sp-a .txt .ln{display:block;clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease)}
.sp-a.on .txt .ln{clip-path:inset(0 0 0 0)}
.sp-a.on .txt .ln:nth-child(2){transition-delay:.35s}
.sp-a.on .txt .ln:nth-child(3){transition-delay:.7s}
.sp-a .lab{font-size:26px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin-bottom:10px}

/* ---------- slide 11: the engine ---------- */
#s-engine .head{position:absolute;left:120px;top:84px;font-size:80px}
#s-engine .head .out{color:var(--deep)}
.feed{position:absolute;left:120px;width:400px;height:104px;border-radius:24px;background:#fff;display:flex;align-items:center;gap:22px;padding:0 24px;box-shadow:0 18px 40px -26px rgba(20,27,60,.4),0 0 0 1px rgba(20,27,60,.07);font-size:34px;font-weight:700}
.feed .chip{width:64px;height:64px;border-radius:18px;background:var(--ink);color:var(--paper);font-size:38px;flex:none}
.feed .fly{position:absolute;left:24px;top:20px;z-index:6;opacity:0}
@keyframes flyChip{
  0%{opacity:1;transform:none}
  55%{opacity:1;transform:translate(calc(var(--dx) * .55),calc(var(--dy) * .55 - 90px)) scale(1.12) rotate(-8deg)}
  92%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(.94)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.94)}
}
#s-engine .fed .feed .fly{animation:flyChip .85s cubic-bezier(.45,0,.25,1) backwards;animation-delay:var(--fd)}
@keyframes cardUsed{to{opacity:.4}}
#s-engine .fed .feed{animation:cardUsed .4s var(--ease) forwards;animation-delay:calc(var(--fd) + 300ms)}
.engine{position:absolute;left:780px;top:340px;width:420px;height:420px}
.engine svg{width:100%;height:100%;overflow:visible}
.engine .ring-outer{fill:#fff;stroke:var(--ink);stroke-width:5}
.engine .ring-dash{fill:none;stroke:var(--sky);stroke-width:6;stroke-dasharray:4 18;stroke-linecap:round}
.engine .slot text{font-family:var(--serif);font-weight:700;font-size:34px;fill:var(--muted);text-anchor:middle;dominant-baseline:central;transition:fill .3s}
.engine .slot circle{fill:var(--paper);stroke:rgba(20,27,60,.18);stroke-width:3;transition:fill .3s,stroke .3s}
.engine .spin{transform-origin:210px 210px}
.engine .core{transform-origin:210px 210px;transform:scale(.45);opacity:.35}
.engine .halo{transform-origin:210px 210px;opacity:0}
#s-engine .fed .engine .spin{animation:spin 1.2s cubic-bezier(.6,0,.2,1) 1.35s both}
@keyframes spin{to{transform:rotate(360deg)}}
#s-engine .fed .engine .core{animation:coreOn .6s var(--ease) 2s both}
@keyframes coreOn{from{transform:scale(.45);opacity:.35}60%{transform:scale(1.25);opacity:1}to{transform:scale(1);opacity:1}}
#s-engine .fed .engine .halo{animation:halo 1.1s var(--ease) 2.1s both}
@keyframes halo{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
#s-engine .fed .engine .slot circle{animation:slotOn .3s var(--ease) both;animation-delay:var(--sd)}
@keyframes slotOn{to{fill:var(--spark);stroke:var(--spark)}}
#s-engine .fed .engine .slot text{animation:slotTx .3s var(--ease) both;animation-delay:var(--sd)}
@keyframes slotTx{to{fill:var(--ink)}}
.engine-label{position:absolute;left:780px;width:420px;top:790px;text-align:center;font-size:34px;font-weight:700;color:var(--muted)}
.traveler{position:absolute;left:990px;top:550px;width:80px;height:80px;margin:-40px 0 0 -40px;opacity:0}
#s-engine .fed .traveler{animation:travel .7s cubic-bezier(.45,0,.2,1) 2.4s both}
@keyframes travel{0%{opacity:1;transform:translate(0,0) scale(.6)}50%{opacity:1;transform:translate(295px,-150px) scale(1.1)}100%{opacity:0;transform:translate(590px,0) scale(.4)}}
#s-engine .phone{left:1390px;top:190px;background:transparent;box-shadow:none;transition:background .01s}
#s-engine .phone::before{opacity:0}
#s-engine .phone .outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#s-engine .phone .outline rect{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:10 12;opacity:.3}
#s-engine .phone .screen{opacity:0;background:var(--paper)}
#s-engine .fed .phone .outline rect{animation:outlineOn .6s var(--ease) 2.9s both}
@keyframes outlineOn{to{stroke-dasharray:3000 0;opacity:1;stroke-width:14;stroke:var(--ink)}}
#s-engine .fed .phone .screen{animation:fadeInF .4s var(--ease) 3.1s both}
@keyframes fadeInF{from{opacity:0}to{opacity:1}}
#s-engine .fed .phone{animation:phoneBody .01s linear 3.3s both}
@keyframes phoneBody{to{background:var(--ink);box-shadow:0 40px 80px -30px rgba(20,27,60,.45),0 0 0 2px rgba(20,27,60,.9)}}
#s-engine .fed .phone::before{animation:fadeInF .3s linear 3.3s both}
#s-engine .part{opacity:0}
#s-engine .fed .part{animation:partIn .55s var(--ease) both;animation-delay:var(--pd)}
@keyframes partIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
#s-engine .result{position:absolute;left:1330px;width:500px;top:992px;text-align:center;font-size:36px;font-weight:800;opacity:0}
#s-engine .fed .result{animation:partIn .6s var(--ease) 4.8s both}
#s-engine .head .out{opacity:0}
#s-engine .fed .head .out{animation:partIn .6s var(--ease) 4.7s both}

/* ---------- video ---------- */
.vid-head{position:absolute;left:192px;right:192px;top:60px;display:flex;align-items:baseline;gap:28px}
.vid-head .h-s{font-size:56px}
.vid-wrap{position:absolute;left:192px;top:170px;width:1536px;height:864px;border-radius:24px;overflow:hidden;background:#0B1030;box-shadow:0 0 0 2px rgba(251,247,239,.08)}
.vid-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vid-play{position:absolute;left:50%;top:50%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;background:var(--spark);display:grid;place-items:center;box-shadow:0 20px 60px -10px rgba(0,0,0,.5);transition:opacity .3s var(--ease),transform .3s var(--ease);cursor:pointer;z-index:4}
.vid-play svg{width:74px;height:74px;margin-left:12px}
.vid-wrap.playing .vid-play{opacity:0;transform:scale(.8);pointer-events:none}
.vid-hint{position:absolute;left:50%;top:calc(50% + 120px);transform:translateX(-50%);font-size:28px;font-weight:700;color:rgba(251,247,239,.75);z-index:4;transition:opacity .3s;white-space:nowrap}
.vid-wrap.playing .vid-hint{opacity:0}
.vid-bar{position:absolute;left:0;bottom:0;height:6px;background:var(--spark);width:0;z-index:5;opacity:.9}
.vid-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:
  repeating-linear-gradient(135deg,rgba(109,178,226,.06) 0 22px,transparent 22px 44px),#0E1436;z-index:2;text-align:center}
.vid-ph .tagline{font-size:28px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--spark)}
.vid-ph .fname{font-family:ui-monospace,Menlo,monospace;font-size:38px;color:var(--paper)}
.vid-ph .what{font-size:34px;color:rgba(251,247,239,.7);max-width:1000px;line-height:1.4}
.vid-wrap.ready .vid-ph{display:none}
.vid-wrap:not(.ready) .vid-play{top:auto;bottom:60px;margin-top:0;width:120px;height:120px;margin-left:-60px}
.vid-wrap:not(.ready) .vid-play svg{width:48px;height:48px;margin-left:8px}
.vid-wrap:not(.ready) .vid-hint{display:none}

/* ---------- question stop ---------- */
.qstop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.qstop .breath{position:relative;width:220px;height:220px;margin-bottom:56px}
.qstop .breath svg{position:absolute;inset:0;width:100%;height:100%}
.qstop .breath .aura{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(247,200,8,.28),rgba(247,200,8,0) 65%)}
.slide.active .breath svg{animation:breathe 5.5s ease-in-out infinite}
.slide.active .breath .aura{animation:aura 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.8) rotate(0)}50%{transform:scale(1.04) rotate(8deg)}}
@keyframes aura{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.qstop .h-l{font-size:150px}
.qstop .sub{margin-top:36px;font-size:44px;color:rgba(251,247,239,.72)}
.qstop .how{margin-top:72px;font-size:34px;font-weight:700;color:var(--sky);display:flex;gap:44px}

/* ---------- slide 14: always-on ---------- */
#s-inside .head{position:absolute;left:120px;top:96px}
#s-inside .head .h-m{font-size:86px}
.feat-grid{position:absolute;left:120px;right:120px;top:345px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.feat{height:250px;border-radius:30px;background:#fff;box-shadow:0 0 0 1px rgba(20,27,60,.07);padding:32px 30px;display:flex;flex-direction:column;justify-content:space-between}
.feat svg{width:84px;height:84px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.feat svg .acc{stroke:var(--spark);stroke-width:5}
.feat svg .accf{fill:var(--spark);stroke:none}
.feat b{font-size:38px;line-height:1.12;font-weight:700;letter-spacing:-.005em}
.chips{position:absolute;left:120px;right:120px;top:918px;display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.chips .lbl{font-size:34px;font-weight:800;margin-right:8px}
.chips span.c{font-size:30px;font-weight:700;padding:14px 24px;border-radius:99px;box-shadow:inset 0 0 0 2px rgba(20,27,60,.18);white-space:nowrap}
.chips span.c.hot{background:var(--spark);box-shadow:none}

/* ---------- slide 15: twist ---------- */
#s-twist .head{position:absolute;left:120px;top:92px;width:1200px}
#s-twist .head .h-m{font-size:84px}
.twist-card{position:absolute;left:120px;top:300px;width:1120px;height:680px;padding:40px;display:flex;gap:40px}
.twist-card .face{position:relative;flex:none;width:360px;height:600px;border-radius:26px;overflow:hidden;background:var(--sky-soft)}
.twist-card .face > div{position:absolute;inset:0;transition:clip-path .9s var(--ease)}
.twist-card .face .k{clip-path:circle(0% at 50% 40%);background:#F2E8F5}
#s-twist[data-step="1"] .face .k,#s-twist[data-step="2"] .face .k{clip-path:circle(120% at 50% 40%)}
.twist-card .face svg{position:absolute;left:0;top:0;width:100%;height:85%}
.twist-card .face .nm{position:absolute;left:28px;bottom:24px;font-family:var(--serif);font-weight:600;font-size:54px}
.rows{flex:1;display:flex;flex-direction:column;gap:16px;justify-content:center}
.row{display:flex;align-items:center;gap:22px;height:100px;border-radius:20px;background:var(--paper);padding:0 22px;perspective:800px}
.row .chip{width:62px;height:62px;border-radius:16px;background:var(--ink);color:var(--paper);font-size:36px;flex:none}
.row .flip{position:relative;flex:1;height:100%}
.row .flip span{position:absolute;left:0;right:0;top:50%;transform-origin:50% 50%;font-size:36px;font-weight:700;line-height:1.1;backface-visibility:hidden;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.row .flip .a{transform:translateY(-50%)}
.row .flip .b{transform:translateY(-50%) rotateX(-90deg);opacity:0;color:var(--plum)}
#s-twist[data-step="1"] .row .flip .a,#s-twist[data-step="2"] .row .flip .a{transform:translateY(-50%) rotateX(90deg);opacity:0}
#s-twist[data-step="1"] .row .flip .b,#s-twist[data-step="2"] .row .flip .b{transform:translateY(-50%);opacity:1}
.row:nth-child(1) .flip span{transition-delay:.1s}
.row:nth-child(2) .flip span{transition-delay:.25s}
.row:nth-child(3) .flip span{transition-delay:.4s}
.row:nth-child(4) .flip span{transition-delay:.55s}
.row:nth-child(5) .flip span{transition-delay:.7s}
#s-twist .phone{left:1400px;top:170px}
#s-twist .phone .app{transition:opacity .6s var(--ease),transform .6s var(--ease)}
#s-twist .phone .app-keisha{opacity:0;transform:translateY(24px)}
#s-twist[data-step="2"] .phone .app-darnell{opacity:0;transform:translateY(-24px)}
#s-twist[data-step="2"] .phone .app-keisha{opacity:1;transform:none;transition-delay:.25s}
#s-twist .ptag{position:absolute;left:1340px;width:500px;top:970px;text-align:center;font-size:34px;font-weight:800}
#s-twist .ptag span{position:absolute;left:0;right:0;transition:opacity .5s var(--ease)}
#s-twist .ptag .k2{opacity:0;color:var(--plum)}
#s-twist[data-step="2"] .ptag .k2{opacity:1}
#s-twist[data-step="2"] .ptag .d2{opacity:0}

/* ---------- slide 18: room ---------- */
#s-room .head{position:absolute;left:120px;top:96px}
#s-room .head .h-m{font-size:86px}
#s-room .roomsub{margin-top:18px}
.qr-card{position:absolute;left:150px;top:390px;width:470px;padding:40px;display:flex;flex-direction:column;align-items:center;gap:22px}
.qr-card .qr svg{display:block;width:380px;height:380px}
.qr-card b{font-size:36px}
.levels-svg{position:absolute;left:620px;top:280px;width:700px;height:740px;overflow:visible}
.levels-svg path{fill:none;stroke:var(--sky);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.levels-svg circle{fill:var(--spark);opacity:0;transition:opacity .3s 1s}
.levels-svg.on path{stroke-dashoffset:0}
.levels-svg.on path:nth-of-type(2){transition-delay:.15s}
.levels-svg.on path:nth-of-type(3){transition-delay:.3s}
.levels-svg.on circle{opacity:1}
.lvl{position:absolute;left:1310px;height:220px;display:flex;align-items:center;gap:34px}
.lvl .mini{width:132px;height:220px;border-radius:24px;background:var(--ink);padding:7px;flex:none}
.lvl .mini .scr{width:100%;height:100%;border-radius:18px;background:var(--paper);padding:24px 10px 10px;display:flex;flex-direction:column;gap:7px}
.lvl .mini .scr b{font-size:10px;font-weight:800;color:var(--deep);letter-spacing:.06em;text-transform:uppercase}
.lvl .mini .scr p{font-family:var(--serif);font-weight:600;font-size:13px;line-height:1.2}
.lvl .mini .scr i{display:block;height:22px;border-radius:9px;border:2px solid rgba(20,27,60,.14);background:#fff}
.lvl .t{font-size:44px;font-weight:800;line-height:1.1}
.lvl .t small{display:block;font-size:34px;font-weight:600;color:var(--muted);margin-top:6px}
.lvl .t .n{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--sky-soft);color:var(--deep);font-size:32px;margin-right:14px;vertical-align:middle}
.lvl.l2 .t .n{background:var(--sky);color:#fff}
.lvl.l3 .t .n{background:var(--deep);color:#fff}

/* ---------- slide 19: learner test ---------- */
#s-test .head{position:absolute;left:120px;top:92px}
#s-test .head .h-m{font-size:86px}
.checklist{position:absolute;left:120px;top:300px;width:1680px;display:grid;grid-template-columns:1fr 1fr;column-gap:80px;row-gap:26px}
.ck{display:flex;align-items:center;gap:28px;font-size:40px;font-weight:600;line-height:1.2;min-height:100px}
.ck .box{flex:none;width:72px;height:72px;border-radius:20px;box-shadow:inset 0 0 0 3px rgba(20,27,60,.2);position:relative;background:#fff}
.ck .box svg{position:absolute;inset:10px;width:52px;height:52px;overflow:visible}
.ck .box path{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.slide.active .ck .box{animation:boxOn .35s var(--ease) forwards;animation-delay:var(--d)}
@keyframes boxOn{to{background:var(--ok);box-shadow:none}}
.slide.active .ck .box path{animation:tickDraw .45s var(--ease) forwards;animation-delay:calc(var(--d) + 120ms)}
@keyframes tickDraw{to{stroke-dashoffset:0}}
.ck .n{font-family:var(--serif);color:var(--deep);font-weight:700;margin-right:4px}
#s-test .then{position:absolute;left:120px;bottom:90px;font-size:48px}
.quote{position:absolute;left:200px;right:180px;top:320px}
.quote .h-l{font-size:128px;line-height:1.02}
.quote .h-s{margin-top:56px;font-size:64px;color:var(--deep);font-weight:400;font-style:italic}
.quote .g{position:absolute;left:-112px;top:18px;width:74px;height:74px}

/* ---------- slide 20: privacy ---------- */
#s-privacy .head{position:absolute;left:120px;top:96px;width:1700px}
#s-privacy .head .h-l{font-size:112px}
.priv-col{position:absolute;top:360px;width:760px}
.priv-col .kicker{margin-bottom:26px}
.tags{display:flex;flex-wrap:wrap;gap:18px}
.nametag{display:inline-flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 2px rgba(20,27,60,.12)}
.nametag i{font-style:normal;background:var(--deep);color:#fff;font-size:16px;font-weight:800;letter-spacing:.14em;padding:8px 20px;text-transform:uppercase}
.nametag b{font-family:var(--serif);font-weight:600;font-size:50px;padding:12px 22px 16px}
.never{display:flex;flex-direction:column;gap:14px}
.never span{position:relative;align-self:flex-start;font-size:44px;font-weight:700;padding:2px 8px}
.never span::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:5px;border-radius:4px;background:var(--plum);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
#s-privacy[data-step="1"] .never span::after{transform:scaleX(1)}
#s-privacy[data-step="1"] .never span{color:#3A4066}
.never span:nth-child(2)::after{transition-delay:.12s}.never span:nth-child(3)::after{transition-delay:.24s}.never span:nth-child(4)::after{transition-delay:.36s}.never span:nth-child(5)::after{transition-delay:.48s}
.priv-foot{position:absolute;left:120px;right:120px;bottom:80px;display:flex;align-items:center;gap:30px;padding:32px 40px;border-radius:28px;background:var(--ink);color:var(--paper)}
.priv-foot svg{width:64px;height:64px;flex:none;fill:none;stroke:var(--spark);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.priv-foot p{font-size:44px;font-weight:600;line-height:1.25}

/* ---------- slide 21: your turn ---------- */
#s-turn .left{position:absolute;left:120px;top:150px;width:980px}
#s-turn .left .h-xl{font-size:200px}
#s-turn .left .h-m{margin-top:14px;color:var(--deep)}
.steps3{margin-top:70px;display:flex;flex-direction:column;gap:26px}
.steps3 div{display:flex;align-items:center;gap:26px;font-size:42px;font-weight:600}
.steps3 b{flex:none;width:68px;height:68px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--serif);font-size:36px}
.qr-big{position:absolute;left:1180px;top:130px;width:620px;padding:50px 50px 44px;display:flex;flex-direction:column;align-items:center;gap:26px}
.qr-big .qr svg{display:block;width:500px;height:500px}
.qr-big .url{font-size:42px;font-weight:800;letter-spacing:-.01em}
.qr-big .free{font-size:34px;font-weight:600;color:var(--ok)}
.qr-big .g{position:absolute;width:64px;height:64px}

/* ---------- slide 23: thanks ---------- */
#s-thanks .logo{position:absolute;left:120px;top:92px;width:441px}
#s-thanks .big{position:absolute;left:112px;top:250px;font-size:230px}
#s-thanks .who{position:absolute;left:120px;top:585px;font-size:48px;font-weight:700}
#s-thanks .who span{display:block;font-size:40px;font-weight:500;color:var(--muted);margin-top:10px}
#s-thanks .url{position:absolute;left:120px;top:745px;font-size:44px;font-weight:800;color:var(--deep);display:flex;align-items:center;gap:18px}
#s-thanks .url svg{width:40px;height:40px}
#s-thanks .credit{left:120px}
#s-thanks .glint{position:absolute;left:1175px;top:222px;width:120px;height:120px}
#s-thanks .skyline{bottom:100px}
.toast{background:var(--ravens);color:#fff;border-radius:16px;padding:12px 14px;font-weight:700;font-size:16px;line-height:1.3;display:flex;gap:10px;align-items:center}
.toast svg{width:26px;height:26px;flex:none}
.toast.k{background:var(--plum)}
.glint-inline{position:relative;display:inline-block;width:.3em;height:0;vertical-align:baseline}
.glint-inline svg{position:absolute;left:.02em;top:-.86em;width:.3em;height:.3em;overflow:visible}
.tools-wrap{margin-top:auto}.tools-wrap .tools{margin-top:0}
/* title phone + thank-you QR */
#s-title .title-phone{left:1420px;top:150px;transform:rotate(4deg) scale(.86);transform-origin:50% 0}
#s-title .skyline{z-index:0}
#s-title .phone{z-index:2}
.qr-thanks{position:absolute;left:1340px;top:210px;width:460px;padding:36px;display:flex;flex-direction:column;align-items:center;gap:20px;z-index:2}
.qr-thanks .qr svg{display:block;width:358px;height:358px}
.qr-thanks b{font-size:34px;white-space:nowrap}
/* Darnell portrait: name on a clean strip */
#s-darnell .portrait{background:linear-gradient(var(--sky-soft) 0 calc(100% - 180px), #fff 0)}
#s-darnell .portrait svg{height:calc(100% - 180px)}
#s-darnell .pname{bottom:34px}
.priv-note{margin-top:30px;font-size:34px;color:var(--muted)}
/* feedback question stop: calm, one Spark accent (the breathing spark), QR on white */
#s-feedback{flex-direction:row;justify-content:flex-start;align-items:center;text-align:left;padding:0 140px;gap:120px}
#s-feedback .fb-left{flex:1;display:flex;flex-direction:column;align-items:flex-start}
#s-feedback .breath{width:150px;height:150px;margin-bottom:44px}
#s-feedback .h-l{font-size:112px;line-height:1.02}
#s-feedback .sub{margin-top:34px}
#s-feedback .fb-url{margin-top:22px;font-size:44px;font-weight:800;color:var(--paper);letter-spacing:-.005em}
#s-feedback .fb-qr{flex:none;width:520px;padding:40px;border-radius:34px}
#s-feedback .fb-qr .qr svg{display:block;width:440px;height:440px}
/* ---------- how every app teaches ---------- */
#s-teach .head{position:absolute;left:120px;top:96px}
#s-teach .head .h-m{font-size:86px}
#s-teach .track{position:absolute;left:120px;top:318px;width:1680px;height:40px;overflow:visible}
#s-teach .rail-bg{stroke:rgba(20,27,60,.12);stroke-width:4;stroke-linecap:round}
#s-teach .rail-on{stroke:var(--sky);stroke-width:4;stroke-linecap:round;stroke-dasharray:4;stroke-dashoffset:4;transition:stroke-dashoffset .7s var(--ease)}
#s-teach[data-step="2"] .rail-on{stroke-dashoffset:3}
#s-teach[data-step="3"] .rail-on{stroke-dashoffset:2}
#s-teach[data-step="4"] .rail-on{stroke-dashoffset:1}
#s-teach[data-step="5"] .rail-on,#s-teach[data-step="6"] .rail-on{stroke-dashoffset:0}
#s-teach .nodes circle{fill:var(--paper);stroke:rgba(20,27,60,.18);stroke-width:4;transition:fill .4s var(--ease) .3s,stroke .4s var(--ease) .3s}
#s-teach[data-step="1"] .nodes circle:nth-child(-n+1),#s-teach[data-step="2"] .nodes circle:nth-child(-n+2),#s-teach[data-step="3"] .nodes circle:nth-child(-n+3),#s-teach[data-step="4"] .nodes circle:nth-child(-n+4),#s-teach[data-step="5"] .nodes circle,#s-teach[data-step="6"] .nodes circle{fill:var(--ink);stroke:var(--ink)}
#s-teach .tracker{position:absolute;top:304px;left:276.8px;width:68px;height:68px;margin-left:-34px;opacity:0;transition:left .7s var(--ease),opacity .4s var(--ease)}
#s-teach .tracker svg{width:100%;height:100%}
#s-teach:not([data-step="0"]) .tracker{opacity:1}
#s-teach[data-step="2"] .tracker{left:618.4px}
#s-teach[data-step="3"] .tracker{left:960px}
#s-teach[data-step="4"] .tracker{left:1301.6px}
#s-teach[data-step="5"] .tracker,#s-teach[data-step="6"] .tracker{left:1643.2px}
.beats{position:absolute;left:120px;right:120px;top:394px;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.beat{position:relative;height:450px;border-radius:30px;padding:34px 30px;background:transparent;box-shadow:inset 0 0 0 3px rgba(20,27,60,.1);display:flex;flex-direction:column;gap:16px;transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.beat > *{flex:none}
.beat .n{font-family:var(--serif);font-weight:700;font-size:34px;color:rgba(20,27,60,.3);transition:color .5s}
.beat svg{width:64px;height:64px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.beat b{font-family:var(--serif);font-weight:600;font-size:54px;line-height:1;letter-spacing:-.01em}
.beat p{font-size:34px;line-height:1.3;font-weight:600;color:var(--ink-2)}
.beat svg,.beat b,.beat p{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.beat.lit{background:#fff;box-shadow:0 24px 50px -34px rgba(20,27,60,.4),0 0 0 1px rgba(20,27,60,.06)}
.beat.lit .n{color:var(--deep)}
.beat.lit svg,.beat.lit b,.beat.lit p{opacity:1;transform:none}
.beat.lit b{transition-delay:.08s}.beat.lit p{transition-delay:.16s}
.teach-line{position:absolute;left:0;right:0;top:880px;text-align:center;font-size:66px;font-weight:600;letter-spacing:-.01em}
#s-turn .qr-big .free{text-align:center;line-height:1.3}
/* ---------- the need ---------- */
#s-needs .head,#s-diy .head{position:absolute;left:120px;top:96px}
.needs{position:absolute;left:120px;right:120px;top:340px;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.need{display:flex;align-items:center;gap:30px;height:210px;padding:0 36px;border-radius:30px;background:#fff;box-shadow:0 24px 50px -36px rgba(20,27,60,.4),0 0 0 1px rgba(20,27,60,.06);font-size:45px;font-weight:600;line-height:1.15;white-space:nowrap}
.need .ic{flex:none;width:96px;height:96px;border-radius:28px;background:var(--sky-soft);display:grid;place-items:center}
.need .ic svg{width:58px;height:58px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.need em{font-style:normal;color:var(--deep)}
.needs-line{position:absolute;left:0;right:0;top:880px;text-align:center;font-size:66px;font-weight:600;letter-spacing:-.01em}
/* ---------- the DIY stack ---------- */
.stack-wrap{position:absolute;inset:0}
.stack-wrap.off{opacity:.09;transform:none;filter:grayscale(1) blur(1.5px)}
.stack{position:absolute;left:290px;top:0;width:1400px;height:1080px;transform-origin:0 1020px;transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
#s-diy[data-step="1"] .stack{transform:rotate(0.32deg)}
#s-diy[data-step="2"] .stack{transform:rotate(0.64deg)}
#s-diy[data-step="3"] .stack{transform:rotate(0.96deg)}
#s-diy[data-step="4"] .stack{transform:rotate(1.28deg)}
#s-diy[data-step="5"] .stack{transform:rotate(1.60deg)}
#s-diy[data-step="6"] .stack{transform:rotate(1.92deg)}
#s-diy[data-step="7"] .stack{transform:rotate(2.24deg)}
#s-diy[data-step="8"] .stack{transform:rotate(2.56deg)}
#s-diy[data-step="9"] .stack{transform:rotate(2.88deg)}
#s-diy[data-step="10"] .stack{transform:rotate(2.88deg)}
.dcard{position:absolute;height:74px;display:flex;align-items:center;gap:20px;padding:0 28px 0 12px;border-radius:18px;background:#fff;box-shadow:0 10px 24px -16px rgba(20,27,60,.45),0 0 0 1px rgba(20,27,60,.08);font-size:34px;font-weight:600;white-space:nowrap;transform:rotate(var(--r))}
.dcard .num{flex:none;width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:28px}
.dcard svg{flex:none;width:40px;height:40px;fill:none;stroke:var(--deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dcard .sub{color:var(--muted);font-weight:500}
.dcard[data-b]{opacity:0;transform:translateY(-60px) rotate(calc(var(--r) * -4));transition:opacity .35s var(--ease),transform .55s cubic-bezier(.34,1.56,.64,1)}
.dcard[data-b].on{opacity:1;transform:rotate(var(--r))}
.diy-line{position:absolute;left:0;right:0;top:500px;text-shadow:0 0 40px var(--paper),0 0 20px var(--paper);text-align:center;font-size:84px;font-weight:600;line-height:1.08;letter-spacing:-.015em}
/* ---------- what if the hard part was done ---------- */
.done-head{position:absolute;left:0;right:0;top:130px;text-align:center;font-size:92px;color:var(--paper)}
.collapse i{position:absolute;width:460px;height:24px;border-radius:8px;background:rgba(251,247,239,.85);opacity:0}
@keyframes collapse{0%{opacity:.85;transform:none}35%{opacity:.85;transform:none}100%{opacity:0;transform:translate(var(--tox),var(--toc)) scale(.02,.2)}}
.slide.active .collapse i{animation:collapse .9s cubic-bezier(.6,0,.3,1) both;animation-delay:calc(250ms + (8 - var(--i)) * 45ms)}
.done-spark{position:absolute;left:870px;top:380px;width:180px;height:180px}
.done-spark svg{position:absolute;inset:0;width:100%;height:100%}
.done-spark .halo{position:absolute;inset:-60px;border-radius:50%;background:radial-gradient(circle,rgba(247,200,8,.35),rgba(247,200,8,0) 65%)}
.slide.active .done-spark svg{animation:ignite .8s var(--ease) 1.05s backwards}
.slide.active .done-spark .halo{animation:fadeIn 1s var(--ease) 1.15s backwards}
.done-line{position:absolute;left:0;right:0;top:640px;text-align:center;font-size:50px;font-weight:600;line-height:1.3;color:rgba(251,247,239,.85)}
.done-line span{color:var(--paper)}
.done-letters{position:absolute;left:0;right:0;top:850px;display:flex;justify-content:center;gap:26px}
.done-letters span{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:48px;color:var(--paper);box-shadow:inset 0 0 0 3px rgba(251,247,239,.35);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.done-letters.on span{opacity:1;transform:none}
.done-letters.on span:nth-child(2){transition-delay:.08s}.done-letters.on span:nth-child(3){transition-delay:.16s}.done-letters.on span:nth-child(4){transition-delay:.24s}.done-letters.on span:nth-child(5){transition-delay:.32s}
.done-letters[data-b]{opacity:1;transform:none}
/* ---------- the proof build-up: one worksheet card that becomes an app ---------- */
.proof .pleft{position:absolute;left:120px;top:100px;width:1030px}
.proof .pleft .h-m{margin-top:18px;font-size:80px}
.pfind{margin-top:40px}
.pbig{display:flex;align-items:baseline;gap:26px}
.pbig .num{font-family:var(--serif);font-weight:600;font-size:150px;line-height:1;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.pbig .num.small{font-size:108px}
.pbig .num em{font-style:italic;font-weight:400;font-size:.5em;color:var(--muted);margin:0 .1em}
.pbig .unit{font-size:34px;font-weight:700;color:var(--muted);line-height:1.2}
.pbig.col{flex-direction:column;align-items:flex-start;gap:10px}
.pbig .num.mid{font-size:80px;line-height:1.04}
.pbig .unit.top{color:var(--deep);letter-spacing:.02em}
.pbars{margin-top:30px;width:960px}
.pb{display:grid;grid-template-columns:350px 1fr 130px;align-items:center;gap:20px;font-size:34px;font-weight:700;margin-bottom:12px}
.pb .pt{height:34px;border-radius:10px;background:rgba(20,27,60,.07);overflow:hidden}
.pb .pt i{display:block;height:100%;width:0;border-radius:10px;background:var(--deep);transition:width 1.1s var(--ease) .35s}
.pfind.on .pb .pt i{width:calc(var(--v) * 1%)}
.pb.dim{color:var(--muted)}
.pb.dim .pt i{background:rgba(20,27,60,.28)}
.pb b{font-family:var(--serif);font-size:40px;font-weight:600;text-align:right}
.pcap{font-size:32px;color:var(--muted);font-style:italic;margin-top:2px}
.pbeat{margin-top:30px;font-size:38px;line-height:1.32;font-weight:600;max-width:1000px}
.fineprint{position:absolute;left:120px;bottom:38px;max-width:1080px;font-size:22px;line-height:1.35;font-weight:500;color:var(--muted);opacity:.85}
.fineprint[data-b]:not(.on){opacity:0}
/* bell curve */
svg.bell{display:block;width:900px;height:190px;margin-top:26px;overflow:visible}
svg.bell .curve{fill:none;stroke:var(--ink);stroke-width:3;opacity:.55}
svg.bell .area{fill:var(--sky-soft);stroke:none}
svg.bell .axis{stroke:rgba(20,27,60,.25);stroke-width:2}
svg.bell .mk line{stroke:rgba(20,27,60,.35);stroke-width:2;stroke-dasharray:6 6}
svg.bell .mk text{font:700 28px var(--sans);fill:var(--muted);text-anchor:middle}
svg.bell .m75{opacity:0;transition:opacity .5s var(--ease) 1.2s}
svg.bell .m75 line{stroke:var(--deep);stroke-dasharray:none;stroke-width:3}
svg.bell .m75 text{fill:var(--deep)}
svg.bell .dot{fill:var(--deep);transition:transform 1.1s var(--ease) .5s}
.pfind.on svg.bell .m75{opacity:1}
.pfind.on svg.bell .dot{transform:translateX(var(--dx))}
/* words vs words + picture */
.wvp{display:flex;align-items:flex-start;gap:30px;margin-top:30px;height:180px}
.wvp .mini{position:relative;width:230px;height:108px;border-radius:14px;background:#fff;box-shadow:0 12px 26px -18px rgba(20,27,60,.4),0 0 0 1px rgba(20,27,60,.08);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.wvp .mini i{display:block;height:9px;border-radius:5px;background:rgba(20,27,60,.18)}
.wvp .mini i.s{width:60%}
.wvp .mini svg{width:100%;height:34px;fill:none;stroke:var(--ink);stroke-width:2}
.wvp .mini svg .f{fill:rgba(109,178,226,.55);stroke:none}
.wvp .mini span{position:absolute;left:0;right:0;top:118px;text-align:center;font-size:28px;font-weight:700;color:var(--muted)}
.wvp .mini.pic span{color:var(--deep)}
.wvp b{font-family:var(--serif);font-size:64px;color:var(--muted);font-weight:400;line-height:108px}
/* P5 */
.p5list{margin-top:40px}
.p5list p{font-family:var(--serif);font-weight:600;font-size:84px;line-height:1.08;letter-spacing:-.015em}
.p5list.dim.off{opacity:.2}
.p5kick{margin-top:44px}
.p5kick{width:1180px}
.p5kick .a{font-family:var(--serif);font-weight:600;font-size:58px;line-height:1.12}
.p5kick .b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:56px;line-height:1.15;color:var(--deep);margin-top:14px}
.pphone{position:absolute;left:1330px;top:150px;width:380px;height:780px;border-radius:58px;border:14px solid var(--ink);background:var(--paper);box-shadow:0 40px 80px -30px rgba(20,27,60,.45);z-index:2}
.pphone::before{content:"";position:absolute;top:12px;left:50%;width:108px;height:30px;border-radius:20px;background:var(--ink);transform:translateX(-50%)}
@keyframes phoneIn{from{opacity:0;transform:scale(1.05)}}
.slide.active .pphone{animation:phoneIn .8s var(--ease) .75s backwards}
/* the card */
.wc{position:absolute;left:1240px;top:110px;width:560px;height:880px;padding:40px;border-radius:30px;background-color:#fff;overflow:hidden;z-index:3;color:var(--ink);font-family:var(--sans);
  box-shadow:0 30px 60px -36px rgba(20,27,60,.4),0 0 0 1px rgba(20,27,60,.06);transform-origin:0 0;
  transition:transform 1.1s var(--ease),height 1.1s var(--ease),border-radius .6s var(--ease),background-color .6s var(--ease),color .6s}
.wc::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 58px,rgba(20,27,60,.07) 58px 60px);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.wc[data-state="0"]{border-radius:8px;background-color:#F2F0EA;color:#50556A}
.wc[data-state="0"]::before{opacity:1}
.wc[data-state="5"]{height:790px;border-radius:40px;transform:translate(104px,183px) scale(.629)}
.wc-head{position:relative;height:36px}
.wc .hh{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;opacity:0;transition:opacity .35s var(--ease)}
.wc .hh.vis{opacity:1;transition-delay:.35s}
.wc .hh em{font-style:normal;font-weight:600;margin-left:auto;font-family:"Courier New",monospace;font-size:20px}
.wc .hh:first-child{font-family:"Courier New",monospace;font-size:22px}
.wc .hh.hh-app{color:var(--ink)}
.wc .hh svg{width:24px;height:24px;fill:var(--spark)}
.wc .blk{position:relative;overflow:hidden;max-height:0;opacity:0;margin-top:0;transition:max-height .55s var(--ease),opacity .3s var(--ease),margin-top .55s var(--ease)}
.wc .blk.vis{max-height:var(--mh,160px);opacity:1;margin-top:18px;transition:max-height .6s var(--ease) .25s,opacity .5s var(--ease) .45s,margin-top .6s var(--ease) .25s}
.wc .li,.wc .blank{font-family:"Courier New",monospace;font-size:26px;font-weight:700;line-height:48px;--mh:60px}
.wc .blank{color:#7A7F92}
.wc-q{position:relative;margin-top:18px;height:176px;transition:height .6s var(--ease) .2s}
.wc[data-state="0"] .wc-q{height:118px}
.wc-q p{position:absolute;left:0;right:0;top:0;margin:0}
.wc-q .qa0{font-family:"Courier New",monospace;font-size:26px;font-weight:700;line-height:1.45;top:6px}
.wc-q .qa1,.wc-q .qb{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.2;letter-spacing:-.01em;font-variation-settings:"opsz" 72}
.wc-q p span{display:inline-block;opacity:0;transform:translateY(-12px);filter:blur(3px);transition:opacity .28s var(--ease),transform .28s var(--ease),filter .28s;transition-delay:calc(var(--w) * 18ms)}
.wc-q p.vis span{opacity:1;transform:none;filter:none;transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s;transition-delay:calc(.28s + var(--w) * 48ms)}
.wc[data-state="1"] .wc-q p.vis span{transition-delay:calc(.35s + var(--w) * 12ms)}
.wc .pic{--mh:120px}
.wc .pic svg{display:block;width:100%;height:96px;overflow:visible}
.wc .pic rect{fill:#fff;stroke:var(--ink);stroke-width:2}
.wc .pic rect.f{fill:var(--sky)}
.wc .pic text{font:800 26px var(--sans);fill:var(--ink)}
.wc .pic text.eq{font-size:30px}
.wc .ans3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;--mh:92px}
.wc .an{position:relative;height:72px;border-radius:16px;border:2px solid rgba(20,27,60,.14);background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:28px;transition:background-color .4s,border-color .4s,color .4s}
.wc .an .u{display:inline-grid;font-size:20px;font-weight:700;color:var(--muted)}
.wc .an .u>span{grid-area:1/1;opacity:0;transition:opacity .3s}
.wc .an .u>span.vis{opacity:1;transition-delay:.45s}
.wc .an.good{border-color:var(--ok);background-color:#E6F3EC;color:#1E6B4E}
.wc .an.miss{border-color:var(--sky);border-style:dashed;background-color:#F1F7FC}
.wc[data-state="1"] .an.good{transition-delay:1.5s}
.wc[data-state="4"] .an.good{transition-delay:1.4s}
.wc[data-state="3"] .an.miss{transition-delay:.9s}
.wc .an::after{content:"";position:absolute;inset:-7px;border-radius:21px;border:3px solid var(--sky);opacity:0;pointer-events:none}
@keyframes tapRing{0%{opacity:0;transform:scale(.85)}30%{opacity:.9}100%{opacity:0;transform:scale(1.12)}}
.wc[data-state="1"] .a1::after{animation:tapRing .7s var(--ease) 1.2s both}
.wc[data-state="3"] .a2::after{animation:tapRing .7s var(--ease) .6s both}
.wc[data-state="4"] .a1::after{animation:tapRing .7s var(--ease) 1.1s both}
.wc .fb{display:flex;align-items:center;gap:12px;border-radius:16px;padding:14px 18px;font-weight:700;font-size:22px;line-height:1.35;--mh:110px}
.wc .fb svg{flex:none;width:28px;height:28px}
.wc .fb.ok{background:#E6F3EC;color:#1E6B4E}
.wc .fb.fd{background:var(--ravens);color:#fff}
.wc .fb.hint{background:var(--sky-soft);color:var(--deep)}
.wc .fb.hint svg{fill:none;stroke:var(--deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wc[data-state="1"] .fb.vis,.wc[data-state="3"] .fb.vis{transition-delay:1.75s,1.9s,1.75s}
.wc[data-state="2"] .fb.vis{transition-delay:1.6s,1.8s,1.6s}
.wc[data-state="4"] .fb.vis{transition-delay:1.6s,1.8s,1.6s}
.wc .lv{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;font-size:18px;font-weight:700;color:var(--muted);--mh:80px}
.wc .lv .track{position:relative;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--sky-soft),rgba(53,94,159,.35))}
.wc .lv .m{position:absolute;top:50%;left:72%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 4px #fff}
@keyframes lvm{0%{left:50%}35%{left:26%}60%{left:26%}100%{left:72%}}
.wc[data-state="3"] .lv .m{animation:lvm 2s var(--ease) 2.2s both}
.wc .lv .ends{display:flex;justify-content:space-between;font-size:15px;font-weight:700}
.wc .lv .ends em{font-style:normal}
.wc .tools2{display:flex;gap:10px;--mh:70px}
.wc .tools2 .t{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--sky-soft);color:var(--deep);font-size:18px;font-weight:700;transition:background-color .5s,color .5s}
.wc .tools2 svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wc .wave{display:inline-flex;align-items:center;gap:3px;height:20px;margin-left:4px}
.wc .wave i{display:block;width:3px;height:4px;border-radius:2px;background:currentColor;opacity:.6}
@keyframes wv{0%,100%{height:4px}50%{height:18px}}
.wc:is([data-state="4"],[data-state="5"]) .read{background:var(--deep);color:#fff;transition-delay:1s}
.wc:is([data-state="4"],[data-state="5"]) .wave i{animation:wv 1s ease-in-out infinite;animation-delay:calc(var(--k) * 110ms)}
.pbig .plus{font-family:var(--sans);font-weight:800;font-size:.8em;vertical-align:.04em;color:var(--deep)}