/* Preserve the painted body proportions: size uniformly, never stretch an axis. */
.anime-avatar{background-size:348.333333% 195.9375%}
.cast-0{background-position:15.659955% 0}
.cast-1{background-position:52.572707% 0}
.cast-2{background-position:91.722595% 0}
.cast-3{background-position:14.541387% 104.234528%}
.cast-4{background-position:52.572707% 104.234528%}
.cast-5{background-position:91.722595% 104.234528%}
/* The approved pair keeps its own atlas and original proportions. */
.cast-6,.cast-7{position:relative;background-image:none}
/* Center the painted silhouette, not the unequal transparent padding in each cell.
   Cell width 656px; silhouette centers are x=436 and x=228 within their cells. */
.cast-6{--cast-center-shift:-16.4634146%}
.cast-7{--cast-center-shift:15.2439024%}
.anime-avatar.cast-6:before,.anime-avatar.cast-7:before{content:'';position:absolute;top:0;left:50%;height:100%;aspect-ratio:656/1199;transform:translateX(calc(-50% + var(--cast-center-shift)));background:url('/assets/anime-cast-pair-v1.webp') 0 0/200% 100% no-repeat}
.anime-avatar.cast-7:before{background-position:100% 0}
.person{width:220px;height:330px}
.room .scene{height:440px}
.landing .person{width:264px;height:396px}
.avatar-preview{height:456px}
.avatar-preview>.anime-avatar{height:396px;width:auto;bottom:54px;aspect-ratio:9/16}
.presets{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(min-width:761px) and (max-width:900px){.presets{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:1000px) and (min-width:761px){
 .landing .person{width:235px;height:352px}
 .room .scene{height:420px}
 .room .scene .person{width:198px;height:297px}
}
@media(max-width:760px){
 .presets .preset-name{font-size:11px;letter-spacing:0}
 .landing .scene{min-height:570px;max-height:650px}
 .landing .person{width:205px;height:308px}
 .room .scene{height:395px}
 .room .scene .person{width:198px;height:297px}
 .avatar-preview{height:365px}
 .avatar-preview>.anime-avatar{height:310px;width:auto;bottom:48px;aspect-ratio:9/16}
}