.btpo{position:relative;width:100%;max-width:100%;height:auto;max-height:var(--btpo-maxh,600px);overflow:hidden;background:#111;border-radius:10px;line-height:0;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 8px 30px rgba(0,0,0,.15);margin-left:auto;margin-right:auto}
.btpo-img{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.btpo-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.btpo-before{z-index:1}.btpo-after{z-index:2;clip-path:inset(0 0 0 var(--btpo-pos))}
.btpo-label{position:absolute;top:8%;z-index:10;font:900 clamp(24px,3.5vw,56px)/1 Arial,sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.55);text-shadow:0 2px 10px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap}
.btpo-label-before{left:calc(var(--btpo-pos) - 20px);transform:translateX(-100%);text-align:right}
.btpo-label-after{left:calc(var(--btpo-pos) + 20px);transform:none;text-align:left}
.btpo-divider{position:absolute;z-index:9;top:0;bottom:0;left:var(--btpo-pos);width:3px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 14px rgba(0,0,0,.35);pointer-events:none}
.btpo-handle{position:absolute;z-index:12;left:var(--btpo-pos);top:50%;width:58px;height:58px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:#034c8c;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.4);cursor:ew-resize;display:flex;align-items:center;justify-content:center;gap:2px;font:36px/1 Arial,sans-serif;padding:0;touch-action:none}
.btpo-handle:hover,.btpo-handle:focus-visible{background:#075fa9;transform:translate(-50%,-50%) scale(1.08);outline:none}.btpo-handle span{margin-top:-4px}.btpo-hit{position:absolute;inset:0;z-index:11;cursor:ew-resize}
@media(max-width:700px){.btpo{max-height:420px}.btpo-label{font-size:clamp(18px,6vw,34px);top:7%}.btpo-handle{width:50px;height:50px;font-size:31px}.btpo-divider{width:2px}}