:root {
  --bg-ink: #070d17;
  --bg-shadow: #150d1b;
  --glow-cyan: #33e8ff;
  --glow-gold: #ffd86b;
  --frame: #4f355f;
  --frame-shadow: rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(98, 44, 116, 0.42), transparent 38%),
    radial-gradient(circle at 20% 80%, rgba(12, 127, 148, 0.24), transparent 30%),
    linear-gradient(180deg, var(--bg-shadow), var(--bg-ink));
  color: #f8f2ff;
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.shell {
  width: min(94vw, 1400px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 2rem;
}

canvas {
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  display: block;
  image-rendering: pixelated;
  border-radius: 14px;
  border: 4px solid rgba(141, 93, 176, 0.85);
  box-shadow:
    0 30px 60px var(--frame-shadow),
    0 0 40px rgba(51, 232, 255, 0.08),
    inset 0 0 20px rgba(255, 255, 255, 0.06);
  background: #05070c;
}