/* ── Single-section navigation ── */

    /* Hide all sections by default; JS adds .doc-section-active to the visible one */
    #docs-full .cards > article.card {
      display: none;
    }
    #docs-full .cards > article.card.doc-section-active {
      display: block;
    }

    /* Override global .card max-height/overflow so docs articles show fully */
    .docs #docs-full .cards > article.card {
      max-height: none !important;
      overflow: visible !important;
      height: auto !important;
    }


    /* Prev / Next navigation bar */
    #doc-section-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 20px 0 32px;
      margin-top: 8px;
    }
    #doc-section-nav button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      border-radius: 8px;
      border: 1.5px solid #e2e8f0;
      background: #fff;
      color: #334155;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      white-space: nowrap;
    }
    #doc-section-nav button:hover:not(:disabled) {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }
    #doc-section-nav button:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    #doc-section-label {
      font-size: 13px;
      color: #94a3b8;
      white-space: nowrap;
      flex: 1;
      text-align: center;
    }

    /* Dark-mode overrides for nav buttons */
    .dark #doc-section-nav button {
      background: #1e293b;
      border-color: #334155;
      color: #cbd5e1;
    }
    .dark #doc-section-nav button:hover:not(:disabled) {
      background: #273549;
      border-color: #475569;
      color: #f1f5f9;
    }

    /* Active TOC link highlight */
    #docs-toc nav a.doc-toc-active {
      color: #6366f1;
      font-weight: 600;
    }

    .back-to-top { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 9999px; border: none; background: linear-gradient(135deg, #6366f1, #22d3ee); color: #fff; display: none; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 6px 20px rgba(2,6,23,.25); cursor: pointer; z-index: 1000; }
    .back-to-top.show { display: flex; }
    .back-to-top:focus { outline: 2px solid #fff; outline-offset: 2px; }
    @media (min-width: 1024px) { .back-to-top { width: 60px; height: 60px; font-size: 24px; right: 20px; bottom: 20px; } }

    /* Toggle UI */
    .videos-toggle-wrap { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .videos-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9999px; background: #0f172a0d; color: #64748b; font-size: 13px; }
    .videos-toggle input { width: 16px; height: 16px; }
    .mode-note { display: inline-block; font-size: 12px; color: #94a3b8; }
    .mode-note .only { display: none; }

    /* Videos-only section layout */
    #docs-videos-only .yt-wrap { max-width: 1100px; margin: 16px auto; }
    #docs-videos-only .yt-iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
    @media (max-width: 640px) {
      #docs-videos-only .yt-wrap { padding-left: 8px; padding-right: 8px; }
    }
  


/* Extracted from inline styles in docs.html */
.docs-inline-001 { align-items: center; gap: 12px; text-decoration: none; }
.docs-inline-002 { max-width: 1200px; padding-top: 12px; }
.docs-inline-003 { padding: 40px 0 12px 0; }
.docs-inline-004 { max-width: 1200px; }
.docs-inline-005 { margin-bottom: 6px; font-size: 34px; letter-spacing: -0.02em; }
.docs-inline-006 { font-size: 13px; }
.docs-inline-007 { max-width: 1200px; }
#docs-toc { align-self: start; padding: 14px; }
.docs-inline-008 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.docs-inline-009 { flex-direction: column; gap: 6px; font-size: 14px; }
.docs-inline-010 { min-width: 0; }
.docs-inline-011 { width: 100%; }
.docs-inline-012 { align-items: center; gap: 8px; }
.docs-inline-013 { margin: 0; }
.docs-inline-014 { margin: 6px 0 0 0; }
.docs-inline-015 { gap: 10px; flex-wrap: wrap; }
.docs-inline-016 { white-space: pre-wrap; }

.docs-hero-copy {
  max-width: 820px;
  margin: 18px 0 0;
  color: #dbeafe;
  font-size: 1.05rem;
  line-height: 1.7;
}

.docs-section-intro {
  margin: 0 0 18px;
  color: #334155;
  font-size: 1rem;
  line-height: 1.7;
}

.docs-paragraph-list {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}

.docs-list-paragraph {
  margin: 0;
  color: #334155;
  font-size: 15px;
  line-height: 1.7;
}

.docs-table-wrap {
  width: 100%;
  margin: 0 0 22px;
  overflow-x: auto;
}

.docs-plan-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
}

.docs-plan-table th,
.docs-plan-table td {
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.docs-plan-table thead th {
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.docs-plan-table tbody th {
  width: 120px;
  color: #4f46e5;
  font-weight: 700;
}

.docs-plan-table tbody tr:nth-child(even) {
  background: #f8fafc;
}


/* Extracted remaining inline styles in docs.html */
.docs-inline-001 { display: inline-flex; }
.docs-inline-002 { display: none; }
.docs-inline-003 { display: flex; }
.docs-inline-004 { display: block; }
.docs-inline-005 { display: flex; }
#docs-videos-only { display: none; }

/* Quick-start steps callout block */
.qs-steps {
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.qs-steps .qs-steps-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 8px;
}
.qs-steps .docs-paragraph-list {
  font-size: 16px;
  margin: 0;
  display: grid;
  gap: 8px;
}
.qs-steps .docs-list-paragraph {
  line-height: 1.5;
}

.docs-demo-card {
  margin: 0 0 24px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.docs-demo-label {
  margin: 0 0 12px;
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-demo-card video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #020617;
  margin-bottom: 12px;
  pointer-events: none;
}

.docs-demo-card p {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.6;
}