/* Practice-hall celebrations. One fixed layer above the page and below the toast; it never takes a tap. */
.keiko-celebration{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;contain:strict}
.keiko-celebration>span{position:absolute;display:block}
.kc-call{left:var(--x);top:var(--call-y);translate:-50% -50%;rotate:-6deg;text-align:center;white-space:nowrap;font-weight:900;line-height:1.05;color:#ffdc4f;-webkit-text-stroke:7px #7a1f12;paint-order:stroke fill;filter:drop-shadow(0 5px 0 #4a1209aa);animation:kc-call 1.05s cubic-bezier(.2,1.4,.4,1) both}
.kc-call strong{display:block;font-size:min(46px,13vw);letter-spacing:2px}
.kc-call small{display:block;margin-top:6px;font-size:min(20px,6vw);color:#fff6d6;-webkit-text-stroke:5px #7a1f12;paint-order:stroke fill}
[data-tier="2"] .kc-call strong{font-size:min(56px,15vw)}
[data-tier="3"] .kc-call strong{font-size:min(66px,17vw)}
[data-tier="4"] .kc-call strong{font-size:min(76px,19vw);color:#fff2a8}
[data-tier="2"] .kc-call{animation-duration:1.45s}
[data-tier="3"] .kc-call{animation-duration:2s}
[data-tier="4"] .kc-call{animation-duration:2.4s}
@keyframes kc-call{0%{opacity:0;scale:.2}14%{opacity:1;scale:1.22}24%{scale:.95}32%,78%{opacity:1;scale:1}100%{opacity:0;scale:1.06;translate:-50% -95%}}
.kc-flash{inset:0;background:radial-gradient(circle at var(--x) var(--y),#fff6c9 0,#ffd86a 35%,#ffb84000 75%);animation:kc-flash .42s ease-out both}
[data-tier="3"] .kc-flash,[data-tier="4"] .kc-flash{animation-duration:.6s}
@keyframes kc-flash{0%{opacity:0}18%{opacity:.62}100%{opacity:0}}
.kc-rays{left:var(--x);top:var(--y);width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffd75e66 0 5deg,#ffd75e00 5deg 13deg);-webkit-mask:radial-gradient(circle,#0000 0 9%,#000 16%,#0000 62%);mask:radial-gradient(circle,#0000 0 9%,#000 16%,#0000 62%);animation:kc-rays 1.4s ease-out both}
[data-tier="3"] .kc-rays{animation-duration:1.9s}
[data-tier="4"] .kc-rays{animation-duration:2.3s;background:repeating-conic-gradient(from 0deg,#fff1a899 0 5deg,#ffd75e00 5deg 11deg)}
@keyframes kc-rays{0%{opacity:0;scale:.4;rotate:0deg}15%{opacity:1}75%{opacity:.8}100%{opacity:0;scale:1.15;rotate:40deg}}
.kc-ring{left:var(--x);top:var(--y);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:6px solid #ffd45c;box-shadow:0 0 18px #ffcf4a,inset 0 0 14px #fff3;animation:kc-ring .75s ease-out var(--delay,0ms) both}
@keyframes kc-ring{0%{opacity:.95;scale:.25}100%{opacity:0;scale:3.4}}
.kc-paper{left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*.62);margin:-4px 0 0 -4px;background:var(--color);border-radius:1px;animation:kc-paper 1.05s cubic-bezier(.12,.7,.35,1) var(--delay,0ms) both}
@keyframes kc-paper{0%{opacity:1;translate:0 0;rotate:0deg}70%{opacity:1}100%{opacity:0;translate:var(--dx) calc(var(--dy) + 120px);rotate:var(--spin)}}
.kc-paper.shower{left:var(--left);top:-4vh;animation:kc-shower 1.7s linear var(--delay,0ms) both}
@keyframes kc-shower{0%{opacity:1;translate:0 0;rotate:0deg}85%{opacity:1}100%{opacity:0;translate:calc(var(--dx)*.12) var(--dy);rotate:var(--spin)}}
.kc-firework{left:var(--fx);top:var(--fy);width:0;height:0}
.kc-firework i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--color);box-shadow:0 0 8px 2px var(--color);opacity:0;animation:kc-spark .9s ease-out var(--delay,0ms) both}
@keyframes kc-spark{0%{opacity:1;transform:rotate(var(--angle)) translateY(0) scale(1.3)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-78px) scale(.3)}}
.kc-cushion{left:0;top:0;width:0;height:0;animation:kc-cushion-x 1.5s linear var(--delay,0ms) both}
.kc-cushion::before{content:"";position:absolute;width:44px;height:30px;margin:-15px 0 0 -22px;border-radius:9px;background:radial-gradient(circle at 50% 50%,#f0c24c 0 3px,#0000 4px),linear-gradient(160deg,#7d4bb0,#4d2a7c);box-shadow:inset 0 0 0 2px #a97fd6,0 4px 8px #1a0d2e55;animation:kc-cushion-y 1.5s cubic-bezier(.3,0,.7,1) var(--delay,0ms) both}
/* The thrown cushions take the colour of the tier: vermilion, gold, brocade, white gold. */
.kc-cushion[data-c="2"]::before{background:radial-gradient(circle at 50% 50%,#f6d36a 0 3px,#0000 4px),linear-gradient(160deg,#ef5a3c,#a8281a);box-shadow:inset 0 0 0 2px #ff9a7d,0 4px 8px #3a0d0655}
.kc-cushion[data-c="3"]::before{background:radial-gradient(circle at 50% 50%,#c2321f 0 3px,#0000 4px),linear-gradient(160deg,#ffe07a,#d49a1c);box-shadow:inset 0 0 0 2px #fff1b8,0 4px 8px #4a300655}
.kc-cushion[data-c="4"]::before{background:radial-gradient(circle at 50% 50%,#fff3c4 0 3px,#0000 4px),repeating-linear-gradient(115deg,#c8322a 0 6px,#f2c14e 6px 9px,#2f7d5b 9px 15px,#f2c14e 15px 18px,#3a5fae 18px 24px,#f2c14e 24px 27px);box-shadow:inset 0 0 0 2px #ffe38a,0 4px 10px #1a0d2e66}
.kc-cushion[data-c="5"]::before{width:52px;height:36px;margin:-18px 0 0 -26px;background:radial-gradient(circle at 50% 50%,#e8563f 0 3px,#0000 4px),linear-gradient(120deg,#fffaf0,#ffe29a 30%,#fff 50%,#ffd35c 70%,#fff6dc);box-shadow:inset 0 0 0 2px #f0c24c,0 0 14px #fff2b0,0 4px 10px #4a300655}
@keyframes kc-cushion-x{0%{opacity:0;translate:var(--from) 0}8%{opacity:1}90%{opacity:1}100%{opacity:0;translate:var(--to) 0}}
@keyframes kc-cushion-y{0%{translate:0 78vh;rotate:0deg;animation-timing-function:cubic-bezier(.2,.6,.4,1)}45%{translate:0 var(--peak);animation-timing-function:cubic-bezier(.6,0,.9,.5)}100%{translate:0 var(--land);rotate:var(--spin)}}

/* The lesson itself joins in: the card lands like a stamp and the seal glows. */
.lesson-stage[data-celebration] .flashcard{animation:kc-card .5s cubic-bezier(.2,1.5,.4,1)}
.lesson-stage[data-celebration="3"] .flashcard,.lesson-stage[data-celebration="4"] .flashcard{animation:kc-card-big .7s cubic-bezier(.2,1.5,.4,1);box-shadow:0 0 0 4px #ffe597aa,0 0 34px #ffcf4acc,0 12px 26px #2d170b40}
@keyframes kc-card{0%{scale:.96}45%{scale:1.035}100%{scale:1}}
@keyframes kc-card-big{0%{scale:.94;rotate:0deg}30%{scale:1.06;rotate:-1.2deg}50%{rotate:1deg}70%{scale:.99;rotate:-.5deg}100%{scale:1;rotate:0deg}}
.lesson-stage[data-celebration] .lesson-result-stamp{box-shadow:0 0 0 0 #ffd45c;animation:learning-stamp .38s ease-out both,kc-seal 1s ease-out .3s}
@keyframes kc-seal{0%{box-shadow:0 0 0 0 #ffd45ccc}100%{box-shadow:0 0 0 18px #ffd45c00}}

/* Reduced motion keeps the words of praise and drops everything that moves. */
.keiko-celebration.still .kc-call{animation:none;opacity:1}
.reduce-motion .lesson-stage[data-celebration] .flashcard,.reduce-motion .lesson-stage[data-celebration] .lesson-result-stamp{animation:none!important}
@media(prefers-reduced-motion:reduce){.lesson-stage[data-celebration] .flashcard,.lesson-stage[data-celebration] .lesson-result-stamp{animation:none!important}}

/* Ten in a row: the biggest shout, and the partner bursts across the screen on a band of speed lines. */
[data-tier="5"] .kc-call strong{font-size:min(84px,21vw);color:#fff;-webkit-text-stroke-color:#8a1c0e}
[data-tier="5"] .kc-call small{color:#ffe07a;font-size:min(26px,7.5vw)}
[data-tier="5"] .kc-call{animation-duration:2.9s}
[data-tier="5"] .kc-flash{background:radial-gradient(circle at var(--x) var(--y),#fff 0,#fff3c0 40%,#ffd86a88 70%,#ffb84000 100%);animation-duration:.8s}
[data-tier="5"] .kc-rays{animation-duration:2.8s;background:repeating-conic-gradient(from 0deg,#fff6c8aa 0 4deg,#ffd75e00 4deg 9deg)}
.kc-cutin{left:-10vw;right:-10vw;top:calc(62% - 95px);height:190px;rotate:-7deg;overflow:hidden;background:linear-gradient(#b3261a,#e8563f 45%,#b3261a);box-shadow:0 0 0 5px #ffd45c,0 0 40px #ffcf4acc;animation:kc-cutin 1.9s cubic-bezier(.2,.9,.3,1) .35s both}
.kc-cutin-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#fff0 0 34px,#ffe9a655 34px 38px,#fff0 38px 90px,#ffffff88 90px 92px);animation:kc-lines .3s linear infinite}
.kc-cutin-actor{position:absolute;left:4vw;bottom:-40px;width:230px;height:230px;rotate:7deg;animation:kc-cutin-actor 1.9s cubic-bezier(.2,.9,.3,1) .35s both}
.kc-cutin-actor .mini-actor{width:100%;height:100%;filter:drop-shadow(0 0 10px #fff6c8) drop-shadow(0 0 22px #ffd45c)}
.kc-cutin-word{position:absolute;right:12vw;top:50%;translate:0 -50%;font-size:min(58px,13vw);font-weight:900;letter-spacing:2px;white-space:nowrap;color:#fff;-webkit-text-stroke:6px #5a1208;paint-order:stroke fill;animation:kc-cutin-word 1.9s cubic-bezier(.2,1.4,.4,1) .45s both}
@keyframes kc-cutin{0%{opacity:0;scale:1 0}12%{opacity:1;scale:1 1}82%{opacity:1;scale:1 1}100%{opacity:0;scale:1 .1}}
@keyframes kc-lines{to{background-position:-92px 0}}
@keyframes kc-cutin-actor{0%{translate:-80vw 0}18%{translate:0 0}80%{translate:6vw 0}100%{translate:90vw 0}}
@keyframes kc-cutin-word{0%{opacity:0;scale:2.4}20%{opacity:1;scale:1}82%{opacity:1;scale:1}100%{opacity:0;scale:1.1}}

/* The stage answers the tier: it shakes from five in a row, harder at eight and ten. */
.lesson-stage[data-celebration="3"] .lesson-wrap{animation:kh-shake .42s ease-out .08s}
.lesson-stage[data-celebration="4"] .lesson-wrap{animation:kh-shake-big .55s ease-out .08s}
.lesson-stage[data-celebration="5"] .lesson-wrap{animation:kh-shake-big .55s ease-out .08s,kh-shake-big .55s ease-out .9s}
@keyframes kh-shake{0%,100%{translate:0 0}20%{translate:-4px 2px}40%{translate:4px -2px}60%{translate:-3px 1px}80%{translate:2px 0}}
@keyframes kh-shake-big{0%,100%{translate:0 0;rotate:0deg}15%{translate:-8px 4px;rotate:-.6deg}30%{translate:8px -4px;rotate:.6deg}45%{translate:-6px 3px}60%{translate:5px -2px}80%{translate:-2px 1px}}

/* ——— The partner's cushion pile (podium) at the foot of the lesson ———
   It stands where the partner used to cheer under the choices (2026-09-27 マスター「座布団に載っている相方は下に移動」);
   in a drill the tap tip stays beside it until the answer. The aura and the light stand behind the cards and buttons.
   Loops take their phase from --clock (the page clock at the paint), so a repaint between questions does not restart them. */
.lesson-stage{position:relative;isolation:isolate;overflow:clip}
.kh-seat{display:flex;align-items:flex-end;justify-content:center;gap:16px;margin:18px auto 0;padding-bottom:4px}
.kh-tip{margin:0 0 16px;max-width:190px;color:#ffefd0;font-size:12px;font-weight:800;line-height:1.5;text-shadow:0 1px 3px #3f2c17}
.kh-tip small{display:block;margin-top:4px;color:#dfc79b;font-size:10px;font-weight:500;line-height:1.7}
/* The podium is as tall as the pile and the partner on it, so the page below the choices grows a little with each answer. */
.kh-podium{--h:5.5px;--rider:84px;--grow:1;position:relative;flex:none;width:72px;height:calc(var(--stack)*var(--h) + var(--rider)*var(--grow) - 5px);pointer-events:none;text-align:left}
.kh-podium[data-level="2"]{--grow:1.04}.kh-podium[data-level="3"]{--grow:1.08}.kh-podium[data-level="4"]{--grow:1.12}.kh-podium[data-level="5"]{--grow:1.16}
.kh-podium>*,.kh-aura>*{position:absolute;display:block}
.kh-pile{left:50%;bottom:0;width:0;height:0;z-index:1}
.kh-zabuton{position:absolute;display:block;left:-27px;bottom:calc(var(--i)*var(--h));width:54px;height:9px;border-radius:6px/4.5px;translate:var(--jx) 0;rotate:var(--jr);background:linear-gradient(#9360c8,#62309a 60%,#46206f);box-shadow:inset 0 1px 0 #ffffff5c,0 1px 0 #26103daa}
.kh-zabuton::before,.kh-zabuton::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#f3c64b;box-shadow:0 0 0 1px #8a5a12}
.kh-zabuton::before{left:-2px}.kh-zabuton::after{right:-2px}
.kh-zabuton[data-c="2"]{background:linear-gradient(#ff7a57,#d8402a 55%,#9c2616)}
.kh-zabuton[data-c="3"]{background:linear-gradient(#fff0a8,#f0bf3a 50%,#b9851a);box-shadow:inset 0 1px 0 #fff9,0 1px 0 #6b4a0aaa,0 0 6px #ffd45c88}
.kh-zabuton[data-c="3"]::before,.kh-zabuton[data-c="3"]::after{background:#d8402a;box-shadow:0 0 0 1px #7a1f12}
.kh-zabuton[data-c="4"]{background:linear-gradient(#ffffff55,#fff0 45%,#0002),repeating-linear-gradient(90deg,#c8322a 0 6px,#f2c14e 6px 8px,#2f7d5b 8px 14px,#f2c14e 14px 16px,#3a5fae 16px 22px,#f2c14e 22px 24px);box-shadow:inset 0 0 0 1px #ffe38a,0 1px 0 #26103daa,0 0 7px #ffe38a99}
.kh-zabuton[data-c="5"]{background:linear-gradient(90deg,#fff8e1,#ffe29a 25%,#fff 50%,#ffd35c 75%,#fff8e1) 0 0/200% 100%;box-shadow:inset 0 0 0 1px #f0c24c,0 0 9px #fff2b0,0 0 16px #ffd45c99;animation:kh-sheen 2s linear infinite;animation-delay:var(--clock)}
.kh-zabuton[data-c="5"]::before,.kh-zabuton[data-c="5"]::after{background:#e8563f}
@keyframes kh-sheen{to{background-position:-200% 0}}
.kh-rider{left:50%;bottom:calc(var(--stack)*var(--h) - 5px);width:var(--rider);height:var(--rider);margin-left:calc(var(--rider)/-2);z-index:1;scale:var(--grow);transform-origin:50% 100%;transition:scale .3s}
.kh-rider .mini-actor{width:100%;height:100%;filter:drop-shadow(0 3px 2px #3a220f66)}
.kh-podium[data-level="4"] .kh-rider .mini-actor,.kh-podium[data-level="5"] .kh-rider .mini-actor{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ffd45c)}
.kh-count{left:-10px;bottom:calc(var(--stack)*var(--h) - 8px);z-index:1;min-width:30px;padding:2px 6px;border-radius:9px;background:#7a1f12;color:#fff4cf;font:900 12px/1.2 system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #f3c64b,0 2px 4px #0006;rotate:-8deg}
.kh-podium[data-level="3"] .kh-count{background:#b9851a}.kh-podium[data-level="4"] .kh-count,.kh-podium[data-level="5"] .kh-count{background:linear-gradient(90deg,#c8322a,#b9851a,#2f7d5b,#3a5fae);font-size:14px}

/* The aura stands on the pile and grows with every answer (--n); each tier adds a part. */
.kh-aura{left:50%;bottom:calc(var(--stack)*var(--h) - 6px);width:calc(var(--rider)*(1.15 + var(--n)*.07));height:calc(var(--rider)*(1.25 + var(--n)*.09));translate:-50% 0;z-index:-1}
.kh-glow{inset:-12% -8% -4%;border-radius:50%;background:radial-gradient(ellipse 50% 50% at 50% 62%,#fff6c8 0,#ffd86acc 30%,#ffb84000 72%);opacity:calc(.35 + var(--n)*.06);animation:kh-glow 2s ease-in-out infinite;animation-delay:var(--clock)}
@keyframes kh-glow{0%,100%{scale:.92}50%{scale:1.06}}
.kh-flame{inset:0;filter:blur(1.2px);transform-origin:50% 100%;-webkit-mask:linear-gradient(to top,#0000 0,#000 22%);mask:linear-gradient(to top,#0000 0,#000 22%)}
.kh-flame.outer{background:linear-gradient(to top,#ff5a1f 0,#ff8a2a 35%,#ffb03acc 60%,#ffd76000 100%);clip-path:polygon(0% 100%,3% 62%,9% 76%,14% 34%,22% 64%,30% 14%,38% 52%,50% 0%,62% 52%,70% 14%,78% 64%,86% 34%,91% 76%,97% 62%,100% 100%);animation:kh-flame-a .6s ease-in-out infinite alternate;animation-delay:var(--clock);opacity:.9}
.kh-flame.inner{inset:18% 17% 0;background:linear-gradient(to top,#fff6c0 0,#ffd24a 45%,#ffb03a00 100%);clip-path:polygon(0% 100%,6% 58%,16% 70%,24% 26%,36% 60%,50% 6%,64% 60%,76% 26%,84% 70%,94% 58%,100% 100%);animation:kh-flame-b .45s ease-in-out infinite alternate;animation-delay:var(--clock)}
.kh-flame.core{inset:34% 30% 0;background:linear-gradient(to top,#fff 0,#d8f0ff 50%,#bfe6ff00 100%);clip-path:polygon(0% 100%,10% 50%,26% 64%,50% 0%,74% 64%,90% 50%,100% 100%);animation:kh-flame-b .35s ease-in-out infinite alternate;animation-delay:var(--clock);filter:blur(.8px)}
@keyframes kh-flame-a{0%{scale:1 .94}100%{scale:1.03 1.06;clip-path:polygon(0% 100%,5% 56%,11% 72%,17% 28%,25% 60%,33% 20%,42% 48%,50% 6%,58% 48%,67% 20%,75% 60%,83% 28%,89% 72%,95% 56%,100% 100%)}}
@keyframes kh-flame-b{0%{scale:.96 .92}100%{scale:1.04 1.08;clip-path:polygon(0% 100%,4% 52%,14% 74%,26% 20%,38% 64%,50% 0%,62% 64%,74% 20%,86% 74%,96% 52%,100% 100%)}}
.kh-podium[data-level="3"] .kh-flame.outer{background:linear-gradient(to top,#ff7a1f 0,#ffb62a 35%,#ffd84acc 60%,#fff07a00 100%)}
.kh-podium[data-level="4"] .kh-flame.outer{background:linear-gradient(to top,#ff5a1f 0,#ffc23a 30%,#fff3a0dd 60%,#ffffff00 100%)}
.kh-podium[data-level="5"] .kh-flame.outer{background:linear-gradient(to top,#ff3d6e 0,#ffb62a 25%,#7ee07a 50%,#6ac8ff 72%,#c69cff00 100%);animation:kh-flame-a .6s ease-in-out infinite alternate,kh-hue 3s linear infinite;animation-delay:var(--clock)}
@keyframes kh-hue{to{filter:blur(1.2px) hue-rotate(360deg)}}
.kh-spark{left:var(--x);bottom:8%;width:4px;height:4px;border-radius:50%;background:#fff6c0;box-shadow:0 0 5px 2px #ffc34d;animation:kh-spark 1.2s linear infinite;animation-delay:calc(var(--clock) + var(--d))}
@keyframes kh-spark{0%{opacity:0;translate:0 0}12%{opacity:1}100%{opacity:0;translate:var(--drift) calc(var(--rider)*-1.6)}}
.kh-bolt{width:15px;height:44px;top:4%;left:-6%;overflow:visible;fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 3px #9fd8ff) drop-shadow(0 0 6px #6ab8ff);opacity:0;animation:kh-bolt 1.2s steps(1) infinite;animation-delay:calc(var(--clock) - var(--b)*400ms)}
.kh-bolt[style*="--b:1"]{left:auto;right:-8%;top:18%;scale:-1 1}
.kh-bolt[style*="--b:2"]{left:40%;top:-16%;scale:.8;rotate:18deg}
@keyframes kh-bolt{0%{opacity:0}6%{opacity:1}10%{opacity:0}14%{opacity:.9}17%{opacity:0}100%{opacity:0}}
.kh-pillar{left:50%;bottom:calc(var(--stack)*var(--h));width:78px;height:420px;translate:-50% 0;z-index:-1;background:linear-gradient(90deg,#fff0 0,#fff4c455 28%,#fffbe8cc 50%,#fff4c455 72%,#fff0 100%);-webkit-mask:linear-gradient(to top,#000 30%,#0000);mask:linear-gradient(to top,#000 30%,#0000);animation:kh-pillar 1.5s ease-in-out infinite;animation-delay:var(--clock)}
@keyframes kh-pillar{0%,100%{opacity:.65;scale:.85 1}50%{opacity:1;scale:1.15 1}}

/* The room joins in from five in a row: the frame glows and light turns behind the lesson; from eight, paper keeps falling. */
.lesson-stage:has(.kh-podium[data-level="3"]),.lesson-stage:has(.kh-podium[data-level="4"]),.lesson-stage:has(.kh-podium[data-level="5"]){border-color:#f0c24c;box-shadow:0 6px 0 #c4a46e,0 0 0 3px #ffd45c88,0 0 26px #ffcf4a99}
.lesson-stage:has(.kh-podium[data-level="5"]){box-shadow:0 6px 0 #c4a46e,0 0 0 4px #fff2b0,0 0 34px #ffcf4acc}
.kh-podium[data-level="3"]::before,.kh-podium[data-level="4"]::before,.kh-podium[data-level="5"]::before{content:"";position:absolute;left:50%;bottom:calc(var(--stack)*var(--h) + var(--rider)*.45);width:1400px;height:1400px;margin:0 0 -700px -700px;z-index:-1;pointer-events:none;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe28a38 0 6deg,#ffe28a00 6deg 15deg);-webkit-mask:radial-gradient(circle,#000 0 12%,#0000 60%);mask:radial-gradient(circle,#000 0 12%,#0000 60%);animation:kh-turn 24s linear infinite;animation-delay:var(--clock)}
.kh-podium[data-level="4"]::before,.kh-podium[data-level="5"]::before{background:repeating-conic-gradient(from 0deg,#fff1a84d 0 5deg,#ffe28a00 5deg 12deg)}
@keyframes kh-turn{to{rotate:360deg}}
.kh-podium[data-level="4"]::after,.kh-podium[data-level="5"]::after{content:"";position:absolute;left:50%;top:-2600px;width:calc(100vw + 300px);height:2800px;margin-left:calc(-50vw - 150px);z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='180'%3E%3Cg%3E%3Crect x='12' y='10' width='9' height='6' fill='%23f6c445' transform='rotate(20 16 13)'/%3E%3Crect x='80' y='40' width='8' height='5' fill='%23e8563f' transform='rotate(-30 84 42)'/%3E%3Crect x='40' y='90' width='9' height='6' fill='%234f9bd8' transform='rotate(50 44 93)'/%3E%3Crect x='112' y='120' width='8' height='5' fill='%2365b891' transform='rotate(-15 116 122)'/%3E%3Crect x='24' y='150' width='7' height='5' fill='%23f29cb7' transform='rotate(35 27 152)'/%3E%3Crect x='96' y='168' width='8' height='5' fill='%23fff3cf' transform='rotate(-45 100 170)'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='150'%3E%3Crect x='60' y='20' width='6' height='4' fill='%23f6c445' transform='rotate(-25 63 22)'/%3E%3Crect x='14' y='70' width='6' height='4' fill='%23fff3cf' transform='rotate(40 17 72)'/%3E%3Crect x='84' y='112' width='6' height='4' fill='%23e8563f' transform='rotate(10 87 114)'/%3E%3C/svg%3E");background-size:140px 180px,110px 150px;opacity:.85;animation:kh-paper-fall 12s linear infinite;animation-delay:var(--clock)}
.kh-podium[data-level="5"]::after{opacity:1;animation-duration:6s}
/* The sheet hangs from the podium at the foot and reaches up past the top of the lesson even when slid down.
   It slides by 900px (five and six tiles), so it loops without a seam and without repainting. */
@keyframes kh-paper-fall{from{translate:0 0}to{translate:0 900px}}

/* The moment of a right answer: the new cushion drops onto the pile, the partner hops up onto it, the aura flares.
   Stepping into a new tier (3, 5, 8, 10 in a row) the aura bursts much wider. */
.lesson-stage[data-celebration] .kh-zabuton.top{animation:kh-drop .5s cubic-bezier(.3,0,.5,1.3) both}
@keyframes kh-drop{0%{opacity:0;translate:-70px -130px;rotate:-40deg}60%{opacity:1;translate:var(--jx) 2px;rotate:var(--jr)}80%{translate:var(--jx) -2px}100%{translate:var(--jx) 0;rotate:var(--jr)}}
.lesson-stage[data-celebration] .kh-rider{animation:kh-hop .55s ease-out both}
@keyframes kh-hop{0%{translate:0 var(--h)}35%{translate:0 -30px}70%{translate:0 0;scale:calc(var(--grow)*1.08) calc(var(--grow)*.92)}100%{translate:0 0}}
.lesson-stage[data-celebration] .kh-aura{animation:kh-flare .7s ease-out both}
.lesson-stage[data-celebration] .kh-podium[data-up] .kh-aura{animation:kh-level-up 1.1s cubic-bezier(.2,1.3,.4,1) both}
@keyframes kh-flare{0%{scale:.6;opacity:.4}40%{scale:1.3;opacity:1}100%{scale:1}}
@keyframes kh-level-up{0%{scale:.4;opacity:.3}30%{scale:2.1;opacity:1}60%{scale:.9}100%{scale:1}}
.kh-shock{left:50%;bottom:calc(var(--stack)*var(--h) + var(--rider)*.4);width:40px;height:40px;margin:0 0 -20px -20px;border-radius:50%;border:4px solid #fff3b0;box-shadow:0 0 14px #ffd45c,inset 0 0 10px #ffd45c;z-index:1;opacity:0}
.lesson-stage[data-celebration] .kh-podium[data-up] .kh-shock{animation:kh-shock .9s ease-out .1s both}
@keyframes kh-shock{0%{opacity:1;scale:.3}100%{opacity:0;scale:7}}

/* A miss knocks the pile over: each cushion tumbles off and the partner lands on the floor. */
.kh-zabuton.falling{animation:kh-tumble .8s cubic-bezier(.4,0,.8,.6) calc((var(--lost) - var(--i))*45ms) both;z-index:1}
/* The pile is at the foot of the stage, so the cushions fly out sideways in an arc rather than far down. */
@keyframes kh-tumble{0%{translate:var(--jx) 0;rotate:var(--jr);opacity:1}40%{translate:calc(var(--fx)*.8) -28px}100%{translate:calc(var(--fx)*1.8) 22px;rotate:var(--fr);opacity:0}}
.kh-podium[data-state="miss"] .kh-rider{animation:kh-land .6s cubic-bezier(.5,0,.7,1.4) both}
@keyframes kh-land{0%{translate:0 calc(var(--lost)*var(--h)*-1)}100%{translate:0 0}}

/* Reduced motion keeps the pile and a still aura; nothing moves, falls or flashes. */
.reduce-motion .kh-podium *,.reduce-motion .kh-podium::before,.reduce-motion .kh-podium::after,.reduce-motion .lesson-stage .lesson-wrap{animation:none!important}
.reduce-motion .kh-spark,.reduce-motion .kh-bolt,.reduce-motion .kh-zabuton.falling,.reduce-motion .kh-podium::after{display:none}
@media(prefers-reduced-motion:reduce){.kh-podium *,.kh-podium::before,.kh-podium::after,.lesson-stage .lesson-wrap{animation:none!important}.kh-spark,.kh-bolt,.kh-zabuton.falling,.kh-podium::after{display:none}}