/* Clip horizontal overflow without creating a sticky scroll container. */
html:has(.developer-guides), body:has(.developer-guides) {
  overflow-x: clip;
  overflow-y: visible;
}
.developer-guides {
  background:#fff;
  color:#334155;
  padding:32px 0 64px;
  font-size:16px;
  line-height:1.8;
}
.developer-guides * {
  box-sizing:border-box;
}
.guide-breadcrumb { margin-bottom:22px; }
.guide-breadcrumb .api-hero-breadcrumb__link {
  color:#64748b;
  background:#f8f9fb;
  border-color:#e5e7eb;
}
.guide-breadcrumb .api-hero-breadcrumb__current {
  display:block;
  color:#334155;
  background:#f1f3f6;
  border-color:#d8dee7;
}
.guide-breadcrumb .api-hero-breadcrumb__separator { color:#9aa5b3; }
.guide-breadcrumb .api-hero-breadcrumb__link:hover {
  color:#176db2;
  background:#eef2f6;
  border-color:#cdd6e2;
}
.guide-layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 180px;
  gap:24px;
  align-items:start;
}
.guide-sidebar,.guide-toc {
  min-width:0;
  position:sticky;
  top:24px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
.guide-sidebar {
  padding:20px 12px 8px;
  background:transparent;
  border-right:1px solid #e5e7eb;
}
.guide-toc {
  padding:18px 0 18px 16px;
  border-left:1px solid #d6e0ed;
}
.guide-navigation,.guide-toc nav {
  position:static;
}
.guide-navigation summary {
  display:none;
}
.guide-nav-resources {
  border-top:1px solid #e5e7eb;
  padding-top:18px;
}
.guide-nav-resources .fa {
  float:right;
  font-size:10px;
  line-height:22px;
  color:#8590a0;
}
.guide-nav-group {
  margin-bottom:22px;
}
.developer-guides .guide-nav-group h2,.guide-toc h2 {
  font-size:13px;
  font-weight:600;
  color:#64748b;
  margin:0 0 10px;
}
.guide-sidebar a,.guide-toc a,.guide-mobile-toc a {
  display:block;
  font-size:14px;
  line-height:1.6;
  padding:6px 10px;
  color:#58677c;
  border-radius:4px;
}
.guide-sidebar a {
  white-space:nowrap;
  margin:3px 0;
}
.guide-sidebar a:hover {
  background:#f1f3f5;
  color:#155b9a;
  text-decoration:none;
}
.guide-sidebar a[aria-current=page] {
  color:#155b9a;
  background:#f3f5f8;
  font-weight:600;
}
.guide-toc a {
  font-size:12px;
  padding:5px 0;
}
.guide-toc .guide-toc-level-3 {
  padding-left:10px;
}
.guide-article {
  min-width:0;
  padding:0 32px 32px;
  background:#fff;
  border:0;
}
.guide-header {
  margin:0 0 24px;
  padding:0 0 4px;
  background:transparent;
  border-bottom:1px solid #dce6f1;
}
.developer-guides h1 {
  font-size:30px;
  line-height:1.4;
  color:#20334b;
  margin:0 0 12px;
  font-weight:600;
}
.guide-lead {
  margin:0 0 10px;
  font-size:17px;
  color:#64748b;
}
.guide-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  justify-content:flex-start;
  align-items:center;
  padding:8px 0;
  font-size:12px;
}
.guide-copy-fallback button {
  border:1px solid #dce4ed;
  border-radius:4px;
  background:#fff;
  color:#176db2;
  padding:4px 10px;
  font:inherit;
  cursor:pointer;
}
.guide-code-copy:hover {
  background:#e8ecf1;
  color:#34465d;
}
.guide-actions > a,.guide-actions > button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  border-left:1px solid #dce1e8;
  border-radius:0;
  background:transparent;
  color:#697586;
  padding:0 10px;
  font:inherit;
  font-weight:400;
  line-height:1.6;
  white-space:nowrap;
  cursor:pointer;
}
.guide-actions > :first-child { border-left:0; padding-left:0; }
.guide-actions > :last-child { padding-right:0; }
.guide-actions > a:hover,.guide-actions > button:hover {
  color:#176db2;
  background:transparent;
  text-decoration:none;
}
.guide-actions .fa { width:12px; font-size:12px; text-align:center; }
.developer-guides a:focus-visible,.developer-guides button:focus-visible,.developer-guides summary:focus-visible,.developer-guides textarea:focus-visible {
  outline:2px solid #1680ce;
  outline-offset:3px;
}
.guide-actions button span { display:inline-block; min-width:4em; }
.guide-copy-fallback textarea {
  display:block;
  width:100%;
  font-size:13px;
  line-height:1.6;
  margin:8px 0;
  border:1px solid #bccada;
}
.guide-copy-fallback[hidden] {
  display:none;
}
.guide-steps {
  background:transparent;
  border:0;
  border-radius:6px;
  padding:8px 0;
  margin:8px 0 24px;
}
.developer-guides .guide-steps h2 {
  font-size:16px;
  margin:0 0 8px;
}
.guide-steps ol {
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:guide-step;
}
.guide-steps li {
  counter-increment:guide-step;
  position:relative;
  padding:7px 0 7px 32px;
  font-size:14px;
}
.guide-steps li::before {
  content:counter(guide-step);
  position:absolute;
  left:0;
  top:9px;
  width:22px;
  height:22px;
  border:1px solid #cbdcec;
  border-radius:50%;
  background:#f3f4f6;
  color:#23679f;
  font-size:12px;
  text-align:center;
  line-height:20px;
}
.guide-prose {
  counter-reset:guide-section;
}
.guide-prose h2::before {
  counter-increment:guide-section;
  content:counter(guide-section, decimal-leading-zero);
  display:inline-block;
  margin-right:10px;
  color:#7390ad;
  font-size:0.85em;
  font-weight:500;
  vertical-align:middle;
}
.guide-prose h2 {
  font-size:23px;
  line-height:1.5;
  margin:32px 0 16px;
  padding-top:24px;
  border-top:1px solid #e5ebf2;
  color:#20334b;
  scroll-margin-top:24px;
}
.guide-prose h3 {
  font-size:18px;
  line-height:1.5;
  margin:28px 0 12px;
  scroll-margin-top:24px;
}
.guide-prose p {
  margin:0 0 16px;
}
.guide-prose ul,.guide-prose ol {
  padding-left:24px;
  margin-bottom:20px;
}
.guide-prose li {
  margin-bottom:7px;
}
.guide-prose a,.guide-feedback a {
  overflow-wrap:anywhere;
}
.guide-prose pre {
  position:relative;
  max-width:100%;
  overflow-x:auto;
  padding:50px 16px 16px;
  background:#f7f8fa;
  border:1px solid #d3deeb;
  border-radius:5px;
  line-height:1.7;
  margin:20px 0;
  font-size:13px;
}
.guide-prose pre::before {
  content:'示例代码';
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:8px 14px;
  border-bottom:1px solid #d9e3ef;
  color:#62748b;
  background:#f0f2f5;
  font:12px/22px sans-serif;
}
.guide-prose pre code.hljs {
  padding:0;
  overflow:visible;
  background:transparent;
}
.guide-prose code {
  font-size:.9em;
}
.guide-prose :not(pre) > code {
  color:#455468;
  background:#f2f4f7;
  border-radius:3px;
  padding:2px 4px;
  overflow-wrap:anywhere;
}
.guide-prose pre code {
  font-size:inherit;
  white-space:pre;
}
.guide-code-copy {
  position:absolute;
  top:3px;
  right:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:84px;
  height:32px;
  padding:0 8px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#697586;
  font:400 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}
.guide-code-copy::before {
  content:"\f0c5";
  font:12px/1 FontAwesome;
}
.guide-prose table {
  display:table;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin-bottom:24px;
  font-size:14px;
}
.guide-prose td,.guide-prose th {
  border:0;
  border-bottom:1px solid #e5e7eb;
  padding:10px 12px;
  min-width:100px;
  text-align:left;
}
.guide-prose th {
  font-weight:600;
  color:#485568;
  background:#f3f4f6;
}
.guide-prose tbody tr:nth-child(even) {
  background:#fafafa;
}
.guide-prose .note,.guide-prose .warning,.guide-prose .compatibility {
  padding:14px 18px;
  border:1px solid #e2e6eb;
  border-radius:5px;
  background:#f7f8fa;
  margin:22px 0;
  font-size:14px;
}
.guide-prose .warning {
  border-color:#e6dfd2;
  background:#faf8f3;
}
.guide-prose .compatibility {
  border-color:#dfe3e9;
}
.guide-prose .note:before {
  content:'提示';
  font-weight:600;
}
.guide-prose .warning:before {
  content:'注意事项';
  font-weight:600;
}
.guide-prose .compatibility:before {
  content:'兼容性';
  font-weight:600;
}
.guide-prose .note p:last-child,.guide-prose .warning p:last-child,.guide-prose .compatibility p:last-child {
  margin-bottom:0;
}
.guide-related {
  margin-top:40px;
  border-top:1px solid #e2e8f0;
  padding-top:24px;
}
.guide-related h2 {
  font-size:16px;
  margin:20px 0 8px;
}
.guide-related ul {
  padding-left:20px;
  font-size:14px;
}
.guide-pagination {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid #e2e8f0;
  margin-top:24px;
  padding-top:20px;
  font-size:14px;
}
.guide-pagination a {
  flex:1;
  min-width:0;
}
.guide-pagination a:last-child {
  text-align:right;
}
.guide-pagination small {
  display:block;
  color:#748195;
}
.guide-feedback {
  font-size:12px;
  font-weight:400;
  line-height:1.8;
  color:#6b7280;
  margin:20px 0 0;
}
.guide-feedback a {
  color:inherit;
  font-size:inherit;
  font-weight:400;
  text-decoration:underline;
  text-decoration-color:#c5cbd3;
}
.guide-feedback a:hover,.guide-feedback a:focus-visible {
  color:#475569;
  text-decoration-color:currentColor;
}
.guide-mobile-toc {
  display:none;
}
.developer-guides button:active {
  background:#e1edf6;
}
.developer-guides button:disabled {
  opacity:.6;
  cursor:wait;
}
@media(max-width:1199px) {
  .guide-layout {
    grid-template-columns:224px minmax(0,1fr);
    gap:28px;
  }
  .guide-toc {
    display:none;
  }
  .guide-prose > h2:first-child {
    border-top:0;
    padding-top:0;
    margin-top:24px;
  }
  .guide-mobile-toc {
    display:block;
    border-bottom:1px solid #e2e8f0;
    padding-bottom:14px;
  }
  .guide-mobile-toc summary {
    cursor:pointer;
    color:#176db2;
    font-size:14px;
  }
}
@media(max-width:767px) {
  .developer-guides {
    padding:20px 0 40px;
    font-size:15px;
  }
  .guide-sidebar {
    position:static;
    max-height:none;
    overflow:visible;
    padding:0;
    border:0;
    background:transparent;
  }
  .guide-article {
    padding:4px 16px 20px;
  }
  .guide-header {
    margin:0 0 20px;
    padding:0 0 2px;
  }
  .guide-prose table {
    display:block;
  }
  .guide-layout {
    display:block;
  }
  .guide-breadcrumb {
    font-size:12px;
    margin-bottom:18px;
  }
  .guide-navigation {
    position:static;
    background:#f7f8fa;
    border:1px solid #d6e0ed;
    border-radius:4px;
    margin-bottom:24px;
    padding:10px 14px;
  }
  .guide-navigation summary {
    display:list-item;
    cursor:pointer;
    color:#176db2;
    font-size:14px;
  }
  .guide-navigation nav {
    padding-top:16px;
  }
  .guide-nav-group {
    margin-bottom:16px;
  }
  .developer-guides h1 {
    font-size:24px;
  }
  .guide-lead {
    font-size:16px;
  }
  .guide-prose h2 {
    font-size:21px;
  }
  .guide-prose h3 {
    font-size:17px;
  }
  .guide-prose pre {
    font-size:12px;
  }
  .guide-steps {
    padding:8px 0;
  }
  .guide-actions {
    justify-content:flex-start;
    gap:8px 0;
  }
  .guide-actions > * { min-height:32px; }
 .guide-actions > a,.guide-actions > button { padding:0 8px; font-size:12px; }
  .guide-actions > :first-child { padding-left:0; }
  .guide-actions > :last-child { padding-right:0; }
  .guide-pagination {
    gap:16px;
  }
  .guide-prose {
    overflow-wrap:break-word;
  }
  .guide-prose pre {
    overflow-wrap:normal;
  }
}

/* Keep interactive feedback quiet and consistent across guide navigation. */
.guide-sidebar a,.guide-toc a,.guide-mobile-toc a,.guide-actions > a,.guide-actions > button {
  transition:color 120ms ease, background-color 120ms ease;
}
.guide-toc a:hover,.guide-mobile-toc a:hover {
  color:#176db2;
  background:#f5f6f8;
  text-decoration:none;
}
.guide-prose a,.guide-feedback a {
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
@media(prefers-reduced-motion:reduce) {
  .developer-guides a,.developer-guides button { transition:none; }
}