.uq-przedpo{position:relative;overflow:hidden;border-radius:var(--uq-r);border:1px solid var(--uq-line);aspect-ratio:var(--pp-ratio,16/10);max-width:820px;margin:6px auto 0;user-select:none;background:var(--uq-cream)}
.uq-pp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.uq-pp-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.uq-pp-label{position:absolute;top:12px;font-family:var(--uq-font-mono);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--uq-ink) 68%,transparent);padding:4px 9px;border-radius:var(--uq-r);pointer-events:none;z-index:3}
.uq-pp-label--before{left:12px}
.uq-pp-label--after{right:12px}
.uq-pp-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--uq-ink) 22%,transparent);z-index:2;pointer-events:none}
.uq-pp-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px color-mix(in srgb,var(--uq-ink) 32%,transparent)}
.uq-pp-grip::before,.uq-pp-grip::after{content:"";position:absolute;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translateY(-50%)}
.uq-pp-grip::before{left:9px;border-right:7px solid var(--uq-ink)}
.uq-pp-grip::after{right:9px;border-left:7px solid var(--uq-ink)}
.uq-pp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y}
.uq-pp-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.uq-pp-range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}
@media(max-width:600px){.uq-przedpo{aspect-ratio:var(--pp-ratio,4/3)}.uq-pp-grip{width:34px;height:34px}}