.kuh-image-compare { margin: 1.5rem 0 2rem; }
.kuh-image-compare__stage { --kuh-compare-position: 50%; position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 4; background: var(--kb-color-paper-muted); }
.kuh-image-compare__stage > img, .kuh-image-compare__before, .kuh-image-compare__before img { display: block; width: 100%; height: 100%; }
.kuh-image-compare__after { object-fit: cover; }
.kuh-image-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--kuh-compare-position)) 0 0); }
.kuh-image-compare__before img { max-width: none; object-fit: cover; }
.kuh-image-compare__range { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; cursor: col-resize; opacity: 0; }
.kuh-image-compare__handle { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--kuh-compare-position); width: 3px; transform: translateX(-50%); background: var(--kb-color-paper); box-shadow: 0 0 0 1px rgb(18 24 22 / .42); pointer-events: none; }
.kuh-image-compare__handle::before { position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; border: 2px solid var(--kb-color-ink); border-radius: 50%; background: var(--kb-color-paper); box-shadow: 0 1px 4px rgb(18 24 22 / .3); content: '↔'; color: var(--kb-color-ink); font-size: 1.4rem; line-height: 2.65rem; text-align: center; transform: translate(-50%, -50%); }
.kuh-image-compare__range:focus-visible + .kuh-image-compare__handle::before { outline: 3px solid var(--kb-color-gold-on-paper); outline-offset: 4px; }
.kuh-image-compare figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; color: var(--kb-color-gold-on-paper); font-size: 1rem; }
.kuh-image-compare--single > img { width: 100%; height: auto; }
.kuh-image-compare--single figcaption { display: block; }