body:has(.quiz-stage) .topbar,body:has(.quiz-stage) .footer,body:has(.player-question) .topbar,body:has(.player-question) .footer,body:has(.player-reveal) .topbar,body:has(.player-reveal) .footer{display:none}
body:has(.quiz-stage) #app,body:has(.player-question) #app,body:has(.player-reveal) #app{min-height:100svh}
.quiz-stage{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:20px;padding:28px clamp(24px,4vw,70px) 28px;max-width:1900px;margin:auto;overflow:hidden}
.stage-rail{display:flex;align-items:center;gap:28px;height:47px;color:var(--lime)}
.stage-step{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.05em;white-space:nowrap}.stage-step small{font-size:15px;color:#798874;letter-spacing:0}
.stage-progress{height:2px;background:#374733;flex:1}.stage-progress i{display:block;height:100%;background:var(--lime)}
.stage-timer{font-size:10px;letter-spacing:.16em;font-weight:700;white-space:nowrap;position:relative;min-width:74px;text-align:right;color:var(--muted)}.stage-timer strong{color:var(--lime);font-family:var(--display);font-size:30px;letter-spacing:-.06em;margin-right:3px}.stage-timer-fill{position:absolute;bottom:-9px;right:0;height:3px;width:var(--time,100%);background:var(--lime);transition:width .1s linear}
.stage-rail-end{font-size:11px;letter-spacing:.17em;font-weight:700;white-space:nowrap}
.stage-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.95fr);gap:clamp(35px,5vw,100px);align-items:center;min-height:0}
.stage-copy{min-width:0}.stage-copy h1{font-family:var(--display);font-size:clamp(48px,4.35vw,82px);letter-spacing:-.075em;line-height:.99;margin:0 0 clamp(30px,4vw,56px);max-width:930px}
.stage-options{display:grid;grid-template-columns:1fr 1fr;gap:11px;max-width:880px}.stage-option{display:flex;align-items:center;gap:14px;min-height:82px;padding:15px 16px;border:1px solid #415141;background:#172017;font-size:clamp(14px,1.04vw,18px);line-height:1.25;font-weight:600}.stage-option b,.lesson-answer b{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;background:var(--lime);color:var(--bg);font-family:var(--display);font-size:17px}.stage-option:nth-child(2) b{background:var(--orange)}.stage-option:nth-child(3) b{background:#95c9df}.stage-option:nth-child(4) b{background:#c7a9e8}
.stage-scene{width:100%;height:min(66vh,670px);min-height:360px;display:grid;place-items:center}.lesson-scene{width:100%;height:100%;display:grid;place-items:center}.lesson-scene svg{width:100%;max-height:100%;overflow:visible}
.stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:22px;border-top:1px solid #364434;padding-top:15px;font-size:10px;letter-spacing:.18em;color:#8a9985;font-weight:700}.stage-action{border:0;background:var(--lime);color:var(--bg);font-size:12px;letter-spacing:.11em;font-weight:700;display:flex;align-items:center;gap:35px;padding:12px 13px 12px 19px;min-height:52px}.stage-action span{display:grid;place-items:center;background:var(--bg);color:var(--lime);width:33px;height:33px;font-size:22px;font-weight:400}.stage-action:hover{background:#eaff9f}
.lesson-kicker{display:block;color:var(--orange);font-size:11px;letter-spacing:.18em;font-weight:700;margin-bottom:23px}.reveal-stage .stage-copy h1{margin-bottom:22px}.lesson-fact{font-size:clamp(20px,1.8vw,31px);line-height:1.35;color:#c2cfc0;max-width:790px;margin-bottom:32px}.lesson-answer{display:flex;align-items:center;gap:16px;font-size:clamp(15px,1.17vw,20px);font-weight:700;line-height:1.3;color:var(--lime);max-width:780px}.lesson-answer b{background:var(--lime);font-size:20px;width:42px;height:42px;flex-basis:42px}.reveal-stage .stage-scene{filter:saturate(1.16)}
.player-question,.player-reveal{min-height:100svh;padding:27px 22px 40px;max-width:640px;margin:auto;display:flex;flex-direction:column}.player-rail{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-bottom:1px solid #3c4e37;padding-bottom:13px;color:var(--lime);font-size:11px;font-weight:700;letter-spacing:.15em}.player-rail .stage-timer strong{font-size:26px}.player-question h1,.player-reveal h1{font-family:var(--display);font-size:clamp(39px,10vw,67px);line-height:.99;letter-spacing:-.07em;margin:53px 0 31px}.player-options{display:grid;gap:10px}.player-option{display:flex;align-items:center;gap:15px;width:100%;min-height:73px;padding:13px;text-align:left;border:1px solid #53654e;background:#1b2619;color:var(--fg);font-size:15px;line-height:1.3;font-weight:600}.player-option b{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;background:var(--lime);color:var(--bg);font-family:var(--display);font-size:18px}.player-option:nth-child(2) b{background:var(--orange)}.player-option:nth-child(3) b{background:#95c9df}.player-option:nth-child(4) b{background:#c7a9e8}.player-option:not(:disabled):hover{border-color:var(--lime);background:#2c3d26}.player-option.chosen{border-color:var(--lime);background:#30462a}.player-option:disabled{cursor:default}.player-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:24px;color:#8fa18a;font-size:10px;font-weight:700;letter-spacing:.1em}.player-reveal .lesson-kicker{margin-top:56px}.player-reveal h1{margin:0 0 25px}.player-reveal .lesson-fact{font-size:19px}.player-reveal .lesson-answer{margin-top:12px}.wait-next{margin-top:auto;padding-top:50px;color:#82957d;font-size:11px;letter-spacing:.15em;font-weight:700}

/* The same compact drawing language is used for ten different mechanisms. */
.lesson-scene svg text{font-family:var(--display)}.scene-label{fill:#9daE99;font-size:15px;font-weight:700;letter-spacing:.16em}.centered{text-anchor:middle}.scene-reveal-label{fill:var(--lime);font-size:15px;font-weight:700;letter-spacing:.08em;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}.is-explained .scene-reveal-label{opacity:1;transform:translateY(0)}
.lesson-scene-1 .tube{fill:none;stroke:#6d806c;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}.lesson-scene-1 .bowl{fill:#19251c;stroke:#7a9178;stroke-width:6}.lesson-scene-1 .water{fill:#234c4a;stroke:#75d1c1;stroke-width:4;animation:water-breathe 3s ease-in-out infinite}.lesson-scene-1 .flow{fill:none;stroke:var(--orange);stroke-width:9;stroke-linecap:round;stroke-dasharray:13 25;animation:flow 1.8s linear infinite}.lesson-scene-1 .flow-out{animation-direction:reverse}.lesson-scene-1 .pollutant{fill:var(--orange);filter:drop-shadow(0 0 10px var(--orange));animation:float-up 2.3s ease-in-out infinite}.lesson-scene-1 .pollutant-b{animation-delay:-.8s}.lesson-scene-1 .pollutant-c{animation-delay:-1.5s}.scene-word{fill:#a9e1d8;font-size:23px;font-weight:700;text-anchor:middle;letter-spacing:.08em}
.lesson-scene-2 .flavor-halo{fill:none;stroke:#5a7053;stroke-width:3;stroke-dasharray:8 13;animation:spin-svg 20s linear infinite;transform-origin:300px 265px}.lesson-scene-2 .flavor-core{fill:var(--lime)}.core-word{fill:var(--bg);font-size:30px;font-weight:700;text-anchor:middle;letter-spacing:.04em}.lesson-scene-2 .fruit-slice{transform-origin:300px 265px;animation:fruit-turn 11s ease-in-out infinite;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}.lesson-scene-2 .fruit-slice circle:first-child{fill:var(--orange);stroke:#ffc19c;stroke-width:5}.lesson-scene-2 .fruit-slice circle:nth-child(2){fill:none;stroke:#ffd1ad;stroke-width:8}.lesson-scene-2 .fruit-slice path{fill:none;stroke:#ffd1ad;stroke-width:6}.lesson-scene-2.is-explained .fruit-slice{transform:translate(-115px,105px) rotate(-24deg) scale(.67);opacity:.85;animation:none}
.lesson-scene-3 .blood-track{stroke:#54302c;stroke-width:105;fill:none;stroke-linecap:round}.lesson-scene-3 .blood-cell{fill:#9b4136;stroke:#ff8a6a;stroke-width:5;animation:cell-pulse 3.2s ease-in-out infinite;transform-origin:305px 270px}.lesson-scene-3 .blood-cell-inner{fill:#632923}.oxygen{fill:#bfe5eb;stroke:#e3fcff;stroke-width:3;animation:oxygen-drift 4s ease-in-out infinite}.oxygen-two{animation-delay:-2s}.carbon{fill:var(--orange);stroke:#ffd0bd;stroke-width:3;animation:carbon-drift 3s ease-in-out infinite}.carbon-two{animation-delay:-1.2s}.molecule-label{fill:var(--bg);text-anchor:middle;font-size:25px;font-weight:700}.molecule-label.small{font-size:19px}.lesson-scene-3.is-explained .carbon-one{filter:drop-shadow(0 0 15px var(--orange));animation:carbon-lock 1s ease-out forwards}.lesson-scene-3.is-explained .oxygen-one{opacity:.35;transform:translateX(-30px);animation:none}
.lesson-scene-4 .brain-outline{fill:#1b2b1d;stroke:#95b68c;stroke-width:7}.neural-lines path{fill:none;stroke:#6c9c66;stroke-width:6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw-neuron 4s ease-in-out infinite}.neuron{fill:var(--lime);filter:drop-shadow(0 0 10px var(--lime));animation:neuron-pulse 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}.n2,.n5{animation-delay:.35s}.n3,.n6{animation-delay:.7s}.n4,.n7{animation-delay:1.05s}.signal{fill:none;stroke:var(--orange);stroke-width:4;transform-origin:337px 273px;animation:signal-pulse 2.4s ease-out infinite}.lesson-scene-4.is-explained .signal{stroke-width:8}
.lesson-scene-5 .habit-track{fill:none;stroke:#789772;stroke-width:11;stroke-dasharray:19 10;animation:dash-ring 7s linear infinite;transform-origin:300px 261px}.lesson-scene-5 .habit-inner{fill:#243222;stroke:#60725c;stroke-width:2}.habit-wheel{transform-origin:300px 261px;animation:spin-svg 9s linear infinite}.habit-dot{fill:var(--orange);filter:drop-shadow(0 0 12px var(--orange))}.habit-dot.two{fill:var(--lime);filter:drop-shadow(0 0 12px var(--lime))}.habit-dot.three{fill:#b8d6a8}.scene-core-number{fill:var(--lime);font-size:74px;font-weight:700;letter-spacing:-.08em;text-anchor:middle}.lesson-scene-5.is-explained .habit-wheel{animation-duration:4s}
.lesson-scene-6 .stress-axis{fill:none;stroke:#667a61;stroke-width:4}.lesson-scene-6 .stress-line{fill:none;stroke:var(--orange);stroke-width:10;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw-stress 5s ease-in-out infinite}.lesson-scene-6 .relief-drop{fill:none;stroke:var(--lime);stroke-width:11;stroke-linecap:round;opacity:.8}.lesson-scene-6 .relief-marker{fill:var(--lime);animation:marker-pulse 2s ease-in-out infinite;transform-origin:302px 369px}.lesson-scene-6.is-explained .stress-line{stroke-dashoffset:0;animation:none}
.lesson-scene-7 .body-outline{fill:#1d2b1c;stroke:#73916e;stroke-width:6}.lesson-scene-7 .airway{fill:none;stroke:var(--orange);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}.lesson-scene-7 .lung{fill:#335540;stroke:#96d59e;stroke-width:5;animation:lung-breathe 3.5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}.lesson-scene-7 .heart{fill:var(--orange);animation:heart-beat 1.1s ease-in-out infinite;transform-origin:center;transform-box:fill-box}.body-particle{fill:var(--orange);animation:body-flow 3s ease-in-out infinite}.body-particle.p2{animation-delay:-1s}.body-particle.p3{animation-delay:-2s}.lesson-scene-7.is-explained .lung,.lesson-scene-7.is-explained .heart{filter:drop-shadow(0 0 12px var(--orange))}
.lesson-scene-8 .crowd-field{fill:#758b70;opacity:.35;transition:opacity .7s}.lesson-scene-8 .crowd-lens{fill:#1e2b1e;stroke:var(--lime);stroke-width:6;stroke-dasharray:15 8;animation:lens-breathe 4s ease-in-out infinite;transform-origin:300px 251px;transition:transform .7s,opacity .7s}.crowd-focus{fill:var(--orange);filter:drop-shadow(0 0 10px var(--orange));animation:neuron-pulse 2s ease-in-out infinite}.crowd-focus.f2{animation-delay:.3s}.crowd-focus.f3{animation-delay:.6s}.lesson-scene-8.is-explained .crowd-lens{transform:scale(1.9);opacity:.18;animation:none}.lesson-scene-8.is-explained .crowd-field{opacity:.85}.lesson-scene-8.is-explained .crowd-focus{opacity:.3}
.lesson-scene-9 .law-frame{fill:#1b2b1a;stroke:#78936f;stroke-width:7}.lesson-scene-9 .age-number{fill:var(--lime);font-size:260px;font-weight:700;text-anchor:middle;letter-spacing:-.12em;animation:age-appear 2.8s ease-in-out infinite}.lesson-scene-9 .age-bar{fill:none;stroke:var(--orange);stroke-width:18;stroke-linecap:round;stroke-dasharray:360;stroke-dashoffset:360;animation:age-scan 3s ease-in-out infinite}.lesson-scene-9 .age-stop{fill:var(--orange);animation:marker-pulse 2.5s ease-in-out infinite;transform-origin:300px 423px}.lesson-scene-9.is-explained .age-bar{stroke-dashoffset:0;animation:none}
.lesson-scene-10 .offer-bubble{fill:#30402e;stroke:#799174;stroke-width:5;animation:offer-float 4s ease-in-out infinite}.lesson-scene-10 .offer-text{fill:var(--fg);font-size:27px;font-weight:700;text-anchor:middle}.lesson-scene-10 .reply-bubble{fill:var(--lime);animation:reply-appear 4s ease-in-out infinite;transform-origin:370px 365px}.lesson-scene-10 .reply-text{fill:var(--bg);font-size:43px;font-weight:700;text-anchor:middle;letter-spacing:-.05em}.lesson-scene-10.is-explained .reply-bubble{filter:drop-shadow(0 0 22px rgba(216,255,91,.35));animation:none}.lesson-scene-10.is-explained .offer-bubble{opacity:.45;animation:none}

@keyframes flow{to{stroke-dashoffset:-38}}@keyframes water-breathe{50%{transform:translateY(4px)}}@keyframes float-up{50%{transform:translateY(-18px);opacity:.6}}@keyframes spin-svg{to{transform:rotate(360deg)}}@keyframes fruit-turn{50%{transform:rotate(12deg)}}@keyframes cell-pulse{50%{transform:scale(1.04)}}@keyframes oxygen-drift{50%{transform:translate(28px,-8px)}}@keyframes carbon-drift{50%{transform:translate(-38px,8px)}}@keyframes carbon-lock{to{transform:translate(-85px,0)}}@keyframes draw-neuron{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}@keyframes neuron-pulse{50%{transform:scale(1.35);opacity:.7}}@keyframes signal-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.5);opacity:0}}@keyframes dash-ring{to{stroke-dashoffset:-58}}@keyframes draw-stress{55%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-900}}@keyframes marker-pulse{50%{transform:scale(1.35)}}@keyframes lung-breathe{50%{transform:scale(1.06)}}@keyframes heart-beat{25%,55%{transform:scale(1.13)}}@keyframes body-flow{50%{transform:translateY(33px);opacity:.55}}@keyframes lens-breathe{50%{transform:scale(1.08)}}@keyframes age-appear{50%{opacity:.65}}@keyframes age-scan{50%,80%{stroke-dashoffset:0}}@keyframes offer-float{50%{transform:translateY(-9px)}}@keyframes reply-appear{0%,15%{transform:translateY(50px) scale(.82);opacity:0}35%,85%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(6px);opacity:.9}}

@media(max-width:1000px){.stage-layout{grid-template-columns:1fr minmax(280px,.8fr);gap:20px}.stage-copy h1{font-size:clamp(42px,5.5vw,60px)}.stage-option{min-height:76px;font-size:14px;padding:10px}.stage-scene{height:min(58vh,540px);min-height:280px}}
@media(max-width:720px){.quiz-stage{padding:20px 18px;gap:13px}.stage-rail{gap:15px}.stage-step{font-size:22px}.stage-step small{font-size:12px}.stage-layout{display:flex;flex-direction:column;align-items:stretch;gap:5px}.stage-copy h1{font-size:clamp(37px,9vw,60px);margin:17px 0 20px}.stage-scene{order:-1;height:clamp(185px,40vh,350px);min-height:0}.stage-options{gap:6px}.stage-option{min-height:56px;padding:8px;font-size:11px;gap:7px}.stage-option b{width:24px;height:24px;flex-basis:24px;font-size:12px}.stage-bottom{font-size:8px}.stage-action{font-size:9px;gap:8px;padding:8px}.stage-action span{width:27px;height:27px;font-size:18px}.reveal-stage .stage-copy h1{margin-bottom:15px}.lesson-fact{font-size:17px;margin-bottom:18px}.lesson-answer{font-size:13px}.reveal-stage .stage-scene{height:clamp(180px,36vh,320px)}}
@media(prefers-reduced-motion:reduce){.lesson-scene *,.stage-timer-fill{animation:none!important;transition:none!important}.scene-reveal-label{transform:none!important}}
.molecule-label{stroke:none}.lesson-scene-8 .crowd-field{fill:url(#people)}
.lesson-scene-10 .reply-bubble{animation:none}.lesson-scene-10 .reply-group{transform-origin:370px 365px;animation:reply-in .8s cubic-bezier(.2,.8,.2,1) .35s both}.lesson-scene-10.is-explained .reply-group{animation:none}
@keyframes reply-in{from{transform:translateY(50px) scale(.82);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.lesson-scene-9 .age-number{letter-spacing:0}