.ne-image-compare{--ne-pos:50%}
.ne-image-compare__stage{position:relative}
.ne-image-compare__pane{position:relative;margin:0 0 .75rem}
.ne-image-compare__img{display:block;width:100%;height:auto}
.ne-image-compare__label{margin-top:.25rem;font-size:.85rem;opacity:.8}
.ne-image-compare__range,.ne-image-compare__handle{display:none}

/* JS mode: overlay the panes; the before image is revealed up to --ne-pos. */
.ne-image-compare.is-js .ne-image-compare__stage{overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ne-image-compare.is-js .ne-image-compare__pane{margin:0}
.ne-image-compare.is-js .ne-image-compare__pane--before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ne-pos)) 0 0)}
.ne-image-compare.is-js .ne-image-compare__pane--before .ne-image-compare__img{height:100%;object-fit:cover}
.ne-image-compare.is-js.ne-image-compare--vertical .ne-image-compare__pane--before{clip-path:inset(0 0 calc(100% - var(--ne-pos)) 0)}
.ne-image-compare.is-js .ne-image-compare__label{position:absolute;top:.6rem;margin:0;padding:.2rem .6rem;border-radius:4px;background:rgba(0,0,0,.65);color:#fff;font-size:.8rem;opacity:1;pointer-events:none}
.ne-image-compare.is-js .ne-image-compare__label--before{left:.6rem}
.ne-image-compare.is-js .ne-image-compare__label--after{right:.6rem}
.ne-image-compare.is-js.ne-image-compare--vertical .ne-image-compare__label--after{top:auto;bottom:.6rem;right:auto;left:.6rem}
.ne-image-compare.is-js .ne-image-compare__range{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ne-image-compare.is-js.ne-image-compare--vertical .ne-image-compare__range{cursor:ns-resize;pointer-events:none}
.ne-image-compare.is-js .ne-image-compare__handle{display:block;position:absolute;z-index:2;top:0;bottom:0;left:var(--ne-pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.45);pointer-events:none}
.ne-image-compare.is-js .ne-image-compare__handle::after{content:"\2194";position:absolute;top:50%;left:50%;width:2.5rem;height:2.5rem;margin:-1.25rem 0 0 -1.25rem;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 1px 8px rgba(0,0,0,.4)}
.ne-image-compare.is-js.ne-image-compare--vertical .ne-image-compare__handle{top:var(--ne-pos);bottom:auto;left:0;right:0;width:auto;height:3px;margin:-1.5px 0 0}
.ne-image-compare.is-js.ne-image-compare--vertical .ne-image-compare__handle::after{content:"\2195"}
.ne-image-compare__range:focus-visible~.ne-image-compare__handle::after{outline:3px solid var(--ne-accent,#2563eb);outline-offset:2px}

/* The editor never runs view.js: show the stacked fallback there. */
.editor-styles-wrapper .ne-image-compare__range{display:none!important}