/*
 * A light orange gradient over the whole page. background.js keeps it moving:
 * the base gradient turns and three wide glows drift across it.
 *
 * Safari 26 fills the areas behind its status bar and toolbar with the page's
 * background color (the theme's, #fff8f2), so the gradient fades into that
 * color at the top and bottom edges to blend with them.
 */

:root {
    --page-background: #fff8f2;
    --background-angle: 135deg;
    --glow1-x: 20%;
    --glow1-y: 25%;
    --glow2-x: 80%;
    --glow2-y: 35%;
    --glow3-x: 50%;
    --glow3-y: 85%;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            var(--page-background),
            transparent 12%,
            transparent 88%,
            var(--page-background)
        ),
        radial-gradient(90% 90% at var(--glow1-x) var(--glow1-y), rgba(255, 172, 69, 0.11), transparent 75%),
        radial-gradient(80% 80% at var(--glow2-x) var(--glow2-y), rgba(240, 81, 56, 0.055), transparent 75%),
        radial-gradient(100% 100% at var(--glow3-x) var(--glow3-y), rgba(255, 190, 120, 0.11), transparent 75%),
        linear-gradient(var(--background-angle), #fff6ef, #ffffff, #fff5ec, #fffcfa);
}