.solar-system{width:320px;height:320px;position:relative}@media (min-width:1024px){.solar-system{width:384px;height:384px}}.orbit-circle{border:1px solid var(--muted);opacity:.3;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.orbit-1{width:280px;height:280px}.orbit-2{width:200px;height:200px}.orbit-3{width:120px;height:120px}.orbit-container{width:0;height:0;position:absolute;top:50%;left:50%}.orbit-item{background-color:var(--surface);color:var(--color);transform:rotate(var(--angle))translateX(var(--radius))rotate(calc(-1*var(--angle)));border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.orbit-item-1{--radius:140px;width:40px;height:40px;margin-top:-20px;margin-left:-20px}.orbit-item-2{--radius:100px;width:36px;height:36px;margin-top:-18px;margin-left:-18px}.orbit-item-3{--radius:60px;width:32px;height:32px;margin-top:-16px;margin-left:-16px}.orbit-center{background-color:var(--accent);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.spin-slow,.spin-slow-reverse,.spin-medium,.spin-medium-reverse,.spin-fast,.spin-fast-reverse{will-change:transform}.spin-slow{animation:30s linear infinite spin}.spin-slow-reverse{animation:30s linear infinite spin-reverse}.spin-medium{animation:20s linear infinite spin}.spin-medium-reverse{animation:20s linear infinite spin-reverse}.spin-fast{animation:15s linear infinite spin}.spin-fast-reverse{animation:15s linear infinite spin-reverse}