.slosh-gauge{--sg-w:88px;--sg-h:180px;--sg-r:20px;--sg-glass:#27272a;--sg-liquid:#f5f5f5;--sg-on-liquid:#111;--sg-ticks:4;--sg-font:14px;box-sizing:border-box;width:var(--sg-w);height:var(--sg-h);border-radius:var(--sg-r);isolation:isolate;background:var(--sg-glass);font-size:var(--sg-font);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;font-weight:600;line-height:1;display:inline-block;position:relative;overflow:clip}.slosh-gauge[data-interactive=true]{cursor:ns-resize;touch-action:none;-webkit-touch-callout:none}.slosh-gauge[data-disabled=true]{opacity:.5;cursor:not-allowed}.slosh-gauge__value{color:color-mix(in srgb, currentColor 65%, transparent);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.slosh-gauge__liquid{background:var(--sg-liquid);clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);position:absolute;inset:0}.slosh-gauge__liquid .slosh-gauge__value{color:var(--sg-on-liquid)}.slosh-gauge__ticks{background-image:linear-gradient(to top, color-mix(in srgb, currentColor 22%, transparent) 0 1px, transparent 1px);background-size:100% calc(100% / var(--sg-ticks));pointer-events:none;background-position:bottom;background-repeat:repeat-y;width:22%;height:100%;position:absolute;bottom:0;right:0}.slosh-gauge__marker{opacity:0;pointer-events:none;background:currentColor;border-radius:1px;height:2px;margin-top:-1px;transition:opacity .15s;position:absolute;top:0;left:10%;right:10%}.slosh-gauge[data-held=true] .slosh-gauge__marker{opacity:1}