.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.image-compare{position:relative;isolation:isolate;aspect-ratio:798/1200;width:100%;overflow:hidden;background:#c6af75;touch-action:pan-y}
.image-compare>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.image-compare .compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.compare-labels{position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;gap:12px;pointer-events:none;z-index:2}
.compare-labels span{font:600 10px/1.2 InstrumentL22,system-ui,sans-serif;letter-spacing:.06em;padding:7px 9px;background:#0b0b0ce8;color:#fff}
.compare-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:white;transform:translateX(-50%);pointer-events:none;z-index:2;box-shadow:0 0 6px #0002}
.compare-line>span{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#f4f2ed;color:#0b0b0c;box-shadow:0 2px 12px #0002}
.compare-line svg{display:block;width:32px;height:20px}
.compare-range{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.image-compare:focus-within{outline:3px solid #f4f2ed;outline-offset:5px}.image-compare:focus-within .compare-line>span{outline:3px solid #0b0b0c;outline-offset:3px}
.compare-hint{font:13px/1.5 InstrumentL22,system-ui,sans-serif;margin:12px 0 0;color:inherit}
@media(max-width:360px){.compare-labels{inset:10px 10px auto}.compare-labels span{font-size:9px;padding:6px}.compare-line>span{width:42px;height:42px}}