:root .sig.sig--vis-cam { container-type: size; min-height: 500px; height: 500px; text-align: left; }
:root .scr__m > .sig.sig--vis-cam, :root .scr__mm > .sig.sig--vis-cam, :root .stk__m .sig.sig--vis-cam, :root .bt .sig.sig--vis-cam { height: 100%; min-height: 0; }
:root .sig--vis-cam svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--vis-cam .vk, :root .sig--vis-cam.vk { position: absolute; inset: 0; display: grid; place-items: center; }
:root .sig--vis-cam .vk__fmt, :root .sig--vis-cam.vk__fmt { position: absolute; top: 4cqh; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
:root .sig--vis-cam .vk__fmt span, :root .sig--vis-cam.vk__fmt span { padding: 7px 12px; border-radius: 999px; color: var(--ink-2); font: 500 12px/1 var(--f-display); white-space: nowrap; transition: background .5s, color .5s; }
:root .sig--vis-cam .vk__fmt span.on, :root .sig--vis-cam.vk__fmt span.on { background: var(--v); color: #fff; }
:root .sig--vis-cam .vk__mon, :root .sig--vis-cam.vk__mon { --H: min(64cqh, 50.6cqw); position: relative; margin-top: 7cqh; height: var(--H); width: calc(var(--H) * 16 / 9); border-radius: 14px; overflow: hidden; background: #0f0d12; box-shadow: 0 0 0 6px #1a171e, 0 0 0 7px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .95); transition: width 1.4s cubic-bezier(.65, 0, .35, 1), height 1.4s cubic-bezier(.65, 0, .35, 1), border-radius 1.4s; }
:root .sig--vis-cam .is-vert .vk__mon, :root .sig--vis-cam.is-vert .vk__mon { height: 78cqh; width: calc(78cqh * 9 / 16); border-radius: 22px; }
:root .sig--vis-cam .vk__set, :root .sig--vis-cam.vk__set { position: absolute; inset: 0; background: radial-gradient(60% 80% at 62% 45%, #4a4452, #1f1c24 70%, #121015); }
:root .sig--vis-cam .vk__soft, :root .sig--vis-cam.vk__soft { position: absolute; left: -10%; top: -20%; width: 50%; height: 140%; background: radial-gradient(closest-side, rgba(255, 244, 230, .16), transparent); transform: rotate(-12deg); }
:root .sig--vis-cam .vk__who, :root .sig--vis-cam.vk__who { position: absolute; top: 9%; left: 50%; height: 104%; aspect-ratio: 1; transform: translateX(-38%); object-fit: cover; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 99%); mask: radial-gradient(closest-side, #000 72%, transparent 99%); filter: contrast(1.05) brightness(.95); transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); }
:root .sig--vis-cam .is-vert .vk__who, :root .sig--vis-cam.is-vert .vk__who { transform: translateX(-50%) scale(1.05); }
:root .sig--vis-cam .is-rec .vk__who, :root .sig--vis-cam.is-rec .vk__who { animation: vkBreath 6s ease-in-out infinite alternate; }
@keyframes vkBreath{ to { scale: 1.035; } }
:root .sig--vis-cam .vk__grid i, :root .sig--vis-cam.vk__grid i { position: absolute; background: rgba(255, 255, 255, .1); }
:root .sig--vis-cam .vk__grid i:nth-child(1), :root .sig--vis-cam.vk__grid i:nth-child(1) { left: 33.3%; top: 0; bottom: 0; width: 1px; }
:root .sig--vis-cam .vk__grid i:nth-child(2), :root .sig--vis-cam.vk__grid i:nth-child(2) { left: 66.6%; top: 0; bottom: 0; width: 1px; }
:root .sig--vis-cam .vk__grid i:nth-child(3), :root .sig--vis-cam.vk__grid i:nth-child(3) { top: 33.3%; left: 0; right: 0; height: 1px; }
:root .sig--vis-cam .vk__grid i:nth-child(4), :root .sig--vis-cam.vk__grid i:nth-child(4) { top: 66.6%; left: 0; right: 0; height: 1px; }
:root .sig--vis-cam .is-clips .vk__grid, :root .sig--vis-cam.is-clips .vk__grid { opacity: 0; }
:root .sig--vis-cam .vk__br, :root .sig--vis-cam.vk__br { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .8); }
:root .sig--vis-cam .vk__br--1, :root .sig--vis-cam.vk__br--1 { left: 10px; top: 10px; border-width: 2px 0 0 2px; }
:root .sig--vis-cam .vk__br--2, :root .sig--vis-cam.vk__br--2 { right: 10px; top: 10px; border-width: 2px 2px 0 0; }
:root .sig--vis-cam .vk__br--3, :root .sig--vis-cam.vk__br--3 { left: 10px; bottom: 10px; border-width: 0 0 2px 2px; }
:root .sig--vis-cam .vk__br--4, :root .sig--vis-cam.vk__br--4 { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; }
:root .sig--vis-cam .vk__hud, :root .sig--vis-cam.vk__hud { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; align-items: center; gap: 12px; font: 600 11px/1 var(--f-display); color: #fff; letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
:root .sig--vis-cam .vk__rec, :root .sig--vis-cam.vk__rec { display: flex; align-items: center; gap: 6px; text-transform: uppercase; opacity: .45; }
:root .sig--vis-cam .vk__rec i, :root .sig--vis-cam.vk__rec i { width: 9px; height: 9px; border-radius: 50%; background: #777; }
:root .sig--vis-cam .is-rec .vk__rec, :root .sig--vis-cam.is-rec .vk__rec { opacity: 1; }
:root .sig--vis-cam .is-rec .vk__rec i, :root .sig--vis-cam.is-rec .vk__rec i { background: #ff3b4e; box-shadow: 0 0 10px #ff3b4e; animation: vkBlink 1s steps(2) infinite; }
@keyframes vkBlink{ 50% { opacity: .2; } }
:root .sig--vis-cam .vk__tc, :root .sig--vis-cam.vk__tc { font-variant-numeric: tabular-nums; font-family: var(--f-body); font-weight: 500; }
:root .sig--vis-cam .vk__bat, :root .sig--vis-cam.vk__bat { margin-left: auto; width: 24px; }
:root .sig--vis-cam .vk__bat svg, :root .sig--vis-cam.vk__bat svg { width: 100%; stroke-width: 1.6; }
:root .sig--vis-cam .vk__bat .f, :root .sig--vis-cam.vk__bat .f { fill: #fff; stroke: none; }
:root .sig--vis-cam .vk__af, :root .sig--vis-cam.vk__af { position: absolute; left: 56%; top: 34%; width: 36%; height: 44%; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 6px; transform: translate(-50%, -50%); opacity: 0; transition: width .7s var(--ease-out), height .7s var(--ease-out), border-color .4s, opacity .3s; }
:root .sig--vis-cam .vk__af small, :root .sig--vis-cam.vk__af small { position: absolute; left: 4px; top: -16px; font: 600 9.5px/1 var(--f-display); color: #fff; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .3s .5s; }
:root .sig--vis-cam .is-rec .vk__af, :root .sig--vis-cam.is-rec .vk__af { opacity: 1; }
:root .sig--vis-cam .is-af .vk__af, :root .sig--vis-cam.is-af .vk__af { width: 17%; height: 26%; border-color: #c06bff; box-shadow: 0 0 0 1px rgba(161, 0, 255, .4); }
:root .sig--vis-cam .is-af .vk__af small, :root .sig--vis-cam.is-af .vk__af small { opacity: 1; color: #e3b8ff; }
:root .sig--vis-cam .is-vert .vk__af, :root .sig--vis-cam.is-vert .vk__af { left: 50%; width: 34%; height: 22%; }
:root .sig--vis-cam .is-clips .vk__af, :root .sig--vis-cam.is-clips .vk__af, :root .sig--vis-cam .is-clips .vk__sub, :root .sig--vis-cam.is-clips .vk__sub { opacity: 0; }
:root .sig--vis-cam .vk__aud, :root .sig--vis-cam.vk__aud { position: absolute; left: 22px; bottom: 18px; display: flex; align-items: center; gap: 6px; color: #fff; }
:root .sig--vis-cam .vk__aud svg, :root .sig--vis-cam.vk__aud svg { width: 14px; height: 14px; }
:root .sig--vis-cam .vk__aud span, :root .sig--vis-cam.vk__aud span { display: grid; gap: 3px; }
:root .sig--vis-cam .vk__aud i, :root .sig--vis-cam.vk__aud i { display: block; width: 46px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #6ee7a8 60%, #e3b8ff 80%, #ff6b6b) 0 0 / 46px 100% no-repeat, rgba(255, 255, 255, .15); clip-path: inset(0 70% 0 0); }
:root .sig--vis-cam .is-rec .vk__aud i, :root .sig--vis-cam.is-rec .vk__aud i { animation: vkLvl .5s ease-in-out infinite alternate; }
:root .sig--vis-cam .is-rec .vk__aud i + i, :root .sig--vis-cam.is-rec .vk__aud i + i { animation-duration: .37s; animation-delay: -.2s; }
@keyframes vkLvl{ 0% { clip-path: inset(0 75% 0 0); } 40% { clip-path: inset(0 35% 0 0); } 100% { clip-path: inset(0 52% 0 0); } }
:root .sig--vis-cam .vk__sub, :root .sig--vis-cam.vk__sub { position: absolute; left: 50%; bottom: 13%; width: max-content; max-width: 86%; margin: 0; transform: translateX(-50%); text-align: center; font: 600 clamp(13px, 2.6cqw, 19px)/1.35 var(--f-display); letter-spacing: -.01em; color: #fff; transition: opacity .4s; }
:root .sig--vis-cam .vk__sub span, :root .sig--vis-cam.vk__sub span { display: inline-block; padding: 1px 5px; border-radius: 5px; background: rgba(10, 8, 14, .78); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .4s var(--ease-out), background .3s, color .3s; }
:root .sig--vis-cam .vk__sub span.on, :root .sig--vis-cam.vk__sub span.on { opacity: 1; transform: none; }
:root .sig--vis-cam .vk__sub span.cur, :root .sig--vis-cam.vk__sub span.cur { background: #a100ff; }
:root .sig--vis-cam .is-vert .vk__sub, :root .sig--vis-cam.is-vert .vk__sub { bottom: 20%; max-width: 88%; font-size: clamp(12px, 2.1cqw, 15px); white-space: normal; }
:root .sig--vis-cam .vk__clips, :root .sig--vis-cam.vk__clips { position: absolute; inset: 0; z-index: 1; }
:root .sig--vis-cam .vk__clip, :root .sig--vis-cam.vk__clip { position: absolute; inset: 0; margin: 0; transform: translateY(102%); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
:root .sig--vis-cam .vk__clip.on, :root .sig--vis-cam.vk__clip.on { transform: none; }
:root .sig--vis-cam .vk__clip img, :root .sig--vis-cam.vk__clip img { width: 100%; height: 100%; object-fit: cover; }
:root .sig--vis-cam .vk__clip figcaption, :root .sig--vis-cam.vk__clip figcaption { position: absolute; left: 12px; bottom: 16px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #3b0066; font: 600 11px/1 var(--f-display); }
:root .sig--vis-cam .vk__mon > .vk__hud, :root .sig--vis-cam.vk__mon > .vk__hud, :root .sig--vis-cam .vk__mon > .vk__br, :root .sig--vis-cam.vk__mon > .vk__br, :root .sig--vis-cam .vk__mon > .vk__aud, :root .sig--vis-cam.vk__mon > .vk__aud, :root .sig--vis-cam .vk__mon > .vk__af, :root .sig--vis-cam.vk__mon > .vk__af, :root .sig--vis-cam .vk__mon > .vk__sub, :root .sig--vis-cam.vk__mon > .vk__sub, :root .sig--vis-cam .vk__mon > .vk__grid, :root .sig--vis-cam.vk__mon > .vk__grid { z-index: 2; }
:root .sig--vis-cam .vk__slate, :root .sig--vis-cam.vk__slate { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(56%, 300px); transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .3s, transform .5s var(--ease-back); }
:root .sig--vis-cam .is-slate .vk__slate, :root .sig--vis-cam.is-slate .vk__slate { opacity: 1; transform: translate(-50%, -50%); }
:root .sig--vis-cam .vk__sb, :root .sig--vis-cam.vk__sb { height: 16%; min-height: 18px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(-55deg, #111 0 14px, #f3f0f6 14px 28px); transform-origin: 2% 100%; transform: rotate(-24deg); transition: transform .18s cubic-bezier(.6, 0, 1, .6); }
:root .sig--vis-cam .is-clap .vk__sb, :root .sig--vis-cam.is-clap .vk__sb { transform: none; }
:root .sig--vis-cam .vk__sbody, :root .sig--vis-cam.vk__sbody { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 2px; border-radius: 0 0 6px 6px; overflow: hidden; background: #3a3541; }
:root .sig--vis-cam .vk__sbody span, :root .sig--vis-cam.vk__sbody span { padding: 8px 10px; background: #18151c; color: #eee; font: 500 11px/1.2 var(--f-body); }
:root .sig--vis-cam .vk__sbody span:first-child, :root .sig--vis-cam.vk__sbody span:first-child { grid-column: 1 / -1; font: 600 13px/1.2 var(--f-display); }
:root .sig--vis-cam .vk__sbody b, :root .sig--vis-cam.vk__sbody b { color: var(--lilac); }
:root .sig--vis-cam .is-out .vk__mon, :root .sig--vis-cam.is-out .vk__mon { opacity: 0; transition: opacity .5s; }
@media (max-width: 600px){:root .sig.sig--vis-cam { height: 440px; min-height: 440px; }
 }
@media (prefers-reduced-motion: reduce){:root .sig--vis-cam .vk__rec i, :root .sig--vis-cam.vk__rec i, :root .sig--vis-cam .vk__aud i, :root .sig--vis-cam.vk__aud i, :root .sig--vis-cam .vk__who, :root .sig--vis-cam.vk__who { animation: none !important; }
 }

