html, body { overflow: visible; margin: 0; padding: 0; }
  body { background: var(--bg-base-default); }

  /* ===== 顶部导航（由 navbar.js 渲染，此处提供布局样式） ===== */
  .navbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 var(--spacer-24);
    background: var(--bg-base-secondary); border-bottom: 1px solid var(--border-neutral-l1);
  }
  .navbar__brand {
    display: inline-flex; align-items: center; gap: var(--spacer-8);
    font-family: var(--heading-sm-font-family); font-size: var(--heading-sm-font-size);
    line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight);
    color: var(--text-default); text-decoration: none;
  }
  .navbar__brand-icon { width: 36px; height: 36px; object-fit: contain; }
  .navbar__nav { display: inline-flex; align-items: center; gap: var(--spacer-4); }
  .navbar__link {
    display: inline-flex; align-items: center; gap: var(--spacer-6);
    height: 32px; padding: 0 var(--spacer-12); border-radius: var(--radius-8);
    font-size: var(--body-base-font-size); line-height: var(--body-base-line-height);
    color: var(--text-secondary); text-decoration: none; transition: background .12s ease, color .12s ease;
  }
  .navbar__link:hover { background: var(--bg-overlay-l2); color: var(--text-default); }
  .navbar__link.is-active { background: var(--bg-overlay-l1); color: var(--text-default); font-weight: var(--font-weight-medium); }
  .navbar__divider { width: 1px; height: 20px; background: var(--border-neutral-l1); margin: 0 var(--spacer-8); }
  .navbar__user { display: inline-flex; align-items: center; gap: var(--spacer-8); font-size: var(--body-sm-font-size); color: var(--text-secondary); }

  /* ===== 整体三栏布局 ===== */
  .page-layout { display: flex; align-items: flex-start; gap: 0; max-width: 1400px; margin: 0 auto; }

  /* ===== 左侧章节导航（复用后台侧栏视觉） ===== */
  .guide-sidebar {
    width: 224px; flex-shrink: 0; padding: var(--spacer-16) var(--spacer-12);
    position: sticky; top: 57px; align-self: flex-start;
    height: calc(100vh - 57px); overflow-y: auto;
    border-right: 1px solid var(--border-neutral-l1); box-sizing: border-box;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .guide-sidebar::-webkit-scrollbar { display: none; }
  .guide-sidebar__title {
    font-size: var(--body-sm-font-size); font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary); letter-spacing: .04em; padding: 0 var(--spacer-8) var(--spacer-8);
  }
  .sidebar__items { position: relative; display: flex; flex-direction: column; gap: var(--spacer-2); }
  .sidebar__item {
    display: flex; align-items: center; gap: var(--spacer-8); min-height: 34px;
    padding: var(--spacer-6) var(--spacer-8); border-radius: var(--radius-8);
    color: var(--text-default); font-family: var(--body-base-font-family);
    font-size: var(--body-base-font-size); line-height: var(--body-base-line-height);
    cursor: pointer; position: relative; z-index: 1; user-select: none;
    transition: background .12s ease;
  }
  .sidebar__item:hover { background: var(--bg-overlay-l2); }
  .sidebar__items.is-ready .sidebar__item.is-active { background: transparent; font-weight: var(--font-weight-medium); }
  .sidebar__indicator {
    position: absolute; top: 0; left: 0; width: 100%; height: 34px;
    background: var(--bg-overlay-l3); border-radius: var(--radius-8);
    transition: transform .28s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 0;
  }
  .sidebar__icon { width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; opacity: .85; }

  /* ===== 两级导航：模块分组 + 子项 ===== */
  .sidebar__group { position: relative; z-index: 1; }
  .sidebar__group-label {
    display: flex; align-items: center; gap: var(--spacer-8); min-height: 34px;
    padding: var(--spacer-6) var(--spacer-8); border-radius: var(--radius-8);
    color: var(--text-default); font-size: var(--body-base-font-size); font-weight: var(--font-weight-medium);
    cursor: pointer; user-select: none; transition: background .12s ease;
  }
  .sidebar__group-label:hover { background: var(--bg-overlay-l2); }
  .sidebar__group-chevron { width: 14px; height: 14px; margin-left: auto; opacity: .6; transition: transform .2s ease; }
  .sidebar__group.is-collapsed .sidebar__group-chevron { transform: rotate(-90deg); }
  .sidebar__subitems { display: flex; flex-direction: column; gap: var(--spacer-2); margin: 2px 0 2px 12px; padding-left: 12px; border-left: 1px solid var(--border-neutral-l1); }
  .sidebar__group.is-collapsed .sidebar__subitems { display: none; }
  .sidebar__item--sub { min-height: 30px; font-size: 13.5px; }

  /* ===== 中间内容区 ===== */
  .guide-main { flex: 1; min-width: 0; max-width: 860px; padding: var(--spacer-24) var(--spacer-32) var(--spacer-48); }
  .guide-section { display: none; }
  .guide-section.is-active { display: block; animation: guideFade .25s ease-out; }
  @keyframes guideFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .guide-section h1 {
    font-size: var(--heading-lg-font-size, 24px); line-height: 1.3;
    font-weight: var(--font-weight-semibold); color: var(--text-default);
    margin: 0 0 var(--spacer-8); scroll-margin-top: 72px;
  }
  .guide-section .lead { color: var(--text-secondary); font-size: var(--body-base-font-size); line-height: 1.7; margin: 0 0 var(--spacer-20); }
  .guide-section h2 {
    font-size: 17px; font-weight: var(--font-weight-semibold); color: var(--text-default);
    margin: var(--spacer-32) 0 var(--spacer-12); padding-bottom: var(--spacer-8);
    border-bottom: 1px solid var(--border-neutral-l1); scroll-margin-top: 72px;
  }
  .guide-section h3 { font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--text-default); margin: var(--spacer-20) 0 var(--spacer-8); scroll-margin-top: 72px; }
  .guide-section p { color: var(--text-default); font-size: var(--body-base-font-size); line-height: 1.8; margin: 0 0 var(--spacer-12); }
  .guide-section ul, .guide-section ol { color: var(--text-default); font-size: var(--body-base-font-size); line-height: 1.8; margin: 0 0 var(--spacer-12); padding-left: 22px; }
  .guide-section li { margin-bottom: var(--spacer-6); }
  .guide-section li > strong { color: var(--text-default); }
  .guide-section code { font-family: var(--code-editor-font-family, monospace); font-size: 13px; background: var(--bg-overlay-l1); padding: 1px 6px; border-radius: var(--radius-4, 4px); color: var(--text-default); }

  /* 截图卡片 */
  .guide-shot {
    margin: var(--spacer-16) 0 var(--spacer-20); border: 1px solid var(--border-neutral-l1);
    border-radius: var(--radius-8); overflow: hidden; background: var(--bg-base-secondary);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  .guide-shot img { display: block; width: 100%; max-width: 100%; height: auto; }
  .guide-shot figcaption {
    padding: var(--spacer-8) var(--spacer-12); font-size: var(--body-sm-font-size);
    color: var(--text-tertiary); background: var(--bg-base-default); border-top: 1px solid var(--border-neutral-l1);
  }

  /* 提示框 */
  .guide-callout {
    display: flex; gap: var(--spacer-8); padding: var(--spacer-12) var(--spacer-16);
    border-radius: var(--radius-8); margin: 0 0 var(--spacer-16);
    font-size: var(--body-base-font-size); line-height: 1.7;
    background: var(--bg-overlay-l1); border: 1px solid var(--border-neutral-l1); color: var(--text-default);
  }
  .guide-callout img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
  .guide-callout--tip { background: color-mix(in srgb, var(--bg-brand) 6%, var(--bg-base-default)); border-color: color-mix(in srgb, var(--bg-brand) 25%, transparent); }

  /* 步骤编号 */
  .guide-steps { counter-reset: gstep; list-style: none; padding-left: 0; }
  .guide-steps > li { counter-increment: gstep; position: relative; padding-left: 34px; margin-bottom: var(--spacer-12); }
  .guide-steps > li::before {
    content: counter(gstep); position: absolute; left: 0; top: 2px;
    width: 22px; height: 22px; border-radius: 50%; background: var(--bg-brand); color: #fff;
    font-size: 13px; font-weight: var(--font-weight-semibold); display: flex; align-items: center; justify-content: center;
  }

  /* ===== 右侧目录 ===== */
  .guide-toc {
    width: 200px; flex-shrink: 0; padding: var(--spacer-24) var(--spacer-16);
    position: sticky; top: 57px; align-self: flex-start; height: calc(100vh - 57px); overflow-y: auto;
    box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none;
  }
  .guide-toc::-webkit-scrollbar { display: none; }
  .guide-toc__title { font-size: var(--body-sm-font-size); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); margin-bottom: var(--spacer-12); }
  .guide-toc a {
    display: block; padding: var(--spacer-6) 0 var(--spacer-6) var(--spacer-12);
    font-size: var(--body-sm-font-size); color: var(--text-secondary); text-decoration: none;
    border-left: 2px solid var(--border-neutral-l1); transition: color .12s ease, border-color .12s ease;
    line-height: 1.5;
  }
  .guide-toc a:hover { color: var(--text-default); }
  .guide-toc a.is-active { color: var(--text-default); font-weight: var(--font-weight-medium); border-left-color: var(--bg-brand); }
  .guide-toc a.toc-h3 { padding-left: var(--spacer-24); font-size: 12.5px; }

  /* 响应式 */
  @media (max-width: 1100px) { .guide-toc { display: none; } }
  @media (max-width: 820px) {
    .guide-sidebar { width: 64px; padding: var(--spacer-12) var(--spacer-6); }
    .guide-sidebar__title, .sidebar__item span { display: none; }
    .guide-main { padding: var(--spacer-16); }
  }

  /* ===== 移动端适配 (html.is-mobile / ≤768px) ===== */
  /* 目录浮窗按钮 / 遮罩：桌面端始终隐藏 */
  .guide-nav-fab { display: none; }
  .guide-nav-scrim { display: none; }

  @media (max-width: 768px) {
    /* 左侧栏移出文档流，正文单列铺满 */
    .page-layout { display: block; }
    .guide-main { max-width: 100%; padding: var(--spacer-16); }
    .guide-section p, .guide-section li, .guide-section code { overflow-wrap: anywhere; }

    /* 正文表格横向滚动兜底（代码块 / mermaid 本身已有 overflow-x:auto） */
    .guide-main table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .guide-main pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 左侧章节导航 → 抽屉式目录（由浮动按钮唤起） */
    .guide-sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 210;
      width: min(80vw, 300px); height: auto; max-height: 100vh;
      padding: var(--spacer-16) var(--spacer-12);
      background: var(--bg-base-secondary);
      border-right: 1px solid var(--border-neutral-l1);
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      transform: translateX(-105%);
      transition: transform .25s ease;
      box-shadow: none;
    }
    .guide-sidebar.is-open { transform: none; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
    /* 恢复 ≤820 图标栏模式下隐藏的标题与文字 */
    .guide-sidebar__title { display: block; }
    .guide-sidebar .sidebar__item span { display: inline; }
    .guide-sidebar .sidebar__item { font-size: var(--body-base-font-size); }

    /* 抽屉遮罩（html 前缀抬高优先级，压过 mobile-core 的 html.is-desktop .m-only） */
    html .guide-nav-scrim {
      display: block; position: fixed; inset: 0; z-index: 200;
      background: var(--bg-overlay-l4);
      opacity: 0; pointer-events: none; transition: opacity .2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    html .guide-nav-scrim.is-open { opacity: 1; pointer-events: auto; }

    /* 目录浮窗按钮（右下角，适配 iOS 安全区） */
    html .guide-nav-fab {
      display: flex; align-items: center; justify-content: center;
      position: fixed; right: var(--spacer-16);
      bottom: calc(var(--spacer-16) + env(safe-area-inset-bottom, 0px));
      z-index: 150; width: 44px; height: 44px;
      border: none; border-radius: var(--radius-full);
      background: var(--bg-brand); color: var(--text-white);
      cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
      -webkit-tap-highlight-color: transparent;
    }
    .guide-nav-fab::before {
      content: ""; display: block; width: 20px; height: 20px; background: currentColor;
      -webkit-mask: url("/trae-work/assets/icons/Bar-list.svg") center / contain no-repeat;
      mask: url("/trae-work/assets/icons/Bar-list.svg") center / contain no-repeat;
    }
    .guide-nav-fab:active { transform: scale(.96); }
  }