.iss-card {
                        overflow: visible !important;
                    }

                    #iss-3d-container canvas {
                        border-radius: 50%;
                        /* Circular mask for the canvas */
                        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
                        /* Optional: faint glow */
                        box-shadow: 0 0 15px rgba(100, 200, 255, 0.2);
                    }
/* INLINE STYLES TO FORCE RENDERING AND BYPASS CACHE */
        .belts-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5 !important;
        }

        .belt-circle {
            fill: none;
            opacity: 0.9 !important;
        }

        .main-belt-circle {
            stroke: rgba(222, 184, 135, 0.7) !important;
            /* Burlywood */
            stroke-width: 15px !important;
            stroke-dasharray: 2, 4 !important;
        }

        .kuiper-belt-circle {
            stroke: rgba(135, 206, 250, 0.5) !important;
            /* SkyBlue */
            stroke-width: 30px !important;
            stroke-dasharray: 3, 8 !important;
        }

        /* Legend Colors to match SVG */
        .legend-color.main-belt-color {
            background-color: rgba(222, 184, 135, 0.7) !important;
            box-shadow: 0 0 5px rgba(222, 184, 135, 0.5);
        }

        .legend-color.kuiper-belt-color {
            background-color: rgba(135, 206, 250, 0.5) !important;
            box-shadow: 0 0 5px rgba(135, 206, 250, 0.3);
        }

        /* Responsive Label Sizes */
        .planet-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 0 3px black;
            pointer-events: none;
            z-index: 20;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .planet-label {
                font-size: 10px;
                /* Smaller font on mobile */
            }
        }

        /* Non-scaling strokes for orbits to remain visible on resize */
        .belts-svg ellipse.planet-orbit {
            vector-effect: non-scaling-stroke;
            stroke-width: 1px !important;
        }

        /* Asteroid Belts need to scale or stay thick */
        .belts-svg ellipse.asteroid-belt {
            vector-effect: non-scaling-stroke;
            /* Let inline styles control stroke-width */
        }

        /* Galactic Markers */
        .galactic-marker {
            position: absolute;
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            pointer-events: none;
            z-index: 20;
        }

        .galactic-marker.andromeda {
            top: 50px;
            right: 50px;
            text-align: right;
        }

        .galactic-marker.galactic-center {
            bottom: 50px;
            left: 50px;
            text-align: left;
        }

        /* Tooltip Styles */
        .planet-tooltip {
            position: fixed;
            background: rgba(10, 15, 30, 0.95);
            border: 1px solid var(--accent-color);
            padding: 15px;
            border-radius: 8px;
            pointer-events: none;
            z-index: 9999 !important;
            /* Force on top of everything */
            opacity: 0;
            transition: opacity 0.2s;
            box-shadow: 0 0 20px rgba(0, 174, 239, 0.2);
            backdrop-filter: blur(10px);
            color: #fff;
            font-family: 'Roboto', sans-serif;
            visibility: hidden;
            /* Hidden by default */
        }

        .planet-tooltip.visible {
            opacity: 1;
            visibility: visible;
        }

        /* Force planets above belts */
        .planet {
            z-index: 10 !important;
        }
.asteroid-mark {
                    border-color: #D8C39C;
                }

                .viz-toggle input:checked~.asteroid-mark {
                    background-color: #D8C39C;
                    box-shadow: 0 0 5px #D8C39C;
                }
.visibility-controls {
                    position: absolute;
                    right: 20px;
                    top: 24%;
                    transform: translateY(-50%);
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                    z-index: 50;
                    background: rgba(0, 0, 0, 0.5);
                    padding: 15px;
                    border-radius: 10px;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(5px);
                }

                .viz-toggle {
                    display: flex;
                    align-items: center;
                    color: #ccc;
                    font-size: 0.75rem;
                    cursor: pointer;
                    user-select: none;
                    gap: 8px;
                    font-weight: bold;
                    letter-spacing: 1px;
                }

                .viz-toggle input {
                    display: none;
                }

                .checkmark {
                    width: 12px;
                    height: 12px;
                    border-radius: 2px;
                    border: 1px solid #666;
                    display: inline-block;
                    position: relative;
                }

                .viz-toggle input:checked~.checkmark {
                    background-color: var(--accent-color);
                    border-color: var(--accent-color);
                    box-shadow: 0 0 5px var(--accent-color);
                }

                /* Specific Colors for Checkmarks */
                .planet-mark {
                    border-color: #00aeef;
                }

                .viz-toggle input:checked~.planet-mark {
                    background-color: #00aeef;
                    box-shadow: 0 0 5px #00aeef;
                }

                .dwarf-mark {
                    border-color: #bbb;
                }

                .viz-toggle input:checked~.dwarf-mark {
                    background-color: #bbb;
                    box-shadow: 0 0 5px #bbb;
                }

                .comet-mark {
                    border-color: #fff;
                }

                .viz-toggle input:checked~.comet-mark {
                    background-color: #fff;
                    box-shadow: 0 0 5px #fff;
                }

                .viz-toggle:hover {
                    color: #fff;
                }
/* New Styles for Fine Control and Tooltips */
        .fine-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 5px;
        }

        .fine-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            line-height: 1;
        }

        .fine-btn:hover {
            background: var(--accent-color);
            color: black;
        }

        .event-desc {
            font-size: 0.85rem;
            margin-bottom: 8px;
            color: #ddd;
        }

        .event-impacts {
            font-size: 0.8rem;
            color: var(--accent-color);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 5px;
        }

        .time-controls-vertical {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(0, 10, 30, 0.8);
            padding: 20px 10px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .year-display-container {
            text-align: center;
            margin-bottom: 20px;
            color: var(--accent-color);
        }

        #year-display {
            font-size: 1.8rem;
            font-weight: bold;
            display: block;
            line-height: 1;
        }

        #date-display {
            font-size: 0.75rem;
            color: #aaa;
            display: block;
            margin-top: 5px;
        }

        .slider-container {
            height: 300px;
            /* Tall vertical slider */
            display: flex;
            flex-direction: column;
            /* Stack labels and slider */
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        /* Vertical Slider Styling */
        input[type=range][orient=vertical] {
            writing-mode: bt-lr;
            /* IE/Edge */
            -webkit-appearance: slider-vertical;
            /* Webkit */
            width: 8px;
            height: 100%;
            padding: 0 5px;
            cursor: ns-resize;
        }

        /* Standard range rotation for Firefox/Modern Browsers if vertical not supported native */
        @supports not (-webkit-appearance: slider-vertical) {
            /* Fallback or specific Firefox styling could go here, 
                       but modern browsers are getting better. 
                       For simplicity in this snippet, we rely on -webkit-appearance 
                       or simple rotation if needed. */
        }

        .time-markers {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }

        .marker-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #ccc;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .marker-btn:hover {
            background: var(--accent-color);
            color: #000;
            border-color: var(--accent-color);
        }

        .marker-btn.small {
            font-size: 0.7rem;
            opacity: 0.6;
            padding: 2px 5px;
        }

        .today-btn {
            background: rgba(0, 255, 100, 0.1);
            border-color: rgba(0, 255, 100, 0.3);
            color: #fff;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .today-btn:hover {
            background: rgba(0, 255, 100, 0.8);
            color: #000;
        }

        /* Voyager / Mission Cards Specifics */
        .voyager-card {
            background-color: #1a1a1a !important;
            /* Lighter grey for mission status */
            border: 1px solid #333;
        }

        .voyager-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            position: relative;
            padding: 20px 0;
            margin-right: 20px;
        }

        .voyager-viz {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-grow: 1;
            padding-right: 20px;
        }

        .v-line {
            flex-grow: 1;
            height: 2px;
            background: #00aeef;
            box-shadow: 0 0 5px #00aeef;
            margin: 0 15px;
            position: relative;
            min-width: 50px;
        }

        .green-dot {
            width: 8px;
            height: 8px;
            background-color: #00ff66;
            border-radius: 50%;
            box-shadow: 0 0 5px #00ff66;
        }

        /* Sun States */
        .sun {
            transition: all 10s ease-in-out;
        }

        .sun.red-giant {
            width: 200px !important;
            height: 200px !important;
            background: radial-gradient(circle, #ff4500 0%, #8b0000 100%);
            box-shadow: 0 0 100px #ff0000;
            margin-left: -100px !important;
            /* Center fix */
            margin-top: -100px !important;
        }

        .sun.white-dwarf {
            width: 10px !important;
            height: 10px !important;
            background: #fff;
            box-shadow: 0 0 10px #fff, 0 0 40px rgba(255, 255, 255, 0.5);
            margin-left: -5px !important;
            margin-top: -5px !important;
        }

        .moon {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ccc;
            border-radius: 50%;
            box-shadow: 0 0 2px #fff;
            pointer-events: auto;
            cursor: pointer;
            z-index: 20;
            margin-left: -2px;
            margin-top: -2px;
        }

        .moon:hover {
            box-shadow: 0 0 8px #fff;
            transform: scale(1.5);
        }
.galactic-journey-section {
        width: 100%;
        padding: 40px 0;
        background: radial-gradient(circle at center, #1a1a2e 0%, #000 100%);
        overflow: hidden;
        position: relative;
        perspective: 1000px;
        /* 3D Context */
    }

    .solar-travel-container {
        width: 100%;
        height: 500px;
        /* Taller for 3D */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
        background: radial-gradient(ellipse at center, rgba(10, 10, 20, 0.8) 0%, rgba(0, 0, 0, 0) 80%);
    }

    .direction-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.7rem;
        letter-spacing: 1px;
        z-index: 5;
        pointer-events: none;
        width: 200px;
    }

    .direction-label.left {
        left: 20px;
        text-align: left;
    }

    .direction-label.right {
        right: 20px;
        text-align: right;
    }

    .direction-label .arrow {
        color: var(--accent-color);
        font-size: 1rem;
        vertical-align: middle;
    }

    .stars-bg,
    .stars-bg-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
    }

    /* Primary Star Field */
    .stars-bg {
        z-index: 1;
        background-image:
            radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0, 0, 0, 0));
        background-size: 200px 200px;
        opacity: 1;
    }

    /* ... existing background styles ... */

    .moving-system {
        position: absolute;
        top: 50%;
        left: -20%;
        /* Start off-screen left */
        width: 600px;
        height: 600px;
        margin-left: -300px;
        /* Center alignment offset */
        margin-top: -300px;
        transform-style: preserve-3d;
        /* Tilt the entire system to view orbits as 3D ellipses */
        transform: perspective(1000px) rotateX(70deg);
        animation: galacticTravelHorizontal 20s linear infinite;
        z-index: 10;
    }

    @keyframes galacticTravelHorizontal {
        0% {
            left: -20%;
        }

        100% {
            left: 120%;
        }
    }

    /* Sun - Center */
    .travel-sun {
        width: 40px;
        height: 40px;
        background: radial-gradient(circle, #ffeb3b, #ff9800);
        border-radius: 50%;
        box-shadow: 0 0 40px #ff9800, 0 0 80px rgba(255, 152, 0, 0.6);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Counter-rotate to face screen if needed, or just glow */
        transform-style: preserve-3d;
        z-index: 50;
    }

    /* Sun Trail - Flowing Left (Behind movement) */
    .travel-sun::after {
        content: '';
        position: absolute;
        right: 50%;
        /* Start from center and go left */
        top: 50%;
        width: 300px;
        /* Long horizontal trail */
        height: 4px;
        background: linear-gradient(to left, rgba(255, 152, 0, 0.8), transparent);
        transform: translateY(-50%);
        /* Align center vertically */
        filter: blur(4px);
        z-index: -1;
    }

    .orbit-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
        transform-style: preserve-3d;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    /* Specific Ring Sizes */
    .mercury-ring {
        width: 80px;
        height: 80px;
    }

    .venus-ring {
        width: 120px;
        height: 120px;
    }

    .earth-ring {
        width: 170px;
        height: 170px;
    }

    .mars-ring {
        width: 220px;
        height: 220px;
    }

    .jupiter-ring {
        width: 320px;
        height: 320px;
    }

    .saturn-ring {
        width: 420px;
        height: 420px;
    }

    .uranus-ring {
        width: 500px;
        height: 500px;
    }

    .neptune-ring {
        width: 580px;
        height: 580px;
    }

    .travel-planet {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        box-shadow: 0 0 5px currentColor;
        transform-origin: 0 0;
    }

    /* Planets Orbiting */
    /* Note: To orbit in a flat plane that is tilted, we just rotate around Z axis of the ring */
    .mercury-ring .travel-planet {
        animation: orbitFlat 2s linear infinite;
        --dist: 40px;
    }

    .venus-ring .travel-planet {
        animation: orbitFlat 5s linear infinite;
        --dist: 60px;
    }

    .earth-ring .travel-planet {
        animation: orbitFlat 8s linear infinite;
        --dist: 85px;
    }

    .mars-ring .travel-planet {
        animation: orbitFlat 12s linear infinite;
        --dist: 110px;
    }

    .jupiter-ring .travel-planet {
        animation: orbitFlat 20s linear infinite;
        --dist: 160px;
    }

    .saturn-ring .travel-planet {
        animation: orbitFlat 35s linear infinite;
        --dist: 210px;
    }

    .uranus-ring .travel-planet {
        animation: orbitFlat 60s linear infinite;
        --dist: 250px;
    }

    .neptune-ring .travel-planet {
        animation: orbitFlat 90s linear infinite;
        --dist: 290px;
    }

    @keyframes orbitFlat {
        0% {
            transform: rotate(0deg) translateX(var(--dist)) rotate(0deg);
        }

        100% {
            transform: rotate(360deg) translateX(var(--dist)) rotate(-360deg);
        }
    }

    /* Planet Trails - Streaming behind (Left) */
    /* Since the system moves Right, trails stream Left */
    /* But planets are also orbiting. A simple horizontal trail works best for "speed" effect */
    .travel-planet::after {
        content: '';
        position: absolute;
        right: 50%;
        /* Attach to left side of planet? No, right:50% means starts at center and goes left if width extends left? */
        /* Let's use left: 100% to go right? No we want trail behind. */
        /* Actually, if we use right: 50%, it positions the right edge of the pseudo element at the center of parent */
        /* We want the trail to extend to the LEFT of the planet. */
        top: 50%;
        width: 60px;
        /* Trail length */
        height: 2px;
        background: linear-gradient(to left, currentColor, transparent);
        transform: translateY(-50%);
        /* Just center vertically */
        /* We counter-rotate the planet itself in the animation: rotate(-360deg) */
        /* This keeps the planet upright (if it were an image), and means 'left' is always 'left' relative to the screen/container, NOT the orbit rotation! */
        /* Because we use: transform: rotate(360deg) translateX(...) rotate(-360deg) */
        /* The last rotation cancels the orbital rotation for the child content. */
        /* So 'left' for the child is always screen-left. Perfect. */

        opacity: 0.6;
        filter: blur(1px);
        z-index: -1;
    }

    .travel-planet.mars {
        background-color: #f44336;
        color: #f44336;
        width: 5px;
        height: 5px;
    }

    .travel-planet.jupiter {
        background-color: #ffcc80;
        color: #ffcc80;
        width: 12px;
        height: 12px;
        margin-top: -6px;
    }

    .travel-planet.saturn {
        background-color: #fff9c4;
        color: #fff9c4;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    }

    .travel-planet.uranus {
        background-color: #80deea;
        color: #80deea;
        width: 8px;
        height: 8px;
        margin-top: -4px;
    }

    .travel-planet.neptune {
        background-color: #3f51b5;
        color: #3f51b5;
        width: 8px;
        height: 8px;
        margin-top: -4px;
    }