.avatar-controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:280px;max-width:100%;gap:3px;}
.avatar-controls button {min-height:32px;padding:6px 8px;transition:background-color 180ms ease,color 180ms ease;}
.avatar-controls button[aria-pressed="true"] {color:var(--color-accent);background:var(--color-accent-light);box-shadow:inset 0 0 0 1px var(--color-border);}
.avatar-controls button:focus-visible {outline:2px solid var(--color-accent);outline-offset:1px;}
.hero-avatar-host .avatar-controls {margin-top:-18px;}
.companion-avatar-wrap {width:190px;height:300px;}
.companion-avatar-wrap .avatar-controls {width:190px;gap:2px;padding:4px;}
.companion-avatar-wrap .avatar-controls button {min-height:30px;padding:5px 3px;font-size:.57rem;}
@media(max-width:700px) {
 .avatar-controls {width:248px;}
 .avatar-controls button {font-size:.6rem;}
 .companion-avatar-wrap {width:185px;height:258px;}
 .companion-avatar-wrap .avatar-controls {width:185px;}
 .studio-site .mascot-bubble {bottom:111px;}
}
@media(prefers-reduced-motion:reduce) {.avatar-controls button {transition:none;}}
/* Keep the wake-up control clear of the greeting bubble on narrow screens. */
.hero-avatar-host .avatar-load {left:10px;bottom:15%;transform:none;}
.hero-avatar-host .avatar-controls button {font-size:.69rem;min-height:34px;}
.companion-avatar-wrap .avatar-controls button {font-size:.6rem;}

/* Drawn cels use the same contain geometry as the original poster and rig. */
.avatar-nod-canvas {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.avatar-nod-canvas[hidden] {display:none;}

/* A transparent cel must not reveal a second character layer below it. */
.avatar-nod-active > .avatar-poster,
.avatar-nod-active > .avatar-canvas {visibility:hidden !important;}