.hub{perspective:var(--hub-perspective,900px);perspective-origin:50% 46%;aspect-ratio:1/.78;--hub-r:8.5rem;--hub-tilt:68deg;--hub-dur:26s;width:100%;max-width:26rem;margin-left:auto}@media (max-width:40rem){.hub{--hub-r:6.2rem;--hub-perspective:620px;--hub-dur:18s}}.hub-orbit{transform-style:preserve-3d;transform:rotateX(var(--hub-tilt));position:absolute;inset:0}.hub-ring{transform-style:preserve-3d;animation:hub-spin var(--hub-dur) linear infinite;position:absolute;inset:0}@keyframes hub-spin{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.hub-sat{transform-style:preserve-3d;transform:rotateY(var(--hub-a)) translateZ(var(--hub-r)) rotateY(calc(var(--hub-a) * -1));position:absolute;top:50%;left:50%}.hub-face{transform-style:preserve-3d;animation:hub-unspin var(--hub-dur) linear infinite;display:block}@keyframes hub-unspin{0%{transform:rotateY(0deg) rotateX(calc(var(--hub-tilt) * -1))}to{transform:rotateY(-360deg) rotateX(calc(var(--hub-tilt) * -1))}}.hub-depth{animation:hub-depth var(--hub-dur) ease-in-out var(--hub-delay,0s) infinite;display:block}@keyframes hub-depth{0%,to{opacity:1}50%{opacity:.3}}.hub-chip{white-space:nowrap;border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);background:color-mix(in srgb, var(--accent) 8%, var(--surface));color:var(--fg);border-radius:999px;padding:.3rem .65rem;font-size:11px;font-weight:500;display:block;transform:translate(-50%,-50%);box-shadow:0 2px 10px #12151c12}.hub-core{width:6.2rem;height:6.2rem;transform:translate(-50%, -50%) rotateX(calc(var(--hub-tilt) * -1));background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, var(--surface) 70%);border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);box-shadow:0 6px 26px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%}@media (max-width:40rem){.hub-core{width:4.6rem;height:4.6rem}}.hub-pulse{animation:6s ease-in-out infinite hub-pulse}@keyframes hub-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.hub-ring,.hub-face,.hub-depth,.hub-pulse{animation:none}.hub-face{transform:rotateX(calc(var(--hub-tilt) * -1))}}
