.list { width: 100%; height: 100%; margin: 0; padding: 10px 16px; list-style: none; font: 30px/1.05 "VT323", monospace; text-transform: uppercase; color: #3fb7ff; overflow: hidden; align-self: start; }
.list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list li.on { color: #fff27a; text-shadow: 0 0 6px rgba(255,242,122,.6); }
.none { color: #fff27a; }
.info { width: 100%; height: 100%; margin: 0; padding: 10px 16px; font: 28px/1.1 "VT323", monospace; color: #c9d4de; align-self: start; }
.crt { width: 100%; height: 100%; padding: 26px 34px; font: 32px/1.15 "VT323", monospace; color: #54ff6e; text-shadow: 0 0 6px rgba(84,255,110,.65); align-self: start; }
.crt p { margin: 0 0 14px; }
.crt .t { color: #b8ffc4; }
.cur { animation: cur 1s steps(2) infinite; } @keyframes cur { 50% { opacity: 0; } }
body.flip .crt { animation: type .5s steps(10); } @keyframes type { from { clip-path: inset(0 0 100% 0); } }

/* Reading a document on the tube (X): its text types down the screen and
   the D-pad scrolls it; back returns to the list. */
.doc { position: absolute; inset: 0; padding: 22px 34px 90px; overflow-y: auto; scrollbar-width: none; pointer-events: auto;
  font: 28px/1.2 "VT323", monospace; color: #54ff6e; text-shadow: 0 0 6px rgba(84,255,110,.65); }
.doc::-webkit-scrollbar { display: none; }
.doc h1, .doc h2, .doc h3 { margin: 0 0 12px; font: inherit; font-size: 1.15em; color: #b8ffc4; text-transform: uppercase; }
.doc p, .doc ul, .doc ol, .doc pre, .doc blockquote { margin: 0 0 14px; }
.doc a { color: #b8ffc4; }
.doc img, .doc video { max-width: 100%; height: auto; filter: grayscale(1) sepia(1) hue-rotate(60deg) saturate(2.5) brightness(.9); }
.doc pre, .doc code { font: inherit; white-space: pre-wrap; }
.doc .end { color: #b8ffc4; }
body.reading .crt { display: none; }
body.reading .doc { animation: roll .6s steps(12); }
@keyframes roll { from { clip-path: inset(0 0 100% 0); } }