.lesson-shell{max-width:var(--card-max);padding:0 var(--gutter) 140px;margin:0 auto}.progress{height:var(--progress-h);background:var(--color-surface-2);z-index:30;position:fixed;inset:0 0 auto}.progress-fill{background:var(--color-primary);background-image:var(--brand-gradient);border-radius:0 var(--radius-pill) var(--radius-pill) 0;width:0;height:100%;box-shadow:0 0 12px var(--brand-glow);transition:width var(--dur-ui) var(--ease-out);position:relative;overflow:hidden}.progress-fill:after{content:"";background:linear-gradient(90deg, transparent, var(--shine), transparent);position:absolute;inset:0;transform:translate(-100%)}@media (prefers-reduced-motion:no-preference){:root:not([data-calm=true]) .progress-fill.is-bump:after{animation:shine .7s var(--ease-out) 1}}@keyframes shine{to{transform:translate(100%)}}.lesson-bar{top:var(--progress-h);z-index:25;justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--topbar-h);background:var(--color-bg);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);border-bottom:1px solid var(--color-border);display:flex;position:sticky}.lesson-map{align-items:center;gap:var(--space-1);min-height:var(--tap);font-size:var(--text-s);font-weight:var(--weight-bold);padding-right:var(--space-2);text-decoration:none;display:inline-flex}.lesson-map span{white-space:nowrap}@media (width<=420px){.lesson-map span{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}}.lesson-count{line-height:1.3;font-size:var(--text-s);color:var(--color-text-muted);text-align:center;flex:1;margin:0}.lesson-head{margin:var(--space-5) 0 var(--space-4)}.lesson-head h1{margin-bottom:var(--space-1)}.lesson-world{font-size:var(--text-s);font-weight:var(--weight-bold);color:var(--brand-ink);margin:0}.lesson-summary{color:var(--color-text-muted);margin:0}.lesson-note{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--color-text-muted)}.player .lesson-card{display:none}.player .lesson-card.is-active{animation:card-in var(--dur-ui) var(--ease-out);display:block}.player[data-dir=forward] .lesson-card.is-active{animation-name:card-in-forward}.player[data-dir=back] .lesson-card.is-active{animation-name:card-in-back}@keyframes card-in-forward{0%{opacity:0;transform:translate(32px)}to{opacity:1;transform:none}}@keyframes card-in-back{0%{opacity:0;transform:translate(-32px)}to{opacity:1;transform:none}}@keyframes card-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.lesson-card{--card-accent:var(--brand-a);background:var(--color-surface);border:1px solid var(--color-border);border-top:5px solid var(--card-accent);border-radius:var(--radius-l);box-shadow:var(--color-shadow);padding:var(--space-4) var(--space-4) var(--space-3);outline:none}.lesson-card:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}@media (width>=560px){.lesson-card{padding:var(--space-5) var(--space-6) var(--space-4)}}.card-step{align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);display:inline-flex}.card-step-icon{background:var(--color-surface-2);width:28px;height:28px;color:var(--color-text);letter-spacing:0;border-radius:50%;place-items:center;font-size:.85rem;display:inline-grid}.lesson-card[data-card-type=hook]{--card-accent:var(--step-hook)}.lesson-card[data-card-type=see]{--card-accent:var(--step-see)}.lesson-card[data-card-type=try]{--card-accent:var(--step-try)}.lesson-card[data-card-type=predict]{--card-accent:var(--step-predict)}.lesson-card[data-card-type=check]{--card-accent:var(--step-check)}.lesson-card[data-card-type=win]{--card-accent:var(--step-win)}.step-hook{background:var(--step-hook-soft);color:var(--step-hook-ink)}.step-see{background:var(--step-see-soft);color:var(--step-see-ink)}.step-try{background:var(--step-try-soft);color:var(--step-try-ink)}.step-predict{background:var(--step-predict-soft);color:var(--step-predict-ink)}.step-check{background:var(--step-check-soft);color:var(--step-check-ink)}@media (prefers-reduced-motion:no-preference){:root:not([data-calm=true]) .player .lesson-card.is-active .card-step-icon{animation:badge-pop .48s var(--ease-out) .12s backwards}}@keyframes badge-pop{0%{transform:scale(.4)rotate(-20deg)}60%{transform:scale(1.18)rotate(6deg)}}.step-win{background:var(--c-staging-soft);color:var(--c-staging-ink)}.card-content>:last-child{margin-bottom:0}.card-content p{font-size:var(--text-l);line-height:1.5}.card-content .interactive{margin-bottom:var(--space-4)}.card-content .interactive p,.card-content .interactive .feedback{font-size:var(--text-m)}.card-hint{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);background:var(--c-head-soft);color:var(--c-head-ink)}.card-content .card-hint p{font-size:var(--text-m);margin:0}.card-content .card-hint .card-hint-title{font-weight:var(--weight-bold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em}.peek-panel{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);border:2px dashed var(--color-border-strong);background:var(--color-surface-2)}.peek-title{margin:0 0 var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.peek-body>:last-child{margin-bottom:0}.peek-hint{font-size:var(--text-s);color:var(--color-text-muted)}.win-extras{margin-top:var(--space-4);text-align:center}.win-burst{width:96px;height:96px;color:var(--deco-staging);place-items:center;display:inline-grid;position:relative}.win-burst .icon{animation:star-pop .7s var(--ease-out) 1;fill:var(--c-staging-soft)}@keyframes star-pop{0%{opacity:0;transform:scale(.2)rotate(-30deg)}70%{opacity:1;transform:scale(1.15)rotate(4deg)}to{transform:scale(1)}}.confetti{opacity:0;border-radius:2px;width:8px;height:12px;animation:.9s ease-out forwards confetti;position:absolute;top:40px;left:44px}.confetti.c0{background:var(--deco-working);--x:-60px;--y:-40px}.confetti.c1{background:var(--deco-staging);--x:60px;--y:-44px}.confetti.c2{background:var(--deco-repo);--x:-40px;--y:40px}.confetti.c3{background:var(--deco-head);--x:46px;--y:36px}.confetti.c4{background:var(--deco-remote);--x:0;--y:-60px}.confetti.c5{background:var(--deco-working);--x:-70px;--y:6px}.confetti.c6{background:var(--deco-staging);--x:72px;--y:4px}.confetti.c7{background:var(--deco-repo);--x:24px;--y:-58px}.confetti.c8{background:var(--deco-head);--x:-24px;--y:58px}.confetti.c9{background:var(--deco-remote);--x:30px;--y:56px}@keyframes confetti{0%{opacity:1;transform:translate(0)rotate(0)}to{opacity:0;transform:translate(var(--x), var(--y)) rotate(160deg)}}@media (prefers-reduced-motion:reduce){.confetti{display:none}}.win-xp{font-size:var(--text-xl);font-weight:var(--weight-bold);margin:var(--space-2) auto}.win-badges{margin:0 0 var(--space-4);padding:0;list-style:none}.win-badge{margin:var(--space-1);padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);background:var(--c-staging-soft);color:var(--c-staging-ink);font-weight:var(--weight-bold);display:inline-block}.vote{border:1px solid var(--color-border);border-radius:var(--radius-m);padding:var(--space-3) var(--space-4);margin:0 auto var(--space-5);max-width:30rem}.vote legend{font-weight:var(--weight-bold);padding-inline:var(--space-2)}.vote-options{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.vote-btn{min-height:var(--tap);font-size:var(--text-s)}.vote-btn[aria-pressed=true]{background:var(--color-primary);color:var(--color-primary-text)}.vote-thanks{margin:var(--space-2) auto 0;font-size:var(--text-s)}.win-links{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.win-docs{margin:var(--space-4) auto 0;font-size:var(--text-s)}.deeper{margin-top:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-m);padding:var(--space-2) var(--space-4);background:var(--color-surface)}.deeper summary{cursor:pointer;font-weight:var(--weight-bold);min-height:var(--tap);align-items:center;display:flex}.deeper-body{padding-bottom:var(--space-3)}.controls{z-index:25;background:var(--color-bg);border-top:1px solid var(--color-border);padding:var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom));position:fixed;inset:auto 0 0}.controls-inner{max-width:var(--card-max);align-items:center;gap:var(--space-2);margin:0 auto;display:flex}.controls-mascot{flex:none;margin-right:auto}.ctl-back{padding-inline:var(--space-3);flex:none}.ctl-small{padding-inline:var(--space-2);font-size:var(--text-s);flex:none;line-height:1.2}.ctl-next{flex:none;min-width:8.5rem}.ctl-next.is-ready{animation:next-ready .7s var(--ease-out) 1;box-shadow:0 0 0 4px var(--brand-soft), 0 8px 22px var(--brand-glow)}@media (prefers-reduced-motion:no-preference){:root:not([data-calm=true]) .ctl-next.is-ready .icon{animation:nudge .6s var(--ease-out) 3}}@keyframes nudge{50%{transform:translate(5px)}}@keyframes next-ready{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@media (width<=480px){.ctl-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.controls-mascot svg{width:40px;height:40px}.ctl-next{min-width:0;padding-inline:var(--space-3);font-size:var(--text-m);flex:auto}.controls-inner{gap:var(--space-1)}.controls-mascot{margin-right:0}}.term-wrap{position:relative}.term-btn{font:inherit;color:inherit;text-underline-offset:.2em;cursor:help;background:0 0;border:0;padding:0;text-decoration:underline 2px dotted}.term-pop{max-width:18rem;padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);box-shadow:var(--color-shadow);font-size:var(--text-s);margin:0;line-height:1.5}.choice-list{margin:0 0 var(--space-2);gap:var(--space-2);padding:0;list-style:none;display:grid}.choice-compact{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}.choice-btn{align-items:center;gap:var(--space-3);text-align:left;width:100%;min-height:52px;padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);border-radius:var(--radius-m);border:2px solid var(--color-border-strong);background:var(--color-surface);cursor:pointer;transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);display:flex}.choice-btn:hover:not(:disabled){border-color:var(--color-focus)}.choice-btn:active:not(:disabled){transform:scale(.99)}.choice-btn:disabled{opacity:.6;cursor:default}.choice-mark{background:var(--color-surface-2);width:32px;height:32px;font-weight:var(--weight-bold);border-radius:50%;flex:none;place-items:center;display:grid}.choice-btn.is-right{border-color:var(--color-success);background:var(--color-success-soft)}.choice-btn.is-right .choice-mark{background:var(--color-success);color:var(--color-surface)}.choice-btn.is-almost{border-color:var(--color-kind);background:var(--color-kind-soft)}.choice-reveal{margin-top:var(--space-4)}.choice-reveal-label{font-weight:var(--weight-bold);margin-bottom:var(--space-2)}.replay{background:var(--term-bg);color:var(--term-fg);border-radius:var(--radius-m);padding:var(--space-3) var(--space-4);font-family:var(--font-mono);margin:0 0 var(--space-3);white-space:pre;font-size:.9rem;line-height:1.5;overflow-x:auto}.replay-cmd{color:var(--term-fg)}.replay-prompt{color:var(--term-green)}.seg-red{color:var(--term-red)}.seg-green{color:var(--term-green)}.seg-yellow{color:var(--term-yellow)}.seg-blue{color:var(--term-blue)}.seg-magenta{color:var(--term-magenta)}.seg-cyan{color:var(--term-cyan)}.seg-bold{font-weight:700}.seg-dim{color:var(--term-muted)}.replay.is-pulse .seg-red,.replay.is-pulse .seg-green{border-radius:4px;animation:.9s ease-in-out seg-pulse}@keyframes seg-pulse{0%,to{background:0 0}50%{background:var(--term-key-bg-hover)}}.replay-line{min-height:1.5em;display:block}.replay-hidden{visibility:hidden}