/* A quiet outline of the dashboard while the app starts, so the window is never blank. */
html { background: #f6f7fb; }
html.dark { background: #0e1026; }
#boot { position: fixed; inset: 0; display: flex; font: 600 14px/1.4 system-ui, -apple-system, sans-serif; color: #1d2350; }
html.dark #boot { color: #eef0fb; }
#studio-root:has(> :not(script)) + #boot { display: none; }
#boot aside { width: 256px; flex: none; padding: 20px 16px; border-right: 1px solid rgb(0 0 0 / 0.1); background: #1d2350; color: #eef0fb; }
html.dark #boot aside { background: #161a40; }
#boot .brand { display: flex; align-items: baseline; gap: 8px; margin: 2px 6px 26px; font-size: 18px; letter-spacing: -0.01em; }
#boot .brand small { font-size: 13px; font-weight: 500; opacity: 0.6; }
#boot main { flex: 1; padding: 40px clamp(20px, 4vw, 48px); }
#boot i { display: block; height: 12px; margin: 0 6px 18px; border-radius: 6px; background: currentColor; opacity: 0.08; animation: boot-fade 1.6s ease-in-out infinite alternate; }
#boot main i:first-child { width: 220px; height: 26px; margin-bottom: 28px; opacity: 0.1; }
#boot .card { height: 140px; margin-bottom: 20px; border-radius: 18px; background: currentColor; opacity: 0.05; animation: boot-fade 1.6s ease-in-out infinite alternate; }
@keyframes boot-fade { to { opacity: 0.03; } }
@media (max-width: 900px) { #boot aside { display: none; } }
@media (prefers-reduced-motion: reduce) { #boot i, #boot .card { animation: none; } }