.avatar { width: 240px; margin: -18px auto 12px; position: relative; }
.avatar-view { position: relative; width: 240px; height: 240px; }
.avatar-view canvas, .avatar-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar-poster { object-fit: contain; }
.avatar-view canvas { visibility: hidden; }
/* Both layers share one pose; swap after the first render, without a double-exposed fade. */
.avatar-ready .avatar-view canvas { visibility: visible; }
.avatar-ready .avatar-poster { visibility: hidden; }
@media(max-width:640px) { .avatar { width: 220px; margin-top: 0; margin-bottom: 16px; } .avatar-view { width: 220px; height: 220px; } }