.cmp{
  --cmp-accent:var(--rh-blue);
  position:relative;
  overflow:hidden;
  aspect-ratio:8 / 5;
  max-width:100%;
  border:1px solid var(--rh-line2);
  border-radius:18px;
  background:var(--rh-surface2);
  isolation:isolate;
  user-select:none;
  touch-action:pan-y;
}

.cmp__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  pointer-events:none;
}

.cmp__after{
  position:absolute;
  inset:0;
  clip-path:inset(0 0 0 var(--pos));
}

.cmp__tag{
  position:absolute;
  top:14px;
  z-index:2;
  padding:5px 11px;
  border-radius:99px;
  background:rgba(11,18,32,.82);
  font-family:var(--rh-mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rh-text);
  backdrop-filter:blur(6px);
  pointer-events:none;
}

.cmp__tag--before{
  left:14px;
}

.cmp__tag--after{
  right:14px;
  background:var(--cmp-accent);
  color:#06121F;
}

.cmp__handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  z-index:2;
  width:2px;
  background:var(--rh-text);
  box-shadow:0 0 0 1px rgba(11,18,32,.35), 0 0 18px rgba(0,0,0,.45);
  transform:translateX(-1px);
  pointer-events:none;
}

.cmp__knob{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:3px solid var(--rh-text);
  border-radius:50%;
  background:var(--cmp-accent);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  color:#06121F;
  transform:translate(-50%, -50%);
  transition:transform var(--transition-fast);
}

.cmp__knob svg{
  width:22px;
  height:22px;
}

.cmp__range{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
}

.cmp:hover .cmp__knob,
.cmp.is-dragging .cmp__knob{
  transform:translate(-50%, -50%) scale(1.08);
}

.cmp:has(.cmp__range:focus-visible) .cmp__knob{
  outline:3px solid var(--rh-text);
  outline-offset:3px;
}

.cmp.is-hinting .cmp__after,
.cmp.is-hinting .cmp__handle{
  transition:clip-path .9s cubic-bezier(.22,1,.36,1), left .9s cubic-bezier(.22,1,.36,1);
}

@media (max-width: 560px){
  .cmp__knob{
    width:38px;
    height:38px;
  }

  .cmp__tag{
    top:10px;
    font-size:.625rem;
  }

  .cmp__tag--before{
    left:10px;
  }

  .cmp__tag--after{
    right:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .cmp.is-hinting .cmp__after,
  .cmp.is-hinting .cmp__handle,
  .cmp__knob{
    transition:none;
  }
}