.image-comparison { display: block; width: 100%; min-width: 0; margin: 1.5em 0; padding: 0; }
.image-comparison, .image-comparison * { box-sizing: border-box; }
.image-comparison [hidden] { display: none !important; }
.image-comparison__stage { position: relative; width: 100%; aspect-ratio: var(--ic-ratio, 16 / 9); overflow: hidden; border-radius: var(--ic-radius, 5px); background: #202020; isolation: isolate; }
.image-comparison__layer { position: absolute; inset: 0; }
.image-comparison__layer--before { clip-path: inset(0 calc(100% - var(--ic-position, 50%)) 0 0); }
.image-comparison__layer--after { clip-path: inset(0 0 0 var(--ic-position, 50%)); }
.image-comparison .image-comparison__media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: var(--ic-fit, contain); object-position: center; pointer-events: none; user-select: none; }
.image-comparison__labels { position: absolute; top: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.image-comparison__labels--before { left: 0; width: var(--ic-position, 50%); }
.image-comparison__labels--after { right: 0; width: calc(100% - var(--ic-position, 50%)); }
.image-comparison .image-comparison__label { position: absolute; display: block; max-width: calc(100% - 24px); padding: 5px 9px; margin: 0; border-radius: 4px; font: inherit; font-size: var(--ic-label-size, 16px); font-weight: 700; line-height: 1.3; color: var(--ic-label-color); background: var(--ic-label-background); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-comparison__label--top-left { top: 12px; left: 12px; }
.image-comparison__label--top-right { top: 12px; right: 12px; }
.image-comparison__label--bottom-left { bottom: 12px; left: 12px; }
.image-comparison__label--bottom-right { bottom: 12px; right: 12px; }
.image-comparison .image-comparison__slider { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.image-comparison__divider { position: absolute; top: 0; bottom: 0; left: var(--ic-position, 50%); width: 2px; transform: translateX(-50%); background: #fff; pointer-events: none; }
.image-comparison__handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border: 1px solid #fff; border-radius: 50%; background: transparent; color: #fff; }
.image-comparison__handle::before, .image-comparison__handle::after { content: ''; position: absolute; top: 10px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.image-comparison__handle::before { left: 6px; transform: rotate(-135deg); }
.image-comparison__handle::after { right: 6px; transform: rotate(45deg); }
.image-comparison__slider:hover ~ .image-comparison__divider .image-comparison__handle { background: rgb(255 255 255 / .12); }
.image-comparison__slider:focus-visible ~ .image-comparison__divider .image-comparison__handle { outline: 3px solid #78bfff; outline-offset: 2px; }
.image-comparison .image-comparison__caption { font-size: .8rem; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-font, inherit); }
.image-comparison__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 6px; }
.image-comparison .image-comparison__play { position: relative; flex: 0 0 32px; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid currentColor; border-radius: 50%; color: var(--color-font, #1c1c1c); background: transparent; cursor: pointer; }
.image-comparison__play::before { content: ''; position: absolute; top: 9px; left: 12px; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.image-comparison__play.is-playing::before { top: 9px; left: 10px; width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.image-comparison__play::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.image-comparison__play:focus-visible { outline: 3px solid #78bfff; outline-offset: 2px; }
.image-comparison .image-comparison__seek { flex: 1; min-width: 60px; width: auto; margin: 0; padding: 0; accent-color: var(--color-crazy, #ff6f00); }
.image-comparison__time { font-size: .8rem; font-variant-numeric: tabular-nums; }
.image-comparison__video-error { width: 100%; font-size: .85rem; }