:root {
  --primary: #00d1b2;      /* Bulma primary */
  --track: #2a2f3a;        /* dark grey like the screenshot */
  --track-border: #3a4252; /* slightly lighter */
}

/* base */
input[type="range"].bulma-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;           /* room for thumb */
  background: transparent;
}

/* ===== WebKit (Chrome/Edge/Safari) ===== */
input[type="range"].bulma-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--primary) 0%,
    var(--primary) var(--p, 50%),
    var(--track) var(--p, 50%),
    var(--track) 100%
  );
  border: 1px solid var(--track-border);
}

input[type="range"].bulma-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px; /* centers thumb on 10px track */
  border-radius: 50%;
  background: var(--primary);

  /* makes the thumb visible even when it sits on the filled part */
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(0, 209, 178, 0.18);
  cursor: pointer;
}

/* ===== Firefox ===== */
input[type="range"].bulma-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--track);
  border: 1px solid var(--track-border);
}
input[type="range"].bulma-range::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
}
input[type="range"].bulma-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(0, 209, 178, 0.18);
  cursor: pointer;
}