body{font-family:Roboto,sans-serif;font-size:14px;line-height:1.42857143;color:#333}.container{max-width:100%}input[type=text]{max-width:70px}input[type=number]{max-width:100px}p{font-weight:800}.range-slider,option{place-items:center}.range-slider{--extra: 0;--large: 0;--not-large: calc(1 - var(--large));--small: 0;--not-small: calc(1 - var(--small));--track-w: min(25em, 100vw - 2*1.75em);overflow-x:hidden;padding:.875em;background:hsla(0,0%,91%,var(--hl));filter:grayScale(calc(1 - var(--hl, 0)));transition:.35s}@media (min-width: 28.5em){.range-slider{--extra: 1 }}@media (min-width: 320px){.range-slider{--large: 1 }}@media (max-width: 220px){.range-slider{--small: 1 }}.range-slider:focus-within,.range-slider:hover{--hl: 1 }[for]{font-weight:700}input[type=range]{width:calc(var(--track-w) + 1.75em);background:linear-gradient(90deg,#15b190 25%,purple 0 75%,#b1154c 0) 50%/var(--track-w) .375em no-repeat;cursor:pointer;width:100%}input[type=range]::-webkit-slider-thumb{margin-top:-.35em;border:none;width:1.75em;height:1.75em;background:currentcolor;--poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);-webkit-clip-path:var(--poly);clip-path:var(--poly);cursor:ew-resize}input[type=range]::-moz-range-thumb{margin-top:-.35em;border:none;width:1.75em;height:1.75em;background:currentcolor;--poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);-webkit-clip-path:var(--poly);clip-path:var(--poly);cursor:ew-resize}input[type=range]:focus{outline:none}input[type=range]+output{--rng: calc(var(--max) - var(--min));--pos: calc((var(--val) - var(--min))/var(--rng)*var(--track-w));grid-row:2;justify-self:start;transform:translate(calc(.5*1.75em + var(--pos) - 50%));counter-reset:val var(--val)}input[type=range]+output:after{content:counter(val)}datalist{--track-u: calc(var(--track-w)/var(--n));grid-auto-flow:column;width:calc(var(--track-w) + 1px);box-shadow:inset 0 1px currentcolor;background:linear-gradient(90deg,currentcolor 1px,transparent 0) repeat-x;background-size:calc(var(--track-u)/5) calc(var(--extra)*.5*.875em)}option{--m: calc(var(--large));width:calc(var(--m)*var(--track-u));transform-origin:50% 0;transform:scale(min(1,var(--m)));transition:transform .35s}option:nth-child(odd){--m: calc(var(--large) + 2*var(--not-large)*var(--not-small)) }option:first-child,option:last-child{--m: calc(var(--large) + var(--not-large)*(2*var(--not-small) + .5*var(--n)*var(--small))) }option.mid{--m: calc(var(--large) + var(--not-large)*.5*var(--n)*var(--small)) }option:before{width:1px;height:.875em;background:currentcolor;content:""}