.before-after-slider.svelte-1r8glu3{--position: 50%;--slider-radius: 12px;--handle-size: 48px;--handle-color: #ffffff;--handle-shadow: 0 10px 28px rgba(0, 0, 0, .18);--accent-color: #7d5a43;--label-color: #ffffff;--label-shadow: 0 2px 12px rgba(0, 0, 0, .55);position:relative;width:100%;aspect-ratio:var(--aspect-ratio);border-radius:var(--slider-radius);overflow:hidden;background:linear-gradient(135deg,#f8f3ed,#f1e6d9);-webkit-user-select:none;user-select:none}.before-after-slider.svelte-1r8glu3 .image:where(.svelte-1r8glu3){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.before-after-slider.svelte-1r8glu3 .image-before:where(.svelte-1r8glu3){clip-path:polygon(0 0,var(--position) 0,var(--position) 100%,0 100%);transition:clip-path .12s ease}.before-after-slider.svelte-1r8glu3 .label:where(.svelte-1r8glu3){position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--label-color);text-shadow:var(--label-shadow);opacity:.2;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1;transition:clip-path .12s ease}.before-after-slider.svelte-1r8glu3 .label-before:where(.svelte-1r8glu3){clip-path:polygon(0 0,var(--position) 0,var(--position) 100%,0 100%)}.before-after-slider.svelte-1r8glu3 .label-after:where(.svelte-1r8glu3){clip-path:polygon(var(--position) 0,100% 0,100% 100%,var(--position) 100%)}.before-after-slider.svelte-1r8glu3 .divider:where(.svelte-1r8glu3){position:absolute;left:var(--position);top:0;bottom:0;width:2px;transform:translate(-50%);background:#ffffffe6;box-shadow:0 0 0 1px #7d5a431f;pointer-events:none;z-index:2}.before-after-slider.svelte-1r8glu3 .handle:where(.svelte-1r8glu3){position:absolute;left:var(--position);top:50%;transform:translate(-50%,-50%);width:var(--handle-size);height:var(--handle-size);border-radius:999px;background:var(--handle-color);display:grid;place-items:center;box-shadow:var(--handle-shadow);color:var(--accent-color);pointer-events:none;z-index:3}.before-after-slider.svelte-1r8glu3 .handle:where(.svelte-1r8glu3) svg:where(.svelte-1r8glu3){width:24px;height:24px}.before-after-slider.svelte-1r8glu3 .slider:where(.svelte-1r8glu3){position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;background:transparent;touch-action:pan-y;z-index:4}.before-after-slider.svelte-1r8glu3:focus-within .handle:where(.svelte-1r8glu3){outline:2px solid rgba(125,90,67,.7);outline-offset:2px}