:root {
  color-scheme: light dark;
  --surface: #fffbff; --text: #1c1b1f; --muted: #625b71;
  --primary: #6750a4; --container: #eaddff; --track: #e7e0ec;
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #1c1b1f; --text: #e6e1e5; --muted: #cac4d0;
    --primary: #d0bcff; --container: #4f378b; --track: #49454f; }
}
body { margin: 0; background: var(--surface); }
#loading-screen {
  position: fixed; inset: 0; z-index: 9999; overflow: auto;
  display: grid; place-items: center; background: var(--surface);
  color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: opacity .25s ease-out;
}
.loading-card { box-sizing: border-box; width: min(100%, 440px); padding: 32px 24px; text-align: center; }
.loading-mark {
  display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto 24px;
  border-radius: 24px; background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary);
}
.loading-mark svg { display: block; width: 64px; height: 64px; }
#loading-stage { font-size: 16px; margin: 0 0 24px; }
.loading-meter { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
progress { display: block; width: 100%; min-width: 0; height: 8px; border: 0; border-radius: 8px;
  overflow: hidden; background: var(--track); accent-color: var(--primary); }
progress::-webkit-progress-bar { background: var(--track); border-radius: 8px; }
progress::-webkit-progress-value { background: var(--primary); border-radius: 8px; }
progress::-moz-progress-bar { background: var(--primary); border-radius: 8px; }
progress:indeterminate { background: linear-gradient(90deg, var(--track) 0 30%, var(--primary) 45% 55%, var(--track) 70%);
  background-size: 250% 100%; animation: loading-pulse 1.5s ease-in-out infinite alternate; }
progress:indeterminate::-webkit-progress-bar { background: transparent; }
#loading-percent { min-width: 4em; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
#loading-detail, #loading-hint { color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#loading-detail { margin: 12px 0 0; }
#loading-hint:empty { display: none; }
#loading-retry { margin-top: 12px; min-height: 44px; padding: 10px 24px; border: 0; border-radius: 24px;
  background: var(--primary); color: var(--surface); font: inherit; cursor: pointer; }
#loading-retry:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
#loading-screen.fade-out { opacity: 0; pointer-events: none; }
@keyframes loading-pulse { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { #loading-screen { transition: none; } progress:indeterminate { animation: none; } }