:root {
  color-scheme: dark;
  --terminal-bg: #050505;
  --terminal-fg: #f2f2f2;
  --terminal-muted: #888;
  --terminal-dim: #626262;
  --terminal-red: #ff5f5f;
  --terminal-blue: #5f87ff;
  --terminal-cyan: #87dfff;
  --terminal-magenta: #ff87ff;
  --terminal-green: #87ff87;
  --terminal-yellow: #ffd75f;
  --terminal-white: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--terminal-bg);
}

body {
  overflow: hidden;
  color: var(--terminal-fg);
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1.35;
}

.terminal {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 20px 32px;
  background: var(--terminal-bg);
}

.terminal-output {
  min-height: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.terminal-line,
.terminal-input-line {
  min-height: 1.35em;
  white-space: pre-wrap;
}

.terminal-choice {
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
}

.terminal-choice:hover,
.terminal-choice:focus-visible {
  background: #1a1a1a;
  color: var(--terminal-white);
  outline: 0;
}

.terminal-choice:hover *,
.terminal-choice:focus-visible * {
  color: inherit;
}

.terminal-choice:active {
  background: #303030;
}

.terminal-choice-disabled {
  color: var(--terminal-dim);
  cursor: default;
}

.terminal-choice-disabled * {
  color: var(--terminal-dim) !important;
}

.terminal-input-form {
  display: inline;
}

.terminal-prompt {
  color: var(--terminal-cyan);
}

.terminal-inline-choices {
  color: var(--terminal-muted);
}

.terminal-inline-choice {
  color: var(--terminal-yellow);
  cursor: pointer;
}

.terminal-inline-choice:hover,
.terminal-inline-choice:focus-visible {
  background: #1a1a1a;
  color: #ffffff;
  outline: 0;
}

.terminal-input {
  width: min(42ch, calc(100vw - 48px));
  margin: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--terminal-fg);
  caret-color: var(--terminal-fg);
  font: inherit;
}

.terminal-input::selection,
.terminal-line::selection {
  background: #d7d7d7;
  color: #050505;
}

.terminal-logo {
  margin: 0 0 14px;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 0.25em;
  color: var(--terminal-yellow);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(10px, 2vw, 16px);
  font-variant-ligatures: none;
  line-height: 1.22;
  white-space: pre;
}

.red {
  color: var(--terminal-red);
}

.blue {
  color: var(--terminal-blue);
}

.cyan {
  color: var(--terminal-cyan);
}

.magenta {
  color: var(--terminal-magenta);
}

.green {
  color: var(--terminal-green);
}

.yellow {
  color: var(--terminal-yellow);
}

.white {
  color: var(--terminal-white);
}

.dim {
  color: var(--terminal-dim);
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }

  .terminal {
    padding: 14px 12px 28px;
  }

  .terminal-logo {
    font-size: clamp(8px, 2.45vw, 12px);
  }
}