.reader-diagram{margin:28px 0;padding:22px;border:1px solid rgba(109,190,218,.28);border-radius:20px;background:linear-gradient(135deg,#102b42,#071426);color:#c9daea}
.reader-diagram figcaption{margin:18px 0 0;color:#b2c8dc;line-height:1.65;font-size:.94rem}
.reader-diagram ol{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.reader-diagram li{min-width:0;padding:18px;border:1px solid rgba(140,190,215,.3);border-radius:15px;background:rgba(6,18,34,.8)}
.reader-diagram strong,.reader-diagram li>span{display:block}.reader-diagram strong{margin:6px 0 9px;color:#f2d180;font-size:1.08rem;line-height:1.4}.reader-diagram li>span{line-height:1.6}
.reader-diagram .reader-diagram-number{font-size:.8rem;color:#61cfdd;font-weight:700}
.reader-diagram-flow,.reader-diagram-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}
.reader-diagram-compare,.reader-diagram-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
.reader-diagram-flow li:not(:last-child)::after{content:'→';display:block;margin-top:8px;color:#61cfdd;font-size:1.3rem}
.reader-diagram-timeline li{border-top:4px solid #61cfdd}.reader-diagram-bars li{position:relative}
.reader-diagram .reader-bar{display:block;width:var(--reader-bar);height:13px;border-radius:10px;margin-top:16px;background:linear-gradient(90deg,#45bccb,#f2d180)}
.reader-diagram svg{display:block;width:100%;max-width:640px;height:auto;margin:auto;font-family:system-ui,sans-serif}
@media(max-width:720px){.reader-diagram-flow,.reader-diagram-timeline{grid-template-columns:1fr}.reader-diagram-flow li:not(:last-child)::after{content:'↓'}}
@media(max-width:520px){.reader-diagram{padding:16px}.reader-diagram-compare,.reader-diagram-dashboard{grid-template-columns:1fr}.reader-diagram li{padding:16px}}
.reader-topic-nav{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 38px}.reader-topic-nav a{display:flex;align-items:center;min-height:44px;padding:10px 14px;box-sizing:border-box;border:1px solid #38506b;border-radius:12px;background:#071323;color:#f0d58b;text-decoration:none;max-width:100%;overflow-wrap:anywhere}.reader-topic-nav a:focus-visible{outline:2px solid #60ddc4;outline-offset:3px}.learning-section[id^="read-topic-"]{scroll-margin-top:95px}