.kbbae{position:relative;display:block;width:100%;overflow:hidden;touch-action:none;user-select:none;background:#00000010}
.kbbae-img{display:block;width:100%;height:auto;pointer-events:none}
.kbbae .kbbae-after{position:absolute;inset:0;clip-path:inset(0 0 0 50%);transition:clip-path .15s ease;will-change:clip-path}
.kbbae.kbbae-dragging .kbbae-after{transition:none!important}
.kbbae[data-orientation="vertical"] .kbbae-after{clip-path:inset(50% 0 0 0)}
.kbbae .kbbae-handle{position:absolute;inset:0 auto 0 auto;left:50%;width:0}
.kbbae .kbbae-handle::before,.kbbae .kbbae-handle::after{content:"";position:absolute}
.kbbae .kbbae-handle::before{background:var(--kbbae-line-color,#fff);width:4px;top:0;bottom:0;left:-2px}
.kbbae .kbbae-handle::after{width:var(--kbbae-handle-size,48px);height:var(--kbbae-handle-size,48px);border-radius:9999px;background:var(--kbbae-handle-bg,#111);border:4px solid var(--kbbae-handle-ring,#fff);box-shadow:0 2px 12px rgba(0,0,0,.35);top:50%;left:calc(-2px - (var(--kbbae-handle-size,48px)/2));transform:translateY(-50%);cursor:ew-resize}
.kbbae .kbbae-arrow{position:absolute;width:0;height:0;top:50%;transform:translateY(-50%);z-index:1}
.kbbae .kbbae-arrow.kbbae-left{left:calc(-2px - (var(--kbbae-handle-size,48px)/2) + 14px);border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid var(--kbbae-arrow-color,#fff)}
.kbbae .kbbae-arrow.kbbae-right{left:calc(-2px + (var(--kbbae-handle-size,48px)/2) - 24px);border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid var(--kbbae-arrow-color,#fff)}
.kbbae[data-orientation="vertical"] .kbbae-handle{left:0;right:0;top:50%;bottom:auto;height:0}
.kbbae[data-orientation="vertical"] .kbbae-handle::before{height:4px;width:100%;left:0;right:0;top:-2px}
.kbbae[data-orientation="vertical"] .kbbae-handle::after{cursor:ns-resize;top:calc(-2px - (var(--kbbae-handle-size,48px)/2));left:50%;transform:translateX(-50%)}
.kbbae[data-orientation="vertical"] .kbbae-arrow.kbbae-left{left:calc(50% - 16px);transform:translate(-50%,-50%) rotate(-90deg)}
.kbbae[data-orientation="vertical"] .kbbae-arrow.kbbae-right{left:calc(50% + 16px);transform:translate(-50%,-50%) rotate(-90deg)}
.kbbae .kbbae-badge{position:absolute;font:600 12px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:9999px;pointer-events:none;letter-spacing:.2px}
.kbbae .kbbae-badge-before{top:12px;left:12px}
.kbbae .kbbae-badge-after{top:12px;right:12px}