html { background: var(--site-page-background, #fff); }
body:has(> #site-background) {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}
#site-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--site-background-opacity, .18);
}
#site-background[data-attachment="scroll"] {
    position: absolute;
    bottom: auto;
    min-height: 100%;
}
#site-background[data-mode="image"] {
    background-image: var(--site-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--site-background-size, cover);
}
#site-background[data-mode="image"][data-preset="tile"] {
    background-position: top left;
    background-repeat: repeat;
    background-size: var(--site-background-size, auto);
}
#site-background[data-mode="image"][data-preset="cover"][data-attachment="scroll"] {
    background-position: center top;
}
#site-background canvas { width: 100%; height: 100%; display: block; }
#site-background > span { position: absolute; inset: -20%; }
#site-background[data-preset="aurora-flow"] > span {
    background:
        radial-gradient(circle at 18% 30%, var(--site-background-color-1, #2dd4bf) 0 7%, transparent 32%),
        radial-gradient(circle at 78% 24%, var(--site-background-color-2, #8b5cf6) 0 9%, transparent 36%),
        radial-gradient(circle at 54% 82%, var(--site-background-color-3, #f59e0b) 0 7%, transparent 34%);
    filter: blur(42px) saturate(125%);
    animation: siteBackgroundAurora var(--site-background-duration, 18s) ease-in-out infinite alternate;
}
#site-background[data-speed="0"][data-preset="aurora-flow"] > span { animation-play-state: paused; }
@keyframes siteBackgroundAurora {
    from { transform: translate3d(-3%, -2%, 0) scale(var(--site-background-scale, 1)); }
    to { transform: translate3d(4%, 3%, 0) scale(var(--site-background-scale, 1)) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    #site-background[data-preset="aurora-flow"] > span { animation: none; }
}