:root {
  color-scheme: light;
  --canvas: #ffffff;
  --ink: #1f2329;
  --body: #303133;
  --muted: #646a73;
  --faint: #8f959e;
  --line: #e8eaed;
  --line-strong: #dde1e6;
  --brand: #3370ff;
  --brand-strong: #245bdb;
  --brand-pale: #eef4ff;
  --callout: #fff7ed;
  --callout-line: #f1dcc1;
  --callout-heart: #ff4f79;
  --sidebar-width: 300px;
  --content-width: 820px;
  --header-height: 62px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--body);
  background: var(--canvas);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  color: #fff;
  background: var(--brand);
  border-radius: 6px;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 18px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
}

.icon-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #545b64;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
}
.icon-button:hover, .icon-button:focus-visible { color: var(--brand); background: var(--brand-pale); outline: 0; }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.overflow-button svg { fill: currentColor; stroke: none; }

.main-nav-button { width: 24px; margin-right: 7px; }
.main-nav-button svg { width: 18px; }
.breadcrumb {
  display: grid;
  grid-template-columns: auto 16px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  min-width: 0;
  color: #373b41;
  font-size: 14px;
  line-height: 1.2;
}
.breadcrumb-company, .breadcrumb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-title { font-weight: 400; }
.breadcrumb-separator { width: 16px; height: 16px; margin: 0; color: #a2a6ac; fill: none; stroke: currentColor; stroke-width: 1.7; }
.last-modified { grid-column: 1 / -1; margin-top: 4px; color: #777d85; font-size: 12px; }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 17px; margin-left: auto; }
.login-button { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 13px; color: #fff; font-size: 14px; line-height: 1; text-decoration: none; background: var(--brand); border-radius: 5px; transition: background .16s ease, transform .16s ease; }
.login-button:hover, .login-button:focus-visible { background: var(--brand-strong); outline: 0; transform: translateY(-1px); }
.overflow-wrap { position: relative; }
.overflow-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 9px);
  right: 0;
  width: 188px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 9px 28px rgba(31, 35, 41, .12);
}
.overflow-menu[hidden] { display: none; }
.overflow-menu button { display: grid; grid-template-columns: 22px 1fr auto; width: 100%; min-height: 34px; padding: 0 8px; color: #34383e; font-size: 13px; text-align: left; background: transparent; border: 0; border-radius: 5px; }
.overflow-menu button:hover, .overflow-menu button:focus-visible { background: #f4f6f8; outline: 0; }
.overflow-menu svg { align-self: center; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.overflow-menu kbd { align-self: center; padding: 1px 4px; color: #8d9299; font-size: 10px; font-family: inherit; background: #f3f4f6; border-radius: 3px; }

.document-sidebar {
  position: fixed;
  z-index: 30;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  padding: 56px 18px 34px;
  overflow-y: auto;
  background: rgba(255, 255, 255, .94);
  border-right: 0 solid var(--line);
  transition: width .2s ease, transform .2s ease, padding .2s ease;
  scrollbar-width: thin;
  scrollbar-color: #c7cbd1 transparent;
}
.sidebar-toolbar { position: absolute; top: 56px; left: 15px; display: flex; align-items: center; gap: 5px; }
.sidebar-collapse { width: 25px; height: 25px; color: #6a7078; }
.sidebar-collapse svg { width: 19px; height: 19px; }
.sidebar-search-button { display: none; align-items: center; gap: 4px; padding: 4px 6px; color: #717780; font-size: 12px; background: transparent; border: 0; border-radius: 5px; }
.sidebar-search-button:hover, .sidebar-search-button:focus-visible { color: var(--brand); background: var(--brand-pale); outline: 0; }
.sidebar-search-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.toc { display: grid; gap: 0; margin-top: 38px; }
.toc a { display: block; padding: 4px 2px; color: #565b63; font-size: 14px; line-height: 1.55; text-decoration: none; border-radius: 4px; }
.toc a:hover, .toc a:focus-visible { color: var(--brand); background: #f5f8ff; outline: 0; }
.toc a.is-active { color: #165dff; font-weight: 600; }
.toc-root { margin-bottom: 4px; }

.document-shell { position: relative; min-height: 100vh; margin-left: var(--sidebar-width); padding-top: var(--header-height); overflow: hidden; transition: margin-left .2s ease; }
.document-content { position: relative; z-index: 1; width: min(var(--content-width), calc(100% - 80px)); margin: 0 0 0 40px; padding: 55px 0 128px; }
.watermark-layer { position: absolute; inset: var(--header-height) 0 0; display: grid; grid-template-columns: repeat(4, 218px); grid-auto-rows: 218px; justify-content: space-evenly; align-content: start; overflow: hidden; pointer-events: none; user-select: none; }
.watermark-layer span { display: grid; color: rgba(133, 143, 153, .055); font-size: 14px; font-weight: 400; place-items: center; transform: rotate(-15deg); }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 11px; color: var(--ink); font-size: 36px; font-weight: 700; letter-spacing: -.6px; line-height: 1.3; }
.updated-date { margin: 0 0 39px 4px; color: #6b7078; font-size: 14px; line-height: 1.5; }
.intro-callout { display: grid; grid-template-columns: 20px 1fr; gap: 11px; min-height: 138px; margin: 0 0 25px; padding: 18px 17px 12px; color: #383b40; background: rgba(255, 247, 237, .94); border: 1px solid var(--callout-line); border-radius: 8px; box-shadow: 0 1px 4px rgba(133, 97, 49, .04); }
.intro-callout p { margin: 0; font-size: 17px; line-height: 1.56; }
.callout-icon { padding-top: 1px; color: var(--callout-heart); font-size: 22px; line-height: 1; }

.chapter { scroll-margin-top: calc(var(--header-height) + 26px); }
.chapter > summary { display: flex; align-items: center; gap: 7px; margin: 12px 0; margin-left: -13px; color: var(--ink); font-size: 28px; font-weight: 700; letter-spacing: -.45px; line-height: 1.42; list-style: none; cursor: pointer; outline: none; }
.intro-callout + .chapter > summary { margin-top: 24px; }
.chapter > summary::-webkit-details-marker { display: none; }
.chapter > summary:hover { color: #111827; }
.chapter > summary:focus-visible { color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.fold-arrow { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 7px solid #343a40; transition: transform .18s ease; }
.chapter[open] > summary .fold-arrow { transform: rotate(90deg); }
.chapter-body { padding: 0 0 10px 20px; color: #30343a; }
.chapter-body > p, .chapter-lead { margin-bottom: 18px; font-size: 16px; line-height: 1.75; }
.chapter-body h2 { margin: 35px 0 12px; color: #272b30; font-size: 22px; font-weight: 700; letter-spacing: -.16px; line-height: 1.45; }
.chapter-body h3 { margin: 23px 0 12px; color: #2c3036; font-size: 17px; font-weight: 600; line-height: 1.65; }

.image-block { width: fit-content; max-width: 100%; margin: 0 0 26px; }
.image-block img { display: block; max-width: 100%; height: auto; border: 1px solid #edf0f2; border-radius: 3px; box-shadow: 0 2px 8px rgba(31, 35, 41, .06); }
.image-wide { width: 100%; }
.image-wide img { width: 100%; }
figcaption { margin-top: 7px; color: #7d838c; font-size: 13px; line-height: 1.5; }

.video-card { width: 100%; margin: 18px 0 21px; overflow: hidden; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; box-shadow: 0 4px 13px rgba(31, 35, 41, .06); }
.video-frame { position: relative; aspect-ratio: 820 / 504; overflow: hidden; background: #101216; }
.video-frame video { position: relative; z-index: 2; display: block; width: 100%; height: 100%; background: #101216; }
.video-frame video:not([src]) { opacity: 0; }
.video-placeholder { position: absolute; inset: 0; z-index: 1; display: grid; gap: 10px; color: #e9edf3; font-size: 14px; place-content: center; text-align: center; background: linear-gradient(135deg, #171c26, #272d39); }
.video-placeholder::after { position: absolute; inset: auto 0 13px; color: rgba(226, 231, 239, .52); font-size: 12px; content: "视频内容由受控 /docs/media/ 流式提供"; }
.video-frame:has(video[src]) .video-placeholder { display: none; }
.play-mark { width: 44px; height: 44px; margin: 0 auto; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; }
.play-mark::after { display: block; width: 0; height: 0; margin: 13px 0 0 17px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #fff; content: ""; }
.video-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; color: #3a3f46; font-size: 14px; background: #fff; }
.video-meta strong { font-weight: 600; }
.video-meta span { color: #777e87; font-variant-numeric: tabular-nums; }
.operation-list { padding-left: 23px; margin: 0 0 22px; }
.operation-list li { padding-left: 2px; margin: 5px 0; }
.resource-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 21px 0 12px; }
.resource-links a { padding: 5px 9px; color: #235bdc; font-size: 14px; text-decoration: none; background: #f3f7ff; border: 1px solid #dfe9ff; border-radius: 5px; }
.resource-links a:hover, .resource-links a:focus-visible { color: #fff; background: var(--brand); border-color: var(--brand); outline: 0; }

.reference-panel, .troubleshooting { margin: 30px 0 14px; padding: 17px 19px; background: #fafbfc; border: 1px solid #e3e6ea; border-radius: 8px; }
.reference-panel h2, .troubleshooting h2 { margin: 0 0 6px; font-size: 18px; }
.reference-panel p, .troubleshooting p { margin: 0 0 12px; color: #555b63; font-size: 14px; line-height: 1.7; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #e5e7eb; }
th { color: #59606a; font-weight: 600; background: #f4f6f8; }
tbody tr:last-child td { border-bottom: 0; }
.troubleshooting dl { margin: 0; }
.troubleshooting dl > div { padding: 10px 0; border-bottom: 1px solid #e6e8eb; }
.troubleshooting dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.troubleshooting dt { margin-bottom: 2px; color: #30343a; font-weight: 600; font-size: 14px; }
.troubleshooting dd { margin: 0; color: #626973; font-size: 14px; line-height: 1.65; }
.troubleshooting code { padding: 1px 4px; color: #365c93; font-size: .92em; background: #eef3fa; border-radius: 3px; }
.troubleshooting.compact { margin-top: 24px; }

.download-grid { display: grid; gap: 12px; margin: 19px 0 26px; }
.download-item { display: grid; grid-template-columns: 41px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; box-shadow: 0 3px 10px rgba(31, 35, 41, .04); }
.download-icon { display: grid; width: 41px; height: 41px; color: #2e67e6; place-items: center; background: #eaf1ff; border-radius: 8px; }
.download-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.download-item h2 { margin: 0 0 1px; color: #30343a; font-size: 16px; }
.download-item p { margin: 0 0 5px; color: #727984; font-size: 12px; }
.download-item code { display: block; max-width: 450px; overflow: hidden; color: #5d6470; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.download-link { padding: 7px 10px; color: #2864e6; font-size: 13px; text-decoration: none; white-space: nowrap; background: #f0f5ff; border: 1px solid #cfe0ff; border-radius: 5px; }
.download-link:hover, .download-link:focus-visible { color: #fff; background: var(--brand); border-color: var(--brand); outline: 0; }

.search-dialog-backdrop { position: fixed; z-index: 70; inset: 0; display: grid; padding: 14vh 20px 20px; background: rgba(23, 28, 36, .34); place-items: start center; }
.search-dialog-backdrop[hidden] { display: none; }
.search-dialog { width: min(610px, 100%); max-height: min(610px, 72vh); padding: 18px; overflow: auto; background: #fff; border: 1px solid #dfe3e8; border-radius: 10px; box-shadow: 0 18px 60px rgba(16, 24, 40, .26); }
.search-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.search-dialog-header h2 { margin: 0; color: #24282d; font-size: 19px; line-height: 1.4; }
.search-field { display: grid; grid-template-columns: 23px 1fr; align-items: center; gap: 5px; min-height: 42px; padding: 0 12px; color: #757b84; border: 1px solid #cfd5dd; border-radius: 6px; }
.search-field:focus-within { color: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51, 112, 255, .14); }
.search-field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-field input { width: 100%; min-width: 0; padding: 7px 0; color: #292d32; background: transparent; border: 0; outline: 0; }
.search-field input::placeholder { color: #9aa0a8; }
.search-status { margin: 11px 1px 7px; color: #767d86; font-size: 13px; }
.search-results { display: grid; gap: 5px; }
.search-result { width: 100%; padding: 10px 11px; color: #2f343a; text-align: left; background: #fff; border: 1px solid transparent; border-radius: 6px; }
.search-result:hover, .search-result:focus-visible { background: #f5f8ff; border-color: #dbe6ff; outline: 0; }
.search-result strong, .search-result span { display: block; }
.search-result strong { font-size: 14px; font-weight: 600; }
.search-result span { margin-top: 2px; overflow: hidden; color: #777e87; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.floating-button { position: fixed; z-index: 20; right: 36px; display: grid; width: 40px; height: 40px; color: #4f5660; place-items: center; background: rgba(255, 255, 255, .97); border: 1px solid #e2e5e9; border-radius: 50%; box-shadow: 0 2px 8px rgba(31, 35, 41, .08); }
.floating-button:hover, .floating-button:focus-visible { color: var(--brand); border-color: #cbdcff; outline: 0; }
.floating-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.copy-link-button { bottom: 85px; }
.help-button { bottom: 34px; }
.toast { position: fixed; z-index: 80; bottom: 32px; left: 50%; max-width: calc(100vw - 34px); padding: 8px 12px; color: #fff; font-size: 13px; background: rgba(32, 35, 40, .93); border-radius: 5px; box-shadow: 0 4px 15px rgba(0, 0, 0, .15); transform: translateX(-50%); }
.toast[hidden] { display: none; }

body.sidebar-collapsed { --sidebar-width: 64px; }
body.sidebar-collapsed .document-sidebar { padding-right: 13px; padding-left: 13px; }
body.sidebar-collapsed .sidebar-toolbar { left: 18px; }
body.sidebar-collapsed .toc { margin-top: 38px; }
body.sidebar-collapsed .toc a { width: 36px; height: 30px; overflow: hidden; color: transparent; text-indent: -999px; background: transparent; }
body.sidebar-collapsed .toc a::after { display: block; width: 6px; height: 6px; margin: 9px auto 0; background: #adb3bc; border-radius: 50%; content: ""; }
body.sidebar-collapsed .toc a.is-active::after { background: var(--brand); }
body.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

@media (max-width: 1100px) {
  :root { --sidebar-width: 260px; }
  .document-content { width: min(var(--content-width), calc(100% - 54px)); margin-left: 27px; }
  .chapter > summary { font-size: 26px; }
  .sidebar-search-button { display: inline-flex; }
}

@media (max-width: 768px) {
  :root { --sidebar-width: min(286px, 82vw); }
  body { font-size: 15px; }
  .topbar { padding: 0 11px; }
  .main-nav-button { margin-right: 6px; }
  .breadcrumb { max-width: calc(100vw - 168px); }
  .breadcrumb-company { display: none; }
  .breadcrumb { grid-template-columns: minmax(0, 1fr); }
  .breadcrumb-separator { display: none; }
  .last-modified { grid-column: 1; }
  .topbar-actions { gap: 6px; }
  .login-button { height: 30px; padding: 0 8px; font-size: 12px; }
  .overflow-button { width: 29px; }
  .document-sidebar { box-shadow: 8px 0 22px rgba(28, 34, 43, .08); transform: translateX(0); }
  body.sidebar-collapsed .document-sidebar { width: var(--sidebar-width); padding: 56px 18px 34px; transform: translateX(-100%); }
  body.sidebar-collapsed .sidebar-toolbar { left: 15px; }
  body.sidebar-collapsed .toc { margin-top: 38px; }
  body.sidebar-collapsed .toc a { width: auto; height: auto; overflow: visible; color: #565b63; text-indent: 0; }
  body.sidebar-collapsed .toc a::after { display: none; }
  .document-shell, body.sidebar-collapsed .document-shell { margin-left: 0; }
  .document-content { width: 100%; margin-left: 0; padding: 31px 20px 95px; }
  .watermark-layer { grid-template-columns: repeat(2, 218px); }
  h1 { font-size: 29px; letter-spacing: -.4px; }
  .updated-date { margin-bottom: 25px; }
  .intro-callout { min-height: 0; padding: 15px; }
  .intro-callout p { font-size: 15px; }
  .chapter > summary { gap: 6px; margin: 20px 0; font-size: 22px; line-height: 1.48; }
  .fold-arrow { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; }
  .chapter-body { padding-left: 0; }
  .chapter-body h2 { font-size: 20px; }
  .chapter-body h3 { font-size: 16px; }
  .video-meta { padding: 9px 11px; }
  .download-item { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .download-icon { width: 36px; height: 36px; }
  .download-link { grid-column: 2; width: fit-content; }
  .download-item code { max-width: min(100%, 260px); }
  .floating-button { right: 18px; }
  .copy-link-button { bottom: 72px; }
  .help-button { bottom: 21px; }
  .search-dialog-backdrop { padding: 10vh 14px 14px; }
}

@media (max-width: 430px) {
  .breadcrumb { max-width: calc(100vw - 139px); }
  .login-button { padding: 0 6px; }
  .topbar-actions { gap: 2px; }
  .document-content { padding-right: 16px; padding-left: 16px; }
  .intro-callout { grid-template-columns: 18px 1fr; gap: 4px; }
  .intro-callout p { line-height: 1.65; }
  .reference-panel, .troubleshooting { padding: 14px; }
}

@media print {
  .topbar, .document-sidebar, .floating-button, .search-dialog-backdrop, .toast { display: none !important; }
  .document-shell { margin: 0; padding: 0; overflow: visible; }
  .document-content { width: 100%; padding: 0; }
  .watermark-layer { display: none; }
  .chapter { display: block; }
  .chapter > summary { margin: 18px 0 12px; }
  .chapter-body { display: block !important; }
  .video-card { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}