/* Only the two screenshot-led tutorials use these styles. */
.detailed-guide .article-header { padding-bottom: 28px; }
.detailed-guide .guide-evidence { font-size: 13px; color: var(--muted); }
.detailed-guide .guide-intro { max-width: 940px; padding: 26px 0 8px; }
.detailed-guide .guide-intro > p:first-child { font-size: 17px; }
.detailed-guide .guide-layout { display: grid; grid-template-columns: minmax(0, 920px) 228px; gap: 32px; align-items: start; }
.detailed-guide .guide-content { min-width: 0; }
.detailed-guide .guide-content a:not(.guide-picture a) { color: #08786c; text-decoration: underline; text-underline-offset: 3px; }
.detailed-guide .guide-step { scroll-margin-top: 92px; padding: 30px 0 34px; border-top: 1px solid var(--line); }
.detailed-guide .guide-step-heading { display: flex; gap: 14px; align-items: baseline; margin-bottom: 20px; }
.detailed-guide .guide-step-number { color: var(--orange); font: 700 13px Consolas, monospace; white-space: nowrap; }
.detailed-guide .guide-step h2 { margin: 0; font-size: 25px; line-height: 1.45; }
.detailed-guide .guide-step p, .detailed-guide .guide-step li { color: #40516a; }
.detailed-guide .guide-step li { margin: 10px 0; padding-left: 3px; }
.detailed-guide .guide-step ol, .detailed-guide .guide-step ul { padding-left: 24px; }
.detailed-guide .guide-step strong { color: var(--ink); }
.detailed-guide .guide-picture { margin: 24px 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.detailed-guide .guide-picture a { display: block; cursor: zoom-in; }
.detailed-guide .guide-picture img { width: 100%; height: auto; border-radius: 4px; }
.detailed-guide .guide-picture-narrow { max-width: 640px; margin-inline: auto; }
.detailed-guide .picture-zoom { display: block; padding: 7px 6px 0; color: #0c786e; font-size: 12px; text-align: right; }
.detailed-guide .guide-picture figcaption { padding: 7px 7px 3px; font-size: 13px; color: var(--muted); line-height: 1.65; }
.detailed-guide .guide-table-wrap { max-width: 100%; overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.detailed-guide .guide-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.detailed-guide .guide-table th, .detailed-guide .guide-table td { padding: 13px 15px; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 125px; }
.detailed-guide .guide-table thead th { background: var(--navy); color: #fff; font-size: 13px; }
.detailed-guide .guide-table tbody th { font-weight: 600; width: 22%; }
.detailed-guide .guide-table tr:last-child th, .detailed-guide .guide-table tr:last-child td { border-bottom: 0; }
.detailed-guide .guide-toc { position: sticky; top: 90px; border: 1px solid var(--line); background: #fff; padding: 18px; margin-top: 30px; max-height: calc(100vh - 115px); overflow-y: auto; }
.detailed-guide .guide-toc strong { display: block; margin-bottom: 10px; }
.detailed-guide .guide-toc a { display: flex; gap: 9px; padding: 7px 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.detailed-guide .guide-toc a:hover { color: var(--teal); }
.detailed-guide .guide-toc a span { color: var(--orange); font-family: Consolas, monospace; }
.detailed-guide .guide-step .check-list { padding: 0; }
.detailed-guide .guide-step .check-list li { padding: 14px 16px 14px 42px; margin: 0; }
.detailed-guide a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
@media(max-width: 980px) {
  .detailed-guide .guide-layout { display: flex; flex-direction: column; gap: 0; }
  .detailed-guide .guide-toc { position: static; order: -1; width: 100%; max-height: none; margin: 16px 0 30px; }
  .detailed-guide .guide-toc > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .detailed-guide .guide-content { width: 100%; }
}
@media(max-width: 620px) {
  .detailed-guide .guide-step h2 { font-size: 22px; }
  .detailed-guide .guide-step-heading { gap: 9px; }
  .detailed-guide .guide-toc > div { grid-template-columns: 1fr; }
  .detailed-guide .guide-table { min-width: 540px; }
  .detailed-guide .guide-table-wrap::before { content: "← 左右滑动查看完整表格 →"; display: block; position: sticky; left: 0; padding: 7px 10px; background: #edf3f5; color: #3e6173; font-size: 12px; }
  .detailed-guide .guide-picture { margin-block: 20px; padding: 5px; }
  .detailed-guide .guide-picture figcaption { font-size: 12px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }