@property --wave{syntax:"<length>";inherits:true;initial-value:0}@property --near-lo{syntax:"<number>";inherits:true;initial-value:0}@property --near-hi{syntax:"<number>";inherits:true;initial-value:0}input[type=range]{--ticks:10;--thumb:13px;--wave-peak:4px;--tip:calc(var(--row) - 7px - var(--wave-peak));--lo-h:calc(13px - (6px - var(--wave-peak)) * var(--near-lo));--hi-h:calc(13px - (6px - var(--wave-peak)) * var(--near-hi));--tick-ink:var(--lg-rule,color-mix(in srgb, currentColor 28%, var(--pp,var(--paper))));--track-ink:currentColor;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-width:0;height:var(--row);--in:calc(var(--thumb) / 2 - .5px);--ruler:calc(100% - var(--in) * 2);--ticks-img:repeating-linear-gradient(to right, var(--tick-ink) 0 1px, transparent 1px calc((100% - 1px) / var(--ticks)));color:inherit;background: linear-gradient(currentColor, currentColor) left var(--in) bottom 0 / 1px var(--lo-h) no-repeat, linear-gradient(currentColor, currentColor) right var(--in) bottom 0 / 1px var(--hi-h) no-repeat,  var(--ticks-img) left var(--in) bottom 0 / var(--ruler) 7px no-repeat,  linear-gradient(var(--track-ink), var(--track-ink)) left var(--in) bottom 0 / var(--ruler) 1px no-repeat;accent-color:currentColor;cursor:ew-resize;margin:0;padding:0;transition:--wave .3s cubic-bezier(.3,.7,0,1),--near-lo .3s cubic-bezier(.3,.7,0,1),--near-hi .3s cubic-bezier(.3,.7,0,1);display:block}input[type=range]:is(:active,:focus-visible){--wave:var(--wave-peak);background:linear-gradient(currentColor, currentColor) left var(--in) bottom 0 / 1px var(--lo-h) no-repeat, linear-gradient(currentColor, currentColor) right var(--in) bottom 0 / 1px var(--hi-h) no-repeat, var(--ticks-img) left var(--in) bottom 0 / var(--ruler) 7px no-repeat, linear-gradient(var(--track-ink), var(--track-ink)) left var(--in) bottom 0 / var(--ruler) 1px no-repeat,  radial-gradient(ellipse var(--row) calc(7px + var(--wave)) at calc(var(--p,0) * 100%) 100%, transparent 99%, var(--pp,var(--paper)) 100%) left var(--in) top 0 / var(--ruler) 100% no-repeat,  var(--ticks-img) left var(--in) bottom 0 / var(--ruler) 100% no-repeat}input[type=range]::-webkit-slider-runnable-track{height:var(--row);background:0 0;border:0}input[type=range]::-moz-range-track{height:var(--row);background:0 0;border:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;--ink:currentColor;--paper-fill:var(--pp,var(--paper));width:var(--thumb);height:var(--row);--d:calc(var(--thumb) / 2);background:linear-gradient(to bottom right, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% - var(--d) / 2) calc(var(--tip) - var(--d) * 2) / var(--d) var(--d) no-repeat, linear-gradient(to bottom left, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% + var(--d) / 2) calc(var(--tip) - var(--d) * 2) / var(--d) var(--d) no-repeat, linear-gradient(to top right, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% - var(--d) / 2) calc(var(--tip) - var(--d)) / var(--d) var(--d) no-repeat, linear-gradient(to top left, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% + var(--d) / 2) calc(var(--tip) - var(--d)) / var(--d) var(--d) no-repeat;transform-origin:50% var(--tip);border:0;border-radius:0;transition:transform .15s;transform:scale(.8)}input[type=range]::-moz-range-thumb{--ink:currentColor;--paper-fill:var(--pp,var(--paper));width:var(--thumb);height:var(--row);--d:calc(var(--thumb) / 2);background:linear-gradient(to bottom right, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% - var(--d) / 2) calc(var(--tip) - var(--d) * 2) / var(--d) var(--d) no-repeat, linear-gradient(to bottom left, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% + var(--d) / 2) calc(var(--tip) - var(--d) * 2) / var(--d) var(--d) no-repeat, linear-gradient(to top right, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% - var(--d) / 2) calc(var(--tip) - var(--d)) / var(--d) var(--d) no-repeat, linear-gradient(to top left, transparent 50%, var(--ink) 50% calc(50% + 1px), var(--paper-fill) calc(50% + 1px)) calc(50% + var(--d) / 2) calc(var(--tip) - var(--d)) / var(--d) var(--d) no-repeat;transform-origin:50% var(--tip);border:0;border-radius:0;transition:transform .15s;transform:scale(.8)}input[type=range]:focus-visible{outline:none}input[type=range]:is(:hover,:active,:focus-visible)::-webkit-slider-thumb{transform:scale(1)}input[type=range]:is(:hover,:active,:focus-visible)::-moz-range-thumb{transform:scale(1)}