@keyframes orbit {
    0% {
        transform: translateX(calc(var(--orbit-radius) - var(--planet-size) / 2)) rotate(0deg);
    }
    100% {
        transform: translateX(calc(var(--orbit-radius) - var(--planet-size) / 2)) rotate(360deg);
    }
}
.planet {
    position: absolute;
    border-radius: 50%;
    animation: orbit var(--orbit-duration) linear infinite;
    transform-origin: center;
    will-change: transform;
    z-index: 5;
    margin-left: calc(-1 * var(--planet-size) / 2);
    margin-top: calc(-1 * var(--planet-size) / 2);
}
.orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 1;
}

#sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    background: radial-gradient(circle, #ffde00, #ff8c00);
    border-radius: 50%;
    box-shadow: 0 0 50px #ff8c00, 0 0 100px #ff8c0040;
    z-index: 10;
}
#solar-system {
    background: radial-gradient(ellipse at center, #1a202c 0%, #0f172a 70%, #090e17 100%);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.2);
}