.uncoder-image-compare{--uncoder-compare-pos: 50%;--uncoder-compare-line: #fff;--uncoder-compare-line-w: 2px;--uncoder-compare-knob: 44px;--uncoder-compare-knob-bg: #fff;--uncoder-compare-knob-color: var(--uncoder-c-heading, #111827);--uncoder-compare-label-offset: 16px;position:relative;min-width:0}.uncoder-image-compare>.uncoder-image-compare__media{position:relative;overflow:hidden;isolation:isolate;line-height:0;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.uncoder-image-compare--vertical>.uncoder-image-compare__media{cursor:ns-resize;touch-action:pan-x}.uncoder-image-compare__media>.uncoder-image-compare__after{height:100%}.uncoder-image-compare__media>.uncoder-image-compare__before{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--uncoder-compare-pos)) 0 0)}.uncoder-image-compare--vertical>.uncoder-image-compare__media>.uncoder-image-compare__before{clip-path:inset(0 0 calc(100% - var(--uncoder-compare-pos)) 0)}.uncoder-image-compare__media .uncoder-image-compare__img{display:block;width:100%;max-width:none;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}.uncoder-image-compare__media>.uncoder-image-compare__handle{position:absolute;top:0;bottom:0;left:var(--uncoder-compare-pos);z-index:3;width:var(--uncoder-compare-line-w);background:var(--uncoder-compare-line);box-shadow:0 0 6px #00000040;transform:translate(-50%);pointer-events:none}.uncoder-image-compare--vertical>.uncoder-image-compare__media>.uncoder-image-compare__handle{top:var(--uncoder-compare-pos);right:0;bottom:auto;left:0;width:auto;height:var(--uncoder-compare-line-w);transform:translateY(-50%)}.uncoder-image-compare__handle>.uncoder-image-compare__knob{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:var(--uncoder-compare-knob);height:var(--uncoder-compare-knob);border:0 solid transparent;border-radius:50%;background:var(--uncoder-compare-knob-bg);color:var(--uncoder-compare-knob-color);font-size:calc(var(--uncoder-compare-knob) * .45);box-shadow:0 4px 16px #00000040;transform:translate(-50%,-50%);transition:transform .2s}.uncoder-image-compare__knob>.uncoder-svg{width:1em;height:1em}.uncoder-image-compare--vertical .uncoder-image-compare__knob>.uncoder-svg{transform:rotate(90deg)}.uncoder-image-compare.is-dragging .uncoder-image-compare__knob{transform:translate(-50%,-50%) scale(1.08)}.uncoder-image-compare>.uncoder-image-compare__range{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}.uncoder-image-compare>.uncoder-image-compare__range:focus-visible+.uncoder-image-compare__media .uncoder-image-compare__knob{outline:3px solid var(--uncoder-c-primary, #2b59ff);outline-offset:3px}.uncoder-image-compare__media>.uncoder-image-compare__label{position:absolute;z-index:2;padding:6px 12px;border-radius:999px;background:#0f172a99;color:#fff;font-size:.8125rem;font-weight:600;line-height:1.2;letter-spacing:.02em;white-space:nowrap;pointer-events:none;transition:opacity .25s}.uncoder-image-compare--horizontal .uncoder-image-compare__label--before{left:var(--uncoder-compare-label-offset)}.uncoder-image-compare--horizontal .uncoder-image-compare__label--after{right:var(--uncoder-compare-label-offset)}.uncoder-image-compare--horizontal.uncoder-image-compare--labels-start .uncoder-image-compare__label{top:var(--uncoder-compare-label-offset)}.uncoder-image-compare--horizontal.uncoder-image-compare--labels-center .uncoder-image-compare__label{top:50%;transform:translateY(-50%)}.uncoder-image-compare--horizontal.uncoder-image-compare--labels-end .uncoder-image-compare__label{bottom:var(--uncoder-compare-label-offset)}.uncoder-image-compare--vertical .uncoder-image-compare__label--before{top:var(--uncoder-compare-label-offset)}.uncoder-image-compare--vertical .uncoder-image-compare__label--after{bottom:var(--uncoder-compare-label-offset)}.uncoder-image-compare--vertical.uncoder-image-compare--labels-start .uncoder-image-compare__label{left:var(--uncoder-compare-label-offset)}.uncoder-image-compare--vertical.uncoder-image-compare--labels-center .uncoder-image-compare__label{left:50%;transform:translate(-50%)}.uncoder-image-compare--vertical.uncoder-image-compare--labels-end .uncoder-image-compare__label{right:var(--uncoder-compare-label-offset)}.uncoder-image-compare--labels-hover .uncoder-image-compare__label{opacity:0}.uncoder-image-compare--labels-hover:is(:hover,:focus-within) .uncoder-image-compare__label{opacity:1}@media(prefers-reduced-motion:reduce){.uncoder-image-compare__handle>.uncoder-image-compare__knob,.uncoder-image-compare__media>.uncoder-image-compare__label{transition:none}}
