/* Scoped to this note; the diagram stays light in either site theme. */
.article-body .note-trend-flow{margin:36px 0;padding:24px;background:#f7f9f5;color:#243a31;border:1px solid #d9e3da;border-radius:16px;line-height:1.5}
.note-trend-flow figcaption{margin-bottom:20px;font-size:17px;font-weight:700;text-align:center;color:#243a31}
.article-body .note-trend-flow-steps{list-style:none;margin:0 auto;padding:0;max-width:520px;counter-reset:flow-step}
.article-body .note-trend-flow-steps li{position:relative;box-sizing:border-box;margin:0 0 25px;padding:12px 16px 12px 46px;background:#fff;border:1px solid #d6e1d9;border-radius:10px;color:#243a31;counter-increment:flow-step;font-size:16px}
.note-trend-flow-steps li::before{content:counter(flow-step);position:absolute;left:16px;top:13px;color:#5b7164;font-size:13px;font-weight:700}
.note-trend-flow-steps li:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);color:#6c8173;font-size:19px;line-height:24px}
.note-trend-flow-steps strong{display:block;font-size:16px;font-weight:650;overflow-wrap:anywhere}
.note-trend-flow-steps small{display:block;margin-top:3px;color:#52665a;font-size:14px}
.article-body .note-trend-flow-steps .note-trend-flow-observe{background:#fff9e9;border-color:#e5d9b3}
.article-body .note-trend-flow-steps .note-trend-flow-entry{background:#eaf4ec;border-color:#bfd5c3}
.article-body .note-trend-flow-steps .note-trend-flow-exit{margin-bottom:0;background:#faf0ec;border-color:#e5cfc4}
@media(max-width:650px){.article-body .note-trend-flow{padding:18px 12px;border-radius:12px}.note-trend-flow figcaption{font-size:16px}.article-body .note-trend-flow-steps li{padding:11px 12px 11px 38px}.note-trend-flow-steps li::before{left:12px;top:12px}.note-trend-flow-steps strong{font-size:15px}.note-trend-flow-steps small{font-size:13px}}