:root {
  --bg: #080b08;
  --bg-deep: #050705;
  --fg: #4af626;
  --fg-dim: #2f7d20;
  --fg-bright: #b9ffa8;
  --muted: #6f8a68;
  --accent: #ffb000;
  --link: #7fe7ff;
  --glow: 0 0 6px rgba(74, 246, 38, .45);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
/* `theme amber` swaps the phosphor without touching layout. */
html[data-theme="amber"] {
  --fg: #ffb000; --fg-dim: #9a6a00; --fg-bright: #ffe0a3; --muted: #937a4a;
  --accent: #4af626; --glow: 0 0 6px rgba(255, 176, 0, .45);
}

* { box-sizing: border-box; }
/* The document must never scroll: .screen is the only scroll container. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  background: radial-gradient(120% 90% at 50% 0%, #0d130c 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--fg);
  font: 400 15px/1.65 var(--mono);
  /* JetBrains Mono ligatures rewrite ASCII art: ||---- became |+---. */
  font-variant-ligatures: none;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .5; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(110% 80% at 50% 45%, transparent 40%, rgba(0,0,0,.75) 100%);
}
.scanlines {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.shell {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  width: min(980px, 100%);
  /* --app-h tracks visualViewport so an open mobile keyboard shrinks the
     terminal instead of hiding the prompt underneath itself. */
  height: var(--app-h, 100dvh);
  margin: 0 auto;
  padding: clamp(12px, 3vw, 40px) clamp(14px, 4vw, 40px) 0;
}

.titlebar {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(74, 246, 38, .18);
  color: var(--muted); font-size: 12px; letter-spacing: .04em;
}
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .4; }
.dots i:first-child { background: #ff5f56; opacity: .8; }
.dots i:nth-child(2) { background: #ffbd2e; opacity: .8; }
.dots i:last-child { background: #27c93f; opacity: .8; }
.title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.screen {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) transparent;
  text-shadow: var(--glow);
  overscroll-behavior: contain;
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: var(--fg-dim); border-radius: 8px; }

/* Scroll anchoring fights the pin-to-bottom on every append. */
#out { overflow-anchor: none; }

.line { white-space: pre-wrap; word-break: break-word; min-height: 1.65em; }
.line.dim { color: var(--muted); text-shadow: none; }
.line.bright { color: var(--fg-bright); }
.line.warn { color: var(--accent); }
.line.err { color: #ff6b5e; text-shadow: 0 0 6px rgba(255,107,94,.4); }
/* The wordmark is an inline SVG, so it needs no font metrics at all. */
.line.banner {
  min-height: 0;
  color: var(--fg-bright);
  margin: 2px 0 6px;
  filter: drop-shadow(0 0 7px rgba(74, 246, 38, .4));
}
.line.banner svg { display: block; width: 100%; height: auto; }
html[data-theme="amber"] .line.banner { filter: drop-shadow(0 0 7px rgba(255, 176, 0, .4)); }
/* Hanging indent so a wrapped list comment stays under its entry on mobile. */
.line.sub { padding-left: 6ch; }

.line a { color: var(--link); text-underline-offset: 3px; }
.line a:hover { color: var(--fg-bright); background: rgba(127,231,255,.12); }
.line .k { color: var(--accent); }

.inputline {
  position: relative;
  display: flex; align-items: baseline; flex-wrap: wrap;
  padding-bottom: 8px;
  text-shadow: var(--glow);
}
.prompt { color: var(--fg-dim); margin-right: 8px; white-space: nowrap; }
.prompt b { color: var(--fg); font-weight: 700; }
.prompt em { color: var(--link); font-style: normal; }
.typed { white-space: pre-wrap; word-break: break-all; color: var(--fg-bright); }
.caret {
  display: inline-block; width: .58em; height: 1.05em;
  background: var(--fg); transform: translateY(.18em);
  animation: blink 1.05s steps(1) infinite; box-shadow: var(--glow);
}
.caret.off { animation: none; opacity: .35; }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* The real input is invisible but sits exactly over the prompt line. It must
   stay inside .screen: an absolutely-positioned input parked off-screen escapes
   the scroll container, so the browser scrolls the whole document to reveal it
   on every keystroke and the terminal marches out of view. */
#cmd {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: transparent; caret-color: transparent;
  font: inherit;
}

/* In normal flow, not fixed: a floating bar overlapped the prompt whenever the
   mobile keyboard closed on a long screen. */
.chips {
  flex: 0 0 auto;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.chips a, .chips button {
  font: inherit; font-size: 12px; color: var(--fg-dim);
  background: rgba(74,246,38,.05); border: 1px solid rgba(74,246,38,.2);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  text-decoration: none; transition: color .15s, border-color .15s, background .15s;
}
.chips a:hover, .chips button:hover, .chips a:focus-visible, .chips button:focus-visible {
  color: var(--fg-bright); border-color: var(--fg); background: rgba(74,246,38,.14);
  outline: none; box-shadow: var(--glow);
}

.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;
}

@media (max-width: 560px) {
  body { font-size: 13px; }
  .titlebar .title { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  #rain { display: none; }
  .scanlines { opacity: .18; }
}