/* The storyteller (shared by every page) */
/* the storyteller */
.charwrap{position:relative;aspect-ratio:320/520;cursor:pointer;-webkit-tap-highlight-color:transparent}
.char{position:absolute;inset:0;width:100%;height:100%;overflow:visible;--ex:0;--ey:0;--tilt:0}
.char .body{transform-box:view-box;transform-origin:160px 500px;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.012)}}
.char .head{transform-box:view-box;transform-origin:160px 190px;rotate:calc(var(--tilt) * 1deg);animation:bob 3.8s ease-in-out infinite}
@keyframes bob{50%{translate:0 -3px}}
.char .pupil{transform:translate(calc(var(--ex) * 1px),calc(var(--ey) * 1px))}
.char .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 5.2s infinite}
@keyframes blink{0%,91%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}97%{transform:scaleY(0)}}
.char .brows{transition:transform .25s}.charwrap.hover .brows{transform:translateY(-5px)}
.char .glow{transform-box:fill-box;transform-origin:center;animation:glowp 2.6s ease-in-out infinite}
@keyframes glowp{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.1);opacity:1}}
.char .armR,.char .forearm{transform-box:view-box;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.char .armR{transform-origin:220px 226px;transform:rotate(58deg)}
.char .forearm{transform-origin:266px 254px;transform:rotate(104deg)}
/* poses */
.charwrap.pose-point .armR{transform:rotate(-31deg)}.charwrap.pose-point .forearm{transform:rotate(110deg)}
.charwrap.pose-think .armR{transform:rotate(105deg)}.charwrap.pose-think .forearm{transform:rotate(-113deg)}
.charwrap.flip .char{transform:scaleX(-1)}
.charwrap.wave .armR{transform:rotate(0)}
.charwrap.wave .forearm{transform:rotate(0);animation:wave .55s ease-in-out infinite alternate}
@keyframes wave{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.charwrap.jump{animation:jump .7s cubic-bezier(.3,.7,.4,1)}
@keyframes jump{0%,100%{translate:0 0}40%{translate:0 -7svh}}
.bubble{position:absolute;right:58%;top:-2%;width:max-content;max-width:min(230px,44vw);background:#fff;color:#10295c;font-weight:bold;font-size:clamp(.85rem,1.4vw,1.05rem);
 line-height:1.3;padding:10px 16px;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.28);opacity:0;transform:scale(.6);transform-origin:90% 100%;transition:opacity .3s,transform .3s;pointer-events:none;z-index:3}
.bubble::after{content:"";position:absolute;right:20px;bottom:-9px;width:18px;height:18px;background:#fff;transform:rotate(45deg);border-radius:3px}
.bubble.show{opacity:1;transform:scale(1)}
.burst{position:absolute;left:50%;top:52%;width:10px;height:10px;background:#e6c97a;pointer-events:none;z-index:4;
 clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:burst .9s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(1.6);opacity:0}}