:root {
  color-scheme: dark;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  background: #05070c;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, #222839 0, #090c14 48%, #030407 100%);
}

body {
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.stage {
  position: relative;
  width: min(100%, calc((100vh - 24px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(204, 179, 125, 0.34);
  border-radius: 10px;
  background: #080b12;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}

video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

noscript {
  color: #eee4d1;
}

@media (max-width: 720px) and (orientation: portrait) {
  body {
    padding: 0;
    background: #030407;
  }

  .stage {
    width: 100vw;
    border: 0;
    border-radius: 0;
  }
}