.image-comparison{margin:0 0 64px}
.comparison-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:26px}
.comparison-intro h2{font-size:clamp(1.8rem,3vw,2.6rem);max-width:540px}
.comparison-intro p{font-size:1rem;line-height:1.7;color:var(--muted);max-width:340px}
.comparison-stage{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative;border-radius:6px}
.comparison-layer{position:relative;min-width:0;aspect-ratio:8/5;overflow:hidden;border-radius:6px}
.comparison-layer img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.comparison-before img{object-position:50% 90%}
.comparison-after img{object-position:50% 50%}
.comparison-badge{position:absolute;top:20px;left:20px;padding:8px 14px;background:#101019e8;color:white;border:1px solid #ffffff70;border-radius:3px;font-size:.875rem;font-weight:700;line-height:1.4;pointer-events:none}
.comparison-after .comparison-badge{left:auto;right:20px}
.image-comparison [hidden]{display:none!important}
.image-comparison[data-enhanced] .comparison-stage{display:block;aspect-ratio:8/5;overflow:hidden;background:var(--night);isolation:isolate;touch-action:pan-y;cursor:ew-resize}
.image-comparison[data-enhanced] .comparison-layer{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.image-comparison[data-enhanced] .comparison-before{z-index:2;clip-path:inset(0 calc(100% - var(--comparison-position,50%)) 0 0)}
.image-comparison[data-enhanced] .comparison-after{z-index:1}
.comparison-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--comparison-position,50%);width:3px;transform:translateX(-50%);background:white;box-shadow:0 0 10px #0008;pointer-events:none}
.comparison-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;background:var(--purple);color:white;border:3px solid white;border-radius:50%;box-shadow:0 3px 16px #0005}
.comparison-handle svg{width:32px;height:24px}
.comparison-range{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.comparison-stage:focus-within{outline:3px solid var(--purple);outline-offset:6px}
.comparison-portrait .comparison-stage{max-width:600px;margin-inline:auto}
.comparison-portrait .comparison-layer,.comparison-portrait[data-enhanced] .comparison-stage{aspect-ratio:707/944}
.comparison-portrait .comparison-layer img{object-position:50% 50%}
.comparison-soft-top .comparison-layer,.comparison-soft-top[data-enhanced] .comparison-stage{aspect-ratio:707/730}
.comparison-soft-top .comparison-layer img{object-position:50% 43.4243%}
@media(max-width:640px){.image-comparison{margin-bottom:42px}.comparison-intro{display:block;margin-bottom:20px}.comparison-intro h2{font-size:1.8rem}.comparison-intro p{margin-top:14px;max-width:none}.comparison-stage{grid-template-columns:1fr;gap:16px}.comparison-badge{top:12px;left:12px;padding:6px 10px}.comparison-after .comparison-badge{right:12px}.comparison-handle{width:48px;height:48px}}
@media(forced-colors:active){.comparison-stage:focus-within{outline-color:Highlight}.comparison-divider,.comparison-handle{forced-color-adjust:none}}