.amber-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  display: block;
  height: 32px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  position: relative;
}

.amber-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  margin-top: 11px;
  background: linear-gradient(
    90deg,
    #c27d58 var(--range-progress, 0%),
    #eadfd4 var(--range-progress, 0%)
  );
  transition: background 0.05s linear;
}

.amber-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border-radius: 999px;
  border: 4px solid white;
  background: #c27d58;
  box-shadow: 0 10px 24px rgba(194, 125, 88, 0.32);
  cursor: grab;
  transform-origin: center center;
  transition: transform 0.1s ease;
}

.amber-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.06);
}

.amber-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: #eadfd4;
}

.amber-range::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: #c27d58;
}

.amber-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 4px solid white;
  background: #c27d58;
  box-shadow: 0 10px 24px rgba(194, 125, 88, 0.32);
  cursor: grab;
}