:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #020204;
  color: #f8f0d0;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #000 0 9%, rgb(0 0 0 / 0%) 18%),
    radial-gradient(ellipse at 50% 50%, rgb(255 190 64 / 22%), transparent 36%),
    radial-gradient(circle at 22% 18%, rgb(70 180 255 / 14%), transparent 30%),
    radial-gradient(circle at 82% 72%, rgb(255 60 165 / 12%), transparent 34%),
    #020204;
}

.stage {
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  place-items: stretch;
  position: relative;
}

.stage::before,
.stage::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.stage::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgb(255 255 255 / 5%) 42px 43px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgb(255 255 255 / 4%) 34px 35px);
  mix-blend-mode: screen;
  opacity: 0.2;
}

.stage::after {
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0%) 0 5px, rgb(0 0 0 / 34%) 5px 7px),
    radial-gradient(circle at center, transparent 0 44%, rgb(0 0 0 / 70%) 100%);
}

#ansiScreen {
  align-self: stretch;
  color: #ffc85a;
  font-family: "Cascadia Mono", "Lucida Console", "Courier New", ui-monospace, monospace;
  font-size: clamp(8px, 1.02vw, 15px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.88;
  margin: 0;
  overflow: hidden;
  padding: 8px;
  text-shadow:
    0 0 4px rgb(255 215 120 / 80%),
    0 0 18px rgb(255 112 36 / 62%),
    0 0 42px rgb(78 186 255 / 24%);
  transform: scale(1.025);
  white-space: pre;
  z-index: 0;
}

@media (max-width: 760px) {
  #ansiScreen {
    font-size: clamp(7px, 2.05vw, 11px);
    padding: 6px;
  }
}