.compare{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:16px;background:#111;touch-action:pan-y}.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.compare .after{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}.compare-line{position:absolute;left:var(--pos,50%);top:0;bottom:0;width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}.compare-handle{position:absolute;left:var(--pos,50%);top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border:3px solid #fff;border-radius:50%;background:#ef6b2e;color:#fff;display:grid;place-items:center;font-weight:900}.badge{position:absolute;top:15px;padding:6px 10px;background:#0b1320d9;color:#fff;border-radius:5px;font-size:11px;font-weight:900}.badge.before{left:15px}.badge.after{right:15px}.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.compare input:focus-visible+.focus-ring{position:absolute;inset:5px;border:3px solid #fff;border-radius:14px;pointer-events:none}.no-js-pair{display:none}.no-js .compare{display:none}.no-js .no-js-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}