html{
    height: 100vh;
    background: #ffffff;
    /* Overridden by applyBranding() once the brand is known; these defaults
       stay in place when branding itself is what failed. */
    --boot-on-background: #1f1f1f;
    --boot-link: #1a66d6;
}

/* Open Sans = the Flutter theme font (lib/themes/theme_data.dart), shipped
   locally in web/fonts so the error screen never depends on a CDN. Fetched
   only once a boot screen renders; system sans-serif in the meantime/on failure. */
@font-face {
    font-family: 'Boot Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Boot Open Sans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* Shared look of the boot-level screens: the JS error dialog
   (#bootErrorDialog, see showBootErrorDialog in index.html) and the
   <noscript> fallback. No z-index on purpose (stays "auto"): with an
   equal/auto stacking level, paint order follows DOM order, and Flutter's own
   view is always appended after this static markup — so it paints over the
   dialog if the app eventually renders. Secondary tones are derived from the
   two boot variables so they follow the brand when it loaded, and stay
   neutral greys otherwise. */
.boot-screen {
    --boot-on-background-muted: var(--boot-on-background);
    --boot-on-background-muted: color-mix(in srgb, var(--boot-on-background) 72%, transparent);
    --boot-divider: color-mix(in srgb, var(--boot-on-background) 18%, transparent);
    /* Code badge: a bluish grey echoing the support link it is meant for. */
    --boot-code: color-mix(in srgb, var(--boot-link) 22%, var(--boot-on-background));
    --boot-code-container: color-mix(in srgb, var(--boot-link) 5%, color-mix(in srgb, var(--boot-on-background) 5%, transparent));
    max-width: 640px;
    margin: 0 16px;
    padding: 24px;
    color: var(--boot-on-background-muted);
    font-family: 'Boot Open Sans', 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.boot-screen[hidden] {
    display: none;
}

/* :where() keeps this reset at zero specificity so the per-block margins
   below win. */
:where(.boot-screen) :where(p, ol) {
    margin: 0;
}

.boot-screen__title {
    color: var(--boot-on-background);
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.boot-screen__text {
    margin-top: 24px;
}

/* Divider between the reassurance and what to do next. */
.boot-screen__text::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: var(--boot-divider);
}

.boot-screen__help {
    margin-top: 20px;
    font-size: 16px;
}

/* Numbered steps: a compact, faintly tinted box, narrower than the text
   above so it doesn't spill wider than the rest of the screen. Left-aligned
   because numbered lines read badly centered. */
.boot-screen__steps {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    padding: 14px 18px 14px 36px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--boot-on-background) 4%, transparent);
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
}

.boot-screen__steps li + li {
    margin-top: 7px;
}

.boot-screen__code {
    margin-top: 16px;
    padding: 8px 28px;
    border-radius: 999px;
    background: var(--boot-code-container);
    color: var(--boot-code);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
}

.boot-screen__contact {
    margin-top: 28px;
    font-size: 16px;
}

.boot-screen__link {
    color: var(--boot-link);
    text-underline-offset: 3px;
}

/* The <br> only balance the lines on wide screens; on phones they would
   leave orphan words, so the text reflows freely. */
@media (max-width: 600px) {
    .boot-screen {
        font-size: 16px;
    }

    .boot-screen br {
        display: none;
    }
}

body {
    /* background: linear-gradient(90deg, #2d1f6a 0%, #1f193e 100%); */
    background: #ffffff;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading {
    border-radius: 5px;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
}

.loading img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
}

.mainContainer p {
    text-align: center;
    font-weight: 500;
    font-family: Helvetica, sans-serif;
}

#loaderLogo {
    visibility: hidden;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader {
    font-size: 6px;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}

.loader:before {
    left: -3.5em;
    animation-delay: -0.32s;
}

.loader:after {
    left: 3.5em;
}

@keyframes bblFadInOut {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}