/* Range slider styling */
input[type=range]{ -webkit-appearance:none; width:100%; height:0.375rem; background:transparent; outline:none; }
input[type=range]::-webkit-slider-runnable-track{
  height:0.375rem; border-radius:9999px;
  background:linear-gradient(currentColor, currentColor) 0/var(--fill,0%) 100% no-repeat, #e5e7eb;
}
input[type=range]::-moz-range-track{ height:0.375rem; border-radius:9999px; background:#e5e7eb; }
input[type=range]::-moz-range-progress{ height:0.375rem; border-radius:9999px; background:currentColor; }

input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:9999px;
  background:white; border:2px solid #2563eb; box-shadow:0 1px 3px rgba(0,0,0,.12);
  margin-top:-5px;
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:9999px;
  background:white; border:2px solid #2563eb; box-shadow:0 1px 3px rgba(0,0,0,.12);
}

input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.02); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(0.98); }
input[type=range]:focus{ outline:none; }
input[type=range]:focus-visible{ box-shadow:0 0 0 4px rgba(37,99,235,.15); border-radius:9999px; }

.output-big{ font-size:1.125rem; font-weight:700; }
.output-unit{ opacity:.75; margin-left:.25rem; }