.docs-page { background: #fff; }
.site-nav a[aria-current="page"] { color: var(--ink); }

.docs-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 780px);
  justify-content: center;
  gap: 76px;
  padding-block: 62px 110px;
}

.docs-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

.sidebar-label {
  margin: 24px 0 8px;
  color: #8a96a8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sidebar-label:first-child { margin-top: 0; }
.docs-sidebar nav { display: grid; gap: 3px; }
.docs-sidebar nav a {
  padding: 9px 11px;
  color: #647188;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
.docs-sidebar nav a:hover { color: var(--ink); background: #f2f5fa; }
.docs-sidebar nav a.active { color: var(--blue-dark); background: var(--blue-soft); }

.sidebar-card {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  padding: 14px;
  background: var(--teal-soft);
  border: 1px solid #cde7df;
  border-radius: 9px;
}
.sidebar-card .status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 4px;
  background: #49a48e;
  border-radius: 50%;
}
.sidebar-card div { display: flex; flex-direction: column; }
.sidebar-card strong { color: #2d665a; font-size: 10px; }
.sidebar-card small { margin-top: 4px; color: #63857e; font-size: 8px; line-height: 1.5; }

.docs-toggle { display: none; }
.docs-kicker { color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.docs-content > h1 {
  margin: 13px 0 12px;
  font-size: clamp(44px, 5vw, 62px);
  line-height: 1.03;
  letter-spacing: -.055em;
}
.docs-lede { margin: 0 0 42px; color: var(--muted); font-size: 18px; line-height: 1.7; }

.prose { color: #364055; font-size: 15px; line-height: 1.8; }
.prose > p:first-child { font-size: 16px; }
.prose h2 {
  margin: 58px 0 16px;
  padding-top: 8px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: -.035em;
  scroll-margin-top: 24px;
}
.prose h3 { margin: 32px 0 10px; color: var(--ink); font-size: 17px; line-height: 1.35; letter-spacing: -.015em; }
.prose p { margin: 14px 0; }
.prose a { color: var(--blue-dark); text-decoration: underline; text-decoration-color: #a9bfe9; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose code { padding: 2px 5px; color: var(--blue-dark); background: var(--blue-soft); border-radius: 4px; font-size: 12px; }
.prose pre {
  overflow-x: auto;
  margin: 18px 0;
  padding: 18px 20px;
  color: #dbe6f7;
  background: var(--navy);
  border: 1px solid #2d3d5d;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.65;
}
.prose pre code { padding: 0; color: inherit; background: none; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin: 7px 0; padding-left: 3px; }
.prose blockquote {
  margin: 25px 0;
  padding: 16px 19px;
  color: #355f57;
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
}
.prose blockquote p { margin: 0; }
.prose table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 12px; line-height: 1.55; }
.prose th { color: var(--ink); background: #f2f5fa; text-align: left; }
.prose th, .prose td { padding: 12px 13px; border: 1px solid var(--line); vertical-align: top; }
.prose td:first-child { color: var(--ink); font-weight: 600; }
.decision-table th:nth-child(1) { width: 36%; }
.decision-table th:nth-child(2) { width: 22%; }

.guide-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 34px 0 10px;
  padding: 24px;
  color: #dbe6f7;
  background: var(--navy);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(23, 36, 61, .13);
}
.guide-callout span { color: #7fc4b4; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.guide-callout strong { max-width: 670px; color: #fff; font-size: 17px; line-height: 1.5; }

.value-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.value-list section { display: grid; grid-template-columns: 35px 1fr; gap: 14px; padding: 20px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; }
.value-list section > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 7px; font-size: 9px; font-weight: 800; }
.value-list h3 { margin: 2px 0 6px; font-size: 15px; }
.value-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.source-note { padding-top: 8px; color: var(--muted); font-size: 12px; }
.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 20px 0; }
.example-grid section { min-width: 0; padding: 19px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; }
.example-grid small { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.example-grid h3 { margin: 8px 0 12px; font-size: 15px; }
.example-grid pre { height: calc(100% - 56px); margin: 0; padding: 14px; font-size: 10px; }

.prompt-stack { display: grid; gap: 10px; margin: 20px 0; }
.prompt-stack code { display: block; padding: 14px 16px; color: #445169; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.safety-panel { margin-top: 20px; padding: 23px; color: #d5e1f2; background: var(--navy); border-radius: 11px; }
.safety-panel strong { color: #fff; font-size: 15px; }
.safety-panel ul { margin-bottom: 0; }
.safety-panel li::marker { color: #7fc4b4; }

.docs-pagination { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 26px; border-top: 1px solid var(--line); }
.docs-pagination a { min-width: 180px; display: flex; flex-direction: column; color: var(--blue-dark); font-size: 13px; font-weight: 700; }
.docs-pagination a span { margin-bottom: 4px; color: #8a96a8; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.docs-pagination .next { margin-left: auto; text-align: right; }

@media (max-width: 980px) {
  .docs-shell { grid-template-columns: 205px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 760px) {
  .docs-toggle {
    display: block;
    width: calc(100% - 32px);
    margin: 18px auto 0;
    padding: 12px 14px;
    color: var(--blue-dark);
    background: var(--blue-soft);
    border: 1px solid #d5e1f7;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
  }
  .docs-shell { display: block; padding-block: 32px 72px; }
  .docs-sidebar { display: none; position: static; max-height: none; overflow: visible; margin-bottom: 38px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
  .docs-sidebar.open { display: block; }
  .docs-content > h1 { font-size: 43px; }
  .docs-lede { font-size: 16px; }
  .prose { font-size: 14px; }
  .prose h2 { margin-top: 48px; font-size: 24px; }
  .value-list, .example-grid { grid-template-columns: 1fr; }
  .prose table { display: block; overflow-x: auto; white-space: normal; }
  .decision-table { min-width: 0; }
  .docs-pagination { align-items: flex-start; flex-direction: column; }
  .docs-pagination .next { margin: 0; text-align: left; }
}