.city-compare{--pos:50%;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:24px;border:1px solid rgba(216,181,106,.3);background:#0a2845;touch-action:pan-y;user-select:none}
.city-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.city-compare img.after{clip-path:inset(0 0 0 var(--pos))}
.city-compare::after{content:'';position:absolute;top:0;bottom:0;left:var(--pos);width:3px;transform:translateX(-1.5px);background:#fff;box-shadow:0 0 14px rgba(0,0,0,.5);z-index:5;pointer-events:none}
.city-compare .handle{position:absolute;left:var(--pos);top:50%;transform:translate(-50%,-50%);z-index:7;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#efd28e,#c69d4e);color:#0a2d50;border:3px solid rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.32);font-size:21px;font-weight:900;pointer-events:none}
.city-compare .range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:9;margin:0;padding:0}
.city-compare:focus-within{outline:3px solid #e8c979;outline-offset:4px}
.city-compare .tag{position:absolute;top:14px;z-index:10;padding:7px 11px;border-radius:999px;background:rgba(4,25,43,.84);font-size:12px;font-weight:900;letter-spacing:.05em;border:1px solid rgba(255,255,255,.10);pointer-events:none}
.city-compare .tag.before{left:14px}.city-compare .tag.after{right:14px;background:rgba(190,150,71,.92)}
@media(max-width:700px){.city-compare{max-height:300px}}