:root {
    --sidebar-bg: #0f172a;
    --sidebar-header: #0d1e36;
    --accent: #38bdf8;
  }
  #post-list::-webkit-scrollbar { width: 3px; }
  #post-list::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 2px; }

  .post-btn { transition: background 0.15s; }
  .post-btn.active .post-title-text { color: #38bdf8; }
  .post-btn.active { background: #1e293b; }

  .layer-dot { transition: all 0.2s; }
  .layer-dot.active {
    background: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.25);
  }

  /* prose overrides */
  .prose pre { background: #0d1117 !important; border-radius: 8px; overflow-x: auto; }
  .prose code:not(pre code) {
    background: #f1f5f9;
    color: #0f172a;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.875em;
  }
  .prose h1 { font-size: 1.6rem; }
  .prose h2 { font-size: 1.25rem; margin-top: 2rem; }
  .prose a { color: #0ea5e9; }
  .prose blockquote { border-left-color: #38bdf8; background: #f0f9ff; padding: 0.5rem 1rem; }
  .prose hr { display: none; }
  .prose p { margin-bottom: 1.25em; line-height: 1.75; }
  .prose ul { list-style-type: disc; padding-left: 1.75rem; margin: 0.75rem 0; }
  .prose ol { list-style-type: decimal; padding-left: 1.75rem; margin: 0.75rem 0; }
  .prose li { margin-bottom: 0.5rem; }
  .prose li > p { margin-bottom: 0.5em; }
  .prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9em; }
  .prose table thead { background: #e0f2fe; }
  .prose table th { padding: 0.65rem 1rem; text-align: left; font-weight: 600; color: #0f172a; border: 1px solid #bae6fd; }
  .prose table td { padding: 0.6rem 1rem; border: 1px solid #e2e8f0; color: #1e293b; vertical-align: top; }
  .prose table tbody tr:nth-child(odd) { background: #f8fafc; }
  .prose table tbody tr:nth-child(even) { background: #ffffff; }
  .prose table tbody tr:hover { background: #f0f9ff; }

  /* welcome screen monospace path */
  .request-path { font-family: 'Courier New', monospace; line-height: 1.8; }
  .request-path .layer-active { color: #0ea5e9; font-weight: 600; }

  /* ── Hero / landing dark screen ─────────────────────────── */
  #welcome-hero {
    background: linear-gradient(160deg, #0d1e36 0%, #0f172a 55%, #0c1a2e 100%);
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(56,189,248,0.35);
    background: rgba(56,189,248,0.08);
    color: #7dd3fc;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .hero-badge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    animation: pulse 2s infinite;
    flex-shrink: 0;
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 8px;
    background: #38bdf8;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
  }
  .hero-cta:hover { background: #7dd3fc; transform: translateY(-1px); }
  .hero-stat { font-size: 0.75rem; color: #475569; }
  .hero-stat strong { color: #94a3b8; font-weight: 600; }
  .dark-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 6px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
  }
  .dark-arrow { color: #334155; font-size: 0.7rem; user-select: none; }