@property --val{syntax:"<integer>";inherits:true;initial-value:0}.range-container{--c:#00478d;--g:round(0.3em,1px);--l:2px;--s:22px;--t:round(0.8em,1px);--r:8px;timeline-scope:--thumb-view;position:relative;width:100%}.range-input{appearance:none;width:100%;height:8px;background:transparent;cursor:pointer}.range-input::-webkit-slider-thumb{appearance:none;width:var(--s);height:var(--s);border:var(--l) solid var(--c);border-radius:50%;background:white;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .2s ease-in-out;anchor-name:--thumb}.range-input::-webkit-slider-thumb:active{transform:scale(1.1)}.range-input::-moz-range-thumb{appearance:none;width:var(--s);height:var(--s);border:var(--l) solid var(--c);border-radius:50%;background:white;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .2s ease-in-out;anchor-name:--thumb}.range-input::-moz-range-thumb:active{transform:scale(1.1)}.range-input+.range-track{width:100%;background:#e2e8f0}.range-input+.range-track,.range-progress{position:absolute;top:50%;left:0;transform:translateY(-50%);height:8px;border-radius:4px;z-index:-1}.range-progress,.range-tooltip{background:var(--c)}.range-tooltip{position-anchor:--thumb;position:absolute;position-area:top;inset:0 -4em;color:white;font-weight:700;font-family:sans-serif;text-align:center;padding:4px 8px;border-radius:var(--r);white-space:nowrap;pointer-events:none;margin-bottom:6px}@supports not (anchor-name:--thumb){.range-tooltip{display:none}}