html.brand-intro-active { overflow: hidden; }
#brand-intro {
 position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
 max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
 background: #f9f9fa; color: #151719; overflow: hidden;
 opacity: 1; transition: opacity 450ms ease; color-scheme: light;
}
#brand-intro::backdrop { background: #f9f9fa; backdrop-filter: none; }
#brand-intro.brand-intro--leaving { opacity: 0; }
#brand-intro.brand-intro--leaving::backdrop { background: transparent; }
#brand-intro canvas { display: block; width: 100%; height: 100%; }
#brand-intro .brand-intro-skip {
 position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
 min-height: 44px; padding: 10px 20px; border: 1px solid #c7cbd0; border-radius: 30px;
 background: #ffffffdf; color: #151719; cursor: pointer; font: 500 14px Arial, sans-serif;
}
#brand-intro .brand-intro-skip:hover { background: #ffdf00; border-color: #ffdf00; }
#brand-intro .brand-intro-skip:focus-visible { outline: 3px solid #151719; outline-offset: 4px; }
@media(prefers-reduced-motion: reduce) { #brand-intro { transition: none; } }

/* The heading receives programmatic focus after the intro; it is not a control. */
#headline[tabindex="-1"]:focus { outline: none; }