.pip-avatar {
  --pip-size: 3.5rem;
  --pip-color: var(--green, #1d765a);
  --pip-eye-color: var(--paper, #f7f5ef);
  --pip-orbit-color: var(--sun, #f5c96b);
  --pip-arm-duration: 2.2s;
  --pip-arm-left-rest: 10deg;
  --pip-arm-left-peak: 26deg;
  --pip-arm-left-reach: 0.88;
  --pip-arm-left-peak-reach: 1.05;
  --pip-arm-right-rest: -10deg;
  --pip-arm-right-peak: -24deg;
  --pip-arm-right-reach: 0.9;
  --pip-arm-right-peak-reach: 1.08;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--pip-size);
  height: var(--pip-size);
  isolation: isolate;
}

.pip-avatar--large {
  --pip-size: 5rem;
}

.pip-avatar--hero {
  --pip-size: clamp(10rem, 25vw, 18rem);
}

.pip-body {
  position: absolute;
  inset: 7% 8% 8% 6%;
  border-radius: 34% 42% 31% 44%;
  background: var(--pip-color);
  box-shadow:
    inset calc(var(--pip-size) * -0.08) calc(var(--pip-size) * -0.08) 0 rgba(0, 0, 0, 0.12),
    0 calc(var(--pip-size) * 0.12) calc(var(--pip-size) * 0.25) rgba(7, 24, 19, 0.16);
  transform-origin: 48% 78%;
  animation: pip-float 4.8s ease-in-out infinite;
}

.pip-face {
  position: absolute;
  inset: 0;
}

.pip-headband {
  position: absolute;
  z-index: 5;
  top: 17%;
  left: -2%;
  width: 103%;
  height: 12%;
  border: max(1px, calc(var(--pip-size) * 0.018)) solid rgba(88, 55, 8, 0.28);
  border-radius: 999px 46% 48% 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), transparent 38%),
    var(--pip-orbit-color);
  box-shadow: 0 calc(var(--pip-size) * 0.025) 0 rgba(72, 44, 6, 0.2);
  transform: rotate(-3deg);
}

.pip-headband::before {
  position: absolute;
  top: 18%;
  left: 45%;
  width: 10%;
  height: 64%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--pip-color) 86%, #10251f);
  content: "";
  opacity: 0.72;
}

.pip-headband-knot {
  position: absolute;
  top: -2%;
  right: -7%;
  width: 17%;
  aspect-ratio: 1;
  border: max(1px, calc(var(--pip-size) * 0.018)) solid rgba(88, 55, 8, 0.28);
  border-radius: 48% 52% 45% 55%;
  background: var(--pip-orbit-color);
  box-shadow: inset calc(var(--pip-size) * -0.02) calc(var(--pip-size) * -0.02) 0 rgba(88,55,8,0.16);
}

.pip-headband-tail {
  position: absolute;
  z-index: -1;
  right: -30%;
  width: 30%;
  height: 58%;
  border: max(1px, calc(var(--pip-size) * 0.014)) solid rgba(88, 55, 8, 0.22);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: var(--pip-orbit-color);
  transform-origin: left center;
  animation: pip-headband-tail 2.4s ease-in-out infinite;
}

.pip-headband-tail--one { top: 28%; transform: rotate(9deg); }
.pip-headband-tail--two { top: 66%; right: -25%; width: 25%; transform: rotate(25deg) scaleX(0.9); animation-delay: -700ms; }

.pip-brow {
  position: absolute;
  z-index: 2;
  top: 25%;
  width: 17%;
  height: max(2px, calc(var(--pip-size) * 0.035));
  border-radius: 999px;
  background: color-mix(in srgb, var(--pip-eye-color) 82%, var(--pip-color));
  transform-origin: center;
  transition: transform 220ms ease, opacity 220ms ease;
}

.pip-brow--left { left: 29%; }
.pip-brow--right { left: 54%; }

.pip-eye {
  --pip-eye-x: 0%;
  --pip-eye-y: 0%;
  --pip-eye-rotate: 0deg;
  --pip-eye-open: 1;
  position: absolute;
  top: 34%;
  width: 14%;
  height: 22%;
  border-radius: 999px;
  background: var(--pip-eye-color);
  transform-origin: center;
  transform: translate(var(--pip-eye-x), var(--pip-eye-y)) rotate(var(--pip-eye-rotate)) scaleY(var(--pip-eye-open));
  animation: pip-blink 6.2s ease-in-out infinite;
}

.pip-eye--left {
  left: 31%;
}

.pip-eye--right {
  left: 55%;
  animation-delay: 30ms;
}

.pip-mouth {
  position: absolute;
  left: 43%;
  top: 64%;
  width: 18%;
  height: 9%;
  border: max(2px, calc(var(--pip-size) * 0.035)) solid transparent;
  border-bottom-color: var(--pip-eye-color);
  border-radius: 0 0 999px 999px;
  transition: width 220ms ease, height 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.pip-glasses {
  position: absolute;
  z-index: 3;
  top: 31%;
  left: 25%;
  display: none;
  width: 49%;
  height: 23%;
  border-radius: 4px 4px 45% 45%;
  background: linear-gradient(180deg, #18342d 0 72%, transparent 72%);
  box-shadow: inset 0 calc(var(--pip-size) * -0.025) 0 rgba(245, 201, 107, 0.75);
  transform: rotate(-2deg);
}

.pip-glasses::before {
  content: "";
  position: absolute;
  top: 34%;
  left: 42%;
  width: 18%;
  height: max(2px, calc(var(--pip-size) * 0.035));
  background: #18342d;
}

.pip-arm {
  position: absolute;
  z-index: -1;
  top: 54%;
  width: 34%;
  height: 13%;
  border-radius: 999px;
  background: var(--pip-color);
  opacity: 1;
  transition: opacity 180ms ease, transform 260ms ease;
  will-change: transform;
}

.pip-arm--left {
  left: -19%;
  transform-origin: right center;
  transform: rotate(var(--pip-arm-left-rest)) scaleX(var(--pip-arm-left-reach));
  animation: pip-arm-left var(--pip-arm-duration) ease-in-out infinite;
}

.pip-arm--right {
  right: -23%;
  transform-origin: left center;
  transform: rotate(var(--pip-arm-right-rest)) scaleX(var(--pip-arm-right-reach));
  animation: pip-arm-right var(--pip-arm-duration) ease-in-out -620ms infinite;
}

.pip-orbit {
  position: absolute;
  z-index: 2;
  right: -1%;
  bottom: 4%;
  width: 25%;
  height: 25%;
  border: max(2px, calc(var(--pip-size) * 0.045)) solid var(--pip-orbit-color);
  border-radius: 50%;
  background: var(--pip-eye-color);
  box-shadow: 0 5px 12px rgba(7, 24, 19, 0.14);
  transform-origin: -90% -70%;
}

.pip-orbit-dot {
  position: absolute;
  top: -18%;
  left: 38%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pip-orbit-color);
}

.pip-spark {
  position: absolute;
  z-index: 3;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--pip-orbit-color);
  opacity: 0;
  transform: rotate(45deg) scale(0);
}

.pip-spark--one {
  top: 1%;
  left: 6%;
}

.pip-spark--two {
  top: 8%;
  right: -4%;
}

.pip-spark--three {
  bottom: 5%;
  left: -6%;
}

.pip-emotion-mark {
  position: absolute;
  z-index: 4;
  top: -7%;
  right: -10%;
  display: grid;
  width: 31%;
  aspect-ratio: 1;
  place-items: center;
  border: max(2px, calc(var(--pip-size) * 0.035)) solid rgba(16, 37, 31, 0.18);
  border-radius: 50% 50% 50% 16%;
  background: var(--paper, #f7f5ef);
  color: var(--green-dark, #12533f);
  font-family: system-ui, sans-serif;
  font-size: calc(var(--pip-size) * 0.17);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(20%) scale(0.5) rotate(8deg);
  transition: opacity 180ms ease, transform 240ms ease, background 180ms ease;
}

.pip-emotion-mark::before { content: ""; }

.pip-avatar:not([data-state="idle"]) .pip-emotion-mark {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

.pip-avatar[data-pip-pose="welcome"] {
  --pip-arm-duration: 1.7s;
  --pip-arm-left-rest: 14deg;
  --pip-arm-left-peak: 48deg;
  --pip-arm-left-peak-reach: 1.05;
  --pip-arm-right-rest: -6deg;
  --pip-arm-right-peak: -22deg;
}

.pip-avatar[data-pip-pose="story"] {
  --pip-arm-duration: 2.35s;
  --pip-arm-left-rest: -8deg;
  --pip-arm-left-peak: 10deg;
  --pip-arm-right-rest: -4deg;
  --pip-arm-right-peak: -28deg;
  --pip-arm-right-peak-reach: 1.08;
}

.pip-avatar[data-pip-pose="victory"] {
  --pip-arm-duration: 1.05s;
  --pip-arm-left-rest: 30deg;
  --pip-arm-left-peak: 56deg;
  --pip-arm-right-rest: -30deg;
  --pip-arm-right-peak: -56deg;
}

.pip-avatar[data-pip-pose="intro"] {
  --pip-arm-duration: 2s;
  --pip-arm-left-rest: 2deg;
  --pip-arm-left-peak: 22deg;
  --pip-arm-right-rest: -18deg;
  --pip-arm-right-peak: -38deg;
}

.pip-avatar[data-pip-pose="lesson"] {
  --pip-arm-duration: 1.8s;
  --pip-arm-left-rest: -4deg;
  --pip-arm-left-peak: 18deg;
  --pip-arm-right-rest: -2deg;
  --pip-arm-right-peak: -32deg;
}

.pip-avatar[data-pip-pose="victory"] .pip-spark {
  animation: pip-spark 1.8s ease-out infinite;
}

.pip-avatar[data-pip-pose="welcome"] .pip-spark {
  animation: pip-spark 2.6s ease-out infinite;
}

.pip-avatar[data-pip-pose="welcome"] .pip-spark--two {
  animation-delay: 320ms;
}

.pip-avatar[data-pip-pose="welcome"] .pip-spark--three {
  animation-delay: 640ms;
}

.pip-avatar[data-pip-pose="victory"] .pip-spark--two {
  animation-delay: 220ms;
}

.pip-avatar[data-pip-pose="victory"] .pip-spark--three {
  animation-delay: 440ms;
}

.pip-avatar[data-state="curious"] .pip-body {
  animation: pip-curious 2.8s ease-in-out infinite;
}

.pip-avatar[data-state="curious"] .pip-eye {
  --pip-eye-x: 12%;
}

.pip-avatar[data-state="curious"] .pip-brow--left { transform: rotate(10deg) translateY(-15%); }
.pip-avatar[data-state="curious"] .pip-brow--right { transform: rotate(-10deg) translateY(-15%); }
.pip-avatar[data-state="curious"] .pip-mouth { left: 46%; width: 10%; height: 10%; border-color: var(--pip-eye-color); border-radius: 50%; }
.pip-avatar[data-state="curious"] .pip-emotion-mark::before { content: "?"; }

.pip-avatar[data-state="thinking"] .pip-body {
  animation: pip-think 3.2s ease-in-out infinite;
}

.pip-avatar[data-state="thinking"] {
  --pip-arm-duration: 2.8s;
  --pip-arm-left-rest: -12deg;
  --pip-arm-left-peak: 4deg;
  --pip-arm-left-reach: 0.68;
  --pip-arm-right-rest: -26deg;
  --pip-arm-right-peak: -42deg;
  --pip-arm-right-reach: 0.72;
}

.pip-avatar[data-state="thinking"] .pip-eye--left {
  --pip-eye-x: -5%;
  --pip-eye-y: -8%;
  --pip-eye-open: 0.82;
}

.pip-avatar[data-state="thinking"] .pip-eye--right {
  --pip-eye-x: 8%;
  --pip-eye-y: 7%;
}

.pip-avatar[data-state="thinking"] .pip-orbit {
  animation: pip-orbit 2.4s linear infinite;
}

.pip-avatar[data-state="thinking"] .pip-headband-tail { animation-duration: 3.4s; }

.pip-avatar[data-state="thinking"] .pip-brow--left { transform: rotate(-15deg) translateY(-25%); }
.pip-avatar[data-state="thinking"] .pip-brow--right { transform: rotate(8deg) translateY(20%); }
.pip-avatar[data-state="thinking"] .pip-mouth { left: 45%; width: 14%; height: 2%; border: 0; border-radius: 999px; background: var(--pip-eye-color); transform: rotate(-5deg); }
.pip-avatar[data-state="thinking"] .pip-emotion-mark::before { content: "…"; transform: translateY(-20%); }

.pip-avatar[data-state="encouraging"] {
  --pip-arm-duration: 1.35s;
  --pip-arm-left-rest: 18deg;
  --pip-arm-left-peak: 38deg;
  --pip-arm-right-rest: -18deg;
  --pip-arm-right-peak: -38deg;
}

.pip-avatar[data-state="encouraging"] .pip-body { animation: pip-encourage 1.8s ease-in-out infinite; }
.pip-avatar[data-state="encouraging"] .pip-brow { transform: translateY(-10%); }
.pip-avatar[data-state="encouraging"] .pip-mouth { left: 40%; width: 25%; height: 12%; }
.pip-avatar[data-state="encouraging"] .pip-emotion-mark { background: #d9efe4; }
.pip-avatar[data-state="encouraging"] .pip-emotion-mark::before { content: "✓"; }

.pip-avatar[data-state="guiding"] .pip-body {
  animation: pip-guide 2.6s ease-in-out infinite;
}

.pip-avatar[data-state="guiding"] {
  --pip-arm-duration: 1.55s;
  --pip-arm-left-rest: 0deg;
  --pip-arm-left-peak: 16deg;
  --pip-arm-right-rest: -6deg;
  --pip-arm-right-peak: -30deg;
  --pip-arm-right-reach: 0.96;
  --pip-arm-right-peak-reach: 1.12;
}

.pip-avatar[data-state="guiding"] .pip-eye {
  --pip-eye-x: 10%;
}

.pip-avatar[data-state="guiding"] .pip-brow { transform: rotate(2deg); }
.pip-avatar[data-state="guiding"] .pip-mouth { left: 41%; width: 23%; }
.pip-avatar[data-state="guiding"] .pip-emotion-mark::before { content: "→"; }

.pip-avatar[data-state="aha"] {
  --pip-arm-duration: 760ms;
  --pip-arm-left-rest: 28deg;
  --pip-arm-left-peak: 52deg;
  --pip-arm-right-rest: -28deg;
  --pip-arm-right-peak: -52deg;
}

.pip-avatar[data-state="aha"] .pip-body { animation: pip-aha 900ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite alternate; }
.pip-avatar[data-state="aha"] .pip-eye { width: 16%; height: 25%; }
.pip-avatar[data-state="aha"] .pip-brow { transform: translateY(-35%); }
.pip-avatar[data-state="aha"] .pip-mouth { left: 45%; width: 12%; height: 12%; border-color: var(--pip-eye-color); border-radius: 50%; }
.pip-avatar[data-state="aha"] .pip-emotion-mark { background: var(--pip-orbit-color); color: var(--ink, #10251f); }
.pip-avatar[data-state="aha"] .pip-emotion-mark::before { content: "!"; }
.pip-avatar[data-state="aha"] .pip-spark { animation: pip-spark 1.25s ease-out infinite; }
.pip-avatar[data-state="aha"] .pip-headband-tail,
.pip-avatar[data-state="celebrating"] .pip-headband-tail { animation-duration: 820ms; }

.pip-avatar[data-state="celebrating"] .pip-body {
  animation: pip-celebrate 900ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite alternate;
}

.pip-avatar[data-state="celebrating"] {
  --pip-arm-duration: 880ms;
  --pip-arm-left-rest: 30deg;
  --pip-arm-left-peak: 58deg;
  --pip-arm-left-reach: 0.9;
  --pip-arm-left-peak-reach: 1.06;
  --pip-arm-right-rest: -30deg;
  --pip-arm-right-peak: -58deg;
  --pip-arm-right-reach: 0.9;
  --pip-arm-right-peak-reach: 1.06;
}

.pip-avatar[data-state="celebrating"] .pip-spark {
  animation: pip-spark 1.4s ease-out infinite;
}

.pip-avatar[data-state="celebrating"] .pip-spark--two {
  animation-delay: 180ms;
}

.pip-avatar[data-state="celebrating"] .pip-spark--three {
  animation-delay: 360ms;
}

.pip-avatar[data-state="celebrating"] .pip-brow { transform: translateY(-30%); }
.pip-avatar[data-state="celebrating"] .pip-eye { --pip-eye-open: 0.45; }
.pip-avatar[data-state="celebrating"] .pip-mouth { left: 37%; width: 31%; height: 15%; }
.pip-avatar[data-state="celebrating"] .pip-emotion-mark { background: var(--pip-orbit-color); color: var(--ink, #10251f); }
.pip-avatar[data-state="celebrating"] .pip-emotion-mark::before { content: "★"; }

.pip-avatar[data-state="caution"] {
  --pip-orbit-color: #ef8e7f;
  --pip-arm-duration: 1.1s;
  --pip-arm-left-rest: -10deg;
  --pip-arm-left-peak: -18deg;
  --pip-arm-left-reach: 0.66;
  --pip-arm-right-rest: 10deg;
  --pip-arm-right-peak: 18deg;
  --pip-arm-right-reach: 0.66;
}

.pip-avatar[data-state="caution"] .pip-body {
  animation: pip-caution 1.1s ease-in-out infinite;
}

.pip-avatar[data-state="caution"] .pip-eye {
  height: 10%;
  --pip-eye-rotate: 10deg;
}

.pip-avatar[data-state="caution"] .pip-eye--right {
  --pip-eye-rotate: -10deg;
}

.pip-avatar[data-state="caution"] .pip-brow--left { transform: rotate(16deg) translateY(10%); }
.pip-avatar[data-state="caution"] .pip-brow--right { transform: rotate(-16deg) translateY(10%); }
.pip-avatar[data-state="caution"] .pip-mouth { top: 69%; left: 41%; width: 23%; height: 11%; border-top-color: var(--pip-eye-color); border-bottom-color: transparent; border-radius: 999px 999px 0 0; }
.pip-avatar[data-state="caution"] .pip-emotion-mark { background: #ffe1dc; color: #8c3024; }
.pip-avatar[data-state="caution"] .pip-emotion-mark::before { content: "!"; }

.pip-avatar[data-state="cool"] {
  --pip-arm-duration: 2.4s;
  --pip-arm-left-rest: 2deg;
  --pip-arm-left-peak: 12deg;
  --pip-arm-right-rest: -2deg;
  --pip-arm-right-peak: -12deg;
}

.pip-avatar[data-state="cool"] .pip-body { animation: pip-cool 2.6s ease-in-out infinite; }
.pip-avatar[data-state="cool"] .pip-brow { opacity: 0; }
.pip-avatar[data-state="cool"] .pip-glasses { display: block; }
.pip-avatar[data-state="cool"] .pip-mouth { left: 40%; width: 25%; height: 11%; transform: rotate(-4deg); }
.pip-avatar[data-state="cool"] .pip-emotion-mark { background: #18342d; color: var(--pip-orbit-color); }
.pip-avatar[data-state="cool"] .pip-emotion-mark::before { content: "◆"; }

.pip-avatar[data-visible="false"] *,
.pip-avatar[data-visible="false"] *::before,
.pip-avatar[data-visible="false"] *::after {
  animation-play-state: paused !important;
}

@keyframes pip-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5%) rotate(1deg); }
}

@keyframes pip-blink {
  0%, 43%, 47%, 100% {
    transform: translate(var(--pip-eye-x), var(--pip-eye-y)) rotate(var(--pip-eye-rotate)) scaleY(var(--pip-eye-open));
  }
  45% {
    transform: translate(var(--pip-eye-x), var(--pip-eye-y)) rotate(var(--pip-eye-rotate)) scaleY(0.08);
  }
}

@keyframes pip-arm-left {
  0%, 100% {
    transform: rotate(var(--pip-arm-left-rest)) scaleX(var(--pip-arm-left-reach));
  }
  50% {
    transform: rotate(var(--pip-arm-left-peak)) scaleX(var(--pip-arm-left-peak-reach));
  }
}

@keyframes pip-arm-right {
  0%, 100% {
    transform: rotate(var(--pip-arm-right-rest)) scaleX(var(--pip-arm-right-reach));
  }
  50% {
    transform: rotate(var(--pip-arm-right-peak)) scaleX(var(--pip-arm-right-peak-reach));
  }
}

@keyframes pip-headband-tail {
  0%, 100% { translate: 0 0; rotate: -3deg; scale: 1 1; }
  50% { translate: 3% -12%; rotate: -12deg; scale: 1.08 0.92; }
}

@keyframes pip-curious {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-4%) rotate(4deg); }
}

@keyframes pip-think {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50% { transform: translateY(-2%) rotate(3deg) scale(0.97); }
}

@keyframes pip-orbit {
  to { transform: rotate(360deg); }
}

@keyframes pip-guide {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  50% { transform: translateX(3%) rotate(3deg); }
}

@keyframes pip-encourage {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4%) scale(1.03); }
}

@keyframes pip-aha {
  from { transform: translateY(2%) scale(0.96) rotate(-3deg); }
  to { transform: translateY(-8%) scale(1.05) rotate(3deg); }
}

@keyframes pip-cool {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-3%) rotate(2deg); }
}

@keyframes pip-celebrate {
  from { transform: translateY(0) rotate(-5deg) scale(0.98); }
  to { transform: translateY(-9%) rotate(5deg) scale(1.02); }
}

@keyframes pip-spark {
  0% { opacity: 0; transform: rotate(45deg) scale(0) translateY(30%); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: rotate(135deg) scale(1) translateY(-70%); }
}

@keyframes pip-caution {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-2%) rotate(-2deg); }
  75% { transform: translateX(2%) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pip-avatar *,
  .pip-avatar *::before,
  .pip-avatar *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .pip-avatar[data-state="celebrating"] .pip-spark,
  .pip-avatar[data-state="aha"] .pip-spark {
    opacity: 0.85;
    transform: rotate(45deg) scale(0.8);
  }
}