/* ── Design tokens ─────────────────────────────────────────── */
  :root {
    --bg: #181716;
    --bg-2: #201f1d;
    --bg-3: #2a2826;
    --border: #35322f;

    --text: #f0e9df;
    --text-dim: #b1a79a;
    --text-faint: #6e665d;

    --accent: #c2a36b;
    --accent-2: #b96a5b;
    --accent-dim: #7a6a52;

    --mono: 'Inconsolata', monospace;
    --serif: 'Funnel Sans', Georgia, serif;
    --sidebar-w: 280px;
    --header-h: 56px;
  }

  /* ── Theme: Indigo Jet (light / reading mode) ───────────────── */
  :root.theme-indigo {
    --bg: #f4f7f8;
    --bg-2: #e8eef0;
    --bg-3: #d7e1e4;
    --border: #c5d1d6;

    --text: #1f2a30;
    --text-dim: #5f6f78;
    --text-faint: #8ba4a5;

    --accent: #3c6e71;
    --accent-2: #284b63;
    --accent-dim: #6c8f92;
  }

  /* ── Theme: Maroon Red (identity mode) ─────────────────────── */
  :root.theme-maroon {
    --bg: #120505;
    --bg-2: #1a0809;
    --bg-3: #240b0d;
    --border: #3a1a1d;

    --text: #f2e9e9;
    --text-dim: #bfa3a5;
    --text-faint: #7a5a5c;

    --accent: #ad2831;
    --accent-2: #d8dcdd;
    --accent-dim: #800e13;
  }

  /* ── Theme: Mono Voltage (accent override only) ─────────────── */
  :root.theme-voltage {
    --accent: #fc590d;
    --accent-2: #23d8fc;
  }

  /* ── Theme: Sun Impressions (soft accent variation) ─────────── */
  :root.theme-sun {
    --accent: #f8c071;
    --accent-2: #415177;
    --accent-dim: #c0774e;
  }

  /* ── Reset & base ───────────────────────────────────────────── */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    min-height: 100vh;
  }

  a {
    color: var(--accent);
    text-decoration: none;
  }

  a:hover {
    color: var(--accent-2);
  }

  code {
    font-family: var(--mono);
    font-size: 0.95em;
  }

  /* ── Top nav ────────────────────────────────────────────────── */
  #topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 100;
    overflow: hidden;
  }

  #topnav .logo {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--accent);
    display: flex;
    align-items: center;
  }

  #topnav .logo .nav-mark-svg {
    width: 28px;
    height: 28px;
    color: var(--accent);
    flex-shrink: 0;
  }

  #topnav .logo span {
    font-style: normal;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    margin-left: 10px;
    letter-spacing: 0.08em;
  }

  #topnav nav {
    display: flex;
    gap: 28px;
    align-items: center;
  }

  #topnav nav a {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color 0.15s;
  }

  #topnav nav a:hover {
    color: var(--accent);
  }

  #topnav nav a.active {
    color: var(--accent);
  }

  #menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text);
    cursor: pointer;
  }

  .btn-download {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 16px;
    border: 1px solid var(--accent-dim);
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
  }

  .btn-download:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }

  /* ── Page sections ──────────────────────────────────────────── */
  #page-hero,
  #page-download,
  #page-reference {
    display: none;
  }

  #page-hero.active,
  #page-download.active,
  #page-reference.active {
    display: block;
  }

  /* ── Hero section ───────────────────────────────────────────── */
  #page-hero {
    padding-top: var(--header-h);
    min-height: 100vh;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--header-h));
  }

  .hero-left {
    padding: 80px 60px 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--border);
  }

  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 24px;
  }

  .hero-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 8px;
  }

  .hero-title .accent {
    color: var(--accent-2);
  }

  .hero-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 48px;
    max-width: 440px;
    line-height: 1.9;
  }

  .hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .btn-primary {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 28px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    display: inline-block;
  }

  .btn-primary:hover {
    background: var(--accent-2);
    color: var(--bg);
  }

  .btn-secondary {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 28px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
    background: transparent;
  }

  .btn-secondary:hover {
    border-color: var(--accent-dim);
    color: var(--accent);
  }

  .hero-right {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-2);
  }

  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 48px;
  }

  .stat-cell {
    background: var(--bg-2);
    padding: 28px 24px;
  }

  .stat-value {
    font-family: var(--serif);
    font-style: italic;
    font-size: 36px;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
  }

  .stat-label {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .hero-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cat-tag {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--border);
    color: var(--text-faint);
    transition: all 0.15s;
    cursor: default;
  }

  .cat-tag:hover {
    border-color: var(--accent-dim);
    color: var(--accent);
  }

  /* ── Download section ───────────────────────────────────────── */
  #page-download {
    padding-top: var(--header-h);
    min-height: 100vh;
  }

  .download-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 40px;
  }

  .section-eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 12px;
  }

  .section-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 40px;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 16px;
  }

  .section-desc {
    color: var(--text-dim);
    max-width: 540px;
    margin-bottom: 56px;
    line-height: 1.9;
  }

  .section-desc.access-note {
    font-size: 12px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    margin-bottom: 32px;

  }

  .section-desc.access-note a {
    color: var(--accent);

  }

  .release-cta {
    display: inline-block;
    margin-bottom: 32px;

  }


  .release-card {
    border: 1px solid var(--border);
    background: var(--bg-2);
    margin-bottom: 24px;
    overflow: hidden;
  }

  .release-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
  }

  .release-tag {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .release-version {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--accent);
  }

  .release-badge {
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--accent-dim);
    color: var(--accent);
  }

  .release-date {
    font-size: 11px;
    color: var(--text-dim);
  }

  .release-body {
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }

  .download-item {
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
    min-width: 0;
  }

  .download-item:hover {
    border-color: var(--accent-dim);
  }

  .dl-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .dl-filename {
    font-size: 12px;
    color: var(--text);
    word-break: break-all;
  }

  .dl-desc {
    font-size: 11px;
    color: var(--text-faint);
    flex: 1;
  }

  .dl-btn {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 12px;
    border: 1px solid var(--accent-dim);
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    display: block;
    text-decoration: none;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .dl-btn:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }

  .install-block {
    border: 1px solid var(--border);
    background: var(--bg-3);
    padding: 32px 28px;
    margin-top: 48px;
  }

  .install-title {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 20px;
  }

  .code-block {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 16px 20px;
    margin-bottom: 12px;
    position: relative;
    overflow-x: auto;
  }

  .code-block code {
    color: var(--accent);
    font-size: 12px;
  }

  .code-block .code-comment {
    color: var(--text-faint);
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* ── Reference section ──────────────────────────────────────── */
  #page-reference {
    padding-top: var(--header-h);
    display: none;
  }

  #page-reference.active {
    display: flex;
  }

  #sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 0;
    z-index: 50;
  }

  #sidebar::-webkit-scrollbar {
    width: 4px;
  }

  #sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  #sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
  }

  .sidebar-search {
    padding: 16px;
    position: sticky;
    top: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    z-index: 1;
  }

  .sidebar-search input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s;
  }

  .sidebar-search input::placeholder {
    color: var(--text-faint);
  }

  .sidebar-search input:focus {
    border-color: var(--accent-dim);
  }

  #nav-container {
    padding: 12px 0 32px;
  }

  #nav-container h3 {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 16px 16px 6px;
  }

  .collapsible {
    font-size: 12px;
    padding: 7px 16px;
    cursor: pointer;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.12s;
    user-select: none;
  }

  .collapsible::after {
    content: '▸';
    font-size: 9px;
    color: var(--text-faint);
    transition: transform 0.15s;
  }

  .collapsible:not(.collapsed)::after {
    transform: rotate(90deg);
  }

  .collapsible:hover {
    color: var(--accent);
  }

  .collapsible.cat-collapsible {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 16px 5px 24px;
    color: var(--text-faint);
  }

  .collapsible.cat-collapsible:hover {
    color: var(--accent-dim);
  }

  .nested {
    list-style: none;
    display: none;
  }

  .nested.show {
    display: block;
  }

  .nested li a {
    display: block;
    font-size: 11px;
    padding: 4px 16px 4px 32px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.12s, background 0.12s;
  }

  .nested li a:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .nested li a.active {
    color: var(--accent-2);
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  }

  .nested .nested li a {
    padding-left: 44px;
  }

  #main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    padding: 48px 60px;
    max-width: calc(100% - var(--sidebar-w));
  }

  /* Reference content styles */
  #main-content h2.class-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 32px;
    color: var(--text);
    margin-bottom: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }

  #main-content p.class-desc {
    color: var(--text-dim);
    max-width: 640px;
    margin-bottom: 48px;
    line-height: 1.9;
  }

  .methods-wrapper {
    margin-top: 16px;
  }

  .category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }

  .cat-tab {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    transition: all 0.15s;
    cursor: pointer;
  }

  .cat-tab:hover {
    border-color: var(--accent-dim);
    color: var(--accent);
  }

  .cat-tab.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(200, 184, 154, 0.06);
  }

  .cat-count {
    font-size: 9px;
    margin-left: 5px;
    color: var(--text-faint);
  }

  .category-section {
    margin-bottom: 64px;
  }

  .category-title {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .category-count {
    font-size: 9px;
    padding: 2px 6px;
    background: var(--bg-3);
    color: var(--text-faint);
  }

  .method {
    border: 1px solid var(--border);
    margin-bottom: 16px;
    background: var(--bg-2);
    overflow: hidden;
  }

  .method-name {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-2);
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-3);
  }

  .method-desc {
    padding: 16px 20px;
    color: var(--text-dim);
    line-height: 1.8;
    border-bottom: 1px solid var(--border);
  }

  .method h5 {
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 12px 20px 8px;
  }

  .param-list,
  .returns-list {
    list-style: none;
    padding: 0 20px 12px;
  }

  .param-list li,
  .returns-list li {
    font-size: 12px;
    color: var(--text-dim);
    padding: 4px 0;
    border-bottom: 1px solid var(--text-faint);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .param-list li code,
  .returns-list li code {
    color: var(--accent);
  }

  .method pre {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 16px 20px;
    overflow-x: auto;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-dim);
  }

  .example-preview {
    width: 100%;
    max-width: 100%;
    min-height: 180px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }

  /* ── Scrollbar ──────────────────────────────────────────────── */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border);
  }



  /* ── Footer ─────────────────────────────────────────────── */
  #footer {
    border-top: 1px solid var(--border);
    background: var(--bg);
    margin-top: 80px;
  }

  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    font-size: 11px;
    color: var(--text-faint);
    text-align: center;
  }

  /* ── Responsive ─────────────────────────────────────────────── */
  @media (max-width: 756px) {
    .hero-grid {
      grid-template-columns: 1fr;
    }

    .hero-left,
    .hero-right {
      border-right: none;
      padding: 40px 20px;
    }

    .release-body {
      grid-template-columns: 1fr;
    }

    #page-reference.active {
      flex-direction: column;
    }

    #sidebar {
      position: relative;
      width: 100%;
      transform: none;
      border-right: none;
      border-bottom: 1px solid var(--border);
    }

    #menu-toggle {
      display: block;
    }

    #topnav nav {
      position: absolute;
      top: var(--header-h);
      right: 0;
      background: var(--bg);
      border: 1px solid var(--border);
      flex-direction: column;
      align-items: flex-start;
      padding: 12px;
      gap: 12px;
      display: none;
    }

    #topnav nav.open {
      display: flex;
    }

    #topnav nav {
      gap: 12px;
      flex-wrap: wrap;
    }

    #topnav nav a {
      font-size: 10px;
    }

    #main-content {
      margin-left: 0;
      max-width: 100%;
      padding: 24px 16px;
    }

    .footer-inner {
      padding: 16px;
      font-size: 10px;
      line-height: 1.6;
    }
  }