/* Shared reading surface for the chapter-four guides. */
:is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) { --guide-body-size:var(--text-body); --guide-body-leading:1.8; background:#fafbf9; padding-bottom:0; }
:is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) main .breadcrumb { max-width:1360px; width:calc(100% - 80px); margin:28px auto 32px; font-size:13px; line-height:1.7; flex-wrap:wrap; }
.guide-shell { max-width:1360px; width:calc(100% - 80px); margin:0 auto; display:grid; grid-template-columns:224px minmax(0,1fr); gap:48px; align-items:start; }
.guide-sidebar { position:sticky; top:104px; max-height:calc(100dvh - 128px); overflow:auto; scrollbar-width:thin; padding:10px 10px 20px 0; }
.guide-toc summary { list-style:none; color:var(--green); font-size:14px; font-weight:650; padding:8px 12px 18px; }
.guide-toc summary::-webkit-details-marker { display:none; }
.guide-toc summary span { display:none; }
.guide-toc nav { font-size:14px; line-height:1.6; }
.guide-toc-overview { display:block; padding:9px 12px; color:var(--muted); margin-bottom:8px; }
.guide-toc-group { margin:4px 0; border-radius:9px; }
.guide-toc-section { display:flex; align-items:baseline; gap:9px; padding:10px 12px; font-weight:550; color:#42544e; border-radius:8px; }
.guide-toc-section > span { font-size:11px; color:#81918a; min-width:10px; }
.guide-toc a:hover,.guide-toc a:focus-visible { color:var(--green); background:#edf3ee; }
.guide-toc-group.is-current > .guide-toc-section { color:var(--green); background:#e6eee8; }
.guide-toc-steps { list-style:none; margin:0 0 10px; padding:3px 5px 4px 23px; font-size:12px; }
.guide-toc-steps a { display:block; padding:5px 8px; color:#64736d; border-left:1px solid #dce4dd; }
.guide-toc-steps a[aria-current="location"] { color:var(--green); border-color:var(--green); background:#f0f4ef; }
.guide-toc-steps a span { font-variant-numeric:tabular-nums; }
.guide-enhanced .guide-toc-group:not(.is-current) { display:none; }
.guide-back { display:block; padding:22px 12px 0; margin-top:20px; border-top:1px solid var(--line); color:var(--green); font-size:13px; }
.guide-article { min-width:0; background:white; border:1px solid #e2e7e0; border-radius:16px 16px 0 0; padding:42px 40px 0; }
.guide-intro { padding-bottom:45px; scroll-margin-top:104px; }
.guide-eyebrow { font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--green); margin-bottom:17px; }
.guide-intro h1 { font-size:clamp(28px,2.7vw,40px); line-height:1.48; text-wrap:balance; letter-spacing:-.035em; max-width:860px; }
.guide-title-line { display:block; text-wrap:balance; }
.guide-meta { display:flex; gap:16px; flex-wrap:wrap; margin:20px 0 28px; font-size:12px; line-height:1.7; color:#758278; }
.guide-prose { max-width:860px; color:#394b43; font-size:var(--guide-body-size); line-height:var(--guide-body-leading); margin:0 0 20px; overflow-wrap:anywhere; }
.guide-relation { color:#647268; font-size:14px; line-height:1.9; border-left:2px solid var(--gold); padding-left:17px; margin:22px 0; }
.guide-intro-links { display:flex; gap:12px 24px; flex-wrap:wrap; color:var(--green); font-size:13px; }
.guide-intro-links a { display:inline-flex; align-items:center; gap:7px; }
.guide-intro-links .icon { width:16px; height:16px; }
.guide-section { border-top:1px solid var(--line); padding:43px 0 14px; scroll-margin-top:104px; }
.guide-section-heading { display:flex; align-items:center; gap:15px; margin-bottom:23px; }
.guide-section-number { font-size:13px; font-weight:650; color:var(--green); background:#edf3eb; border:1px solid #dce7d9; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; flex-shrink:0; }
.guide-section h2 { font-size:26px; line-height:1.45; letter-spacing:-.025em; }
.section-prose { margin-bottom:30px; }
.guide-steps { list-style:none; margin:0; padding:0; }
.guide-step { padding:0 0 30px; margin:0 0 12px; scroll-margin-top:108px; }
.guide-step-copy { display:flex; align-items:flex-start; gap:14px; max-width:860px; }
.guide-step-number { display:grid; place-items:center; font-size:12px; font-weight:650; color:var(--green); background:#edf3ef; width:25px; height:25px; flex:0 0 25px; margin-top:4px; border-radius:50%; }
.guide-step-copy p { font-size:var(--guide-body-size); line-height:var(--guide-body-leading); color:#35463e; white-space:pre-line; overflow-wrap:anywhere; }
.guide-step-continuation { margin:26px 0 0 39px; }
.guide-step-links { margin:12px 0 2px 39px; font-size:14px; color:var(--green); }
.guide-step-links a { display:inline-flex; align-items:center; gap:6px; text-decoration:underline; text-underline-offset:4px; }
.guide-step-links .icon { width:15px; height:15px; }
.guide-figure { margin:20px 0 0 39px; }
.guide-image-link { display:block; position:relative; overflow:hidden; border:1px solid #dfe5df; border-radius:9px; background:#f3f5f1; cursor:zoom-in; }
.guide-image-link img { display:block; width:100%; height:auto; }
.guide-image-hint { position:absolute; bottom:10px; right:10px; display:flex; gap:5px; align-items:center; padding:5px 10px; font-size:11px; color:var(--green); background:#fffffff2; border:1px solid #dce4dd; border-radius:6px; box-shadow:0 2px 8px #183f3510; }
.guide-image-hint .icon { width:14px; height:14px; }
.guide-figure.is-tall .guide-image-link { max-height:470px; }
.guide-figure.is-tall .guide-image-link:after { content:''; position:absolute; bottom:0; left:0; right:0; height:55px; background:linear-gradient(transparent,#f8faf6); pointer-events:none; }
.guide-figure.is-tall .guide-image-hint { z-index:1; }
.guide-figure figcaption { font-size:14px; line-height:1.8; color:#6d7c73; margin:9px 2px 0; }
/* Screenshot geometry is generated separately from the guide JSON. */
.guide-preview-slot { margin:22px 0 5px; }
.guide-preview { border:1px solid #ceddd2; border-radius:12px; overflow:hidden; background:#f7faf5; position:relative; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; background:#f0f5ee; border-bottom:1px solid #d9e4d7; }
.preview-label { display:block; font-size:10px; letter-spacing:.08em; color:#71806e; margin-bottom:3px; }
.preview-toolbar h3 { font-size:16px; line-height:1.5; letter-spacing:0; color:var(--green); }
.preview-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.preview-actions button,.preview-status button { display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:6px 10px; border:1px solid #cfdccf; border-radius:6px; color:var(--green); background:#fff; font-size:12px; }
.preview-actions .icon { width:14px; height:14px; }
.preview-cover { position:relative; max-height:360px; overflow:hidden; background:#e7efe4; }
.preview-cover img { width:100%; height:auto; display:block; }
.preview-cover:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 10%,#102f2740 100%); pointer-events:none; }
.preview-launch { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--green); color:#fff; border:1px solid #ffffff44; border-radius:8px; box-shadow:0 7px 25px #082e2940; padding:12px 24px; white-space:nowrap; display:flex; gap:12px; align-items:center; font-size:15px; font-weight:600; }
.preview-launch:hover { background:#0b493f; }
.preview-stage { height:720px; background:white; }
.preview-stage.is-collapsed { position:absolute; top:0; left:0; right:0; visibility:hidden; pointer-events:none; }
.preview-stage iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
.preview-status { position:absolute; inset:79px 0 37px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; background:#fafcf8; color:#4e6658; font-size:14px; z-index:2; }
.preview-footnote { font-size:11px; line-height:1.8; padding:10px 16px; color:#6b786e; border-top:1px solid #e0e8dc; background:#f6f9f2; }
.preview-is-fullscreen { position:fixed; inset:24px; z-index:1000; display:flex; flex-direction:column; border-radius:12px; box-shadow:0 0 0 100vmax #102b24ba; }
.preview-is-fullscreen .preview-toolbar { flex:0 0 auto; }
.preview-is-fullscreen .preview-stage { flex:1 1 0; min-height:0; height:auto; }
.preview-is-fullscreen .preview-footnote { flex:0 0 auto; }
body.guide-overlay-open { overflow:hidden; }
.guide-ending { padding:35px 0 40px; border-top:1px solid var(--line); }
.guide-ending h2 { font-size:26px; margin-bottom:15px; }
.guide-ending > p:not(.guide-eyebrow) { font-size:var(--guide-body-size); line-height:var(--guide-body-leading); max-width:760px; }
.guide-related { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.guide-related a { display:flex; align-items:center; gap:10px; color:var(--green); border:1px solid #dce5d9; background:#f4f7ef; font-size:13px; padding:10px 14px; border-radius:7px; }
.guide-related .icon { width:16px; height:16px; }
.guide-top { display:inline-block; margin-top:28px; color:#697b6b; font-size:12px; }
.guide-image-viewer { position:fixed; z-index:1100; inset:0; display:flex; flex-direction:column; background:#14251f; color:#fff; }
.image-viewer-toolbar { position:relative; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 74px 14px 24px; background:#162d26; flex:0 0 auto; }
.image-viewer-toolbar p { color:#eef5ef; font-size:13px; }
.image-viewer-toolbar > div { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.image-viewer-toolbar button { min-width:36px; min-height:36px; padding:4px 10px; font-size:12px; border:1px solid #53695f; background:#213c32; color:white; border-radius:6px; }
.image-viewer-toolbar > [data-image-close] { position:absolute; right:24px; top:14px; }
.image-viewer-toolbar output { font-size:11px; min-width:40px; text-align:center; }
.image-viewer-canvas { flex:1; min-height:0; overflow:auto; padding:24px; overscroll-behavior:contain; }
.image-viewer-image { container-type:inline-size; position:relative; margin:0 auto; max-width:none; }
.image-viewer-canvas img { display:block; width:100%; max-width:none; height:auto; background:white; }
.image-viewer-caption { flex:0 0 auto; margin:0; padding:12px 24px; color:#c3d7c9; font-size:14px; background:#162d26; }
@media (max-width:1100px) {
  .guide-shell { width:calc(100% - 48px); gap:24px; grid-template-columns:200px minmax(0,1fr); }
  :is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) main .breadcrumb { width:calc(100% - 48px); }
  .guide-article { padding:30px 25px 0; }
  .guide-figure { margin-left:0; }
  .guide-step-continuation { margin-left:0; }
}
@media (max-width:900px) {
  .guide-shell { grid-template-columns:minmax(0,1fr); gap:18px; }
  .guide-sidebar { position:sticky; top:79px; z-index:25; overflow:visible; max-height:none; background:#fafbf9; padding:0; }
  .guide-toc { border:1px solid #dbe4d7; border-radius:9px; background:#f2f6ed; box-shadow:0 4px 12px #203e2510; }
  .guide-toc summary { padding:12px 15px; cursor:pointer; display:flex; justify-content:space-between; }
  .guide-toc summary span { display:inline; }
  .guide-toc[open] summary { border-bottom:1px solid #dbe4d7; }
  .guide-toc nav { max-height:52dvh; overflow:auto; padding:8px; }
  .guide-back { display:none; }
  .guide-intro { padding-bottom:32px; }
  .guide-intro,.guide-section,.guide-step { scroll-margin-top:150px; }
  .guide-preview .preview-stage { height:560px; }
  .preview-is-fullscreen .preview-stage { height:auto; }
}
@media (max-width:600px) {
  :is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) main .breadcrumb { width:calc(100% - 32px); font-size:11px; gap:6px; margin:20px auto; }
  .guide-shell { width:calc(100% - 24px); }
  .guide-sidebar { top:70px; }
  .guide-article { padding:26px 18px 0; border-radius:10px; }
  .guide-intro h1 { font-size:26px; }
  .guide-meta { gap:6px 12px; font-size:11px; margin:16px 0 24px; }
  :is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) { --guide-body-size:var(--text-small); }
  .guide-section h2 { font-size:22px; }
  .guide-section-heading { gap:11px; }
  .guide-section-number { width:33px; height:33px; }
  .guide-step-copy { gap:10px; }
  .guide-step-number { width:22px; height:22px; flex-basis:22px; margin-top:5px; font-size:11px; }
  .guide-figure { margin-top:16px; }
  .guide-step { padding-bottom:22px; }
  .guide-step-links { margin-left:32px; }
  .guide-image-hint { padding:3px 6px; bottom:6px; right:6px; font-size:10px; }
  .guide-figure figcaption { font-size:14px; }
  .preview-toolbar { padding:12px; align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .preview-toolbar h3 { font-size:14px; }
  .preview-actions button { min-height:36px; font-size:11px; }
  .preview-cover { max-height:230px; }
  .preview-launch { font-size:13px; padding:10px 18px; }
  .preview-is-fullscreen { inset:0; border-radius:0; }
  .preview-is-fullscreen .preview-toolbar { flex-wrap:nowrap; align-items:center; padding-top:max(12px,env(safe-area-inset-top)); }
  .preview-is-fullscreen .preview-footnote { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  .preview-status { inset:105px 0 60px; }
  .guide-ending h2 { font-size:23px; }
  .image-viewer-toolbar { padding:12px; gap:8px; }
  .image-viewer-toolbar p { width:100%; padding-right:44px; min-height:36px; display:flex; align-items:center; }
  .image-viewer-toolbar > [data-image-close] { right:12px; top:12px; }
  .image-viewer-toolbar > div { gap:5px; width:100%; justify-content:space-between; }
  .image-viewer-toolbar button { padding:4px 7px; }
  .image-viewer-canvas { padding:12px; }
  .image-viewer-caption { padding:10px 14px; }
}
@media (prefers-reduced-motion:reduce) { :is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) { scroll-behavior:auto; } }
@media print {
  .guide-sidebar,.preview-actions,.guide-image-hint,.guide-image-viewer { display:none; }
  .guide-shell { display:block; width:100%; }
  .guide-article { border:0; padding:0; }
  .guide-image-link { break-inside:avoid; }
}

/* Independent tutorials share one server-rendered document. */
:is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) { --guide-tabs-height:82px; --guide-offset:calc(var(--site-header-height) + var(--guide-tabs-height) + 24px); }
.guide-page-intro { width:calc(100% - 80px); max-width:1360px; margin:0 auto; padding:58px 0 40px 272px; }
.guide-page-intro .guide-relation { max-width:860px; }
.guide-section-tabs { position:sticky; top:var(--site-header-height); z-index:50; background:#fafbf9f5; border-top:1px solid #e4eae1; border-bottom:1px solid #dce5da; backdrop-filter:blur(14px); }
.guide-tabs-list { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); max-width:1360px; width:calc(100% - 80px); margin:0 auto; }
.guide-section-tab { display:flex; align-items:center; gap:10px; min-height:82px; padding:14px 18px; border-bottom:3px solid transparent; margin-bottom:-1px; font-size:14px; line-height:1.65; }
.guide-section-tab > span { font-size:10px; color:#7a9082; }
.guide-section-tab strong { font-weight:500; }
.guide-section-tab:hover { background:#f0f5ed; color:var(--green); }
.guide-section-tab[aria-selected="true"] { background:#eaf2e6; color:var(--green); border-bottom-color:var(--green); }
.guide-section-tab[aria-selected="true"] strong { font-weight:650; }
.guide-shell { margin:32px auto 0; }
.guide-sidebar { top:var(--guide-offset); max-height:calc(100dvh - var(--guide-offset) - 20px); }
.guide-toc summary { padding:5px 12px 20px; font-size:12px; color:#839084; font-weight:500; }
.guide-toc-section { font-size:14px; }
.guide-toc-steps { padding:4px 0 8px 12px; font-size:13px; }
.guide-toc-steps a { padding:8px 10px; }
.guide-back { padding-top:15px; margin-top:16px; }
.guide-article { padding-top:0; }
.guide-sections { position:relative; min-width:0; }
.guide-section { border-top:0; padding-top:38px; }
.guide-enhanced .guide-section[hidden] { display:block!important; position:absolute; inset:0 0 auto; width:100%; height:0; overflow:hidden; contain:paint; visibility:hidden; pointer-events:none; }
.guide-enhanced .guide-section[hidden] * { visibility:hidden!important; }
.guide-section,.guide-step { scroll-margin-top:calc(var(--guide-offset) - 95px); }
.guide-lesson-turn { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:25px 0; font-size:13px; }
.guide-lesson-turn button { border:1px solid #d9e4d6; padding:10px 14px; border-radius:7px; background:#f4f8f0; color:var(--green); }
.guide-lesson-turn button:disabled { opacity:.35; cursor:default; }
.guide-lesson-turn span { color:#8a958b; }
.preview-cover { max-height:none; }
.preview-cover img { aspect-ratio:auto; }
.preview-stage { height:min(720px,calc(100dvh - var(--site-header-height) - var(--guide-tabs-height) - 150px)); min-height:330px; }
.preview-cover:after { background:linear-gradient(transparent 50%,#102f2720); }
.preview-launch { top:auto; bottom:20px; transform:translateX(-50%); font-weight:550; backdrop-filter:blur(8px); background:#104e43eb; }
.preview-mode-fullscreen:not(.preview-is-fullscreen) .preview-footnote { color:var(--green); }
.preview-is-fullscreen { inset:12px; }
.preview-is-fullscreen .preview-stage { height:auto; min-height:0; }
.preview-is-fullscreen .preview-toolbar { padding:12px 18px; }
.preview-status { inset:70px 0 42px; }
@media(max-width:1100px) {
 .guide-page-intro { width:calc(100% - 48px); padding-left:224px; }
 .guide-tabs-list { width:calc(100% - 48px); }
 .guide-section-tab { font-size:13px; padding-inline:10px; }
}
@media(max-width:900px) {
 html:not(.guide-enhanced) .guide-section-tabs,html:not(.guide-enhanced) .guide-sidebar { position:static; }
 :is(.page-workbuddy-guide,.page-ima-guide,.page-system-guide) { --guide-tabs-height:76px; }
 .guide-page-intro { padding:36px 0; }
 .guide-tabs-list { display:flex; width:100%; overflow-x:auto; scrollbar-width:thin; overscroll-behavior-x:contain; padding:0 24px; }
 .guide-section-tab { flex:0 0 auto; min-height:76px; min-width:164px; padding:12px 14px; font-size:14px; }
 .guide-section-tab strong { white-space:nowrap; }
 .guide-shell { margin-top:20px; }
 .guide-sidebar { top:calc(var(--site-header-height) + var(--guide-tabs-height)); z-index:35; max-height:none; }
 .guide-toc summary { padding:11px 15px; color:var(--green); }
 .guide-toc nav { max-height:45dvh; }
 .guide-article { padding-top:0; }
 .guide-section { padding-top:28px; }
 .guide-step,.guide-section { scroll-margin-top:calc(var(--guide-offset) - 45px); }
 .guide-preview .preview-stage { height:min(560px,calc(100dvh - var(--site-header-height) - var(--guide-tabs-height) - 205px)); min-height:280px; }
 .preview-is-fullscreen .preview-stage { height:auto; min-height:0; }
}
@media(max-width:600px) {
 .guide-page-intro { width:calc(100% - 36px); padding:30px 0; }
 .guide-page-intro h1 { font-size:27px; }
 .guide-section-tabs { margin-top:0; }
 .guide-tabs-list { padding-inline:12px; }
 .guide-section-tab { min-width:160px; }
 .preview-is-fullscreen { inset:0; }
 .preview-launch { bottom:12px; padding:8px 16px; font-size:12px; }
 .preview-toolbar h3 { font-size:14px; }
 .preview-toolbar { padding:12px; }
 .preview-footnote { font-size:11px; line-height:1.6; }
 .image-viewer-caption { font-size:14px; }
 .guide-lesson-turn { font-size:12px; }
 .guide-lesson-turn span { display:none; }
}
@media print {
 .guide-section-tabs,.guide-lesson-turn { display:none; }
 .guide-page-intro { width:100%; padding:0; }
 .guide-enhanced .guide-section[hidden],.guide-enhanced .guide-section[hidden] * { position:static; visibility:visible!important; }
}

/* Screenshot annotations remain a separate, clonable HTML/SVG layer. */
.guide-image-link { container-type:inline-size; }
.guide-figure { container-type:inline-size; }
.guide-image-annotations { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.guide-annotation-lines { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }
.guide-annotation-box { fill:none; stroke:#19834f; stroke-width:2.5; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 1px #fff); }
.guide-annotation-arrow { fill:none; stroke:#19834f; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 1px #fff); }
.guide-annotation-arrowhead { fill:#19834f; stroke:#fff; stroke-width:.6; vector-effect:non-scaling-stroke; }
.guide-annotation-label { position:absolute; display:inline-flex; align-items:center; gap:6px; transform:translate(-50%,-50%); max-width:240px; min-height:28px; padding:3px 9px 3px 4px; border:1px solid #fff; border-radius:5px; box-shadow:0 2px 7px #113b3029; background:#16814d; color:#fff; font-size:14px; font-weight:500; line-height:1.45; white-space:nowrap; }
.guide-annotation-number { display:inline-flex; justify-content:center; align-items:center; width:20px; height:20px; flex:0 0 20px; border:1px solid #ffffffa6; border-radius:50%; font-size:12px; font-weight:650; line-height:1; }
.guide-annotation-legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.guide-figure figcaption { font-size:14px; line-height:1.8; }
@container (max-width:760px) {
 .guide-image-link .guide-annotation-label { gap:0; padding:2px; min-height:26px; border-radius:50%; }
 .guide-image-link .guide-annotation-text { display:none; }
 .guide-image-link .guide-annotation-number { width:20px; height:20px; border:0; }
}
@container (max-width:760px) {
 .guide-annotation-legend { position:static; display:inline; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
}
@media (max-width:760px) {
 .guide-image-link .guide-annotation-label { gap:0; padding:2px; min-height:26px; border-radius:50%; }
 .guide-image-link .guide-annotation-text { display:none; }
 .guide-image-link .guide-annotation-number { width:20px; height:20px; border:0; }
}
.guide-image-viewer .guide-annotation-text { display:inline; }

@container (max-width:760px) {
 .image-viewer-image .guide-annotation-label { gap:0; padding:2px; min-height:26px; border-radius:50%; }
 .guide-image-viewer .image-viewer-image .guide-annotation-text { display:none; }
 .image-viewer-image .guide-annotation-number { width:20px; height:20px; border:0; }
}

/* Keep short captions below the screenshot, with the same reading width. */
.page-system-guide .guide-page-intro h1 { max-width:1040px; }
.page-system-guide .guide-reading-note { margin:20px 0 0; font-size:14px; line-height:1.8; color:#6d7c73; }
.page-system-guide .guide-figure.is-phone { max-width:380px; }
.page-system-guide .guide-figure.is-code { max-width:280px; }
.page-system-guide .guide-figure.is-code .guide-image-link { padding:12px; background:#fff; }
.page-system-guide .guide-figure figcaption { margin:10px 0 0; min-width:0; }
.page-system-guide .guide-caption-description { margin:0; line-height:1.9; overflow-wrap:anywhere; }
.page-system-guide .image-viewer-caption { white-space:pre-line; line-height:1.7; max-height:30dvh; overflow-y:auto; }
@media (max-width:760px) {
 .page-system-guide .guide-figure.is-code { margin-inline:auto; }
}