*{font-optical-sizing:auto;text-transform:uppercase;letter-spacing:calc(1px/2);user-select:none;font-family:Lato,sans-serif;font-style:normal;font-weight:400}html{height:100%;font-size:10px}:root{--background-color:#f3f3f3;--render-color:#dc2626}body{overflow:hidden;background-color:var(--background-color);height:100%;margin:0}canvas{object-fit:cover;position:absolute;image-rendering:pixelated;color:var(--render-color);width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}video{opacity:0;visibility:hidden;width:0;height:0}.controls{z-index:10;position:absolute;display:grid;grid-template-rows:1fr 1fr;background-color:#fff;border-radius:10px;gap:1rem;width:240px;padding:1.5rem 2rem;top:10rem;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px 20px 1px #00000026}label{display:flex;backdrop-filter:contrast(1);justify-content:space-between;align-items: center;font-size:1.4rem}input{outline:none;box-shadow:none;border:none}@media (max-width:650px){.controls{box-sizing:border-box;gap:2rem;width:90%;padding:1.5rem 2rem;top:1rem;left:50%;transform:translate(-50%)}label{white-space:nowrap;font-size:3rem}input{width:20%;min-width:40px;margin-left:3rem}}