body.zuno-stars-enabled {
    position: relative;
    isolation: isolate;
}

.zuno-stars-foreground {
    position: relative;
    z-index: 1;
}

.zuno-stars-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
}

.zuno-star {
    --star-size: 10px;
    --star-color: #9b6dff;
    --star-opacity: 0.58;
    --star-rotation: 0deg;
    --star-blur: calc(var(--star-size) * 1.05);
    --star-duration: 6s;
    --star-delay: 0s;
    position: absolute;
    width: var(--star-size);
    height: var(--star-size);
    left: 0;
    top: 0;
    opacity: var(--star-opacity);
    transform: translate(-50%, -50%) rotate(var(--star-rotation));
    transform-origin: center;
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    background: var(--star-color);
    filter:
        drop-shadow(0 0 var(--star-blur) color-mix(in srgb, var(--star-color) 34%, transparent))
        drop-shadow(0 0 calc(var(--star-size) * 0.35) color-mix(in srgb, var(--star-color) 22%, white));
    animation: zunoStarTwinkle var(--star-duration) ease-in-out infinite;
    animation-delay: var(--star-delay);
}

.zuno-star::before {
    content: "";
    position: absolute;
    inset: -14%;
    clip-path: inherit;
    background: color-mix(in srgb, var(--star-color) 26%, transparent);
    filter: blur(4px);
    opacity: 0.72;
}

.zuno-star::after {
    content: none;
}

@keyframes zunoStarTwinkle {
    0%, 100% {
        opacity: calc(var(--star-opacity) * 0.78);
        transform: translate(-50%, -50%) rotate(var(--star-rotation)) scale(0.92);
    }
    50% {
        opacity: var(--star-opacity);
        transform: translate(-50%, -50%) rotate(var(--star-rotation)) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zuno-star {
        animation: none;
    }
}