/* ORI - only what Motion Transfer's stylesheet does not carry. */
.ori-body{--mt-accent:#f4f4f6}

/* the outfit: two slots, a top and a bottom */
.ori-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ori-slot{display:grid;gap:8px;align-content:start}
.ori-slotHead{display:flex;justify-content:space-between;align-items:baseline;font:700 13px/1 Inter,system-ui,sans-serif;color:#fff}
.ori-count{font:600 11.5px/1 Inter,system-ui,sans-serif;color:#8f8aa6}
.ori-slot .ad-drop{min-height:120px}
.ori-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ori-thumb{position:relative}
.ori-thumb img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#fff;border:2px solid rgba(255,255,255,.12)}
.ori-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;
  font:700 15px/24px Inter,system-ui,sans-serif;padding:0;cursor:pointer}
.ori-tip{margin:10px 0 0;color:#8f8aa6;font:500 12.5px/1.4 Inter,system-ui,sans-serif}

/* the motion: a film per motion, playing; the picked one is outlined */
.ori-tipTop{margin:0 0 10px}
.ori-motions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ori-motion{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}
.ori-motion video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:#111118;
  border:2px solid rgba(255,255,255,.12);transition:border-color .15s ease;pointer-events:none}
.ori-motion.is-on{color:#fff}
.ori-motion.is-on video{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.ori-motionSoon{display:grid;place-items:center;width:100%;aspect-ratio:9/16;border-radius:12px;background:#111118;
  border:2px solid rgba(255,255,255,.12);color:#8f8aa6;font:600 12px/1.3 Inter,system-ui,sans-serif;font-style:normal}
.ori-motion.is-on .ori-motionSoon{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3);color:#fff}
.ori-motion:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}

/* the model: woman or man, then the pictures */
.ori-gender{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.ori-gender button{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}
.ori-gender button.is-on{border-color:#fff;color:#fff}
.ori-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ori-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}
.ori-tile img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:#111118;
  border:2px solid rgba(255,255,255,.12);transition:border-color .15s ease}
.ori-tile.is-on{color:#fff}
.ori-tile.is-on img{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.ori-tile:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}
.ori-soon{grid-column:1/-1;margin:0;padding:22px 14px;border-radius:12px;border:2px dashed rgba(255,255,255,.12);
  color:#8f8aa6;font:600 13px/1.4 Inter,system-ui,sans-serif;text-align:center}

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

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

/* Phone: the Generate bar sits in the page right after the models, never
   floating across them (the owner, 20 Oct 2026, from the screenshot). */
@media (max-width:1059px){
  .ori-body .ad-bar{position:static;order:0;box-shadow:none}
}
