/* The studio illustrations are isolated from the previous CSS mascot shapes. */
.site-pet { display: block; position: relative; width: 100%; height: 100%; pointer-events: none; }
.site-pet svg { display: block; width: 100%; height: 100%; overflow: visible; }
.character-portrait > [data-character-variant] { position: absolute; inset: 0; }
.character-portrait > [data-character-variant][hidden], .pet-thumb [hidden] { display: none; }
.character-portrait .site-pet { position: absolute; width: 106%; height: 117%; left: -3%; bottom: -12%; }
.character-portrait .site-pet svg { filter: drop-shadow(0 9px 9px #342a2412); }
.character-glint { display: none; }
.character-portrait .art-head { will-change: transform; }
.site-pet .art-eye { transform-box: fill-box; transform-origin: center; transform: scaleY(var(--blink, 1)); }
.site-pet .art-pupil { will-change: transform; }
.pet-thumb { position: relative; overflow: hidden; }
.pet-thumb > [data-character-variant] { position: absolute; inset: 0; }
.pet-thumb .site-pet { width: 126%; height: 138%; left: -13%; top: -7%; }
.character-stage.is-switching .site-pet { opacity: .6; }
.character-portrait .site-pet { transition: opacity .12s ease; }
@media (prefers-reduced-motion: reduce) { .character-portrait .site-pet { transition: none; } }