/* & Forma expresiva (M3): un borde orgánico que muta lento; nunca un círculo plano. */
owner-avatar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 28px;
  font-weight: 600;
  font-variation-settings: 'opsz' 36;
  letter-spacing: -0.5px;
}

@media (prefers-reduced-motion: no-preference) {
  owner-avatar {
    animation: breathe 9s ease-in-out infinite alternate;
  }
}

@keyframes breathe {
  50% {
    border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%;
  }

  100% {
    border-radius: 42% 58% 56% 44% / 56% 48% 52% 44%;
  }
}