.mark-sphere{--mark-cycle:calc(var(--beat)*2);width:100%;height:100%}.mark-sphere__svg{width:100%;height:100%;color:var(--color-ink);display:block}.mark-sphere__segment,.mark-sphere__blob,.mark-sphere__accent{transform-box:fill-box;transform-origin:50%}.mark-sphere__accent{fill:var(--color-signal)}.mark-sphere[data-active=true]{animation:mark-sphere-clock var(--mark-cycle)linear infinite}.mark-sphere[data-active=true] .mark-sphere__segment{animation:mark-sphere-segment var(--mark-cycle)ease-in-out infinite;animation-delay:calc(var(--mark-cycle)*.032*var(--i))}.mark-sphere[data-active=true] .mark-sphere__blob--dark{animation:mark-sphere-breathe-a var(--mark-cycle)ease-in-out infinite}.mark-sphere[data-active=true] .mark-sphere__blob--light{animation:mark-sphere-breathe-b var(--mark-cycle)ease-in-out infinite}.mark-sphere[data-active=true] .mark-sphere__accent--bottom{animation:mark-sphere-pulse var(--beat)ease-in-out infinite}.mark-sphere[data-active=true] .mark-sphere__accent--side{animation:mark-sphere-pulse var(--mark-cycle)ease-in-out infinite}@keyframes mark-sphere-clock{0%{opacity:1}to{opacity:1}}@keyframes mark-sphere-segment{0%,10%,to{opacity:1}5%{opacity:.3}}@keyframes mark-sphere-breathe-a{0%,to{transform:translate(0)rotate(0)}50%{transform:translate(.5px,-.4px)rotate(.8deg)}}@keyframes mark-sphere-breathe-b{0%,to{transform:translate(0)rotate(0)}50%{transform:translate(-.4px,.5px)rotate(-.7deg)}}@keyframes mark-sphere-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){.mark-sphere,.mark-sphere *{animation:none!important}}