.rv {
  --p: 50%;
  position: relative;
  aspect-ratio: 1;
  overflow: visible;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: invert(1) hue-rotate(180deg) brightness(0.8) grayscale(1);
}
.rv__img--before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.rv__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--p);
  width: 2px;
  margin-left: -1px;
  background: var(--signal);
  pointer-events: none;
}
.rv__handle {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--signal);
  background: var(--ink);
  color: var(--paper);
  pointer-events: auto;
  cursor: grab;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.rv.is-dragging, .rv.is-dragging .rv__handle { cursor: grabbing; }
.rv.is-dragging .rv__handle,
.rv__handle:hover { background: var(--signal); }
.rv.is-focus .rv__handle { outline: 2px solid var(--signal); outline-offset: 4px; }
.rv.is-jumping .rv__img--before { transition: clip-path .4s var(--ease); }
.rv.is-jumping .rv__divider { transition: left .4s var(--ease); }
.rv__range { 
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 599px) {
  .rv__handle { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv__handle { transition: none; }
}