body {
            background-color: #11131b;
            color: #e2e1ed;
        }

        .dotted-line {
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 1px);
            background-size: 2px 24px;
            background-repeat: repeat-y;
            background-position: center;
        }

        .snap-container {
            scroll-snap-type: y mandatory;
            overscroll-behavior-y: contain;
            touch-action: none;
            overflow-y: scroll;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .snap-container::-webkit-scrollbar {
            display: none;
        }

        .station-section {
            scroll-snap-align: center;
            scroll-snap-stop: always;
            height: 25vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .track-top,
        .track-bottom {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            z-index: 0;
            transition: opacity 0.4s ease;
        }

        .track-top {
            top: 0;
            bottom: 60%;
        }

        .track-bottom {
            top: 60%;
            bottom: 0;
        }

        .union-station .track-top {
            bottom: 75%;
        }

        .union-station .track-bottom {
            top: 75%;
        }

        .spacer {
            flex-shrink: 0;
            height: 50vh;
        }

        /* Elements to hide when inactive */
        .station-indicator,
        .progress-area {
            opacity: 0;
            transform: scale(0.8) translateY(10px);
            pointer-events: none;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        /* Active State Classes */
        .station-section.active .station-indicator,
        .station-section.active .progress-area {
            opacity: 1;
            transform: scale(1) translateY(0);
            pointer-events: auto;
        }

        .union-station.active .station-content {
            animation: union-flash 2s infinite ease-in-out;
        }

        #play-pause-btn:disabled {
            cursor: not-allowed;
            opacity: 0.4;
            filter: grayscale(0.7);
        }

        @keyframes union-flash {

            0%,
            100% {
                opacity: 0.6;
                transform: scale(0.97);
            }

            50% {
                opacity: 1;
                transform: scale(1.03);
            }
        }

        .station-section.active .station-title {
            transform: scale(1.05);
        }

        .station-section.inactive .station-title {
            color: rgba(226, 225, 237, 0.3) !important;
            transform: scale(0.95);
        }

        .station-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #player-status {
            position: fixed;
            left: 50%;
            bottom: 8rem;
            transform: translateX(-50%);
            z-index: 60;
            max-width: min(92vw, 24rem);
            text-align: center;
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }