/* ---------- Tokens ---------- */
:root {
  /* Warm paper light theme */
  --paper:        oklch(0.972 0.012 75);
  --paper-2:      oklch(0.948 0.014 75);
  --paper-3:      oklch(0.92 0.016 75);
  --paper-edge:   oklch(0.86 0.018 75);
  --ink:          oklch(0.20 0.012 60);
  --ink-2:        oklch(0.36 0.012 60);
  --ink-3:        oklch(0.55 0.012 60);
  --ink-4:        oklch(0.72 0.012 60);

  /* Accent — mossy "sprite" green w/ spirit-blue companion */
  --accent:       oklch(0.58 0.14 165);
  --accent-2:     oklch(0.55 0.14 220); /* spirit blue */
  --accent-soft:  oklch(0.93 0.045 165);
  --glow:         oklch(0.78 0.18 165); /* phosphorescent highlight */

  --term-bg:      oklch(0.18 0.012 60);
  --term-fg:      oklch(0.95 0.008 75);
  --term-dim:     oklch(0.65 0.01 75);
  --term-accent:  oklch(0.78 0.16 165);

  --shadow-sm: 0 1px 0 rgba(28,24,18,0.04), 0 1px 2px rgba(28,24,18,0.04);
  --shadow-md: 0 1px 0 rgba(28,24,18,0.04), 0 6px 24px -8px rgba(28,24,18,0.12);
  --shadow-lg: 0 1px 0 rgba(28,24,18,0.05), 0 24px 60px -20px rgba(28,24,18,0.22);

  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;

  --t-fast: 120ms cubic-bezier(.2,.7,.2,1);
  --t-med:  220ms cubic-bezier(.2,.7,.2,1);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Fraunces", "Geist", ui-serif, Georgia, serif;
}

/* Accent palette swaps — Sprite themes */
:root[data-accent="moss"] {
  --accent:      oklch(0.58 0.14 165);
  --accent-2:    oklch(0.55 0.14 220);
  --accent-soft: oklch(0.93 0.045 165);
  --glow:        oklch(0.78 0.18 165);
}
:root[data-accent="tide"] {
  --accent:      oklch(0.55 0.14 220);
  --accent-2:    oklch(0.58 0.14 165);
  --accent-soft: oklch(0.92 0.045 220);
  --glow:        oklch(0.80 0.16 215);
}
:root[data-accent="ember"] {
  --accent:      oklch(0.62 0.16 35);
  --accent-2:    oklch(0.50 0.14 320);
  --accent-soft: oklch(0.94 0.04 40);
  --glow:        oklch(0.80 0.18 60);
}
:root[data-accent="dusk"] {
  --accent:      oklch(0.50 0.16 295);
  --accent-2:    oklch(0.55 0.14 220);
  --accent-soft: oklch(0.93 0.045 295);
  --glow:        oklch(0.78 0.16 290);
}

/* Dark theme */
:root[data-theme="dark"] {
  --paper:        oklch(0.16 0.008 60);
  --paper-2:      oklch(0.20 0.008 60);
  --paper-3:      oklch(0.235 0.008 60);
  --paper-edge:   oklch(0.30 0.008 60);
  --ink:          oklch(0.96 0.008 75);
  --ink-2:        oklch(0.82 0.008 75);
  --ink-3:        oklch(0.62 0.008 75);
  --ink-4:        oklch(0.45 0.008 75);
  --accent-soft:  color-mix(in oklch, var(--accent) 22%, transparent);
  --term-bg:      oklch(0.12 0.008 60);
  --shadow-md: 0 1px 0 rgba(0,0,0,0.4), 0 8px 32px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 1px 0 rgba(0,0,0,0.4), 0 24px 60px -20px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: var(--paper);
}

/* Moss aurora bloom — pinned to the viewport via a fixed pseudo-element so
   the tint always fills the full screen regardless of document height.
   `background-attachment: fixed` is unreliable when the body has
   `overflow-x: hidden`, so we render the gradients on a dedicated layer. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% -8%, color-mix(in oklch, var(--accent-2) 16%, transparent), transparent 62%),
    radial-gradient(1100px 600px at -6% 18%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 65%),
    radial-gradient(700px 420px at 60% 110%, color-mix(in oklch, var(--glow) 11%, transparent), transparent 60%);
}

/* ---------- Background ornaments (the "forest" the sprite lives in) ---------- */
/* Constellation grid + drifting motes — sit BEHIND the app frame, full-viewport */
.bg-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-canvas svg { display: block; width: 100%; height: 100%; }

/* ---------- Runic landscape (margin-only) ---------- */
/* Lives in the negative space around the .window frame. A warm golden
   god-ray bloom centered behind the frame, with stylized stone monoliths
   carved with runes flanking left/right, and vine/leaf tendrils draping
   from the top corners + creeping up from the bottom. */
.bg-runic {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Warm golden atmospheric wash — radiates from behind the window's top */
.bg-runic::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20%;
  width: 100vw;
  height: 100vh;
  transform: translateX(-50%);
  background:
    radial-gradient(50% 60% at 50% 30%,
      oklch(0.92 0.13 95 / 0.42),
      oklch(0.85 0.16 85 / 0.18) 35%,
      transparent 70%),
    radial-gradient(70% 90% at 50% 0%,
      oklch(0.88 0.14 90 / 0.28),
      transparent 60%);
  filter: blur(2px);
}
:root[data-theme="dark"] .bg-runic::before {
  background:
    radial-gradient(50% 60% at 50% 30%,
      oklch(0.78 0.16 90 / 0.28),
      oklch(0.65 0.18 80 / 0.14) 35%,
      transparent 70%),
    radial-gradient(70% 90% at 50% 0%,
      oklch(0.70 0.16 85 / 0.22),
      transparent 60%);
}

/* God-ray streaks — diagonal slivers of warm light coming down */
.bg-runic::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 110vh;
  background:
    linear-gradient(168deg, transparent 0 38%, oklch(0.95 0.13 95 / 0.10) 39%, transparent 41%),
    linear-gradient(176deg, transparent 0 47%, oklch(0.95 0.14 92 / 0.08) 48%, transparent 50%),
    linear-gradient(184deg, transparent 0 55%, oklch(0.95 0.13 95 / 0.10) 56%, transparent 58%),
    linear-gradient(192deg, transparent 0 63%, oklch(0.95 0.14 92 / 0.07) 64%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0.7;
}
:root[data-theme="dark"] .bg-runic::after { opacity: 0.5; }

/* Monolith/obelisk SVG holders — pinned to left + right margins */
.bg-monolith {
  position: absolute;
  bottom: 0;
  width: 14vw;
  min-width: 140px;
  max-width: 240px;
  height: 78vh;
  opacity: 0.92;
}
.bg-monolith.left  { left: 0; }
.bg-monolith.right { right: 0; transform: scaleX(-1); }
.bg-monolith svg { width: 100%; height: 100%; display: block; }

/* Vine drapes — top corners. Extend slightly above the viewport so the
   leaves read as cascading down INTO frame, not stopping at a hard edge. */
.bg-vine {
  position: absolute;
  top: -40px;
  width: 28vw;
  min-width: 220px;
  max-width: 420px;
  height: 60vh;
  opacity: 0.9;
}
.bg-vine.left  { left: 0; }
.bg-vine.right { right: 0; transform: scaleX(-1); }
.bg-vine svg { width: 100%; height: 100%; display: block; }

/* Floor moss/undergrowth — creeps up from the bottom edges */
.bg-undergrowth {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22vh;
  background:
    radial-gradient(40% 100% at 12% 100%, oklch(0.55 0.13 145 / 0.35), transparent 70%),
    radial-gradient(40% 100% at 88% 100%, oklch(0.55 0.13 145 / 0.35), transparent 70%),
    radial-gradient(60% 100% at 50% 110%, oklch(0.50 0.10 145 / 0.18), transparent 65%);
  filter: blur(1px);
}
:root[data-theme="dark"] .bg-undergrowth {
  background:
    radial-gradient(40% 100% at 12% 100%, oklch(0.40 0.12 145 / 0.55), transparent 70%),
    radial-gradient(40% 100% at 88% 100%, oklch(0.40 0.12 145 / 0.55), transparent 70%),
    radial-gradient(60% 100% at 50% 110%, oklch(0.32 0.08 145 / 0.4), transparent 65%);
}

/* Firefly motes — extra sparks drifting in the god-rays */
.bg-runic .firefly {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: oklch(0.95 0.14 90);
  box-shadow:
    0 0 6px oklch(0.92 0.16 90 / 0.9),
    0 0 16px oklch(0.88 0.18 85 / 0.5);
  opacity: 0.85;
  animation: firefly-drift 14s ease-in-out infinite;
}
.bg-runic .firefly.f2 { width: 3px; height: 3px; animation-duration: 22s; animation-delay: -5s; opacity: 0.7; }
.bg-runic .firefly.f3 { width: 5px; height: 5px; animation-duration: 28s; animation-delay: -11s; opacity: 0.6; }
.bg-runic .firefly.f4 { width: 2.5px; height: 2.5px; animation-duration: 18s; animation-delay: -3s; opacity: 0.8; }
.bg-runic .firefly.f5 { width: 3.5px; height: 3.5px; animation-duration: 24s; animation-delay: -15s; opacity: 0.75; }

@keyframes firefly-drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(2vw, -8vh) scale(1.2); }
  50%  { transform: translate(-1vw, -14vh) scale(0.85); }
  75%  { transform: translate(1.5vw, -6vh) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Hide heavier ornaments on small screens — they crowd the content */
@media (max-width: 900px) {
  .bg-monolith, .bg-vine { display: none; }
  .bg-undergrowth { height: 14vh; opacity: 0.7; }
}

/* faint runic glyph row — file-syntax characters scattered like a margin */
.bg-glyphs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  font-family: var(--font-mono);
  color: color-mix(in oklch, var(--accent) 22%, transparent);
  opacity: 0.55;
}
:root[data-theme="dark"] .bg-glyphs { color: color-mix(in oklch, var(--glow) 24%, transparent); opacity: 0.32; }
.bg-glyphs span {
  position: absolute;
  font-size: 13px;
  letter-spacing: 0.18em;
  user-select: none;
}

/* drifting mote — a single sprite trail */
.sprite-mote {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow:
    0 0 8px var(--glow),
    0 0 22px color-mix(in oklch, var(--glow) 70%, transparent),
    0 0 48px color-mix(in oklch, var(--glow) 30%, transparent);
  animation: mote-drift 18s ease-in-out infinite;
}
.sprite-mote.m2 { animation-duration: 26s; animation-delay: -7s; opacity: 0.7; }
.sprite-mote.m3 { animation-duration: 32s; animation-delay: -13s; opacity: 0.55; width: 4px; height: 4px; }

@keyframes mote-drift {
  0%   { transform: translate(8vw, 82vh) scale(1);   }
  20%  { transform: translate(22vw, 38vh) scale(1.2); }
  40%  { transform: translate(48vw, 64vh) scale(0.9); }
  60%  { transform: translate(74vw, 28vh) scale(1.1); }
  80%  { transform: translate(92vw, 70vh) scale(1);   }
  100% { transform: translate(8vw, 82vh) scale(1);   }
}

/* ensure the app frame sits above the bg layers */
.app-frame { position: relative; z-index: 1; }

/* ---------- App shell ---------- */
.app-frame {
  max-width: 1440px;
  margin: 28px auto;
  padding: 0 28px 64px;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  position: relative;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 0.5px rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.brand-mark svg { display: block; position: relative; z-index: 1; }
.brand-mark::after {
  /* subtle gloss highlight */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 30% 20%, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.brand-name em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.brand-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  padding: 4px 8px;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  background: var(--paper-2);
}

.brand-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.brand-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.7 0.16 145); box-shadow: 0 0 0 3px color-mix(in oklch, oklch(0.7 0.16 145) 22%, transparent); }

/* Window chrome */
.window {
  background: var(--paper-2);
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-rows: auto 1fr;
  height: calc(100vh - 140px);
  min-height: 720px;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(to bottom, var(--paper-2), color-mix(in oklch, var(--paper-2) 92%, var(--paper-3)));
  border-bottom: 1px solid var(--paper-edge);
  position: relative;
}
.traffic { display: flex; gap: 8px; }
.traffic span {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.15);
}
.traffic .r { background: #ff5f57; }
.traffic .y { background: #febc2e; }
.traffic .g { background: #28c840; }

.titlebar-path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  padding: 5px 12px;
  border-radius: 6px;
  flex: 1;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.titlebar-path .crumb { color: var(--ink-3); }
.titlebar-path .crumb.active { color: var(--ink); }
.titlebar-path .sep { color: var(--ink-4); }

.titlebar-actions {
  display: flex;
  gap: 8px;
}
.titlebar-actions .icon-btn {
  width: 26px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.titlebar-actions .icon-btn:hover { background: var(--paper-3); border-color: var(--paper-edge); }

/* ---------- Body grid: sidebar | main ---------- */
.body-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 0;
  overflow: hidden;
}
.body-grid.right {
  grid-template-columns: 1fr 260px;
}
.body-grid.right .sidebar { order: 2; border-left: 1px solid var(--paper-edge); border-right: 0; }
.body-grid.right .main-col { order: 1; }
.body-grid.hidden { grid-template-columns: 0 1fr; }
.body-grid.hidden .sidebar { display: none; }

/* Sidebar */
.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--paper-edge);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sb-section {
  padding: 14px 12px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sb-tree {
  padding: 2px 8px 12px;
  font-size: 13.5px;
  flex: 1;
}
.sb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.sb-row:hover { background: var(--paper-2); color: var(--ink); }
.sb-row.active { background: var(--accent-soft); color: var(--ink); }
.sb-row.active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px;
  background: var(--accent); border-radius: 2px;
}
.sb-row .chev {
  width: 14px; height: 14px;
  display: inline-grid; place-items: center;
  color: var(--ink-4);
  flex: none;
  transition: transform var(--t-fast);
}
.sb-row.open .chev { transform: rotate(90deg); }
.sb-row .leaf { width: 14px; flex: none; }
.sb-row .ico {
  width: 16px; height: 16px;
  flex: none;
  color: var(--ink-3);
}
.sb-row.active .ico { color: var(--accent); }
.sb-row .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row .meta { color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; }
.sb-children { padding-left: 14px; border-left: 1px dashed var(--paper-edge); margin-left: 10px; }

.sb-foot {
  border-top: 1px solid var(--paper-edge);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  display: grid;
  gap: 6px;
}
.sb-foot .row { display: flex; justify-content: space-between; }
.sb-foot .key { color: var(--ink-4); }

/* Main */
.main-col {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

/* Tab bar */
.tabs {
  display: flex;
  align-items: stretch;
  background: var(--paper-2);
  border-bottom: 1px solid var(--paper-edge);
  height: 38px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  border-right: 1px solid var(--paper-edge);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-3);
  background: transparent;
  position: relative;
  min-width: 140px;
  max-width: 220px;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab .ico { width: 14px; height: 14px; color: var(--ink-4); flex: none; }
.tab .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tab .x {
  width: 16px; height: 16px;
  border-radius: 4px;
  display: grid; place-items: center;
  color: var(--ink-4);
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.tab:hover .x { opacity: 1; }
.tab .x:hover { background: var(--paper-3); color: var(--ink); }
.tab:hover { background: var(--paper); color: var(--ink-2); }
.tab.active {
  background: var(--paper);
  color: var(--ink);
}
.tab.active .ico { color: var(--accent); }
.tab.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
}

.tabs-tail {
  flex: 1;
  border-bottom: 1px solid var(--paper-edge);
  background: var(--paper-2);
}

/* Content */
.content {
  background: var(--paper);
  overflow-y: auto;
  min-height: 0;
  scroll-behavior: smooth;
}
.content-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 56px 80px;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent);
}
h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  text-wrap: balance;
}
h1.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}
h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  margin: 28px 0 8px;
}
.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}
p { margin: 0 0 14px; color: var(--ink-2); text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }

/* Hero */
.hero {
  display: grid;
  gap: 28px;
  margin-bottom: 48px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.btn .ico { width: 14px; height: 14px; }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { transform: translateY(-1px); background: var(--accent); border-color: var(--accent); }
.btn-ghost {
  border-color: var(--paper-edge);
  background: var(--paper-2);
}
.btn-ghost:hover { border-color: var(--ink-3); }

/* Hero install row */
.install-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 0;
}
.cmd-card {
  background: var(--paper-2);
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  padding: 14px 14px 12px;
  position: relative;
  display: grid;
  gap: 6px;
}
.cmd-card .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: flex; justify-content: space-between; align-items: center;
}
.cmd-card .cmd {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 2px;
}
.cmd-card .cmd::-webkit-scrollbar { display: none; }
.cmd-card .cmd .prompt { color: var(--accent); margin-right: 8px; }
.copy-btn {
  border: 1px solid var(--paper-edge);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast);
}
.copy-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.copy-btn.copied { color: oklch(0.55 0.14 145); border-color: oklch(0.55 0.14 145); background: color-mix(in oklch, oklch(0.55 0.14 145) 8%, var(--paper)); }

/* Feature grid */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 28px;
}
.feat {
  border: 1px solid var(--paper-edge);
  background: var(--paper-2);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 6px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.feat:hover { border-color: var(--accent); }
.feat .name {
  font-weight: 600;
  font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.feat .name .ico { width: 14px; height: 14px; color: var(--accent); }
.feat .desc { font-size: 13px; color: var(--ink-2); margin: 0; }

/* Code blocks */
.code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--term-bg);
  color: var(--term-fg);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 10px 0 18px;
  border: 1px solid color-mix(in oklch, var(--term-bg) 70%, var(--paper-edge));
  line-height: 1.65;
}
.code .c-prompt { color: var(--accent); }
.code .c-cmd { color: var(--term-fg); }
.code .c-arg { color: var(--term-accent); }
.code .c-comment { color: var(--term-dim); font-style: italic; }
.code .c-flag { color: oklch(0.78 0.14 75); }
.code .c-out { color: var(--term-dim); }
.code .c-key { color: oklch(0.75 0.13 295); }
.code .c-str { color: oklch(0.78 0.14 130); }
.code .c-num { color: oklch(0.78 0.14 60); }

/* Inline code */
code.inl {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-2);
  border: 1px solid var(--paper-edge);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}

/* Tables / config rows */
.cfg-table {
  display: grid;
  grid-template-columns: 180px 1fr 140px;
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0 24px;
  background: var(--paper-2);
  font-size: 13px;
}
.cfg-table .h, .cfg-table .c {
  padding: 10px 14px;
  border-bottom: 1px solid var(--paper-edge);
}
.cfg-table .h {
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cfg-table .c.k { font-family: var(--font-mono); color: var(--ink); }
.cfg-table .c.d { color: var(--ink-2); }
.cfg-table .c.v { font-family: var(--font-mono); color: var(--accent); font-size: 12px; }
.cfg-table > div:nth-last-child(-n+3) { border-bottom: 0; }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
}
:root[data-theme="dark"] .pill { color: oklch(0.85 0.12 var(--_h, 250)); }

/* Stats row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  background: var(--paper-2);
  overflow: hidden;
  margin: 0 0 32px;
}
.stat {
  padding: 18px 18px 16px;
  border-right: 1px solid var(--paper-edge);
}
.stat:last-child { border-right: 0; }
.stat .n {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat .n em { color: var(--accent); font-style: normal; font-family: var(--font-mono); font-size: 14px; vertical-align: super; margin-left: 4px; }
.stat .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 4px;
}

/* Step list */
.steps { counter-reset: step; display: grid; gap: 14px; margin: 0 0 24px; }
.step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-radius: 999px;
  width: 28px; height: 22px;
  display: grid; place-items: center;
  margin-top: 2px;
}
.step .body strong { display: block; margin-bottom: 4px; }

/* Tip block */
.tip {
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin: 12px 0 18px;
  font-size: 13.5px;
  color: var(--ink);
}
.tip strong { color: var(--accent); }

/* Terminal dock */
.term-dock {
  background: var(--term-bg);
  border-top: 1px solid var(--paper-edge);
  display: grid;
  grid-template-rows: auto auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--term-fg);
}
.term-dock .term-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in oklch, var(--term-bg) 70%, var(--paper-edge));
  font-size: 11px;
  color: var(--term-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.term-dock .term-head .hint { display: flex; gap: 14px; }
.term-dock .term-head kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0;
}
.term-body {
  padding: 10px 14px 14px;
  max-height: 220px;
  overflow-y: auto;
}
.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line.in { color: var(--term-fg); }
.term-line.in .prompt { color: var(--term-accent); }
.term-line.in .prompt .at { color: var(--term-dim); }
.term-line.in .prompt .path { color: oklch(0.78 0.14 75); }
.term-line.out { color: var(--term-dim); }
.term-line.out.match { color: var(--term-fg); }
.term-line.out .hl { color: var(--term-accent); }
.term-line.tab-menu {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  padding: 2px 0;
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
}
.term-line.tab-menu:hover, .term-line.tab-menu.sel {
  background: rgba(255,255,255,0.06);
  color: var(--term-fg);
}
.term-line.tab-menu .idx { color: var(--term-dim); font-size: 11px; text-align: center; }
.term-line.tab-menu .meta { color: var(--term-dim); font-size: 11px; }

.term-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.term-input-row .prompt { color: var(--term-accent); flex: none; }
.term-input-row .prompt .at { color: var(--term-dim); }
.term-input-row .prompt .path { color: oklch(0.78 0.14 75); }
.term-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--term-fg);
  font: inherit;
  caret-color: var(--term-accent);
  padding: 0;
}
.cursor-blink::after {
  content: "▌";
  margin-left: 1px;
  color: var(--term-accent);
  animation: blink 1.05s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Section hr */
.rule {
  border: 0;
  height: 1px;
  background: var(--paper-edge);
  margin: 36px 0;
}

/* Two-col block */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .two-col, .feat-grid, .install-row { grid-template-columns: 1fr; }
  .body-grid { grid-template-columns: 220px 1fr; }
  .body-grid.right { grid-template-columns: 1fr 220px; }
}
@media (max-width: 800px) {
  .app-frame { padding: 0 12px 32px; margin: 12px auto; }
  .window { height: auto; min-height: 0; border-radius: 10px; }
  .body-grid, .body-grid.right { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .content-inner { padding: 32px 22px 56px; }
  .titlebar-path { display: none; }
}

/* Scroll styling */
.content::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .term-body::-webkit-scrollbar { width: 8px; height: 8px; }
.content::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .term-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--ink) 12%, transparent);
  border-radius: 4px;
}
.content::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--ink) 22%, transparent);
}

/* Tab open animation */
@keyframes tabIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab.entering { animation: tabIn 180ms cubic-bezier(.2,.7,.2,1); }

@keyframes contentIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.content-inner { animation: contentIn 220ms cubic-bezier(.2,.7,.2,1); }

/* Selection */
::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); color: var(--ink); }

/* ============================================================ */
/* Animated terminal — "How it feels" demo                       */
/* ============================================================ */

/* Outer frame: corner brackets + accent gradient border + tag */
.anim-term-frame {
  position: relative;
  margin: 28px 0 36px;
  padding: 22px;
  border-radius: 14px;
  background:
    linear-gradient(135deg,
      color-mix(in oklch, var(--accent) 8%, transparent),
      color-mix(in oklch, var(--accent-2) 10%, transparent) 50%,
      color-mix(in oklch, var(--accent) 6%, transparent)
    ),
    var(--paper-2);
  border: 1px dashed color-mix(in oklch, var(--accent) 35%, var(--paper-edge));
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 12%, transparent),
    0 24px 60px -32px color-mix(in oklch, var(--accent-2) 60%, transparent),
    0 1px 0 rgba(255,255,255,0.4) inset;
}
:root[data-theme="dark"] .anim-term-frame {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 22%, transparent),
    0 24px 80px -28px color-mix(in oklch, var(--accent-2) 70%, transparent),
    0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Decorative corner brackets — like terminal selection markers */
.anim-term-frame-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--accent);
  pointer-events: none;
}
.anim-term-frame-corner.tl { top: -1px; left: -1px;  border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.anim-term-frame-corner.tr { top: -1px; right: -1px; border-left: none;  border-bottom: none; border-top-right-radius: 6px; }
.anim-term-frame-corner.bl { bottom: -1px; left: -1px;  border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.anim-term-frame-corner.br { bottom: -1px; right: -1px; border-left: none;  border-top: none; border-bottom-right-radius: 6px; }

/* "LIVE" tag floating on top edge */
.anim-term-frame-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--paper);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, var(--paper-edge));
  border-radius: 999px;
}
.anim-term-frame-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.65 0.2 25);
  box-shadow: 0 0 0 3px color-mix(in oklch, oklch(0.65 0.2 25) 25%, transparent);
  animation: anim-term-pulse 1.6s ease-in-out infinite;
}
@keyframes anim-term-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* The terminal itself — sits inside the frame */
.anim-term {
  position: relative;
  border-radius: 9px;
  background: var(--term-bg, oklch(0.18 0.012 60));
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  overflow: hidden;
  box-shadow:
    0 8px 28px -10px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.2) inset;
}

.anim-term-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--accent) 75%, var(--term-bg, oklch(0.18 0.012 60))),
    color-mix(in oklab, var(--accent) 55%, var(--term-bg, oklch(0.18 0.012 60)))
  );
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.92 0.02 75);
}
.anim-term-head-l { display: flex; align-items: center; gap: 8px; }
.anim-term-icon { color: oklch(0.92 0.02 75); opacity: 0.85; }

.anim-term-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.92 0.02 75);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.anim-term-replay:hover { background: rgba(255,255,255,0.14); color: white; }

.anim-term-body {
  padding: 14px 16px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: oklch(0.88 0.012 75);
  min-height: 280px;
  max-height: 380px;
  overflow-y: auto;
}

.anim-term .term-line {
  white-space: pre-wrap;
  word-break: break-word;
}
.anim-term .term-line.in { color: oklch(0.94 0.012 75); }
.anim-term .term-line.out { color: oklch(0.78 0.012 75); }
.anim-term .term-line.out.match { color: oklch(0.82 0.14 145); }

.anim-comment {
  color: color-mix(in oklch, var(--accent) 50%, oklch(0.7 0.012 75));
  font-style: italic;
  opacity: 0.85;
  margin-top: 6px;
}

.anim-prompt { color: oklch(0.7 0.012 75); }
.anim-prompt .anim-path { color: var(--accent); }

/* Caret */
.anim-term-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.anim-term-typed { color: oklch(0.96 0.012 75); white-space: pre; }
.anim-term-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: middle;
  animation: anim-term-caret 1.05s steps(1) infinite;
  box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 60%, transparent);
}
@keyframes anim-term-caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.anim-term-kbd {
  margin-left: 10px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
  border-radius: 4px;
  animation: anim-term-keyflash 280ms ease-out;
}
@keyframes anim-term-keyflash {
  0%   { transform: scale(1.2); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Fuzzy menu inside the autoplay terminal */
.anim-term-menu {
  margin: 6px 0 8px;
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}
.anim-term-menu-hd {
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.65 0.012 75);
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.anim-term-menu-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  color: oklch(0.78 0.012 75);
  transition: background 120ms ease, color 120ms ease;
}
.anim-term-menu-row .idx { color: oklch(0.5 0.012 75); font-size: 11px; }
.anim-term-menu-row .lbl { color: oklch(0.92 0.012 75); }
.anim-term-menu-row .meta { color: oklch(0.55 0.012 75); font-size: 11px; }
.anim-term-menu-row.sel {
  background: color-mix(in oklch, var(--accent) 26%, transparent);
  color: white;
}
.anim-term-menu-row.sel .idx { color: white; opacity: 0.8; }
.anim-term-menu-row.sel .lbl { color: white; }
.anim-term-menu-row.sel .meta { color: rgba(255,255,255,0.75); }

/* Resolved pick line */
.anim-term-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: oklch(0.82 0.14 145);
}
.anim-term-pick-arrow { color: var(--accent); }
.anim-term-pick-meta { color: oklch(0.55 0.012 75); font-size: 11px; margin-left: auto; }

/* Mock editor overlay (slides up over the terminal body) */
.me-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: oklch(0.18 0.008 280);
  color: oklch(0.92 0.012 75);
  transform: translateY(101%);
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
  border-top: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  z-index: 2;
}
.me-overlay.open { transform: translateY(0); }

.me-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: oklch(0.22 0.008 280);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  color: oklch(0.78 0.012 75);
}
.me-traffic { display: inline-flex; gap: 6px; }
.me-traffic i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.me-traffic i:nth-child(1) { background: oklch(0.7 0.18 25); }
.me-traffic i:nth-child(2) { background: oklch(0.78 0.16 80); }
.me-traffic i:nth-child(3) { background: oklch(0.72 0.18 145); }
.me-title { color: oklch(0.88 0.012 75); }

.me-body {
  flex: 1;
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 0;
}
.me-tree {
  background: oklch(0.16 0.008 280);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 10px 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: oklch(0.7 0.012 75);
  overflow-y: auto;
}
.me-folder { padding: 2px 4px; color: oklch(0.78 0.012 75); }
.me-folder-open { color: var(--accent); }
.me-file { padding: 2px 4px; color: oklch(0.68 0.012 75); }
.me-file-active {
  color: white;
  background: color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: 3px;
}

.me-code { display: flex; flex-direction: column; min-width: 0; }
.me-tabs {
  display: flex;
  background: oklch(0.16 0.008 280);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0 6px;
}
.me-tab {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: oklch(0.7 0.012 75);
}
.me-tab-active {
  color: white;
  background: oklch(0.20 0.008 280);
  border-top: 2px solid var(--accent);
}
.me-pre {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: oklch(0.88 0.012 75);
  overflow: auto;
  flex: 1;
}
.me-status {
  display: flex;
  gap: 16px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--accent);
  color: white;
}
.me-status-r { margin-left: auto; }