.picker {
  --thumb: 30px;
  --accent: var(--c-pink);
  --zones: linear-gradient(90deg,
    var(--c-glass-line) 0 1.69%,
    var(--c-v1) 1.69% 5.93%,
    color-mix(in srgb, var(--c-v2) 45%, var(--c-on-brand)) 5.93% 15.25%,
    var(--c-v3) 15.25% 32.2%,
    var(--c-v4) 32.2% 66.1%,
    var(--c-v5) 66.1% 93.22%,
    var(--c-glass-line) 93.22% 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  max-width: 760px;
  margin: 0 auto var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--c-brand);
  color: var(--c-on-brand);
}

.picker__value {
  width: 4.4em;
  font: 800 var(--fs-xl) / 1 var(--font-head);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.picker__control {
  position: relative;
  padding-bottom: var(--sp-5);
}

.picker input {
  display: block;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}

.picker input:active {
  cursor: grabbing;
}

.picker input::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--zones);
}

.picker input::-moz-range-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--zones);
}

.picker input::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((10px - var(--thumb)) / 2);
  border: 7px solid var(--accent);
  border-radius: 50%;
  background: var(--c-on-brand);
  box-shadow: 0 6px 16px rgba(10, 14, 50, 0.45);
  transition: border-color 0.25s, transform 0.15s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.picker input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 7px solid var(--accent);
  border-radius: 50%;
  background: var(--c-on-brand);
  box-shadow: 0 6px 16px rgba(10, 14, 50, 0.45);
  transition: border-color 0.25s, transform 0.15s var(--ease);
}

.picker input:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.picker input:active::-moz-range-thumb {
  transform: scale(1.12);
}

.picker__scale span {
  position: absolute;
  bottom: 0;
  left: calc(var(--x) * (100% - var(--thumb)) / 100 + var(--thumb) / 2);
  translate: -50% 0;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-on-brand-muted);
}

.picker__result {
  grid-column: 1 / -1;
  min-height: 3em;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-on-brand-muted);
}

.picker__result strong {
  color: var(--c-on-brand);
}

@media (max-width: 560px) {
  .picker {
    grid-template-columns: 1fr;
    padding: var(--sp-5);
  }

  .picker__result {
    min-height: 4.5em;
  }

  .picker__scale span:first-child {
    display: none;
  }
}