html, body { min-height: 100%; overflow-x: hidden; overflow-y: auto; } /* First-paint splash (#981): covers the blank gap before the InteractiveServer circuit connects. Hidden the instant Blazor mounts a layout root, so it never overlaps real content or interferes with interaction. */ #app-loading { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--color-background); color: var(--color-text-secondary, var(--color-text)); } #app-loading .app-loading-spinner { width: 40px; height: 40px; border-radius: 9999px; border: 4px solid color-mix(in srgb, var(--color-primary) 15%, transparent); border-top-color: var(--color-primary); animation: app-loading-spin 0.8s linear infinite; } #app-loading .app-loading-text { font-size: 0.875rem; letter-spacing: 0.01em; } @keyframes app-loading-spin { to { transform: rotate(360deg); } } /* Hide the splash as soon as Blazor renders ANY page content into : its layout/page root becomes a non-script element child (before interactivity the only element children of are #app-loading and