/* From Uiverse.io by catraco - Modified for compatibility */
.copy-btn-container {
    --color: #7b8797;
    --size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: var(--size);
    user-select: none;
    fill: var(--color);
    width: 32px;
    height: 32px;
    opacity: 0.78;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: opacity 0.16s ease;
}

.dark .copy-btn-container {
    --color: #8795a8;
    opacity: 0.78;
}

.copy-btn-container:hover {
    --color: #263241;
    opacity: 1;
    background-color: transparent;
}

.dark .copy-btn-container:hover {
    --color: #e2e8f0;
    background-color: transparent;
}

.copy-btn-container .clipboard {
    position: absolute;
    animation: keyframes-fill .3s ease-out;
    transition: fill 0.15s ease;
}

.copy-btn-container .clipboard-check {
    position: absolute;
    display: none;
    animation: keyframes-fill .3s ease-out;
    fill: #2f9e6d;
    opacity: 0.9;
}

/* ------ On check event ------ */
.copy-btn-container input:checked~.clipboard {
    display: none;
}

.copy-btn-container input:checked~.clipboard-check {
    display: block;
}

/* ------ Hide the default checkbox ------ */
.copy-btn-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* ------ Animation ------ */
@keyframes keyframes-fill {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Loader from Uiverse.io by Fernando-sv */
.loader {
    border: 4px solid rgba(0, 0, 0, .1);
    border-left-color: transparent;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    animation: spin89345 1s linear infinite;
}

.dark .loader {
    border-color: rgba(255, 255, 255, 0.6);
    border-left-color: transparent;
}

@keyframes spin89345 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 鑷畾涔夋粴鍔ㄦ潯鏍峰紡 */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #475569;
}

/* ===== 榛勯噾姣斾緥闃呰闂磋窛绯荤粺 =====
   鍩轰簬绉戝鐨勯粍閲戞瘮渚?(蠁 = 1.618) 璁捐
   - 娈佃惤闂磋窛 (p 鈫?p): 1.618em (澶ч棿璺濓紝鍖哄垎涓嶅悓娈佃惤)
   - 鏍囬鍒版鏂?(h 鈫?p): 0.618em (灏忛棿璺濓紝淇濇寔鏍囬涓庡唴瀹圭殑绱у瘑鍏宠仈)
   - 鏂版钀藉埌鏍囬 (p 鈫?h): 2.618em (鏈€澶ч棿璺濓紝鏄庣‘鍖哄垎涓嶅悓绔犺妭)
*/

/* Post Title Responsive Styles */
.post-title {
    color: #1e293b !important;
    line-height: 1.4 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 2rem !important;
    font-size: 2.3rem !important;
}

@media (min-width: 768px) {
    .post-title {
        margin-bottom: 3.5rem !important;
        font-size: 2.5rem !important;
    }
}

.dark .post-title {
    color: #e2e8f0 !important;
    /* Slate-200 */
}

/* 娈佃惤鏍峰紡锛氭钀戒箣闂翠娇鐢ㄩ粍閲戞瘮渚嬮棿璺?*/
.prose {
    font-size: 1.15rem !important;
}

@media (min-width: 768px) {
    .prose {
        font-size: 1.25rem !important;
    }
}

.prose p {
    color: #1e293b !important;
    /* Slate-700 */
    /* 浠?2rem 鍑忓皯鍒?1.75rem (28px) */
    line-height: 1.8 !important;
    /* 榛樿宸﹀榻愶紝閫氳繃绫诲悕鎺у埗鍏蜂綋瀵归綈鏂瑰紡 */
    text-align: left;
    /* 闃叉瀛よ鏍囩偣锛氬厑璁告爣鐐规孩鍑哄鍣ㄨ竟缂?*/
    hanging-punctuation: allow-end last;
    /* 涓ユ牸鎹㈣瑙勫垯锛氶槻姝㈡爣鐐瑰嚭鐜板湪琛岄 */
    line-break: strict;
    /* 鍏佽闀垮崟璇?URL鎹㈣浣嗕紭鍏堜繚鎸佸畬鏁?*/
    overflow-wrap: break-word;
    /* 寮哄埗涓嶄娇鐢ㄨ繛瀛楃鎹㈣ */
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}

/* 绾腑鏂囨钀斤細涓ょ瀵归綈 */
.prose p.text-justify-cjk {
    text-align: justify !important;
    text-align-last: left !important;
    /* 浼樺寲涓枃鎺掔増 */
    text-justify: inter-ideograph;
    /* 闃叉瀛よ鏍囩偣锛氬厑璁告爣鐐规孩鍑哄鍣ㄨ竟缂?*/
    hanging-punctuation: allow-end last;
    /* 涓ユ牸鎹㈣瑙勫垯 */
    line-break: strict;
}

/* 鑻辨枃/娣锋帓娈佃惤锛氬乏瀵归綈 */
.prose p.text-align-left {
    text-align: left !important;
    /* 缁ф壙闃叉瀛よ鏍囩偣鐨勮鍒?*/
}

.dark .prose p {
    color: #94a3b8 !important;
    /* Slate-400 */
}

/* 绉婚櫎娈佃惤鏈熬澶氫綑闂磋窛 */



/* 鍒楄〃鏍峰紡浼樺寲锛氬垪琛ㄥ唴閮ㄤ繚鎸佺揣鍑戯紝鍒楄〃鍧椾箣闂村啀鐣欏嚭娈佃惤绾ч棿璺?*/
/* 杞崲琛?(Shift+Enter / <br>) 浣跨敤姝ｅ父琛岄棿璺?*/
.prose br {
    display: block !important;
    content: "" !important;
    margin: 0 !important;
    /* 琛岄棿璺濈敱 line-height 鎺у埗锛屼笉娣诲姞棰濆闂磋窛 */
}

.prose .katex {
    font-size: 1em;
}

.prose .katex-display {
    color: #1e293b !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.2rem 0;
    margin: 2rem 0 !important;
    /* 缁熶竴浣跨敤 2rem */
}

.dark .prose .katex-display {
    color: #94a3b8 !important;
}

.prose .katex-display::-webkit-scrollbar {
    height: 6px;
}

.prose .katex-display::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, .35);
    border-radius: 4px;
}

.dark .prose .katex-display::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .25);
}

.prose .katex-display>.katex {
    white-space: nowrap;
}

/* 纭繚绗竴涓爣棰樻病鏈夐《閮ㄩ棿璺?*/
.prose>h1:first-child,
.prose>h2:first-child,
.prose>h3:first-child,
.prose>h4:first-child,
.prose>h5:first-child,
.prose>h6:first-child {
    margin-top: 0 !important;
}

/* 閾炬帴鏍峰紡锛氫笅鍒掔嚎 + 鐏拌壊鍖哄垎 + 鏃犳偓鍋滃彉鑹?*/
.prose a {
    color: #6b7280 !important;
    /* 涓伆鑹?*/
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    transition: opacity 0.2s ease !important;
}

.dark .prose a {
    color: #94a3b8 !important;
    /* Slate-400 */
}

.prose a:hover {
    opacity: 0.8 !important;
    /* 浠呰交寰€忔槑搴﹀彉鍖?*/
}

/* 浼樺寲姝ｆ枃瀵归綈鏂瑰紡 */
.prose {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}



/* ===== 鍥剧墖瀹瑰櫒闂磋窛瑙勫垯 - 鍍忔钀戒竴鏍风殑琛屼负 ===== */
/* 鍥剧墖瀹瑰櫒鐨勯棿璺濋€昏緫锛?   - margin-top: 0锛堜笂鏂归棿璺濈敱鍓嶇疆鍏冪礌鐨?margin-bottom 鎻愪緵锛?   - margin-bottom: 1.618em锛堝儚娈佃惤涓€鏍凤紝缁欎笅鏂瑰厓绱犲熀纭€闂磋窛锛?   - 鍚庣画鍏冪礌锛堟爣棰橈級浼氭牴鎹嚜韬殑 margin-top 瑙勫垯娣诲姞棰濆闂磋窛
*/
.prose .relative.w-full.inline-block {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    /* 缁熶竴 */
    display: inline-block;
    width: 100%;
}

.prose figure.post-image {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    /* 缁熶竴 */
    display: block;
    width: 100%;
}

.prose figure.external-embed {
    margin: 0 0 2rem 0 !important;
    display: block;
    width: 100%;
}

.prose figure.external-embed iframe.external-embed-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.prose figure.external-embed-twitter {
    max-width: 550px;
}

.prose figure.external-embed-link {
    border: 1px solid #d8e0eb;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    background: #f8fafc;
}

.dark .prose figure.external-embed-link,
.dark .prose figure.external-embed iframe.external-embed-frame {
    border-color: #233044;
    background: #121a28;
}

.prose table :is(th, td):has(> figure.external-embed) {
    height: auto !important;
    min-height: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.prose table :is(th, td)>figure.external-embed {
    margin: 0 auto !important;
    max-width: 100%;
}

.prose table :is(th, td)>figure.external-embed-twitter {
    width: min(100%, 550px);
}

.prose table :is(th, td)>figure.external-embed .twitter-tweet {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 鍥剧墖鍚庨潰鐨勬爣棰橈細閲嶇疆 margin-top锛屼繚鎸佷笌娈佃惤鐩稿悓鐨勯棿璺?*/
.prose .relative.w-full.inline-block+h1,
.prose .relative.w-full.inline-block+h2,
.prose .relative.w-full.inline-block+h3,
.prose .relative.w-full.inline-block+h4,
.prose .relative.w-full.inline-block+h5,
.prose .relative.w-full.inline-block+h6 {
    margin-top: 0 !important;
    /* 浣跨敤鍥剧墖鑷繁鐨?margin-bottom (1.618em) 浣滀负鍞竴闂磋窛 */
}

.prose figure.post-image+h1,
.prose figure.post-image+h2,
.prose figure.post-image+h3,
.prose figure.post-image+h4,
.prose figure.post-image+h5,
.prose figure.post-image+h6 {
    margin-top: 0 !important;
}

/* 纭繚鍥剧墖涓嶄細婧㈠嚭 */
.prose img {
    width: 100% !important;
    height: auto;
    border-radius: 0.75rem;
    margin-top: 0 !important;
    /* 闂磋窛宸茬敱瀹瑰櫒澶勭悊锛宨mg 鑷韩涓嶉渶瑕?margin */
}

.prose .image-caption {
    margin-top: 0.35rem !important;
    line-height: 1.6 !important;
}

/* 鍏佽 MD 涓彲鑳芥畫鐣欑殑 HTML 鏍囩淇濈暀閮ㄥ垎鍘熺敓鏍峰紡 */
.prose font {
    font-family: inherit;
}

/* 浼樺寲 Markdown 涓祵鍏ョ殑 HTML center 鍜?table 鑹插潡缁勫悎 */
.prose center {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    /* 浣跨敤缁熶竴鐨勫ぇ闂磋窛 */
}

.prose center table {
    margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
    width: 100% !important;
    /* 寮哄埗閾烘弧鍏ㄥ */
    border: none !important;
    /* 绉婚櫎澶栬竟妗?*/
    background-color: transparent !important;
    /* 闃叉鍙岄噸鑳屾櫙 */
}

.prose center table td {
    border: none !important;
    padding: 0.5rem 1rem !important;
    /* 澧炲姞涓€鐐瑰唴杈硅窛璁╄壊鍧楁洿濂界湅 */
    text-align: center !important;
    /* 淇濇寔鏂囧瓧灞呬腑 */
}

/* Dark Mode adaptation for legacy HTML bgcolor attributes */
.dark .prose td[bgcolor] {
    background-color: #1e293b !important;
    /* Slate-800 */
    color: #b6c2cf !important;
}


/* ===== 浠ｇ爜鍧楁牱寮?===== */
.prose :not(pre)>code {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    padding: 0.14em 0.4em !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.375rem !important;
    font-size: 0.9em !important;
    font-family: inherit !important;
    font-weight: 600 !important;
}

.dark .prose :not(pre)>code {
    background-color: #0f172a !important;
    color: #b6c2cf !important;
    border-color: #233044 !important;
}

/* 浠ｇ爜鍧楀鍣ㄥ唴鐨?pre 鏍峰紡閲嶇疆 */
.prose pre {
    background-color: transparent !important;
    color: #1e293b !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    white-space: pre-wrap !important;
    /* 鏍稿績锛氭敮鎸佽嚜鍔ㄦ崲琛?*/
    word-break: break-all !important;
    /* 閰嶅悎鎹㈣ */
}

.dark .prose pre {
    color: #b6c2cf !important;
}

.prose pre code {
    background-color: transparent !important;
    color: #1e293b !important;
    /* 娣辩伆鑹诧紝纭繚娓呮櫚鍙 */
    padding: 0 !important;
    border: none !important;
    /* 鏍稿績锛氱Щ闄や唬鐮佸潡鍐呭鐨勮竟妗?*/
    font-size: inherit !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    white-space: pre-wrap !important;
    /* 鏍稿績锛氭敮鎸佽嚜鍔ㄦ崲琛?*/
}

/* 娣辫壊妯″紡涓嬩唬鐮佸潡鏂囧瓧棰滆壊 */
.dark .prose pre code {
    color: #cbd5e1 !important;
    /* 鏌斿拰鐨勬祬鐏拌壊 */
}

/* ===== 寮曠敤鍧楁牱寮?(Blockquote) ===== */
.prose blockquote {
    border-left: 3px solid #64748b !important;
    background-color: #f8fafc !important;
    padding: 0.95em 1.15em !important;
    margin: 1.618em 0 !important;
    border-radius: 0 !important;
    color: #475569 !important;
}

.dark .prose blockquote {
    background-color: #121a28 !important;
    border-left-color: #1e293b !important;
    color: #94a3b8 !important;
}

.prose .callout {
    --callout-accent: #64748b;
    --callout-bg: #f8fafc;
    --callout-border: #e2e8f0;
    --callout-title: #0f172a;
    --callout-text: #1e293b;
    margin: 1.618em 0 !important;
    padding: 1em 1.1em !important;
    border-radius: 0.9rem !important;
    border: 1px solid var(--callout-border) !important;
    border-left: 3px solid var(--callout-accent) !important;
    background-color: var(--callout-bg) !important;
    color: var(--callout-text) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

.dark .prose .callout {
    --callout-bg: #121a28;
    --callout-border: #233044;
    --callout-title: #b6c2cf;
    --callout-text: #94a3b8;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.2) !important;
}

.prose .callout-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 700 !important;
    font-size: 0.95em !important;
    letter-spacing: 0.02em !important;
    color: var(--callout-title) !important;
    margin-bottom: 0.6em !important;
}

.prose .callout-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05em !important;
    color: var(--callout-accent) !important;
}

.prose .callout.callout-note {
    --callout-accent: #3b82f6;
}

.dark .prose .callout.callout-note {
    --callout-accent: #60a5fa;
}

.prose .callout.callout-tip {
    --callout-accent: #10b981;
}

.dark .prose .callout.callout-tip {
    --callout-accent: #34d399;
}

.prose .callout.callout-important {
    --callout-accent: #8b5cf6;
}

.dark .prose .callout.callout-important {
    --callout-accent: #a78bfa;
}

.prose .callout.callout-warning {
    --callout-accent: #f59e0b;
}

.dark .prose .callout.callout-warning {
    --callout-accent: #fbbf24;
}

.prose .callout.callout-caution {
    --callout-accent: #ef4444;
}

.dark .prose .callout.callout-caution {
    --callout-accent: #f87171;
}

.prose .footnotes {
    margin-top: 2em !important;
    font-size: 0.95em !important;
    color: #475569 !important;
}

.dark .prose .footnotes {
    color: #94a3b8 !important;
}

.prose .footnotes ol {
    padding-left: 1.4em !important;
}

.prose .footnote-ref a {
    text-decoration: none !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: inherit !important;
}

.prose .footnote-ref {
    scroll-margin-top: 6rem !important;
}

.dark .prose .footnote-ref a {
    border-bottom-color: #475569 !important;
}

.prose .footnote-backref {
    margin-left: 0.4em !important;
    text-decoration: none !important;
    color: inherit !important;
    opacity: 0.75 !important;
}

.prose .footnote-backrefs {
    margin-left: 0.25em !important;
    white-space: nowrap !important;
}

.prose .footnote-backref:hover {
    opacity: 1 !important;
}

.prose .callout-content p {
    margin-bottom: 0.9em !important;
}

.prose .callout-content>*:last-child {
    margin-bottom: 0 !important;
}

.prose blockquote p {
    margin: 0.45em 0 !important;
}

.prose blockquote p:last-child {
    margin-bottom: 0 !important;
}

.prose blockquote p:first-child {
    margin-top: 0 !important;
}

/* 宓屽寮曠敤 */
.prose blockquote blockquote {
    margin: 0.9em 0 0 0.75em !important;
    border-left-color: #94a3b8 !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 0 !important;
}

.dark .prose blockquote blockquote {
    border-left-color: #475569 !important;
    background-color: #0f172a !important;
    color: #94a3b8 !important;
}

.prose blockquote blockquote blockquote {
    margin-left: 0.7em !important;
    border-left-color: #cbd5e1 !important;
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    border-radius: 0 !important;
}

.dark .prose blockquote blockquote blockquote {
    border-left-color: #64748b !important;
    background-color: #0b1220 !important;
    color: #94a3b8 !important;
}

/* ===== 鍒楄〃鏍峰紡 ===== */
/* 鏃犲簭鍒楄〃 */
.prose ul {
    list-style-type: disc !important;
    padding-left: 1.5em !important;
    margin: 1em 0 1.618em 0 !important;
}

.prose ul ul {
    list-style-type: circle !important;
    margin: 0.5em 0 !important;
}

.prose ul ul ul {
    list-style-type: square !important;
}

/* 鏈夊簭鍒楄〃 */
.prose ol {
    list-style-type: decimal !important;
    padding-left: 1.5em !important;
    margin: 1em 0 1.618em 0 !important;
}

.prose ol ol {
    list-style-type: lower-alpha !important;
    margin: 0.5em 0 !important;
}

/* 鍒楄〃椤?*/
.prose li {
    margin-bottom: 0.5em !important;
    line-height: 1.7 !important;
    color: #1e293b !important;
    /* Slate-700 */
}

.prose>ul>li,
.prose>ol>li {
    margin-bottom: 0.85em !important;
}

.prose>ul>li:last-child,
.prose>ol>li:last-child {
    margin-bottom: 0 !important;
}

.dark .prose li {
    color: #cbd5e1 !important;
    /* Slate-300 */
}

.prose li::marker {
    color: #9ca3af !important;
    /* 涓伆鑹?*/
}

.dark .prose li::marker {
    color: #6b7280 !important;
    /* 娣辫壊妯″紡涓伆鑹?*/
}

.prose li>p {
    margin: 0 0 0.35em 0 !important;
}

.prose li>p:last-child {
    margin-bottom: 0 !important;
}

.prose li>p+ul,
.prose li>p+ol {
    margin-top: 0.35em !important;
}

.prose ul ul,
.prose ol ol {
    margin: 0.35em 0 !important;
}

/* 浠诲姟鍒楄〃 (Checkbox) */
.prose input[type="checkbox"] {
    margin-right: 0.5em !important;
    accent-color: #6b7280 !important;
    /* 涓伆鑹?*/
}

/* ===== 琛ㄦ牸鏍峰紡 ===== */
.prose table {
    width: 100% !important;
    display: table !important;
    border-collapse: collapse !important;
    margin: 1.618em 0 !important;
    font-size: 0.9em !important;
    overflow-x: auto !important;
}

.prose thead {
    background-color: transparent !important;
}

.dark .prose thead {
    background-color: transparent !important;
}

.prose th,
.prose td {
    padding: 0.75em 1em !important;
    border: 1px solid #e2e8f0 !important;
    text-align: left;
    color: #1e293b !important;
}

.dark .prose th,
.dark .prose td {
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

.prose th {
    font-weight: 600 !important;
    color: #1e293b !important;
}

.dark .prose th {
    color: #b6c2cf !important;
}

.prose th[align="left"],
.prose td[align="left"] {
    text-align: left !important;
}

.prose th[align="center"],
.prose td[align="center"] {
    text-align: center !important;
}

.prose th[align="right"],
.prose td[align="right"] {
    text-align: right !important;
}

.prose tbody tr:nth-child(even) {
    background-color: transparent !important;
}

.dark .prose tbody tr:nth-child(even) {
    background-color: transparent !important;
}

/* ===== 姘村钩鍒嗗壊绾?===== */
.prose hr {
    border: none !important;
    border-top: 2px solid #e2e8f0 !important;
    margin: 2.618em 0 !important;
}

.dark .prose hr {
    border-top-color: #475569 !important;
}

/* ===== 鍒犻櫎绾?===== */
.prose del,
.prose s {
    text-decoration: line-through !important;
    color: #94a3b8 !important;
}

/* ===== 鍔犵矖鍜屾枩浣?===== */
.prose strong {
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* Dark Mode for Strong/Bold */
.dark .prose strong,
.dark .prose b {
    color: #b6c2cf !important;
}



.prose em {
    font-style: italic !important;
}

/* ===== 鏍囪/楂樹寒 ===== */
.prose mark {
    background-color: #fef08a;
    color: #854d0e;
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
}

.dark .prose mark {
    background-color: rgba(245, 158, 11, 0.18);
    color: #b6c2cf;
}

/* Dark Mode Adaptation for Legacy HTML Blocks (tables & fonts) */
/* Force transparent background for the outer table wrapper if any */
.dark .prose table {
    background-color: transparent !important;
}

/* Override bgcolor cell colors to Slate-800 */
.dark .prose td[bgcolor] {
    background-color: #1e293b !important;
    /* Slate-800 */
    color: #b6c2cf !important;
    border-radius: 6px;
    /* Smooth corners */
    border: 1px solid #1e293b;
    /* Slate-700 border for definition */
}

/* Override font color attributes to Slate-200 */
.dark .prose font[color],
.dark .prose font[size],
.dark .prose font[face] {
    color: inherit !important;
}

/* Light Mode Details/Summary Styling */
.prose details {
    border: 1px solid #cbd5e1;
    /* Slate-300 */
    background-color: #f8fafc;
    /* Slate-50 */
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 1em 0;
}

.prose summary {
    cursor: pointer;
    font-weight: 700;
    color: #1e293b !important;
    /* Slate-800 */
}

/* Comprehensive Dark Mode Text Color Automation */
/* 1. Override Tailwind Prose CSS Variables for Dark Mode */
.dark .prose {
    --tw-prose-body: #94a3b8;
    /* Slate-400 */
    --tw-prose-headings: #94a3b8;
    /* Slate-400 */
    --tw-prose-lead: #94a3b8;
    --tw-prose-links: #38bdf8;
    /* Sky-400 */
    --tw-prose-bold: #94a3b8;
    /* Slate-400 */
    --tw-prose-counters: #94a3b8;
    --tw-prose-bullets: #94a3b8;
    /* Slate-400 */
    --tw-prose-hr: #475569;
    --tw-prose-quotes: #b6c2cf;
    --tw-prose-quote-borders: #475569;
    --tw-prose-captions: #94a3b8;
    --tw-prose-code: #b6c2cf;
    --tw-prose-pre-code: #b6c2cf;
    --tw-prose-pre-bg: transparent;

    /* Force base color to Slate-400 */
    color: #94a3b8 !important;
}

/* 2. Target specific HTML elements to ensure they use the variable/color */
.dark .prose li,
.dark .prose ul,
.dark .prose ol,
.dark .prose details,
.dark .prose summary,
.dark .prose div,
.dark .prose span:not([class*="hljs-"]) {
    /* Exclude syntax highlighting */
    color: inherit !important;
}

/* 3. Specific fix for Details/Summary */
.dark .prose details {
    border-color: #475569;
    background-color: #1e293b;
    /* Slate-800 */
}

.dark .prose summary {
    color: #94a3b8 !important;
    /* Slate-400 */
}

.prose mark {
    background-color: #fef08a !important;
    color: #1e293b !important;
    padding: 0.1em 0.3em !important;
    border-radius: 0.25rem !important;
}

.dark .prose mark {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #b6c2cf !important;
}

/* ===== 鑴氭敞鏍峰紡 ===== */
.prose sup {
    font-size: 0.75em !important;
    vertical-align: super !important;
}

.prose sub {
    font-size: 0.75em !important;
    vertical-align: sub !important;
}

/* ===== 瀹氫箟鍒楄〃 ===== */
.prose dl {
    margin: 1.618em 0 !important;
}

.prose dt {
    font-weight: 600 !important;
    margin-bottom: 0.25em !important;
}

.prose dd {
    margin-left: 1.5em !important;
    margin-bottom: 1em !important;
    color: #64748b !important;
}

.dark .prose dd {
    color: #94a3b8 !important;
}

/* ===== Article Reading Hierarchy Override ===== */
.prose {
    --article-body-size: 1.15rem;
    --article-line-height: 1.86;
    --article-rhythm: calc(var(--article-body-size) * var(--article-line-height));
    --article-heading-h1: calc(var(--article-body-size) * 2.36);
    --article-heading-h2: calc(var(--article-body-size) * 1.92);
    --article-heading-h3: calc(var(--article-body-size) * 1.62);
    --article-heading-h4: calc(var(--article-body-size) * 1.42);
    --article-heading-h5: calc(var(--article-body-size) * 1.3);
    --article-heading-h6: calc(var(--article-body-size) * 1.2);
    font-size: var(--article-body-size) !important;
    line-height: var(--article-line-height) !important;
    color: #1e293b !important;
    letter-spacing: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

@media (min-width: 768px) {
    .prose {
        --article-body-size: 1.25rem;
        --article-line-height: 1.9;
    }
}

.dark .prose {
    color: #aebacc !important;
}

.prose p {
    margin: 0 0 calc(var(--article-rhythm) * 0.8) !important;
    line-height: var(--article-line-height) !important;
    color: #1e293b !important;
    text-align: left;
    hanging-punctuation: allow-end last;
    line-break: strict;
    overflow-wrap: break-word;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}

.prose p:has(+ ul),
.prose p:has(+ ol) {
    margin-bottom: calc(var(--article-rhythm) * 0.26) !important;
}

.prose p:has(+ p) {
    margin-bottom: calc(var(--article-rhythm) * 0.5) !important;
}

.dark .prose p {
    color: #aebacc !important;
}

.prose p.text-justify-cjk {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-ideograph;
}

.prose p.text-align-left {
    text-align: left !important;
}

.prose .article-heading {
    color: #1e293b !important;
    letter-spacing: 0 !important;
    scroll-margin-top: 6rem;
    position: relative;
    padding-top: 0;
    border-top: 0 !important;
}

.dark .prose .article-heading {
    color: #e2e8f0 !important;
}

.prose .article-heading-depth-1 {
    font-size: var(--article-heading-h1) !important;
    line-height: 1.16 !important;
    font-weight: 600 !important;
}

.prose .article-heading-depth-2 {
    font-size: var(--article-heading-h2) !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
}

.prose .article-heading-depth-3 {
    font-size: var(--article-heading-h3) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.prose .article-heading-depth-4 {
    font-size: var(--article-heading-h4) !important;
    line-height: 1.34 !important;
    font-weight: 600 !important;
}

.prose .article-heading-depth-5 {
    font-size: var(--article-heading-h5) !important;
    line-height: 1.38 !important;
    font-weight: 600 !important;
}

.prose .article-heading-depth-6 {
    font-size: var(--article-heading-h6) !important;
    line-height: 1.42 !important;
    font-weight: 600 !important;
}

.prose>.article-heading:first-child {
    padding-top: 0;
    border-top: 0;
}

.prose ul,
.prose ol {
    padding-left: 1.35em !important;
}

.prose p+ul,
.prose p+ol {
    margin-top: 0 !important;
}

.prose ul {
    list-style-type: disc !important;
}

.prose ol {
    list-style-type: decimal !important;
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
    padding-left: 1.15em !important;
}

.prose ul ul {
    list-style-type: circle !important;
}

.prose ul ul ul {
    list-style-type: square !important;
}

.prose li {
    line-height: 1.72 !important;
    color: #1e293b !important;
}

.prose>ul>li,
.prose>ol>li {
}

.prose li>p {
    margin: 0 0 calc(var(--article-rhythm) * 0.22) !important;
    line-height: 1.72 !important;
}

.prose li::marker {
    color: #94a3b8 !important;
}

.dark .prose li {
    color: #c5d0df !important;
}

.dark .prose li::marker {
    color: #64748b !important;
}

.prose li>strong:first-child {
    color: #1e293b !important;
    font-weight: 800 !important;
}

.dark .prose li>strong:first-child {
    color: #e2e8f0 !important;
}

.prose blockquote {
    margin: calc(var(--article-rhythm) * 0.9) 0 !important;
    padding: calc(var(--article-rhythm) * 0.35) 0 calc(var(--article-rhythm) * 0.35) 1.1em !important;
    border-left: 3px solid #cbd5e1 !important;
    color: #475569 !important;
    background: transparent !important;
}

.dark .prose blockquote {
    border-left-color: #475569 !important;
    color: #cbd5e1 !important;
    background: transparent !important;
}

.prose blockquote p {
    margin-bottom: calc(var(--article-rhythm) * 0.38) !important;
}

.prose strong,
.prose b {
    color: #1e293b !important;
    font-weight: 760 !important;
}

.dark .prose strong,
.dark .prose b {
    color: #e2e8f0 !important;
}

.prose hr {
    margin: calc(var(--article-rhythm) * 1.8) 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

.dark .prose hr {
    border-top-color: #1e293b !important;
}

.prose table,
.prose .code-block-container,
.prose figure.post-image,
.prose details,
.prose .callout,
.prose .katex-display {
    margin-top: calc(var(--article-rhythm) * 0.7) !important;
    margin-bottom: calc(var(--article-rhythm) * 1.05) !important;
}

.prose table {
    font-size: 0.88em !important;
    line-height: 1.6 !important;
}

.prose :not(pre)>code {
    font-size: 0.86em !important;
}

/* Normal Markdown article rhythm: final readable cascade, not exaggerated display spacing. */
.prose {
    --article-space-tight: 0.42rem;
    --article-space-flow: 1.2rem;
    --article-space-heading-to-content: 1.25rem;
    --article-space-heading-parent-child: 1.99rem;
    --article-space-heading-peer-1: 5.59rem;
    --article-space-heading-peer-2: 4.11rem;
    --article-space-heading-peer-3: 3.45rem;
    --article-space-heading-peer-4: 2.8rem;
    --article-space-heading-peer-5: 2.5rem;
    --article-space-heading-peer-6: 2.28rem;
    --article-space-divider-before: 2.1rem;
    --article-space-divider-after: 2.1rem;
}

.prose .markdown-gap {
    --md-gap-lines: 0;
    --md-gap-size: 0lh;
    display: block !important;
    width: 100% !important;
    height: var(--md-gap-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.prose p,
.prose ul,
.prose ol,
.prose dl,
.prose blockquote,
.prose table,
.prose .article-heading,
.prose .article-heading-depth-1,
.prose .article-heading-depth-2,
.prose .article-heading-depth-3,
.prose .article-heading-depth-4,
.prose .code-block-container,
.prose figure.post-image,
.prose details,
.prose .callout,
.prose .katex-display,
.prose center,
.prose .mermaid,
.prose pre,
.prose .footnotes,
.prose iframe,
.prose video,
.prose picture,
.prose .embed,
.prose .video-embed,
.prose .audio-player {
    margin: 0 !important;
}

.prose figure.post-image {
    display: block;
    width: 100%;
}

.prose ul,
.prose ol {
    padding-left: 1.35em !important;
}

.prose li {
    margin: 0 0 var(--article-space-tight) !important;
    line-height: 1.62 !important;
}

.prose li:last-child {
    margin-bottom: 0 !important;
}

.prose li > p {
    margin: 0 !important;
}

.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player) {
    margin-block-start: var(--article-space-flow) !important;
}

.prose .article-heading-depth-1+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .article-heading-depth-1+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .article-heading-depth-2+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .article-heading-depth-2+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .article-heading-depth-3+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .article-heading-depth-3+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .article-heading-depth-4+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose .article-heading-depth-4+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player) {
    margin-block-start: var(--article-space-heading-to-content) !important;
}

.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-1,
.prose .markdown-gap+.article-heading-depth-1,
.prose .article-heading-depth-1+.article-heading-depth-1,
.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-1,
.prose hr+.article-heading-depth-1,
.prose hr+.markdown-gap+.article-heading-depth-1 {
    margin-block-start: var(--article-space-heading-peer-1) !important;
}

.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-2,
.prose .markdown-gap+.article-heading-depth-2,
.prose .article-heading-depth-2+.article-heading-depth-2,
.prose .article-heading-depth-2+.markdown-gap+.article-heading-depth-2,
.prose hr+.article-heading-depth-2,
.prose hr+.markdown-gap+.article-heading-depth-2 {
    margin-block-start: var(--article-space-heading-peer-2) !important;
}

.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-3,
.prose .markdown-gap+.article-heading-depth-3,
.prose .article-heading-depth-3+.article-heading-depth-3,
.prose .article-heading-depth-3+.markdown-gap+.article-heading-depth-3,
.prose hr+.article-heading-depth-3,
.prose hr+.markdown-gap+.article-heading-depth-3 {
    margin-block-start: var(--article-space-heading-peer-3) !important;
}

.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-4,
.prose .markdown-gap+.article-heading-depth-4,
.prose .article-heading-depth-4+.article-heading-depth-4,
.prose .article-heading-depth-4+.markdown-gap+.article-heading-depth-4,
.prose hr+.article-heading-depth-4,
.prose hr+.markdown-gap+.article-heading-depth-4 {
    margin-block-start: var(--article-space-heading-peer-4) !important;
}

.prose .article-heading+.article-heading,
.prose .article-heading+.markdown-gap+.article-heading,
.prose .article-heading-depth-1+.article-heading-depth-2,
.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-2,
.prose .article-heading-depth-1+.article-heading-depth-3,
.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-3,
.prose .article-heading-depth-1+.article-heading-depth-4,
.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-4,
.prose .article-heading-depth-2+.article-heading-depth-3,
.prose .article-heading-depth-2+.markdown-gap+.article-heading-depth-3,
.prose .article-heading-depth-2+.article-heading-depth-4,
.prose .article-heading-depth-2+.markdown-gap+.article-heading-depth-4,
.prose .article-heading-depth-3+.article-heading-depth-4,
.prose .article-heading-depth-3+.markdown-gap+.article-heading-depth-4 {
    margin-block-start: var(--article-space-heading-parent-child) !important;
}

.prose hr {
    height: 1px !important;
    border: 0 !important;
    background: #d8e0eb !important;
}

.dark .prose hr {
    background: #475569 !important;
}

.prose :where(p, ul, ol, dl, blockquote, .article-heading, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+hr,
.prose .markdown-gap+hr {
    margin-block-start: var(--article-space-divider-before) !important;
}

.prose hr+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose hr+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player) {
    margin-block-start: var(--article-space-divider-after) !important;
}

/* Final cascade guard: outrank older paragraph/list/table/heading rules without special cases. */
.prose.prose p,
.prose.prose ul,
.prose.prose ol,
.prose.prose dl,
.prose.prose blockquote,
.prose.prose hr,
.prose.prose table,
.prose.prose .article-heading,
.prose.prose .article-heading-depth-1,
.prose.prose .article-heading-depth-2,
.prose.prose .article-heading-depth-3,
.prose.prose .article-heading-depth-4,
.prose.prose .code-block-container,
.prose.prose figure.post-image,
.prose.prose details,
.prose.prose .callout,
.prose.prose .katex-display,
.prose.prose center,
.prose.prose .mermaid,
.prose.prose pre,
.prose.prose .footnotes,
.prose.prose iframe,
.prose.prose video,
.prose.prose picture,
.prose.prose .embed,
.prose.prose .video-embed,
.prose.prose .audio-player {
    margin: 0 !important;
}

.prose.prose :is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .markdown-gap+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player) {
    margin-block-start: var(--article-space-flow) !important;
}

.prose.prose .article-heading-depth-1+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-1+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-2+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-2+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-3+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-3+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-4+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-4+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player) {
    margin-block-start: var(--article-space-heading-to-content) !important;
}

.prose.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-1,
.prose.prose .markdown-gap+.article-heading-depth-1,
.prose.prose .article-heading-depth-1+.article-heading-depth-1,
.prose.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-1,
.prose.prose hr+.article-heading-depth-1,
.prose.prose hr+.markdown-gap+.article-heading-depth-1 {
    margin-block-start: var(--article-space-heading-peer-1) !important;
}

.prose.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-2,
.prose.prose .markdown-gap+.article-heading-depth-2,
.prose.prose .article-heading-depth-2+.article-heading-depth-2,
.prose.prose .article-heading-depth-2+.markdown-gap+.article-heading-depth-2,
.prose.prose hr+.article-heading-depth-2,
.prose.prose hr+.markdown-gap+.article-heading-depth-2 {
    margin-block-start: var(--article-space-heading-peer-2) !important;
}

.prose.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-3,
.prose.prose .markdown-gap+.article-heading-depth-3,
.prose.prose .article-heading-depth-3+.article-heading-depth-3,
.prose.prose .article-heading-depth-3+.markdown-gap+.article-heading-depth-3,
.prose.prose hr+.article-heading-depth-3,
.prose.prose hr+.markdown-gap+.article-heading-depth-3 {
    margin-block-start: var(--article-space-heading-peer-3) !important;
}

.prose.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-4,
.prose.prose .markdown-gap+.article-heading-depth-4,
.prose.prose .article-heading-depth-4+.article-heading-depth-4,
.prose.prose .article-heading-depth-4+.markdown-gap+.article-heading-depth-4,
.prose.prose hr+.article-heading-depth-4,
.prose.prose hr+.markdown-gap+.article-heading-depth-4 {
    margin-block-start: var(--article-space-heading-peer-4) !important;
}

.prose.prose .article-heading+.article-heading,
.prose.prose .article-heading+.markdown-gap+.article-heading,
.prose.prose .article-heading-depth-1+.article-heading-depth-2,
.prose.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-2,
.prose.prose .article-heading-depth-1+.article-heading-depth-3,
.prose.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-3,
.prose.prose .article-heading-depth-1+.article-heading-depth-4,
.prose.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-4,
.prose.prose .article-heading-depth-2+.article-heading-depth-3,
.prose.prose .article-heading-depth-2+.markdown-gap+.article-heading-depth-3,
.prose.prose .article-heading-depth-2+.article-heading-depth-4,
.prose.prose .article-heading-depth-2+.markdown-gap+.article-heading-depth-4,
.prose.prose .article-heading-depth-3+.article-heading-depth-4,
.prose.prose .article-heading-depth-3+.markdown-gap+.article-heading-depth-4 {
    margin-block-start: var(--article-space-heading-parent-child) !important;
}

.prose.prose :where(p, ul, ol, dl, blockquote, .article-heading, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+hr,
.prose.prose .markdown-gap+hr {
    margin-block-start: var(--article-space-divider-before) !important;
}

.prose.prose hr+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose hr+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player) {
    margin-block-start: var(--article-space-divider-after) !important;
}

.prose.prose .article-heading-depth-5+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-5+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-6+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player),
.prose.prose .article-heading-depth-6+.markdown-gap+:where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player) {
    margin-block-start: var(--article-space-heading-to-content) !important;
}

.prose.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-5,
.prose.prose .markdown-gap+.article-heading-depth-5,
.prose.prose .article-heading-depth-5+.article-heading-depth-5,
.prose.prose .article-heading-depth-5+.markdown-gap+.article-heading-depth-5,
.prose.prose hr+.article-heading-depth-5,
.prose.prose hr+.markdown-gap+.article-heading-depth-5 {
    margin-block-start: var(--article-space-heading-peer-5) !important;
}

.prose.prose :where(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .embed, .video-embed, .audio-player)+.article-heading-depth-6,
.prose.prose .markdown-gap+.article-heading-depth-6,
.prose.prose .article-heading-depth-6+.article-heading-depth-6,
.prose.prose .article-heading-depth-6+.markdown-gap+.article-heading-depth-6,
.prose.prose hr+.article-heading-depth-6,
.prose.prose hr+.markdown-gap+.article-heading-depth-6 {
    margin-block-start: var(--article-space-heading-peer-6) !important;
}

/* ===== Refined code block surface ===== */
.prose .code-block-container {
    --code-surface: #f7f9fc;
    --code-surface-soft: #eef3f8;
    --code-border: #dbe4ee;
    --code-rule: #e4ebf3;
    --code-text: #172033;
    --code-muted: #7b8797;
    --code-shadow: none;
    position: relative;
    overflow: hidden !important;
    border: 1px solid var(--code-border) !important;
    border-radius: 8px !important;
    background: var(--code-surface) !important;
    box-shadow: var(--code-shadow) !important;
    overflow-anchor: none;
}

.dark .prose .code-block-container {
    --code-surface: #0f1724;
    --code-surface-soft: #141e2e;
    --code-border: #263348;
    --code-rule: #203047;
    --code-text: #d6deea;
    --code-muted: #8997aa;
    --code-shadow: none;
}

.prose .code-block-container > .flex:first-child {
    min-height: 46px;
    padding: 0 14px 0 20px !important;
    background: var(--code-surface-soft) !important;
    border-bottom: 1px solid var(--code-rule) !important;
}

.prose .code-block-container > .flex:first-child > span:first-child {
    color: var(--code-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

.prose .code-wrapper {
    background: var(--code-surface) !important;
}

.prose .code-content {
    position: relative;
    padding: 1.55rem 1.75rem !important;
    background: var(--code-surface) !important;
    scrollbar-color: #c5cfdb transparent;
    scrollbar-width: thin;
    transition: max-height 300ms cubic-bezier(0.2, 0, 0, 1) !important;
    box-sizing: border-box;
    overflow-anchor: none;
}

.prose .collapsed-code .code-content::after {
    content: "";
    position: absolute;
    right: 1.75rem;
    bottom: 0;
    left: 1.75rem;
    display: block;
    height: 5.25rem;
    background: linear-gradient(to bottom, rgba(247, 249, 252, 0), var(--code-surface) 86%);
    pointer-events: none;
}

.dark .prose .collapsed-code .code-content::after {
    background: linear-gradient(to bottom, rgba(15, 23, 36, 0), var(--code-surface) 86%);
}

.prose .expanded-code .code-content {
    padding-bottom: 5.75rem !important;
    overflow: visible !important;
    scrollbar-width: none;
}

.prose .code-expanding .code-content {
    overflow: hidden !important;
}

.dark .prose .code-content {
    scrollbar-color: #3a4a61 transparent;
}

.prose .expanded-code .code-content::-webkit-scrollbar {
    display: none;
}

.prose .expanded-code .code-content pre {
    overflow: visible !important;
}

.prose .code-content::-webkit-scrollbar {
    height: 8px;
}

.prose .code-content::-webkit-scrollbar-thumb {
    border: 2px solid var(--code-surface);
    border-radius: 999px;
    background: #c5cfdb;
}

.dark .prose .code-content::-webkit-scrollbar-thumb {
    background: #3a4a61;
}

.prose .code-content pre {
    color: var(--code-text) !important;
    font-family: inherit !important;
}

.prose .code-content pre code {
    color: var(--code-text) !important;
    font-family: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.76 !important;
    font-weight: 500 !important;
    tab-size: 4;
}

.dark .prose .code-content pre code {
    color: var(--code-text) !important;
}

.prose .code-fold-controls {
    gap: 0;
    background:
        linear-gradient(to top, var(--code-surface) 16%, rgba(247, 249, 252, 0.92) 58%, rgba(247, 249, 252, 0)) !important;
}

.dark .prose .code-fold-controls {
    background:
        linear-gradient(to top, var(--code-surface) 16%, rgba(15, 23, 36, 0.92) 58%, rgba(15, 23, 36, 0)) !important;
}

.prose .code-fold-controls:not(.absolute) {
    position: fixed;
    top: var(--code-controls-top, 12px);
    bottom: auto;
    left: var(--code-controls-left, 50%) !important;
    width: max-content !important;
    max-width: calc(100% - 2rem);
    margin: 0 !important;
    padding: 2px !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 999px;
    background: #ffffff !important;
    backdrop-filter: none;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        opacity 0.14s ease,
        background-color 0.14s ease,
        border-color 0.14s ease;
    transform: translate3d(-50%, 0, 0);
    will-change: transform;
    z-index: 60 !important;
    pointer-events: auto;
}

.prose .code-fold-controls.code-controls-viewport-bottom:not(.absolute) {
    top: auto;
    bottom: 16px;
}

.prose .code-fold-controls.code-controls-outside:not(.absolute) {
    opacity: 0;
    pointer-events: none;
    transition: none !important;
}

.prose .code-fold-controls.code-controls-pinned-bottom:not(.absolute) {
    position: absolute;
    top: auto;
    bottom: 16px;
    left: 50% !important;
}

.prose .collapsed-code .code-fold-controls {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0.85rem auto 1rem !important;
    padding: 2px !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 999px;
    background: #ffffff !important;
    backdrop-filter: none;
    transform: none !important;
    transition:
        background-color 0.14s ease,
        border-color 0.14s ease;
    z-index: 1 !important;
}

.prose .code-fold-controls.code-controls-opening {
    transition:
        opacity 0.14s ease,
        top 300ms cubic-bezier(0.2, 0, 0, 1),
        left 300ms cubic-bezier(0.2, 0, 0, 1),
        transform 300ms cubic-bezier(0.2, 0, 0, 1),
        background-color 0.14s ease,
        border-color 0.14s ease;
}

.prose .code-fold-controls:not(.code-controls-opening) {
    transition:
        opacity 0.14s ease,
        background-color 0.14s ease,
        border-color 0.14s ease;
}

.dark .prose .collapsed-code .code-fold-controls {
    border-color: #2d3d52 !important;
    background: #101928 !important;
}

.dark .prose .code-fold-controls:not(.absolute) {
    border-color: #2d3d52 !important;
    background: #101928 !important;
}

.prose .code-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 42px;
    margin: 0 1px;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 999px;
    color: #647083;
    background: transparent;
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    transition:
        color 0.14s ease,
        max-width 0.18s cubic-bezier(0.2, 0, 0, 1),
        min-width 0.18s cubic-bezier(0.2, 0, 0, 1),
        padding 0.18s cubic-bezier(0.2, 0, 0, 1),
        margin 0.18s cubic-bezier(0.2, 0, 0, 1),
        opacity 0.12s ease;
}

.prose .code-nav-top {
    border-right: 0;
}

.prose .code-nav-bottom {
    border-left: 0;
}

.prose .code-nav-btn svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.prose .collapsed-code .code-nav-btn {
    width: 0;
    min-width: 0;
    max-width: 0;
    padding-inline: 0;
    margin-inline: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.prose .code-fold-controls .code-nav-btn:hover,
.prose .code-fold-controls .code-nav-btn:focus-visible,
.prose .code-fold-controls .fold-toggle-btn:hover,
.prose .code-fold-controls .fold-toggle-btn:focus-visible {
    color: #172033 !important;
    background: transparent !important;
    outline: none;
}

.dark .prose .code-nav-btn {
    color: #9eabbd;
}

.dark .prose .code-fold-controls .code-nav-btn:hover,
.dark .prose .code-fold-controls .code-nav-btn:focus-visible,
.dark .prose .code-fold-controls .fold-toggle-btn:hover,
.dark .prose .code-fold-controls .fold-toggle-btn:focus-visible {
    color: #e2e8f0 !important;
    background: transparent !important;
    outline: none;
}

.prose .fold-toggle-btn {
    width: 32px !important;
    height: 28px !important;
    margin: 0 1px !important;
    color: #647083 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color 0.14s ease !important;
}

.dark .prose .fold-toggle-btn {
    color: #9eabbd !important;
    background: transparent !important;
    box-shadow: none !important;
}

.prose .fold-toggle-btn:hover {
    transform: none;
    box-shadow: none !important;
}

.prose .fold-toggle-btn span {
    color: currentColor !important;
    font-size: 0.98rem !important;
}

.diagram-block {
    --diagram-bg: transparent;
    --diagram-surface: #f8fafc;
    --diagram-text: #172033;
    --diagram-muted: #475569;
    --diagram-border: #cbd5e1;
    --diagram-line: #64748b;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: min(100%, calc(100vw - 2rem)) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 2rem auto !important;
    overflow: hidden !important;
    min-height: 0;
    box-shadow: none !important;
    box-sizing: border-box;
    max-width: 100% !important;
}

.dark .diagram-block {
    --diagram-bg: transparent;
    --diagram-surface: #172033;
    --diagram-text: #e7edf6;
    --diagram-muted: #a8b5c6;
    --diagram-border: #475569;
    --diagram-line: #94a3b8;
    background: transparent !important;
    border-color: transparent !important;
}

.mermaid-block[data-mermaid-kind="flowchart"],
.mermaid-block[data-mermaid-kind="diagram"] {
    width: 100% !important;
    max-width: 100% !important;
}

.mermaid-block[data-mermaid-kind="sequence"],
.mermaid-block[data-mermaid-kind="gantt"] {
    width: 100% !important;
}

.mermaid-block .mermaid {
    width: 100%;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.diagram-block svg {
    flex: 0 0 auto;
    display: block;
    height: auto !important;
    max-width: 100% !important;
}

.diagram-block foreignObject {
    overflow: visible;
}

.diagram-block .edgeLabel {
    white-space: nowrap;
}

.mermaid-block g.cluster rect {
    fill: color-mix(in srgb, var(--diagram-surface) 46%, transparent) !important;
    stroke: color-mix(in srgb, var(--diagram-line) 30%, transparent) !important;
    stroke-width: 0.5px !important;
    rx: 6px;
    ry: 6px;
}

.mermaid-block .cluster-label,
.mermaid-block .cluster-label div,
.mermaid-block .cluster-label span,
.mermaid-block .cluster-label p {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.mermaid-block .cluster-label div {
    display: inline-block !important;
    width: auto !important;
    padding: 1px 7px !important;
    background: var(--diagram-bg) !important;
    border-radius: 4px !important;
    line-height: 1.35 !important;
}

.mermaid-block .freecat-mermaid-cluster-label {
    pointer-events: none;
}

.mermaid-block .freecat-mermaid-cluster-label div {
    padding: 2px 8px !important;
    background: color-mix(in srgb, var(--diagram-bg) 92%, var(--diagram-surface)) !important;
    border: 0.5px solid color-mix(in srgb, var(--diagram-line) 20%, transparent) !important;
}

.mermaid-block .node rect,
.mermaid-block .node polygon,
.mermaid-block rect.actor,
.mermaid-block rect.labelBox {
    fill: color-mix(in srgb, var(--diagram-surface) 56%, transparent) !important;
    stroke: var(--diagram-line) !important;
    stroke-width: 0.55px !important;
}

.mermaid-block .node circle,
.mermaid-block .node ellipse {
    fill: color-mix(in srgb, var(--diagram-surface) 56%, transparent) !important;
    stroke: var(--diagram-line) !important;
    stroke-width: 0.55px !important;
}

.mermaid-block .flowchart-link,
.mermaid-block .messageLine0,
.mermaid-block .messageLine1,
.mermaid-block .loopLine,
.mermaid-block .actor-line {
    stroke: var(--diagram-line) !important;
    stroke-width: 0.75px !important;
}

.mermaid-block marker path,
.mermaid-block .arrowheadPath {
    fill: var(--diagram-line) !important;
    stroke: var(--diagram-line) !important;
}

.diagram-block .actor,
.diagram-block .labelBox {
    rx: 4px;
    ry: 4px;
}

.diagram-block .messageText,
.diagram-block .noteText,
.diagram-block .loopText,
.diagram-block .actor>text,
.diagram-block .labelText {
    font-weight: 400 !important;
}

.mermaid-block .actor>text,
.mermaid-block .actor tspan,
.mermaid-block .messageText,
.mermaid-block .messageText tspan,
.mermaid-block .noteText,
.mermaid-block .noteText tspan,
.mermaid-block .loopText,
.mermaid-block .loopText tspan,
.mermaid-block .labelText,
.mermaid-block .labelText tspan {
    fill: #0f172a !important;
    stroke: none !important;
}

.mermaid-block .edgeLabel,
.mermaid-block .edgeLabel p,
.mermaid-block .edgeLabel span {
    color: #0f172a !important;
}

.mermaid-block .freecat-mermaid-sequence-number-bg {
    fill: #eef4fb !important;
    stroke: #9aa8bc !important;
    stroke-width: 0.55px !important;
}

.mermaid-block .freecat-mermaid-sequence-number {
    fill: #334155 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.mermaid-block .labelBkg {
    background-color: #f8fafc !important;
    border: 0.7px solid #9aa8bc !important;
    border-radius: 4px;
    color: #0f172a !important;
}

.mermaid-block .labelBkg * {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mermaid-block rect.note {
    fill: #fff7c2 !important;
    stroke: #d8ca70 !important;
}

.dark .mermaid-block .node rect,
.dark .mermaid-block .node polygon,
.dark .mermaid-block rect.actor,
.dark .mermaid-block rect.labelBox,
.dark .mermaid-block .node circle,
.dark .mermaid-block .node ellipse {
    stroke: #9aa8bc !important;
}

.dark .mermaid-block .flowchart-link,
.dark .mermaid-block .messageLine0,
.dark .mermaid-block .messageLine1,
.dark .mermaid-block .loopLine,
.dark .mermaid-block .actor-line {
    stroke: #94a3b8 !important;
}

.dark .mermaid-block marker path,
.dark .mermaid-block .arrowheadPath {
    fill: #94a3b8 !important;
    stroke: #94a3b8 !important;
}

.dark .mermaid-block g.cluster rect {
    fill: rgba(30, 41, 59, 0.28) !important;
    stroke: rgba(148, 163, 184, 0.3) !important;
    stroke-width: 0.5px !important;
}

.dark .mermaid-block .cluster-label,
.dark .mermaid-block .cluster-label div,
.dark .mermaid-block .cluster-label span,
.dark .mermaid-block .cluster-label p {
    color: #e7edf6 !important;
}

.dark .mermaid-block .cluster-label div {
    background: var(--diagram-bg) !important;
}

.dark .mermaid-block .freecat-mermaid-cluster-label div {
    background: color-mix(in srgb, var(--diagram-bg) 88%, var(--diagram-surface)) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

.dark .mermaid-block .labelBkg {
    background-color: #172033 !important;
    border-color: #718096 !important;
    color: #e7edf6 !important;
}

.dark .mermaid-block rect.note {
    fill: rgba(30, 41, 59, 0.78) !important;
    stroke: #64748b !important;
}

.dark .mermaid-block .actor>text,
.dark .mermaid-block .actor tspan,
.dark .mermaid-block .messageText,
.dark .mermaid-block .messageText tspan,
.dark .mermaid-block .noteText,
.dark .mermaid-block .noteText tspan,
.dark .mermaid-block .loopText,
.dark .mermaid-block .loopText tspan,
.dark .mermaid-block .labelText,
.dark .mermaid-block .labelText tspan {
    fill: #e7edf6 !important;
    stroke: none !important;
}

.dark .mermaid-block .edgeLabel,
.dark .mermaid-block .edgeLabel p,
.dark .mermaid-block .edgeLabel span {
    color: #e7edf6 !important;
}

.dark .mermaid-block .freecat-mermaid-sequence-number-bg {
    fill: #172033 !important;
    stroke: #64748b !important;
}

.dark .mermaid-block .freecat-mermaid-sequence-number {
    fill: #dbe4f0 !important;
}

.freecat-gantt {
    display: block;
    max-width: 100%;
    overflow: visible;
}

.freecat-gantt-title {
    fill: #1f2937;
    font-size: 18px;
    font-weight: 500;
}

.freecat-gantt-section-bg {
    fill: rgba(226, 232, 240, 0.3);
}

.freecat-gantt-section-label,
.freecat-gantt-task-text,
.freecat-gantt-tick {
    fill: #334155;
    font-size: 12px;
    font-weight: 400;
}

.freecat-gantt-section-label {
    font-size: 13px;
}

.freecat-gantt-grid {
    stroke: #d8e0ea;
    stroke-width: 1;
}

.freecat-gantt-axis {
    stroke: #cbd5e1;
    stroke-width: 1;
}

.freecat-gantt-task {
    fill: #5f7087;
    stroke: #475569;
    stroke-width: 1;
}

.freecat-gantt-task-text.inside {
    fill: #ffffff;
}

.dark .freecat-gantt-title,
.dark .freecat-gantt-section-label,
.dark .freecat-gantt-task-text,
.dark .freecat-gantt-tick {
    fill: #dbe4f0;
}

.dark .freecat-gantt-section-bg {
    fill: rgba(30, 41, 59, 0.5);
}

.dark .freecat-gantt-grid,
.dark .freecat-gantt-axis {
    stroke: #2f3d51;
}

.dark .freecat-gantt-task {
    fill: #718096;
    stroke: #9aa8bc;
}

.echarts-block {
    min-height: 420px;
    align-items: center !important;
    overflow: hidden !important;
}

.echarts-canvas {
    width: 100%;
    min-width: min(100%, 520px);
    height: 380px;
}

.diagram-error {
    min-height: 120px;
    text-align: center;
}

.diagram-error p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
}

.dark .diagram-error p {
    color: #94a3b8 !important;
}