:root { --paper: #f3f2ee; --teal-d: var(--rly-accent-ui, currentColor); }
* { box-sizing: border-box; }
body.film-page { margin: 0; min-height: 100%; background: #0d0d0d; color: #f0f0f0; font-family: Outfit, system-ui, sans-serif; }
#stage { position: relative; width: 100%; max-width: calc((100vh - 52px) * 16 / 9); margin: 0 auto; }
.frame { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; }
.frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px;
  padding: 16px 26px 16px 20px; border: 0; border-radius: 999px; background: #111; color: #fff; font: 500 18px Outfit, sans-serif; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: progress; opacity: .92; transition: opacity .3s, transform .2s; }
.big.ready { cursor: pointer; opacity: 1; }
.big.ready:hover { transform: translate(-50%, -50%) scale(1.04); }
.big .tri { width: 0; height: 0; border-left: 16px solid var(--teal-d); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.started .big { opacity: 0; pointer-events: none; }
.cc { position: absolute; left: 50%; bottom: 5.5%; transform: translateX(-50%); max-width: 80%; padding: .28em .7em .34em; border-radius: 8px;
  background: rgba(17,17,17,.82); color: #fff; font: 500 clamp(12px, 2.1vw, 30px)/1.3 Outfit, sans-serif; text-align: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
.cc.show { opacity: 1; }
.bar { display: flex; border-radius: 0 0 var(--bar-r, 0) var(--bar-r, 0); align-items: center; gap: 12px; height: 52px; padding: 0 14px; background: #161616; font: 500 13px 'JetBrains Mono', monospace; color: #bdbdbd; }
.bar button { background: none; border: 0; color: #eee; font: 600 14px Outfit, sans-serif; cursor: pointer; padding: 6px 8px; border-radius: 6px; min-width: 34px; }
.bar button:hover { background: #262626; }
.bar .ccb { opacity: .45; font-family: 'JetBrains Mono', monospace; font-size: 12px; border: 1px solid #555; }
.bar .ccb.on { opacity: 1; border-color: var(--teal-d); color: var(--teal-d); }
.scrub { flex: 1; accent-color: var(--teal-d); min-width: 60px; }
.export .bar, .export .big, .export .cc { display: none !important; }
.export #stage { max-width: none; }
:fullscreen .frame, :-webkit-full-screen .frame { height: calc(100vh - 52px); width: auto; margin: 0 auto; }
:fullscreen#stage { max-width: none; background: #000; }
@media (max-width: 600px) { .bar { gap: 6px; padding: 0 8px; } .tt { display: none; } .big { padding: 10px 16px 10px 14px; font-size: 14px; gap: 10px; } .big .tri { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; } }
#stage.vertical { max-width: min(100%, calc((100vh - 52px) * 9 / 16)); }
#stage.vertical .cc { bottom: 3%; }