.hrange{-webkit-user-select:none;user-select:none;padding-top:44px}.hrange__track{cursor:pointer;touch-action:none;height:56px;margin-inline:14px;position:relative}.hrange__rail{inset-inline:0;border:1px solid var(--line);background-image:radial-gradient(circle,#ffffff12 1.2px,#0000 1.6px);background-size:7px 7px;border-radius:10px;height:40px;margin-inline:-14px;position:absolute;top:50%;transform:translateY(-50%)}.hrange__fill{inset-inline-start:-14px;background-image:radial-gradient(circle, var(--ink) 2.2px, transparent 2.7px);box-sizing:content-box;height:40px;transition:width .22s var(--ease-drawer);background-size:7px 7px;border-radius:10px 0 0 10px;padding-inline-end:14px;position:absolute;top:50%;transform:translateY(-50%);-webkit-mask-image:linear-gradient(90deg,#0000002e,#000);mask-image:linear-gradient(90deg,#0000002e,#000)}.hrange__tick{background:var(--line-strong);width:2px;height:12px;margin-inline-start:-1px;position:absolute;top:50%;transform:translateY(-50%)}.hrange__tick.is-on{background:0 0}.hrange__thumb{background:var(--ink);width:22px;height:48px;box-shadow:0 0 0 4px var(--ground), 0 8px 24px -6px #000;cursor:grab;transition:inset-inline-start .22s var(--ease-drawer), transform .16s var(--ease-out);border-radius:7px;outline:none;margin-inline-start:-11px;position:absolute;top:50%;transform:translateY(-50%)}.hrange__thumb:focus-visible{box-shadow:0 0 0 4px var(--ground), 0 0 0 6px var(--signal,var(--ink))}.hrange.is-drag .hrange__thumb{cursor:grabbing;transform:translateY(-50%)scaleY(1.08)}.hrange.is-drag .hrange__thumb,.hrange.is-drag .hrange__fill{transition:none}.hrange.is-empty .hrange__thumb{background:var(--raised);box-shadow:0 0 0 4px var(--ground), inset 0 0 0 1px var(--line-strong)}.hrange__bubble{background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong);white-space:nowrap;color:var(--ink);border-radius:6px;padding:5px 7px 4px;font-size:13px;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.hrange.is-empty .hrange__bubble{color:var(--ink-3)}.hrange__labels{justify-content:space-between;margin-top:12px;display:flex}.hrange__labels button{font:500 14px/1 var(--font-ui);color:var(--ink-3);cursor:pointer;background:0 0;border:0;padding:10px 4px;transition:color .12s steps(2,end)}.hrange__labels button.is-on{color:var(--ink)}@media (prefers-reduced-motion:reduce){.hrange__thumb,.hrange__fill{transition:none}}