.example-comparison{border:1px solid var(--border);background:color-mix(in srgb, var(--card) 95%, transparent);min-width:0;box-shadow:var(--comparison-shadow,var(--shadow-sm));border-radius:24px;margin:0;padding:10px}.example-comparison .comparison-images{aspect-ratio:3/2;background:var(--design-canvas);isolation:isolate;border-radius:16px;position:relative;overflow:hidden}.example-comparison .comparison-images img{object-fit:contain;width:100%;height:100%;display:block}.example-comparison .comparison-original{position:absolute;inset:0}.example-comparison .comparison-images input{opacity:0;cursor:ew-resize;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.example-comparison .comparison-images:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:4px}.example-comparison .comparison-label{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:#09090b8c;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:500;position:absolute;bottom:12px}.example-comparison .original-label{left:12px}.example-comparison .edited-label{right:12px}.example-comparison .comparison-divider{pointer-events:none;background:#ffffffe6;width:2px;position:absolute;top:0;bottom:0;transform:translate(-50%);box-shadow:0 0 10px #00000040}.example-comparison .comparison-divider>span{color:#101828;background:#fff;border-radius:50%;place-items:center;width:52px;height:52px;transition:transform .3s cubic-bezier(.22,1,.36,1);display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 24px -6px #0f172a59}.example-comparison .comparison-images:hover .comparison-divider>span{transform:translate(-50%,-50%)scale(1.06)}.example-comparison figcaption{border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent);color:var(--muted-foreground);margin:10px 4px 0;padding:10px 6px 2px;font-size:12px;line-height:1.6}@media (max-width:639px){.example-comparison{border-radius:20px;padding:8px}.example-comparison .comparison-images{border-radius:12px}.example-comparison .comparison-divider>span{width:42px;height:42px}}@media (prefers-reduced-motion:reduce){.example-comparison .comparison-divider>span{transition:none}}