html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000;
}

/* Centre a 2.35:1 frame: full width with bars above and below, or full height with bars at the sides
   when the window is wider than 2.35:1. */
#root {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 2.35));
  aspect-ratio: 2.35 / 1;
}

.thumbnail .stage {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* Outline and label for the inset side view, which the canvas draws underneath. */
.side-view {
  position: absolute;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.7);
  pointer-events: none;
  font: 12px/1 system-ui, sans-serif;
  color: #fff;
}

.side-view span {
  position: absolute;
  top: 6px;
  left: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}