.bar-div{height:var(--bar-h,8px);background:var(--color-neutral-200);display:block;position:relative}.bar-div>.bar-zero{background:var(--color-text);width:1px;position:absolute;top:-3px;bottom:-3px;left:50%}.bar-div>.bar-fill{background:var(--color-neutral-400);position:absolute;top:0;bottom:0}.bar-div>.bar-fill[data-harder]{background:var(--color-accent)}.bar-split{height:var(--bar-h,8px);border:1px solid var(--color-divider);background:var(--color-neutral-300);display:flex}.bar-split>.bar-fill{background:var(--color-accent);height:100%;display:block}.bar-meter{height:var(--bar-h,6px);background:var(--color-neutral-200);display:block}.bar-meter>.bar-fill{background:var(--color-accent);height:100%;display:block}.bar-meter>.bar-fill[data-tone=neutral]{background:var(--color-neutral-400)}.bar-stack{height:var(--bar-h,14px);border:1px solid var(--color-divider);background:var(--color-neutral-200);display:block}.bar-stack>.bar-fill{height:100%;display:flex}.bar-stack>.bar-fill>i{background:var(--color-accent);height:100%;display:block}.bar-stack>.bar-fill>i[data-tone=soft]{background:var(--color-accent-300)}.bar-range{height:18px;display:block;position:relative}.bar-range>.bar-axis{background:var(--color-neutral-200);height:2px;position:absolute;top:8px;left:0;right:0}.bar-range>.bar-fill{background:var(--color-accent);height:8px;position:absolute;top:5px}.bar-range>.bar-end{background:var(--color-accent-900);width:2px;height:14px;margin-left:-1px;position:absolute;top:2px}.bar-dumb{height:16px;display:block;position:relative}.bar-dumb:before{content:"";background:var(--color-divider);height:1px;position:absolute;top:7px;left:0;right:0}.bar-dumb>:first-child{background:var(--color-neutral-500);height:3px;position:absolute;top:6px}.bar-dumb>:nth-child(n+2){background:var(--color-neutral-500);border-radius:50%;width:12px;height:12px;margin-left:-6px;position:absolute;top:2px}.bar-dumb>:nth-child(2){border:2px solid var(--color-neutral-500);background:var(--color-bg)}.bar-dumb[data-harder]>:is(:first-child,:nth-child(3)){background:var(--color-accent)}.bar-key{background:var(--color-neutral-500);border-radius:50%;flex:none;width:10px;height:10px;display:inline-block}.bar-key[data-kind=was]{border:2px solid var(--color-neutral-500);background:var(--color-bg)}.bar-key[data-kind=harder]{background:var(--color-accent)}