.snd { display: grid; gap: .4rem; }
.snd__t { font-size: 1rem; }
.snd__row { --p: 50%; display: grid; grid-template-columns: auto minmax(0, auto) minmax(5rem, 1fr) 4.6rem; align-items: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; }
.snd__ic { color: var(--color-web-blue); transition: color var(--motion-fast); }
.snd__row.is-off .snd__ic { color: var(--color-web-muted); }
.snd__k { font-weight: 800; }
.snd__v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 900; }
.snd__row.is-off .snd__v { color: var(--color-web-muted); }
.snd__range { width: 100%; height: 2.75rem; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.snd__range:focus-visible { outline: .18rem solid var(--color-web-blue); outline-offset: .1rem; border-radius: 1rem; }
.snd__range::-webkit-slider-runnable-track { height: .6rem; border-radius: 1rem; background: linear-gradient(90deg, var(--color-web-lime-dark) 0, var(--color-web-lime) var(--p), var(--color-web-line) var(--p)); }
.snd__range::-moz-range-track { height: .6rem; border-radius: 1rem; background: linear-gradient(90deg, var(--color-web-lime-dark) 0, var(--color-web-lime) var(--p), var(--color-web-line) var(--p)); }
.snd__range::-webkit-slider-thumb { width: 1.6rem; height: 1.6rem; margin-top: -.5rem; border-radius: 50%; background: var(--color-web-paper); box-shadow: 0 0 0 .2rem var(--color-web-blue), 0 .2rem .45rem var(--color-web-faint); transition: transform var(--motion-fast) var(--motion-ease-out); -webkit-appearance: none; appearance: none; }
.snd__range::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: var(--color-web-paper); box-shadow: 0 0 0 .2rem var(--color-web-blue), 0 .2rem .45rem var(--color-web-faint); transition: transform var(--motion-fast) var(--motion-ease-out); }
.snd__range:active::-webkit-slider-thumb { transform: scale(1.2); }
.snd__range:active::-moz-range-thumb { transform: scale(1.2); }