/* Global Thermonuclear War: a terminal, then its choices, then the moral.
   The terminal is dark whatever the theme: the machine does not do light
   mode. Recursive, the site's face, is already monospace. */
.gtw { display: grid; gap: 12px; justify-items: start; width: 100%; }
.gtw-term {
  width: min(40rem, 100%); padding: 1rem 1.1rem; border-radius: var(--radius);
  background: #0b1a11; color: #8ff0a4; border: 2px solid #1f4a2d;
  letter-spacing: 0.02em; line-height: 1.5;
}
.gtw-line { margin: 0 0 0.3rem; }
.gtw-line:last-child { margin-bottom: 0; }
/* What you pressed, echoed under the machine's line. */
.gtw-you { color: #e9e4c4; }
.gtw-choices { margin-top: 0; }
.gtw-moral { font-style: italic; }

/* A line the page just saw arrive is typed out, word by word and not by
   width, because a line wraps. `--at` is where in the newest step the line
   starts and `--c` where the word starts in it, both in characters, so
   the words come in order at about 40 a second. Only `gn-news` types: a
   page that opened on the transcript (or a reload) shows it at once, and
   `--played` carries a re-render on from where the typing was. */
@media (prefers-reduced-motion: no-preference) {
  .gtw.gn-news .gtw-line.new:not(.gtw-you) .w {
    animation: gtw-type 0.01s step-end calc(0.25s + (var(--at) + var(--c)) * 0.025s - var(--played, 0s)) backwards;
  }
  /* Then the choices, once the question is out. */
  .gtw.gn-news .gtw-choices {
    animation: gtw-type 0.01s step-end calc(0.45s + var(--at) * 0.025s - var(--played, 0s)) backwards;
  }
}
@keyframes gtw-type { from { opacity: 0; } to { opacity: 1; } }