@layer mixlivo-reader-v2 {
.guide-visual-figure{max-width:640px;margin:30px 0;border:1px solid #dce3ed;border-radius:14px;overflow:hidden;background:#fff}
.guide-visual-figure picture,.guide-visual-figure img{display:block;width:100%;height:auto}
.guide-visual-figure figcaption{padding:16px 20px;background:#f7f9fc;color:#43536d;font-size:14px;line-height:1.85}
.guide-visual-figure figcaption strong{color:#22314a}
.guide-visual-flow{margin:30px 0;padding:26px;border:1px solid #ddd6f3;border-radius:14px;background:#faf8ff;color:#22314a}
.guide-visual-flow .flow-kicker{margin:0 0 8px;color:#7554be;font-size:12px;letter-spacing:.06em;font-weight:700}
.guide-visual-flow h3{margin:0 0 18px!important;font-size:22px!important;color:#22314a!important}
.guide-visual-flow .flow-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;margin:0 0 20px;padding:0}
.guide-visual-flow .flow-steps li{margin:0;padding:17px;background:#fff;border:1px solid #e4dff2;border-radius:10px;line-height:1.75}
.guide-visual-flow .step-no{display:block;color:#7955c7;font-size:12px;font-weight:700;margin-bottom:5px}
.guide-visual-flow .flow-steps strong{display:block;margin-bottom:5px;color:#22314a}
.guide-visual-flow .flow-steps p{margin:0!important;font-size:14px;line-height:1.8!important}
.guide-visual-flow .flow-branches{display:grid;gap:10px}
.guide-visual-flow .flow-branch{padding:14px 17px;border-left:3px solid #9876d3;border-radius:0 8px 8px 0;background:#f0ebf8}
.guide-visual-flow .flow-branch strong{display:block;color:#22314a;font-size:15px;margin-bottom:4px}
.guide-visual-flow .flow-branch p{font-size:14px;line-height:1.8!important;margin:0!important}
.guide-visual-flow .flow-footer{margin:18px 0 0!important;font-size:14px;font-weight:600;color:#5e417f}
.dark .guide-visual-figure{border-color:#34425a;background:#182439}
.dark .guide-visual-figure figcaption{background:#182439;color:#becadf}
.dark .guide-visual-figure figcaption strong{color:#e2e9f6}
.dark .guide-visual-flow{background:#221d33;border-color:#423651;color:#ced8e8}
.dark .guide-visual-flow h3,.dark .guide-visual-flow .flow-steps strong,.dark .guide-visual-flow .flow-branch strong{color:#e8e4f2!important}
.dark .guide-visual-flow .flow-steps li{background:#202b3f;border-color:#3b425c}
.dark .guide-visual-flow .flow-branch{background:#30243e}
.dark .guide-visual-flow .flow-footer{color:#c9b3e7}
@media(max-width:650px){.guide-visual-figure{max-width:640px;margin:24px 0}.guide-visual-figure figcaption{padding:14px 16px}.guide-visual-flow{padding:18px;margin:24px 0}.guide-visual-flow .flow-steps{grid-template-columns:1fr}.guide-visual-flow h3{font-size:20px!important}.guide-visual-flow .flow-steps li{padding:15px}}

/* Keep the diagram distinct from the article's inherited section/list rules. */
.reader-page .reader-content .guide-visual-flow{background:#faf8ff!important;border:1px solid #ddd6f3!important;color:#22314a!important}
.reader-page .reader-content .guide-visual-flow h3{font-size:22px!important;line-height:1.5!important;color:#22314a!important}
.reader-page .reader-content .guide-visual-flow .flow-kicker{color:#7554be!important;font-size:12px!important;margin:0 0 8px!important}
.reader-page .reader-content .guide-visual-flow .flow-steps{padding:0!important;margin:0 0 20px!important;gap:14px!important}
.reader-page .reader-content .guide-visual-flow .flow-steps li{background:#fff!important;border-color:#e4dff2!important;margin:0!important;padding:17px!important}
.reader-page .reader-content .guide-visual-flow .flow-steps p,.reader-page .reader-content .guide-visual-flow .flow-branch p{margin:0!important;font-size:14px!important;line-height:1.8!important}
.reader-page .reader-content .guide-visual-flow .step-no{color:#7955c7!important}
.reader-page .reader-content .guide-visual-flow .flow-branch{background:#f0ebf8!important;border-left-color:#9876d3!important}
.reader-page .reader-content .guide-visual-flow .flow-footer{font-size:14px!important;color:#5e417f!important;margin:18px 0 0!important}
.dark .reader-page .reader-content .guide-visual-flow{background:#252137!important;border-color:#4a3a66!important;color:#d5deed!important}
.dark .reader-page .reader-content .guide-visual-flow h3{color:#eee6fc!important}
.dark .reader-page .reader-content .guide-visual-flow .flow-kicker,.dark .reader-page .reader-content .guide-visual-flow .step-no{color:#c4a6ff!important}
.dark .reader-page .reader-content .guide-visual-flow .flow-steps li{background:#202b3f!important;border-color:#4a4264!important}
.dark .reader-page .reader-content .guide-visual-flow .flow-branch{background:#322745!important;border-left-color:#b497e0!important}
.dark .reader-page .reader-content .guide-visual-flow .flow-footer{color:#d6bff4!important}
@media(max-width:650px){.reader-page .reader-content .guide-visual-flow h3{font-size:20px!important}.reader-page .reader-content .guide-visual-flow .flow-steps li{padding:15px!important}}

}