/* 文章阅读页 */
.article-page .sidebar { max-height: 100vh; max-height: 100dvh; overflow-y: hidden; animation: article-page-enter .42s cubic-bezier(.22, 1, .36, 1) both; }
.article-page .post-header { border-bottom: 0; animation: article-page-enter .48s .06s cubic-bezier(.22, 1, .36, 1) both; }
.article-page .post-cover, .article-page .post-layout { animation: article-page-enter .52s .12s cubic-bezier(.22, 1, .36, 1) both; }
.article-page .post-nav, .article-page .article-like, .article-page .site-footer { animation: article-page-enter .52s .18s cubic-bezier(.22, 1, .36, 1) both; }
.article-page .profile { padding-left: 0; margin-top: 78px; }
.article-page .avatar { margin-left: 82px; }
.article-page .profile h1 { margin-left: 82px; }
.article-page .profile > p, .article-page .profile-socials, .article-page .side-nav { display: none; }
.article-sidebar-toc { width: calc(100% - 82px); max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px); margin: 34px 0 0 82px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.article-sidebar-toc::-webkit-scrollbar { display: none; }
.article-sidebar-toc[hidden] { display: none; }
.article-sidebar-toc-title { margin: 0 0 14px; color: var(--ink-soft); font-size: 18px; font-weight: 500; }
.article-sidebar-toc nav { display: grid; gap: 2px; }
.article-sidebar-toc a { display: block; padding: 7px 10px; color: var(--ink-soft); border-radius: 6px; font-size: 13px; line-height: 1.45; text-decoration: none; transition: color .16s ease, background-color .16s ease; }
.toc-subgroup { display: grid; gap: 2px; margin: 2px 0 8px 10px; padding-left: 10px; border-left: 1px solid var(--line); transition: border-color .16s ease; }
.toc-subgroup.is-active { border-left-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
.article-sidebar-toc a.sub { padding: 6px 8px; border-radius: 4px; font-size: 12px; }
.article-sidebar-toc a:hover { color: var(--ink); background: color-mix(in srgb, var(--paper-soft) 72%, transparent); }
.article-sidebar-toc a.active { color: var(--ink); background: var(--paper-soft); }
.post-header { width: min(960px, 100%); max-width: none; padding: 12px 0 0; margin: 0; }
.post-hero-inner { width: 100%; }
.post-byline-item { display: inline-flex; align-items: center; gap: 5px; }
.post-byline-item .icon { width: 13px; height: 13px; color: var(--ink-faint); }
.ai-summary { margin-top: 28px; padding: 18px 20px; background: color-mix(in srgb, var(--paper-soft) 42%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 10px; }
.ai-summary-title { display: flex; align-items: center; gap: 8px; color: var(--accent-deep); font-size: 14px; font-weight: 500; line-height: 1.4; }
.ai-summary-title .icon { display: block; width: 17px; height: 17px; color: var(--accent); }
.ai-summary p { margin: 12px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.post-cover { width: min(960px, 100%); margin: 32px 0 0; }
.post-layout { display: block; width: min(960px, 100%); margin: 0; padding: 0 0 72px; }
.article { min-width: 0; }
.article p { margin: 0 0 1.55em; color: var(--ink-soft); font-family: var(--sans); font-size: 18px; line-height: 1.95; }
.article strong { color: var(--ink); font-weight: 700; }
.article a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 4px; }
.article h2 { margin: 2.15em 0 .8em; color: var(--ink); font-family: inherit; font-size: 30px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; scroll-margin-top: 30px; }
.article h3 { margin: 1.9em 0 .7em; color: var(--ink); font-family: inherit; font-size: 23px; font-weight: 600; line-height: 1.5; scroll-margin-top: 30px; }
.article h4 { margin: 1.7em 0 .65em; color: var(--ink); font-size: 19px; scroll-margin-top: 90px; }
.article ul, .article ol { margin: 0 0 1.7em; padding-left: 1.55em; color: var(--ink-soft); font-family: var(--sans); font-size: 18px; line-height: 1.9; }
.article li { margin-bottom: .6em; }
.article li::marker { color: var(--accent); }
.article blockquote { margin: 2.2em 0; padding: 18px 24px; color: var(--ink-soft); background: var(--paper-soft); border-left: 4px solid var(--line); font-family: inherit; }
.article blockquote p { margin: 0; color: inherit; font-size: 17px; }
.article img { display: block; width: auto; max-width: 100%; margin: 2.4em auto; border-radius: 10px; }
.article table { width: 100%; margin-bottom: 2em; border-collapse: collapse; font-size: 16px; }
.article th, .article td { padding: 12px 16px; border: 1px solid var(--line); text-align: left; }
.article th { background: var(--paper-soft); }
.article code { padding: 2px 5px; color: var(--accent-deep); background: var(--paper-soft); font-family: ui-monospace, monospace; font-size: .88em; }
.diagram-card { max-width: 100%; margin: 2em 0 2.2em; overflow: hidden; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.diagram-toolbar { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px 8px 18px; background: color-mix(in srgb, var(--paper-soft) 82%, var(--paper)); border-bottom: 1px solid var(--line); }
.diagram-title, .diagram-actions, .diagram-action { display: inline-flex; align-items: center; }
.diagram-title { gap: 9px; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.diagram-title i { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent); }
.diagram-actions { gap: 8px; margin-left: auto; }
.diagram-zoom-value { display: none; min-width: 52px; color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.diagram-action { min-width: 44px; min-height: 44px; justify-content: center; gap: 7px; padding: 0 12px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.diagram-action:hover { color: var(--ink); background: var(--paper-soft); border-color: var(--ink-faint); }
.diagram-action:active { transform: translateY(1px); }
.diagram-action:disabled { opacity: .5; cursor: wait; }
.diagram-action.is-success { color: #067647; border-color: color-mix(in srgb, #067647 45%, var(--line)); }
.diagram-action.is-error { color: #b42318; border-color: color-mix(in srgb, #b42318 45%, var(--line)); }
.diagram-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diagram-viewport { max-width: 100%; padding: 24px; overflow: auto; background: color-mix(in srgb, var(--paper-soft) 58%, var(--paper)); scrollbar-width: thin; }
.diagram-stage { min-width: 100%; transform: scale(var(--diagram-zoom, 1)); transform-origin: 0 0; }
.diagram-card .diagram-wrap { max-width: 100%; padding: 0; margin: 0; overflow: visible; color: var(--ink); background: transparent; border: 0; }
.diagram-card .diagram-wrap code { display: block; min-width: 0; padding: 0; color: inherit; background: transparent; font-family: var(--sans); font-size: 14px; line-height: 1.6; text-align: center; white-space: normal; }
.diagram-card .diagram-wrap svg { display: block; width: auto; min-width: min(680px, 100%); max-width: 100%; height: auto; margin: 0 auto; }
.diagram-card .diagram-wrap foreignObject, .diagram-card .diagram-wrap .nodeLabel, .diagram-card .diagram-wrap .edgeLabel { overflow: visible; }
.diagram-card .diagram-wrap .nodeLabel p, .diagram-card .diagram-wrap .edgeLabel p { margin: 0; overflow: visible; font-size: 16px; line-height: 1.35; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.diagram-fullscreen-open { overflow: hidden; }
.diagram-card:fullscreen, .diagram-card.is-fullscreen { display: flex; width: 100vw; height: 100vh; height: 100dvh; margin: 0; background: var(--paper); border: 0; border-radius: 0; flex-direction: column; }
.diagram-card.is-fullscreen { position: fixed; inset: 0; z-index: 1200; }
.diagram-card:fullscreen .diagram-toolbar, .diagram-card.is-fullscreen .diagram-toolbar { flex: 0 0 auto; padding-inline: 24px; }
.diagram-card:fullscreen .diagram-zoom-value, .diagram-card.is-fullscreen .diagram-zoom-value { display: inline-block; }
.diagram-card:fullscreen .diagram-viewport, .diagram-card.is-fullscreen .diagram-viewport { display: grid; flex: 1; min-height: 0; padding: 40px; overflow: auto; overscroll-behavior: contain; cursor: zoom-in; place-items: start center; }
.diagram-card:fullscreen .diagram-viewport.is-space-panning, .diagram-card.is-fullscreen .diagram-viewport.is-space-panning { cursor: grab; user-select: none; }
.diagram-card:fullscreen .diagram-viewport.is-dragging, .diagram-card.is-fullscreen .diagram-viewport.is-dragging { cursor: grabbing; }
.diagram-card:fullscreen .diagram-stage, .diagram-card.is-fullscreen .diagram-stage { min-width: 100%; transform-origin: 0 0; }
.code-wrap { max-width: 100%; margin: 2em 0 2.2em; overflow: hidden; background: #f8fafc; border: 1px solid #dde3ea; border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease; }
.code-wrap:focus-within { border-color: color-mix(in srgb, var(--accent) 52%, #dde3ea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.code-head { display: flex; min-height: 44px; align-items: center; gap: 7px; padding: 7px 10px 7px 16px; background: #eef2f6; border-bottom: 1px solid #dde3ea; }
.code-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #e56d58; }
.code-head .dot:nth-child(2) { background: #e2b45e; }
.code-head .dot:nth-child(3) { background: #65b979; }
.code-head .lang { margin-left: 5px; color: #667085; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.code-copy { display: inline-flex; min-width: 72px; height: 32px; align-items: center; justify-content: center; gap: 6px; margin-left: auto; padding: 0 10px; color: #475467; background: #fff; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 12px; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.code-copy:active { transform: translateY(1px); }
.code-copy:disabled { cursor: wait; }
.code-copy.is-copied { color: #006400; border-color: #39bf45; }
.code-copy.is-error { color: #aa2d00; border-color: #aa2d00; }
.code-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.code-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.code-lines { display: flex; min-width: 52px; padding: 20px 12px; color: #98a2b3; background: #f2f5f8; border-right: 1px solid #e2e7ed; font: 12px/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; text-align: right; user-select: none; flex-direction: column; }
.code-lines span { display: block; }
.code-wrap pre { width: 100%; min-width: 0; max-width: 100%; margin: 0; overflow-x: auto; outline: none; }
.code-wrap pre code.hljs { display: block; min-width: max-content; padding: 20px 22px; color: #344054; background: transparent; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 14px; line-height: 1.7; white-space: pre; }
.hljs-comment, .hljs-quote { color: #667085; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: #7f56d9; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #067647; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #b54708; }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-built_in { color: #175cd3; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #c11574; }
.hljs-meta, .hljs-doctag { color: #006d77; }
.hljs-deletion { color: #b42318; }
[data-theme="dark"] .code-wrap { background: #181d26; border-color: #343b46; }
[data-theme="dark"] .code-head { background: #202631; border-color: #343b46; }
[data-theme="dark"] .code-head .lang { color: #98a2b3; }
[data-theme="dark"] .code-copy { color: #d0d5dd; background: #181d26; border-color: #475467; }
[data-theme="dark"] .code-lines { color: #667085; background: #1d222b; border-color: #343b46; }
[data-theme="dark"] .code-wrap pre code.hljs { color: #d0d5dd; }
[data-theme="dark"] .hljs-comment, [data-theme="dark"] .hljs-quote { color: #7d8998; }
[data-theme="dark"] .hljs-keyword, [data-theme="dark"] .hljs-selector-tag, [data-theme="dark"] .hljs-literal, [data-theme="dark"] .hljs-type { color: #c4a7ff; }
[data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-regexp, [data-theme="dark"] .hljs-addition { color: #75d7a5; }
[data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-symbol, [data-theme="dark"] .hljs-bullet { color: #f4b77d; }
[data-theme="dark"] .hljs-title, [data-theme="dark"] .hljs-title.function_, [data-theme="dark"] .hljs-section, [data-theme="dark"] .hljs-built_in { color: #80b7ff; }
[data-theme="dark"] .hljs-attr, [data-theme="dark"] .hljs-attribute, [data-theme="dark"] .hljs-variable, [data-theme="dark"] .hljs-template-variable { color: #f58bc1; }
[data-theme="dark"] .hljs-meta, [data-theme="dark"] .hljs-doctag { color: #6dd6df; }
[data-theme="dark"] .hljs-deletion { color: #ff8b82; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: min(960px, 100%); margin: 0 0 64px; }
.post-nav a { padding: 20px; border-top: 1px solid var(--line); text-decoration: none; }
.post-nav a:hover { border-color: var(--accent); }
.post-nav .dir { display: block; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.post-nav .t { display: block; margin-top: 8px; font-family: var(--serif); font-size: 16px; }
.post-nav .next { text-align: right; }
.article-like { width: min(960px, 100%); margin: 0 0 64px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; }
.like-feedback { display: none; }
.article-like:target .like-feedback-success, #article-like-done:target { display: block; }
.article-like button { padding: 12px 22px; color: var(--accent-deep); background: transparent; border: 1px solid var(--accent); border-radius: 2px; font: inherit; cursor: pointer; }
.article-like button:hover { color: #fff; background: var(--accent); }
.progress { position: fixed; top: 0; left: 0; z-index: 200; width: 0; height: 3px; background: var(--accent); }
@keyframes article-page-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .article-page .sidebar, .article-page .post-header, .article-page .post-cover, .article-page .post-layout, .article-page .post-nav, .article-page .article-like, .article-page .site-footer { opacity: 1; animation: none; transform: none; } }
@media (max-width: 760px) { .article-page .profile { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; padding-left: 0; margin-top: 0; } .article-page .avatar { margin-left: 0; } .article-page .profile h1 { margin: 6px 48px 2px 0; } .article-page .profile > p { display: block; } .article-page .profile-socials { display: flex; } .article-page .side-nav { display: flex; scrollbar-width: none; } .article-page .side-nav::-webkit-scrollbar { display: none; } .article-sidebar-toc { display: none; } }
@media (max-width: 600px) { .post-header { padding-top: 0; } .post-title { font-size: 1.85rem; } .post-byline { gap: 8px 14px; } .ai-summary { margin-top: 24px; padding: 16px; } .ai-summary p { font-size: 14px; } .post-layout { width: 100%; } .post-nav { grid-template-columns: 1fr; } .post-nav .next { text-align: left; } .article p, .article ul, .article ol { font-size: 16px; } .article h2 { font-size: 25px; } .article h3 { font-size: 21px; } .diagram-toolbar { align-items: flex-start; padding: 10px; } .diagram-title { min-height: 44px; padding-left: 6px; } .diagram-action { padding: 0 10px; } .diagram-action span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .diagram-viewport { padding: 14px; } .diagram-card:fullscreen .diagram-toolbar, .diagram-card.is-fullscreen .diagram-toolbar { padding-inline: 10px; } .diagram-card:fullscreen .diagram-viewport, .diagram-card.is-fullscreen .diagram-viewport { padding: 20px; } .code-head { padding-left: 12px; } .code-lines { min-width: 42px; padding: 16px 9px; } .code-wrap pre code.hljs { padding: 16px; font-size: 13px; } .code-copy { min-width: 68px; } }