.character .state-element{display:none;opacity:0;transition:opacity .3s ease}.character .extras .state-element{display:none;opacity:0}.character:not([data-state]) .state-idle,.character[data-state=happy] .state-happy,.character[data-state=idle] .state-idle{display:block;opacity:1}.character[data-state=happy] .cheeks ellipse{transform:scale(1.1);transform-origin:center;transition:transform .3s ease}.character[data-state=celebrating] .state-celebrating{display:block;opacity:1}.character[data-state=celebrating] .arm-left{transform:rotate(-35deg) translateY(-15px);transform-origin:50px 235px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.character[data-state=celebrating] .arm-right{transform:rotate(35deg) translateY(-15px);transform-origin:170px 235px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.character[data-state=celebrating] .body{animation:char-celebrate-bounce .6s ease-in-out infinite}.character[data-state=celebrating] .shadow{animation:char-shadow-pulse .6s ease-in-out infinite}.character[data-state=celebrating] .head{animation:char-head-bob .4s ease-in-out infinite}.character[data-state=celebrating] .confetti-piece{animation:confetti-fall 1.5s ease-in-out infinite}.character[data-state=celebrating] .confetti-piece:nth-child(odd){animation-delay:.2s}.character[data-state=celebrating] .confetti-piece:nth-child(3n){animation-delay:.4s}.character[data-state=celebrating] .sparkles circle,.character[data-state=celebrating] .sparkles path{animation:sparkle-twinkle .8s ease-in-out infinite alternate}.character[data-state=thinking] .state-thinking{display:block;opacity:1}.character[data-state=thinking] .head{transform:rotate(-5deg);transform-origin:110px 170px;transition:transform .4s ease}.character[data-state=thinking] .arm-left{transform:rotate(-20deg) translateX(10px) translateY(-25px);transform-origin:50px 235px;transition:transform .4s ease}.character[data-state=thinking] [href*=-thinking-bubble],.character[data-state=thinking] [href="#eli-thinking-bubble"]{animation:thinking-bubble-float 2s ease-in-out infinite}@keyframes char-celebrate-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes char-shadow-pulse{0%,to{transform:scaleX(1);opacity:.22}50%{transform:scaleX(.85);opacity:.15}}@keyframes char-head-bob{0%,to{transform:rotate(0deg)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0deg);opacity:1}50%{opacity:.8}to{transform:translateY(15px) rotate(180deg);opacity:.6}}@keyframes sparkle-twinkle{0%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}@keyframes thinking-bubble-float{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(-5px);opacity:1}}.character[data-char=eli][data-state=celebrating] .cheeks ellipse{fill:rgba(255,150,200,.5)}.character[data-char=miko][data-state=celebrating] .cheeks ellipse{fill:rgba(150,200,255,.5)}.character[data-char=lira][data-state=celebrating] .cheeks ellipse{fill:rgba(255,180,220,.5)}.character[data-char=nova][data-state=celebrating] .cheeks ellipse{fill:rgba(255,200,150,.5)}.character[data-char=ritmo][data-state=celebrating] .cheeks ellipse{fill:rgba(150,255,200,.5)}.character .arm,.character .arm-left,.character .arm-right,.character .body,.character .cheeks ellipse,.character .head{transition:transform .3s ease,fill .3s ease}.character{width:100%;height:auto}.character-sm{width:60px;height:auto}.character-md{width:120px;height:auto}.character-lg{width:200px;height:auto}.character-xl{width:300px;height:auto}.character-interactive:hover{cursor:pointer}.character-interactive:hover .body{transform:translateY(-2px)}.character-interactive:hover .shadow{transform:scaleX(.95);opacity:.18}@media (prefers-reduced-motion:reduce){.character *{animation:none!important;transition:none!important}}