/* Keep the labels upright while the illustration quietly comes to life. */
.sync-visual{margin-bottom:36px;isolation:isolate}
.sync-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--accent)}
.sync-track{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 7}
.sync-signal{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 97;stroke-dashoffset:3;opacity:0;animation:sync-flow 8s linear infinite;animation-delay:var(--sync-delay);animation-play-state:paused}
.sync-watch{--sync-delay:0s}.sync-food{--sync-delay:-2s}.sync-sleep{--sync-delay:-4s}.sync-health{--sync-delay:-6s}
.sync-visual .ring-outer::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent);opacity:.4;animation:sync-orbit 28s linear infinite;animation-play-state:paused}
.sync-visual .ring-inner{animation:sync-orbit 48s linear infinite reverse;animation-play-state:paused}
.sync-visual .sync-center{animation:sync-heartbeat 8s ease-in-out infinite;animation-play-state:paused}
.sync-visual .sync-node{animation:sync-drift 8s ease-in-out infinite;animation-play-state:paused}
.sync-visual .node-watch{animation-delay:0s}.sync-visual .node-food{animation-delay:-2s}.sync-visual .node-sleep{animation-delay:-4s}.sync-visual .node-health{animation-delay:-6s}
.sync-moving .sync-signal,.sync-moving .ring-outer::after,.sync-moving .ring-inner,.sync-moving .sync-center,.sync-moving .sync-node{animation-play-state:running}
.sync-motion-toggle{position:absolute;bottom:-36px;right:0;min-height:44px;padding:8px 0 8px 16px;background:transparent;border:0;color:var(--accent);font-size:11px}
.sync-motion-toggle:disabled{color:var(--muted);cursor:default}
@keyframes sync-flow{0%{stroke-dashoffset:3;opacity:0}8%,70%{opacity:.8}85%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes sync-orbit{to{transform:rotate(360deg)}}
@keyframes sync-drift{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@keyframes sync-heartbeat{0%,100%{transform:rotate(-7deg) scale(1)}50%{transform:rotate(-3deg) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.sync-visual .sync-signal,.sync-visual .ring-outer::after,.sync-visual .ring-inner,.sync-visual .sync-center,.sync-visual .sync-node{animation:none}.sync-signal{display:none}}