.baby-avatar {
  --baby-clothes: #dba3b0;
  --baby-clothes-dark: #b66f84;
  --baby-clothes-light: #f0d0d8;
  display: block;
  width: 120px;
  height: 146px;
  flex: 0 0 auto;
  isolation: isolate;
}
.baby-avatar.is-boy {
  --baby-clothes: #8eb3c9;
  --baby-clothes-dark: #5b859d;
  --baby-clothes-light: #c9dfe9;
}
.baby-avatar .baby-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.baby-avatar .baby-clothing { fill: var(--baby-clothes); }
.baby-avatar .baby-collar { stroke: var(--baby-clothes-light); }
.baby-avatar .baby-seam { stroke: var(--baby-clothes-dark); }
.baby-avatar .baby-button { fill: var(--baby-clothes-light); }
.baby-avatar .baby-figure {
  transform-origin: 70px 148px;
  animation: baby-breathe 4.8s ease-in-out infinite;
}
.baby-avatar .baby-wave {
  transform-origin: 97px 109px;
  animation: baby-wave 8s ease-in-out infinite;
}
.baby-avatar .baby-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: baby-blink 6.4s linear infinite;
}
@keyframes baby-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes baby-wave {
  0%, 8%, 24%, 100% { transform: rotate(0); }
  12%, 20% { transform: rotate(-9deg); }
  16% { transform: rotate(5deg); }
}
@keyframes baby-blink {
  0%, 42%, 46%, 100% { transform: scaleY(1); }
  43.5%, 44.5% { transform: scaleY(.08); }
}
@media (max-width: 360px) {
  .baby-avatar { width: 90px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .baby-avatar .baby-figure,
  .baby-avatar .baby-wave,
  .baby-avatar .baby-eyes { animation: none; }
}