:root {
  --bg: #000;
  --dim: #8a8a99;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: #000;
  color: #bdb2ff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.55;
}
.term {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}
.banner {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.dim { opacity: .65; margin-bottom: 18px; }
.line { white-space: pre-wrap; word-break: break-word; margin: 2px 0; }
.prompt { font-weight: 700; }
.choices { display: flex; gap: 22px; margin: 4px 0 12px; }
label { cursor: pointer; }
input[type=radio] { accent-color: #ffc6ff; }
input[type=text], input:not([type]) {
  background: #000;
  border: none;
  border-bottom: 1px dashed #bdb2ff;
  color: #caffbf;
  font: inherit;
  letter-spacing: 4px;
  text-transform: uppercase;
  width: 11ch;
  padding: 2px 4px;
  outline: none;
}
input:focus { border-bottom-color: #fdffb6; }
button {
  background: #000;
  border: 1px solid #a0c4ff;
  color: #a0c4ff;
  font: inherit;
  padding: 6px 14px;
  margin-top: 8px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: #ffc6ff; color: #ffc6ff; }
button:disabled { opacity: .5; cursor: wait; }
#out { margin-top: 14px; }
.cursor {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  background: #ffc6ff;
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 520px) {
  body { font-size: 14px; }
  .banner { font-size: 17px; }
}