/* Character Shoot - only what Motion Transfer's stylesheet does not carry. */
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/inter-latin-900-normal.woff2) format("woff2")}

.cs-body{--mt-accent:#ff3df0}
#csThumb{width:96px;height:96px;object-fit:cover;border-radius:14px;display:block;background:#0b0b12}
#csText{width:100%;text-transform:uppercase;letter-spacing:.02em}

/* the outfit picker: four, two by two */
.cs-outfits{grid-template-columns:1fr 1fr}

/* the five looks, always the same */
.cs-looks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cs-look{display:grid;justify-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#c9c2df}
.cs-look i{display:block;width:100%;aspect-ratio:9/16;border-radius:10px;background:var(--c);
  border:1px solid rgba(255,255,255,.12);background-size:cover;background-position:center}
.cs-look.is-made i{border-color:rgba(255,255,255,.5)}

/* the result is a vertical video */
.cs-outBox{width:auto;height:min(78vh,840px);aspect-ratio:9/16;max-width:100%;align-self:center;position:relative}
.cs-bar{position:absolute;left:16px;right:16px;bottom:16px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.cs-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22e6ff,#ff3df0);transition:width .3s ease}

@media (max-width:900px){
  .cs-outBox{height:auto;width:min(100%,calc(70vh*9/16))}
}