:root {
  --bg: #0c0c0c;
  --fg: #d4d4d4;
  --dim: #6a6a6a;
  --green: #4ade80;
  --amber: #d4a72c;
  --red: #f87171;
  --blue: #60a5fa;
  --accent: #c586c0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%; width: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: none;
}

.screen {
  height: 100vh; width: 100vw;
  padding: 10px 12px 12px 12px;
  display: flex; flex-direction: column;
  cursor: text;
  overflow: hidden;
}

.output {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  white-space: pre-wrap; word-break: break-word;
  padding-bottom: 6px;
}
.output::-webkit-scrollbar { width: 8px; }
.output::-webkit-scrollbar-thumb { background: #2a2a2a; }
.output::-webkit-scrollbar-track { background: transparent; }

.output p { white-space: pre-wrap; }
.output .err { color: var(--red); }
.output .ok { color: var(--green); }
.output .dim { color: var(--dim); }
.output .accent { color: var(--accent); }
.output .blue { color: var(--blue); }
.output .amber { color: var(--amber); }
.output .gold { color: var(--amber); }
.output .info { color: var(--blue); }
.output .banner { color: var(--green); }
.output .hr { color: var(--dim); }
.output .pre { white-space: pre; }
.output .echo { white-space: pre; }
.output .echo .p { color: var(--green); }
.output .echo .cmd { color: var(--fg); }

.input-line {
  flex: 0 0 auto;
  display: flex; align-items: baseline; flex-wrap: wrap;
  padding-top: 2px;
  white-space: pre;
}
.prompt { color: var(--green); white-space: pre; }
.cmd, .cmd-text { color: var(--fg); white-space: pre; }
.cursor {
  display: inline-block; width: 8px; height: 1em;
  background: var(--fg); align-self: center; margin-left: 1px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* The real input lies invisibly ON TOP of the rendered prompt line, not parked
   off-screen at left:-9999px. Off-screen hiding made this page measure ~10000px
   wide to anything that walks the DOM and takes element boxes at face value --
   the gallery's mobile layer does exactly that, concluded the page could never
   be made to fit, and re-measured every node several times a second until the
   tab was unusable. Sitting the input where it actually belongs costs nothing
   and also means tapping the prompt raises the keyboard on a phone. */
.input-line { position: relative; }

#cmdInput {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
  font: inherit;
  outline: none;
}