:root{--size-4xl: 80px;--size-3xl: 64px;--size-2xl: 48px;--size-xl: 32px;--size-lg: 24px;--size-md: 16px;--size-sm: 12px;--size-xs: 8px;--size-2xs: 4px;--size-3xs: 2px;--size-fluid-4xl: 48px;--size-fluid-3xl: 48px;--size-fluid-2xl: 40px;--size-fluid-xl: 32px;--size-fluid-lg: 24px;--size-fluid-md: 16px;--size-fluid-sm: 8px;--size-fluid-xs: 4px;--size-fluid-xxs: 0;--border-lg: 4px;--border-md: 2px;--border-sm: 1px;--rounded-pill: 999px;--rounded-xl: 24px;--rounded-lg: 16px;--rounded-md: 8px;--rounded-sm: 4px;--media-query-2xl: 1920px;--media-query-xl: 1440px;--media-query-lg: 1024px;--media-query-md: 768px;--media-query-sm: 480px;--media-query-xs: 320px;--media-query-2s: 240px;--text-6xl: 64px;--text-5xl: 56px;--text-4xl: 48px;--text-3xl: 40px;--text-2xl: 32px;--text-xl: 24px;--text-lg: 20px;--text-md: 18px;--text-sm: 16px;--text-xs: 14px;--text-2xs: 12px;--text-3xs: 10px;--text-fluid-3xl: 32px;--text-fluid-2xl: 32px;--text-fluid-xl: 28px;--text-fluid-lg: 24px;--text-fluid-md: 20px;--text-fluid-sm: 18px;--text-fluid-xs: 16px;--text-fluid-2xs: 12px}@media (min-width: 768px){:root{--size-fluid-4xl: 64px;--size-fluid-3xl: 56px;--size-fluid-2xl: 48px;--size-fluid-xl: 32px;--size-fluid-lg: 24px;--size-fluid-md: 16px;--size-fluid-sm: 8px;--size-fluid-xs: 4px;--size-fluid-xxs: 2px;--text-fluid-3xl: 48px;--text-fluid-2xl: 40px;--text-fluid-xl: 32px;--text-fluid-lg: 32px;--text-fluid-md: 24px;--text-fluid-sm: 20px;--text-fluid-xs: 17px;--text-fluid-2xs: 13px}}@media (min-width: 1440px){:root{--size-fluid-4xl: 160px;--size-fluid-3xl: 120px;--size-fluid-2xl: 80px;--size-fluid-xl: 48px;--size-fluid-lg: 32px;--size-fluid-md: 24px;--size-fluid-sm: 16px;--size-fluid-xs: 8px;--size-fluid-xxs: 4px;--text-fluid-3xl: 64px;--text-fluid-2xl: 56px;--text-fluid-xl: 48px;--text-fluid-lg: 40px;--text-fluid-md: 32px;--text-fluid-sm: 24px;--text-fluid-xs: 18px;--text-fluid-2xs: 14px}}:root{--controls-container-height: 33px}@media screen and (min-width: 768px){:root{--controls-container-height: 52px}}html,body{margin:0;padding:0}#video{position:absolute}.video-container{position:relative;width:100%;height:100vh;overflow:hidden;background:gradient(linear,left top,left bottom,from(#f00),to(#00f))}.video__outer{position:relative;aspect-ratio:16/9}.video-controls{position:absolute;display:flex;justify-content:space-between;bottom:0;left:0;right:0;height:var(--controls-container-height);padding:0 var(--size-sm);background-color:var(--background-glass);color:var(--button-ghost-foreground);z-index:99999}@media screen and (min-width: 768px){.video-controls{border-radius:var(--rounded-ui-md);bottom:var(--size-sm);left:var(--size-sm);right:var(--size-sm)}}.buttons-set{display:flex;align-items:center;gap:10px}button{all:unset;display:flex;justify-content:center;align-items:center;height:100%;width:var(--controls-container-height)}button.play-pause svg{height:12px;width:auto}@media screen and (min-width: 768px){button.play-pause svg{height:16px}}button.mute-unmute svg{height:16px;width:auto}.video-controls__inner{display:flex;align-items:stretch;justify-content:space-between;width:100%;gap:var(--size-sm)}.volume-slider{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:42px;height:2px;background:#ddd;outline:none;border-radius:3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:8px;height:8px;background:var(--button-ghost-foreground);cursor:pointer;border-radius:50%;box-shadow:0 2px 4px #0000004d}.volume-slider::-moz-range-thumb{width:8px;height:8px;background:var(--button-ghost-foreground);cursor:pointer;border-radius:50%;box-shadow:0 2px 4px #0000004d}