:root {
      color-scheme: light;
      --page: #f6f0e6;
      --surface: #fffaf2;
      --green: #173f35;
      --ink: #102c25;
      --muted: #63766e;
      --orange: #e85d04;
      --line: rgba(23, 63, 53, .14);
      --radius: 22px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 8% 0%, rgba(23,63,53,.10), transparent 28rem),
        radial-gradient(circle at 95% 12%, rgba(232,93,4,.10), transparent 26rem),
        var(--page);
      color: var(--ink);
      font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    a { color: inherit; text-decoration: none; }
    .topbar {
      width: min(1160px, calc(100% - 36px));
      margin: 18px auto 0;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      background: rgba(255,250,242,.9);
      border: 1px solid var(--line);
      border-radius: 999px;
    }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--green); }
    .brand img { width: 34px; height: 34px; object-fit: contain; }
    .nav { display: flex; gap: 24px; color: var(--muted); font-size: .94rem; }
    .nav a:hover { color: var(--green); }
    .wrap { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
    .hero { padding: 88px 0 54px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
    .eyebrow { color: var(--orange); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .78rem; }
    h1 { color: var(--green); font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.055em; margin: 14px 0 22px; }
    .lead { color: var(--muted); max-width: 650px; font-size: 1.15rem; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .button { padding: 12px 18px; border-radius: 999px; font-weight: 750; }
    .button.primary { background: var(--green); color: white; }
    .button.secondary { border: 1px solid var(--line); background: var(--surface); color: var(--green); }
    .sample, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(16,44,37,.07); }
    .sample { overflow: hidden; }
    .sample-head { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
    pre { margin: 0; padding: 22px; overflow-x: auto; color: #f4f1e9; background: #102c25; font: .86rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
    .sample pre code { color: #f4f1e9; background: transparent; padding: 0; border-radius: 0; }
    .section { padding: 30px 0 72px; }
    h2 { color: var(--green); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.035em; margin: 0 0 12px; }
    .section-intro { color: var(--muted); max-width: 720px; margin: 0 0 26px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .card { padding: 22px; }
    .card h3 { color: var(--green); margin: 0 0 8px; font-size: 1.08rem; }
    .card p { color: var(--muted); margin: 0; }
    code { color: var(--green); background: rgba(23,63,53,.08); padding: .12em .35em; border-radius: 5px; }
    .reference { margin: 0 calc((min(1160px, 100vw - 36px) - 100vw) / 2); padding: 42px max(18px, calc((100vw - 1160px) / 2)) 70px; background: var(--surface); border-top: 1px solid var(--line); }
    #api-reference { min-height: 80vh; }
    footer { padding: 28px 0 44px; color: var(--muted); font-size: .9rem; }

    #api-reference { min-height: 0; }
    .api-shell {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      min-height: 680px;
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      background: var(--surface);
    }
    .api-sidebar {
      padding: 22px 16px;
      background: var(--page);
      border-right: 1px solid var(--line);
    }
    .api-search-label {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: .8rem;
      font-weight: 700;
    }
    .api-search {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
    }
    .api-nav-group { margin-top: 24px; }
    .api-nav-group h3 {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: .76rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .api-nav-link {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      width: 100%;
      padding: 9px 8px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      font: inherit;
      font-size: .84rem;
      line-height: 1.35;
    }
    .api-nav-link:hover, .api-nav-link[aria-current="page"] {
      background: var(--surface);
    }
    .api-method {
      font-size: .7rem;
      font-weight: 850;
      letter-spacing: .02em;
    }
    .method-get { color: #087f8c; }
    .method-post { color: #16834a; }
    .method-patch { color: #b36b00; }
    .method-delete { color: #c23b32; }
    .api-detail { min-width: 0; padding: 34px clamp(20px, 4vw, 54px); }
    .api-detail h2 { margin: 10px 0; overflow-wrap: anywhere; }
    .api-detail h3 { margin: 28px 0 10px; color: var(--green); }
    .api-detail p { color: var(--muted); }
    .api-route {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin: 18px 0;
    }
    .api-route code {
      padding: 8px 11px;
      overflow-wrap: anywhere;
      font-size: .95rem;
    }
    .api-badges { display: flex; flex-wrap: wrap; gap: 8px; }
    .api-badge {
      display: inline-block;
      padding: 4px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: .76rem;
    }
    .api-table-wrap { overflow-x: auto; }
    .api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .88rem;
    }
    .api-table th, .api-table td {
      padding: 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }
    .api-table th { color: var(--muted); font-weight: 700; }
    .api-code-block {
      position: relative;
      margin: 12px 0;
      border-radius: 12px;
      overflow: hidden;
      background: #102c25;
    }
    .api-code-block pre {
      max-height: 520px;
      overflow: auto;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      color: #f4f1e9;
      background: #102c25;
    }
    .api-code-block pre code {
      padding: 0;
      color: inherit;
      background: transparent;
      border-radius: 0;
    }
    .api-copy {
      position: absolute;
      top: 9px;
      right: 9px;
      padding: 6px 9px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 7px;
      background: #173f35;
      color: white;
      cursor: pointer;
    }
    .api-response {
      margin: 16px 0;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
    }
    .api-response h4 { margin: 0; color: var(--green); }
    .api-empty { padding: 24px 0; color: var(--muted); }
    .api-download { display: inline-block; margin-top: 10px; text-decoration: underline; }
    @media (max-width: 760px) {
      .api-shell { grid-template-columns: 1fr; }
      .api-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
      .api-nav-group { margin-top: 16px; }
      .api-detail { padding: 26px 18px; }
    }

    @media (max-width: 760px) {
      .topbar { border-radius: 20px; align-items: flex-start; }
      .nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: .85rem; }
      .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 60px; }
      .grid { grid-template-columns: 1fr; }
      .reference { margin-left: -18px; margin-right: -18px; padding-left: 0; padding-right: 0; }
      .reference .wrap { width: 100%; }
    }

    .api-shell {
      height: min(78vh, 860px);
      min-height: 560px;
    }
    .api-sidebar {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .api-detail {
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    @media (max-width: 760px) {
      .api-shell {
        height: calc(100vh - 32px);
        min-height: 560px;
      }
      .api-sidebar {
        max-height: 34vh;
      }
      .api-detail {
        height: auto;
        max-height: 64vh;
      }
    }




    .api-download {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 2px;
      padding: 10px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
      color: var(--green);
      font-size: .88rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 5px 18px rgba(16,44,37,.05);
    }
    .api-download:hover {
      border-color: rgba(23,63,53,.35);
      background: #fff;
    }
    .api-file-type {
      padding: 2px 6px;
      border-radius: 5px;
      background: rgba(23,63,53,.08);
      color: var(--muted);
      font-size: .68rem;
      letter-spacing: .04em;
    }

  
    .reference {
      margin: 0;
      padding: 0;
      border: 0;
    }
    #api-reference { min-height: 0; }
    .api-shell {
      width: 100%;
      height: 100vh;
      min-height: 560px;
      border: 0;
      border-radius: 0;
    }
    .api-sidebar {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    #api-navigation {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .api-sidebar .api-download {
      flex: 0 0 auto;
      justify-content: center;
      width: 100%;
      margin: 14px 0 0;
      font-size: .78rem;
    }
    @media (max-width: 760px) {
      .api-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 36vh) minmax(0, 64vh);
        height: 100vh;
        min-height: 0;
      }
      .api-sidebar {
        height: auto;
        max-height: none;
      }
      .api-detail {
        height: auto;
        max-height: none;
      }
    }

  
    .api-nav-tag {
      display: block;
      width: 100%;
      margin: 0 0 8px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-align: left;
      text-transform: uppercase;
    }
    .api-nav-tag:hover { color: var(--green); }
    .api-category-list {
      display: grid;
      gap: 10px;
      margin-top: 24px;
    }
    .api-category-endpoint {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 8px 12px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      font: inherit;
    }
    .api-category-endpoint:hover { border-color: rgba(23,63,53,.35); }
    .api-category-endpoint code { overflow-wrap: anywhere; }
    .api-category-endpoint > span:last-child {
      grid-column: 2;
      color: var(--muted);
      font-size: .88rem;
    }

/* API help pages and sidebar navigation */
.api-sidebar-guide {
  display: grid;
  flex: 0 0 auto;
  gap: 7px;
  margin-bottom: 18px;
}
.api-sidebar-guide__console,
.api-sidebar-guide__status,
.api-sidebar-guide__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
  text-align: left;
}
.api-sidebar-guide__console {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.api-sidebar-guide__console:hover {
  background: #24594b;
}
.api-sidebar-guide__button {
  background: var(--surface);
  color: var(--green);
  cursor: pointer;
}
.api-sidebar-guide__button:hover,
.api-sidebar-guide__button[aria-current="page"] {
  background: #eae7dd;
}
.api-guide-page {
  max-width: 900px;
}
.api-guide-page h2 {
  margin: 10px 0 18px;
}
.api-guide-page h3 {
  margin: 28px 0 10px;
  color: var(--green);
}
.api-guide-page p,
.api-guide-page li {
  color: var(--muted);
}
.api-guide-page ol {
  padding-left: 24px;
}
.api-guide-page a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.api-guide-page .api-guide-note {
  margin: 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(23,63,53,.05);
}


.api-sidebar-guide__status {
  background: var(--surface);
  color: var(--green);
}
.api-sidebar-guide__status:hover {
  background: #eae7dd;
}