.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;
    color: var(--color);
    transition:
        color var(--t-btn-dur, 280ms) var(--t-btn-ease, ease-out),
        opacity var(--t-btn-dur, 280ms) var(--t-btn-ease, ease-out),
        background-color var(--t-btn-dur, 280ms) var(--t-btn-ease, ease-out);
}

.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;
    opacity: 1;
    transition:
        opacity 180ms ease-out,
        color var(--t-btn-dur, 280ms) var(--t-btn-ease, ease-out);
}

.copy-btn-container .clipboard-check {
    position: absolute;
    fill: #2f9e6d;
    opacity: 0;
    transition: opacity 180ms ease-out;
}

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

.copy-btn-container input:checked~.clipboard-check {
    opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
    .copy-btn-container,
    .copy-btn-container .clipboard,
    .copy-btn-container .clipboard-check {
        transition: none !important;
    }
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar {
    scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.42);
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.5);
}

.dark .custom-scrollbar {
    scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.42);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.38);
}

/* ===== 黄金比例阅读间距系统 =====
   基于科学的黄金比例 (φ = 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;
    font-weight: 600 !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 {
    --article-block-radius: 8px;
    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: 8px;
}

.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%;
    border-radius: 8px;
}

.prose figure.post-image .post-image-placeholder {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
}

.prose figure.post-image .post-image-loaded {
    aspect-ratio: auto;
    object-fit: contain;
}

.prose figure.post-image .post-image-loaded+.post-image-loader,
.prose figure.post-image .post-image-failed+.post-image-loader {
    display: none;
}

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

.prose figure.external-embed .external-embed-placeholder {
    display: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    background: #f8fafc;
}

.prose figure.external-embed.external-embed-loading .external-embed-placeholder {
    display: block;
}

.prose figure.external-embed:not(.external-embed-loading) .external-embed-loader {
    display: none;
}

.prose figure.external-embed.external-embed-loading .external-embed-content {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

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

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

.prose figure.external-embed-link {
    border: 1px solid #d8e0eb;
    border-radius: 8px;
    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: 8px;
    margin-top: 0 !important;
    /* 间距已由容器处理，img 自身不需要 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: 8px !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;
    font-size: calc(var(--article-body-size) * 0.85) !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: 8px !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;
    font-size: calc(var(--article-body-size) * 0.85) !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: separate !important;
    border-spacing: 1.2em 0 !important;
    background-color: #f0f1f4 !important;
    margin: 1.618em 0 !important;
    font-size: 0.9em !important;
    overflow-x: auto !important;
}

.dark .prose table {
    background-color: #151c2a !important;
}

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

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

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

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

.prose th {
    border-bottom: 2px solid #c6cfdb !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.dark .prose th {
    border-bottom-color: #64748b !important;
    color: #c3d0dc !important;
}

.prose tbody tr:last-child th,
.prose tbody tr:last-child td {
    border-bottom: 0 !important;
}

.prose table:not(:has(tbody tr)) thead th,
.prose table:has(tbody tr:only-child) thead th {
    border-bottom: 0 !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 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: 8px;
}

.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: #151c2a !important;
}

/* Override bgcolor cell colors to Slate-800 */
.dark .prose td[bgcolor] {
    background-color: #151c2a !important;
    /* Slate-800 */
    color: #b6c2cf !important;
    border-radius: 8px;
    /* 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: 8px;
    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: 8px !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-rule: #d8e0eb;
    --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 {
    --article-heading-rule: #334155;
    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;
    font-weight: 600 !important;
    scroll-margin-top: 6rem;
    position: relative;
    padding-top: 0;
    border-top: 0 !important;
}

.prose .article-heading-rank-1::after,
.prose .article-heading-rank-2::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 0.72rem;
    background: var(--article-heading-rule);
}

.prose .article-heading-rank-1::after {
    height: 2px;
}

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

.prose .article-heading a,
.prose .article-heading a:hover {
    color: inherit !important;
    /* 标题内的链接不显示正文链接的下划线 */
    text-decoration: none !important;
}

/* 标题内的链接前缀一个链接(link) icon，标识其为可跳转链接；用 mask + currentColor 让图标跟随标题颜色（含深色模式） */
.prose .article-heading a::before {
    content: "";
    display: inline-block;
    width: 0.82em;
    height: 0.82em;
    margin-right: 0.3em;
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18.3638%2015.5355L16.9496%2014.1213L18.3638%2012.7071C20.3164%2010.7545%2020.3164%207.58866%2018.3638%205.63604C16.4112%203.68341%2013.2453%203.68341%2011.2927%205.63604L9.87849%207.05025L8.46428%205.63604L9.87849%204.22182C12.6122%201.48815%2017.0443%201.48815%2019.778%204.22182C22.5117%206.95549%2022.5117%2011.3876%2019.778%2014.1213L18.3638%2015.5355ZM15.5353%2018.364L14.1211%2019.7782C11.3875%2022.5118%206.95531%2022.5118%204.22164%2019.7782C1.48797%2017.0445%201.48797%2012.6123%204.22164%209.87868L5.63585%208.46446L7.05007%209.87868L5.63585%2011.2929C3.68323%2013.2455%203.68323%2016.4113%205.63585%2018.364C7.58847%2020.3166%2010.7543%2020.3166%2012.7069%2018.364L14.1211%2016.9497L15.5353%2018.364ZM14.8282%207.75736L16.2425%209.17157L9.17139%2016.2426L7.75717%2014.8284L14.8282%207.75736Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18.3638%2015.5355L16.9496%2014.1213L18.3638%2012.7071C20.3164%2010.7545%2020.3164%207.58866%2018.3638%205.63604C16.4112%203.68341%2013.2453%203.68341%2011.2927%205.63604L9.87849%207.05025L8.46428%205.63604L9.87849%204.22182C12.6122%201.48815%2017.0443%201.48815%2019.778%204.22182C22.5117%206.95549%2022.5117%2011.3876%2019.778%2014.1213L18.3638%2015.5355ZM15.5353%2018.364L14.1211%2019.7782C11.3875%2022.5118%206.95531%2022.5118%204.22164%2019.7782C1.48797%2017.0445%201.48797%2012.6123%204.22164%209.87868L5.63585%208.46446L7.05007%209.87868L5.63585%2011.2929C3.68323%2013.2455%203.68323%2016.4113%205.63585%2018.364C7.58847%2020.3166%2010.7543%2020.3166%2012.7069%2018.364L14.1211%2016.9497L15.5353%2018.364ZM14.8282%207.75736L16.2425%209.17157L9.17139%2016.2426L7.75717%2014.8284L14.8282%207.75736Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

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

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

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

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

.prose .article-heading-depth-6 {
    font-size: var(--article-heading-h6) !important;
    line-height: 1.42 !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 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: 80px;
}

.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 .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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 {
    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, .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 {
    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, .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 {
    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, .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 {
    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;
}

/* Markdown divider rhythm: equal base spacing keeps the rule centered between
   adjacent blocks; markdown-gap beside it only adds the author's blank-line space. */
.prose>hr {
    height: 3px !important;
    border: 0 !important;
    background: #d8e0eb !important;
    margin: 0 !important;
}

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

.prose>:not(.markdown-gap)+hr,
.prose .markdown-gap+hr {
    margin-block-start: var(--article-space-divider) !important;
}

.prose>hr+:not(.markdown-gap),
.prose>hr+.markdown-gap+:not(.markdown-gap) {
    margin-block-start: var(--article-space-divider) !important;
}

/* Final cascade guard: outrank older paragraph/list/table/heading rules without special cases. */
/* IMPORTANT: the adjacency spacing rules below MUST wrap their target block list in
   :is(), never :where(). :where() has zero specificity, so this margin:0 reset guard
   (which uses class selectors -> higher specificity) would outrank it and zero the
   top margin of class-based blocks (.code-block-container, figure.post-image,
   .callout, .katex-display, .footnotes, ...), making them sit flush against
   a preceding hr or heading. :is() inherits the class specificity of its arguments
   and reliably beats this guard, exactly like the flow rule just below. */
.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 .article-heading-depth-5,
.prose.prose .article-heading-depth-6,
.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 .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, .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, .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, .audio-player) {
    margin-block-start: var(--article-space-flow) !important;
}

.prose.prose .article-heading-depth-1+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .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, .audio-player),
.prose.prose .article-heading-depth-2+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .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, .audio-player),
.prose.prose .article-heading-depth-3+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .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, .audio-player),
.prose.prose .article-heading-depth-4+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .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, .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, .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 {
    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, .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 {
    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, .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 {
    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, .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 {
    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 .article-heading-depth-1+.article-heading-depth-1,
.prose.prose .article-heading-depth-1+.markdown-gap+.article-heading-depth-1 {
    margin-block-start: var(--article-space-heading-peer-1) !important;
}

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

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

.prose.prose :is(.article-heading-depth-3, .article-heading-depth-4, .article-heading-depth-5, .article-heading-depth-6)+.article-heading-depth-2,
.prose.prose :is(.article-heading-depth-3, .article-heading-depth-4, .article-heading-depth-5, .article-heading-depth-6)+.markdown-gap+.article-heading-depth-2 {
    margin-block-start: var(--article-space-heading-peer-2) !important;
}

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

.prose.prose :is(.article-heading-depth-4, .article-heading-depth-5, .article-heading-depth-6)+.article-heading-depth-3,
.prose.prose :is(.article-heading-depth-4, .article-heading-depth-5, .article-heading-depth-6)+.markdown-gap+.article-heading-depth-3 {
    margin-block-start: var(--article-space-heading-peer-3) !important;
}

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

.prose.prose :is(.article-heading-depth-5, .article-heading-depth-6)+.article-heading-depth-4,
.prose.prose :is(.article-heading-depth-5, .article-heading-depth-6)+.markdown-gap+.article-heading-depth-4 {
    margin-block-start: var(--article-space-heading-peer-4) !important;
}

.prose.prose .article-heading-depth-6+.article-heading-depth-5,
.prose.prose .article-heading-depth-6+.markdown-gap+.article-heading-depth-5 {
    margin-block-start: var(--article-space-heading-peer-5) !important;
}

.prose.prose>:not(.markdown-gap)+hr,
.prose.prose .markdown-gap+hr {
    margin-block-start: var(--article-space-divider) !important;
}

.prose.prose>hr+:not(.markdown-gap),
.prose.prose>hr+.markdown-gap+:not(.markdown-gap) {
    margin-block-start: var(--article-space-divider) !important;
}

.prose.prose .article-heading-depth-5+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .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, .audio-player),
.prose.prose .article-heading-depth-6+:is(p, ul, ol, dl, blockquote, table, .code-block-container, figure.post-image, details, .callout, .katex-display, center, .mermaid, pre, .footnotes, iframe, video, picture, .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, .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, .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 {
    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, .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 {
    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: 8px !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: 8px !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: 8px;
    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;
}
@media (min-width: 1280px) {
    .freecat-post-toc-panel {
        --freecat-post-toc-top: 16rem;
        --freecat-post-toc-bottom-gap: 10.1875rem;
        --freecat-post-toc-fade-surface: #f6f6f8;
        position: fixed;
        top: var(--freecat-post-toc-top);
        /* Article is 900px wide and centered on the viewport: 450px half-width + 48px visual gap. */
        left: calc(50% + 498px);
        height: calc(100vh - var(--freecat-post-toc-top) - var(--freecat-post-toc-bottom-gap));
        z-index: 20;
        overflow-x: hidden;
    }

    .dark .freecat-post-toc-panel {
        --freecat-post-toc-fade-surface: #101622;
    }

    .freecat-post-toc-scroll-shell {
        position: relative;
    }

    .freecat-post-toc-scroll-shell::after {
        content: "";
        position: absolute;
        right: 0.75rem;
        left: 0;
        z-index: 2;
        display: block;
        height: 2.25rem;
        pointer-events: none;
    }

    .freecat-post-toc-scroll-shell::after {
        bottom: 0;
        background: linear-gradient(to top, var(--freecat-post-toc-fade-surface), rgba(246, 246, 248, 0));
    }

    .dark .freecat-post-toc-scroll-shell::after {
        background: linear-gradient(to top, var(--freecat-post-toc-fade-surface), rgba(16, 22, 34, 0));
    }

    #toc-container,
    #toc-container nav,
    #toc-container a {
        max-width: 100%;
        min-width: 0;
    }

    #toc-container {
        overflow-y: scroll;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
    }

    #toc-container nav {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    #toc-container a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (min-width: 1760px) {
    .freecat-post-toc-panel {
        left: calc(50% + 498px);
    }
}