/* Optional background trials. Loaded only by assessments with an explicit style variant.
   The persistent root owns the style, never a lobby/test/result state panel.
   Keep background.css as the shared palette, surface and attachment authority.
   Inline SVG linework/dots are tiny CSS images: no requests, DOM or hit targets.
   Their pigments match the shared Optiver #f0a000 and Akuna #087bc4 palette. */

:is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style] {
    --oa-trial-contour-width: min(34vw, 490px);
    --oa-trial-contour-height: min(36vw, 500px);
    --oa-trial-dots-width: min(31vw, 400px);
    --oa-trial-dots-height: min(27.125vw, 350px);
    /* Small viewport units keep the composition stable as mobile chrome moves. */
    --oa-trial-viewport: 100vw 100vh;
    --oa-trial-height: 100vh;
    --oa-trial-wave-y: 28vh;
    --oa-trial-wave-height: 43vh;
    --oa-trial-glow-height: 48vh;
}
@supports (height: 100svh) {
    :is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style] {
        --oa-trial-viewport: 100vw 100svh;
        --oa-trial-height: 100svh;
        --oa-trial-wave-y: 28svh;
        --oa-trial-wave-height: 43svh;
        --oa-trial-glow-height: 48svh;
    }
}

/* Matching corner groups of four airy, gently changing curves rather than concentric circular rings. */
:is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style="contour-lines"] {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20520%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22ink%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%22.6%22%3E%3Cstop%20stop-color%3D%22%23f0a000%22%20stop-opacity%3D%22.10%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23f0a000%22%20stop-opacity%3D%22.48%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f0a000%22%20stop-opacity%3D%22.18%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22url%28%23ink%29%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20stroke-width%3D%222%22%20d%3D%22M%2065%20-30%20C%2032%2080%20184%2093%20212%20171%20S%20173%20314%20325%20370%20S%20446%20442%20510%20510%22%2F%3E%3Cpath%20stroke-width%3D%221.8%22%20d%3D%22M%20124%20-30%20C%2092%2076%20242%2081%20269%20158%20S%20235%20291%20376%20340%20S%20496%20410%20550%20470%22%2F%3E%3Cpath%20stroke-width%3D%221.6%22%20d%3D%22M%20185%20-30%20C%20153%2068%20300%2068%20327%20144%20S%20296%20267%20427%20309%20S%20546%20376%20590%20425%22%2F%3E%3Cpath%20stroke-width%3D%221.4%22%20d%3D%22M%20247%20-30%20C%20214%2058%20358%2055%20385%20130%20S%20357%20242%20478%20278%20S%20596%20341%20630%20380%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20520%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22ink%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%22.6%22%3E%3Cstop%20stop-color%3D%22%23f0a000%22%20stop-opacity%3D%22.10%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23f0a000%22%20stop-opacity%3D%22.48%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f0a000%22%20stop-opacity%3D%22.18%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22rotate%28180%20240%20260%29%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22url%28%23ink%29%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20stroke-width%3D%222%22%20d%3D%22M%2065%20-30%20C%2032%2080%20184%2093%20212%20171%20S%20173%20314%20325%20370%20S%20446%20442%20510%20510%22%2F%3E%3Cpath%20stroke-width%3D%221.8%22%20d%3D%22M%20124%20-30%20C%2092%2076%20242%2081%20269%20158%20S%20235%20291%20376%20340%20S%20496%20410%20550%20470%22%2F%3E%3Cpath%20stroke-width%3D%221.6%22%20d%3D%22M%20185%20-30%20C%20153%2068%20300%2068%20327%20144%20S%20296%20267%20427%20309%20S%20546%20376%20590%20425%22%2F%3E%3Cpath%20stroke-width%3D%221.4%22%20d%3D%22M%20247%20-30%20C%20214%2058%20358%2055%20385%20130%20S%20357%20242%20478%20278%20S%20596%20341%20630%20380%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        radial-gradient(ellipse 28vw var(--oa-trial-glow-height) at 108% 8%,
            rgba(var(--oa-ambient-light), .20), transparent 78%),
        radial-gradient(ellipse 22vw 28vh at -7% 104%,
            rgba(var(--oa-ambient-light), .28), transparent 80%);
    background-size: var(--oa-trial-contour-width) var(--oa-trial-contour-height),
        var(--oa-trial-contour-width) var(--oa-trial-contour-height),
        var(--oa-trial-viewport), var(--oa-trial-viewport);
    background-position: right top, left 0 top calc(var(--oa-trial-height) - var(--oa-trial-contour-height)), left top, left top;
    background-repeat: no-repeat;
}

/* Broad feathered bands with offset centres; no hard-edged outlines or fill. */
:is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style="soft-waves"] {
    background-image:
        radial-gradient(ellipse 31vw var(--oa-trial-wave-height) at 115% var(--oa-trial-wave-y),
            transparent 47%, rgba(var(--oa-ambient-light), .27) 58%,
            rgba(var(--oa-ambient-rgb), .15) 65%, transparent 79%),
        radial-gradient(ellipse 32vw var(--oa-trial-wave-height) at 120% 8%,
            transparent 39%, rgba(var(--oa-ambient-light), .28) 55%,
            rgba(var(--oa-ambient-rgb), .105) 65%, transparent 80%),
        radial-gradient(ellipse 31vw var(--oa-trial-wave-height) at -15% 78%,
            transparent 47%, rgba(var(--oa-ambient-light), .27) 58%,
            rgba(var(--oa-ambient-rgb), .15) 65%, transparent 79%),
        radial-gradient(ellipse 32vw var(--oa-trial-wave-height) at -20% 98%,
            transparent 39%, rgba(var(--oa-ambient-light), .28) 55%,
            rgba(var(--oa-ambient-rgb), .105) 65%, transparent 80%);
    background-size: var(--oa-trial-viewport);
    background-position: left top;
    background-repeat: no-repeat;
}

/* Broad, softly feathered corner glows; the central workspace stays clear. */
:is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style="radial-glow"] {
    background-image:
        radial-gradient(ellipse 47.5vw calc(var(--oa-trial-glow-height) * 1.375) at 105% 7%,
            rgba(var(--oa-ambient-light), 0.179945),
            rgba(var(--oa-ambient-rgb), 0.06205) 34%,
            rgba(var(--oa-ambient-rgb), 0.0155125) 58%,
            rgba(var(--oa-ambient-rgb), 0.003723) 72%, transparent 82%),
        radial-gradient(ellipse 47.5vw calc(var(--oa-trial-glow-height) * 1.375) at -5% 97%,
            rgba(var(--oa-ambient-light), 0.142715),
            rgba(var(--oa-ambient-rgb), 0.043435) 32%,
            rgba(var(--oa-ambient-rgb), 0.011169) 58%,
            rgba(var(--oa-ambient-rgb), 0.002482) 74%, transparent 84%);
    background-size: var(--oa-trial-viewport);
    background-position: left top;
    background-repeat: no-repeat;
}

/* SIG: cool, desaturated rose shared by its glow and dot-grid treatments. */
[data-oa-ambient="sig"][data-oa-ambient-style] {
    --oa-ambient-rgb: 192, 120, 150;
    --oa-ambient-light: 235, 193, 210;
}

/* Same matrix geometry for each firm; only the pigment changes. */
[data-oa-ambient="akuna"][data-oa-ambient-style="dot-grid"] {
    --oa-trial-dots-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20280%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22dots%22%20width%3D%2224%22%20height%3D%2224%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.55%22%20fill%3D%22%23087bc4%22%2F%3E%3C%2Fpattern%3E%3CradialGradient%20id%3D%22fade%22%20cx%3D%22100%25%22%20cy%3D%220%25%22%20r%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.50%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.33%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cmask%20id%3D%22edge%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23dots%29%22%20mask%3D%22url%28%23edge%29%22%2F%3E%3C%2Fsvg%3E");
    --oa-trial-dots-bottom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20280%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22dots%22%20width%3D%2224%22%20height%3D%2224%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.55%22%20fill%3D%22%23087bc4%22%2F%3E%3C%2Fpattern%3E%3CradialGradient%20id%3D%22fade%22%20cx%3D%22100%25%22%20cy%3D%220%25%22%20r%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.50%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.33%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cmask%20id%3D%22edge%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22rotate%28180%20160%20140%29%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23dots%29%22%20mask%3D%22url%28%23edge%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
[data-oa-ambient="optiver"][data-oa-ambient-style="dot-grid"] {
    --oa-trial-dots-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20280%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22dots%22%20width%3D%2224%22%20height%3D%2224%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.55%22%20fill%3D%22%23f0a000%22%2F%3E%3C%2Fpattern%3E%3CradialGradient%20id%3D%22fade%22%20cx%3D%22100%25%22%20cy%3D%220%25%22%20r%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.50%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.33%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cmask%20id%3D%22edge%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23dots%29%22%20mask%3D%22url%28%23edge%29%22%2F%3E%3C%2Fsvg%3E");
    --oa-trial-dots-bottom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20280%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22dots%22%20width%3D%2224%22%20height%3D%2224%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.55%22%20fill%3D%22%23f0a000%22%2F%3E%3C%2Fpattern%3E%3CradialGradient%20id%3D%22fade%22%20cx%3D%22100%25%22%20cy%3D%220%25%22%20r%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.50%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.33%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cmask%20id%3D%22edge%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22rotate%28180%20160%20140%29%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23dots%29%22%20mask%3D%22url%28%23edge%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
[data-oa-ambient="sig"][data-oa-ambient-style="dot-grid"] {
    --oa-trial-dots-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20280%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22dots%22%20width%3D%2224%22%20height%3D%2224%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.55%22%20fill%3D%22%23c07896%22%2F%3E%3C%2Fpattern%3E%3CradialGradient%20id%3D%22fade%22%20cx%3D%22100%25%22%20cy%3D%220%25%22%20r%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.50%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.33%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cmask%20id%3D%22edge%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23dots%29%22%20mask%3D%22url%28%23edge%29%22%2F%3E%3C%2Fsvg%3E");
    --oa-trial-dots-bottom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20280%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22dots%22%20width%3D%2224%22%20height%3D%2224%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.55%22%20fill%3D%22%23c07896%22%2F%3E%3C%2Fpattern%3E%3CradialGradient%20id%3D%22fade%22%20cx%3D%22100%25%22%20cy%3D%220%25%22%20r%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.50%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.33%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cmask%20id%3D%22edge%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22rotate%28180%20160%20140%29%22%3E%3Crect%20width%3D%22320%22%20height%3D%22280%22%20fill%3D%22url%28%23dots%29%22%20mask%3D%22url%28%23edge%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* Two bounded corner matrices, with both dot opacity and density kept restrained.
   The image never tiles; transparent edges do not mask any page content. */
:is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style="dot-grid"] {
    background-image: var(--oa-trial-dots-top), var(--oa-trial-dots-bottom);
    background-size: var(--oa-trial-dots-width) var(--oa-trial-dots-height);
    background-position: right top, left 0 top calc(var(--oa-trial-height) - var(--oa-trial-dots-height));
    background-repeat: no-repeat;
}

@media (max-width: 600px) {
    :is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style] {
        --oa-trial-contour-width: 150px;
        --oa-trial-contour-height: 210px;
        /* Crop the matrix rather than shrinking its dots into a dense texture. */
        --oa-trial-dots-width: 272px;
        --oa-trial-dots-height: 238px;
        --oa-trial-wave-y: 10vh;
        --oa-trial-wave-height: 26vh;
        --oa-trial-glow-height: 30vh;
    }
    @supports (height: 100svh) {
        :is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style] {
            --oa-trial-wave-y: 10svh;
            --oa-trial-wave-height: 26svh;
            --oa-trial-glow-height: 30svh;
        }
    }
    :is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style="dot-grid"] {
        background-position: right -75px top -25px, left -75px top calc(var(--oa-trial-height) - var(--oa-trial-dots-height) + 25px);
    }
}

@media print, (forced-colors: active) {
    :is(.oa-app.oa-standard, .feed)[data-oa-ambient][data-oa-ambient-style] {
        background-image: none;
    }
}