:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#241f3a;background:#edeaf6}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}.shell{min-height:100vh;background:radial-gradient(circle at 86% 17%,#d6d0ff 0,transparent 34%),linear-gradient(130deg,#f8f7fc,#e7e4f4)}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid #8b66ed;outline-offset:4px}.topbar{height:80px;padding:0 clamp(22px,4vw,70px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9d4e9}.brand{text-decoration:none;color:#26213c;font-size:24px;font-weight:850;letter-spacing:-1.3px;display:flex;align-items:center;gap:5px}.brand span:last-child{font-size:14px;font-weight:600;letter-spacing:0;color:#6f6590;margin-left:4px}.brand img{display:block;width:33px;height:33px;margin-right:6px}.top-note{font-size:13px;color:#71698a;font-weight:650}.choose-screen{max-width:1450px;margin:auto;min-height:calc(100vh - 80px);padding:clamp(30px,5vw,80px);display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(30px,5vw,100px)}.eyebrow{font-size:12px;font-weight:850;letter-spacing:.19em;color:#7256be}.intro h1,.done-screen h1{font-size:clamp(44px,5.8vw,92px);letter-spacing:-.065em;line-height:1.02;margin:20px 0 26px}.intro h1 em{font-style:normal;color:#8051d9}.intro>p:not(.eyebrow){font-size:clamp(18px,1.4vw,23px);line-height:1.55;color:#5b5570;max-width:520px}.intro-small{font-size:15px!important;color:#897ca1!important}.tutor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.tutor-card{min-width:0;text-align:left;border:2px solid #ded8ed;background:#fff;border-radius:28px;overflow:hidden;padding:0;box-shadow:0 22px 50px #3d2b6b16;transition:transform .2s,border-color .2s}.tutor-card:hover,.tutor-card:focus-visible{transform:translateY(-6px);border-color:#9272e8}.portrait{height:clamp(230px,30vw,420px);background:#e9e1f8;position:relative;overflow:hidden}.portrait img{height:130%;width:100%;object-fit:cover;object-position:center top;position:absolute;left:0;top:0;mix-blend-mode:multiply}.tutor-card .label{padding:18px 22px 22px;display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:800}.tutor-card .label small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#795fc3}.lesson-screen{max-width:1600px;margin:auto;padding:22px clamp(18px,3vw,54px) 14px}.lesson-head{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:18px}.text-button{border:0;background:transparent;color:#4e426e;font-weight:750;padding:10px}.progress{flex:1;max-width:550px;font-size:13px;color:#695e80;text-align:center;font-weight:750}.track{height:8px;border-radius:20px;background:#d9d2e9;margin-top:8px;overflow:hidden}.track i{display:block;height:100%;width:0;background:#8860dd;border-radius:20px;transition:width .3s}.stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr);gap:22px;min-height:min(690px,74vh)}.canvas-card{position:relative;background:#fff;border:1px solid #e5e0ef;border-radius:28px;padding:clamp(24px,4vw,62px);box-shadow:0 20px 50px #392d6512;display:flex;flex-direction:column}.card-top{display:flex;justify-content:space-between;gap:20px;color:#8365d1;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:850}.canvas-card h2{font-size:clamp(30px,3.3vw,54px);line-height:1.1;letter-spacing:-.055em;margin:25px 0 15px}.math-visual{flex:1;min-height:180px;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,34px)}.pie{width:clamp(130px,17vw,250px);aspect-ratio:1;border-radius:50%;border:8px solid #fff;box-shadow:0 8px 25px #52428022}.pie.half{background:conic-gradient(#9769e7 0 50%,#eee8f9 50% 100%)}.pie.quarter{background:conic-gradient(#9769e7 0 25%,#eee8f9 25% 50%,#d4beeF 50% 75%,#eee8f9 75% 100%)}.pie-label{font-size:clamp(36px,4vw,70px);font-weight:850;color:#6941b2}.screen-copy{font-size:clamp(20px,2.1vw,30px);font-weight:700;line-height:1.35;color:#51436d;margin:12px 0 26px}.question-prompt{font-size:clamp(22px,2.4vw,36px);font-weight:750;line-height:1.27;max-width:850px}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:auto}.answer{border:2px solid #d6cce9;background:#f9f6ff;border-radius:16px;color:#33244f;font-size:clamp(18px,1.5vw,25px);font-weight:800;padding:20px;text-align:left}.answer:hover,.answer:focus-visible{border-color:#815dd0;background:#f0e9ff}.answer.selected{border-color:#7857ca;background:#eee5ff}.feedback{min-height:30px;font-size:18px;font-weight:700;margin:18px 0 5px}.feedback.good{color:#227a59}.feedback.retry{color:#a65036}.next-button{align-self:flex-start;background:#28213e;color:#fff;border:0;border-radius:14px;padding:16px 30px;font-weight:800;font-size:18px}.next-button:hover{background:#6543ae}.next-button[hidden]{display:none}.tutor-stage{position:relative;border-radius:28px;background:#d2c8ed;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;min-height:500px}.tutor-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,#f4edff,#cabde9 75%)}#avatar-canvas,#avatar-still{position:absolute;height:88%;width:100%;object-fit:contain;object-position:center bottom;bottom:0;left:0}#avatar-canvas{z-index:2}#avatar-still{z-index:1;mix-blend-mode:multiply}#avatar-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.tutor-caption{position:absolute;z-index:3;left:18px;right:18px;bottom:20px;background:#ffffffea;backdrop-filter:blur(12px);border-radius:16px;padding:14px;display:grid;gap:3px;font-size:13px;color:#64577d}.tutor-caption strong{font-size:17px;color:#29213f}.replay-button{position:absolute;z-index:4;top:18px;right:18px;background:#fffdf4e8;border:0;border-radius:20px;font-size:12px;font-weight:800;padding:9px 13px}.key-hint{text-align:center;color:#827894;font-size:13px}.done-screen{max-width:950px;margin:12vh auto;text-align:center;padding:40px}.done-screen p:not(.eyebrow){font-size:21px;color:#5b5270}.done-screen .next-button{margin:20px auto}@media(max-width:900px){.choose-screen{grid-template-columns:1fr}.stage{grid-template-columns:1fr}.tutor-stage{min-height:360px;order:-1}.tutor-stage #avatar-canvas,.tutor-stage #avatar-still{height:100%}.canvas-card{min-height:470px}.top-note{display:none}}@media(max-width:560px){.tutor-options{gap:10px}.portrait{height:215px}.tutor-card .label{padding:12px;font-size:16px;display:block}.tutor-card .label small{display:block;margin-top:4px}.lesson-head{gap:4px}.text-button{font-size:12px}.tutor-stage{min-height:310px}.answers{grid-template-columns:1fr}}

/* On large screens the keyed avatar stands over the lesson canvas. */
@media(min-width:901px){.stage{display:block;position:relative}.canvas-card{min-height:min(690px,74vh);padding-right:34%}.tutor-stage{position:absolute;z-index:2;right:22px;bottom:0;width:29%;height:88%;min-height:0;background:transparent;overflow:visible;pointer-events:none}.tutor-stage:before{display:none}.tutor-stage #avatar-canvas{height:100%}.tutor-stage .tutor-caption{bottom:10px;left:0;right:0}.tutor-stage .replay-button{pointer-events:auto;top:0;right:0}.canvas-card .answers{grid-template-columns:1fr 1fr}}
@media(min-width:901px){.canvas-card{overflow:hidden}.tutor-stage{height:100%;overflow:hidden}.tutor-stage #avatar-canvas{height:calc(100% - 110px);bottom:110px}.tutor-stage .tutor-caption{bottom:0;left:0;right:0;min-height:108px}.tutor-stage .replay-button{top:16px;right:16px}}
.tutor-caption.full-script{max-height:60%;overflow-y:auto;font-size:14px;line-height:1.45}
.celebration{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}.celebration span{position:absolute;left:calc(50% + var(--x));bottom:53%;font-size:clamp(15px,2.3vw,30px);line-height:1;color:var(--color);opacity:0;animation:celebrate-star 4.8s ease-out forwards}@keyframes celebrate-star{0%{opacity:0;transform:translate(-50%,20px) scale(.2) rotate(-20deg)}12%{opacity:1;transform:translate(-50%,-24px) scale(1) rotate(0)}70%{opacity:1;transform:translate(-50%,calc(-55px - var(--y))) scale(1.05) rotate(20deg)}100%{opacity:0;transform:translate(-50%,calc(-95px - var(--y))) scale(.55) rotate(35deg)}}
.canvas-card .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}.answer{display:flex;align-items:center;gap:14px;min-height:76px;border:2px solid #ded8e5;background:#fbf9fe;border-radius:14px;color:#241f3a;font-size:clamp(18px,1.5vw,23px);padding:14px 20px}.answer-letter{color:#aa80f3;font-size:1.15em;font-weight:900;min-width:28px}.answer:hover,.answer:focus-visible{border-color:#d9f56f;background:#fff;outline:2px solid #d9f56f;outline-offset:0}.answer.selected{border-color:#b99dff;background:#ede5ff}.answer.selected:focus-visible{border-color:#d9f56f}
@media(max-width:560px){.canvas-card .answers{grid-template-columns:1fr}}
/* Pizza slices make equal shares concrete for young students. */
.pizza-svg{width:clamp(150px,18vw,260px);height:auto;overflow:visible;flex:none}
.pizza-slice{transform-box:fill-box;transform-origin:center}
.pizza-svg.ready .pizza-slice{animation:none}
.pizza-label,.pizza-compare{font-size:clamp(25px,3vw,45px);font-weight:850;color:#6941b2;white-space:nowrap}
@media(max-width:560px){.pizza-svg{width:clamp(125px,33vw,175px)}.pizza-label{font-size:22px}}
@media(min-width:901px){.choose-screen{padding:clamp(20px,3vw,48px)}.portrait{height:clamp(170px,19vw,270px)}}
/* Tutor choice stays in one compact, image-led view. */
.choose-screen{display:block;min-height:auto;padding:clamp(18px,3vw,40px)!important}
.choose-screen .intro h1{font-size:clamp(28px,3vw,43px);line-height:1.1;margin:0 0 22px}
.tutor-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.5vw,20px)}
.tutor-card{border-radius:20px}
.tutor-card .portrait{height:clamp(165px,20vw,280px)}
.tutor-card .label{padding:10px 16px 14px;font-size:18px}
@media(max-width:900px){.tutor-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tutor-card .portrait{height:clamp(145px,42vw,215px)}.tutor-card .label{font-size:16px;padding:9px 12px 12px}}

/* Match the Fire TV pizza timing, independent of avatar video autoplay. */
.pizza-cut{stroke:#fff;stroke-width:0;stroke-linecap:round;opacity:0}
.math-visual.animate .pizza-cut{animation:pizza-cut-appear 1.3s 3s ease-in-out forwards,pizza-cut-fade .2s 4.3s ease-out forwards}
@keyframes pizza-cut-appear{from{stroke-width:0;opacity:1}to{stroke-width:3.3;opacity:1}}
@keyframes pizza-cut-fade{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.math-visual.animate .pizza-cut{animation:none}}

/* Explicit SVG transforms also work in browsers that omit custom properties on <g>. */
.math-visual.animate .pizza-svg.parts-2 .pizza-slice:nth-child(1){animation:pizza-right 1.5s 4.3s ease-in-out forwards}
.math-visual.animate .pizza-svg.parts-2 .pizza-slice:nth-child(2){animation:pizza-left 1.5s 4.3s ease-in-out forwards}
.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(1){animation:pizza-up-right 1.5s 4.3s ease-in-out forwards}
.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(2){animation:pizza-down-right 1.5s 4.3s ease-in-out forwards}
.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(3){animation:pizza-down-left 1.5s 4.3s ease-in-out forwards}
.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(4){animation:pizza-up-left 1.5s 4.3s ease-in-out forwards}
.pizza-svg.ready.parts-2 .pizza-slice:nth-child(1){transform:translate(8.5px,0)}
.pizza-svg.ready.parts-2 .pizza-slice:nth-child(2){transform:translate(-8.5px,0)}
.pizza-svg.ready.parts-4 .pizza-slice:nth-child(1){transform:translate(6px,-6px)}
.pizza-svg.ready.parts-4 .pizza-slice:nth-child(2){transform:translate(6px,6px)}
.pizza-svg.ready.parts-4 .pizza-slice:nth-child(3){transform:translate(-6px,6px)}
.pizza-svg.ready.parts-4 .pizza-slice:nth-child(4){transform:translate(-6px,-6px)}
.pizza-svg.ready .pizza-slice.muted{opacity:.35}
@keyframes pizza-right{to{transform:translate(8.5px,0)}}
@keyframes pizza-left{to{transform:translate(-8.5px,0)}}
@keyframes pizza-up-right{to{transform:translate(6px,-6px)}}
@keyframes pizza-down-right{to{transform:translate(6px,6px)}}
@keyframes pizza-down-left{to{transform:translate(-6px,6px)}}
@keyframes pizza-up-left{to{transform:translate(-6px,-6px)}}
@media(prefers-reduced-motion:reduce){.math-visual.animate .pizza-svg .pizza-slice{animation:none}.math-visual.animate .pizza-svg.parts-2 .pizza-slice:nth-child(1){transform:translate(8.5px,0)}.math-visual.animate .pizza-svg.parts-2 .pizza-slice:nth-child(2){transform:translate(-8.5px,0)}.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(1){transform:translate(6px,-6px)}.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(2){transform:translate(6px,6px)}.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(3){transform:translate(-6px,6px)}.math-visual.animate .pizza-svg.parts-4 .pizza-slice:nth-child(4){transform:translate(-6px,-6px)}}

/* Keep the 384×480 renders near their native size on web and TV browsers. */
@media(min-width:901px){.tutor-stage #avatar-canvas{width:min(74%,240px);height:min(55%,300px);left:50%;bottom:108px;transform:translateX(-50%)}}
@media(max-width:900px){.tutor-stage #avatar-canvas{width:min(72%,230px);height:min(72%,280px);left:50%;bottom:72px;transform:translateX(-50%)}}

/* ---- Shared player additions (catalog, branching, new visuals) ---- */
.course-head{display:flex;flex-direction:column;gap:4px;margin:0 0 18px}.course-head .eyebrow{margin:0}.course-head h1{margin:0}.course-head .course-meta{font-size:14px;color:#71698a;font-weight:650}
.lesson-head .crumbs{display:flex;gap:6px;align-items:center}
.canvas-card[data-mode="remediate"]{border-color:#c9b6f5;box-shadow:0 20px 50px #6c4dc226}
.canvas-card[data-mode="remediate"] .card-top{color:#6c4dc2}
.canvas-card[data-mode="solution"] .answer.revealed{border-color:#227a59;background:#e6f7ee}
.answer:disabled{cursor:default;opacity:.75}.answer.selected:disabled{opacity:1}
.feedback.note{color:#6d6977}
.canvas-card .answers{margin-top:14px}
[data-mode="question"] .math-visual,[data-mode="solution"] .math-visual{flex:0 0 auto;min-height:0;margin:8px 0 2px;height:140px;justify-content:flex-start;overflow:hidden;gap:10px}
[data-mode="question"] .math-visual svg,[data-mode="solution"] .math-visual svg{height:132px;width:auto;flex:none}
[data-mode="question"] .math-visual .pizza-pair,[data-mode="solution"] .math-visual .pizza-pair,[data-mode="question"] .math-visual .clock-row,[data-mode="solution"] .math-visual .clock-row{height:132px;gap:8px;flex-wrap:nowrap}
[data-mode="question"] .math-visual .pizza-sub,[data-mode="solution"] .math-visual .pizza-sub,[data-mode="question"] .math-visual .pizza-vs,[data-mode="solution"] .math-visual .pizza-vs,[data-mode="question"] .math-visual .clock-arrow,[data-mode="solution"] .math-visual .clock-arrow{display:none}
[data-mode="question"] .math-visual .visual-label,[data-mode="solution"] .math-visual .visual-label{display:none}
.visual-label{font-size:clamp(25px,3vw,45px);font-weight:850;color:#6941b2;white-space:nowrap}.visual-label.small{font-size:clamp(14px,1.3vw,18px);white-space:normal;text-align:center;margin-top:6px;color:#51436d}
.pizza-count{font-size:30px;font-weight:900;fill:#fff;stroke:#6941b2;stroke-width:1.5px;text-anchor:middle;paint-order:stroke}
.pizza-pair{display:flex;align-items:center;gap:clamp(8px,1.5vw,22px)}.pizza-vs{font-size:clamp(20px,2.4vw,34px);font-weight:900;color:#8b7bb0}
.pizza-sub{display:flex;justify-content:space-around;width:100%;font-size:clamp(20px,2.2vw,32px);font-weight:850;color:#6941b2}
.math-visual{flex-wrap:wrap}
.verdict circle{fill:#fff;stroke-width:4}.verdict path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.verdict.bad circle{stroke:#c0392b}.verdict.bad path{stroke:#c0392b}.verdict.good circle{stroke:#227a59}.verdict.good path{stroke:#227a59}
.pizza-slice{transition:transform 1.5s ease-in-out}
.math-visual.animate .pizza-cut{animation:pizza-cut-appear 1.3s 3s ease-in-out forwards,pizza-cut-fade .2s 4.3s ease-out forwards}
.clock-svg{width:clamp(170px,22vw,300px);height:auto;flex:none}.clock-svg.small{width:clamp(110px,13vw,170px)}
.clock-face{fill:#fff;stroke:#6941b2;stroke-width:8}.clock-tick{fill:#6941b2}.clock-num{font-size:22px;font-weight:800;fill:#3d2b60;text-anchor:middle}
.clock-hand{stroke-linecap:round}.clock-hand.hour{stroke:#2a1f45;stroke-width:12}.clock-hand.minute{stroke:#8b5cf6;stroke-width:7}.clock-hand.emphasized{stroke:#e2572e;filter:drop-shadow(0 0 6px #e2572e88)}.clock-pin{fill:#2a1f45}
.clock-row{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,30px);flex-wrap:wrap}.clock-item{display:flex;flex-direction:column;align-items:center}.clock-arrow{font-size:40px;font-weight:900;color:#8b7bb0}
.cycle-svg{width:min(100%,520px);height:auto;flex:none}.cycle-sky{fill:#eaf3ff}.cycle-hill{fill:#9fd38c}.cycle-sea{fill:#58a9e8}.cycle-sun{fill:#ffcc33}.cycle-ray{stroke:#ffb400;stroke-width:4;stroke-linecap:round}
.cycle-vapour{fill:none;stroke:#5f8fd6;stroke-width:4;stroke-linecap:round;stroke-dasharray:6 6}.cycle-arrow{fill:#4a79c9}.cycle-cloud circle,.cycle-cloud rect{fill:#fff;stroke:#b7c8e8;stroke-width:3}.cycle-drop{fill:#3f8be0}.cycle-river{fill:none;stroke:#3f8be0;stroke-width:6;stroke-linecap:round}
.cycle-stage.dim{opacity:.3}.cycle-stage.lit{opacity:1}.cycle-badge circle{fill:#6941b2}.cycle-badge text{fill:#fff;font-size:20px;font-weight:900;text-anchor:middle}
.cycle-svg.animate .cycle-stage.lit .cycle-vapour{animation:vapour-rise 2.4s ease-in-out infinite}.cycle-svg.animate .cycle-stage.lit .cycle-drop{animation:drop-fall 1.6s linear infinite}
@keyframes vapour-rise{0%{transform:translateY(0);opacity:.2}50%{opacity:1}100%{transform:translateY(-14px);opacity:.2}}@keyframes drop-fall{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(60px);opacity:0}}
@media(prefers-reduced-motion:reduce){.cycle-svg.animate .cycle-vapour,.cycle-svg.animate .cycle-drop{animation:none}}
.review{max-width:720px;margin:10px auto 0;text-align:left;background:#fff;border:1px solid #e5e0ef;border-radius:18px;padding:18px 24px}.review h2{font-size:18px;margin:0 0 8px;color:#6941b2}.review li{margin:6px 0;color:#4e426e}
.done-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.done-actions .next-button{margin:20px 0 0}.next-button.secondary{background:#fff;color:#28213e;border:2px solid #d6cce9}

/* ---- Six guides and the plant visual ---- */
.tutor-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.tutor-card .portrait{height:clamp(150px,15vw,230px)}
.tutor-card .label{padding:8px 12px 12px;font-size:16px}
@media(max-width:1100px){.tutor-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.tutor-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plant-svg{width:min(100%,520px);height:auto;flex:none}.plant-sky{fill:#f1f7ea}.plant-sun{fill:#ffcc33}.plant-ray{stroke:#ffb400;stroke-width:4;stroke-linecap:round}
.plant-pot{fill:#c8703a}.plant-pot-rim{fill:#a8562a}.plant-soil{fill:#5a3b22}.plant-stem{fill:none;stroke:#3f8f3a;stroke-width:7;stroke-linecap:round}.plant-leaf{fill:#5fbf4f;stroke:#3f8f3a;stroke-width:2}
.plant-drop{fill:#3f8be0}.plant-can{fill:#7a9bd6;stroke:#4a79c9;stroke-width:3}.plant-air{fill:none;stroke:#7fb3ff;stroke-width:4;stroke-linecap:round}
.plant-stage.dim{opacity:.28}.plant-stage.lit,.plant-stage.plant-green{opacity:1}.plant-badge circle{fill:#6941b2}.plant-badge text{fill:#fff;font-size:20px;font-weight:900;text-anchor:middle}
.plant-svg.animate .plant-stage.lit .plant-drop{animation:drop-fall 1.6s linear infinite}.plant-svg.animate .plant-stage.lit .plant-air{animation:air-drift 2.4s ease-in-out infinite}.plant-svg.animate .plant-leaf{transform-box:fill-box;transform-origin:center bottom;animation:leaf-sway 3s ease-in-out infinite}
@keyframes air-drift{0%{transform:translateX(0);opacity:.3}50%{opacity:1}100%{transform:translateX(16px);opacity:.3}}@keyframes leaf-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.plant-svg.animate .plant-drop,.plant-svg.animate .plant-air,.plant-svg.animate .plant-leaf{animation:none}}

/* Answer states: focus is lime; the chosen wrong answer is rose with a cross; the correct answer is green with a check. */
.answer:focus-visible{background:#d9f56f;border-color:#a0c428;outline:none}
.answer.selected.wrong{border-color:#ce543e;background:#ffeae5}.answer.selected.wrong .answer-letter{color:#ce543e}.answer.selected.wrong .answer-letter::before{content:"\2717 "}
.answer.selected.right{border-color:#227a59;background:#e2f6ea}.answer.selected.right .answer-letter{color:#227a59}.answer.selected.right .answer-letter::before{content:"\2713 "}
.answer.selected.wrong .answer-letter,.answer.selected.right .answer-letter{min-width:52px}
.answer.selected.wrong .answer-letter,.answer.selected.right .answer-letter{visibility:hidden;min-width:28px}
.answer.selected.wrong .answer-letter::before,.answer.selected.right .answer-letter::before{visibility:visible}

/* ---- Image-based visuals (generated artwork, CSS/SVG motion) ---- */
.pizza{position:relative;width:clamp(150px,18vw,260px);aspect-ratio:1;flex:none}
.pizza .pizza-slice{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 1.5s ease-in-out,opacity .3s;user-select:none}
.pizza .pizza-slice.muted{opacity:.35}
.pizza .pizza-cuts{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pizza .pizza-count{position:absolute;transform:translate(-50%,-50%);font-size:clamp(20px,2.4vw,34px);font-weight:900;color:#fff;-webkit-text-stroke:1.5px #6941b2;paint-order:stroke;text-shadow:0 1px 4px #0005}
.pizza .verdict{position:absolute;right:-6%;top:-6%;width:24%;aspect-ratio:1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,2vw,30px);font-weight:900;border:3px solid}
.pizza .verdict.bad{color:#c0392b;border-color:#c0392b}.pizza .verdict.good{color:#227a59;border-color:#227a59}
.clock{position:relative;width:clamp(170px,22vw,300px);aspect-ratio:1;flex:none}.clock.small{width:clamp(110px,13vw,170px)}
.clock img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none}
.clock .clock-svg{position:absolute;inset:0;width:100%;height:100%}
.scene{position:relative;width:min(100%,520px);aspect-ratio:400/260;border-radius:18px;overflow:hidden;flex:none}
.plant-scene{background:#f1f7ea}.cycle-scene{background:#eaf3ff}
.scene .scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene .overlay{position:absolute;inset:0;width:100%;height:100%}
.scene .prop{position:absolute;transition:opacity .3s}.scene .prop img{width:100%;height:100%;object-fit:contain;user-select:none}
.scene .prop.dim{opacity:.28}.scene .prop.lit{opacity:1}
.scene .sun{left:5%;top:6%;width:17%;height:26%}
.cycle-scene .cloud{left:60%;top:8%;width:34%;height:30%}
.plant-scene .plant{left:24%;top:5%;width:52%;height:94%}
.plant-scene .can{left:53.5%;top:7%;width:25.5%;height:25%}
.scene-badge{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#6941b2;color:#fff;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center}
.scene.animate .sun img{animation:sun-glow 3s ease-in-out infinite}@keyframes sun-glow{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.plant-scene.animate .plant img{transform-origin:50% 100%;animation:leaf-sway 3s ease-in-out infinite}
.cycle-scene.animate .cloud img{animation:cloud-drift 5s ease-in-out infinite}@keyframes cloud-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(3%)}}
.cycle-scene .prop.dim .cycle-vapour,.cycle-scene .prop.dim .cycle-drop{animation:none}
[data-mode="question"] .math-visual .pizza,[data-mode="solution"] .math-visual .pizza,[data-mode="question"] .math-visual .clock,[data-mode="solution"] .math-visual .clock{width:132px}
[data-mode="question"] .math-visual .scene,[data-mode="solution"] .math-visual .scene{height:132px;width:auto}
[data-mode="question"] .math-visual .pizza-count,[data-mode="solution"] .math-visual .pizza-count{font-size:16px}
.course-card .art .pizza,.course-card .art .clock{width:100px}.course-card .art .scene{height:100px;width:auto}
@media(prefers-reduced-motion:reduce){.scene.animate .sun img,.plant-scene.animate .plant img,.cycle-scene.animate .cloud img{animation:none}}

/* Beat-timed reveals: parts marked pending appear when the guide reaches their word. */
.pizza-count,.scene-badge,.verdict,.clock-item{transition:opacity .35s,transform .35s}.pizza-count.pending,.scene-badge.pending,.verdict.pending{opacity:0;transform:translate(-50%,-50%) scale(.6)}.clock-item.pending{opacity:0;transform:scale(.85)}.pizza .pizza-cuts{opacity:0;transition:opacity .4s}.pizza.cut .pizza-cuts,.pizza.ready .pizza-cuts{opacity:1}.clock-hand.talking{stroke:#e2572e}
.plant-scene .prop.plant.dim{opacity:.75}

/* Plant growth stages share one frame and cross-fade; droop tilts the plant until it is watered. */
.plant-scene .plant{transform-origin:50% 100%;transition:transform .9s ease}.plant-scene .plant .plant-stage{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease}.plant-scene .plant .plant-stage.on{opacity:1}.plant-scene .plant .plant-fallback{display:none}.plant-scene.no-stages .plant .plant-stage{display:none}.plant-scene.no-stages .plant .plant-fallback{display:block}.plant-scene.droop .plant{transform:rotate(-9deg) scaleY(.92)}.plant-scene.animate .plant img{animation:none}.plant-scene.animate .plant .plant-stage.on{animation:leaf-sway 3s ease-in-out infinite}

/* Storyboard props: knife, plate, number rings, sweep trail, icons, forming cloud, puddle, roots. */
.visual-label{transition:opacity .4s}.visual-label.pending{opacity:0}.pizza.with-plate{margin-right:38%}.pizza .pizza-plate{position:absolute;left:118%;top:12%;width:80%;height:80%;object-fit:contain;opacity:0;transition:opacity .6s}.pizza.plated .pizza-plate{opacity:1}.pizza.plated .pizza-slice.first{transform:translate(112%,8%) scale(.72) !important}.pizza .pizza-knife{position:absolute;left:100%;top:30%;width:120%;height:40%;object-fit:contain;opacity:0;pointer-events:none}.pizza.cutting .pizza-knife{animation:knife-cut .75s ease-in-out forwards}@keyframes knife-cut{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(-150%)}}.pizza.lift .pizza-slice.first{transform:scale(1.14) !important;transition:transform .6s}.clock-ring{fill:none;stroke:#e2572e;stroke-width:4;opacity:0;transition:opacity .25s}.clock-ring.on{opacity:1;animation:ring-pulse .9s ease-in-out infinite}@keyframes ring-pulse{0%,100%{r:15}50%{r:18}}.clock-trail{fill:none;stroke:#8b5cf6;stroke-width:7;opacity:.35;transition:opacity .4s}.clock-item .clock-icon{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto 6px}.cycle-scene .prop.cloud img{transition:transform 1.6s ease}.cycle-scene .prop.cloud.forming img{transform:scale(.55)}.cycle-scene .prop.puddle{left:8%;top:79%;width:30%;height:18%;transform-origin:50% 100%;transition:opacity .4s,transform 1.4s ease}.cycle-scene .prop.puddle.pending{opacity:0}.cycle-scene .prop.puddle.gone{transform:scale(.1);opacity:0}.cycle-scene .prop.lit .cycle-river{stroke-dasharray:10 8;animation:river-flow 1.2s linear infinite}@keyframes river-flow{to{stroke-dashoffset:-36}}.plant-scene .plant .plant-roots{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s}.plant-scene.roots .plant .plant-roots{opacity:1}.plant-scene.roots .plant .plant-stage.on{opacity:0}.plant-scene .drink{opacity:0}.plant-scene.drinking .drink{opacity:1}.drink-drop{fill:#3f8be0;animation:drink-rise 1.6s linear infinite}@keyframes drink-rise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-95px);opacity:0}}

.speed{position:absolute;top:18px;left:18px;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;background:rgba(32,27,57,.85);color:#fff;border-radius:20px;padding:4px 6px;font-size:13px;font-weight:700;z-index:4}.speed-button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer;padding:0}.speed-button:hover,.speed-button:focus-visible{background:#d9f56f;color:#201b39;outline:none}#speed-label{min-width:40px;text-align:center}@media(min-width:901px){.tutor-stage .speed{top:58px;right:0;left:auto}}