#words {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: filter 1s ease, mix-blend-mode 1s ease;
}

#greeting {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(72px, 12vw, 128px);
  line-height: 1;
}

#greeting[hidden] { display: none; }
body.greeting-active #words,
body.greeting-active .overlay,
body.greeting-active .frame,
body.greeting-active #cursor { visibility: hidden; }
body.greeting-active .controls { pointer-events: none; }

#art {
  transition: filter 1.15s ease;
}

body.matrix-mode main {
  background: #000;
}

body.matrix-mode #art {
  filter: grayscale(1) sepia(1) hue-rotate(72deg) saturate(8) brightness(.24) contrast(2.2);
}

body.matrix-mode #words {
  mix-blend-mode: normal;
  filter: grayscale(1) sepia(1) hue-rotate(72deg) saturate(9) contrast(1.35);
}

body.box-mode #art {
  filter: saturate(.58) brightness(.42) contrast(1.35);
}

body.box-mode #words {
  mix-blend-mode: normal;
}