body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ── Back Button ── */
.back-btn {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0.3;
    transition: opacity 0.3s, border-color 0.3s;
}

.back-btn:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.4);
}

.back-btn img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(0.7);
}

/* ── Orbit ── */
.scene {
    position: relative;
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    perspective: 900px;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5),
                0 0 80px rgba(255, 255, 255, 0.15);
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transform-style: preserve-3d;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: white;
    left: 50%;
}

.orbit-1 {
    width: 130px;
    height: 130px;
    margin-top: -65px;
    margin-left: -65px;
    animation: orbit-1 4s linear infinite;
}

.orbit-1 .particle {
    width: 12px;
    height: 12px;
    top: -6px;
    margin-left: -6px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: counter-1 4s linear infinite;
}

.orbit-2 {
    width: 220px;
    height: 220px;
    margin-top: -110px;
    margin-left: -110px;
    animation: orbit-2 10s linear infinite;
}

.orbit-2 .particle {
    width: 9px;
    height: 9px;
    top: -4.5px;
    margin-left: -4.5px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    animation: counter-2 10s linear infinite;
}

.orbit-3 {
    width: 320px;
    height: 320px;
    margin-top: -160px;
    margin-left: -160px;
    animation: orbit-3 20s linear infinite;
}

.orbit-3 .particle {
    width: 7px;
    height: 7px;
    top: -3.5px;
    margin-left: -3.5px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
    animation: counter-3 20s linear infinite;
}

.orbit-4 {
    width: 430px;
    height: 430px;
    margin-top: -215px;
    margin-left: -215px;
    animation: orbit-4 35s linear infinite;
}

.orbit-4 .particle {
    width: 5px;
    height: 5px;
    top: -2.5px;
    margin-left: -2.5px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    animation: counter-4 35s linear infinite;
}

/* Orbit path rotations */
@keyframes orbit-1 {
    from { transform: rotateX(70deg) rotateZ(0deg); }
    to   { transform: rotateX(70deg) rotateZ(360deg); }
}

@keyframes orbit-2 {
    from { transform: rotateX(55deg) rotateY(30deg) rotateZ(0deg); }
    to   { transform: rotateX(55deg) rotateY(30deg) rotateZ(360deg); }
}

@keyframes orbit-3 {
    from { transform: rotateX(65deg) rotateY(-20deg) rotateZ(0deg); }
    to   { transform: rotateX(65deg) rotateY(-20deg) rotateZ(360deg); }
}

@keyframes orbit-4 {
    from { transform: rotateX(50deg) rotateY(45deg) rotateZ(0deg); }
    to   { transform: rotateX(50deg) rotateY(45deg) rotateZ(360deg); }
}

/* Counter-rotations to keep particles circular */
@keyframes counter-1 {
    from { transform: rotateZ(0deg) rotateX(-70deg); }
    to   { transform: rotateZ(-360deg) rotateX(-70deg); }
}

@keyframes counter-2 {
    from { transform: rotateZ(0deg) rotateY(-30deg) rotateX(-55deg); }
    to   { transform: rotateZ(-360deg) rotateY(-30deg) rotateX(-55deg); }
}

@keyframes counter-3 {
    from { transform: rotateZ(0deg) rotateY(20deg) rotateX(-65deg); }
    to   { transform: rotateZ(-360deg) rotateY(20deg) rotateX(-65deg); }
}

@keyframes counter-4 {
    from { transform: rotateZ(0deg) rotateY(-45deg) rotateX(-50deg); }
    to   { transform: rotateZ(-360deg) rotateY(-45deg) rotateX(-50deg); }
}