:is(body, .bg-host)::before,
:is(body, .bg-host)::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: -1;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}

:is(body, .bg-host)::before {
    top: 0;
    height: 28%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cg fill='%23525e6e' opacity='0.05'%3E%3Cpath d='M0 186 C333.3 186 666.7 214 1000 214 C1333.3 214 1666.7 186 2000 186 C2333.3 186 2666.7 214 3000 214 C3333.3 214 3666.7 186 4000 186 L4000 188 C3666.7 188 3333.3 216 3000 216 C2666.7 216 2333.3 188 2000 188 C1666.7 188 1333.3 216 1000 216 C666.7 216 333.3 188 0 188 Z'/%3E%3Cpath d='M0 154.8 C340 154.8 680 185.2 1020 185.2 C1360 185.2 1700 154.8 2040 154.8 C2380 154.8 2720 185.2 3060 185.2 C3400 185.2 3740 154.8 4080 154.8 L4080 156.8 C3740 156.8 3400 187.2 3060 187.2 C2720 187.2 2380 156.8 2040 156.8 C1700 156.8 1360 187.2 1020 187.2 C680 187.2 340 156.8 0 156.8 Z'/%3E%3Cpath d='M0 123.6 C346.7 123.6 693.3 156.4 1040 156.4 C1386.7 156.4 1733.3 123.6 2080 123.6 C2426.7 123.6 2773.3 156.4 3120 156.4 C3466.7 156.4 3813.3 123.6 4160 123.6 L4160 125.6 C3813.3 125.6 3466.7 158.4 3120 158.4 C2773.3 158.4 2426.7 125.6 2080 125.6 C1733.3 125.6 1386.7 158.4 1040 158.4 C693.3 158.4 346.7 125.6 0 125.6 Z'/%3E%3Cpath d='M0 92.4 C353.3 92.4 706.7 127.6 1060 127.6 C1413.3 127.6 1766.7 92.4 2120 92.4 C2473.3 92.4 2826.7 127.6 3180 127.6 C3533.3 127.6 3886.7 92.4 4240 92.4 L4240 94.4 C3886.7 94.4 3533.3 129.6 3180 129.6 C2826.7 129.6 2473.3 94.4 2120 94.4 C1766.7 94.4 1413.3 129.6 1060 129.6 C706.7 129.6 353.3 94.4 0 94.4 Z'/%3E%3Cpath d='M0 61.2 C360 61.2 720 98.8 1080 98.8 C1440 98.8 1800 61.2 2160 61.2 C2520 61.2 2880 98.8 3240 98.8 C3600 98.8 3960 61.2 4320 61.2 L4320 63.2 C3960 63.2 3600 100.8 3240 100.8 C2880 100.8 2520 63.2 2160 63.2 C1800 63.2 1440 100.8 1080 100.8 C720 100.8 360 63.2 0 63.2 Z'/%3E%3Cpath d='M0 30 C366.7 30 733.3 70 1100 70 C1466.7 70 1833.3 30 2200 30 C2566.7 30 2933.3 70 3300 70 C3666.7 70 4033.3 30 4400 30 L4400 32 C4033.3 32 3666.7 72 3300 72 C2933.3 72 2566.7 32 2200 32 C1833.3 32 1466.7 72 1100 72 C733.3 72 366.7 32 0 32 Z'/%3E%3Cpath d='M0 -1.2 C373.3 -1.2 746.7 41.2 1120 41.2 C1493.3 41.2 1866.7 -1.2 2240 -1.2 C2613.3 -1.2 2986.7 41.2 3360 41.2 C3733.3 41.2 4106.7 -1.2 4480 -1.2 L4480 0.8 C4106.7 0.8 3733.3 43.2 3360 43.2 C2986.7 43.2 2613.3 0.8 2240 0.8 C1866.7 0.8 1493.3 43.2 1120 43.2 C746.7 43.2 373.3 0.8 0 0.8 Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to bottom right, transparent 10%, black 80%);
    mask-image: linear-gradient(to bottom right, transparent 10%, black 80%);
}

:is(body, .bg-host)::after {
    bottom: 0;
    height: 28%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cg fill='%23525e6e' opacity='0.05'%3E%3Cpath d='M0 34 C333.3 34 666.7 6 1000 6 C1333.3 6 1666.7 34 2000 34 C2333.3 34 2666.7 6 3000 6 C3333.3 6 3666.7 34 4000 34 L4000 36 C3666.7 36 3333.3 8 3000 8 C2666.7 8 2333.3 36 2000 36 C1666.7 36 1333.3 8 1000 8 C666.7 8 333.3 36 0 36 Z'/%3E%3Cpath d='M0 65.2 C340 65.2 680 34.8 1020 34.8 C1360 34.8 1700 65.2 2040 65.2 C2380 65.2 2720 34.8 3060 34.8 C3400 34.8 3740 65.2 4080 65.2 L4080 67.2 C3740 67.2 3400 36.8 3060 36.8 C2720 36.8 2380 67.2 2040 67.2 C1700 67.2 1360 36.8 1020 36.8 C680 36.8 340 67.2 0 67.2 Z'/%3E%3Cpath d='M0 96.4 C346.7 96.4 693.3 63.6 1040 63.6 C1386.7 63.6 1733.3 96.4 2080 96.4 C2426.7 96.4 2773.3 63.6 3120 63.6 C3466.7 63.6 3813.3 96.4 4160 96.4 L4160 98.4 C3813.3 98.4 3466.7 65.6 3120 65.6 C2773.3 65.6 2426.7 98.4 2080 98.4 C1733.3 98.4 1386.7 65.6 1040 65.6 C693.3 65.6 346.7 98.4 0 98.4 Z'/%3E%3Cpath d='M0 127.6 C353.3 127.6 706.7 92.4 1060 92.4 C1413.3 92.4 1766.7 127.6 2120 127.6 C2473.3 127.6 2826.7 92.4 3180 92.4 C3533.3 92.4 3886.7 127.6 4240 127.6 L4240 129.6 C3886.7 129.6 3533.3 94.4 3180 94.4 C2826.7 94.4 2473.3 129.6 2120 129.6 C1766.7 129.6 1413.3 94.4 1060 94.4 C706.7 94.4 353.3 129.6 0 129.6 Z'/%3E%3Cpath d='M0 158.8 C360 158.8 720 121.2 1080 121.2 C1440 121.2 1800 158.8 2160 158.8 C2520 158.8 2880 121.2 3240 121.2 C3600 121.2 3960 158.8 4320 158.8 L4320 160.8 C3960 160.8 3600 123.2 3240 123.2 C2880 123.2 2520 160.8 2160 160.8 C1800 160.8 1440 123.2 1080 123.2 C720 123.2 360 160.8 0 160.8 Z'/%3E%3Cpath d='M0 190 C366.7 190 733.3 150 1100 150 C1466.7 150 1833.3 190 2200 190 C2566.7 190 2933.3 150 3300 150 C3666.7 150 4033.3 190 4400 190 L4400 192 C4033.3 192 3666.7 152 3300 152 C2933.3 152 2566.7 192 2200 192 C1833.3 192 1466.7 152 1100 152 C733.3 152 366.7 192 0 192 Z'/%3E%3Cpath d='M0 221.2 C373.3 221.2 746.7 178.8 1120 178.8 C1493.3 178.8 1866.7 221.2 2240 221.2 C2613.3 221.2 2986.7 178.8 3360 178.8 C3733.3 178.8 4106.7 221.2 4480 221.2 L4480 223.2 C4106.7 223.2 3733.3 180.8 3360 180.8 C2986.7 180.8 2613.3 223.2 2240 223.2 C1866.7 223.2 1493.3 180.8 1120 180.8 C746.7 180.8 373.3 223.2 0 223.2 Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to bottom right, black 20%, transparent 90%);
    mask-image: linear-gradient(to bottom right, black 20%, transparent 90%);
}

.dark :is(body, .bg-host)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cg fill='%23ffffff' opacity='0.04'%3E%3Cpath d='M0 186 C333.3 186 666.7 214 1000 214 C1333.3 214 1666.7 186 2000 186 C2333.3 186 2666.7 214 3000 214 C3333.3 214 3666.7 186 4000 186 L4000 188 C3666.7 188 3333.3 216 3000 216 C2666.7 216 2333.3 188 2000 188 C1666.7 188 1333.3 216 1000 216 C666.7 216 333.3 188 0 188 Z'/%3E%3Cpath d='M0 154.8 C340 154.8 680 185.2 1020 185.2 C1360 185.2 1700 154.8 2040 154.8 C2380 154.8 2720 185.2 3060 185.2 C3400 185.2 3740 154.8 4080 154.8 L4080 156.8 C3740 156.8 3400 187.2 3060 187.2 C2720 187.2 2380 156.8 2040 156.8 C1700 156.8 1360 187.2 1020 187.2 C680 187.2 340 156.8 0 156.8 Z'/%3E%3Cpath d='M0 123.6 C346.7 123.6 693.3 156.4 1040 156.4 C1386.7 156.4 1733.3 123.6 2080 123.6 C2426.7 123.6 2773.3 156.4 3120 156.4 C3466.7 156.4 3813.3 123.6 4160 123.6 L4160 125.6 C3813.3 125.6 3466.7 158.4 3120 158.4 C2773.3 158.4 2426.7 125.6 2080 125.6 C1733.3 125.6 1386.7 158.4 1040 158.4 C693.3 158.4 346.7 125.6 0 125.6 Z'/%3E%3Cpath d='M0 92.4 C353.3 92.4 706.7 127.6 1060 127.6 C1413.3 127.6 1766.7 92.4 2120 92.4 C2473.3 92.4 2826.7 127.6 3180 127.6 C3533.3 127.6 3886.7 92.4 4240 92.4 L4240 94.4 C3886.7 94.4 3533.3 129.6 3180 129.6 C2826.7 129.6 2473.3 94.4 2120 94.4 C1766.7 94.4 1413.3 129.6 1060 129.6 C706.7 129.6 353.3 94.4 0 94.4 Z'/%3E%3Cpath d='M0 61.2 C360 61.2 720 98.8 1080 98.8 C1440 98.8 1800 61.2 2160 61.2 C2520 61.2 2880 98.8 3240 98.8 C3600 98.8 3960 61.2 4320 61.2 L4320 63.2 C3960 63.2 3600 100.8 3240 100.8 C2880 100.8 2520 63.2 2160 63.2 C1800 63.2 1440 100.8 1080 100.8 C720 100.8 360 63.2 0 63.2 Z'/%3E%3Cpath d='M0 30 C366.7 30 733.3 70 1100 70 C1466.7 70 1833.3 30 2200 30 C2566.7 30 2933.3 70 3300 70 C3666.7 70 4033.3 30 4400 30 L4400 32 C4033.3 32 3666.7 72 3300 72 C2933.3 72 2566.7 32 2200 32 C1833.3 32 1466.7 72 1100 72 C733.3 72 366.7 32 0 32 Z'/%3E%3Cpath d='M0 -1.2 C373.3 -1.2 746.7 41.2 1120 41.2 C1493.3 41.2 1866.7 -1.2 2240 -1.2 C2613.3 -1.2 2986.7 41.2 3360 41.2 C3733.3 41.2 4106.7 -1.2 4480 -1.2 L4480 0.8 C4106.7 0.8 3733.3 43.2 3360 43.2 C2986.7 43.2 2613.3 0.8 2240 0.8 C1866.7 0.8 1493.3 43.2 1120 43.2 C746.7 43.2 373.3 0.8 0 0.8 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.dark :is(body, .bg-host)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cg fill='%23ffffff' opacity='0.04'%3E%3Cpath d='M0 34 C333.3 34 666.7 6 1000 6 C1333.3 6 1666.7 34 2000 34 C2333.3 34 2666.7 6 3000 6 C3333.3 6 3666.7 34 4000 34 L4000 36 C3666.7 36 3333.3 8 3000 8 C2666.7 8 2333.3 36 2000 36 C1666.7 36 1333.3 8 1000 8 C666.7 8 333.3 36 0 36 Z'/%3E%3Cpath d='M0 65.2 C340 65.2 680 34.8 1020 34.8 C1360 34.8 1700 65.2 2040 65.2 C2380 65.2 2720 34.8 3060 34.8 C3400 34.8 3740 65.2 4080 65.2 L4080 67.2 C3740 67.2 3400 36.8 3060 36.8 C2720 36.8 2380 67.2 2040 67.2 C1700 67.2 1360 36.8 1020 36.8 C680 36.8 340 67.2 0 67.2 Z'/%3E%3Cpath d='M0 96.4 C346.7 96.4 693.3 63.6 1040 63.6 C1386.7 63.6 1733.3 96.4 2080 96.4 C2426.7 96.4 2773.3 63.6 3120 63.6 C3466.7 63.6 3813.3 96.4 4160 96.4 L4160 98.4 C3813.3 98.4 3466.7 65.6 3120 65.6 C2773.3 65.6 2426.7 98.4 2080 98.4 C1733.3 98.4 1386.7 65.6 1040 65.6 C693.3 65.6 346.7 98.4 0 98.4 Z'/%3E%3Cpath d='M0 127.6 C353.3 127.6 706.7 92.4 1060 92.4 C1413.3 92.4 1766.7 127.6 2120 127.6 C2473.3 127.6 2826.7 92.4 3180 92.4 C3533.3 92.4 3886.7 127.6 4240 127.6 L4240 129.6 C3886.7 129.6 3533.3 94.4 3180 94.4 C2826.7 94.4 2473.3 129.6 2120 129.6 C1766.7 129.6 1413.3 94.4 1060 94.4 C706.7 94.4 353.3 129.6 0 129.6 Z'/%3E%3Cpath d='M0 158.8 C360 158.8 720 121.2 1080 121.2 C1440 121.2 1800 158.8 2160 158.8 C2520 158.8 2880 121.2 3240 121.2 C3600 121.2 3960 158.8 4320 158.8 L4320 160.8 C3960 160.8 3600 123.2 3240 123.2 C2880 123.2 2520 160.8 2160 160.8 C1800 160.8 1440 123.2 1080 123.2 C720 123.2 360 160.8 0 160.8 Z'/%3E%3Cpath d='M0 190 C366.7 190 733.3 150 1100 150 C1466.7 150 1833.3 190 2200 190 C2566.7 190 2933.3 150 3300 150 C3666.7 150 4033.3 190 4400 190 L4400 192 C4033.3 192 3666.7 152 3300 152 C2933.3 152 2566.7 192 2200 192 C1833.3 192 1466.7 152 1100 152 C733.3 152 366.7 192 0 192 Z'/%3E%3Cpath d='M0 221.2 C373.3 221.2 746.7 178.8 1120 178.8 C1493.3 178.8 1866.7 221.2 2240 221.2 C2613.3 221.2 2986.7 178.8 3360 178.8 C3733.3 178.8 4106.7 221.2 4480 221.2 L4480 223.2 C4106.7 223.2 3733.3 180.8 3360 180.8 C2986.7 180.8 2613.3 223.2 2240 223.2 C1866.7 223.2 1493.3 180.8 1120 180.8 C746.7 180.8 373.3 223.2 0 223.2 Z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
    :is(body, .bg-host)::before {
        left: auto;
        right: 0;
        width: 65%;
        max-height: 45vh;
        transform: scaleX(-1);
        -webkit-mask-image: linear-gradient(to bottom right, black 0%, transparent 55%);
        mask-image: linear-gradient(to bottom right, black 0%, transparent 55%);
    }

    :is(body, .bg-host)::after {
        left: 0;
        width: 65%;
        max-height: 45vh;
        -webkit-mask-image: linear-gradient(to top right, black 0%, transparent 55%);
        mask-image: linear-gradient(to top right, black 0%, transparent 55%);
    }
}

:is(body, .bg-host).bg-lines-on::before,
:is(body, .bg-host).bg-lines-on::after {
    opacity: 1;
}

:is(body, .bg-host).bg-dots-on {
    --dots-color: rgba(30, 41, 59, .2);
    --dots-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0042 0.0055' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 11 0 0 0 -5.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --dots-clear: radial-gradient(ellipse 36% 60% at 50% 44%, transparent 55%, #000 100%);
    --dots-wave: radial-gradient(closest-side, rgba(0, 0, 0, .18), #000);
    --dots-edge: 40px;
    --dots-edge-x: linear-gradient(to right, transparent, #000 var(--dots-edge), #000 calc(100% - var(--dots-edge)), transparent);
    --dots-bottom: 0px;
    --dots-edge-y: linear-gradient(to bottom, transparent, #000 var(--dots-edge), #000 calc(100% - var(--dots-bottom) - var(--dots-edge)), transparent calc(100% - var(--dots-bottom)));
}

.dark :is(body, .bg-host).bg-dots-on {
    --dots-color: rgba(255, 255, 255, .16);
}

:is(body, .bg-host).bg-dots-on::before {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    opacity: 1;
    background-image: radial-gradient(circle, var(--dots-color) .85px, transparent 1.35px);
    background-size: 14px 14px;
    background-repeat: repeat;
    background-position: 7px 7px;
    -webkit-mask-image: var(--dots-noise), var(--dots-clear), var(--dots-edge-x), var(--dots-edge-y), var(--dots-wave);
    -webkit-mask-size: cover, 100% 100%, 100% 100%, 100% 100%, 760px 520px;
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    -webkit-mask-composite: source-in, source-in, source-in, source-in;
    mask-image: var(--dots-noise), var(--dots-clear), var(--dots-edge-x), var(--dots-edge-y), var(--dots-wave);
    mask-size: cover, 100% 100%, 100% 100%, 100% 100%, 760px 520px;
    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    mask-composite: intersect, intersect, intersect, intersect;
    animation: bg-dots-wave 26s linear infinite;
}

@keyframes bg-dots-wave {
    from { -webkit-mask-position: center, 0 0, 0 0, 0 0, 0 0; mask-position: center, 0 0, 0 0, 0 0, 0 0; }
    to { -webkit-mask-position: center, 0 0, 0 0, 0 0, 760px 520px; mask-position: center, 0 0, 0 0, 0 0, 760px 520px; }
}

:is(body, .bg-host).bg-dots-on::after {
    opacity: 0;
}

@media (max-width: 700px) {
    :is(body, .bg-host).bg-dots-on {
        --dots-clear: radial-gradient(ellipse 75% 32% at 50% 42%, transparent 50%, #000 100%);
        --dots-edge: 24px;
    }

    :is(body, .bg-host).bg-dots-on::before {
        background-size: 12px 12px;
        background-position: 6px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(body, .bg-host).bg-dots-on::before {
        animation: none;
    }
}

:is(body, .bg-host).bg-grid-on::before,
:is(body, .bg-host).bg-grid-on::after {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    background-size: 48px 48px;
    background-repeat: repeat;
    background-position: center center;
}

:is(body, .bg-host).bg-grid-on::before {
    opacity: 1;
    background-image:
        linear-gradient(to right, rgba(82, 94, 110, .16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 94, 110, .16) 1px, transparent 1px);
    -webkit-mask-image:
        radial-gradient(ellipse 38% 46% at 6% 14%, #000 0%, transparent 70%),
        radial-gradient(ellipse 32% 40% at 94% 10%, rgba(0, 0, 0, .7) 0%, transparent 70%),
        radial-gradient(ellipse 36% 44% at 88% 86%, #000 0%, transparent 70%),
        radial-gradient(ellipse 30% 38% at 12% 90%, rgba(0, 0, 0, .55) 0%, transparent 70%),
        radial-gradient(ellipse 26% 30% at 70% 50%, rgba(0, 0, 0, .35) 0%, transparent 70%),
        linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12));
    mask-image:
        radial-gradient(ellipse 38% 46% at 6% 14%, #000 0%, transparent 70%),
        radial-gradient(ellipse 32% 40% at 94% 10%, rgba(0, 0, 0, .7) 0%, transparent 70%),
        radial-gradient(ellipse 36% 44% at 88% 86%, #000 0%, transparent 70%),
        radial-gradient(ellipse 30% 38% at 12% 90%, rgba(0, 0, 0, .55) 0%, transparent 70%),
        radial-gradient(ellipse 26% 30% at 70% 50%, rgba(0, 0, 0, .35) 0%, transparent 70%),
        linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12));
}

.dark :is(body, .bg-host).bg-grid-on::before {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .075) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .075) 1px, transparent 1px);
}

:is(body, .bg-host).bg-grid-on::after {
    opacity: .7;
    background-image:
        linear-gradient(to right, rgb(var(--primary, 14 165 233) / .55) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--primary, 14 165 233) / .55) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
    -webkit-mask-size: 560px 560px;
    mask-size: 560px 560px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 6% 12%;
    mask-position: 6% 12%;
    animation:
        bg-grid-wander 28s ease-in-out infinite,
        bg-grid-breathe 3.6s ease-in-out infinite alternate;
    will-change: mask-position, opacity;
}

@keyframes bg-grid-wander {
    0%, 100% { -webkit-mask-position: 6% 12%; mask-position: 6% 12%; }
    25%      { -webkit-mask-position: 94% 8%; mask-position: 94% 8%; }
    50%      { -webkit-mask-position: 92% 90%; mask-position: 92% 90%; }
    75%      { -webkit-mask-position: 8% 92%; mask-position: 8% 92%; }
}

@keyframes bg-grid-breathe {
    from { opacity: .3; }
    to   { opacity: .85; }
}

@media (max-width: 600px) {
    :is(body, .bg-host).bg-grid-on::before,
    :is(body, .bg-host).bg-grid-on::after {
        background-size: 36px 36px;
    }

    :is(body, .bg-host).bg-grid-on::after {
        -webkit-mask-size: 340px 340px;
        mask-size: 340px 340px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(body, .bg-host).bg-grid-on::after {
        animation: none;
        opacity: 0;
    }
}

:is(body, .bg-host):is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::before,
:is(body, .bg-host):is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::after {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
}

:is(body, .bg-host).bg-cubes-on::before {
    opacity: .5;
    background-image: url("decor/cubes.svg");
    background-size: 41.57px 72px;
    background-repeat: repeat;
    background-position: center top;
    -webkit-mask-image:
        radial-gradient(ellipse 36% 44% at 6% 16%, #000 0%, transparent 72%),
        radial-gradient(ellipse 32% 40% at 94% 12%, rgba(0, 0, 0, .8) 0%, transparent 72%),
        radial-gradient(ellipse 34% 42% at 88% 86%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 38% at 12% 88%, rgba(0, 0, 0, .7) 0%, transparent 72%);
    mask-image:
        radial-gradient(ellipse 36% 44% at 6% 16%, #000 0%, transparent 72%),
        radial-gradient(ellipse 32% 40% at 94% 12%, rgba(0, 0, 0, .8) 0%, transparent 72%),
        radial-gradient(ellipse 34% 42% at 88% 86%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 38% at 12% 88%, rgba(0, 0, 0, .7) 0%, transparent 72%);
}

.dark :is(body, .bg-host).bg-cubes-on::before {
    opacity: .38;
}

:is(body, .bg-host).bg-cubes-on::after {
    opacity: 1;
    background-image: linear-gradient(115deg, transparent 42%, rgb(var(--primary, 14 165 233) / .07) 50%, transparent 58%);
    background-size: 250% 250%;
    background-repeat: no-repeat;
    -webkit-mask-image: url("decor/cubes.svg");
    mask-image: url("decor/cubes.svg");
    -webkit-mask-size: 41.57px 72px;
    mask-size: 41.57px 72px;
    -webkit-mask-position: center top;
    mask-position: center top;
    animation: bg-cubes-sheen 16s ease-in-out infinite;
}

@keyframes bg-cubes-sheen {
    from { background-position: 120% 0%; }
    to   { background-position: -20% 100%; }
}

:is(body, .bg-host).bg-topo-on::before {
    inset: -3%;
    opacity: .32;
    background-image: url("decor/topo.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 46%, transparent 0%, transparent 42%, rgba(0, 0, 0, .3) 66%, #000 100%);
    mask-image: radial-gradient(ellipse 48% 44% at 50% 46%, transparent 0%, transparent 42%, rgba(0, 0, 0, .3) 66%, #000 100%);
    animation: bg-topo-drift 46s ease-in-out infinite alternate;
}

.dark :is(body, .bg-host).bg-topo-on::before {
    opacity: .26;
}

@media (max-width: 700px) {
    :is(body, .bg-host).bg-topo-on::before {
        background-size: 1100px auto;
        background-repeat: repeat;
        -webkit-mask-image: radial-gradient(ellipse 95% 28% at 50% 44%, transparent 0%, transparent 45%, rgba(0, 0, 0, .3) 68%, #000 100%);
        mask-image: radial-gradient(ellipse 95% 28% at 50% 44%, transparent 0%, transparent 45%, rgba(0, 0, 0, .3) 68%, #000 100%);
    }
}

:is(body, .bg-host).bg-wave-on::before {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    opacity: .55;
    background: rgb(var(--fg, 15 23 42));
    -webkit-mask-image: url("decor/wave.svg"), radial-gradient(ellipse 34% 26% at 50% 47%, rgba(0, 0, 0, .25) 0%, #000 100%);
    -webkit-mask-size: cover, 100% 100%;
    -webkit-mask-position: center, 0 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-image: url("decor/wave.svg"), radial-gradient(ellipse 34% 26% at 50% 47%, rgba(0, 0, 0, .25) 0%, #000 100%);
    mask-size: cover, 100% 100%;
    mask-position: center, 0 0;
    mask-repeat: no-repeat;
    mask-composite: intersect;
}

.dark :is(body, .bg-host).bg-wave-on::before {
    opacity: .4;
}

:is(body, .bg-host).bg-wave-on::after {
    opacity: 0;
}

@media (max-width: 700px) {
    :is(body, .bg-host).bg-wave-on::before {
        -webkit-mask-size: auto 62%, 100% 100%;
        mask-size: auto 62%, 100% 100%;
        -webkit-mask-position: 42% 50%, 0 0;
        mask-position: 42% 50%, 0 0;
    }
}

@keyframes bg-topo-drift {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.05) translate(-1%, 1.2%); }
}

:is(body, .bg-host).bg-floor-on::before {
    top: auto;
    height: 62vh;
    opacity: .75;
    transform: perspective(420px) rotateX(64deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(to right, rgb(var(--primary, 14 165 233) / .4) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--primary, 14 165 233) / .4) 1px, transparent 1px);
    background-size: 64px 64px;
    background-repeat: repeat;
    background-position: center 0;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 80%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 80%);
    animation: bg-floor-move 5s linear infinite;
}

.dark :is(body, .bg-host).bg-floor-on::before {
    opacity: .6;
}

@keyframes bg-floor-move {
    from { background-position: center 0; }
    to   { background-position: center 64px; }
}

:is(body, .bg-host).bg-floor-on::after {
    top: auto;
    height: 55vh;
    opacity: 1;
    background-image: radial-gradient(ellipse 70% 60% at 50% 100%, rgb(var(--primary, 14 165 233) / .14), transparent 70%);
}

@media (max-width: 600px) {
    :is(body, .bg-host).bg-floor-on::before {
        height: 46vh;
        background-size: 48px 48px;
        animation-name: bg-floor-move-sm;
    }

    @keyframes bg-floor-move-sm {
        from { background-position: center 0; }
        to   { background-position: center 48px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(body, .bg-host):is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::before,
    :is(body, .bg-host):is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::after {
        animation: none;
    }

    :is(body, .bg-host).bg-cubes-on::after {
        opacity: 0;
    }
}

#bg-fx-glow,
#bg-fx-vignette,
#bg-fx-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
}

#bg-fx-glow.is-on,
#bg-fx-vignette.is-on,
#bg-fx-canvas.is-on {
    opacity: 1;
}

#bg-fx-canvas {
    width: 100%;
    height: 100%;
}

#bg-fx-glow {
    overflow: hidden;
}

#bg-fx-glow span {
    position: absolute;
    width: 52vmax;
    height: 52vmax;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgb(var(--primary, 14 165 233) / .16), transparent 100%);
    animation: bg-glow-drift 40s ease-in-out infinite alternate;
    will-change: transform;
}

.dark #bg-fx-glow span {
    background: radial-gradient(circle closest-side, rgb(var(--primary, 14 165 233) / .2), transparent 100%);
}

#bg-fx-glow span:nth-child(1) { left: -14vmax; top: -18vmax; }
#bg-fx-glow span:nth-child(2) { right: -16vmax; top: 10vh; animation-duration: 52s; animation-delay: -18s; filter: hue-rotate(55deg); }
#bg-fx-glow span:nth-child(3) { left: 22vw; bottom: -26vmax; animation-duration: 46s; animation-delay: -30s; filter: hue-rotate(-40deg); }

@keyframes bg-glow-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(8vw, 6vh) scale(1.12); }
    100% { transform: translate(-6vw, 10vh) scale(.94); }
}

#bg-fx-vignette {
    background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 52%, rgba(15, 23, 42, .12) 100%);
}

.dark #bg-fx-vignette {
    background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 48%, rgba(0, 0, 0, .5) 100%);
}

@media (prefers-reduced-motion: reduce) {
    #bg-fx-glow span {
        animation: none;
    }
}

html.bg-saver :is(body, .bg-host)::before,
html.bg-saver :is(body, .bg-host)::after,
html.bg-saver #bg-fx-glow span {
    animation-play-state: paused !important;
}

.bg-host {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-mask-image: var(--bg-mask-doc, linear-gradient(transparent, transparent)), var(--bg-mask-fix, linear-gradient(#000, #000));
    -webkit-mask-size: var(--bg-mask-w, 100%) var(--bg-mask-h, 100%), 100% 100%;
    -webkit-mask-position: 0 var(--bg-mask-y, 0px), 0 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-image: var(--bg-mask-doc, linear-gradient(transparent, transparent)), var(--bg-mask-fix, linear-gradient(#000, #000));
    mask-size: var(--bg-mask-w, 100%) var(--bg-mask-h, 100%), 100% 100%;
    mask-position: 0 var(--bg-mask-y, 0px), 0 0;
    mask-repeat: no-repeat;
    mask-composite: intersect;
    opacity: 0;
    transition: opacity .7s ease;
}

.bg-host.is-ready {
    opacity: 1;
}

.bg-host.bg-dots-on {
    --dots-clear: linear-gradient(#000, #000);
}