html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #7bd7f6;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.shell {
  align-items: center;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .82), transparent 16rem),
    linear-gradient(180deg, #7dd8fb 0%, #b8ecff 48%, #d8f5c2 100%);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

canvas {
  display: block;
  height: min(100vh, calc(100vw * 16 / 9));
  max-height: 100vh;
  max-width: 100vw;
  touch-action: none;
  width: min(100vw, calc(100vh * 9 / 16));
}