.pd-dot,.pd-ring,.pd-wave{transform-box:fill-box;transform-origin:center}
.pd-ring,.pd-wave{opacity:0}
svg:not([data-state]) .pd-x,[data-state=mark] .pd-x{opacity:0}
[data-state=intro] .pd-dot{animation:pd-in .45s cubic-bezier(.34,1.56,.64,1) calc(var(--d) * 70ms) both,pd-nudge .6s cubic-bezier(.23,1,.32,1) 1.15s forwards}
[data-state=intro] .pd-x{animation:pd-in .45s cubic-bezier(.34,1.56,.64,1) calc(var(--d) * 70ms) both,pd-gone .36s cubic-bezier(.23,1,.32,1) .85s forwards}
[data-state=intro] .pd-x2{animation-delay:calc(var(--d) * 70ms),.93s}
[data-state=send] .pd-x{animation:pd-gone .36s cubic-bezier(.23,1,.32,1) both}
[data-state=send] .pd-x2{animation-delay:.08s}
[data-state=send] .pd-dot:not(.pd-x){animation:pd-nudge .7s cubic-bezier(.23,1,.32,1) .3s both}
[data-state=loading] .pd-dot{animation:pd-seq 2.4s cubic-bezier(.23,1,.32,1) calc(var(--s) * 120ms) infinite}
[data-state=loading] .pd-ring{animation:pd-seqring 2.4s cubic-bezier(.23,1,.32,1) calc(var(--s) * 120ms) infinite}
[data-state=running] .pd-dot{animation:pd-breathe 1.6s cubic-bezier(.45,0,.55,1) calc(var(--d) * 110ms) infinite}
[data-state=progress] .pd-dot{animation:pd-fill 2.8s cubic-bezier(.23,1,.32,1) calc(var(--n) * 160ms) infinite}
[data-state=sync] .pd-dot{animation:pd-chase 1.2s cubic-bezier(.45,0,.55,1) calc(var(--r) * 150ms) infinite}
[data-state=sync] .pd-c{animation:none;transform:scale(.5);opacity:.5}
[data-state=typing] .pd-dot{opacity:.22}
[data-state=typing] .pd-row{opacity:1;animation:pd-hop 1.1s cubic-bezier(.45,0,.55,1) calc(var(--i) * 140ms) infinite}
[data-state=pop] .pd-k{animation:pd-pop .5s cubic-bezier(.23,1,.32,1) both}
[data-state=pop] .pd-ring.pd-k{animation:pd-ringin .4s cubic-bezier(.23,1,.32,1) .3s both}
[data-state=pop] .pd-wave{animation:pd-wave .6s cubic-bezier(.23,1,.32,1) .3s both}
[data-state=success] .pd-dot{animation:pd-dim .4s cubic-bezier(.23,1,.32,1) both}
[data-state=success] .pd-ck{animation:pd-lift .5s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * 60ms + 200ms) both}
[data-state=error] .pd-dot{animation:pd-shake .5s cubic-bezier(.23,1,.32,1) both,pd-dim .3s cubic-bezier(.23,1,.32,1) .5s forwards}
[data-state=on] .pd-ring{opacity:1;animation:pd-ringout .3s cubic-bezier(.23,1,.32,1) calc(var(--s) * 80ms + 150ms) both}
[data-state=on] .pd-dot{animation:pd-in .42s cubic-bezier(.34,1.56,.64,1) calc(var(--s) * 80ms + 150ms) both}
[data-state=off] .pd-dot{animation:pd-out .36s cubic-bezier(.23,1,.32,1) calc((8 - var(--s)) * 70ms) both}
[data-state=off] .pd-ring{animation:pd-ringin .36s cubic-bezier(.23,1,.32,1) calc((8 - var(--s)) * 70ms + 120ms) both}
[data-state=pause] .pd-mid{animation:pd-out .36s cubic-bezier(.23,1,.32,1) calc(var(--j) * 80ms) both}
[data-state=pause] .pd-ring.pd-mid{animation:pd-ringin .36s cubic-bezier(.23,1,.32,1) calc(var(--j) * 80ms + 120ms) both}
[data-state=notify] .pd-k{animation:pd-pulse 1.6s cubic-bezier(.23,1,.32,1) infinite}
[data-state=notify] .pd-wave{animation:pd-ripple 1.6s cubic-bezier(.23,1,.32,1) infinite}
[data-state=react] .pd-c{animation:pd-beat 1.4s cubic-bezier(.23,1,.32,1) infinite}
[data-state=react] .pd-dot:not(.pd-c){animation:pd-sympathy 1.4s cubic-bezier(.23,1,.32,1) infinite}
[data-state=ripple] .pd-dot{animation:pd-swell 1.5s cubic-bezier(.45,0,.55,1) calc(var(--e) * 160ms) infinite}
[data-state=idle] .pd-dot{animation:pd-float 3s cubic-bezier(.45,0,.55,1) calc(var(--d) * 120ms) infinite}
[data-state=upload] .pd-dot{animation:pd-rise 1.4s cubic-bezier(.23,1,.32,1) calc(var(--i) * 140ms + (2 - var(--j)) * 60ms) infinite}
[data-state=clear] .pd-dot{animation:pd-drop .6s cubic-bezier(.55,0,1,.45) calc((2 - var(--j)) * 90ms + var(--i) * 40ms) both}
[data-state=celebrate] .pd-dot{animation:pd-burst .9s cubic-bezier(.23,1,.32,1) calc(var(--e) * 50ms) both}
@keyframes pd-in{from{transform:scale(0)}to{transform:none}}
@keyframes pd-out{0%{transform:none}45%{transform:scale(1.15,.85)}100%{transform:scale(0);opacity:0}}
@keyframes pd-gone{0%{transform:none}45%{transform:scale(1.2,.8)}100%{transform:scale(0);opacity:0}}
@keyframes pd-nudge{0%,100%{transform:none}45%{transform:translate(2.2px,-2.2px)}}
@keyframes pd-pop{0%{transform:none}45%{transform:scale(1.2,.8)}70%{transform:scale(1.25,.75);opacity:1}100%{transform:scale(.15);opacity:0}}
@keyframes pd-ringin{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes pd-ringout{to{opacity:0;transform:scale(.6)}}
@keyframes pd-wave{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
@keyframes pd-seq{0%,6%{transform:none;opacity:1}12%{transform:scale(.15);opacity:0}62%{transform:scale(.15);opacity:0}72%,100%{transform:none;opacity:1}}
@keyframes pd-seqring{0%,8%{opacity:0;transform:scale(.6)}14%,62%{opacity:1;transform:none}70%,100%{opacity:0;transform:scale(.6)}}
@keyframes pd-breathe{0%,100%{transform:none}50%{transform:scale(.72)}}
@keyframes pd-fill{0%{transform:scale(.35);opacity:.25}8%,80%{transform:none;opacity:1}92%,100%{transform:scale(.35);opacity:.25}}
@keyframes pd-chase{0%,100%{transform:scale(.55);opacity:.45}15%{transform:scale(1.08);opacity:1}40%{transform:scale(.55);opacity:.45}}
@keyframes pd-hop{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}}
@keyframes pd-dim{to{transform:scale(.55);opacity:.3}}
@keyframes pd-lift{0%{transform:scale(.55);opacity:.3}60%{transform:scale(1.15);opacity:1}100%{transform:none;opacity:1}}
@keyframes pd-shake{0%,100%{transform:none}20%{transform:translateX(-2.6px)}40%{transform:translateX(2.6px)}60%{transform:translateX(-1.8px)}80%{transform:translateX(1.2px)}}
@keyframes pd-pulse{0%,100%{transform:none}30%{transform:scale(1.14)}}
@keyframes pd-ripple{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.1)}}
@keyframes pd-beat{0%,40%,100%{transform:none}12%{transform:scale(1.35)}26%{transform:scale(1.2)}}
@keyframes pd-sympathy{0%,40%,100%{transform:none}14%{transform:scale(.9)}}
@keyframes pd-swell{0%,100%{transform:scale(.8)}40%{transform:scale(1.08)}}
@keyframes pd-float{0%,100%{transform:none}50%{transform:translateY(-1.6px)}}
@keyframes pd-rise{0%{transform:translateY(3px);opacity:.35}40%{transform:translateY(-2px);opacity:1}70%,100%{transform:none;opacity:1}}
@keyframes pd-drop{0%{transform:none;opacity:1}100%{transform:translateY(14px) scale(.4);opacity:0}}
@keyframes pd-burst{0%{transform:none}35%{transform:translate(calc(var(--x) * 7px),calc(var(--y) * 7px)) scale(.75)}70%{transform:translate(calc(var(--x) * -1px),calc(var(--y) * -1px)) scale(1.08)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){[data-state] .pd-dot,[data-state] .pd-ring,[data-state] .pd-wave{animation:none!important}[data-state=send] .pd-x,[data-state=intro] .pd-x{opacity:0}}