.bm4-before-after{--bm4-compare-position:50%;isolation:isolate;touch-action:pan-y;position:relative;overflow:hidden}.bm4-before-after-base,.bm4-before-after-reveal{position:absolute;inset:0}.bm4-before-after-reveal{z-index:2;clip-path:inset(0 calc(100% - var(--bm4-compare-position)) 0 0)}.bm4-before-after-label{z-index:5;background:color-mix(in srgb, var(--bg-page) 68%, transparent);min-height:24px;color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--bm-radius-full);letter-spacing:.1em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;align-items:center;padding:0 8px;font-size:13px;font-weight:800;display:inline-flex;position:absolute;bottom:10px}.bm4-before-after-label.is-before{right:10px}.bm4-before-after-label.is-after{left:10px}.bm4-before-after-divider{top:0;bottom:0;left:var(--bm4-compare-position);z-index:6;background:linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 42%, transparent), color-mix(in srgb, var(--text-primary) 96%, transparent), color-mix(in srgb, var(--text-primary) 48%, transparent));width:3px;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;display:block;position:absolute;transform:translate(-50%)}.bm4-before-after-divider>span{background:color-mix(in srgb, var(--text-primary) 91%, transparent);border:1px solid var(--border-strong);width:34px;height:34px;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bm4-before-after-divider>span:before{border-right:2px solid var(--bm-gray-600);border-left:2px solid var(--bm-gray-600);content:"";position:absolute;inset:11px 8px}.bm4-before-after-range{z-index:10;appearance:none;cursor:ew-resize;opacity:0;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.bm4-before-after-range::-webkit-slider-thumb{appearance:none;width:44px;height:100%}.bm4-before-after-range::-moz-range-thumb{border:0;width:44px;height:100%}.bm4-before-after:has(.bm4-before-after-range:focus-visible){outline:3px solid color-mix(in srgb, var(--accent) 42%, transparent);outline-offset:3px}@media (min-width:0){.bm4-before-after-label{background:color-mix(in srgb, var(--bg-page) 82%, transparent);border-color:var(--border-strong);color:var(--text-primary);box-shadow:var(--shadow-md)}.bm4-before-after-divider{background:linear-gradient(90deg, color-mix(in srgb, var(--accent-hover) 42%, transparent), var(--text-primary), color-mix(in srgb, var(--accent-hover) 46%, transparent));box-shadow:var(--shadow-glow)}.bm4-before-after-divider>span{background:var(--bm-bg-elevated);border-color:var(--border-strong);box-shadow:var(--shadow-lg), var(--shadow-glow)}.bm4-before-after-divider>span:before{border-right-color:var(--bm-text-primary);border-left-color:var(--bm-text-primary)}:is(.bm4-before-after:has(.bm4-before-after-range:hover) .bm4-before-after-divider>span,.bm4-before-after:has(.bm4-before-after-range:focus-visible) .bm4-before-after-divider>span){background:var(--bm-bg-hover);border-color:var(--bm-primary-light)}.bm4-before-after:has(.bm4-before-after-range:focus-visible){outline-color:var(--focus-ring)}}