.character{overflow:visible;filter:none!important;box-shadow:none!important;background:transparent!important;--agent-size:100px}.character .agent-scale{position:absolute;left:0;top:0;width:100px;height:100px;transform:scale(calc(var(--agent-size)/100px));transform-origin:0 0;pointer-events:none}.agent-canvas{position:absolute;left:-40px;top:-32px;width:190px;height:166px;overflow:hidden}.agent-actor,.agent-head{position:absolute;inset:0;transform-origin:90px 82px}.agent-body,.agent-eyes{position:absolute;left:40px;top:32px;width:100px;height:100px;overflow:visible}.agent-gaze{position:absolute;left:40px;top:32px;width:100px;height:100px;transform-origin:50px 50px;transform:translate(var(--gaze-x,0px),var(--gaze-y,0px)) rotate(var(--gaze-rotate,0deg));transition:transform .16s ease-out}.agent-gaze .agent-eyes{left:0;top:0}.character:focus-visible{outline:2px solid white;outline-offset:8px}.character[data-mode] .agent-gaze{transition:none;transform:none}.character[data-mode] .agent-actor,.character[data-mode] .agent-head,.character[data-mode] .agent-gaze{animation-duration:var(--mode-duration);animation-timing-function:cubic-bezier(.65,0,.35,1);animation-fill-mode:both;animation-iteration-count:1}
.character[data-mode=look-around] .agent-actor{animation-name:agent-look-body}.character[data-mode=look-around] .agent-gaze{animation-name:agent-look-eyes}.character[data-mode=nod] .agent-actor{animation-name:agent-nod-body}.character[data-mode=nod] .agent-gaze{animation-name:agent-nod-eyes}.character[data-mode=hop] .agent-actor{transform-origin:90px 132px;animation-name:agent-hop}.character[data-mode=wiggle] .agent-actor{animation-name:agent-wiggle-body}.character[data-mode=wiggle] .agent-gaze{animation-name:agent-wiggle-eyes}.character[data-mode=spin] .agent-head{animation-name:agent-spin}
@keyframes agent-look-body{0%,10%,76%,100%{transform:rotate(0)}26%,36%{transform:rotate(-5deg)}52%,62%{transform:rotate(5deg)}}@keyframes agent-look-eyes{0%,10%,76%,100%{transform:translate(0,0)}26%,36%{transform:translate(-9px,-3px)}52%,62%{transform:translate(9px,-2px)}}@keyframes agent-nod-body{0%,10%,35%,64%,100%{transform:translateY(0)}23%{transform:translateY(5px)}49%{transform:translateY(3px)}}@keyframes agent-nod-eyes{0%,10%,35%,64%,100%{transform:translateY(0)}23%,49%{transform:translateY(7px)}}@keyframes agent-hop{0%,10%,72%,100%{transform:translateY(0)}22%{transform:translateY(4px)}35%{transform:translateY(-36px)}43%{transform:translateY(-40px)}57%{transform:translateY(0)}65%{transform:translateY(-3px)}}@keyframes agent-wiggle-body{0%,10%,75%,100%{transform:rotate(0)}23%{transform:rotate(-12deg)}36%{transform:rotate(10deg)}49%{transform:rotate(-7deg)}62%{transform:rotate(4deg)}}@keyframes agent-wiggle-eyes{0%,10%,75%,100%{transform:translateX(0)}23%{transform:translateX(5px)}36%{transform:translateX(-4px)}49%{transform:translateX(3px)}62%{transform:translateX(-2px)}}@keyframes agent-spin{0%,10%{transform:rotate(0)}23%{transform:rotate(-16deg)}62%{transform:rotate(365deg)}76%,100%{transform:rotate(360deg)}}
@media(min-width:951px) and (max-width:1400px){.character{--agent-size:80px}}@media(max-width:950px){.character{--agent-size:58px}}@media(max-width:650px){.character{--agent-size:43px}}@media(max-width:370px){.character{--agent-size:39px}}@media(prefers-reduced-motion:reduce){.character .agent-actor,.character .agent-head,.character .agent-gaze{animation:none!important;transform:none!important;transition:none!important}}

/* Each face preserves its own eye geometry and expression pose. */
.agent-gaze{transform:translate(var(--gaze-x,0px),var(--gaze-y,0px))}.agent-eye{transform-box:fill-box;transform-origin:center}.character[data-mode] .agent-gaze{animation-name:none;transform:none}.character[data-mode] .agent-eye{animation:agent-eye-pose var(--mode-duration) cubic-bezier(.65,0,.35,1) 1 both}
@keyframes agent-eye-pose{0%,8%,90%,100%{transform:translate(0,0) rotate(0)}24%,68%{transform:translate(var(--core-x),var(--core-y)) rotate(var(--core-rotation))}}
@media(prefers-reduced-motion:reduce){.character .agent-eye{animation:none!important;transform:none!important}}

/* The eyes clip to the circle; the whole actor retains its full hop/spin extent. */
.agent-canvas,.agent-actor,.agent-head{overflow:visible}.character,.characters{overflow:visible!important}.agent-eye-clip{position:absolute;left:40px;top:32px;width:100px;height:100px;border-radius:50%;overflow:hidden}.agent-eye-clip .agent-gaze{left:0;top:0}