.wrapper{--_pos:50%;max-block-size:100dvb;margin-top:2rem;border-radius:1rem;width:fit-content;margin-inline:auto;display:grid;position:relative;overflow:hidden}.wrapper>*{grid-area:1/-1}.wrapper .content{place-content:center;display:grid}.wrapper .content video{object-fit:cover;max-block-size:70.4vh;max-inline-size:100%}.wrapper .before{-webkit-mask:linear-gradient(to right,#000 0,var(--_pos),#0000 0);mask:linear-gradient(to right,#000 0,var(--_pos),#0000 0)}.wrapper .after{-webkit-mask:linear-gradient(to right,#0000 0,var(--_pos),#000 0);mask:linear-gradient(to right,#0000 0,var(--_pos),#000 0)}.slider-container{z-index:5;pointer-events:none;grid-area:1/-1;position:relative}.wrapper input[type=range]{appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent;pointer-events:auto;background:0 0;border:0;width:100%;height:100%}.wrapper input[type=range]::-webkit-slider-thumb{appearance:none;background-color:#0000;border:0;block-size:100%;inline-size:2px}.wrapper input[type=range]::-moz-range-thumb{appearance:none;background-color:#0000;border:0;block-size:100%;inline-size:2px}.slider-handle{top:50%;left:var(--_pos);pointer-events:none;z-index:6;background:#00000080;border-radius:50%;justify-content:center;align-items:center;gap:8px;width:40px;height:40px;display:flex;position:absolute;transform:translate(-50%,-50%)}.slider-handle:before{content:"";z-index:-1;background:#fff;width:2px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}