.dot{--dot:40px;--lime:var(--primary);color:var(--primary);width:var(--dot);height:var(--dot);flex:none;display:inline-block;position:relative}.dot-body,.dot-face,.dot-orb,.dot-ring{position:absolute;inset:0}.dot.has-ring .dot-body{inset:10%}.dot-body{transform-origin:50% 88%;will-change:transform;animation:.18s ease-out both dotFade}@keyframes dotFade{from{opacity:0}}.dot-orb{border-radius:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--lime) 84%,#fff) 0,var(--lime) 52%,color-mix(in srgb,var(--lime) 88%,#2d5a0c) 100%);box-shadow:inset 0 calc(var(--dot) * -.05) calc(var(--dot) * .1) rgba(30,60,0,.18),0 calc(var(--dot) * .06) calc(var(--dot) * .16) -.02em rgba(0,0,0,.4)}.dot-face{overflow:visible}.dot-face path{fill:none;stroke:#181c10;stroke-linecap:round;stroke-linejoin:round}.dot-ring{overflow:visible;opacity:0;transform:scale(.92);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}.dot.is-going .dot-ring{opacity:1;transform:none}.dot-prog,.dot-track{fill:none;stroke-width:1.8;stroke-linecap:round}.dot-track{stroke:rgba(255,255,255,.08)}.dot-prog{stroke:var(--primary);stroke-dasharray:100 100;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;transition:stroke-dashoffset .45s cubic-bezier(.25,.8,.25,1)}