.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 rgb(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:rgb(255 255 255 / .55);text-shadow:0 2px 10px rgb(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 rgb(0 0 0 / .2),0 0 14px rgb(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 rgb(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}}