@property --dial{syntax:"<number>";inherits:true;initial-value:0}.dial{--dial-ink:var(--accent);--dial-w:5px;width:56px;height:56px;transition:--dial .7s var(--ease);animation:dial-fill 1.1s var(--ease) backwards;border-radius:50%;flex:none;place-items:center;display:inline-grid;position:relative}.dial:before{content:"";background:conic-gradient(var(--dial-ink) calc(var(--dial) * 1turn), color-mix(in srgb, var(--dial-ink) 16%, transparent) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--dial-w) - .5px), black calc(100% - var(--dial-w)));mask:radial-gradient(farthest-side, transparent calc(100% - var(--dial-w) - .5px), black calc(100% - var(--dial-w)));border-radius:50%;position:absolute;inset:0}.dial.sm{--dial-w:3px;width:22px;height:22px}.dial.lg{--dial-w:6px;width:72px;height:72px}.dial[data-tone=brand]{--dial-ink:var(--brand)}.dial[data-tone=up]{--dial-ink:var(--up)}.dial[data-tone=gold]{--dial-ink:var(--gold)}.dial-c{color:var(--fg);font:700 17px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;position:relative}.dial.lg .dial-c{font-size:20px}.dial-c{text-align:center;justify-items:center;display:grid}.dial-c small{color:var(--muted);font:600 11px/1 var(--font);letter-spacing:0;margin-top:3px;display:block}@keyframes dial-fill{0%{--dial:0}}@media (prefers-reduced-motion:reduce){.dial{transition:none;animation:none}}.glyph{fill:none;width:30px;height:30px;stroke:var(--glyph-ink);stroke-width:2.1px;stroke-linecap:round;stroke-linejoin:round;color:var(--glyph-glow);filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--glyph-glow) 42%, transparent));flex:none;overflow:visible}.glyph :not([fill]){fill:none}