@property --ring-hud-value{syntax:"<number>";inherits:true;initial-value:0}@layer components{.ring-hud{--ring-hud-enter:.53s;--ring-hud-exit:.45s;flex-direction:column;align-items:center;gap:1.25rem;transition:--ring-hud-value .48s cubic-bezier(.33,1,.68,1);display:inline-flex}.ring-hud-ring{width:var(--ring-hud-size,12rem);height:var(--ring-hud-size,12rem);color:var(--ring-hud-color,var(--primary));flex-shrink:0;place-items:center;display:grid;position:relative}.ring-hud-ring>svg{width:100%;height:100%;position:absolute;inset:0}.ring-hud-track{stroke:var(--ring-hud-track-color,color-mix(in oklab, var(--foreground) 30%, transparent))}.ring-hud-path{stroke-dasharray:var(--ring-hud-value) 100}.ring-hud-icon{place-items:center;width:42%;height:42%;display:grid;position:relative}.ring-hud-icon>svg{width:100%;height:100%}.ring-hud[data-phase=done]{visibility:hidden;opacity:0}.ring-hud[data-phase=enter]{animation:ring-hud-enter var(--ring-hud-enter) linear both}.ring-hud[data-phase=hold]{animation:ring-hud-hold var(--ring-hud-hold) linear both}.ring-hud[data-phase=hold][data-hold=manual]{animation:none}.ring-hud[data-phase=exit]{animation:ring-hud-exit var(--ring-hud-exit) linear both}.ring-hud[data-phase=enter] .ring-hud-path{animation:ring-hud-draw-in var(--ring-hud-enter) linear both}.ring-hud[data-phase=enter] .ring-hud-icon{animation:ring-hud-icon-in var(--ring-hud-enter) linear both}.ring-hud[data-phase=enter] .ring-hud-label{animation:ring-hud-label-in var(--ring-hud-enter) linear both}.ring-hud[data-phase=exit] .ring-hud-path{animation:ring-hud-draw-out var(--ring-hud-exit) linear both}.ring-hud[data-phase=exit] .ring-hud-trim{animation:ring-hud-trim-out var(--ring-hud-exit) linear both, ring-hud-weight-out var(--ring-hud-exit) linear both}.ring-hud[data-phase=exit] .ring-hud-ink{animation:ring-hud-weight-out var(--ring-hud-exit) linear both, ring-hud-ink-out var(--ring-hud-exit) linear both}.ring-hud[data-phase=exit] .ring-hud-icon{animation:ring-hud-icon-out var(--ring-hud-exit) linear both}.ring-hud[data-phase=exit] .ring-hud-label{animation:ring-hud-label-out var(--ring-hud-exit) linear both}.ring-hud[data-paused][data-phase],.ring-hud[data-paused][data-phase] *{animation-play-state:paused}@keyframes ring-hud-enter{0%{opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1)}22.6415%,to{opacity:1}}@keyframes ring-hud-hold{0%,to{opacity:1}}@keyframes ring-hud-exit{0%,85.3333%{opacity:1}to{opacity:0}}@keyframes ring-hud-draw-in{0%{stroke-dasharray:0 100;opacity:0;animation-timing-function:cubic-bezier(.33,1,.68,1)}4.90566%{opacity:1}to{stroke-dasharray:var(--ring-hud-value) 100;opacity:1}}@keyframes ring-hud-icon-in{0%{opacity:0;animation-timing-function:cubic-bezier(.33,1,.68,1);transform:scale(.6)}39.8113%{opacity:1;animation-timing-function:cubic-bezier(.37,0,.63,1);transform:scale(1.04)}64.717%,to{opacity:1;transform:scale(1)}}@keyframes ring-hud-label-in{0%,29.8113%{opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);transform:translateY(6px)}69.8113%,to{opacity:1;transform:translateY(0)}}@keyframes ring-hud-draw-out{0%{stroke-dasharray:var(--ring-hud-value) 100;stroke-dashoffset:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}85.3333%{stroke-dasharray:0 100;stroke-dashoffset:-100px;opacity:1}to{stroke-dasharray:0 100;stroke-dashoffset:-100px;opacity:0}}@keyframes ring-hud-trim-out{0%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}85.3333%,to{stroke-dashoffset:-100px}}@keyframes ring-hud-weight-out{0%{stroke-width:14px;animation-timing-function:cubic-bezier(.65,0,.35,1)}85.3333%,to{stroke-width:1.5px}}@keyframes ring-hud-ink-out{0%,41.3333%{opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}85.3333%,to{opacity:0}}@keyframes ring-hud-icon-out{0%,6.22222%{opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45);transform:scale(1)}70.6667%,to{opacity:0;transform:scale(.6)}}@keyframes ring-hud-label-out{0%,12%{opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}64.8889%,to{opacity:0}}@keyframes ring-hud-fade-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.ring-hud{transition:none}.ring-hud[data-phase] .ring-hud-path,.ring-hud[data-phase] .ring-hud-trim,.ring-hud[data-phase] .ring-hud-ink,.ring-hud[data-phase] .ring-hud-icon,.ring-hud[data-phase] .ring-hud-label{animation:none}.ring-hud[data-phase=exit]{animation-name:ring-hud-fade-out}}}