:root {
  --bg: #0b0f10;
  --bg-alt: #0f1417;
  --fg: #e6f1ff;
  --muted: #8da1b9;
  --accent: #46d160;
  --accent-2: #64b5f6;
  --error: #ff6b6b;
  --yellow: #ffd166;
  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html[data-theme='light'] {
  --bg: #f7fafc;
  --bg-alt: #ffffff;
  --fg: #0b1a22;
  --muted: #5b7186;
  --accent: #0ea5e9;
  --accent-2: #1e40af;
  --error: #dc2626;
  --yellow: #a16207;
}

html[data-theme='matrix'] {
  --bg: #000000;
  --bg-alt: #020202;
  --fg: #d1ffcf;
  --muted: #6dd66a;
  --accent: #00ff88;
  --accent-2: #00ffc3;
  --error: #ff5c5c;
  --yellow: #b8ff5a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 10% -20%, #0e1316 10%, transparent 60%),
              radial-gradient(1000px 800px at 110% 120%, #0a0e10 10%, transparent 60%),
              var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  padding: 0;
}

.terminal {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.window-chrome { display: none; }
.window-chrome .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.window-chrome .red { background: #ff5f56; }
.window-chrome .yellow { background: #ffbd2e; }
.window-chrome .green { background: #27c93f; }
.window-chrome .title { color: var(--muted); margin-left: 6px; font-size: 12px; }

.screen {
  flex: 1;
  padding: clamp(16px, 3vh, 36px) clamp(16px, 4vw, 48px) calc(88px + env(safe-area-inset-bottom));
  overflow: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.screen::-webkit-scrollbar { height: 10px; width: 10px; }
.screen::-webkit-scrollbar-thumb { background: #12212a; border-radius: 10px; }

.prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(16px, 4vw, 48px);
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(15, 20, 23, 0.95), rgba(11, 15, 16, 0.98));
  backdrop-filter: blur(8px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.ps1 { color: var(--accent); white-space: pre; }
.prompt-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  line-height: 1.6;
  padding: 4px 0;
}

.line { white-space: pre; word-break: normal; }
.ascii-name { font-size: clamp(10px, 1.2vw, 16px); line-height: 1.1; color: #fbcb0a; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.error { color: var(--error); }
.yellow { color: var(--yellow); }

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

.grid {
  display: grid;
  gap: 6px 18px;
  grid-template-columns: 160px 1fr;
}

.badge { display: inline-block; padding: 2px 8px; border: 1px solid #17313f; border-radius: 999px; color: var(--accent-2); }
.kbd { border: 1px solid #17313f; border-bottom-width: 2px; padding: 0 6px; border-radius: 6px; color: var(--muted); background: #0c1317; }

.blink { animation: blink 1.1s steps(1,end) infinite; }
@keyframes blink { 50% { opacity: 0.1; } }

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .terminal { height: 100dvh; }
  .ascii-name { font-size: clamp(8px, 3.4vw, 12px); }
  .screen { padding: 16px clamp(14px, 5vw, 22px) calc(96px + env(safe-area-inset-bottom)) clamp(14px, 5vw, 22px); }
  .prompt { padding: 12px clamp(14px, 5vw, 22px); }
  .line { white-space: pre-wrap; word-break: break-word; }
}