/* Original HSI companions; decorative accents inherit the brand palette. */
:root { --color-mascot-shell: #e6edff; --color-mascot-warm: #ffe3c8; }
.hsi-mascots { width: min(100%, 190px); color: var(--color-ink); }
.hsi-mascots__stage { display: flex; align-items: flex-end; gap: var(--space-xs); width: 100%; }
.hsi-mascots__unit { display: block; width: 30%; height: auto; aspect-ratio: 120 / 140; flex: 0 1 auto; overflow: visible; transform-origin: center 92%; pointer-events: none; }
.hsi-mascots__unit--scout { width: 32%; }
.hsi-mascots__unit--maker { width: 27%; }
.hsi-mascots--enhanced .hsi-mascots__unit { animation: hsi-mascot-sway 3s ease-in-out infinite; animation-play-state: paused; }
.hsi-mascots--enhanced .hsi-mascots__unit--maker { animation-duration: 3.5s; animation-delay: -1.2s; }
.hsi-mascots--enhanced .hsi-mascots__unit--navigator { animation-duration: 4s; animation-delay: -2.2s; }
.hsi-mascots.is-running .hsi-mascots__unit { animation-play-state: running; }
@keyframes hsi-mascot-sway { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
@media (max-width: 760px) { .hsi-mascots { width: 120px; } }
@media (prefers-reduced-motion: reduce) { .hsi-mascots--enhanced .hsi-mascots__unit { animation: none; } }