.cmp-fig{margin:0;width:100%}
.cmp{--p:50%;position:relative;overflow:hidden;border-radius:14px;background:#e3d3c6;user-select:none;-webkit-user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp-after{clip-path:inset(0 0 0 var(--p))}
html[dir="rtl"] .cmp-after{clip-path:inset(0 var(--p) 0 0)}

.cmp-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-50%);
  pointer-events:none;box-shadow:0 0 10px rgba(0,0,0,.35)}
html[dir="rtl"] .cmp-handle{left:auto;right:var(--p);transform:translateX(50%)}
.cmp-handle::after{content:'\2039  \203A';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;color:#17120F;box-shadow:0 2px 10px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;font:600 18px/1 system-ui,sans-serif;letter-spacing:2px;white-space:pre;direction:ltr}

.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}
.cmp-range::-webkit-slider-runnable-track{height:100%;background:transparent}
.cmp-range::-moz-range-track{height:100%;background:transparent}
.cmp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1px;height:100%;background:transparent;border:0}
.cmp-range::-moz-range-thumb{width:1px;height:100%;background:transparent;border:0}
.cmp-range:focus-visible ~ .cmp-handle::after{outline:3px solid #B4735A;outline-offset:3px}

.cmp-label{position:absolute;top:12px;padding:5px 11px;border-radius:999px;background:rgba(20,16,14,.78);color:#fff;
  font:500 12px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;z-index:2}
.cmp-label-before{inset-inline-start:12px}
.cmp-label-after{inset-inline-end:12px}

.cmp-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  border:2px dashed #B4735A;color:#17120F;font:500 14px/1.4 system-ui,sans-serif;letter-spacing:.06em}
.cmp-cap{margin-top:10px;font:300 13px/1.5 system-ui,sans-serif;color:#5d4e44}
.cmp-host{margin-top:28px}
.cmp-host .cmp-fig{max-width:520px}