.before-after{position:relative;overflow:hidden;border-radius:14px;background:var(--bg);user-select:none;touch-action:pan-y}.before-after img{display:block;width:100%;height:100%;object-fit:cover}.before-after-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--ba))}.before-after-line{position:absolute;top:0;bottom:0;left:var(--ba);width:2px;translate:-1px 0;background:#fff;box-shadow:0 0 8px rgb(0 0 0/.4);pointer-events:none}.before-after-line span{position:absolute;top:50%;left:50%;width:30px;height:30px;translate:-50% -50%;border:2px solid #fff;border-radius:9999px;background:rgb(0 0 0/.45);backdrop-filter:blur(4px)}.before-after-tag{position:absolute;top:8px;border-radius:9999px;background:rgb(0 0 0/.55);padding:3px 9px;color:#fff;font-size:11px;font-weight:650;pointer-events:none}.before-after-tag-before{left:8px}.before-after-tag-after{right:8px}.before-after input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.before-after:has(input:focus-visible) .before-after-line span{outline:2px solid var(--accent);outline-offset:2px}