@font-face {
  font-family: 'Meslo Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/resources/meslo-mono-regular.eot");
  src: url("../assets/resources/meslo-mono-regular.eot?#iefix") format('embedded-opentype'),
       url("../assets/resources/meslo-mono-regular.woff2") format('woff2'),
       url("../assets/resources/meslo-mono-regular.ttf") format('truetype'),
       url("../assets/resources/meslo-mono-regular.svg#MesloMono") format('svg');
}
@font-face {
  font-family: 'Meslo Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/resources/meslo-mono-italic.eot");
  src: url("../assets/resources/meslo-mono-italic.eot?#iefix") format('embedded-opentype'),
       url("../assets/resources/meslo-mono-italic.woff2") format('woff2'),
       url("../assets/resources/meslo-mono-italic.ttf") format('truetype'),
       url("../assets/resources/meslo-mono-italic.svg#MesloMono") format('svg');
}
@font-face {
  font-family: 'Meslo Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/resources/meslo-mono-bold.eot");
  src: url("../assets/resources/meslo-mono-bold.eot?#iefix") format('embedded-opentype'),
       url("../assets/resources/meslo-mono-bold.woff2") format('woff2'),
       url("../assets/resources/meslo-mono-bold.ttf") format('truetype'),
       url("../assets/resources/meslo-mono-bold.svg#MesloMono") format('svg');
}
@font-face {
  font-family: 'Meslo Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/resources/meslo-mono-bold italic.eot");
  src: url("../assets/resources/meslo-mono-bold italic.eot?#iefix") format('embedded-opentype'),
       url("../assets/resources/meslo-mono-bold italic.woff2") format('woff2'),
       url("../assets/resources/meslo-mono-bold italic.ttf") format('truetype'),
       url("../assets/resources/meslo-mono-bold italic.svg#MesloMono") format('svg');
}

:root {
  --bg: #0a0705;
  --phos: #ffb347;
  --phos-dim: #8a5e2a;
  --phos-hot: #ffdba0;
  --amber-deep: #ff6a1a;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--bg);
  color: var(--phos);
  font-family: "Meslo Mono", "Courier New", Courier, monospace;
  overflow: hidden;
  cursor: crosshair;
}
.stage {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(ellipse at 50% 55%, #13100b 0%, #07050300 70%), #07050350;
}
.layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
#visualization::before {
  content: '';
  pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(to bottom,
    rgba(255,179,71,0.0) 0, rgba(255,179,71,0.02) 0.0625rem,
    rgba(255,179,71,0.0) 0.125rem, rgba(255,179,71,0.0) 0.1875rem);
}
#visualization::after {
  content: '';
  pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 6;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, #000 120%);
}
.noscript-message {
  position: fixed; z-index: 10000;
  bottom: 0.75rem; left: 0.75rem;
  font: 0.8125rem/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
  color: #999; background: rgba(255,255,255,0.9);
  padding: 0.375rem 0.75rem; border-radius: 0.375rem;
  box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.08);
}
.parameters {
  position: fixed; z-index: 15;
  top: 1.375rem; right: 1.5rem;
  font-size: 0.625rem; letter-spacing: 0.18em;
  color: rgba(255,179,71,0.4);
  pointer-events: none; text-align: right;
}