@property --plan-charge-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.plan-charge-ring{z-index:-1;border:1px solid color-mix(in oklab,var(--color-pole) 45%,transparent);pointer-events:none;background:radial-gradient(120% 60% at 50% 0,color-mix(in oklab,var(--color-pole) 6%,var(--card)) 0,var(--card) 62%);box-shadow:0 40px 90px -50px color-mix(in oklab,var(--color-pole) 55%,transparent)}.plan-charge-ring,.plan-charge-ring:after{position:absolute;inset:-1px;border-radius:inherit}.plan-charge-ring:after{content:"";padding:1.5px;background:conic-gradient(from var(--plan-charge-angle),transparent 0 66%,var(--color-pole) 84%,var(--color-pole-hot) 89%,transparent 94%);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0);opacity:0}.plan-charge-ring[data-motif=play]:after{animation:plan-charge-lap 2.6s cubic-bezier(.16,1,.3,1) both}@keyframes plan-charge-lap{0%{--plan-charge-angle:0deg;opacity:0}10%{opacity:1}85%{opacity:1}to{--plan-charge-angle:360deg;opacity:0}}@media (prefers-reduced-motion:reduce){.plan-charge-ring[data-motif]:after{animation:none;opacity:0}}