:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--color-background:#121212;--color-foreground:#fff;--border-1:1px solid var(--color-foreground)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (prefers-color-scheme:light){:root{--color-background:#fff;--color-foreground:#000}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background);color:var(--color-foreground);min-height:100dvh}main{width:70dvw;margin:1rem auto 0}.video-container{grid-template-columns:repeat(4,1fr);gap:clamp(.25rem,2vw,1rem);margin:1rem auto 0;display:grid}.color-overlay{pointer-events:none;mix-blend-mode:color;opacity:.6;transition:background-color .4s;position:absolute;inset:0}.controls{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;display:flex}button{border:var(--border-1);color:var(--color-foreground);cursor:pointer;background:0 0;padding:.5rem .75rem;font-size:clamp(1.2rem,2vw,1.7rem)}.video-container div video{will-change:transform;transition:transform .1s ease-out}