.vol{--c:var(--color-accent-soft);display:inline-flex;position:relative}.vol-btn:active{transform:scale(.93)}.vol-btn{transition:transform .2s var(--ease-spring), background-color .15s ease, color .15s ease}.vol-pop{z-index:30;opacity:0;visibility:hidden;transform-origin:100% 100%;transition:opacity .16s ease, transform .22s var(--ease-out-expo), visibility 0s linear .16s;margin:-.75rem -.75rem 0;padding:.75rem .75rem .6rem;position:absolute;bottom:100%;right:-.5rem;transform:translateY(6px)scale(.97)}.vol[data-open] .vol-pop{opacity:1;visibility:visible;transition:opacity .16s ease, transform .22s var(--ease-out-expo), visibility 0s;transform:none}.vol:has(:focus-visible) .vol-pop{opacity:1;visibility:visible;transition:opacity .16s ease, transform .22s var(--ease-out-expo), visibility 0s;transform:none}@media (hover:hover) and (pointer:fine){.vol[data-hover] .vol-pop{opacity:1;visibility:visible;transition:opacity .16s ease, transform .22s var(--ease-out-expo), visibility 0s;transform:none}}.vol-panel{width:12.5rem;box-shadow:0 18px 40px -18px #000c, 0 0 0 1px #ffffff05, 0 10px 30px -16px var(--color-accent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.vol-row-icon:active{transform:scale(.88)}.vol-row-icon{transition:transform .2s var(--ease-spring), color .15s ease}.vol-range{appearance:none;cursor:pointer;touch-action:none;background:0 0;width:100%;height:1.5rem}.vol-range::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--c) var(--fill), var(--color-line) var(--fill));border-radius:999px;height:.3rem}.vol-range::-moz-range-track{background:var(--color-line);border-radius:999px;height:.3rem}.vol-range::-moz-range-progress{background:var(--c);border-radius:999px;height:.3rem}.vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;box-shadow:0 0 0 3px color-mix(in oklab, var(--c) 40%, transparent), 0 3px 10px -3px var(--c);background:#fff;border-radius:999px;margin-top:-.35rem}.vol-range::-moz-range-thumb{width:1rem;height:1rem;box-shadow:0 0 0 3px color-mix(in oklab, var(--c) 40%, transparent), 0 3px 10px -3px var(--c);background:#fff;border:0;border-radius:999px}.vol-range:focus-visible{outline:none}.vol-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--c)}.vol-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--c)}.vol-row-icon:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--c) 55%, transparent);outline:none}@media (prefers-reduced-motion:reduce){.vol-pop,.vol[data-open] .vol-pop,.vol-btn,.vol-row-icon{transition:none}.vol:has(:focus-visible) .vol-pop{transition:none}}