:root {
     --mrd-font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
     --mrd-font-body: 'Source Serif 4', Georgia, serif;

     /* ── Light palette ── */
     --mrd-page-bg: #faf9f7;
     --mrd-bg: #faf9f7;
     --mrd-surface: #f0ede7;
     --mrd-surface2: #e8e4db;
     --mrd-text: #3d3a33;
     --mrd-heading: #1c1a14;
     --mrd-muted: #6b6860;
     --mrd-subtle: #9a9790;
     --mrd-border: #e4e0d8;
     --mrd-accent: #b85c20;
     --mrd-accent-lt: #f5ede6;
     --mrd-link: #2559d9;
     --mrd-code-bg: #edeae4;
     --mrd-code-clr: #b83010;

     --mrd-content-w: 780px;
     --mrd-pad: 64px;
     --mrd-pad-tab: 32px;
     --mrd-pad-mob: 36px;
     --mrd-radius: 8px;
     --mrd-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
     --mrd-shadow-md: 0 4px 18px rgba(0, 0, 0, .09);
 }

 /* @media (prefers-color-scheme: dark) {  */
 html.dark {
     --mrd-page-bg: #181714;
     --mrd-bg: #181714;
     --mrd-surface: #211f1b;
     --mrd-surface2: #2a2822;
     --mrd-text: #ccc8be;
     --mrd-heading: #e6e2d8;
     --mrd-muted: #857f76;
     --mrd-subtle: #58554f;
     --mrd-border: #2c2a25;
     --mrd-accent: #d97c36;
     --mrd-accent-lt: #261a10;
     --mrd-link: #6b9ef8;
     --mrd-code-bg: #222019;
     --mrd-code-clr: #f07038;
     --mrd-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
     --mrd-shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
 }

 /* } */

 /* ── RESET ── */
 .mrd-page *,
 .mrd-page *::before,
 .mrd-page *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 /* ════════════════════════════════════════════════════
                                                                                           PAGE SHELL — single centred column, no sidebar
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-page {
     font-family: var(--mrd-font-ui);
     background: var(--mrd-page-bg);
     color: var(--mrd-text);
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
 }

 .mrd-center {
     max-width: var(--mrd-content-w);
     margin: 0 auto;
     padding: 0 var(--mrd-pad) 100px;
 }

 /* ════════════════════════════════════════════════════
                                                                                           PROGRESS BAR
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-progress-track {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     z-index: 9999;
 }

 .mrd-progress-fill {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, var(--mrd-accent), color-mix(in srgb, var(--mrd-accent) 55%, #f0a060));
     transition: width .1s linear;
     border-radius: 0 2px 2px 0;
 }

 /* ════════════════════════════════════════════════════
                                                                                           ARTICLE HEADER
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-article {
     padding-top: 52px;
 }

 /* Category pill */
 .mrd-category-pill {
     display: inline-block;
     background: var(--mrd-accent-lt);
     color: var(--mrd-accent);
     font-family: var(--mrd-font-ui);
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 4px;
     text-decoration: none;
     border: 1px solid color-mix(in srgb, var(--mrd-accent) 22%, transparent);
     margin-bottom: 20px;
     transition: background .15s;
 }

 a.mrd-category-pill:hover {
     background: color-mix(in srgb, var(--mrd-accent) 14%, transparent);
 }

 /* Title */
 .mrd-title {
     font-family: var(--mrd-font-body);
     font-size: clamp(28px, 4.2vw, 46px);
     font-weight: 700;
     line-height: 1.18;
     letter-spacing: -.022em;
     color: var(--mrd-heading);
     margin: 0 0 14px;
 }

 /* Subtitle — large, readable, NOT italic */
 .mrd-subtitle {
     font-family: var(--mrd-font-body);
     font-size: clamp(20px, 2.4vw, 24px);
     font-weight: 400;
     line-height: 1.52;
     color: var(--mrd-muted);
     margin: 0 0 28px;
     padding-left: 0;
 }

 /* Make sure <p> tags inside subtitle have spacing */
 .mrd-subtitle p {
     margin: 0 0 0.6em;
     line-height: 1.68;
 }

 .mrd-subtitle p:last-child {
     margin-bottom: 0;
 }

 /* If intro uses <br> tags, give them breathing room */
 .mrd-subtitle br {
     display: block;
     content: '';
     margin-top: 0.5em;
 }

 /* Byline */
 .mrd-byline {
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 20px 0 0;
     border-top: 1px solid var(--mrd-border);
     margin-bottom: 0;
 }

 .mrd-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--mrd-border);
     flex-shrink: 0;
 }

 .mrd-byline-info {
     flex: 1;
 }

 .mrd-byline-top {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 3px;
 }

 .mrd-author-name {
     font-family: var(--mrd-font-ui);
     font-size: 13.5px;
     font-weight: 600;
     color: var(--mrd-heading);
     letter-spacing: -.01em;
 }

 .mrd-follow-pill {
     background: transparent;
     border: 1.5px solid var(--mrd-accent);
     color: var(--mrd-accent);
     font-family: var(--mrd-font-ui);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .03em;
     padding: 3px 12px;
     border-radius: 30px;
     cursor: pointer;
     transition: all .15s;
     white-space: nowrap;
 }

 .mrd-follow-pill:hover,
 .mrd-follow-pill.mrd-following {
     background: var(--mrd-accent);
     color: #fff;
 }

 .mrd-byline-meta {
     display: flex;
     align-items: center;
     gap: 5px;
     font-family: var(--mrd-font-ui);
     font-size: 12px;
     color: var(--mrd-muted);
 }

 .mrd-dot {
     color: var(--mrd-subtle);
     font-size: 10px;
 }

 /* ════════════════════════════════════════════════════
                                                                                           ACTION BAR
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-action-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 11px 0;
     border-top: 1px solid var(--mrd-border);
     border-bottom: 1px solid var(--mrd-border);
     margin: 14px 0 36px;
 }

 .mrd-bar-bottom {
     margin-top: 36px;
     margin-bottom: 0;
 }

 .mrd-action-left,
 .mrd-action-right {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .mrd-clap-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     background: transparent;
     border: none;
     color: var(--mrd-muted);
     font-family: var(--mrd-font-ui);
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     padding: 5px 9px;
     border-radius: 30px;
     transition: all .15s;
 }

 .mrd-clap-btn:hover {
     background: var(--mrd-surface);
     color: var(--mrd-text);
 }

 .mrd-clap-btn.mrd-clapped {
     color: var(--mrd-accent);
 }

 .mrd-comment-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     background: transparent;
     border: none;
     color: var(--mrd-muted);
     font-family: var(--mrd-font-ui);
     font-size: 13px;
     cursor: pointer;
     padding: 5px 9px;
     border-radius: 30px;
     transition: all .15s;
 }

 .mrd-comment-btn:hover {
     background: var(--mrd-surface);
     color: var(--mrd-text);
 }

 .mrd-icon-btn {
     background: transparent;
     border: none;
     color: var(--mrd-muted);
     cursor: pointer;
     padding: 6px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     transition: all .15s;
 }

 .mrd-icon-btn:hover {
     background: var(--mrd-surface);
     color: var(--mrd-text);
 }

 .mrd-icon-btn.mrd-active {
     color: var(--mrd-accent);
 }

 /* ════════════════════════════════════════════════════
                                                                                           FEATURED IMAGE
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-featured-img {
     margin: 0 0 36px;
     border-radius: 10px;
     overflow: hidden;
     border: 1px solid var(--mrd-border);
     box-shadow: var(--mrd-shadow-md);
 }

 .mrd-featured-img img {
     width: 100%;
     max-height: 420px;
     object-fit: cover;
     display: block;
 }

 /* ════════════════════════════════════════════════════
                                                                                           INLINE TABLE OF CONTENTS
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-toc-block {
     border: 1px solid var(--mrd-border);
     border-radius: var(--mrd-radius);
     margin-bottom: 36px;
     overflow: hidden;
     background: var(--mrd-surface);
     box-shadow: var(--mrd-shadow-sm);
 }

 .mrd-toc-toggle {
     width: 100%;
     background: transparent;
     border: none;
     padding: 13px 16px;
     font-family: var(--mrd-font-ui);
     font-size: 14px;
     font-weight: 600;
     color: var(--mrd-text);
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     letter-spacing: -.01em;
     transition: background .15s;
 }

 .mrd-toc-toggle:hover {
     background: var(--mrd-surface2);
 }

 .mrd-toc-chevron {
     margin-left: auto;
     transition: transform .22s;
 }

 .mrd-toc-toggle[aria-expanded="true"] .mrd-toc-chevron {
     transform: rotate(180deg);
 }

 .mrd-toc-body {
     display: none;
     border-top: 1px solid var(--mrd-border);
     padding: 6px 16px 14px;
 }

 .mrd-toc-body.open {
     display: block;
 }

 .mrd-toc-list {
     list-style: none;
 }

 .mrd-toc-list a {
     display: block;
     font-family: var(--mrd-font-ui);
     font-size: 15.5px;
     color: var(--mrd-muted);
     text-decoration: none;
     padding: 7px 0 7px 12px;
     border-left: 2px solid transparent;
     line-height: 1.6;
     transition: color .15s, border-color .15s, padding-left .15s;
 }

 .mrd-toc-list a:hover {
     color: var(--mrd-text);
     padding-left: 14px;
 }

 .mrd-toc-list a.mrd-toc-active {
     color: var(--mrd-accent);
     border-left-color: var(--mrd-accent);
     font-weight: 600;
 }

 .mrd-toc-list .mrd-h3 a {
     padding-left: 24px;
     font-size: 14.5px;
 }

 /* ════════════════════════════════════════════════════
    ARTICLE BODY  ←  Claude.ai reading calibration
    Desktop 17px / 300 / lh 1.75 / #3d3a33                                                                                ════════════════════════════════════════════════════ */
 .mrd-body {
     font-family: var(--mrd-font-body) !important;
     font-size: 17.5px !important;
     font-weight: 400 !important;
     font-optical-sizing: auto;
     line-height: 1.75 !important;
     color: var(--mrd-text) !important;
     word-break: break-word;
     overflow-wrap: break-word;
 }

 .mrd-body p {
     margin: 0 0 1.1em;
     color: var(--mrd-text);
     font-size: inherit;
     font-weight: inherit;
     line-height: inherit;
 }

 .mrd-body p:last-child {
     margin-bottom: 0;
 }

 /* Headings */
 .mrd-body h1,
 .mrd-body h2,
 .mrd-body h3,
 .mrd-body h4,
 .mrd-body h5,
 .mrd-body h6 {
     font-family: var(--mrd-font-ui) !important;
     font-weight: 700 !important;
     color: var(--mrd-heading) !important;
     line-height: 1.24;
     letter-spacing: -.02em;
     scroll-margin-top: 88px;
 }

 .mrd-body h1 {
     font-size: 1.7em;
     margin: 1.8em 0 .5em;
 }

 .mrd-body h2 {
     font-size: 1.24em;
     margin: 1.7em 0 .45em;
     padding-bottom: .32em;
     border-bottom: 1px solid var(--mrd-border);
 }

 .mrd-body h3 {
     font-size: 1.1em;
     margin: 1.5em 0 .4em;
 }

 .mrd-body h4 {
     font-size: 1.02em;
     margin: 1.4em 0 .35em;
 }

 .mrd-body h5,
 .mrd-body h6 {
     font-size: .93em;
     margin: 1.3em 0 .3em;
     color: var(--mrd-muted) !important;
 }

 /* Links */
 .mrd-body a {
     color: var(--mrd-link) !important;
     text-decoration: underline;
     text-decoration-color: color-mix(in srgb, var(--mrd-link) 30%, transparent);
     text-underline-offset: 2px;
     transition: text-decoration-color .15s;
 }

 .mrd-body a:hover {
     text-decoration-color: var(--mrd-link);
 }

 /* Blockquote */
 .mrd-body blockquote {
     margin: 1.7em 0;
     padding: .9em 1.2em .9em 1.3em;
     border-left: 3px solid var(--mrd-accent);
     background: var(--mrd-accent-lt);
     border-radius: 0 var(--mrd-radius) var(--mrd-radius) 0;
     font-style: italic;
     color: var(--mrd-muted) !important;
 }

 .mrd-body blockquote p {
     margin-bottom: 0;
     color: inherit !important;
 }

 /* Inline code */
 .mrd-body code {
     font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace !important;
     font-size: .84em;
     background: var(--mrd-code-bg) !important;
     border: 1px solid var(--mrd-border);
     border-radius: 4px;
     padding: 2px 6px;
     color: var(--mrd-code-clr) !important;
     font-weight: 400 !important;
 }

 /* Code blocks */
 .mrd-body pre {
     border-radius: 9px;
     overflow: hidden;
     margin: 1.6em 0;
     border: 1px solid #2c2a26;
     box-shadow: var(--mrd-shadow-sm);
     position: relative;
     background: #1a1918;
 }

 .mrd-body pre code {
     background: #1a1918 !important;
     border: none !important;
     padding: 16px 20px !important;
     font-size: .85em;
     color: #d4d1c8 !important;
     line-height: 1.68;
     display: block;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     white-space: pre;
     word-break: normal;
     word-wrap: normal;
 }

 .code-block-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #111010;
     border-bottom: 1px solid #2c2a26;
     padding: 0 14px;
     height: 36px;
     box-sizing: border-box;
 }


 .code-block-lang {
     font-family: 'SFMono-Regular', monospace;
     font-size: 10.5px;
     font-weight: 600;
     color: #7a7870;
     letter-spacing: .06em;
     line-height: 1;
 }

 .copy-code-btn {
     display: flex;
     align-items: center;
     gap: 4px;
     background: transparent;
     border: 1px solid #6a6860;
     color: #b8b5ae;
     font-family: var(--mrd-font-ui);
     font-size: 11px;
     font-weight: 500;
     padding: 3px 8px;
     border-radius: 5px;
     cursor: pointer;
     transition: all .15s;
     line-height: 1;
     white-space: nowrap;
     box-sizing: border-box;
 }

 .copy-code-btn:hover {
     border-color: #9a9890;
     color: #e0ddd6;
 }

 .copy-code-btn.copied {
     color: #4ade80;
     border-color: #4ade80;
 }

 /* Lists */
 .mrd-body ul,
 .mrd-body ol {
     margin: 0 0 1.1em;
     padding-left: 1.6em;
     color: var(--mrd-text);
 }

 .mrd-body li {
     margin-bottom: .36em;
     line-height: 1.68;
 }

 .mrd-body ul li::marker {
     color: var(--mrd-subtle);
 }

 .mrd-body ol li::marker {
     color: var(--mrd-subtle);
     font-weight: 600;
     font-family: var(--mrd-font-ui);
 }

 .mrd-body ul ul,
 .mrd-body ol ol,
 .mrd-body ul ol,
 .mrd-body ol ul {
     margin-top: .28em;
     margin-bottom: .28em;
 }

 /* Images */
 .mrd-body img {
     max-width: 100%;
     height: auto;
     display: block;
     border-radius: 8px;
     margin: 1.7em auto;
     border: 1px solid var(--mrd-border);
     box-shadow: var(--mrd-shadow-sm);
 }

 .mrd-body figure {
     margin: 1.8em 0;
 }

 .mrd-body figcaption {
     text-align: center;
     font-size: .79em;
     color: var(--mrd-subtle);
     font-style: italic;
     margin-top: .5em;
     font-family: var(--mrd-font-ui);
 }

 /* Tables */
 .mrd-body table {
     width: 100%;
     border-collapse: collapse;
     font-size: .89em;
     margin: 1.6em 0;
     font-family: var(--mrd-font-ui);
     display: block;
     overflow-x: auto;
 }

 .mrd-body th {
     background: var(--mrd-surface);
     font-weight: 700;
     padding: 9px 14px;
     border: 1px solid var(--mrd-border);
     text-align: left;
     white-space: nowrap;
     color: var(--mrd-heading);
 }

 .mrd-body td {
     padding: 8px 14px;
     border: 1px solid var(--mrd-border);
     vertical-align: top;
     color: var(--mrd-text);
 }

 .mrd-body tr:nth-child(even) td {
     background: var(--mrd-surface);
 }

 /* HR */
 .mrd-body hr {
     border: none;
     text-align: center;
     margin: 2.4em 0;
     color: var(--mrd-subtle);
 }

 .mrd-body hr::after {
     content: '· · ·';
     font-size: 1em;
     letter-spacing: .55em;
 }

 /* Callouts */
 .mrd-body .callout,
 .mrd-body .info-box,
 .mrd-body .note {
     background: #eff6ff;
     border-left: 3px solid #3b82f6;
     color: #1e3a5f;
     padding: 12px 16px;
     border-radius: var(--mrd-radius);
     margin: 1.4em 0;
     font-size: .91em;
     font-family: var(--mrd-font-ui);
     line-height: 1.58;
 }

 .mrd-body .tip {
     background: #f0fdf4;
     border-left: 3px solid #22c55e;
     color: #14532d;
     padding: 12px 16px;
     border-radius: var(--mrd-radius);
     margin: 1.4em 0;
     font-size: .91em;
     font-family: var(--mrd-font-ui);
 }

 .mrd-body .warning {
     background: #fffbeb;
     border-left: 3px solid #f59e0b;
     color: #78350f;
     padding: 12px 16px;
     border-radius: var(--mrd-radius);
     margin: 1.4em 0;
     font-size: .91em;
     font-family: var(--mrd-font-ui);
 }

 /* @media (prefers-color-scheme: dark) {  */

 html.dark .mrd-body .callout,
 html.dark .mrd-body .info-box,
 html.dark .mrd-body .note {
     background: #16202e;
     border-left-color: #3b82f6;
     color: #93c5fd;
 }

 html.dark .mrd-body .tip {
     background: #0e2318;
     border-left-color: #22c55e;
     color: #86efac;
 }

 html.dark .mrd-body .warning {
     background: #1c1608;
     border-left-color: #f59e0b;
     color: #fcd34d;
 }

 /* } */

 /* Inline text */
 .mrd-body strong,
 .mrd-body b {
     font-weight: 700;
     color: var(--mrd-heading);
 }

 .mrd-body em,
 .mrd-body i {
     font-style: italic;
 }

 .mrd-body mark {
     background: #fef3c7;
     color: #78350f;
     border-radius: 2px;
     padding: 0 2px;
 }

 .mrd-body s,
 .mrd-body del {
     text-decoration: line-through;
     color: var(--mrd-muted);
 }

 .mrd-body sup,
 .mrd-body sub {
     font-size: .74em;
 }

 .mrd-body .video-embed,
 .mrd-body .embed-responsive {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
     border-radius: 8px;
     margin: 1.8em 0;
 }

 .mrd-body .video-embed iframe,
 .mrd-body .embed-responsive iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
     border-radius: 8px;
 }

 /* ════════════════════════════════════════════════════
                                                                                           TAGS
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
     margin: 36px 0 0;
     padding-top: 24px;
     border-top: 1px solid var(--mrd-border);
 }

 .mrd-tag {
     background: var(--mrd-surface);
     color: var(--mrd-text);
     font-family: var(--mrd-font-ui);
     font-size: 12px;
     font-weight: 500;
     padding: 5px 14px;
     border-radius: 5px;
     text-decoration: none;
     border: 1px solid var(--mrd-border);
     transition: all .15s;
 }

 .mrd-tag:hover {
     background: var(--mrd-text);
     color: var(--mrd-bg);
     border-color: var(--mrd-text);
 }

 /* ════════════════════════════════════════════════════
                                                                                           AUTHOR CARD
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-author-card {
     background: var(--mrd-surface);
     border: 1px solid var(--mrd-border);
     border-radius: 12px;
     padding: 24px;
     margin-top: 48px;
     box-shadow: var(--mrd-shadow-sm);
 }

 .mrd-author-card-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 12px;
 }

 .mrd-author-avatar {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--mrd-border);
 }

 .mrd-follow-btn {
     background: var(--mrd-accent);
     color: #fff;
     font-family: var(--mrd-font-ui);
     font-size: 12px;
     font-weight: 700;
     padding: 7px 20px;
     border-radius: 30px;
     border: none;
     cursor: pointer;
     transition: opacity .15s, transform .1s;
 }

 .mrd-follow-btn:hover {
     opacity: .86;
     transform: translateY(-1px);
 }

 .mrd-follow-btn.mrd-following {
     background: var(--mrd-surface2);
     color: var(--mrd-muted);
     border: 1px solid var(--mrd-border);
 }

 .mrd-author-name-lg {
     font-family: var(--mrd-font-ui);
     font-size: 16px;
     font-weight: 700;
     color: var(--mrd-heading);
     margin-bottom: 3px;
     letter-spacing: -.01em;
 }

 .mrd-author-followers {
     font-family: var(--mrd-font-ui);
     font-size: 12.5px;
     color: var(--mrd-muted);
     margin-bottom: 10px;
 }

 .mrd-author-bio {
     font-family: var(--mrd-font-ui);
     font-size: 13.5px;
     color: var(--mrd-muted);
     line-height: 1.56;
 }

 /* ════════════════════════════════════════════════════
                                                                                           COMMENTS
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-comments {
     margin-top: 60px;
     padding-top: 36px;
     border-top: 1px solid var(--mrd-border);
 }

 .mrd-comments-title {
     font-family: var(--mrd-font-ui);
     font-size: 18px;
     font-weight: 700;
     color: var(--mrd-heading);
     margin-bottom: 26px;
     display: flex;
     align-items: center;
     gap: 9px;
 }

 .mrd-comments-count {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--mrd-surface2);
     color: var(--mrd-muted);
     font-size: 12px;
     font-weight: 600;
     width: 24px;
     height: 24px;
     border-radius: 50%;
 }

 .mrd-new-comment {
     display: flex;
     gap: 12px;
     margin-bottom: 36px;
 }

 .mrd-comm-avatar {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
     border: 1.5px solid var(--mrd-border);
 }

 .mrd-new-comm-wrap {
     flex: 1;
 }

 .mrd-comm-ta {
     width: 100%;
     background: var(--mrd-surface);
     border: 1px solid var(--mrd-border);
     border-radius: var(--mrd-radius);
     padding: 12px 14px;
     font-family: var(--mrd-font-ui);
     font-size: 14px;
     color: var(--mrd-text);
     resize: vertical;
     line-height: 1.55;
     transition: border-color .15s, box-shadow .15s;
     outline: none;
 }

 .mrd-comm-ta:focus {
     border-color: color-mix(in srgb, var(--mrd-accent) 50%, transparent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrd-accent) 10%, transparent);
 }

 .mrd-comm-actions {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
     margin-top: 9px;
 }

 .mrd-btn-ghost {
     background: transparent;
     border: 1px solid var(--mrd-border);
     color: var(--mrd-muted);
     font-family: var(--mrd-font-ui);
     font-size: 12.5px;
     font-weight: 500;
     padding: 6px 16px;
     border-radius: 30px;
     cursor: pointer;
     transition: all .15s;
 }

 .mrd-btn-ghost:hover {
     border-color: var(--mrd-muted);
     color: var(--mrd-text);
 }

 .mrd-btn-primary {
     background: var(--mrd-accent);
     color: #fff;
     font-family: var(--mrd-font-ui);
     font-size: 12.5px;
     font-weight: 700;
     padding: 6px 20px;
     border-radius: 30px;
     border: none;
     cursor: pointer;
     transition: opacity .15s;
 }

 .mrd-btn-primary:hover {
     opacity: .86;
 }

 .mrd-comm-list {
     display: flex;
     flex-direction: column;
     gap: 0;
 }

 .mrd-comm-item {
     display: flex;
     gap: 12px;
     padding: 22px 0;
     border-bottom: 1px solid var(--mrd-border);
 }

 .mrd-comm-item:last-child {
     border-bottom: none;
 }

 .mrd-comm-body {
     flex: 1;
 }

 .mrd-comm-meta {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 7px;
 }

 .mrd-comm-name {
     font-family: var(--mrd-font-ui);
     font-size: 13px;
     font-weight: 600;
     color: var(--mrd-heading);
 }

 .mrd-comm-date {
     font-family: var(--mrd-font-ui);
     font-size: 11.5px;
     color: var(--mrd-subtle);
 }

 .mrd-comm-text {
     font-family: var(--mrd-font-ui);
     font-size: 14px;
     color: var(--mrd-text);
     line-height: 1.62;
     margin-bottom: 10px;
 }

 .mrd-comm-foot {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .mrd-clap-sm {
     display: flex;
     align-items: center;
     gap: 5px;
     background: transparent;
     border: none;
     color: var(--mrd-muted);
     font-family: var(--mrd-font-ui);
     font-size: 12px;
     cursor: pointer;
     padding: 3px 7px;
     border-radius: 20px;
     transition: all .15s;
 }

 .mrd-clap-sm:hover {
     background: var(--mrd-surface);
     color: var(--mrd-text);
 }

 .mrd-clap-sm.mrd-clapped {
     color: var(--mrd-accent);
 }

 .mrd-reply-btn {
     background: transparent;
     border: none;
     color: var(--mrd-muted);
     font-family: var(--mrd-font-ui);
     font-size: 12px;
     font-weight: 500;
     cursor: pointer;
     padding: 3px 7px;
     border-radius: 5px;
     transition: all .15s;
 }

 .mrd-reply-btn:hover {
     color: var(--mrd-text);
     background: var(--mrd-surface);
 }

 .mrd-reply-box {
     margin-top: 12px;
 }

 .mrd-reply-ta {
     width: 100%;
     background: var(--mrd-surface);
     border: 1px solid var(--mrd-border);
     border-radius: var(--mrd-radius);
     padding: 10px 12px;
     font-family: var(--mrd-font-ui);
     font-size: 13.5px;
     color: var(--mrd-text);
     resize: vertical;
     outline: none;
     transition: border-color .15s;
 }

 .mrd-reply-ta:focus {
     border-color: color-mix(in srgb, var(--mrd-accent) 50%, transparent);
 }

 .mrd-load-more {
     display: block;
     width: 100%;
     background: transparent;
     border: 1px solid var(--mrd-border);
     color: var(--mrd-muted);
     font-family: var(--mrd-font-ui);
     font-size: 13px;
     font-weight: 500;
     padding: 12px;
     border-radius: var(--mrd-radius);
     cursor: pointer;
     margin-top: 28px;
     transition: all .15s;
 }

 .mrd-load-more:hover {
     border-color: var(--mrd-muted);
     color: var(--mrd-text);
     background: var(--mrd-surface);
 }

 /* ════════════════════════════════════════════════════
                                                                                           TOAST
                                                                                        ════════════════════════════════════════════════════ */
 .mrd-toast {
     position: fixed;
     bottom: 26px;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     background: var(--mrd-heading);
     color: var(--mrd-page-bg);
     font-family: var(--mrd-font-ui);
     font-size: 12.5px;
     font-weight: 500;
     padding: 8px 22px;
     border-radius: 30px;
     opacity: 0;
     transition: opacity .24s, transform .24s;
     pointer-events: none;
     z-index: 9999;
     box-shadow: var(--mrd-shadow-md);
 }

 .mrd-toast.show {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
 }

 /* ════════════════════════════════════════════════════
                                                                                           RESPONSIVE BREAKPOINTS
                                                                                        ════════════════════════════════════════════════════ */

 /* Large desktop ≥ 1280px */
 @media (min-width: 1280px) {
     .mrd-body {
         font-size: 19.5px !important;
         line-height: 1.78 !important;
     }

     .mrd-article {
         padding-top: 60px;
     }

     .mrd-center {
         padding-bottom: 110px;
     }
 }

 /* Standard desktop 1024–1279px */
 @media (min-width: 1024px) and (max-width: 1279px) {
     .mrd-body {
         font-size: 19px !important;
         line-height: 1.76 !important;
     }
 }

 /* Tablet landscape 769–1023px */
 @media (min-width: 769px) and (max-width: 1023px) {
     .mrd-center {
         max-width: 680px;
         padding: 0 40px 84px;
     }

     .mrd-article {
         padding-top: 44px;
     }

     .mrd-body {
         font-size: 20px !important;
         line-height: 1.82 !important;
     }

     .mrd-body p {
         margin-bottom: 1.2em;
     }
 }

 /* Tablet portrait ≤ 768px */
 @media (max-width: 768px) {
     .mrd-center {
         max-width: 640px;
         padding: 0 40px 76px;
     }

     .mrd-article {
         padding-top: 36px;
     }

     .mrd-body {
         font-size: 19px !important;
         line-height: 1.85 !important;
     }

     .mrd-body p {
         margin-bottom: 1.2em;
     }

     .mrd-title {
         font-size: clamp(22px, 5vw, 30px);
     }

     .mrd-subtitle {
         font-size: clamp(18px, 2.2vw, 21px);
         padding-left: 0;
     }

     .mrd-author-card {
         padding: 18px;
     }
 }

 /* Mobile ≤ 480px — Claude iOS/Android exact */
 @media (max-width: 480px) {
     .mrd-center {
         padding: 0 36px 68px;
     }

     .mrd-article {
         padding-top: 28px;
     }

     .mrd-body {
         font-size: 19px !important;
         font-weight: 400 !important;
         line-height: 1.88 !important;
         font-family: 'Lora', Georgia, serif !important;
     }

     .mrd-body p {
         margin-bottom: 1.3em;
     }

     .mrd-title {
         font-size: clamp(21px, 6vw, 26px);
         line-height: 1.22;
     }

     .mrd-subtitle {
         font-size: 19px;
         line-height: 1.58;
         padding-left: 0;
     }

     .mrd-body h2 {
         font-size: 1.18em;
     }

     .mrd-body h3 {
         font-size: 1.07em;
     }

     .mrd-avatar {
         width: 36px;
         height: 36px;
     }

     .mrd-byline {
         gap: 9px;
     }

     .mrd-action-bar {
         padding: 9px 0;
     }

     .mrd-author-card {
         padding: 16px;
     }

     .mrd-featured-img img {
         max-height: 240px;
     }

     .mrd-body pre code {
         padding: 12px 14px !important;
         font-size: .83em;
     }

     .mrd-toc-toggle {
         padding: 12px 14px;
         font-size: 15.5px;
     }

     .mrd-author-avatar {
         width: 44px;
         height: 44px;
     }

     .code-block-header {
         height: 34px;
         padding: 0 10px;
     }

     .copy-code-btn {
         font-size: 11px;
         padding: 3px 8px;
     }

     .copy-code-btn svg {
         width: 12px;
         height: 12px;
     }
 }

 /* Very small ≤ 360px */
 @media (max-width: 360px) {
     .mrd-center {
         padding: 0 26px 56px;
     }

     .mrd-body {
         font-size: 18px !important;
         line-height: 1.82 !important;
     }

     .mrd-title {
         font-size: 20px;
     }

     .mrd-subtitle {
         font-size: 14px;
     }
 }

 /* Print */
 @media print {

     .mrd-progress-track,
     .mrd-action-bar,
     .mrd-toc-block,
     .mrd-author-card,
     .mrd-comments,
     .mrd-toast {
         display: none !important;
     }

     .mrd-body {
         font-size: 11pt !important;
         line-height: 1.6 !important;
         color: #000 !important;
     }

     .mrd-page {
         background: #fff;
     }
 }

 /* For fix heading visibility  */

 /* @media (prefers-color-scheme: dark) {  */
 html.dark .mrd-title,
 html.dark .mrd-body h1,
 html.dark .mrd-body h2,
 html.dark .mrd-body h3,
 html.dark .mrd-body h4 {
     color: var(--mrd-heading) !important;
 }

 html.dark .mrd-subtitle {
     color: var(--mrd-muted) !important;
 }

 html.dark .mrd-author-name {
     color: var(--mrd-heading) !important;
 }

 /* } */


 /* ════════════════════════════════════════════════════
   BANGLA SCRIPT SUPPORT
   ════════════════════════════════════════════════════ */

 /* @media (min-width: 1024px) { */

 /* lang attribute based */
 .mrd-body *[lang="bn"],
 .mrd-body:lang(bn),
 .mrd-body p:has(> span[lang="bn"]),
 .mrd-body p[lang="bn"] {
     font-family: 'Hind Siliguri', sans-serif !important;
     line-height: 2.1 !important;
     word-spacing: normal !important;
     letter-spacing: normal !important;
 }

 /* Class based */
 .mrd-title.mrd-bangla,
 .mrd-subtitle.mrd-bangla,
 .mrd-body.mrd-bangla,
 .mrd-body.mrd-bangla p,
 .mrd-body.mrd-bangla li,
 .mrd-body.mrd-bangla blockquote,
 .mrd-tag.mrd-bangla {
     font-family: 'Hind Siliguri', sans-serif !important;
     line-height: 2.1 !important;
     text-align: left !important;
     word-spacing: normal !important;
     letter-spacing: normal !important;
 }

 .mrd-body.mrd-bangla p {
     margin-bottom: 1.6em !important;
 }

 /* } */

 /* Force left align for all body paragraphs */
 .mrd-body p {
     text-align: left !important;
 }


 /* Mobile only override */
 @media (max-width: 480px) {

     .mrd-body.mrd-bangla,
     .mrd-body.mrd-bangla p,
     .mrd-body.mrd-bangla li {
         font-size: 19px !important;
         line-height: 2.15 !important;
     }

     .mrd-body.mrd-bangla p {
         margin-bottom: 1.5em !important;
     }
 }


 /* Edit & Delete buttons */
 .mrd-icon-btn--delete {
     color: var(--mrd-muted);
     padding: 6px;
 }

 .mrd-icon-btn--delete:hover {
     color: #dc2626 !important;
     background: #fef2f2 !important;
 }

 /* @media (prefers-color-scheme: dark) { */
 html.dark .mrd-icon-btn--delete:hover {
     color: #f87171 !important;
     background: #2d1010 !important;
 }

 /* } */

 /* Tablet */
 @media (min-width: 481px) and (max-width: 1023px) {
     .code-block-header {
         height: 34px;
         padding: 0 12px;
     }

     .copy-code-btn {
         font-size: 11px;
         padding: 2px 8px;
     }
 }


 .mrd-byline-category {
     font-family: var(--mrd-font-ui);
     font-size: 12px;
     color: var(--mrd-accent);
     text-decoration: none;
     font-weight: 600;
     letter-spacing: .02em;
     transition: opacity .15s;
 }

 .mrd-byline-category:hover {
     opacity: .75;
     color: var(--mrd-accent) !important;
 }

 .mrd-action-right form {
     display: contents;
 }

 /* Fixed comments issues  */
 /* ════════════════════════════════════════════════════
   COMMENTS — Font & Layout Improvements
════════════════════════════════════════════════════ */

 /* Top-level comments */
 .mrd-comm-list>.mrd-comm-item {
     border-top: 1px solid var(--mrd-border);
     border-bottom: none;
     padding: 22px 0;
 }

 .mrd-comm-list>.mrd-comm-item:first-child {
     border-top: none;
 }

 /* Replies container */
 .mrd-replies {
     margin-left: 44px;
     margin-top: 8px;
     padding-left: 14px;
     border-left: 2px solid var(--mrd-border);
 }

 /* All reply items — no border by default */
 .mrd-replies .mrd-comm-item {
     border-top: none;
     border-bottom: none;
     padding: 10px 0;
 }

 /* Reply-to-reply gets border */
 .mrd-replies .mrd-comm-item.is-reply-to-reply {
     border-top: 1px solid var(--mrd-border);
     margin-top: 8px;
     padding-top: 10px;
 }

 /* Smaller avatars for replies */
 .mrd-replies .mrd-comm-avatar {
     width: 28px;
     height: 28px;
 }

 @media (max-width: 480px) {
     .mrd-replies {
         margin-left: 28px;
         padding-left: 10px;
     }
 }