.typing-stage{
  --stage-progress:0;
  --stage-intensity:.12;
  --stage-tempo:0;
  --hero-x:0px;
  --hero-y:0px;
  --hero-scale:.86;
  --hero-rotate:0deg;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#111827;
  border-color:#273244;
  transition:background .35s ease,border-color .35s ease;
}
.stage-controls{position:absolute;top:10px;right:10px;z-index:8;display:flex;align-items:center;gap:7px;pointer-events:auto}
.stage-collapse{height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.3);border-radius:11px;background:#172033;color:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.stage-collapse:focus-visible{outline:3px solid #ffde59;outline-offset:2px}
.typing-stage[data-collapsed="true"]{flex:0 0 48px;min-height:48px;height:48px;animation:none}
.typing-stage[data-collapsed="true"]>:not(.stage-controls){display:none!important}
.typing-stage[data-collapsed="true"] .stage-theme-control{display:none}
.typing-stage[data-collapsed="true"] .stage-controls{top:7px;right:8px}
.typing-stage[data-collapsed="true"] *{animation:none!important;transition:none!important}
.stage-theme-control{height:34px;display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:rgba(15,23,42,.74);color:#fff;backdrop-filter:blur(8px);font-size:13px;font-weight:750}
.stage-theme-control select{max-width:118px;border:0;outline:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.stage-theme-control option{background:#fff;color:#18181b}
.stage-motion-toggle{height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:rgba(15,23,42,.74);color:#fff;font-size:12px;font-weight:750;cursor:pointer;backdrop-filter:blur(8px)}
.stage-motion-toggle[aria-pressed="true"]{background:#fff;color:#18181b;border-color:#fff}
.stage-theme-control:focus-within,.stage-motion-toggle:focus-visible{outline:3px solid rgba(255,222,89,.75);outline-offset:2px}
.stage-canvas,.stage-visual{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage-canvas{z-index:2}
.stage-visual{z-index:3;overflow:hidden}
.stage-horizon{position:absolute;left:-8%;right:-8%;bottom:-22%;height:58%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0%,rgba(255,222,89,.22),transparent 66%);transform:translateY(var(--horizon-y,0px));opacity:var(--horizon-opacity,.4)}
.stage-hero{position:absolute;left:50%;bottom:-7%;width:min(74%,680px);height:auto;max-height:93%;object-fit:contain;transform-origin:50% 82%;transform:translate3d(calc(-50% + var(--hero-x)),var(--hero-y),0) scale(var(--hero-scale)) rotate(var(--hero-rotate));filter:saturate(var(--stage-saturate,1)) contrast(var(--stage-contrast,1)) drop-shadow(0 15px 26px rgba(0,0,0,.35));will-change:transform,filter;transition:filter .2s linear;user-select:none}
.stage-reactions{position:absolute;inset:0;overflow:hidden}
.stage-reaction{position:absolute;left:var(--rx);top:var(--ry);color:#fff;font-size:clamp(18px,3.2vw,40px);font-weight:950;letter-spacing:-.04em;text-shadow:0 3px 0 rgba(0,0,0,.35);animation:reaction-pop .72s cubic-bezier(.16,1.2,.3,1) forwards;white-space:nowrap}
.stage-callout{position:absolute;left:50%;top:18%;max-width:80%;padding:8px 16px;border:2px solid #18181b;border-radius:13px;background:#ffde59;color:#18181b;font-size:clamp(18px,3vw,34px);font-weight:950;letter-spacing:-.04em;box-shadow:6px 6px 0 rgba(0,0,0,.28);opacity:0;transform:translate(-50%,-18px) scale(.8) rotate(-2deg);white-space:nowrap}
.stage-callout.is-showing{animation:callout-burst var(--callout-duration,1080ms) cubic-bezier(.16,1,.3,1) both}
.stage-energy{position:absolute;left:4%;right:4%;bottom:8px;height:5px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.stage-energy>span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffde59,#fff,#34d5ff);box-shadow:0 0 14px rgba(255,222,89,.9);transition:width .12s linear}
.stage-idle{position:absolute;left:20px;bottom:19px;z-index:7;margin:0;color:rgba(255,255,255,.72);font-size:14px;font-weight:650;pointer-events:none;transition:opacity .2s ease}
.typing-stage[data-active="true"] .stage-idle{opacity:0}
.typing-stage.is-char-correct .stage-hero{animation:hero-tap .2s ease-out}
.typing-stage.is-wrong .stage-visual{animation:stage-oops .24s ease-out}
.typing-stage.is-sentence .stage-visual{animation:sentence-pulse .72s ease-out}
.typing-stage.is-complete{animation:stage-complete 1.55s ease-out}

.typing-stage[data-theme="canteen"]{background:linear-gradient(120deg,#172033 0,#6f3218 54%,#ffb32c 160%);border-color:#704624}
.typing-stage[data-theme="canteen"] .stage-horizon{left:45%;right:-20%;bottom:-10%;height:72%;background:radial-gradient(ellipse at 50% 8%,rgba(255,241,177,.82),rgba(255,177,60,.22) 42%,transparent 67%)}
.typing-stage[data-theme="canteen"] .stage-hero{left:43%;bottom:-10%;width:min(74%,700px)}
.typing-stage[data-theme="canteen"] .stage-energy>span{background:linear-gradient(90deg,#ffde59,#ff7a18,#fff)}

@keyframes hero-tap{0%{transform:translate3d(calc(-50% + var(--hero-x)),var(--hero-y),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))}50%{transform:translate3d(calc(-50% + var(--hero-x)),calc(var(--hero-y) - 5px),0) scale(calc(var(--hero-scale) + .025)) rotate(var(--hero-rotate))}100%{transform:translate3d(calc(-50% + var(--hero-x)),var(--hero-y),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))}}
@keyframes reaction-pop{0%{opacity:0;transform:translateY(12px) scale(.45) rotate(-8deg)}24%{opacity:1;transform:translateY(-5px) scale(1.12) rotate(3deg)}100%{opacity:0;transform:translateY(-34px) scale(.92) rotate(-2deg)}}
@keyframes callout-burst{0%{opacity:0;transform:translate(-50%,-18px) scale(.7) rotate(-3deg)}14%,68%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)}82%{opacity:1;transform:translate(-50%,0) scale(1.04) rotate(1deg)}100%{opacity:0;transform:translate(-50%,-10px) scale(.9) rotate(-1deg)}}
@keyframes stage-oops{0%,100%{transform:translateX(0);filter:none}28%{transform:translateX(-5px);filter:saturate(.55)}58%{transform:translateX(4px)}}
@keyframes sentence-pulse{0%{filter:brightness(1)}24%{filter:brightness(1.42) saturate(1.3);transform:scale(1.014)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes stage-complete{0%{filter:brightness(1)}22%{filter:brightness(1.8) saturate(1.5);transform:scale(1.025)}55%{filter:brightness(1.18);transform:scale(.995)}100%{filter:brightness(1);transform:scale(1)}}

@media (max-width:700px){
  .stage-controls{top:6px;right:6px;gap:4px}
  .stage-theme-control{height:29px;padding-left:7px;font-size:11px}
  .stage-theme-control select{max-width:88px}
  .stage-motion-toggle{height:29px;padding:0 7px;font-size:10px}
  .stage-idle{left:12px;bottom:13px;font-size:11px;max-width:42%}
  .stage-callout{top:22%;padding:5px 10px;border-radius:9px;font-size:clamp(15px,4vw,22px)}
}

.stage-phase-label{position:absolute;left:16px;top:52px;z-index:5;pointer-events:none;color:#fff;font-size:14px;font-weight:850;letter-spacing:.06em;border-left:4px solid #ffde59;padding:5px 10px;background:rgba(0,0,0,.4);border-radius:0 7px 7px 0}
.stage-aura{position:absolute;inset:-25%;z-index:1;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 60%,transparent 0deg 12deg,rgba(255,222,89,.42) 14deg 18deg,transparent 20deg 36deg);opacity:var(--aura-opacity,.04);transform:scale(var(--aura-scale,.5)) rotate(calc(var(--stage-progress)*80deg));transition:opacity .4s,transform .2s linear}
.typing-stage[data-theme="canteen"] .stage-aura{background:repeating-linear-gradient(-12deg,transparent 0 30px,rgba(255,208,88,.65) 32px 36px,transparent 40px 65px);transform:translateX(calc(var(--stage-progress)*-180px)) scale(1.4)}
.stage-shockwave{position:absolute;left:50%;top:55%;width:80px;height:80px;border:8px solid #ffde59;border-radius:50%;opacity:0;z-index:4;pointer-events:none;transform:translate(-50%,-50%)}
.typing-stage.is-milestone .stage-shockwave{animation:milestone-ring .95s ease-out both}
.typing-stage.is-milestone .stage-hero{animation:milestone-hero .85s ease-out both}
.typing-stage[data-phase="0"]{background:#111827}
.typing-stage[data-theme="canteen"][data-phase="1"]{background:linear-gradient(110deg,#1c3556,#784025)}
.typing-stage[data-theme="canteen"][data-phase="2"]{background:linear-gradient(110deg,#342c63,#bf6620)}
.typing-stage[data-theme="canteen"][data-phase="3"]{background:linear-gradient(110deg,#6d2050,#e99224)}
.typing-stage[data-theme="canteen"][data-phase="4"]{background:linear-gradient(110deg,#a13b17,#ffd961)}
.typing-stage[data-phase="5"]{background:radial-gradient(ellipse at center,#506c70,#192b40)}
.typing-stage[data-phase="5"] .stage-aura{opacity:.18}
.typing-stage[data-active="false"] .stage-phase-label{display:none}
@keyframes milestone-ring{0%{opacity:.85;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(13)}}
@keyframes milestone-hero{0%,100%{transform:translate3d(calc(-50% + var(--hero-x)),var(--hero-y),0) scale(var(--hero-scale))}24%{transform:translate3d(calc(-50% + var(--hero-x)),calc(var(--hero-y) - 12px),0) scale(calc(var(--hero-scale) + .1))}}
.typing-stage.is-reduced .stage-canvas{opacity:.65}
.canteen-scene,.canteen-runner{display:none;position:absolute;pointer-events:none}
.chase-human,.chase-dog,.chase-finale{display:none;position:absolute;pointer-events:none;background-repeat:no-repeat;z-index:3;bottom:3%}
.typing-stage[data-theme="chase"]{background:linear-gradient(165deg,#2e827a,#22464f 65%,#153038)}
.typing-stage[data-theme="chase"] .stage-hero{visibility:hidden}
.typing-stage[data-theme="chase"] .chase-human{display:block;height:77%;aspect-ratio:3 / 4;left:70%;transform:translate(-50%,var(--chase-bounce,0px));background-image:url('assets/animation/chase-human.png');background-size:400% 300%}
.typing-stage[data-theme="chase"] .chase-dog{display:block;height:52%;aspect-ratio:3 / 4;left:var(--dog-left,12%);transform:translateX(-50%) rotate(var(--dog-stumble,0deg));background-image:url('assets/animation/chase-dog.png');background-size:400% 200%}
.typing-stage[data-theme="chase"][data-chase-finished="true"] .chase-human,.typing-stage[data-theme="chase"][data-chase-finished="true"] .chase-dog{display:none}
.typing-stage[data-theme="chase"][data-chase-finished="true"] .chase-finale{display:block;height:85%;aspect-ratio:3 / 4;left:60%;background-image:url('assets/animation/chase-finale.png');background-size:400% 200%}
.typing-stage[data-theme="chase"][data-phase="5"] .stage-phase-label,.typing-stage[data-theme="chase"][data-phase="5"] .stage-callout,.typing-stage[data-theme="chase"][data-phase="5"] .stage-reactions{display:none}
.eater-character,.eater-plates{display:none;position:absolute;pointer-events:none;background-repeat:no-repeat}
.typing-stage[data-theme="eater"] .stage-hero{visibility:hidden}
.typing-stage[data-theme="eater"]{background:radial-gradient(ellipse at 50% 80%,#f9ca65,#974026 65%,#362b30)}
.typing-stage[data-theme="eater"] .eater-character{display:block;z-index:3;height:83%;aspect-ratio:3 / 4;bottom:0;left:50%;transform:translateX(-50%);background-image:url('assets/animation/eater-cycle.png');background-size:400% 300%}
.typing-stage[data-theme="eater"][data-eater-finished="true"] .eater-character{aspect-ratio:3 / 5;height:100%}
.typing-stage[data-theme="eater"] .eater-plates{display:block;z-index:2;right:4%;bottom:4%;height:72%;aspect-ratio:1;background-image:url('assets/animation/eater-plates.png');background-size:contain;background-position:center bottom;transform-origin:50% 100%;transform:scale(var(--plate-growth,.18)) rotate(var(--plate-tilt,0deg));opacity:var(--plate-opacity,0)}
.typing-stage[data-theme="eater"] .stage-aura{opacity:calc(var(--aura-opacity)*.25)}
.canteen-wall{display:none;position:absolute;right:-2%;bottom:0;height:80%;width:24%;z-index:4;pointer-events:none;opacity:0;background:url('assets/animation/canteen-wall.png') 0 0 / 200% 100% no-repeat}
.typing-stage[data-theme="canteen"] .canteen-wall{display:block}
.typing-stage[data-theme="canteen"] .stage-hero{visibility:hidden}
.typing-stage[data-theme="canteen"] .canteen-scene{display:block;inset:0;z-index:0;background-image:url('assets/animation/canteen-campus.png');background-size:var(--scene-width,auto) var(--scene-height,100%);background-repeat:no-repeat;background-position:var(--scene-pan,0%) 60%;opacity:.85}
.typing-stage[data-theme="canteen"] .canteen-runner{display:block;z-index:3;height:72%;aspect-ratio:3 / 4;bottom:3%;left:var(--runner-left,22%);background-image:url('assets/animation/canteen-cycle.png');background-size:400% 200%;background-repeat:no-repeat;transform:translate(-50%,var(--run-bounce,0px)) rotate(var(--runner-lean,0deg));opacity:var(--runner-opacity,1);transform-origin:50% 85%;will-change:background-position,transform}
.typing-stage[data-theme="canteen"] .stage-aura{opacity:calc(var(--aura-opacity)*.3)}
.typing-stage[data-theme="canteen"] .stage-phase-label{background:rgba(15,23,42,.8)}
.typing-stage.is-reduced .stage-aura{transition:none;transform:none}
.typing-stage.is-reduced.is-milestone .stage-shockwave,.typing-stage.is-reduced.is-milestone .stage-hero,.typing-stage.is-reduced.is-char-correct .stage-hero{animation:none}
.typing-stage.is-reduced .stage-hero{transition:transform .18s ease,filter .18s ease}
.typing-stage.is-reduced .stage-reaction{animation-duration:.42s}
.typing-stage.is-reduced.is-wrong .stage-visual,.typing-stage.is-reduced.is-sentence .stage-visual,.typing-stage.is-reduced.is-complete{animation:none}