.film-process-version { display:inline-flex; gap:8px; }
.film-process-stage-wrap { display:flex; justify-content:center; background:var(--brand-green); }
.film-process-stage { width:min(100%,calc(47svh * 1.6875)); aspect-ratio:27/16; position:relative; overflow:hidden; background:var(--brand-green); }
.film-process-stage video { position:absolute; display:block; inset:0; width:100%; height:100%; object-fit:fill; }
.film-process-stage.is-loading video { visibility:hidden; }
.film-process-loading { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:90%; width:max-content; padding:9px 13px; background:var(--brand-green); color:var(--brand-cream); font-size:12px; text-align:center; }
.film-process-seams { position:absolute; inset:0; display:flex; justify-content:space-evenly; pointer-events:none; }
.film-process-seams span { width:1px; background:var(--brand-apricot); opacity:.8; }
.film-process-controls { display:flex; align-items:center; gap:14px; margin:16px 0 24px; }
.film-process-controls button { display:grid; place-items:center; min-width:40px; min-height:40px; padding:8px 13px; border:1px solid var(--frame); background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; }
.film-process-controls button:disabled { opacity:.5; cursor:wait; }
.film-process-controls svg { width:20px; height:20px; }
.film-process-timeline { flex:1; display:flex; align-items:center; gap:16px; min-width:0; }
.film-process-seek { width:100%; min-width:0; height:20px; accent-color:var(--frame); cursor:ew-resize; }
.film-process-timeline output { white-space:nowrap; font:11px 'DM Mono',monospace; min-width:96px; color:var(--muted); text-align:right; }
.film-process-foot { border-top:1px solid var(--frame); padding:18px 0 0; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.film-process-foot p { margin:0; font-size:12px; }
.film-process-foot strong { font-weight:500; font-size:21px; padding-right:3px; }
.film-process-foot p>span { padding:0 8px; opacity:.5; }
.film-process-foot>span { font-size:11px; opacity:.6; }
.film-process-lanes { display:none; }
.film-process button:focus-visible,.film-process input:focus-visible { outline:2px solid var(--frame); outline-offset:4px; }
@media(max-width:600px) {
  .film-process-version { gap:5px; }
  .film-process-lanes { display:flex; margin:8px 0; }
  .film-process-lanes button { flex:1; border:0; border-bottom:1px solid transparent; background:transparent; color:var(--muted); font:inherit; font-size:12px; padding:8px; cursor:pointer; }
  .film-process-lanes button[aria-pressed=true] { border-color:var(--frame); color:var(--ink); }
  .film-process-stage { width:min(100%,calc(48svh * .5625)); aspect-ratio:9/16; }
  .film-process-stage video { width:300%; max-width:none; transform:translateX(calc(var(--sequence) * -33.333333%)); }
  .film-process-seams { display:none; }
  .film-process-controls { gap:8px; flex-wrap:wrap; margin:14px 0 20px; }
  .film-process-timeline { order:3; flex-basis:100%; margin-top:3px; gap:12px; }
  .film-process-foot { display:block; padding-top:16px; }
  .film-process-foot p { font-size:11px; }
  .film-process-foot strong { font-size:19px; }
  .film-process-foot p>span { padding:0 4px; }
  .film-process-foot>span { display:block; margin-top:8px; font-size:10px; }
}