[data-mockup=m4] .m4-compare{margin:0;position:absolute;inset:0}[data-mockup=m4] .m4-compare figcaption,[data-mockup=m4] .m4-compare .mizu-sr-only,[data-mockup=m4] .m4-compare input[type=range]{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-mockup=m4] .m4-compare .mizu-compare-legend{display:none}[data-mockup=m4] .m4-compare .mizu-image-compare-stage{border-radius:inherit;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;height:100%;position:relative;overflow:hidden}[data-mockup=m4] .m4-compare .mizu-image-compare-stage:after{content:"";z-index:4;border-radius:inherit;pointer-events:none;transition:box-shadow .2s;position:absolute;inset:0}[data-mockup=m4] .m4-compare:has(input[type=range]:focus-visible) .mizu-image-compare-stage:after{box-shadow:inset 0 0 0 2px var(--primary)}[data-mockup=m4] .m4-compare .mizu-image-compare-stage img{object-fit:cover;pointer-events:none;-webkit-user-drag:none;filter:saturate(.82)contrast(1.02);width:100%;height:100%;position:absolute;inset:0}[data-mockup=m4] .m4-compare .mizu-image-compare-line{z-index:2;pointer-events:none;background:#faf4efeb;width:2px;position:absolute;top:0;bottom:0;translate:-50%;box-shadow:0 0 16px #eeae7b8c}[data-mockup=m4] .m4-compare .mizu-image-compare-line>span{width:40px;height:40px;color:var(--primary-foreground);background:linear-gradient(#f2bd8e 0%,#e6a26f 100%);border-radius:999px;place-items:center;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 0 0 4px #23142659,0 10px 24px -8px #100714cc}[data-mockup=m4] .m4-compare .mizu-image-compare-before,[data-mockup=m4] .m4-compare .mizu-image-compare-label-after{z-index:3;letter-spacing:.2em;text-transform:uppercase;color:var(--foreground);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;background:#1c10208c;border:1px solid #ffffff29;border-radius:999px;padding:.35rem .7rem;font-size:11px;font-weight:600;line-height:1;position:absolute;top:12px}[data-mockup=m4] .m4-compare .mizu-image-compare-label-after{left:12px}[data-mockup=m4] .m4-compare .mizu-image-compare-before{right:12px}[data-mockup=m4] .m4-compare [role=status]{height:100%;color:var(--muted-foreground);place-items:center;margin:0;font-size:14px;display:grid}