/* The delta-robot demo's frame (/demo/delta, static/js/delta-frame.js): the Godot canvas fills it; a small loading
   overlay until the engine is up. The colours match the scene's studio (sim/delta/scripts/cell.gd set_theme). */
:root {
  --df-bg: #edeef0;
  --df-fg: #3a3f47;
  --df-muted: #7b818a;
  --df-track: rgba(0, 0, 0, 0.08);
  --df-accent: #3a6fd8;
  color-scheme: light;
}
:root.df-dark {
  --df-bg: #1b1c1f;
  --df-fg: #e3e6ea;
  --df-muted: #8d939c;
  --df-track: rgba(255, 255, 255, 0.1);
  --df-accent: #6f9bff;
  color-scheme: dark;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--df-bg);
  color: var(--df-fg);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#delta-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: pan-y; /* vertical swipes scroll the page; the frame's script turns the rest into orbit and zoom */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
[data-df-status] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  background: var(--df-bg);
  transition: opacity 0.3s;
}
[data-df-status][hidden] {
  display: none;
}
.df-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.df-detail {
  color: var(--df-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
  max-width: 80%;
  text-align: center;
}
.df-bar {
  appearance: none;
  -webkit-appearance: none;
  width: min(220px, 60%);
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--df-track);
  overflow: hidden;
}
.df-bar::-webkit-progress-bar {
  background: var(--df-track);
}
.df-bar::-webkit-progress-value {
  background: var(--df-accent);
  border-radius: 2px;
}
.df-bar::-moz-progress-bar {
  background: var(--df-accent);
  border-radius: 2px;
}
[data-df-status].is-error .df-title {
  color: #c2412d;
}