*{box-sizing:border-box}body{margin:0;background:#071321;color:#f8f3e7;font:16px/1.5 system-ui}a{color:#ffda86}.desk{max-width:1050px;margin:auto;padding:24px}h1{color:#ffda86}section,details{border:1px solid #a57d3a;border-radius:16px;padding:20px;margin:18px 0;background:#102238}button,input,select{font:inherit;border-radius:8px;padding:9px 12px}button{background:#f5cc78;color:#172438;border:0;font-weight:700;cursor:pointer}button:disabled{opacity:.4;cursor:default}select{max-width:100%;width:100%}#code{display:block;font-size:32px;letter-spacing:4px;color:#ffda86}#share{overflow-wrap:anywhere}.controls{display:flex;flex-wrap:wrap;gap:10px}#preview{display:block;width:100%;max-height:300px;background:#000;margin:15px 0}.audience,#stage{width:100%;height:100vh;overflow:hidden;background:#000}#stage{display:grid;place-items:center;position:relative}.theatre{position:relative;width:min(100vw,178.5527463vh);aspect-ratio:2048/1147}.theatre-bg{width:100%;height:100%;display:block}.screen{position:absolute;left:31.884765625%;top:17.175239756%;width:34.912109375%;height:38.971229294%;background:#000;overflow:hidden}#film{width:100%;height:100%;object-fit:contain;display:block}#holding{position:absolute;inset:0;background:#03070d;overflow:hidden}#holding[hidden]{display:none}#holding img{position:absolute;width:80%;left:10%;top:50%;transform:translateY(-25%)}#join{position:absolute;max-width:420px;width:92%;padding:25px;border:1px solid #f5cc78;border-radius:15px;background:#102238}#join label{display:block;margin:12px 0}#join input:not([type=checkbox]){width:100%;text-transform:uppercase}#join[hidden]{display:none}#stage:fullscreen{height:100%;cursor:none}@supports(height:100dvh){.audience,#stage{height:100dvh}.theatre{width:min(100vw,178.5527463dvh)}}

/* While a clip plays, the audience sees the snippet across the display. */
#stage.playing .theatre{width:100%;height:100%;aspect-ratio:auto}
#stage.playing .theatre-bg{display:none}
#stage.playing .screen{inset:0;width:100%;height:100%}
#stage.playing #film{width:100%;height:100%;object-fit:contain;background:#000}
#stage.playing{cursor:none}

/* The video and holding artwork are independent layers. */
#stage>#film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;visibility:hidden;z-index:2}
#stage.playing>#film{visibility:visible}
#stage.playing .theatre{display:none}
#stage>#join{z-index:3}