* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0a0a0f;
  color: #cbd0e0;
  font-family: "Menlo", "D2Coding", "Consolas", ui-monospace, monospace;
  overflow: hidden;
}
body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
}
#stage {
  width: min(100vw, calc((100vh - 60px) * 16 / 9));
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px #23263a, 0 20px 60px rgba(0,0,0,.8);
  border-radius: 4px;
  overflow: hidden;
}
canvas {
  display: block;
  width: 100%; height: 100%;
  background: #06060a;
  cursor: none;
}
#legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 12px; letter-spacing: .3px;
  color: #5c6280;
  user-select: none;
}
#legend b { color: #9aa2c8; }