.image-comparison:has(.comparison-input:focus-visible){outline-offset:4px;outline:2px solid}.image-comparison:has(.comparison-input:focus-visible) .comparison-handle{outline-offset:4px;outline:2px solid}.comparison-input::-webkit-slider-thumb{appearance:none;width:32px;height:44px}.comparison-input::-moz-range-thumb{border:0;width:32px;height:44px}@media (prefers-reduced-motion:no-preference){.image-comparison{--comparison-duration:0s}.image-comparison[data-motion=intro]{--comparison-duration:1s}.image-comparison[data-motion=settle]{--comparison-duration:var(--comparison-settle-duration)}.comparison-reveal,.comparison-image,.comparison-divider{transition-duration:var(--comparison-duration)}}.image-comparison{--comparison-settle-duration:.36s;--comparison-hover-distance:16px;--comparison-bump:0px;--comparison-visible:clamp(var(--comparison-min), calc(var(--comparison-position) + var(--comparison-bump)), var(--comparison-max))}.comparison-reveal{transform:translateX(calc(var(--comparison-visible) - 100cqw))}.comparison-image{transform:translateX(calc(100cqw - var(--comparison-visible)))}.comparison-divider{transform:translateX(var(--comparison-visible))}@media (hover:hover){.image-comparison:has(.comparison-label:hover:not(:disabled)){--comparison-duration:var(--comparison-settle-duration)}.image-comparison:has([data-action=after]:hover:not(:disabled)){--comparison-bump:var(--comparison-hover-distance)}.image-comparison:has([data-action=before]:hover:not(:disabled)){--comparison-bump:calc(-1 * var(--comparison-hover-distance))}}