/* Shared reading system for every article. */
.reading-page{width:100%;max-width:none;margin:auto;padding:28px 32px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.article-intro{margin-bottom:28px}
.article-intro-with-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,32%);gap:32px;align-items:start}
.article-heading{max-width:none;margin:0;padding:0;min-width:0}
.article-heading h1{max-width:1100px;font:650 clamp(27px,2.6vw,34px)/1.22 system-ui;letter-spacing:-.6px;color:#123b5d;text-transform:none;margin:16px 0 12px;padding:0}
.article-breadcrumb{display:flex;gap:10px;font-size:12px}
.article-heading .article-deck{max-width:1000px;font-size:17px;line-height:1.7;font-weight:450;color:#28536a;margin:22px 0 24px;padding:18px 22px;border-left:3px solid #087f82;border-radius:0 12px 12px 0;background:linear-gradient(110deg,#edf7f6,#f8fbfc)}
.article-byline{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;margin-top:22px;padding-bottom:8px}
.article-author{display:inline-flex;align-items:center;gap:11px;min-width:0;color:#123b5d}
.article-author-avatar{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#123b5d;color:#fff;font-size:14px;font-weight:650;letter-spacing:.5px;box-shadow:0 0 0 4px #edf7f6}
.article-author-details{display:flex;flex-direction:column;gap:2px}
.article-meta-label{font-size:10px;line-height:1.4;letter-spacing:1.3px;text-transform:uppercase;color:#526b7a;font-weight:600}
.article-author-name{font-size:14px;line-height:1.5;font-weight:650}
.article-author:hover .article-author-name{text-decoration:underline;text-underline-offset:4px}
.article-author:focus-visible{outline:2px solid #087f82;outline-offset:6px;border-radius:4px}
.article-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.article-fact{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #dfe8ec;border-radius:999px;background:#f8fafb;color:#526b7a;font-size:12px;line-height:1.5}
.article-fact svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.article-read-time{background:#edf7f6;border-color:#d5eae7;color:#096b6e;font-weight:600}
.article-updated{font-size:12px;color:#526b7a}
@media(max-width:599px){.article-heading .article-deck{font-size:16px;padding:15px 17px;margin:20px 0}.article-byline{gap:16px}.article-facts{width:100%}}
.article-cover{min-width:0;margin:0}
.article-cover img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;object-position:right center;border-radius:8px}
.reading-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.reading-grid:not(:has(.article-outline:not([hidden]))){grid-template-columns:minmax(0,1fr)}
.article-outline{position:sticky;top:20px;max-height:85vh;overflow:auto;padding:12px 16px 12px 0;border-right:1px solid var(--line)}
.article-outline summary{font-size:13px;font-weight:650}
.article-outline ol{padding:12px 0 0;list-style:none;margin:0}
.article-outline li{padding:0;margin:0 0 9px;font-size:12px;line-height:1.5}
.article-outline a{color:var(--muted)}.article-outline a:hover{color:var(--teal)}
.article-prose{min-width:0;font-size:16px;line-height:1.65;overflow-wrap:break-word}
.article-prose p,.article-prose ul,.article-prose ol,.article-prose li,.article-prose blockquote{font-family:inherit;font-size:inherit;line-height:inherit}
.article-prose>p,.article-prose>ul,.article-prose>ol{max-width:none}
.article-prose p{margin:0 0 16px}
.article-prose h1,.article-prose h2,.article-prose h3,.article-prose h4,.article-prose h5,.article-prose h6{font-family:inherit;color:var(--ink);text-transform:none;line-height:1.3;letter-spacing:0;scroll-margin-top:24px;font-weight:650}
.article-prose h1,.article-prose h2{font-size:26px;margin:32px 0 14px;padding:0;border:0}
.article-prose h1{color:#123b5d}
.article-prose h2{color:#087f82}
.article-prose h2::before{content:"";display:block;width:36px;height:3px;margin-bottom:10px;border-radius:2px;background:#087f82}
.article-prose h3{font-size:21px;margin:24px 0 12px;color:#285e78}
.article-prose h4{font-size:18px;margin:20px 0 10px}
.article-prose h5,.article-prose h6{font-size:16px;margin:18px 0 10px}
.article-prose ul{list-style:disc;padding-left:24px}.article-prose ol{padding-left:24px}
.article-prose li{padding:0;margin:6px 0}.article-prose ul li::before{content:none}
.article-prose a{text-decoration:underline!important;text-underline-offset:3px;color:#086f83}
.article-prose img{max-width:100%;height:auto;border-radius:8px}
.article-prose pre{overflow:auto;padding:16px;border-radius:8px;font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.article-prose code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}
.article-prose pre code{font-size:inherit}
.article-prose blockquote,.article-prose .exam-toc{background:var(--paper);border-left:3px solid var(--teal);padding:16px 20px;margin:20px 0}
.article-prose figcaption,.article-prose .back-to-toc{font-size:13px;color:var(--muted)}
.article-prose .table-scroll{overflow:auto;margin:22px 0;border:1px solid #d5e4e6;border-radius:10px;background:white;box-shadow:0 2px 8px #123b5d08}
.article-prose .exam-table,.article-prose .table-wrap{overflow:visible;margin:0;border:0;border-radius:0;box-shadow:none}
.article-prose .table-scroll .table-scroll{margin:0;border:0;box-shadow:none}
.article-prose table,.article-prose .table-wrap table{font:14px/1.6 system-ui;width:100%;min-width:480px;border-collapse:separate;border-spacing:0;margin:0}
.article-prose table th,.article-prose table td{padding:13px 16px;border:0;border-bottom:1px solid #e0ebed;vertical-align:top;white-space:normal;border-radius:0}
.article-prose table thead th{background:#123b5d;color:#fff;font-weight:650;border-bottom:3px solid #087f82}
.article-prose table tbody td,.article-prose table tbody th{color:#142d3f}
.article-prose table tbody tr:nth-child(odd){background:#fff}
.article-prose table tbody tr:nth-child(even){background:#f0f7f7}
.article-prose table tbody tr:hover,.article-prose table tbody tr:focus-within{background:#e2f1f0}
.article-prose table tbody td:first-child,.article-prose table tbody th{font-weight:600;color:#123b5d}
.article-prose table tbody tr:last-child td,.article-prose table tbody tr:last-child th{border-bottom:0;border-radius:0}
.article-prose table thead a{color:#fff}
.article-prose table caption{caption-side:top;text-align:left;padding:12px 16px;font-size:13px;color:var(--muted)}
@media(max-width:599px){.article-prose table th,.article-prose table td{padding:10px 12px}}
.copy-code{display:block;margin-left:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:6px 12px;font-size:12px}
.article-footer{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;background:white;text-align:left}
.article-footer>h2{font:650 26px/1.3 system-ui;color:var(--ink);margin:0 0 20px}
.return-link{display:inline-block;margin-top:24px}
@media(max-width:1099px){.reading-grid{display:flex;flex-direction:column;gap:20px}.article-outline{position:static;max-height:none;width:100%;padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.article-prose{width:100%}}
@media(max-width:799px){.article-intro-with-cover{grid-template-columns:1fr;gap:20px}.article-cover{width:100%;max-width:560px}.article-cover img{object-position:left center}}
@media(max-width:599px){.reading-page{padding:20px}.article-heading h1{font-size:27px}.article-cover img{max-height:220px}.article-prose h2{font-size:24px}.article-prose h3{font-size:20px}}

/* Compact diagrams retain readable labels without stretching the SVG. */
.article-prose .mermaid-diagram{margin:22px 0;padding:20px 16px;overflow-x:auto;text-align:center;border:1px solid #dfeaec;border-radius:14px;background:linear-gradient(120deg,#f8fbfc,#f1f8f7)}
.article-prose .mermaid-diagram>svg{display:block;margin:auto;max-width:none;height:auto}
.article-prose .mermaid-diagram .node rect{rx:9px;ry:9px}
.article-prose .mermaid-diagram:focus-visible{outline:2px solid #087f82;outline-offset:3px}
@media(max-width:599px){.article-prose .mermaid-diagram{padding:14px 10px}}