:root { color-scheme: light dark; --bg: #e6e6e6; --fg: #3c3c3c; --dim: #6b6b6b; --accent: #2b579a; --track: #cfcfcf; }
@media (prefers-color-scheme: dark) { :root { --bg: #1f1f1f; --fg: #e0e0e0; --dim: #a0a0a0; --accent: #6ea0e8; --track: #444; } }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
#verso_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#verso_loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--fg); font: 14px system-ui, sans-serif; text-align: center; padding: 0 24px; background: var(--bg); }
#verso_status { max-width: 460px; line-height: 1.4; }
.spin { width: 28px; height: 28px; border: 3px solid var(--track); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
#verso_bar { width: 220px; height: 4px; background: var(--track); border-radius: 2px; overflow: hidden; }
#verso_bar[hidden] { display: none; }
#verso_fill { width: 0; height: 100%; background: var(--accent); }
#verso_loading.failed .spin { display: none; }
#verso_loading.failed #verso_status { color: var(--fg); font-size: 15px; }
.nojs { position: absolute; top: 40%; width: 100%; text-align: center; color: var(--fg); font: 15px system-ui, sans-serif; }