/* The page around the canvas. Deliberately almost nothing: the application draws everything the
   viewer came for, and it fills the tab. */
html, body { margin: 0; height: 100%; background: #141417; color: #f2f2f4;
  font-family: -apple-system, "Segoe UI", Inter, Roboto, "PingFang SC", sans-serif; }
#out { position: absolute; inset: 0; }

#loading { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
#loading p { margin: 0; }
#loading .hint { color: #8a8b95; font-size: 14px; max-width: 42ch; }

.spinner { width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #2c2c33; border-top-color: #8b7bff; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.failure { position: absolute; inset: 24px; overflow: auto; white-space: pre-wrap;
  color: #ff8a5c; font-size: 13px; }