/* ---------------------------------------------------------------- bouncing ball */

:root {
  --accent: #ff9800;
}
.art-col {
  flex: 1 1 640px;
}
.art-wrap,
#bb-graph {
  border-radius: 4px;
}
.art-wrap {
  aspect-ratio: 3 / 2;
  /* the room: its color, and the color of the meter scale (read by the script) */
  background: #10151f;
  color: #c9d4e3;
}
#bb-graph {
  background: #10151f;
}
html[data-theme="light"] #bb-graph,
html[data-theme="light"] .art-wrap {
  background: #f1f4f9;
  color: #1a212d;
}
html[data-theme="evol-blue"] #bb-graph,
html[data-theme="evol-blue"] .art-wrap {
  background: #0277bd;
  color: white;
}
.art-wrap canvas {
  cursor: pointer;
}
.art-wrap canvas.grabbing {
  cursor: grabbing;
}
#bb-graph {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: 10px;
}
#bb-stats {
  margin: 4px 0 0;
  font-size: 0.85em;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
#bb-stats b {
  font-weight: 600;
}
.art-col .buttons {
  margin: 18px 0 20px;
}
.controls .checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}