:root {
  /* ==========================================================================
     语义色板 —— 与「自媒体AI工作台」dashboard、MCP Key 管理后台对齐
     dashboard: --accent #141414     管理后台: --brand #2f5cff
     同一支蓝色、同一套中性色阶、同一组圆角与阴影阶梯
     ========================================================================== */
  --brand: #141414;
  --brand-strong: #2b2b2b;
  --brand-soft: #f5f5f5;
  --brand-tint: #fafafa;

  --page: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f5f5f5;

  --text: #141414;
  --text-2: #4a4a4a;
  --text-3: #8a8a8a;

  --divider: #ebebeb;
  --divider-strong: #e0e0e0;

  --ok: #141414;
  --ok-soft: #f5f5f5;
  --warn: #8a8a8a;
  --warn-soft: #fafafa;
  --danger: #4a4a4a;
  --danger-soft: #f5f5f5;

  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 18px 36px -22px rgba(16, 24, 40, 0.28);
  --shadow: 0 4px 14px rgba(45, 55, 72, 0.055);

  /* 动效统一节奏；末尾的 reduced-motion 段落会整体关掉 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.16s;
  --dur: 0.26s;
  --dur-slow: 0.44s;

  /* ------- 历史变量名：全站仍有 300+ 处引用，统一指向上面的语义色 ------- */
  --paper: var(--page);
  --paper-light: var(--surface);
  --paper-deep: var(--surface-muted);
  --ink: var(--text);
  --ink-soft: var(--text-2);
  --ink-faint: var(--text-3);
  --vermillion: var(--brand);
  --vermillion-deep: var(--brand-strong);
  --green: var(--ok);
  --yellow: var(--warn);
  --line: var(--divider);
  --line-strong: var(--divider-strong);

  /* ------- 字体：与 dashboard 同一套无衬线栈 ------- */
  --sans: "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --display: var(--sans);
  --ui: var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --content: 800px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 36px;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(20, 20, 20, 0.065), transparent 24rem),
    radial-gradient(circle at 90% 38%, rgba(20, 20, 20, 0.055), transparent 28rem),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(20, 20, 20, 0.018) 79px 80px),
    var(--paper);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.82;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.22;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

::selection {
  color: var(--paper-light);
  background: var(--vermillion);
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

code,
kbd,
pre {
  font-family: var(--mono);
}

code {
  font-size: 0.88em;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 1001;
  padding: 10px 18px;
  color: var(--paper-light);
  background: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
  text-decoration: none;
  transform: translate(-50%, -180%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.reading-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  height: 4px;
  background: rgba(20, 20, 20, 0.08);
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vermillion);
  transform-origin: left;
}

.masthead {
  position: relative;
  min-height: min(860px, 94vh);
  padding: 28px clamp(28px, 6vw, 96px) 42px;
  overflow: hidden;
  color: var(--paper-light);
  background:
    linear-gradient(115deg, transparent 56%, rgba(255, 255, 255, 0.045) 56% 72%, transparent 72%),
    radial-gradient(circle at 76% 14%, rgba(138, 138, 138, 0.14), transparent 22rem),
    #141414;
}

.masthead::before {
  position: absolute;
  right: -0.02em;
  bottom: -0.33em;
  color: rgba(238, 242, 247, 0.025);
  content: "GUIDE";
  font-family: var(--ui);
  font-size: clamp(120px, 22vw, 380px);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 1;
}

.masthead::after {
  position: absolute;
  top: 0;
  left: clamp(28px, 6vw, 96px);
  width: 1px;
  height: 100%;
  background: rgba(238, 242, 247, 0.1);
  content: "";
}
.hero {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.65fr);
  gap: clamp(60px, 9vw, 150px);
  align-items: center;
  min-height: 650px;
  padding: 72px 0 48px;
}

.hero-copy {
  animation: rise-in 760ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.section-kicker,
.route-label {
  margin: 0;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.17em;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 790px;
  margin: 34px 0 28px;
  font-family: var(--display);
  font-size: clamp(60px, 7.2vw, 116px);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.98;
}

.hero h1 span {
  display: block;
  color: var(--yellow);
}

.page-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, var(--content));
  gap: clamp(54px, 7vw, 110px);
  max-width: 1130px;
  margin: 0 auto;
  padding: 110px 30px 160px;
}

.guide-section {
  margin-bottom: 150px;
  /* 锚点落点只由 html 的 scroll-padding-top 决定。这里不要再叠一层二级偏移
     （历史上是 34px），否则跳转后标题离吸顶目录条过远。 */
}

.section-heading {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

.section-kicker {
  color: var(--brand);
}

.section-heading h2 {
  margin: 11px 0 14px;
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.14;
}

.section-heading p:last-child {
  max-width: 640px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.callout {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 18px;
  margin-top: 28px;
  padding: 22px 25px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.34);
}

.callout-warn {
  border-color: rgba(20, 20, 20, 0.4);
  background: rgba(20, 20, 20, 0.06);
}

.callout-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--vermillion);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 800;
}

.callout b,
.callout p {
  display: block;
}

.callout b {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.callout p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.client-card {
  position: relative;
  min-height: 430px;
  padding: 30px;
  background: var(--paper-light);
}

.client-card h3 {
  margin: 26px 0 14px;
  font-family: var(--display);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.25;
}

.client-card h3 small {
  color: var(--ink-faint);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.client-card > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

.client-card ul {
  margin: 21px 0 26px;
  padding: 0;
  list-style: none;
}

.client-card li {
  position: relative;
  margin: 8px 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.client-card li::before {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--green);
  content: "";
}

.client-card > a {
  color: var(--vermillion-deep);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 4px;
}
.code-panel mark {
  padding: 2px 5px;
  color: #141414;
  background: var(--yellow);
  font-family: var(--ui);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.code-panel {
  overflow: hidden;
  color: #ffffff;
  background: #141414;
  box-shadow: 0 24px 50px rgba(20, 20, 20, 0.16);
}

.code-toolbar {
  display: flex;
  min-height: 48px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--ui);
}

.code-toolbar > span {
  display: flex;
  gap: 6px;
  align-items: center;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.code-toolbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a4a4a;
}

.code-toolbar i:first-child {
  margin-left: 2px;
  background: var(--vermillion);
}

.code-toolbar i:nth-child(2) {
  background: var(--yellow);
}

.code-toolbar i:nth-child(3) {
  margin-right: 9px;
  background: #141414;
}

.code-toolbar button,
.command-hero button {
  min-height: 32px;
  padding: 6px 12px;
  color: var(--paper-light);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 160ms ease, border 160ms ease, background 160ms ease;
}

.code-toolbar button:hover,
.command-hero button:hover {
  color: var(--ink);
  border-color: var(--yellow);
  background: var(--yellow);
}

.code-panel pre {
  margin: 0;
  padding: clamp(20px, 4vw, 34px);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.8;
  tab-size: 2;
}

.code-panel code {
  font-size: inherit;
}

.mcp-prompt-intro {
  padding: clamp(25px, 4vw, 38px);
  border: 1px solid var(--line);
  border-bottom: 0;
  background:
    linear-gradient(135deg, rgba(138, 138, 138, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.52);
}

.mcp-prompt-intro .route-label {
  color: var(--vermillion);
}

.mcp-prompt-intro h3 {
  margin: 8px 0 10px;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.mcp-prompt-intro .key-hint {
  max-width: 680px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

.image-button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  border: 1px solid var(--line);
  background: var(--paper-deep);
  cursor: zoom-in;
}

.image-button img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 300ms ease, filter 300ms ease;
}

.image-button:hover img {
  filter: contrast(1.03);
  transform: scale(1.015);
}

figcaption {
  margin-top: 8px;
  color: var(--ink-faint);
  font-family: var(--ui);
  font-size: 10px;
  line-height: 1.45;
}

figcaption span {
  margin-right: 7px;
  color: var(--vermillion);
  font-weight: 800;
}

.route-label {
  color: var(--vermillion);
}

.code-panel-prompt {
  box-shadow: none;
}

.command-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(32px, 6vw, 58px);
  color: var(--paper-light);
  background:
    linear-gradient(120deg, transparent 0 70%, rgba(138, 138, 138, 0.1) 70%),
    var(--ink);
  box-shadow: var(--shadow);
}

.command-hero .route-label {
  color: var(--yellow);
}

.command-hero code {
  display: block;
  margin: 11px 0 18px;
  color: var(--yellow);
  font-size: clamp(38px, 7vw, 70px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
}

.command-hero p:last-child {
  max-width: 570px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.command-hero button {
  min-height: 46px;
  padding: 10px 18px;
}

.drawer-list {
  border-top: 1px solid var(--line-strong);
}

.drawer-list > details {
  border-bottom: 1px solid var(--line-strong);
}

.drawer-list > details > summary {
  display: grid;
  grid-template-columns: 50px 1fr 28px;
  gap: 20px;
  align-items: center;
  min-height: 92px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

.drawer-list summary::-webkit-details-marker {
  display: none;
}

.drawer-list summary b,
.drawer-list summary small {
  display: block;
}

.drawer-list summary b {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.drawer-list summary small {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 12px;
}

.drawer-list summary i {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.drawer-list summary i::before,
.drawer-list summary i::after {
  position: absolute;
  top: 11px;
  left: 3px;
  width: 18px;
  height: 1px;
  background: var(--vermillion);
  content: "";
  transition: transform 180ms ease;
}

.drawer-list summary i::after {
  transform: rotate(90deg);
}

.drawer-list details[open] summary i::after {
  transform: rotate(0deg);
}

.drawer-content {
  padding: 12px 0 52px 70px;
}

.drawer-content > p {
  color: var(--ink-soft);
  font-size: 14px;
}

.drawer-content h3 {
  margin: 38px 0 12px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.35;
}

.when-needed {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 17px 20px;
  border-left: 4px solid var(--yellow);
  background: var(--warn-soft);
}

.when-needed b {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.when-needed p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.drawer-content .code-panel {
  margin: 24px 0;
}

.lightbox {
  width: min(94vw, 1500px);
  max-width: none;
  height: min(92vh, 1000px);
  max-height: none;
  padding: 0;
  color: var(--paper-light);
  border: 0;
  background: #131318;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
}

.lightbox::backdrop {
  background: rgba(14, 15, 13, 0.82);
  backdrop-filter: blur(8px);
}

.lightbox-stage {
  display: grid;
  height: calc(100% - 60px);
  padding: 34px 34px 0;
  place-items: center;
}

.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox > p {
  height: 60px;
  margin: 0;
  padding: 15px 34px;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--ui);
  font-size: 11px;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: var(--paper-light);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(23, 26, 24, 0.8);
  cursor: pointer;
  font-family: var(--ui);
  font-size: 22px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  padding: 11px 16px;
  color: var(--paper-light);
  background: var(--green);
  font-family: var(--ui);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.noscript-note {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 1100;
  padding: 12px 18px;
  color: var(--paper-light);
  background: var(--vermillion-deep);
  font-family: var(--ui);
  font-size: 12px;
  text-align: center;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes soft-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1040px) {
  .masthead {
    min-height: auto;
  }

  .hero {
    grid-template-columns: 1fr minmax(300px, 0.55fr);
    gap: 55px;
    min-height: 600px;
  }

  .page-shell {
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 44px;
    padding-right: 28px;
    padding-left: 28px;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 16px;
  }

  .masthead {
    min-height: auto;
    padding-right: 28px;
    padding-left: 28px;
  }

  .masthead::after {
    left: 28px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 55px;
    min-height: auto;
    padding: 85px 0 70px;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero h1 {
    max-width: 700px;
  }

  .page-shell {
    display: block;
    padding-top: 70px;
  }

  

  main {
    max-width: var(--content);
    margin: 0 auto;
  }

  .guide-section {
    margin-bottom: 120px;
  }

  .section-heading {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .command-hero {
    grid-template-columns: 1fr;
  }

  .command-hero button {
    justify-self: start;
  }

}

@media (max-width: 620px) {
  .masthead {
    padding: 20px 20px 34px;
  }

  .masthead::after {
    left: 20px;
  }

  .hero {
    padding: 64px 0 48px;
  }

  .hero h1 {
    margin: 26px 0 23px;
    font-size: clamp(53px, 16vw, 74px);
  }

  .page-shell {
    padding: 48px 18px 100px;
  }

  .guide-section {
    margin-bottom: 100px;
  }

  .section-heading {
    display: block;
    margin-bottom: 36px;
  }

  .section-heading h2 {
    font-size: 39px;
  }

  .section-heading p:last-child {
    font-size: 14px;
  }
  .client-card,
  .command-hero {
    padding: 25px;
  }

  .client-grid {
    grid-template-columns: 1fr;
  }

  .client-card {
    min-height: auto;
  }

  .code-panel {
    margin-right: -18px;
    margin-left: -18px;
    border-right: 0;
    border-left: 0;
  }

  .code-panel pre {
    padding: 20px 18px;
    font-size: 11px;
  }

  .command-hero code {
    font-size: 40px;
  }

  .drawer-list > details > summary {
    grid-template-columns: 34px 1fr 24px;
    gap: 10px;
  }

  .drawer-list summary b {
    font-size: 20px;
  }

  .drawer-list summary small {
    font-size: 10px;
  }

  .drawer-content {
    padding: 10px 0 42px;
  }

  .when-needed {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .lightbox {
    width: 100vw;
    height: 100vh;
  }

  .lightbox-stage {
    padding: 52px 12px 0;
  }
}

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

@media print {
  body {
    color: #141414;
    background: #fff;
    font-size: 11pt;
  }

  body::before,
  .reading-progress,
  .code-toolbar button,
  .command-hero button,
  .lightbox,
  .toast,
  .noscript-note {
    display: none !important;
  }

  .masthead {
    min-height: 0;
    padding: 30px;
    color: #141414;
    background: #fff;
    border-bottom: 1px solid #141414;
  }

  .hero {
    display: block;
    min-height: 0;
    padding: 20px 0;
  }

  .hero h1,
  .hero h1 span {
    color: #141414;
  }

  .page-shell {
    display: block;
    max-width: none;
    padding: 30px;
  }

  .guide-section {
    margin-bottom: 50px;
    break-before: page;
  }

  .guide-section:first-child {
    break-before: auto;
  }

  .client-card,
  .callout,
  details,
  figure {
    break-inside: avoid;
  }

  .drawer-list details > * {
    display: block !important;
  }
}

/* Reading-first revision: lighter entry, larger index, and paired tutorial steps. */
.masthead {
  min-height: 0;
  padding: 64px clamp(28px, 6vw, 92px) 72px;
  overflow: visible;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(20, 20, 20, 0.055) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(rgba(20, 20, 20, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
    var(--paper-light);
  border-top: 5px solid var(--vermillion);
  border-bottom: 1px solid var(--line-strong);
}

.masthead::before,
.masthead::after {
  display: none;
}

.hero {
  display: block;
  min-height: 0;
  max-width: 1240px;
  padding: 0;
}

.hero-copy {
  display: block;
  padding-bottom: 44px;
  animation: rise-in 520ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero h1 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(42px, 5.2vw, 68px);
  letter-spacing: -0.065em;
  line-height: 1.04;
  white-space: nowrap;
}

.guide-portals {
  display: grid;
  grid-template-columns: 1.12fr 0.94fr;
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 46px rgba(45, 55, 72, 0.08);
  animation: rise-in 520ms 100ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.portal-card {
  display: flex;
  min-height: 236px;
  padding: 28px 30px;
  flex-direction: column;
  color: var(--ink);
  border: 0;
  background: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.portal-card:hover {
  position: relative;
  z-index: 1;
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(45, 55, 72, 0.12);
}

.portal-card[aria-selected="true"] {
  position: relative;
  z-index: 1;
  background: #f5f5f5;
  box-shadow: inset 0 5px 0 var(--vermillion);
}

.portal-heading {
  display: flex;
  gap: 13px;
  align-items: baseline;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.portal-heading > span {
  color: var(--vermillion);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 800;
}

.portal-title {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.portal-description {
  display: block;
  margin: 26px 0 24px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

.portal-steps {
  display: block;
  margin-top: 9px;
}

.portal-steps > span {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid var(--line);
}

.portal-steps > span:last-child {
  border-bottom: 1px solid var(--line);
}

.portal-steps i {
  color: var(--vermillion);
  font-family: var(--ui);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.portal-steps b {
  font-size: 14px;
  font-weight: 650;
}

.page-shell {
  grid-template-columns: 240px minmax(0, 860px);
  gap: clamp(56px, 6vw, 90px);
  max-width: 1250px;
  padding-top: 96px;
  padding-bottom: 80px;
}
.guide-page[hidden] {
  display: none;
}

.guide-page.is-active {
  animation: soft-in 260ms ease both;
}

.advanced-tutorial-rows {
  margin-top: 28px;
}

.advanced-tutorial-rows .tutorial-row {
  min-height: 300px;
}

.tutorial-copy a {
  color: var(--vermillion-deep);
  text-underline-offset: 3px;
}

.recommendation-tag {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 13px;
  align-items: center;
  color: var(--paper-light);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.tag-beginner {
  background: var(--vermillion);
}

.tag-balanced {
  background: var(--green);
}

.client-card {
  min-height: 440px;
  padding: 32px;
}

.client-card h3 {
  margin-top: 30px;
}

.tutorial-rows {
  border-top: 1px solid var(--line-strong);
}

.tutorial-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.42fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  min-height: 320px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line-strong);
}

.tutorial-copy {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
  align-items: start;
}

.tutorial-copy > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: var(--vermillion);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 800;
}

.tutorial-copy h3 {
  margin: 1px 0 10px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.tutorial-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.75;
}

.tutorial-media {
  min-width: 0;
  margin: 0;
}

.tutorial-media .image-button {
  background: #f5f5f5;
  box-shadow: 0 12px 30px rgba(45, 55, 72, 0.1);
}

.tutorial-media .image-button img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
}

.tutorial-media figcaption {
  text-align: right;
}

.workspace-rows {
  margin-top: 0;
}

@media (max-width: 1040px) {
  .masthead {
    padding-right: 34px;
    padding-left: 34px;
  }

  .page-shell {
    grid-template-columns: 205px minmax(0, 1fr);
    gap: 46px;
  }
}

@media (max-width: 820px) {
  .guide-portals {
    grid-template-columns: repeat(2, 1fr);
  }

  .portal-card {
    min-height: 210px;
  }

  .page-shell {
    display: block;
    padding-top: 54px;
  }

  .tutorial-row {
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
    gap: 28px;
  }
}

@media (max-width: 620px) {
  .masthead {
    padding: 42px 18px 48px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .guide-portals {
    grid-template-columns: 1fr;
  }

  .portal-primary {
    grid-column: auto;
  }

  .portal-card {
    min-height: 190px;
  }

  .page-shell {
    padding-top: 38px;
  }
  .client-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-row {
    display: block;
    min-height: 0;
    padding: 30px 0;
  }

  .tutorial-media {
    margin-top: 22px;
  }
}

@media (max-width: 620px) {

  .mcp-prompt-intro {
    padding: 24px 20px;
  }
}

@media print {
  .masthead {
    padding: 24px 30px;
  }

  .guide-portals {
    display: none;
  }

  .guide-page[hidden] {
    display: block !important;
  }

  .tutorial-row {
    min-height: 0;
    break-inside: avoid;
  }
}

/* ============================================================================
   视觉收口层
   —— 把本页与「自媒体AI工作台」dashboard、MCP Key 管理后台拉到同一套视觉语言：
      同一支主色蓝、白卡片 + 浅灰底、无衬线字体、16/12/9 圆角阶梯、统一动效节奏。
   颜色与字体已由 :root 统一切换，这一层负责「尺度、圆角、层次、动效」。
   ============================================================================ */

/* ---------- 1. 排版尺度：衬线换无衬线后，字号与行高都要收紧 ---------- */
body {
  font-size: 16px;
  line-height: 1.75;
  background: var(--page);
}

body::before {
  display: none; /* 原纸质噪点层，在新体系里只剩脏点 */
}

.hero h1 {
  font-size: clamp(38px, 4.7vw, 58px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.14;
}

.section-heading h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

/* 无衬线在中等字号下需要更实的字重才立得住 */
.portal-title,
.client-card h3,
.drawer-list summary b,
.tutorial-copy h3,
.callout b {
  font-weight: 600;
}

/* ---------- 2. 顶部：白底 + 极淡蓝网格 + 4px 品牌条 ---------- */
.masthead {
  /* 右上角那块光斑是负偏移画出去的，不裁就会撑出横向滚动条（实测 +140px） */
  overflow: hidden;
  padding-top: 52px;
  padding-bottom: 56px;
  background:
    linear-gradient(90deg, rgba(20, 20, 20, 0.045) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(20, 20, 20, 0.03) 1px, transparent 1px) 0 0 / 72px 72px,
    var(--surface);
  border-top: 4px solid var(--brand);
  border-bottom: 0; /* 分隔线交给下面的横向条，免得两条通长横线把页头切成一条一条 */
}

/* ---------- 3. 圆角阶梯：与后台 / dashboard 的 16 / 12 / 9 对齐 ---------- */
.guide-portals,
.client-grid {
  overflow: hidden; /* 这三处用 1px 背景缝做分隔线，加圆角必须裁切，否则缝隙会在四角露底 */
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-lg);
  background: var(--divider-strong);
  box-shadow: var(--shadow-sm);
}

.portal-card,
.client-card {
  border-radius: 0; /* 由父级 overflow 裁切 */
}

.mcp-prompt-block {
  overflow: hidden;
  border-radius: var(--radius);
}

.mcp-prompt-block .mcp-prompt-intro {
  border-radius: var(--radius) var(--radius) 0 0;
}

.mcp-prompt-block .code-panel {
  border-radius: 0 0 var(--radius) var(--radius);
}

.mcp-prompt-block .mcp-prompt-intro {
  border-color: var(--divider);
  background:
    linear-gradient(135deg, rgba(20, 20, 20, 0.07), transparent 42%),
    var(--brand-tint);
}

.drawer-list details,
.callout,
.code-panel,
.command-hero,
.when-needed,
.tutorial-media img,
.tutorial-media .image-button,
.skip-link {
  border-radius: var(--radius);
}

.code-panel {
  overflow: hidden;
}

.tutorial-media img {
  border: 1px solid var(--divider);
}

.drawer-list details,
.callout {
  box-shadow: var(--shadow-sm);
}

/* ---------- 4. 动效：全部走 :root 里的 --dur / --ease，不再各处写死时长 ---------- */

/* 4.1 按钮与链接：跟后台同一套手感（hover 变底色、按下沉 1px） */
a,
button {
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

button:active,
[data-copy-target]:active,
.portal-card:active {
  transform: translateY(1px);
}

/* 正文里的链接：品牌蓝 + hover 时下划线由左展开 */
.guide-section p a,
.guide-section li a,
.callout a,
.when-needed a {
  color: var(--brand);
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  text-decoration: none;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}

.guide-section p a:hover,
.guide-section li a:hover,
.callout a:hover,
.when-needed a:hover {
  color: var(--brand-strong);
  background-size: 100% 1px;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 4.3 抽屉：展开时内容淡入、指示符旋转 */
.drawer-list summary i {
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.drawer-list details[open] > summary i {
  transform: rotate(180deg);
}

.drawer-list details[open] > .drawer-content {
  animation: panel-in var(--dur-slow) var(--ease) both;
}

/* 4.4 截图 */
.image-button img {
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.image-button:hover img {
  transform: scale(1.012);
  box-shadow: var(--shadow-md);
}

/* 4.6 阅读进度条 */
.reading-progress span {
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
  transition: width 0.1s linear;
}

/* 4.7 滚动淡入：由 app.js 打上 .js-anim 与 [data-reveal]；
       没有 JS 或用户偏好减少动效时，这里不生效，内容始终可见 */
.js-anim [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(16px);
}

.js-anim [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease) var(--reveal-delay, 0ms);
}

/* 代码块：深灰黑调成带蓝调的深色，与主色更靠 */
.code-panel {
  background: #141414;
  box-shadow: 0 20px 44px rgba(30, 33, 48, 0.18);
}

/* 代码窗口的三个圆点恢复「交通灯」惯例（原来的红被统一成品牌蓝了） */
.code-toolbar i:first-child {
  background: var(--danger);
}

/* 「朱红」原来同时承担了强调和警示两种语义，统一成品牌蓝之后警示会丢语义，
   这里把警示类单独拉回 warning 橙，强调仍然用蓝。 */
.callout-warn {
  border-color: rgba(180, 83, 9, 0.28);
  background: rgba(180, 83, 9, 0.07);
}

/* ---------- 6. 窄屏补齐：标题放开换行，避免 nowrap 撑破视口 ---------- */
@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(26px, 7.4vw, 38px);
    letter-spacing: -0.02em;
    white-space: normal;
  }

  .page-shell {
    padding-top: 40px;
    padding-bottom: 96px;
  }
}

/* ============================================================================
   结构改版层：目录改横向 + 全文去编号 + VPN 并入客户端卡片
   ============================================================================ */

/* ---------- 1. 横向章节条（替代原来的左侧「阅读路径」） ---------- */
.chapter-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 10px;
  padding: 14px clamp(20px, 4vw, 44px);
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

/* 底线不铺满整屏、只跟正文一样宽：否则页面上几条通长的横线会把内容切成条 */
.chapter-bar::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(900px, 100% - 60px);
  height: 1px;
  background: var(--divider);
  content: "";
  transform: translateX(-50%);
}

.chapter-bar nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chapter-bar nav::-webkit-scrollbar {
  display: none;
}

/* display:flex 会盖掉 [hidden] 自带的 display:none，必须显式补回来 */
.chapter-bar nav[hidden] {
  display: none;
}

/* 「第一次对话」不属于任何一组配置，单独放在末尾并用竖线隔开 */
.chapter-bar-tail {
  margin-left: 6px;
  padding-left: 18px;
  border-left: 1px solid var(--divider-strong);
}

.chapter-bar a {
  padding: 11px 20px;
  color: var(--text-2);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.chapter-bar a:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.chapter-bar a.is-current {
  color: #ffffff;
  background: var(--brand);
  box-shadow: 0 10px 20px -12px rgba(20, 20, 20, 1);
}

.chapter-bar-tail a.is-current {
  color: var(--brand-strong);
  background: var(--brand-soft);
  box-shadow: none;
}

/* 吸顶条会盖住锚点目标，给滚动留出它的高度（实测条高 76px，留点余量） */
html {
  scroll-padding-top: 92px;
}

/* ---------- 2. 正文单列居中（原来左侧留了 240px 目录列） ---------- */
.page-shell {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 30px 140px;
}

/* ---------- 3. 去掉编号后的栅格收口 ---------- */
.section-heading {
  display: block;
  margin-bottom: 42px;
}

.tutorial-copy {
  display: block;
}

/* 编号 span 移走后，这条原本给编号用的规则会误伤标题，这里拉回来 */
.portal-heading > .portal-title {
  color: var(--text);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.portal-steps > span {
  display: block;
  min-height: 0;
  padding: 11px 0;
}

.portal-steps > span:first-child {
  border-top: 0;
}

/* 抽屉 summary 原本是「编号 50px + 标题 1fr + 图标 28px」三列，
   编号删掉后标题会被挤进 50px 的窄列，这里把列定义收成两列 */
.drawer-list > details > summary {
  grid-template-columns: minmax(0, 1fr) 28px;
}

.drawer-content {
  padding-left: 0;
}

@media (max-width: 620px) {
  .drawer-list > details > summary {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 10px;
  }
}

/* ---------- 4. VPN 并入 WorkBuddy AI 卡片 ---------- */
.card-vpn {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}

.card-vpn-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.card-vpn > p {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.65;
}

.card-vpn-links {
  display: grid;
  gap: 8px;
}

.card-vpn-links > a {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  align-items: center;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.card-vpn-links > a:hover {
  border-color: #c7d2ff;
  background: var(--brand-tint);
}

.card-vpn-links b {
  font-family: var(--ui);
  font-size: 13px;
}

.card-vpn-links small {
  flex: 1;
  color: var(--text-3);
  font-size: 11.5px;
}

.card-vpn-links > a > span {
  color: var(--brand);
  font-size: 12px;
}

.card-vpn > p.card-vpn-note {
  margin: 12px 0 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.6;
}

/* ---------- 5. 门户卡的条目后面带一句解释 ---------- */
.portal-steps > span {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.portal-steps > span > b {
  flex: none;
}

.portal-steps small {
  color: var(--text-3);
  font-family: var(--ui);
  font-size: 12px;
  text-align: right;
}

/* ---------- 6. 客户端卡片：标签行 + 模型建议 ---------- */
.tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.recommendation-tag.tag-model {
  color: var(--brand-strong);
  background: var(--brand-soft);
}

/* 「选什么模型」是这张卡的结论，要比普通说明更容易被看到 */
.client-card > p.model-hint {
  margin: 18px 0 0;
  padding: 12px 14px;
  color: var(--brand-strong);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-tint);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.65;
}

/* ---------- 7. 页头：让标题跟网格背景咬合，做出一点视觉重心 ---------- */
.masthead::before {
  position: absolute;
  top: -180px;
  right: -140px;
  display: block; /* 覆盖段把它关掉了，这里重新打开 */
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 20, 20, 0.17), transparent 68%);
  content: "";
  pointer-events: none;
}

.hero-copy {
  position: relative;
}

/* 标题走品牌渐变色，比纯黑更贴背景的蓝色调 */
.hero h1 {
  color: transparent;
  background: linear-gradient(96deg, #1b2540 0%, #2b2b2b 48%, #141414 74%, #7aa4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 标题下面一条短渐变横线，把标题、网格和下面的卡片串起来 */
.hero-copy::after {
  display: block;
  width: 104px;
  height: 4px;
  margin-top: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #7aa4ff);
  content: "";
}

/* ---------- 8. 卡片与按钮细节 ---------- */
/* model-hint 和下面那行下载链接原本几乎贴在一起 */
.client-card > a {
  display: inline-block;
  margin-top: 26px;
}

/* 全站高亮统一成暖色，跟蓝色主色区分开 */
mark {
  padding: 2px 7px;
  color: #8f4107;
  border-radius: 6px;
  background: rgba(224, 164, 88, 0.34);
  font-weight: 700;
}

.portal-description mark,
.section-heading mark {
  padding: 1px 5px;
  font-size: 0.94em;
}

/* 大标题里的高亮块压薄一点，更像荧光笔而不是色块 */
.mcp-prompt-intro h3 mark {
  padding: 0 10px;
  border-radius: 8px;
}

/* 「复制」按钮改成实心主按钮，别再用描边小按钮 */
.code-toolbar button.copy-cta,
.command-hero button.copy-cta {
  min-height: 40px;
  padding: 9px 22px;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 12px 22px -14px rgba(20, 20, 20, 1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.code-toolbar button.copy-cta:hover,
.command-hero button.copy-cta:hover {
  color: #ffffff;
  background: var(--brand-strong);
}

/* ---------- 9. 跑通之后的下一步引导 ---------- */
.next-step-panel {
  display: flex;
  gap: 26px;
  margin-top: 30px;
  padding: 26px 28px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--brand-soft), var(--brand-tint));
}

.next-step-copy h3 {
  margin: 6px 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.next-step-copy p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.72;
}

.next-step-copy b {
  color: var(--text);
}

.next-step-cta {
  display: inline-flex;
  flex: none;
  gap: 8px;
  padding: 13px 22px;
  align-items: center;
  color: #ffffff;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 12px 24px -14px rgba(20, 20, 20, 1);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.next-step-cta:hover {
  color: #ffffff;
  background: var(--brand-strong);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .next-step-panel {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 10. 进阶配置页：段落式说明 + 抽屉引言 ---------- */
/* 两张门户卡下面的三个条目要对齐，所以描述区先留出统一高度 */
.portal-description {
  min-height: 7em;
}

.section-lead {
  margin: 0 0 34px;
  padding: 16px 20px;
  color: var(--text-2);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-tint);
  font-size: 15px;
  line-height: 1.75;
}

.drawer-lead {
  margin: 2px 0 26px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.78;
}

/* 不配对、单独出现的图（例如「跑流程时才看到的允许弹窗」） */
.solo-figure {
  margin: 16px 0 0;
}

/* 需要被认真读一遍的说明（ASR「默认怎么用」）：比普通提示条大一号 */
.when-needed-loud {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 30px;
  padding: 20px 22px;
  border-left-width: 4px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.when-needed-loud > b {
  color: var(--text);
  font-size: 12.5px;
  letter-spacing: 0.1em;
}

.when-needed-loud > p {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.8;
}

.when-needed-loud > p strong {
  color: var(--text);
  font-weight: 700;
}

/* 步骤标题里带强调时，别让行高被撑开 */
.tutorial-copy h3 strong {
  color: inherit;
  font-weight: 700;
}

/* ---------- 7. 抽屉标题升到章节级 ----------
   原来抽屉标题只有 24px，而首次配置页的章节标题（选择客户端 / 配置 MCP / 打开本地文件夹）
   是 clamp(28px, 3.2vw, 42px)。两页的标题本该是同一档，这里对齐到同一组数值，
   advanced 页的三个抽屉才像「章节」而不是「列表项」。 */
.drawer-list summary b {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

.drawer-list summary small {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.6;
}

.drawer-list > details > summary {
  min-height: 0;
  padding: 30px 0;
}

/* 步骤里的补充说明：不是必须做的动作，但会影响体验（例如国内网络加载慢） */
.tutorial-copy p.step-note {
  margin: 13px 0 0;
  padding: 9px 13px;
  color: var(--text-2);
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warn-soft);
  font-size: 13px;
  line-height: 1.7;
}

/* 「复制这段提示词，发给 AI」和下面的提示词卡是同一件事，中间不要留分隔线。
   注意选择器要用两个类：`min-height` 被 `.advanced-tutorial-rows .tutorial-row`（0,2,0）占着，
   单个 `.tutorial-row-flush`（0,1,0）压不住它，行高会停在 300px、留下一条大空档。 */
.tutorial-row.tutorial-row-flush {
  min-height: 0;
  padding-top: 26px;
  padding-bottom: 2px;
  border-bottom: 0;
}

.mcp-prompt-block-attached {
  margin-top: 14px;
}

/* ---------- 11. 配置 MCP 拆成四步（2026-09-18） ---------- */

/* 纯文字步骤行（MCP 的「复制提示词换 Key」、chrome 的「复制这段提示词」）不需要右列，
   让文字占满整行 —— 否则右半边永远是空的（左列只占 0.78fr）。
   用两个类是为了压住 .advanced-tutorial-rows .tutorial-row（0,2,0）里的 min-height。 */
.tutorial-row.tutorial-row-wide {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

/* 「装完还要人工校验一次」：不再单独占一个强调块，只作下面步骤组的小标题 */
.mcp-verify {
  margin-top: 42px;
}

.mcp-verify > b {
  display: block;
  color: var(--text);
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 800;
}

.mcp-verify > p {
  max-width: 720px;
  margin: 9px 0 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.78;
}

.mcp-verify > p strong {
  color: var(--text);
  font-weight: 700;
}

/* 1/2/3/4 步骤圈：跟 callout 的圆图标同一套语言，压在标题前 */
.mcp-step-index {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-right: 9px;
  place-items: center;
  color: #ffffff;
  border-radius: 50%;
  background: var(--brand);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 800;
  vertical-align: middle;
}

/* 校验的四步：图小一号、行矮一截，四步挨着看完 */
.mcp-verify-rows .tutorial-row {
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.1fr);
  min-height: 0;
  padding: 22px 0;
}

.mcp-verify-rows .tutorial-copy h3 {
  font-size: 21px;
}

/* chrome_devtools 装完也要过同一道校验：一条轻量提示，不做成大块 */








/* 四步里的收尾动作（退出并重启客户端）：比普通提示条重一档，
   沿用 when-needed-loud 的语言 —— 品牌色左边框 + 浅底。 */
.mcp-final-step {
  margin-top: 30px;
  padding: 22px 24px;
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand-tint);
}

.mcp-final-step b {
  display: block;
  color: var(--text);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.mcp-final-step p {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.8;
}

.mcp-final-step p strong {
  color: var(--text);
  font-weight: 700;
}

/* Chrome 地址栏那一段：把要粘贴的地址从行内 <code> 升级成高对比的一整块，
   用户一眼就能看到「这才是要复制的东西」。 */
.chrome-url-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
}
.chrome-url-bar code {
  padding: 7px 12px;
  color: var(--brand-strong);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  word-break: break-all;
}
.chrome-url-copy {
  min-height: 34px;
  padding: 7px 16px;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.chrome-url-copy:hover {
  background: var(--brand-strong);
}

/* 「开启远程调试」那一步要让地址块占满整行：.mcp-verify-rows .tutorial-row 是
   (0,2,0)，单靠 .tutorial-row-wide 压不住，这里提到三个类才够。 */
.mcp-verify-rows .tutorial-row.tutorial-row-wide {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}


/* ==========================================================================
   官网主题覆盖 —— 统一到「谈笑 AI」官网的黑白灰体系
   追加在文件末尾，靠源码顺序覆盖上面多层主题。
   要还原指南原本的蓝色主题，删掉本段即可。
   ========================================================================== */
:root {
  /* 主色：品牌墨绿，与官网同一个色 */
  --brand: #1f5c4d;
  --brand-strong: #16453a;
  --brand-soft: #eef5f2;
  --brand-tint: #f2f7f5;

  /* 底色：纯白，去掉蓝调 */
  --page: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f5f5f5;

  /* 文字：纯灰阶 */
  --text: #141414;
  --text-2: #4a4a4a;
  --text-3: #8a8a8a;

  /* 分隔线 */
  --divider: #ebebeb;
  --divider-strong: #e0e0e0;

  /* 语义色：保留区分度，但整体压低饱和度
     墨绿=正常/成功  琥珀=提示  砖红=风险  靛青=外部依赖 */
  --ok: #1f5c4d;
  --ok-soft: #eef5f2;
  --warn: #b45309;
  --warn-soft: #fdf5ea;
  --danger: #a83c31;
  --danger-soft: #fdf1ef;
  --info: #2f5d8a;
  --info-soft: #eef3f9;

  /* 圆角向官网靠：卡片 20px */
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;

  /* 字体与官网一致 */
  --sans: "Google Sans", "Noto Sans SC", "思源黑体", ui-sans-serif, system-ui, sans-serif;
  --serif: var(--sans);
  --display: var(--sans);
  --ui: var(--sans);
}

/* 页面底色：纯白，去掉全部渐变与网格 */
body {
  background: var(--surface);
  color: var(--text);
}

/* 去掉全局噪点叠加层 */
body::before {
  display: none;
}

/* 首屏：白底、去网格、去装饰 */
body .masthead {
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  min-height: 0;
  padding-top: 56px;
  padding-bottom: 56px;
}

body .masthead::before,
body .masthead::after {
  display: none;
}

/* 标题：去掉蓝色渐变文字，改纯墨色 */
body .hero h1 {
  color: var(--text);
  background-image: none;
  -webkit-text-fill-color: var(--text);
  background-clip: border-box;
}

body .hero-copy::after {
  background: var(--brand);
}

/* 卡片：白底 + 细描边；选中态用墨色描边 */
body .portal-card {
  border: 1px solid var(--divider);
  background: var(--surface);
  border-radius: var(--radius-lg);
}

body .portal-card:hover {
  border-color: var(--brand);
}

body .portal-primary {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* 章节小标题：改灰 */
body .section-kicker {
  color: var(--text-3);
}

/* 提示块：去掉蓝与琥珀，统一中性 */
body .callout {
  border-color: var(--brand-border, #cfe2db);
  background: var(--brand-soft);
}

body .callout-warn {
  border-color: #f2ddc2;
  background: var(--warn-soft);
}

body .callout-icon {
  color: var(--brand);
}

body .callout-warn .callout-icon {
  color: var(--warn);
}

/* 顶部阅读进度条：轨道透明，只在有进度时才可见 */
body .reading-progress {
  background: transparent;
}

body .reading-progress span {
  background: var(--brand);
}

/* 章节导航条 */
body .chapter-bar {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--divider);
}

/* 选中文字 */
::selection {
  color: #ffffff;
  background: var(--brand);
}

/* 焦点环改墨色 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline-color: var(--brand);
}

/* ==========================================================================
   站内外壳适配 —— 指南现在挂在站点的 Layout 里（同一个固定顶栏 + 页脚）
   ========================================================================== */

/* ==========================================================================
   章节导航：横向吸顶条 → 左侧竖向编号目录
   --------------------------------------------------------------------------
   原来是一条横向吸顶条：宽度不够时会横向滚动（出现横向滚动条），而且一眼只
   能看到几个章节。改成左侧竖向目录后：
     · 编号 1/2/3/4 直接看出先后顺序
     · 固定在左侧，长文档往下滚也一直可见
     · 目录自身可滚动（max-height + overflow-y），条目多了不会顶出屏幕
   ========================================================================== */

.guide-layout {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 56px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 30px;
  align-items: start;
}

body .chapter-bar {
  position: sticky;
  /* 顶栏实测底部 92px，留 16px 余量 */
  top: 108px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 2px 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scrollbar-width: thin;
  scrollbar-color: var(--divider-strong) transparent;
  counter-reset: guide-step;
}

/* 原来那条通长底线不需要了 */
body .chapter-bar::after {
  display: none;
}

body .chapter-bar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: visible;
}

/* 尾部分组（第一次对话）与主线隔开 */
body .chapter-bar-tail {
  margin: 8px 0 0;
  padding: 10px 0 0;
  border-left: 0;
  border-top: 1px solid var(--divider);
}

body .chapter-bar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  counter-increment: guide-step;
}

/* 编号 1 / 2 / 3 / 4。
   计数器只统计「渲染出来」的元素，所以被切到隐藏分组的导航项不会占号。 */
body .chapter-bar a::before {
  content: counter(guide-step);
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--divider-strong);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body .chapter-bar a:hover {
  color: var(--text);
  background: var(--surface-muted);
}

body .chapter-bar a.is-current {
  color: var(--brand-strong);
  background: var(--brand-soft);
  box-shadow: none;
}

body .chapter-bar a.is-current::before {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

/* 正文列：原来自己居中，现在交给网格 */
body .page-shell {
  display: block;
  max-width: none;
  margin: 0;
  padding: 44px 0 120px;
}

/* 窄屏（<1024px）：目录回到横向，但**允许换行**——不再出现横向滚动条 */
@media (max-width: 1023px) {
  .guide-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 960px;
    padding: 0 24px;
  }

  body .chapter-bar {
    top: 96px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-height: none;
    overflow: visible;
    margin-bottom: 8px;
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }

  /* display:contents 让三个 nav 不生成盒子，chip 变成 .chapter-bar 的直接子项，
     才能跨分组连续排列（否则「第一次对话」永远独占一行，白白多出一行高度）。
     注意：nav[hidden] 的 display:none 权重更高，切换分组依然生效。 */
  body .chapter-bar nav {
    display: contents;
  }

  body .chapter-bar-tail {
    /* 移动端让 4 个 chip 连续排列，不要那个左竖线 —— 竖线会把尾项挤到单独一行 */
    margin: 0;
    padding: 0;
    border-top: 0;
    border-left: 0;
  }

  body .chapter-bar a {
    gap: 7px;
    padding: 7px 13px 7px 9px;
    border-radius: 999px;
    font-size: 13px;
  }

  body .chapter-bar a::before {
    width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 16px;
  }

  body .page-shell {
    padding: 24px 0 96px;
  }
}

@media (max-width: 639px) {
  body .chapter-bar {
    top: 86px;
  }
}

/* 顶部那条 4px 阅读进度条：position:fixed + top:0 + 通长，外观就是一条横向
   滚动条，用户明确要求去掉。 */
body .reading-progress {
  display: none;
}

/* 顶栏和页脚不要继承指南正文的 16px / 1.75 行高 */
#header,
#header * {
  line-height: 1.4;
}

#site-footer,
#site-footer * {
  line-height: 1.6;
}

/* 锚点跳转要让开吸顶的东西。
   ≥1024px：目录在左侧竖排，顶上只有站点顶栏（底 92）→ 108；
   <1024px：目录变回横向吸顶，高度随宽度换行变化，按实测取整并留余量。
     ≤639px：chip 约 92px 高 + 顶栏底 80 → 184
     640~1023px：chip 约 53px 高 + 顶栏底 92 → 160 */
html {
  scroll-padding-top: 108px;
}

@media (max-width: 1023px) {
  html {
    scroll-padding-top: 160px;
  }
}

@media (max-width: 639px) {
  html {
    scroll-padding-top: 184px;
  }
}

/* 去掉页头顶部那条 4px 品牌色横线。
   它原本是指南自带顶栏的顶部装饰；现在指南挂在站点顶栏下面，
   这条通长横线会紧贴在顶栏底部，看着像一条多余的分隔线。 */
body .masthead {
  border-top: 0;
}

/* ============================================================================
   目录列 × 正文的收口（2026-09-30）
   去掉多余横线 + 目录放大 + 目录与正文标题对齐
   ============================================================================ */

/* ① 去掉正文标题上方那条通长横线。
   原来每个 section 顶部都有 border-top + 22px padding-top，
   和顶栏底线、目录尾部线叠在一起，一屏里同时出现三四条横线，很碎。 */
body .section-heading {
  padding-top: 0;
  border-top: 0;
}

/* ② 去掉目录里「第一次对话」上方那条分组线，靠间距分组就够了。 */
body .chapter-bar-tail {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

/* ③ 目录字号放大一档，编号圈跟着放大 —— 原来 14px 比正文细太多，撑不住这一列。 */
body .chapter-bar a {
  padding: 10px 12px;
  font-size: 15px;
}

body .chapter-bar a::before {
  width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 22px;
}

/* ④ 目录与正文标题对齐。
   原来目录列 padding-top 只有 2px、正文列是 44px，两列起点差了 42px。
   现在把 44px 提到共同父容器 .guide-layout 上，两列从同一条水平线开始。 */
body .guide-layout {
  padding-top: 44px;
}

body .page-shell {
  padding-top: 0;
}

/* ⑤ 目录第一项要和正文 h2 齐平 —— 两边文字都是「选择客户端」，错开很难看。
   正文 h2 上方还有一行 kicker（17px 高 + 上下 margin），实测 h2 顶边比目录列顶边低 25px，
   所以目录列整体下移同样的量。 */
body .chapter-bar {
  padding-top: 27px;
}

/* ⑥ 正文大标题前也带上和左侧目录一致的编号（1 / 2 / 3 / 4），两边对得上。 */
body .section-heading h2 {
  display: flex;
  align-items: center;
  gap: 16px;
}

body .section-heading h2 .section-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  /* h2 上是 -0.055em，数字会被挤在一起，这里拉回来 */
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ⑦ 选中卡片的背景。
   原来由 `.portal-card[aria-selected="true"]` 写死成 #f5f5f5（灰）——
   它的选择器权重（类 + 属性）比主题覆盖段的 `body .portal-primary` 高，
   所以墨绿主题一直没盖住。
   另外 `--brand-soft`（#eef5f2）本身太淡，和 #f5f5f5 肉眼几乎分不出来，
   所以这里按品牌色算一个更深一档的浅墨绿，让「选中」一眼可辨。 */
body .portal-card[aria-selected="true"] {
  background: color-mix(in srgb, var(--brand) 18%, #ffffff);
}

/* ⑧ 卡片描述区的占位高度收一档。
   原来 7em 是为了让两张卡的步骤列表底部对齐，但「首次配置」只有一行描述，
   中间空出一大块。收到 5.5em：右边三行描述刚好自然撑开，两边仍然基本对齐。 */
body .portal-description {
  min-height: 5.5em;
}

/* ⑨ 进阶配置的两个大标题（JustOneAPI / ASR）也带编号。
   它们在 <summary> 里，不在 .section-heading h2 下，所以 ⑥ 那条选不中，这里单独给一份。
   另外 summary 里的 <span> 默认是行内流（编号 inline、标题和描述是 block），
   编号会被挤到标题上一行 —— 改成两列网格：编号在左跨两行，标题 + 描述在右。 */
body .drawer-list > details > summary > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}

body .drawer-list > details > summary > span > b,
body .drawer-list > details > summary > span > small {
  grid-column: 2;
}

body .drawer-list > details > summary .section-no {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ⑩ 常见问题抽屉：可折叠（2026-10-11）。
   这组抽屉原来挂在「进阶配置」下，是常驻展开区块，刻意关掉了折叠；
   现在改成 FAQ，需要点标题展开/收起，恢复交互与右侧收起图标。 */
body .drawer-list > details > summary {
  pointer-events: auto;
  cursor: pointer;
  list-style: none;
}

/* ============================================================================
   顶部视频讲解（2026-10-01）
   指南最上方放一段 B站 视频，给不想逐字读文档的人一个更快的入口。
   和下面两张门户卡同处 masthead，靠 1px 描边 + 大圆角 + 浅灰底区分层级。
   ============================================================================ */

.guide-video {
  display: grid;
  /* 左文案 / 右播放器。播放器占大头，16:9 下才有足够可视面积。 */
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
  margin: 0 0 44px;
  padding: 26px 28px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.guide-video-copy {
  min-width: 0;
}

.guide-video-kicker {
  margin: 0 0 12px;
  color: var(--brand);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.5;
}

.guide-video-title {
  margin: 0 0 14px;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.guide-video-note {
  margin: 0 0 20px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.guide-video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-strong);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.guide-video-link:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-video-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 9px;
  line-height: 1;
}

/* 播放器：固定 16:9，iframe 绝对定位铺满。
   不用 iframe 自带的 width/height 属性 —— 那是固定像素，窄屏下会把整块撑出横向滚动条。 */
.guide-video-player {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius);
  background: #000000;
}

.guide-video-player iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 899px) {
  .guide-video {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 32px;
    padding: 22px 20px;
  }

  /* 窄屏下播放器提到前面 —— 视频是这一块的正文，文案退到下面当说明。 */
  .guide-video-player {
    order: -1;
  }
}

/* ============================================================================
   安装说明：大图 + 「对话指令」框（2026-10-11）
   版式：正文一句话 → 一张大图 → 一个醒目的对话框指令（右上角实心复制按钮）。
   ============================================================================ */

/* 大图：整宽、不裁切（默认 .image-button img 是 16/10 + cover，会把长图裁掉） */
.guide-hero-shot {
  display: block;
  margin: 26px 0 0;
}
.guide-hero-shot .image-button {
  border-radius: var(--radius-lg);
}
.guide-hero-shot .image-button img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #ffffff;
}

/* 对话框指令 */
.prompt-box {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-light, #ffffff);
}
.prompt-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 20, 20, 0.03);
}
.prompt-box-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
}
.prompt-box-label::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.prompt-box-body {
  margin: 0;
  padding: 24px 20px;
  color: var(--ink);
  font-family: var(--ui);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-all;
}
.prompt-box-body code {
  font-family: inherit;
  font-size: inherit;
}

/* 实心复制按钮：比原来工具栏里的小按钮明显得多 */
.prompt-copy {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 46px;
  padding: 0 24px;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 14px 26px -16px rgba(20, 20, 20, 1);
  cursor: pointer;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 160ms ease, transform 160ms ease;
}
.prompt-copy::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prompt-copy:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .prompt-box-head {
    padding: 10px 12px;
  }
  .prompt-copy {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px;
  }
}

/* ============================================================================
   指南页头：标题 + 头像说明卡（2026-10-11）
   ============================================================================ */
.guide-author {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(31, 92, 77, 0.06), transparent 46%),
    var(--surface-muted, #ffffff);
}
.guide-author-avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid var(--line);
  object-fit: cover;
}
.guide-author-body {
  min-width: 0;
}
.guide-author-body p {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
}
.guide-author-body p + p {
  margin-top: 8px;
}
.guide-author-body b {
  color: var(--brand-strong);
  font-weight: 700;
}
.guide-author-body a {
  color: var(--brand-strong);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(31, 92, 77, 0.35);
  text-underline-offset: 3px;
}
.guide-author-body a:hover {
  text-decoration-color: var(--brand-strong);
}
@media (max-width: 640px) {
  .guide-author {
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }
  .guide-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  .guide-author-body p {
    font-size: 14px;
  }
}

/* ============================================================================
   正文列顶部的标题 + 头像卡（2026-10-11）
   原来放在通栏 masthead 里，现在并进右栏、压在「安装说明」上面。
   ============================================================================ */
.guide-intro {
  margin: 0 0 6px;
}
.guide-intro h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

/* 橙色提示框：把默认的绿调 callout 换成暖橙。
   必须带 body 前缀 —— 上面有 `body .callout`，不带前缀的 `.callout-orange`
   （0,1,0）压不住（0,1,1）。
   这个框不摆图标，所以默认的两栏（38px 图标 + 正文）收成一栏。 */
body .callout-orange {
  grid-template-columns: minmax(0, 1fr);
  border-color: #f0d3a4;
  background: #fdf6ea;
}
body .callout-orange a {
  color: #b45309;
  text-decoration-color: rgba(180, 83, 9, 0.4);
}
body .callout-orange a:hover {
  text-decoration-color: #b45309;
}

/* ============================================================================
   单栏指南 + /docs/ 二级文档页（2026-10-11）
   指南去掉左侧目录后走单栏；三个二级页面复用同一套样式。
   ============================================================================ */
.guide-layout.guide-layout--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}
.docs-back {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--ink-soft);
  font-family: var(--ui);
  font-size: 14px;
}
.docs-back:hover {
  color: var(--brand-strong);
}
body .section-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* 橙色提示框里的三条提示（2026-10-11）：编号 1/2/3 列出，方便逐条对照。
   编号沿用导航栏那套「圆圈数字」观感，颜色换成这个框的橙色。 */
body .callout-orange .callout-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: callout-step;
}
body .callout-orange .callout-steps li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}
body .callout-orange .callout-steps li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(192, 122, 26, 0.45);
  border-radius: 999px;
  color: #c07a1a;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  counter-increment: callout-step;
  content: counter(callout-step);
}