/* Mia - only what Motion Transfer's stylesheet does not carry. */
.mia-body{--mt-accent:#f4f4f6}
#miaThumb{width:96px;height:96px;object-fit:cover;border-radius:14px;display:block;background:#0b0b12}

/* the catalogue: big pictures, three across */
.mia-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mia-tile{position:relative;display:grid;gap:6px;padding:0;border:0;background:none;color:#c9c2df;font:700 12.5px/1.2 Inter,system-ui,sans-serif;cursor:pointer;text-align:center}
.mia-tile img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#111118;background-clip:padding-box;
  border:2px solid rgba(255,255,255,.12);transition:border-color .15s ease,transform .15s ease}
.mia-tile:hover img{transform:translateY(-1px)}
.mia-tile.is-on{color:#fff}
.mia-tile.is-on img{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.mia-tile.is-on::after{content:"";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 1px 4px rgba(0,0,0,.5)}
.mia-tile:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}

.mia-none{width:100%;margin:0 0 10px;padding:11px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.12);
  background:#111118;color:#c9c2df;font:700 13px/1 Inter,system-ui,sans-serif;cursor:pointer}
.mia-none.is-on{border-color:#fff;color:#fff}

/* the three optional end-card lines */
.mia-end{display:grid;gap:10px}
.mia-end input{width:100%}

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

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