@keyframes indicateMovable{0%{transform:translate(60px, -10px)}40%{transform:translate(-32px, -10px)}70%{transform:translate(10px, -10px)}100%{transform:translate(-50%, -10px)}}.moveable .slider-handle{animation:indicateMovable 1.5s ease-out forwards;transition:transform .5s ease}.compare-block{display:flex;flex-direction:column;flex:1;justify-content:center;align-items:center;height:100%}.compare-container{position:relative;max-width:600px;width:100%;height:60vw;border:1px solid #252525;margin:10px 0;max-height:400px}.compare-img{position:absolute;top:0;left:0;width:100%;height:100%}.compare-img picture{display:flex;height:100%;width:100%;overflow:hidden}.compare-img img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.compare-after img{--pos: 50%;-webkit-mask:linear-gradient(to right, #000 0 var(--pos), transparent var(--pos));mask:linear-gradient(to right, #000 0 var(--pos), transparent var(--pos));transition:none}.slider-handle{position:absolute;top:0;left:50%;width:6px;height:calc(100% + 20px);background:rgb(var(--theme-color));cursor:ew-resize;transform:translate(-50%, -10px);z-index:10;touch-action:none;border:1px solid #fff}.slider-handle .slider-knob{position:absolute;top:50%;left:50%;transform:translate(-16px, -16px);height:34px;width:34px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:50%;background-color:rgb(var(--theme-color));padding:4px;border:1px solid #fff}.slider-handle .slider-knob span{color:#fff;font-size:24px;line-height:1;display:flex;justify-content:center;align-items:center}.compare-text{display:flex;justify-content:center;width:100%}.compare-text p{font-size:12px;line-height:1}