input[type=range]{appearance:none;--value:50%;background:0 0;width:100%;height:12px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,  #444, #666 var(--value),  #333 var(--value), #444 100%);border-radius:1.5px;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{--thumb-color:var(--text);appearance:none;background:linear-gradient(var(--thumb-color), var(--thumb-color)) no-repeat top center / 2px 4px, linear-gradient(var(--thumb-color), var(--thumb-color)) no-repeat bottom center / 2px 4px, radial-gradient(circle, transparent 4px, var(--thumb-color) 4px, var(--thumb-color) 6px, transparent 6px) no-repeat center / 20px 20px;cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;margin-top:-8px}input[type=range]:focus::-webkit-slider-thumb{--thumb-color:var(--accent)}input[type=range]:active::-webkit-slider-thumb{--thumb-color:var(--accent)}input[type=range]::-moz-range-track{background:linear-gradient(90deg,#444,#666);border-radius:1.5px;height:3px}input[type=range]::-moz-range-progress{background:linear-gradient(90deg,#333,#444);border-radius:1.5px;height:3px}input[type=range]::-moz-range-thumb{--thumb-color:var(--text);background:linear-gradient(var(--thumb-color), var(--thumb-color)) no-repeat top center / 2px 4px, linear-gradient(var(--thumb-color), var(--thumb-color)) no-repeat bottom center / 2px 4px, radial-gradient(circle, transparent 4px, var(--thumb-color) 4px, var(--thumb-color) 6px, transparent 6px) no-repeat center / 20px 20px;cursor:pointer;border:none;border-radius:50%;width:20px;height:20px}input[type=range]:focus::-moz-range-thumb{--thumb-color:var(--accent)}input[type=range]:active::-moz-range-thumb{--thumb-color:var(--accent)}