.cmp{--cmp:50%;--cmp-handle:#f8c873;container-type:inline-size;position:relative;overflow:hidden;aspect-ratio:1290/800;cursor:ew-resize;touch-action:pan-y;-moz-user-select:none;user-select:none;-webkit-user-select:none;isolation:isolate}.cmp__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.cmp__layer--before{clip-path:inset(0 calc(100% - var(--cmp)) 0 0)}.cmp__divider{position:absolute;top:0;bottom:0;left:var(--cmp);width:40px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;pointer-events:none;z-index:2}.cmp__divider i{display:block;width:4px;height:calc(50% - 50px);background:#000}.cmp__handle{position:absolute;top:50%;left:var(--cmp);z-index:3;display:grid;place-items:center;width:clamp(56px,7.75cqw,100px);aspect-ratio:1;border:0;border-radius:50%;background:var(--cmp-handle);color:#141414;transform:translate(-50%,-50%);cursor:ew-resize;box-shadow:0 10px 30px rgba(20,20,20,.18);transition:transform .25s cubic-bezier(.4,0,.2,1)}.cmp__handle svg{width:48%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.cmp__handle:focus-visible,.cmp__handle:hover{transform:translate(-50%,-50%) scale(1.08)}.cmp__handle:focus-visible{outline:3px solid #141414;outline-offset:4px}.cmp:not(.is-hinted) .cmp__divider,.cmp:not(.is-hinted) .cmp__handle,.cmp:not(.is-hinted) .cmp__layer--before{transition:clip-path .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1)}.cmp__tag{position:absolute;top:16px;z-index:2;padding:6px 14px;border-radius:99px;background:rgba(20,20,20,.78);color:#fff;font-size:14px;font-weight:500;letter-spacing:.02em;pointer-events:none}.cmp__tag--before{left:16px}.cmp__tag--after{right:16px}@container (max-width:640px){.cmp__tag{font-size:12px;padding:4px 10px}}@media (prefers-reduced-motion:reduce){.cmp *,.cmp__handle{transition:none!important}}