@charset "utf-8";

/* Copy controls use separate layout classes; .copy is only a behavior hook. */

@font-face { font-family: 'Manrope'; src: url('/static/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

html:has(.docs-page) { background: #222125; }

* { box-sizing: border-box; }
* { font-synthesis: none; }

html { -webkit-text-size-adjust: 100%; }

body.docs {
  --bg: #222125;
  --ink: #f3f3f5;
  --muted: #9096a0;
  --faint: #7f848d;
  --body: #a9adb5;
  --hair: #38363c;
  --panel: #2b2a2e;
  --panel-hover: #333236;
  --hi: #ff8a44;
  --hi-soft: rgba(255, 138, 68, .10);
  --magma: linear-gradient(96deg, #e10600 0%, #ff4d0a 46%, #ff9a1f 100%);
  --magma-btn: linear-gradient(96deg, #d81f00 0%, #f2610a 100%);
  --magma-btn-hover: linear-gradient(96deg, #e52a05 0%, #ff6d14 100%);
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Manrope, Figtree, 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
  --dh-h: 60px;
  --r-panel: 12px;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  color-scheme: dark;
  scrollbar-color: #4a4850 var(--bg);
}

/* ---------- links, focus, scrollbars, sr-only ------------------------------ */

:where(body.docs) a { color: inherit; text-decoration: none; }

body.docs :is(a, button, summary):focus-visible {
  outline: 2px solid rgba(255, 122, 47, .72);
  outline-offset: 2px;
  border-radius: 8px;
}

.docs-page :is(.docs-side, .code pre, .cp-menu, .tablewrap) {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.docs-page ::-webkit-scrollbar { width: 8px; height: 8px; }
.docs-page ::-webkit-scrollbar-track { background: transparent; }
.docs-page ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; }
.docs-page ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }

/* Visually hidden copy-feedback label on icon-only buttons. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Shared copy hook — behaviour/state only, never layout. */
.copy { cursor: pointer; }

/* ---------- shell ----------------------------------------------------------- */

.docs-page { min-height: 100vh; min-height: 100dvh; background: var(--bg); }

/* ---------- header ---------------------------------------------------------- */

.docs-page .dh {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--dh-h); padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}

.dh-logo {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--ink); font: 500 16px/1.2 var(--sans);
}
.dh-logo svg { flex: none; display: block; width: 26px; height: 26px; }
.dh-word { white-space: nowrap; }
.dh-tag { color: var(--muted); font-weight: 400; white-space: nowrap; }

.dh-actions { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }

.dh-chat {
  flex: none; display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px;
  border-radius: 999px; background: var(--magma-btn); color: #fff;
  font: 500 13.5px/1 var(--sans); white-space: nowrap;
  transition: filter .15s ease, background-color .15s ease;
}
.dh-chat:hover { filter: brightness(1.08); background: var(--magma-btn-hover); color: #fff; }

/* ---------- header navigation dropdown (native <details>) ------------------- */

.docs-navigation { position: static; }
.docs-navigation > summary { list-style: none; }
.docs-navigation > summary::-webkit-details-marker { display: none; }

.docs-menu {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--hair); border-radius: 8px;
  background: transparent; color: var(--muted);
  font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.docs-menu:hover,
.docs-navigation[open] .docs-menu { color: var(--ink); background: var(--panel-hover); }
.docs-menu svg { flex: none; width: 12px; height: 12px; transition: transform .15s ease; }
.docs-navigation[open] .docs-menu svg { transform: rotate(180deg); }

/* The dropdown panel: right-aligned under the header on every viewport. */
.docs-page .docs-side {
  position: absolute; top: calc(100% + 10px); right: 16px; z-index: 70;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 92px); overflow-y: auto;
  padding: 12px;
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.docs-side a {
  display: block; padding: 7px 10px; border-radius: 8px;
  color: var(--muted); font-size: 13.5px; line-height: 1.45;
  transition: color .15s ease, background-color .15s ease;
}
.docs-side a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.docs-side a[aria-current="page"] { color: var(--hi); background: var(--hi-soft); }

/* ---------- article column --------------------------------------------------- */

.docs-page .dm { min-width: 0; padding: 64px 32px 96px; }
.docs-page .dm-col { max-width: 620px; margin: 0 auto; }
.docs-page .dm-col.docs-index { max-width: 880px; }

/* styles.css leaks `section { padding-block/border-top }` — undo inside docs. */
.docs-page .dm-col section { padding: 0; border: 0; }
.docs-page .dm-col > section { margin-top: 44px; }
.docs-page .dm-lede + section { margin-top: 0; }

.docs-page .dm-col :is(section, h2, h3, h4)[id] { scroll-margin-top: calc(var(--dh-h) + 16px); }

/* ---------- typography ------------------------------------------------------- */

.docs-page .dm h1 {
  margin: 0 0 14px;
  font: 400 clamp(30px, 3.6vw, 38px)/1.15 var(--sans);
  letter-spacing: -.025em; color: var(--ink);
  text-wrap: balance;
}
.docs-page .dm h2 { margin: 0 0 12px; font: 400 22px/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.docs-page .dm h3 { margin: 26px 0 8px; font: 500 16px/1.4 var(--sans); color: var(--ink); }
.docs-page .dm p, .docs-page .dm ul, .docs-page .dm ol { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; color: var(--body); }
.docs-page .dm ul, .docs-page .dm ol { padding-left: 22px; }
.docs-page .dm li { margin-bottom: 8px; padding-left: 2px; }
.docs-page .dm li::marker { color: var(--faint); }
.docs-page .dm strong { color: var(--ink); font-weight: 600; }
.docs-page .dm em { font-style: italic; }

.docs-page .dm-col p a,
.docs-page .dm-col li a,
.docs-page .dm-col td a,
.docs-page .callout a {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 138, 68, .55); text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.docs-page .dm-col p a:hover,
.docs-page .dm-col li a:hover,
.docs-page .dm-col td a:hover,
.docs-page .callout a:hover { color: var(--hi); text-decoration-color: var(--hi); }

.docs-page .dm :not(pre) > code {
  padding: .12em .42em; border: 1px solid rgba(255, 255, 255, .05); border-radius: 6px;
  background: rgba(255, 255, 255, .055);
  font: 400 .86em/1.4 var(--mono); color: #e6e8ec;
  overflow-wrap: anywhere;
}

/* ---------- page head + split copy button ------------------------------------ */

.docs-page .dm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 14px 20px;
  margin: 0 0 14px;
}
.docs-page .dm-head h1 { flex: 1 1 auto; min-width: 0; margin: 0; }

.docs-page .cp { position: relative; flex: none; display: flex; margin-top: 6px; }
.docs-page .cp > button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; margin: 0;
  border: 1px solid var(--hair); border-radius: 0;
  background: var(--panel); color: var(--muted);
  font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.docs-page .cp > button:hover { color: var(--ink); background: var(--panel-hover); }
.docs-page .cp > button svg { flex: none; width: 14px; height: 14px; }
.docs-page .cp > .cp-main { position: static; width: auto; border-radius: 8px 0 0 8px; }
.docs-page .cp > .cp-more { padding: 0 8px; border-left: 0; border-radius: 0 8px 8px 0; }
.docs-page .cp .cp-more[aria-expanded="true"] { color: var(--ink); background: var(--panel-hover); }
/* Fixed label width so the 已复制 feedback never resizes the control. */
.docs-page .cp > .cp-main .copy-label { min-width: 4em; text-align: left; }

.docs-page .cp-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 248px; max-width: min(320px, calc(100vw - 40px));
  padding: 5px;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.cp-menu[hidden] { display: none; }
.docs-page .cp-menu button {
  display: block; width: 100%; padding: 8px 10px; margin: 0;
  border: 0; border-radius: 7px; background: none; color: var(--ink);
  font: 400 13.5px/1.35 var(--sans); text-align: left; cursor: pointer;
  transition: background-color .15s ease;
}
.docs-page .cp-menu button:hover { background: var(--panel-hover); }
.docs-page .cp-menu .copy-label { display: block; min-width: 0; }
.docs-page .cp-d { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

.docs-page .dm-lede { margin: 0 0 32px; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* ---------- 32px square copy (code blocks + value rows) ----------------------- */

.docs-page .doc-copy {
  position: absolute;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--hair); border-radius: 8px;
  background: var(--panel); color: var(--muted);
  transition: color .15s ease, background-color .15s ease;
}
.docs-page .doc-copy:hover { color: var(--ink); background: var(--panel-hover); }
.docs-page .doc-copy svg { width: 15px; height: 15px; }
.docs-page .val .doc-copy { top: 50%; right: 12px; transform: translateY(-50%); }
.docs-page .code .doc-copy { top: 10px; right: 10px; }

/* ---------- value rows (label above, value below, room for the copy button) --- */

.docs-page .vals { display: grid; gap: 10px; margin: 16px 0 8px; }
.docs-page .val {
  position: relative;
  padding: 12px 64px 12px 16px;
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-panel);
}
.docs-page .val-l { display: block; margin-bottom: 3px; font-size: 13px; line-height: 1.4; color: var(--faint); overflow-wrap: anywhere; }
.docs-page .dm .val-v {
  display: block; padding: 0; border: 0; border-radius: 0; background: none;
  font: 400 14px/1.5 var(--mono); color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------- code blocks (copy pinned to the panel, pre scrolls under it) ------- */

.docs-page .code {
  position: relative;
  margin: 16px 0 22px;
  padding-right: 64px;
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-panel);
}
.docs-page .code pre {
  margin: 0; max-width: 100%; padding: 16px 8px 16px 18px;
  overflow-x: auto; white-space: pre; background: none;
  font: 400 13px/1.75 var(--mono); color: #e4e6ea;
}
.docs-page .code pre code { font: inherit; }
.docs-page .code .c { color: #717171; }
.docs-page .code .s { color: #8ed4a6; }
.docs-page .code .k { color: #f5b98a; }
.docs-page .code .kw { color: #ff7a45; }
.docs-page .code .n { color: #c9a7ff; }

/* ---------- callouts, tables, steps -------------------------------------------- */

.docs-page .callout {
  margin: 20px 0 22px; padding: 14px 16px;
  border: 1px solid var(--hair); border-radius: var(--r-panel);
  background: rgba(255, 255, 255, .03);
  font-size: 15px; line-height: 1.7; color: var(--body);
}
.docs-page .callout strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }

.docs-page .tablewrap { margin: 16px 0 22px; overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-panel); }
.docs-page .tablewrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.docs-page .tablewrap th {
  padding: 10px 14px; border-bottom: 1px solid var(--hair);
  background: rgba(255, 255, 255, .025);
  color: var(--muted); font-size: 13px; font-weight: 500;
  text-align: left; white-space: nowrap;
}
.docs-page .tablewrap td { padding: 12px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--body); line-height: 1.6; }
.docs-page .tablewrap td.mono { color: var(--ink); font: 400 12.5px/1.6 var(--mono); white-space: nowrap; }
.docs-page .tablewrap tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.docs-page .tablewrap tbody tr:last-child td { border-bottom: 0; }

.docs-page .doc-step { margin: 0 0 26px; }
.docs-page .doc-step > h3 { margin-top: 0; }
.docs-page .doc-step > :last-child { margin-bottom: 0; }

/* ---------- index directory list ------------------------------------------------ */

.docs-page .idx-list { display: grid; gap: 14px; margin: 0; padding: 0; }
.docs-page .idx-list > a { display: block; color: var(--ink); font-size: 15.5px; transition: color .15s ease; }
.docs-page .idx-list > a:hover strong { color: var(--hi); }
.docs-page .idx-list strong { display: block; font-weight: 500; }
.docs-page .idx-list span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ---------- integration cards (static flex, no absolute reset needed) ----------- */

.docs-page .doc-integrations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }

.docs-page .doc-integration {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 68px; padding: 14px 16px;
  border: 1px solid var(--hair); border-radius: var(--r-panel);
  background: var(--panel); color: var(--ink);
  font: 400 14px/1.4 var(--sans); text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.docs-page .doc-integration:hover { border-color: #4a4850; background: var(--panel-hover); }

.docs-page .doc-integration-icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--hi-soft); color: var(--hi);
  font: 500 15px/1 var(--sans); overflow: hidden;
}
.docs-page .doc-integration-icon svg { width: 22px; height: 22px; }

.docs-page .doc-integration-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.docs-page .doc-integration-text strong { display: block; color: var(--ink); font: 500 14px/1.35 var(--sans); overflow-wrap: anywhere; }
/* Stable min-width so the copy feedback text swap cannot shift the card. */
.docs-page .doc-integration .copy-label {
  display: block; min-width: 4em; margin-top: 1px;
  color: var(--faint); font-size: 12px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.docs-page .doc-integration-arrow { flex: none; width: 16px; height: 16px; color: var(--faint); }

/* ---------- prev / next ---------------------------------------------------------- */

.docs-page .pg {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px;
  margin-top: 56px; padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.docs-page .pg a { color: var(--ink); font-size: 15px; line-height: 1.45; transition: color .15s ease; }
.docs-page .pg a:hover { color: var(--hi); }
.docs-page .pg-k { color: var(--faint); }
.docs-page .pg-next { margin-left: auto; text-align: right; }

/* ---------- responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .docs-page .dm { padding: 32px 16px 72px; }
  .docs-page .dm-lede { margin-bottom: 26px; font-size: 16px; }
  .docs-page .dm-col > section { margin-top: 36px; }
  .docs-page .code pre { padding: 14px 6px 14px 14px; font-size: 12.5px; }
}

@media (max-width: 700px) {
  .docs-page .docs-side { grid-template-columns: minmax(0, 1fr); }
  .docs-page .doc-integrations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .docs-page .dh { padding: 0 12px; }
  .docs-page .dh-actions { gap: 8px; }
  .docs-page .dh-chat { display: none; }
  .docs-page .dm-head { flex-direction: column; align-items: stretch; gap: 0; }
  .docs-page .cp { order: -1; align-self: flex-start; margin: 0 0 14px; }
  .docs-page .cp-menu { right: auto; left: 0; }
  .docs-page .doc-integrations { grid-template-columns: minmax(0, 1fr); }
  .docs-page .pg { flex-direction: column; align-items: stretch; }
  .docs-page .pg > span:empty { display: none; }
  .docs-page .pg-next { margin-left: 0; text-align: left; }
}

@media (max-width: 420px) {
  .docs-page .dh-tag { display: none; }
}

/* ---------- entry motion ----------------------------------------------------- */

/* One restrained settle for the article column on load; from-state only, so
   nothing depends on JavaScript or stays hidden. */
@media (prefers-reduced-motion: no-preference) {
  .docs-page .dm-col { animation: docs-in .4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes docs-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .docs-page *,
  .docs-page *::before,
  .docs-page *::after { transition: none !important; animation: none !important; }
}