/* ===== Global star backdrop ===== */
.star-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0; /* content will sit above it */
    pointer-events: none; /* never block clicks */
    overflow: hidden;
    /* variables with sensible defaults */
    --sky-rx: 1200px; /* radial ellipse x-radius */
    --sky-ry: 800px; /* radial ellipse y-radius */
    --sky-at: 70% 20%; /* radial center position */
    --sky-radial: rgba(46,80,170,.35);
    --sky-linear-0: #0a0742; /* top */
    --sky-linear-1: #0b314a; /* mid (60%) */
    --sky-linear-2: #0e6b6b; /* bottom */
}

    /* Gradient only (stars are drawn on <canvas> above this) */
    .star-backdrop::before {
        content: "";
        position: absolute;
        inset: 0;
        

        background-image: radial-gradient(var(--sky-rx) var(--sky-ry) at var(--sky-at), var(--sky-radial), transparent 60%), 
            linear-gradient(var(--sky-linear-0), var(--sky-linear-1) 60%, var(--sky-linear-2) 100%);
        background-repeat: no-repeat, no-repeat;
        background-size: cover, cover;
        background-position: center, center;
    }

    /* Canvas layer (stars) */
    .star-backdrop > canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
    }