.before-after{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:20px;background:#eee;box-shadow:0 15px 35px rgba(0,0,0,.18);user-select:none;touch-action:none}.before-after img{height:100%;object-fit:cover;display:block}.before-after .img-before{position:absolute;inset:0;width:100%}.before-after .after-wrapper{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden;z-index:2}.before-after .img-after{position:absolute;top:0;left:0;height:100%;width:100 container-type;max-width:none;object-fit:cover}.before-after{container-type:inline-size}.before-after .after-wrapper .img-after{width:100cqw;height:100%;max-width:none}.before-after .slider-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:4;transform:translateX(-50%);box-shadow:0 0 10px rgba(0,0,0,.5)}.before-after .slider-button{position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;z-index:5;display:flex;align-items:center;justify-content:center;color:#333;font-size:22px;box-shadow:0 8px 25px rgba(0,0,0,.35);transition:transform .25s ease}.before-after:hover .slider-button{transform:translate(-50%,-50%) scale(1.08)}.before-after .slider-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:10}.before-after .label{position:absolute;top:20px;padding:8px 18px;border-radius:50px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:white;font-size:.9rem;font-weight:700;letter-spacing:.5px;z-index:6}.before-after .label.before{left:20px}.before-after .label.after{right:20px}.before-after{animation:beforeAfterFade .7s ease both}@keyframes beforeAfterFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.before-after{border-radius:15px}.before-after .slider-button{width:48px;height:48px;font-size:18px}.before-after .label{top:10px;padding:6px 12px;font-size:.75rem}}