/* The studio's program picture (used by the director, viewers and the cloud mix) */
.pst [hidden],.cam [hidden],.pvw [hidden]{display:none!important}
.pst{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;container-type:inline-size;color:#fff;font-family:"DM Sans",system-ui,sans-serif}
.pst-vids,.pst-v{position:absolute;inset:0}
.pst-v{width:100%;height:100%;object-fit:cover;opacity:0;z-index:1}
.pst-v.on{opacity:1;z-index:2}
.pst-v.fade{transition:opacity .6s ease}
.pst-v.was{opacity:1;z-index:1}
.pst-pip{position:absolute;width:28%;aspect-ratio:16/9;border-radius:1.2cqi;overflow:hidden;box-shadow:0 .6cqi 2cqi rgba(0,0,0,.5);z-index:5;border:.25cqi solid rgba(255,255,255,.85)}
.pst-pip .pst-v{opacity:1}
.pst-tl{top:4%;left:3%}.pst-tr{top:4%;right:3%}.pst-bl{bottom:6%;left:3%}.pst-br{bottom:6%;right:3%}
.pst-logo{position:absolute;top:4.5%;right:3.5%;height:5.5%;max-width:12%;opacity:.85;object-fit:contain;z-index:6;filter:drop-shadow(0 .2cqi .6cqi rgba(0,0,0,.5))}
.pst-third{position:absolute;left:4%;bottom:9%;z-index:7;display:flex;flex-direction:column;max-width:70%;animation:pst-in .45s cubic-bezier(.2,.8,.2,1)}
.pst-third b{background:var(--bc,#FF5A36);color:#fff;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:3.1cqi;line-height:1.1;padding:.9cqi 1.6cqi;border-radius:.6cqi .6cqi .6cqi 0}
.pst-third span:not(:empty){background:rgba(14,13,18,.88);font-size:2cqi;padding:.7cqi 1.6cqi;border-radius:0 0 .6cqi .6cqi;align-self:flex-start}
@keyframes pst-in{from{transform:translateX(-4cqi);opacity:0}to{transform:none;opacity:1}}
.pst-cap{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);z-index:8;max-width:84%;background:rgba(0,0,0,.78);font-size:2.6cqi;line-height:1.3;padding:.5cqi 1.2cqi;border-radius:.6cqi;text-align:center}
.pst-slate{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--bc,#FF5A36) 55%,#0E0D12),#0E0D12 70%)}
.pst-slate-in{display:flex;flex-direction:column;align-items:center;gap:1.4cqi;text-align:center;padding:4cqi}
.pst-slate img{height:12cqi;max-width:40cqi;object-fit:contain}
.pst-slate b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:6cqi;letter-spacing:-.02em;line-height:1.05}
.pst-slate span{font-size:2.4cqi;opacity:.8}
.pst-wait{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font-size:2.4cqi;color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:reduce){.pst-third{animation:none}.pst-v.fade{transition:none}}

/* Director */
.stu{display:flex;flex-direction:column;gap:12px}
.stu-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stu-top h1{font-size:1.375rem;margin:0;flex:1;min-width:160px}
.stu-clock{font-variant-numeric:tabular-nums;font-weight:700}
.stu-mon{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:900px){.stu-mon{grid-template-columns:1fr auto 1fr;align-items:center}}
.stu-box{display:flex;flex-direction:column;gap:6px}
.stu-box>label{font-size:0.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:6px;align-items:center}
.stu-box.pv .pst,.stu-box.pv .stu-raw{outline:3px solid #2FBF71;border-radius:10px}
.stu-box.pg .pst{outline:3px solid #E5484D;border-radius:10px}
.stu-raw{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:0.8125rem}
.stu-raw video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stu-tb{display:flex;flex-direction:row;gap:8px;justify-content:center}
@media (min-width:900px){.stu-tb{flex-direction:column}}
.stu-tb .btn{min-width:96px;justify-content:center}
.stu-src{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.stu-tile{position:relative;border-radius:10px;overflow:hidden;background:var(--surface-2);border:2px solid transparent;cursor:pointer;text-align:left;padding:0;color:inherit}
.stu-tile .stu-raw{border-radius:0}
.stu-tile.is-pv{border-color:#2FBF71}.stu-tile.is-pg{border-color:#E5484D}
.stu-tile .stu-cap{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;font-size:0.7812rem}
.stu-tile .stu-cap b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stu-key{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:0.6875rem;font-weight:700;border-radius:6px;padding:1px 6px;z-index:2}
.stu-dot{width:8px;height:8px;border-radius:50%;background:#7B7685;flex:none}.stu-dot.ok{background:#2FBF71}.stu-dot.poor{background:#F5A524}.stu-dot.lost{background:#E5484D}
.stu-add{display:grid;place-items:center;min-height:120px;border:2px dashed var(--line-2);border-radius:10px;background:none;color:var(--muted);cursor:pointer;font-weight:700}
.stu-panel{display:flex;flex-direction:column;gap:10px}
.stu-meter{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}.stu-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2FBF71,#F5A524 75%,#E5484D);transition:width .1s}
.stu-mix{display:grid;grid-template-columns:minmax(90px,1fr) 2fr auto auto;gap:8px;align-items:center}
.stu-mix input[type=range]{width:100%}
.stu-qr{display:grid;place-items:center;gap:8px}.stu-qr canvas{width:220px;height:220px;background:#fff;border-radius:12px;padding:8px;image-rendering:pixelated}
.stu-est{font-size:0.8125rem}

/* Camera phone */
.cam{position:fixed;inset:0;background:#000;color:#fff;display:flex;flex-direction:column;z-index:50;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-frame{position:absolute;inset:0;border:0 solid transparent;pointer-events:none;transition:border-color .15s,border-width .15s;z-index:2}
.cam-frame.live{border-width:10px;border-color:#E5484D}.cam-frame.next{border-width:10px;border-color:#2FBF71}
.cam-top,.cam-bot{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding:12px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.cam-bot{margin-top:auto;justify-content:center;background:linear-gradient(transparent,rgba(0,0,0,.65));flex-wrap:wrap}
.cam-top b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-tally{font-weight:800;font-size:0.8125rem;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.15)}
.cam-tally.live{background:#E5484D}.cam-tally.next{background:#2FBF71}
.cam-note{position:relative;z-index:3;margin:auto 16px;background:rgba(14,13,18,.88);border-radius:16px;padding:18px;text-align:center;display:flex;flex-direction:column;gap:10px}
.cam .btn.light{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}

/* Viewer */
.pvw{position:relative;width:100%}
.pvw video.pvw-hls{width:100%;aspect-ratio:16/9;background:#000;display:block}
.pvw-bar{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;z-index:12}
.pvw-bar .btn{background:rgba(0,0,0,.6);color:#fff;border-color:transparent}
.pvw-tap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;font-size:1.2rem;padding:18px 30px;min-height:64px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap}
.pvw-msg{aspect-ratio:16/9;display:grid;place-items:center;background:#0E0D12;color:#fff;text-align:center;padding:20px;border-radius:12px}
.pvw-msg>div{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:420px}
.pvw-nocc .pst-cap{display:none!important}
/* On screen: the logo's corner and size, all-white, the corner label and the words across the bottom */
.pst[data-lsize="s"] .pst-logo{height:6.5%} .pst[data-lsize="m"] .pst-logo{height:9%} .pst[data-lsize="l"] .pst-logo{height:12.5%}
.pst[data-lpos] .pst-logo{max-width:24%}
.pst[data-lpos="tl"] .pst-logo{top:4.5%;left:3.5%;right:auto;bottom:auto} .pst[data-lpos="tr"] .pst-logo{top:4.5%;right:3.5%;left:auto;bottom:auto}
.pst[data-lpos="bl"] .pst-logo{bottom:4.5%;left:3.5%;top:auto;right:auto} .pst[data-lpos="br"] .pst-logo{bottom:4.5%;right:3.5%;top:auto;left:auto}
.pst.pst-white .pst-logo{filter:brightness(0) invert(1) drop-shadow(0 .2cqi .6cqi rgba(0,0,0,.5));opacity:1}
.pst-tag{position:absolute;top:4.5%;left:3.5%;z-index:7;display:flex;align-items:stretch;max-width:46%;background:rgba(14,13,18,.82);color:#fff;border-radius:.8cqi;overflow:hidden;font:800 1.9cqi/1.15 "Bricolage Grotesque",system-ui,sans-serif;animation:pst-in .4s cubic-bezier(.2,.8,.2,1)}
.pst-tag i{width:.55cqi;background:var(--bc,#FF5A36);flex:none} .pst-tag span{padding:1cqi 1.1cqi;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pst[data-lpos="tl"] .pst-tag{left:auto;right:3.5%}
.pst-words{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:7;max-width:80%;width:max-content;text-align:center}
.pst-words span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;background:rgba(0,0,0,.55);color:#fff;border-radius:.9cqi;padding:.8cqi 1.6cqi;font:800 3cqi/1.22 "Bricolage Grotesque",system-ui,sans-serif;text-shadow:0 .1cqi .5cqi rgba(0,0,0,.6)}
.pst.pst-has-third .pst-words{bottom:31%}
.pst[data-lpos="bl"] .pst-words,.pst[data-lpos="br"] .pst-words{bottom:max(8%,calc(6% + 12.5%))}