:root {
  --bg: #0b0d12;
  --bg-2: #11141b;
  --fg: #e6e8ee;
  --muted: #7c8396;
  --line: #232837;
  --accent: #7aa2f7;
  --green: #9ece6a;
  --cyan: #7dcfff;
  --red: #f7768e;
  --yellow: #e0af68;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(122, 162, 247, .16), transparent 60%),
    radial-gradient(800px 500px at 90% 110%, rgba(158, 206, 106, .08), transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 48px);
  padding: 48px 16px;
}

.logo {
  margin: 0;
  font-weight: 800;
  font-size: clamp(48px, 11vw, 120px);
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #aab3c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo .dot { color: var(--accent); -webkit-text-fill-color: var(--accent); }

/* ---------- terminal ---------- */
.term {
  width: min(680px, 100%);
  background: rgba(17, 20, 27, .92);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 14px;
}

.term-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: #161a23;
  border-bottom: 1px solid var(--line);
}
.tl { width: 12px; height: 12px; border-radius: 50%; }
.tl-r { background: #ff5f57; }
.tl-y { background: #febc2e; }
.tl-g { background: #28c840; }
.term-title {
  position: absolute; left: 0; right: 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}

.term-body {
  min-height: 220px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 16px 18px 20px;
  line-height: 1.65;
  outline: none;
  cursor: text;
}
.line { white-space: pre-wrap; word-break: break-word; }
.out-line { color: #c3c8d6; }
.out-line.err { color: var(--red); }
.out-line a { color: var(--cyan); }

.p-arrow { color: var(--green); font-weight: 600; }
.p-dir { color: var(--cyan); font-weight: 600; margin-left: 4px; }
.p-git { color: var(--accent); margin-left: 6px; }
.p-branch { color: var(--red); }
#input { margin-left: 8px; }

.cursor {
  display: inline-block;
  width: .6em;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--fg);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hint { margin: 0; color: var(--muted); font-size: 13px; }
.hint code { font-family: var(--mono); color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}