:root {
  /* Default: green on black (current behavior) */
  --bg: #000000;
  --fg: #00e676; /* vivid green */
  --fg-dim: #00b248;
  --accent: #00c853;
}

/* Theme: light (dark text on light background) */
body[data-theme="light"] {
  --bg: #f7f7f7;
  --fg: #1f2937; /* slate-800 */
  --fg-dim: #6b7280; /* gray-500 */
  --accent: #2563eb; /* blue-600 */
}

/* Theme: white-on-black (white instead of green text) */
body[data-theme="white"] {
  --bg: #000000;
  --fg: #e5e7eb; /* near-white */
  --fg-dim: #9ca3af; /* gray-400 */
  --accent: #ffffff;
}

/* Theme: Ubuntu-like (dark aubergine bg with orange accents) */
body[data-theme="ubuntu"] {
  --bg: #2c001e; /* Ubuntu aubergine */
  --fg: #e7e7e7; /* light text */
  --fg-dim: #c4b5fd; /* soft lavender for muted */
  --accent: #ff7e00; /* Ubuntu orange */
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Ubuntu Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
}

#terminal {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  min-height: 100%;
  white-space: pre-wrap;
}

.line {
  display: block;
}

.prompt-line {
  display: flex;
  align-items: flex-start; /* align multi-line textarea with prompt */
  gap: 8px;
}

.prompt {
  color: var(--accent);
  flex: 0 0 auto; /* do not let prompt shrink */
}

.input {
  outline: none;
  border: none;
  background: transparent;
  color: var(--fg);
  /* Ensure typing looks exactly like console output */
  font: inherit; /* inherits font-family, font-size, font-weight, etc. */
  line-height: inherit;
  letter-spacing: inherit;
  padding: 0;
  margin: 0;
  caret-color: var(--fg);
  width: 100%;
  resize: none;          /* prevent manual resize handle on textarea */
  overflow: hidden;      /* we'll auto-grow the height */
  box-sizing: border-box;
  white-space: pre-wrap; /* ensure entered text visually wraps like console */
}

.caret {
  display: inline-block;
  width: 8px;
  height: 1.2em;
  background: var(--fg);
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.muted { color: var(--fg-dim); }

.link { color: var(--fg); text-decoration: underline; }

.ascii {
  color: var(--fg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}