.zaybot-model{display:block;width:100%;height:100%;--zb-cycle:8s}
.zaybot-character{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px #16393c24)}
.zaybot-character g{transform-box:view-box}
.zb-skin{pointer-events:none}
.zb-facing{transform-origin:160px 160px;transform:scaleX(-1)}
.zaybot-model[data-position="left"] .zb-facing{transform:scaleX(1)}
.zb-body{transform-origin:162px 238px}
.zb-head{transform-origin:160px 155px}
.zb-arm-wave{transform-origin:211px 170px}
.zb-hand{transform-origin:252px 158px}
.zb-arm-rest{transform-origin:110px 171px}
.zb-leg-front{transform-origin:134px 230px}
.zb-leg-back{transform-origin:185px 233px}
.zb-foot-front{transform-origin:134px 284px}
.zb-foot-back{transform-origin:180px 284px}
.zb-eye-front{transform-origin:135px 96px}
.zb-eye-back{transform-origin:195px 85px}
/* Separate the original rendered mascot at its joints, retaining material and proportions. */
.zb-head-skin{clip-path:polygon(16% 2%,78% 2%,78% 47%,65% 48%,59% 52%,41% 51%,33% 48%,16% 48%)}
.zb-torso-skin{clip-path:polygon(39% 47%,59% 46%,64% 49%,67% 58%,65% 66%,61% 72%,57% 75%,40% 75%,36% 70%,33% 62%,35% 56%)}
.zb-arm-rest-skin{clip-path:polygon(30% 47%,39% 47%,40% 54%,35% 60%,35% 68%,33% 73%,36% 77%,32% 84%,25% 82%,21% 75%,21% 65%,25% 54%)}
.zb-arm-wave-skin{clip-path:polygon(64% 48%,71% 46%,76% 43%,81% 52%,76% 61%,68% 60%,63% 55%)}
.zb-hand-skin{clip-path:polygon(73% 36%,85% 35%,91% 42%,90% 50%,85% 54%,79% 55%,73% 48%)}
.zb-leg-front-skin{clip-path:polygon(37% 69%,48% 71%,50% 80%,49% 89%,35% 89%,33% 81%)}
.zb-leg-back-skin{clip-path:polygon(51% 72%,63% 68%,67% 79%,64% 89%,49% 89%,48% 80%)}
.zb-foot-front-skin{clip-path:polygon(34% 87%,49% 87%,49% 99%,34% 99%)}
.zb-foot-back-skin{clip-path:polygon(50% 87%,65% 87%,65% 99%,49% 99%)}
.zb-eye-front-skin{clip-path:ellipse(21px 22px at 135px 96px)}
.zb-eye-back-skin{clip-path:ellipse(21px 21px at 195px 85px)}
.zb-smile{clip-path:ellipse(15px 10px at 168px 114px)}
.zb-happy-eyes,.zb-laugh{opacity:0;filter:drop-shadow(0 0 2px #24ded7)}
.zaybot-model:is([data-animation="float"],[data-animation="greet"],[data-animation="lively"]) .zb-eye{animation:zb-blink 4.7s ease-in-out infinite}
.zaybot-model:is([data-animation="float"],[data-animation="greet"],[data-animation="lively"]) .zb-gaze{animation:zb-look 9s ease-in-out infinite}
.zaybot-model[data-animation="float"] .zb-head{animation:zb-nod 7s ease-in-out infinite}
.zaybot-model:is([data-animation="greet"],[data-animation="lively"]) .zb-arm-wave{animation:zb-wave var(--zb-cycle) ease-in-out infinite}
.zaybot-model:is([data-animation="greet"],[data-animation="lively"]) .zb-hand{animation:zb-hand var(--zb-cycle) ease-in-out infinite}
.zaybot-model:is([data-animation="greet"],[data-animation="lively"]) .zb-head{animation:zb-nod var(--zb-cycle) ease-in-out infinite}
.zaybot-model[data-animation="lively"]{--zb-cycle:6s}
.zaybot-model[data-animation="lively"] .zb-body{animation:zb-chuckle 12s ease-in-out infinite}
.zaybot-model[data-animation="lively"] .zb-arm-rest{animation:zb-arm 6s ease-in-out infinite}
.zaybot-model[data-animation="lively"] .zb-leg-front{animation:zb-step 6s ease-in-out infinite}
.zaybot-model[data-animation="lively"] .zb-leg-back{animation:zb-step 6s -3s ease-in-out infinite}
.zaybot-model[data-animation="lively"] .zb-foot-front{animation:zb-toe 6s ease-in-out infinite}
.zaybot-model[data-animation="lively"] .zb-foot-back{animation:zb-toe 6s -3s ease-in-out infinite}
.zaybot-model[data-animation="lively"] :is(.zb-happy-eyes,.zb-laugh){animation:zb-laugh 12s step-end infinite}
.zaybot-model[data-animation="lively"] .zb-smile{animation:zb-smile 12s step-end infinite}
.zaybot-model[data-animation="lively"] .zb-eye{animation:zb-blink 4.7s ease-in-out infinite,zb-smile 12s step-end infinite}
.zaybot[data-open="1"] .zaybot-launcher .zaybot-character *{animation-play-state:paused}
@keyframes zb-wave{0%,48%,100%{transform:rotate(0)}10%,26%,42%{transform:rotate(-14deg)}18%,34%{transform:rotate(10deg)}}
@keyframes zb-hand{0%,8%,46%,100%{transform:rotate(0)}14%,30%{transform:rotate(-10deg)}22%,38%{transform:rotate(10deg)}}
@keyframes zb-arm{0%,50%,100%{transform:rotate(0)}24%{transform:rotate(5deg)}76%{transform:rotate(-4deg)}}
@keyframes zb-step{0%,48%,100%{transform:rotate(0) translateY(0)}22%,32%{transform:rotate(3deg) translateY(-2px)}}
@keyframes zb-toe{0%,48%,100%{transform:rotate(0)}22%,32%{transform:rotate(-4deg)}}
@keyframes zb-nod{0%,50%,100%{transform:rotate(0)}12%,32%{transform:rotate(3deg)}22%{transform:rotate(1deg)}75%{transform:rotate(2deg)}}
@keyframes zb-blink{0%,40%,44%,72%,76%,100%{transform:scaleY(1)}42%,74%{transform:scaleY(.08)}}
@keyframes zb-look{0%,30%,100%{transform:translateX(0)}40%,60%{transform:translate(2px,-1px)}75%,88%{transform:translateX(1px)}}
@keyframes zb-chuckle{0%,56%,76%,100%{transform:translateY(0)}60%,66%,72%{transform:translateY(-2px)}63%,69%{transform:translateY(1px)}}
@keyframes zb-laugh{0%,76%,100%{opacity:0}57%{opacity:1}}
@keyframes zb-smile{0%,76%,100%{opacity:1}57%{opacity:0}}
@media(prefers-reduced-motion:reduce){.zaybot-character *{animation:none!important}}