:root { color-scheme: dark; --background: #03050a; --foreground: #dce8ff; }
*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--background); color: var(--foreground); font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button:disabled, select:disabled, input:disabled { cursor: not-allowed; }
h1, p { margin: 0; }
.homeLink h1 { display: block; font-size: 18px; font-weight: 610; letter-spacing: -0.02em; }
.boot { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.bootMark { padding: 14px; border: 1px solid #50668a; border-radius: 12px; font-family: ui-monospace, monospace; }
.boot h1 { font-size: 24px; font-weight: 600; }
.boot p { color: #98a9c6; font-size: 13px; }
.loadingTrack { width: 180px; height: 2px; background: #24324a; }
.loadingTrack > div { height: 100%; width: var(--blazor-load-percentage, 0%); background: #b0cbff; transition: width 150ms; }
.statusPanel { position: fixed; z-index: 5; top: 40%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 40px)); padding: 24px; border: 1px solid #52678a; border-radius: 12px; background: #101929; text-align: center; line-height: 1.6; }
.statusPanel p { margin: 12px 0; }
.statusPanel button, #blazor-error-ui button { padding: 6px; border: 0; background: transparent; color: #bfdaff; text-decoration: underline; cursor: pointer; }
#blazor-error-ui { display: none; position: fixed; z-index: 100; bottom: 0; width: 100%; padding: 16px; background: #38232c; text-align: center; }
.speedControl input::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #dbe8ff; border-radius: 50%; background: #6c8dcc; }
@media (max-height: 500px) and (min-width: 681px) { .readout { top: 100px; transform: none; gap: 8px; } }