@layer system {
  [data-image-compare] {
    --compare-position: 50%;
    position: relative;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
  }
  [data-image-compare-layer] {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--compare-position, 50%)) 0 0);
    overflow: hidden;
    pointer-events: none;
  }
  [data-image-compare-handle] {
    left: var(--compare-position, 50%);
    pointer-events: none;
  }
  [data-image-compare-range] {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
  }
  [data-image-compare-range]:focus-visible { outline: none; }
  [data-image-compare]:has([data-image-compare-range]:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }
  .image-compare-handle {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-pill);
    background: oklch(100% 0 0 / 0.92);
    color: var(--ink-90);
    box-shadow: 0 2px 8px oklch(0% 0 0 / 0.35);
    transform: translate(-50%, -50%);
  }
}