:root{
  --range-height:10px;
  --range-thumb-size:20px;
  --range-track-radius:999px;
  --range-bg:#e6e7ea;
  --range-fill:#6366f1;
  --range-thumb-bg:#ffffff;
  --range-thumb-shadow:0 6px 14px rgba(0,0,0,0.18);
  --range-focus-ring:0 0 0 8px rgba(99,102,241,0.12)
}

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:var(--range-thumb-size);
  background:linear-gradient(90deg,var(--range-fill) 50%,var(--range-bg) 50%);
  border-radius:var(--range-track-radius);
  cursor:pointer;
  padding:0;
  margin:0;
  display:block;
  box-sizing:border-box;
}

input[type="range"]:focus{outline:none}

input[type="range"]::-webkit-slider-runnable-track{
  height:var(--range-height);
  border-radius:var(--range-track-radius);
  background:transparent;
  border:0;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:var(--range-thumb-size);
  height:var(--range-thumb-size);
  margin-top:calc((var(--range-height) - var(--range-thumb-size))/2);
  border-radius:50%;
  background:var(--range-thumb-bg);
  box-shadow:var(--range-thumb-shadow);
  border:2px solid rgba(0,0,0,0.06);
  transition:transform .12s ease,box-shadow .12s ease;
}

input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.06)}
input[type="range"]:focus::-webkit-slider-thumb{box-shadow:var(--range-thumb-shadow),var(--range-focus-ring)}

input[type="range"]::-moz-range-track{
  height:var(--range-height);
  border-radius:var(--range-track-radius);
  background:transparent;
  border:0;
}

input[type="range"]::-moz-range-progress{
  height:var(--range-height);
  background:transparent;
  border-radius:var(--range-track-radius);
}

input[type="range"]::-moz-range-thumb{
  width:var(--range-thumb-size);
  height:var(--range-thumb-size);
  border-radius:50%;
  background:var(--range-thumb-bg);
  box-shadow:var(--range-thumb-shadow);
  border:2px solid rgba(0,0,0,0.06);
  transition:transform .12s ease,box-shadow .12s ease;
}

input[type="range"]::-ms-track{
  height:var(--range-height);
  background:transparent;
  border-color:transparent;
  color:transparent;
}

input[type="range"]::-ms-fill-lower{background:transparent;border-radius:var(--range-track-radius)}
input[type="range"]::-ms-fill-upper{background:transparent;border-radius:var(--range-track-radius)}

input[type="range"]::-ms-thumb{
  width:var(--range-thumb-size);
  height:var(--range-thumb-size);
  border-radius:50%;
  background:var(--range-thumb-bg);
  box-shadow:var(--range-thumb-shadow);
  border:2px solid rgba(0,0,0,0.06);
  transition:transform .12s ease,box-shadow .12s ease;
  margin-top:0;
}

@media (prefers-reduced-motion:reduce){
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb,
  input[type="range"]::-ms-thumb{transition:none}
}

@media (max-width:480px){
  :root{--range-thumb-size:18px;--range-height:8px}
}