.image-comparison{--comparison-surface:white;--comparison-label-surface:color-mix(in srgb, var(--comparison-surface) 88%, transparent);--comparison-ink:var(--ui-ink);--comparison-muted:var(--page-muted);--comparison-accent:var(--ui-accent);--comparison-border:color-mix(in srgb, var(--ui-border) 65%, transparent);--comparison-handle-surface:var(--ui-ink);--comparison-handle-ink:var(--comparison-surface);--comparison-radius:32px;--comparison-inset:28px;--comparison-handle-size:44px;--comparison-glow-width:80px;--comparison-feedback-duration:.18s;margin:0}.comparison-stage{isolation:isolate;border-radius:var(--comparison-radius);background:var(--comparison-surface);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.comparison-stage>img{object-fit:cover;width:100%;height:100%;display:block}.comparison-hero .comparison-stage>img{object-fit:contain}.comparison-before{clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0);position:absolute;inset:0}.comparison-labels{inset:var(--comparison-inset) var(--comparison-inset) auto;pointer-events:none;letter-spacing:.01em;justify-content:space-between;font-size:11px;display:flex;position:absolute}.comparison-labels span{background:var(--comparison-label-surface);border:1px solid var(--comparison-border);color:var(--comparison-ink);border-radius:100px;align-items:center;gap:8px;padding:8px 12px;display:inline-flex}.comparison-labels span:before{content:"";background:var(--comparison-muted);border-radius:50%;width:5px;height:5px}.comparison-labels span:last-child:before{background:var(--comparison-accent)}.comparison-divider{top:0;bottom:0;left:var(--comparison-position);background:linear-gradient(transparent, var(--comparison-border) 12%, color-mix(in srgb, var(--comparison-accent) 65%, var(--comparison-border)) 50%, var(--comparison-border) 88%, transparent);pointer-events:none;width:1px;position:absolute;transform:translate(-50%)}.comparison-divider:before{content:"";width:var(--comparison-glow-width);background:linear-gradient(to left, color-mix(in srgb, var(--comparison-accent) 12%, transparent), transparent);opacity:.4;transition:opacity var(--comparison-feedback-duration);position:absolute;top:8%;bottom:8%;right:0}.comparison-stage[data-dragging=true] .comparison-divider:before{opacity:1}.comparison-handle-position{left:clamp(calc(var(--comparison-handle-size) / 2 + 8px), var(--comparison-position), calc(100% - var(--comparison-handle-size) / 2 - 8px));bottom:var(--comparison-inset);pointer-events:none;position:absolute;transform:translate(-50%)}.comparison-handle{width:var(--comparison-handle-size);height:var(--comparison-handle-size);border-radius:calc(var(--ui-radius) + 2px);border:1px solid color-mix(in srgb, var(--comparison-handle-ink) 18%, transparent);background:var(--comparison-handle-surface);color:var(--comparison-handle-ink);box-shadow:0 3px 12px color-mix(in srgb, var(--ui-ink) 14%, transparent);place-items:center;display:grid}.comparison-handle svg{width:21px;height:21px}.comparison-range{appearance:none;opacity:0;cursor:ew-resize;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.comparison-range::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:100%}.comparison-range::-moz-range-thumb{border:0;width:1px;height:100%}.comparison-stage:has(.comparison-range:focus-visible) .comparison-handle{outline:3px solid var(--ui-focus);outline-offset:4px}.image-comparison figcaption{color:var(--comparison-muted);justify-content:space-between;align-items:center;gap:24px;padding:25px 4px 0;font-size:11px;line-height:1.6;display:flex}.compare-hint{color:var(--comparison-ink);font-size:12px}.comparison-detail{--comparison-surface:#121412;--comparison-ink:#d8dfd2;--comparison-muted:#a9b0a3;--comparison-border:#ffffff26;--comparison-handle-surface:#f3f5ec;--comparison-radius:24px}@media (width<=760px){.image-comparison{--comparison-radius:20px;--comparison-inset:16px;--comparison-glow-width:48px}.comparison-detail{--comparison-radius:18px}.comparison-labels{font-size:10px}.comparison-labels span{gap:6px;padding:6px 10px}.image-comparison figcaption{text-align:center;flex-direction:column;justify-content:center;gap:8px;padding-top:22px;font-size:10px}}@media (prefers-reduced-motion:reduce){.comparison-divider:before{transition:none}}