.puppet {
  --puppet-ink: #2b1640;
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 140px;
  height: 215px;
  transform: scale(var(--puppet-scale, 1));
  transform-origin: bottom center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  isolation: isolate;
}
.puppet *,
.puppet *::before,
.puppet *::after {
  box-sizing: border-box;
}
.puppet--interactive {
  cursor: pointer;
  touch-action: manipulation;
}
.puppet--interactive:focus-visible {
  outline: 3px dashed #7928ca;
  outline-offset: 8px;
  border-radius: 44%;
}
.puppet-figure {
  position: absolute;
  inset: 0;
  transform-origin: 50% 91%;
  animation: puppet-idle 2.9s ease-in-out infinite;
}
.puppet-shadow {
  position: absolute;
  left: 32px;
  bottom: 4px;
  width: 79px;
  height: 12px;
  border-radius: 50%;
  background: #2b164026;
  transform: rotate(-3deg);
}
.puppet-head {
  position: absolute;
  z-index: 6;
  left: 35px;
  top: 29px;
  width: 72px;
  height: 76px;
  border: 3px solid var(--puppet-ink);
  border-radius: 48% 49% 44% 46%;
  overflow: hidden;
  background: #ffcfaa;
  box-shadow: 3px 3px 0 #2b164018;
  transform: rotate(-5deg);
}
.puppet-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  pointer-events: none;
}
.puppet-cheek {
  position: absolute;
  width: 11px;
  height: 5px;
  top: 48px;
  border-radius: 50%;
  background: #ff2a8533;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.puppet-cheek--left {
  left: 9px;
}
.puppet-cheek--right {
  right: 9px;
}
/* Transparent pet portraits keep their natural silhouette, including both ears. */
.puppet--cutout .puppet-head {
  left: 18px;
  top: 14px;
  width: 104px;
  height: 104px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
.puppet--cutout .puppet-photo {
  object-fit: contain;
}
.puppet--cutout .puppet-cheek {
  display: none;
}
.puppet.puppet--cutout .puppet-hat {
  top: -10px;
}
.puppet-neck {
  position: absolute;
  left: 62px;
  top: 98px;
  width: 17px;
  height: 13px;
  border: 2px solid var(--puppet-ink);
  background: #f4ad8d;
  border-radius: 5px;
  z-index: 3;
}
.puppet-body {
  position: absolute;
  top: 102px;
  left: 45px;
  z-index: 4;
  width: 53px;
  height: 62px;
  background: #ff2a85;
  border: 3px solid var(--puppet-ink);
  border-radius: 14px 14px 10px 10px;
  transform: rotate(-2deg);
  overflow: hidden;
}
.puppet-body::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 11px;
  height: 12px;
  width: 58px;
  background: #00f5d4;
  border-block: 2px solid var(--puppet-ink);
  transform: rotate(-15deg);
}
.puppet-zipper {
  position: absolute;
  top: 0;
  left: 24px;
  width: 2px;
  height: 44px;
  background: var(--puppet-ink);
}
.puppet-shirt-star {
  position: absolute;
  right: 5px;
  top: 23px;
  z-index: 1;
  color: #ffe600;
  font: 16px/1 sans-serif;
  text-shadow: 1px 1px var(--puppet-ink);
  transform: rotate(15deg);
}
.puppet-shorts {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 17px;
  background: #d8ff3e;
  border-top: 3px solid var(--puppet-ink);
}
.puppet-shorts::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 3px;
  height: 12px;
  border-left: 2px solid var(--puppet-ink);
}
.puppet-arm {
  position: absolute;
  z-index: 2;
  top: 108px;
  width: 20px;
  height: 31px;
  border: 3px solid var(--puppet-ink);
  border-radius: 13px;
  background: #ff2a85;
  transform-origin: 50% 7px;
}
.puppet-arm--left {
  left: 32px;
  transform: rotate(28deg);
  animation: puppet-arm-left 2.9s ease-in-out infinite;
}
.puppet-arm--right {
  right: 30px;
  transform: rotate(-28deg);
  animation: puppet-arm-right 2.9s ease-in-out infinite;
}
.puppet-forearm {
  position: absolute;
  top: 18px;
  left: -3px;
  width: 19px;
  height: 30px;
  border: 3px solid var(--puppet-ink);
  border-radius: 10px;
  background: #ff2a85;
  transform-origin: 50% 5px;
  transform: rotate(-10deg);
}
.puppet-arm--right .puppet-forearm {
  transform: rotate(12deg);
}
.puppet-forearm::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 5px;
  width: 100%;
  background: #00f5d4;
  border-block: 1px solid var(--puppet-ink);
}
.puppet-hand {
  position: absolute;
  top: 21px;
  left: -2px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--puppet-ink);
  border-radius: 48%;
  background: #ffcfaa;
}
.puppet-leg {
  position: absolute;
  z-index: 1;
  top: 155px;
  height: 24px;
  width: 19px;
  border: 3px solid var(--puppet-ink);
  background: #ffcfaa;
  border-radius: 9px;
  transform-origin: 50% 5px;
}
.puppet-leg--left {
  left: 49px;
  transform: rotate(9deg);
}
.puppet-leg--right {
  left: 75px;
  transform: rotate(-9deg);
}
.puppet-shin {
  position: absolute;
  top: 14px;
  left: -3px;
  height: 29px;
  width: 19px;
  border: 3px solid var(--puppet-ink);
  border-radius: 8px;
  background: #fff;
  transform-origin: 50% 5px;
}
.puppet-shin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 100%;
  height: 5px;
  border-block: 1px solid var(--puppet-ink);
  background: #7928ca;
}
.puppet-foot {
  position: absolute;
  bottom: -7px;
  left: -9px;
  width: 29px;
  height: 15px;
  border: 3px solid var(--puppet-ink);
  border-bottom-width: 5px;
  border-radius: 10px 5px 5px 5px;
  background: #00f5d4;
  transform-origin: 70% 40%;
}
.puppet-leg--right .puppet-foot {
  left: -1px;
  border-radius: 5px 10px 5px 5px;
  transform-origin: 25% 40%;
  background: #ffe600;
}
.puppet-foot::after {
  content: "";
  position: absolute;
  left: 9px;
  top: -1px;
  height: 5px;
  border-left: 2px solid white;
  transform: rotate(-20deg);
}
.puppet-hat {
  position: absolute;
  z-index: 7;
  top: -4px;
  left: 54px;
  width: 43px;
  height: 48px;
  transform-origin: 50% 95%;
  animation: puppet-hat-sway 2.9s ease-in-out infinite;
}
.puppet-hat-cone {
  position: absolute;
  inset: 3px 3px 3px;
  background: var(--puppet-ink);
  clip-path: polygon(47% 0, 100% 100%, 0 100%);
}
.puppet-hat-cone::before {
  content: "";
  position: absolute;
  inset: 5px 4px 3px;
  background: repeating-linear-gradient(
    -30deg,
    #ffe600 0 8px,
    #ff2a85 8px 16px,
    #00f5d4 16px 24px
  );
  clip-path: polygon(47% 0, 100% 100%, 0 100%);
}
.puppet-hat-pom {
  position: absolute;
  top: -1px;
  left: 15px;
  width: 14px;
  height: 14px;
  background: #ffe600;
  border: 2px solid var(--puppet-ink);
  border-radius: 45%;
  box-shadow: 2px 1px 0 white;
}
.puppet-hat-brim {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 43px;
  height: 9px;
  background: #7928ca;
  border: 2px solid var(--puppet-ink);
  border-radius: 8px;
}
.puppet-particles {
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
}
.puppet-particle {
  position: absolute;
  left: 60px;
  top: 61px;
  color: var(--particle-color, #ff2a85);
  font:
    900 25px/1 Arial,
    sans-serif;
  -webkit-text-stroke: 1px var(--puppet-ink);
  paint-order: stroke fill;
  text-shadow: 1px 2px 0 #fff;
  animation: puppet-particle-pop 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.puppet--jump .puppet-figure,
.puppet--happy .puppet-figure {
  animation: puppet-jump 0.8s ease both;
}
.puppet--jump .puppet-arm--left,
.puppet--happy .puppet-arm--left {
  animation: puppet-cheer-left 0.8s ease both;
}
.puppet--jump .puppet-arm--right,
.puppet--happy .puppet-arm--right {
  animation: puppet-cheer-right 0.8s ease both;
}
.puppet--jump .puppet-leg--left {
  animation: puppet-kick 0.8s ease both;
}
.puppet--jump .puppet-leg--right .puppet-shin {
  animation: puppet-knee 0.8s ease both;
}
.puppet--oops .puppet-figure {
  animation: puppet-oops 0.6s ease both;
}
.puppet--wave .puppet-arm--right {
  animation: puppet-wave 0.8s ease both;
}
.puppet--dance .puppet-figure,
.puppet--win .puppet-figure,
.puppet--party .puppet-figure {
  animation: puppet-dance 0.7s ease-in-out infinite;
}
.puppet--dance .puppet-arm--left,
.puppet--win .puppet-arm--left,
.puppet--party .puppet-arm--left {
  animation: puppet-party-left 0.7s ease-in-out infinite;
}
.puppet--dance .puppet-arm--right,
.puppet--win .puppet-arm--right,
.puppet--party .puppet-arm--right {
  animation: puppet-party-right 0.7s ease-in-out infinite;
}
.puppet--dance .puppet-forearm,
.puppet--win .puppet-forearm,
.puppet--party .puppet-forearm {
  animation: puppet-elbow 0.7s ease-in-out infinite;
}
.puppet--dance .puppet-leg--left .puppet-shin,
.puppet--win .puppet-leg--left .puppet-shin,
.puppet--party .puppet-leg--left .puppet-shin {
  animation: puppet-party-knee 0.7s ease-in-out infinite;
}
.puppet--party .puppet-foot {
  animation: puppet-toe 0.7s ease-in-out infinite;
}
@keyframes puppet-idle {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(-3px);
  }
}
@keyframes puppet-arm-left {
  0%,
  100% {
    transform: rotate(25deg);
  }
  50% {
    transform: rotate(37deg);
  }
}
@keyframes puppet-arm-right {
  0%,
  100% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(-38deg);
  }
}
@keyframes puppet-hat-sway {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
@keyframes puppet-jump {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  16% {
    transform: translateY(5px) scaleY(0.94);
  }
  42% {
    transform: translateY(-32px) rotate(7deg);
  }
  69% {
    transform: translateY(0) scaleY(0.96);
  }
  84% {
    transform: translateY(-7px) rotate(-4deg);
  }
}
@keyframes puppet-cheer-left {
  0%,
  100% {
    transform: rotate(28deg);
  }
  35%,
  60% {
    transform: rotate(133deg);
  }
}
@keyframes puppet-cheer-right {
  0%,
  100% {
    transform: rotate(-28deg);
  }
  35%,
  60% {
    transform: rotate(-137deg);
  }
}
@keyframes puppet-kick {
  0%,
  100% {
    transform: rotate(9deg);
  }
  45% {
    transform: rotate(33deg);
  }
}
@keyframes puppet-knee {
  0%,
  100% {
    transform: rotate(0);
  }
  45% {
    transform: rotate(-33deg);
  }
}
@keyframes puppet-wave {
  0%,
  100% {
    transform: rotate(-28deg);
  }
  25%,
  65% {
    transform: rotate(-150deg);
  }
  45%,
  80% {
    transform: rotate(-115deg);
  }
}
@keyframes puppet-oops {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-9deg);
  }
  40%,
  80% {
    transform: rotate(9deg);
  }
}
@keyframes puppet-dance {
  0%,
  100% {
    transform: translateY(0) rotate(-7deg);
  }
  50% {
    transform: translateY(-9px) rotate(7deg);
  }
}
@keyframes puppet-party-left {
  0%,
  100% {
    transform: rotate(115deg);
  }
  50% {
    transform: rotate(65deg);
  }
}
@keyframes puppet-party-right {
  0%,
  100% {
    transform: rotate(-65deg);
  }
  50% {
    transform: rotate(-120deg);
  }
}
@keyframes puppet-elbow {
  0%,
  100% {
    transform: rotate(-16deg);
  }
  50% {
    transform: rotate(25deg);
  }
}
@keyframes puppet-party-knee {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(27deg);
  }
}
@keyframes puppet-toe {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
@keyframes puppet-particle-pop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
  }
  20% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-x), var(--particle-y))
      rotate(var(--particle-turn)) scale(0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .puppet .puppet-figure,
  .puppet .puppet-arm,
  .puppet .puppet-forearm,
  .puppet .puppet-shin,
  .puppet .puppet-foot,
  .puppet .puppet-hat,
  .puppet .puppet-leg {
    animation: none !important;
  }
  .puppet-particle {
    animation: puppet-particle-reduced 0.5s ease both;
  }
  .puppet--jump .puppet-head,
  .puppet--happy .puppet-head,
  .puppet--win .puppet-head {
    transform: rotate(5deg);
  }
}
@keyframes puppet-particle-reduced {
  0% {
    opacity: 0;
    transform: translate(var(--particle-x), -25px);
  }
  25%,
  70% {
    opacity: 1;
    transform: translate(var(--particle-x), -25px);
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-x), -25px);
  }
}