:root .sig--film-multiview { background: #111014; }
:root .sig--film-multiview .mv { position: absolute; inset: 0; container-type: size; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; color: #fff; font: 500 11px/1 var(--f-body); }
:root .sig--film-multiview .mv__top { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); }
:root .sig--film-multiview .mv__live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 6px; background: #d61f2c; color: #fff; font: 700 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 18px rgba(214, 31, 44, .55); animation: mvPulse 2s ease-in-out infinite; }
:root .sig--film-multiview .mv__live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: mvBlink 1s steps(2) infinite; }
@keyframes mvPulse{ 50% { box-shadow: 0 0 30px rgba(214, 31, 44, .85); } }
@keyframes mvBlink{ 50% { opacity: .35; } }
:root .sig--film-multiview .mv__tc { color: #fff; font-weight: 600; letter-spacing: .05em; }
:root .sig--film-multiview .mv__net { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
:root .sig--film-multiview .mv__net i { width: 3px; border-radius: 1px; background: #5ae07a; }
:root .sig--film-multiview .mv__net i:nth-child(1) { height: 30%; }
:root .sig--film-multiview .mv__net i:nth-child(2) { height: 55%; }
:root .sig--film-multiview .mv__net i:nth-child(3) { height: 80%; }
:root .sig--film-multiview .mv__net i:nth-child(4) { height: 100%; }
:root .sig--film-multiview .mv__take { margin-left: auto; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; transition: background .4s, color .4s, border-color .4s; }
:root .sig--film-multiview .mv__take.on { background: #d61f2c; border-color: #d61f2c; color: #fff; transition: none; }
:root .sig--film-multiview .mv__pgm { position: relative; justify-self: center; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; box-shadow: 0 0 0 2px #d61f2c, 0 20px 40px -20px rgba(0, 0, 0, .9); }
:root .sig--film-multiview .mv__pl, :root .sig--film-multiview .mv__layer { position: absolute; inset: 0; }
:root .sig--film-multiview .mv__layer > svg, :root .sig--film-multiview .mv__view > svg { display: block; width: 100%; height: 100%; }
:root .sig--film-multiview .mv__tag { position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 4px; background: #d61f2c; font: 700 10px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
:root .sig--film-multiview .mv__au { position: absolute; right: 8px; top: 8px; bottom: 8px; display: flex; gap: 3px; }
:root .sig--film-multiview .mv__au i { width: 4px; border-radius: 2px; background: linear-gradient(0deg, #5ae07a 0 60%, #c98cff 60% 85%, #d61f2c 85%); clip-path: inset(var(--c, 60%) 0 0 0); animation: mvAu .9s ease-in-out infinite alternate; }
:root .sig--film-multiview .mv__au i:last-child { animation-duration: .7s; animation-delay: -.3s; }
@keyframes mvAu{ 0% { clip-path: inset(70% 0 0 0); } 30% { clip-path: inset(35% 0 0 0); } 60% { clip-path: inset(55% 0 0 0); } 100% { clip-path: inset(22% 0 0 0); } }
:root .sig--film-multiview .mv__lt { position: absolute; left: 6%; bottom: 11%; display: grid; gap: 0; transform: translateX(-120%); opacity: 0; transition: transform .7s var(--ease-out), opacity .4s; }
:root .sig--film-multiview .mv__lt.on { transform: none; opacity: 1; }
:root .sig--film-multiview .mv__lt b { padding: .5em .9em; background: #a100ff; font: 600 clamp(12px, 3.4cqw, 18px)/1 var(--f-display); letter-spacing: -.01em; }
:root .sig--film-multiview .mv__lt span { justify-self: start; padding: .45em .9em; background: rgba(12, 8, 18, .88); font: 500 clamp(10px, 2.4cqw, 13px)/1 var(--f-body); color: #fff; transform: translateX(-100%); opacity: 0; transition: transform .6s .25s var(--ease-out), opacity .4s .25s; }
:root .sig--film-multiview .mv__lt.on span { transform: none; opacity: 1; }
:root .sig--film-multiview .mv__cams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:root .sig--film-multiview .mv__cam { margin: 0; display: grid; gap: 5px; }
:root .sig--film-multiview .mv__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); transition: box-shadow .25s; }
:root .sig--film-multiview .mv__cam.pgm .mv__view { box-shadow: 0 0 0 2px #d61f2c; }
:root .sig--film-multiview .mv__cam.pvw .mv__view { box-shadow: 0 0 0 2px #2fbf5b; }
:root .sig--film-multiview .mv__cam figcaption { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .7); font-size: 10px; }
:root .sig--film-multiview .mv__cam figcaption i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .25s, box-shadow .25s; }
:root .sig--film-multiview .mv__cam.pgm figcaption i { background: #d61f2c; box-shadow: 0 0 8px #d61f2c; }
:root .sig--film-multiview .mv__cam.pvw figcaption i { background: #2fbf5b; box-shadow: 0 0 8px #2fbf5b; }
:root .sig--film-multiview .mv__cam.pgm figcaption { color: #fff; }
:root .sig--film-multiview .mv__spk { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(30% 40% at 18% 30%, rgba(242, 178, 80, .45), transparent 70%), radial-gradient(26% 36% at 85% 22%, rgba(161, 0, 255, .55), transparent 70%), radial-gradient(20% 30% at 70% 80%, rgba(227, 184, 255, .3), transparent 70%), #1a1320; }
:root .sig--film-multiview .mv__spk img { position: absolute; left: 50%; top: -22%; width: 118%; translate: -50% 0; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); -webkit-mask: radial-gradient(closest-side, #000 86%, transparent 100%); mask: radial-gradient(closest-side, #000 86%, transparent 100%); }
:root .sig--film-multiview .mv__gfx { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 4cqh; padding: 0 12%; background: linear-gradient(135deg, #2a1442, #120c18); font: 600 1em/1 var(--f-display); container-type: inline-size; }
:root .sig--film-multiview .mv__gfx .mv__lg { width: 10cqw; }
:root .sig--film-multiview .mv__gfx .mv__lg svg { width: 100%; fill: none; stroke: var(--lilac); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
:root .sig--film-multiview .mv__gfx b { font-size: 9cqw; letter-spacing: -.04em; }
:root .sig--film-multiview .mv__gfx ol { display: grid; gap: 2.4cqw; font: 500 4.2cqw/1 var(--f-body); color: rgba(255, 255, 255, .85); }
:root .sig--film-multiview .mv__gfx li { display: flex; align-items: center; gap: 2cqw; }
:root .sig--film-multiview .mv__gfx li i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--v); }
@container (max-width: 420px){:root .sig--film-multiview .mv__fmt, :root .sig--film-multiview .mv__net { display: none; }
:root .sig--film-multiview .mv__cam figcaption { font-size: 9px; }
:root .sig--film-multiview .mv__cams { gap: 5px; }

}