html, body {
    margin: 0;
    height: 100%;
    background: #020b12;
    overflow: hidden;
    font-family: sans-serif;
    color: #cfe8f3;
}

/* vortex background */
#vortex {
    position: fixed;
    inset: -50%;
    background:
        radial-gradient(circle at center,
            rgba(120,170,200,0.35) 0%,
            rgba(40,90,130,0.25) 25%,
            rgba(10,30,50,0.6) 55%,
            #020b12 70%);
    filter: blur(2px);
    animation: spin 120s linear infinite;
    transform-origin: center;
}

/* paused state */
body.paused #vortex {
    animation-duration: 240s;
    filter: blur(4px) saturate(0.6);
}

/* playing state */
body.playing #vortex {
    animation-duration: 30s;
    filter: blur(1px) saturate(1.4);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* UI overlay */
#ui {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#play-btn {
    font-size: 3rem;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: none;
    background: rgba(40,120,180,0.8);
    color: white;
    cursor: pointer;
}

#play-btn:hover {
    background: rgba(70,160,220,1);
}

audio {
    margin-top: 2rem;
    width: 320px;
}