.scope-shell {
  position: relative;
  width: min(100vw, 1280px);
  height: min(100vh, 720px);
  aspect-ratio: 16 / 9;
  overflow: visible;
  background: var(--screen);
  border: 1px solid rgba(138, 255, 170, 0.24);
  box-shadow:
    0 0 42px rgba(60, 255, 116, 0.15),
    inset 0 0 72px rgba(0, 0, 0, 0.9);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--screen);
  filter: contrast(1.08) saturate(1.18);
}

.bezel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 56%, rgba(0, 0, 0, 0.42) 100%);
  background-size: 100% 100%;
  mix-blend-mode: screen;
}

.bezel::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 18px solid rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 0 86px rgba(0, 0, 0, 0.9);
}

@media (max-width: 720px) {
  body {
    align-items: start;
  }

  .scope-shell {
    width: 100vw;
    height: auto;
    margin-top: 10vh;
  }
}