/* Public pages deliberately keep the Engineering blue identity. */
:root {
    --public-cosmos-canvas: #eef3fe;
    --public-cosmos-opacity: .18;
    --public-cosmos-star: rgba(47, 107, 255, 0.5);
}

html {
    background-color: var(--public-cosmos-canvas) !important;
}

html:root body.external-page:not(.tw-dashboard),
html:root body:not(.external-page):not(.tw-dashboard) {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background-color: transparent !important;
    background-image: none !important;
}

body:not(.tw-dashboard)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    user-select: none;
    color: #2f6bff;
    background-image: url("../images/public-engineering-cosmos.d76abf4c3ba2.svg?v=20260810-rocky-planet-v1");
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat-y;
    opacity: var(--public-cosmos-opacity);
}

body:not(.tw-dashboard) > .public-cosmic-stars {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    contain: layout paint style;
    pointer-events: none;
    user-select: none;
}

.public-cosmic-stars__star {
    position: absolute;
    top: var(--cosmos-y);
    left: var(--cosmos-x);
    width: var(--cosmos-size);
    height: var(--cosmos-size);
    border-radius: 50%;
    background: var(--public-cosmos-star);
    opacity: var(--cosmos-opacity);
}

/* Page shells are canvas, while cards/forms/modals remain raised surfaces. */
body.external-page > :is(main, section),
html:root body.external-page.tw-homepage section.hero,
body.external-page.tw-homepage :is(.how-it-works, .benefits, .gamification, .faq-section),
body:not(.external-page):not(.tw-dashboard) > :is(main, .wrapper, .page-shell, .error-shell) {
    background-color: transparent !important;
    background-image: none !important;
}

html:root body.external-page.tw-homepage section.hero::before {
    background-color: transparent !important;
    background-image: none !important;
}

@media (prefers-color-scheme: dark) {
    :root {
        --public-cosmos-canvas: #081426;
        --public-cosmos-opacity: .38;
        --public-cosmos-star: rgba(218, 233, 255, 0.58);
    }
}

@media (max-width: 767px) {
    :root {
        --public-cosmos-opacity: .19;
    }

    body:not(.tw-dashboard)::before {
        position: absolute;
        background-image: url("../images/public-engineering-cosmos-mobile.171cb20c0eae.svg?v=20260810-rocky-planet-v1");
        background-position: center top;
        background-size: 100% auto;
        background-repeat: repeat-y;
    }

    .public-cosmic-stars__star {
        opacity: calc(var(--cosmos-opacity) * 0.92);
    }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
    :root {
        --public-cosmos-opacity: .34;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.tw-dashboard)::before {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active), print {
    .public-cosmic-stars {
        display: none;
    }
}