.showcase-video { min-height: calc(100svh / var(--portal-desktop-scale, 1)); display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 32px; background: #fff; }
.showcase-video__frame { position: relative; width: min(1450px, 100%, (100svh / var(--portal-desktop-scale, 1) - 64px) * 16 / 9); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 25px; background: #080d19; box-shadow: 0 24px 70px rgb(27 44 75 / 16%); }
.showcase-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
.showcase-video video:focus-visible { outline: 3px solid #8bcfff; outline-offset: -4px; }
.showcase-video__controls { position: absolute; right: 22px; bottom: 22px; }
.showcase-video__controls input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.showcase-video__controls .toggleSwitch { width: 50px; height: 50px; position: relative; display: flex; align-items: center; justify-content: center; background: green; border-radius: 50%; cursor: pointer; transition: background-color .3s, transform .3s; box-shadow: 2px 2px 10px rgb(0 0 0 / 13%); overflow: hidden; }
.showcase-video__controls .speaker, .showcase-video__controls .mute-speaker { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: opacity .3s; }
.showcase-video__controls .speaker { z-index: 2; }
.showcase-video__controls .mute-speaker { position: absolute; opacity: 0; z-index: 3; }
.showcase-video__controls svg { width: 18px; height: 18px; }
.showcase-video__controls .speaker-body { fill: #fff; stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
.showcase-video__controls .speaker-lines { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.showcase-video__controls input:checked + .toggleSwitch .speaker { opacity: 0; }
.showcase-video__controls input:checked + .toggleSwitch .mute-speaker { opacity: 1; background: red; }
.showcase-video__controls input:active + .toggleSwitch { transform: scale(.7); }
.showcase-video__controls input:not(:checked) + .toggleSwitch:hover { background: rgb(61 61 61); }
.showcase-video__controls input:focus-visible + .toggleSwitch { outline: 3px solid #8bcfff; outline-offset: -3px; }
@media (max-width: 620px) { .showcase-video { min-height: 0; padding: 56px 8px; } .showcase-video__frame { border-radius: 16px; } .showcase-video__controls { right: 12px; bottom: 12px; } }