.photo-comparison{--split:50%;margin:0}
.photo-stage{position:relative;isolation:isolate;aspect-ratio:3/2;overflow:hidden;background:#e9e6df}
.photo-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.photo-stage .photo-pair{position:absolute;left:0;top:0;width:200%;max-width:none;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.photo-after{clip-path:inset(0 0 0 var(--split))}
.photo-after .photo-pair{transform:translateX(-50%)}
.photo-divider{position:absolute;z-index:2;left:var(--split);top:0;bottom:0;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 5px #0004;pointer-events:none}
.photo-handle{position:absolute;z-index:2;top:50%;left:clamp(25px,var(--split),calc(100% - 25px));transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border:1px solid #fff;background:#faf8f2f5;color:#263c33;border-radius:50%;box-shadow:0 2px 16px #0003;pointer-events:none}
.photo-handle svg{width:36px;height:24px}
.photo-range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.photo-range:disabled{cursor:default}
.photo-stage:has(.photo-range:focus-visible){outline:3px solid var(--accent);outline-offset:4px}
.photo-stage:has(.photo-range:focus-visible) .photo-handle{outline:3px solid var(--accent);outline-offset:3px}
.photo-comparison[data-dragging] .photo-handle{background:#fff;box-shadow:0 2px 20px #0005}
.photo-comparison[data-error] .photo-range,.photo-comparison[data-error] .photo-handle,.photo-comparison[data-error] .photo-divider{display:none}
.photo-error{font-size:12px;padding:12px 0;color:var(--muted)}
.photo-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media print{.photo-range,.photo-handle{display:none}}