/* One photograph, rendered twice. The monochrome layer is clipped, never resized. */
.image-compare{--split:100%;position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:16/9;background:#171717;color:#fff;user-select:none}
.compare-stage,.compare-mono{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.compare-mono{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.image-compare img.compare-photo{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--image-focus,center);margin:0;aspect-ratio:auto;transform:translate3d(0,var(--photo-y,0px),0) scale(var(--photo-scale,1));transform-origin:center;filter:none;pointer-events:none}
.image-compare .compare-mono img.compare-photo{filter:grayscale(1)}
.compare-range{display:none;position:absolute;z-index:4;inset:0 0 52px;appearance:none;-webkit-appearance:none;opacity:0;width:100%;height:calc(100% - 52px);margin:0;padding:0;border:0;cursor:ew-resize;touch-action:pan-y;background:transparent}
.compare-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1px;height:40px}
.compare-range::-moz-range-thumb{width:1px;height:40px;border:0}
.compare-divider{display:none;position:absolute;z-index:3;top:0;bottom:52px;left:var(--split);width:1px;background:#ffffffc9;pointer-events:none;box-shadow:0 0 3px #0007}
.compare-divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:space-evenly;width:48px;height:48px;border:1px solid #fffd;border-radius:50%;background:#101010df;box-shadow:0 2px 12px #0003;font-size:22px;font-weight:300;line-height:1}
.compare-range:focus-visible~.compare-divider>span{outline:3px solid #fff;outline-offset:5px}
.image-compare:focus-within{outline:2px solid #fff;outline-offset:-4px}
.compare-range:focus-visible::-webkit-slider-thumb{background:transparent}
.compare-range:focus-visible::-moz-range-thumb{background:transparent}
.compare-labels{display:none;position:absolute;z-index:3;inset:16px 16px auto;justify-content:space-between;pointer-events:none;gap:15px;font-size:8px;letter-spacing:.14em}
.compare-labels>span{background:#0a0a0abf;padding:8px 10px;border:1px solid #ffffff33}
.compare-toolbar{display:none;position:absolute;z-index:5;inset:auto 0 0;min-height:52px;align-items:center;justify-content:space-between;gap:10px;background:#0a0a0aeb;border-top:1px solid #ffffff28;padding:0 18px;font-size:9px;letter-spacing:.08em}
.compare-toolbar button{appearance:none;border:0;border-radius:0;background:transparent;color:#bcbcbc;font:inherit;min-height:44px;min-width:48px;padding:4px 0;cursor:pointer}
.compare-toolbar button:hover,.compare-toolbar button[aria-pressed=true]{color:#fff;text-decoration:underline;text-underline-offset:5px}
.compare-toolbar button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.compare-toolbar>span{color:#bdbdbd;font-size:8px;text-align:center;letter-spacing:.12em}
.compare-ready .compare-range,.compare-ready .compare-divider{display:block}
.compare-ready .compare-toolbar,.compare-ready .compare-labels{display:flex}