.post-page { background: #f5f8fc; }.post-page a { text-decoration: none; }.post-layout { max-width: 1240px; padding: 0 20px; margin: 20px auto 0; display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 40px; align-items: start; }.post-layout.no-toc { grid-template-columns: minmax(0,1fr); max-width: 1000px; }.post-layout .article { min-width: 0; background: transparent; box-shadow: none; border: 0; padding: 0; }
.post-breadcrumb { display: flex; gap: 7px; font-size: 11px; color: var(--text-secondary); align-items: center; margin-bottom: 18px; min-width: 0; }.post-breadcrumb a { flex-shrink: 0; color: var(--text-secondary); }.post-breadcrumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-heading { padding-bottom: 14px; border-bottom: 1px solid var(--border); }.post-heading h1 { margin: 0 0 12px; font-size: 29px; line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; }.post-heading .subtitle { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }.post-tagbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }.post-tags a { font-size: 12px; padding: 3px 9px; border-radius: 5px; background: var(--surface-muted); color: var(--text-secondary); }.post-tags .category-badge { background: #e9f1ff; color: var(--accent); }.post-tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }.post-tools button,.post-more summary { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; padding: 7px 10px; color: var(--text); cursor: pointer; }.post-more { position: relative; }.post-more summary { background: transparent; border: 0; list-style: none; font-size: 20px; padding: 0 8px; }.post-more summary::-webkit-details-marker { display: none; }.post-more > div { position: absolute; right: 0; top: 100%; z-index: 10; display: flex; flex-direction: column; min-width: 110px; padding: 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }.post-more button { border: 0; }.meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--text-secondary); font-size: 12px; margin-top: 12px; }
.toc { align-self: stretch; border-right: 1px solid var(--border); padding: 18px 24px 0 0; }.toc[hidden] { display: none; }.toc-inner { position: sticky; top: 86px; }.toc strong { font-size: 14px; display: block; margin: 0 6px 10px; }.toc nav { max-height: calc(100vh - 220px); overflow-y: auto; scrollbar-width: thin; }.toc nav a { display: flex; gap: 14px; align-items: baseline; padding: 6px 10px; margin: 2px 0; border-left: 2px solid transparent; border-radius: 3px; color: var(--text-secondary); font-size: 12px; }.toc nav a.active { background: #e7f0ff; border-color: #2460ff; color: #2460ff; }.toc nav a.level-3 { padding-left: 28px; font-size: 11px; }.toc-number { flex-shrink: 0; min-width: 12px; }.toc-top { display: block; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; padding: 14px 10px; margin-top: 20px; }
.article .content { color: var(--text); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }.article .content p { margin: 10px 0 16px; }.article .content h2 { position: relative; margin: 26px 0 10px; font-size: 24px; line-height: 1.4; padding-left: 16px; scroll-margin-top: 84px; }.article .content h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 5px; border-radius: 3px; background: #2460ff; }.article .content h3 { font-size: 19px; margin: 16px 0 6px; scroll-margin-top: 84px; }.article .content h4 { scroll-margin-top: 84px; }.article .content a { color: var(--accent); }.article .content ul,.article .content ol { padding-left: 24px; margin: 10px 0 16px; }.article .content li::marker { color: #2460ff; }.article .content img { max-width: 100%; height: auto; display: block; margin: 16px auto; cursor: zoom-in; }.article .content table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }.article .content th,.article .content td { border: 1px solid var(--border); padding: 8px 12px; }.article .content :not(pre) > code { background: var(--surface-muted); color: var(--accent); padding: 2px 5px; border-radius: 4px; font-size: .9em; }.article .content blockquote { border-left: 3px solid #2460ff; border-radius: 4px; margin: 18px 0; padding: 8px 16px; background: #eaf2ff; color: #435777; }.article .content blockquote p { margin: 4px 0; }
.code-frame { border-radius: 5px; overflow: hidden; background: #252e3a; margin: 12px 0 16px; }.code-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 0; color: #c6cdd8; font: 11px/1.5 sans-serif; }.copy-code { background: transparent; border: 0; color: #e1e7f0; font: inherit; cursor: pointer; padding: 0 0 3px 8px; }.article .content pre { position: relative; margin: 0; padding: 8px 16px 14px 52px; overflow: auto; background: transparent; color: #e1e7f0; text-shadow: none; font: 12px/1.6 Consolas,Monaco,monospace; tab-size: 4; }.article .content pre code { display: block; background: transparent; padding: 0; color: inherit; text-shadow: none; font: inherit; white-space: pre; }.code-lines { position: absolute; left: 12px; top: 8px; color: #8c99a9; border-right: 1px solid #45505f; padding-right: 12px; user-select: none; text-align: right; }.code-lines span { display: block; }.post-page .token.comment { color: #8e9ead; }.post-page .token.keyword { color: #c4a5f4; }.post-page .token.string { color: #b2d79b; }.post-page .token.function { color: #8ac8ed; }.post-page .token.operator { background: transparent; color: #d1d9e5; }
.nav-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 26px 0 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-xs); }.nav-links a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; color: var(--text); min-width: 0; }.nav-links a + a { border-left: 1px solid var(--border); }.nav-links .next { grid-column: 2; text-align: right; justify-content: flex-end; }.nav-links a > span { font-size: 22px; color: var(--text-secondary); }.nav-links div { min-width: 0; }.nav-links small { display: block; font-size: 11px; color: var(--text-secondary); }.nav-links strong { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.reading-progress { position: fixed; left: 0; top: 0; height: 2px; width: 0; background: var(--accent); z-index: 100; }.lightbox { position: fixed; inset: 0; background: rgba(10,15,25,.9); z-index: 120; display: none; align-items: center; justify-content: center; padding: 24px; }.lightbox.open { display: flex; }.lightbox img { max-width: 94vw; max-height: 90vh; }.lightbox button { position: absolute; right: 20px; top: 16px; color: #fff; background: transparent; border: 0; font-size: 30px; cursor: pointer; }.download-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }.download-actions a { background: #2460ff; color: #fff; padding: 6px 12px; border-radius: 6px; }.download-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; }.related-box { padding: 16px; margin-top: 20px; border: 1px solid var(--border); border-radius: 6px; }.back-link { display: inline-block; color: var(--accent); margin: 20px 0; }.post-page footer { margin-top: 12px; padding: 20px 0; }
html[data-theme="dark"] .post-layout .article { background: transparent; }html[data-theme="dark"] .toc nav a.active,html[data-theme="dark"] .post-tags .category-badge,html[data-theme="dark"] .article .content blockquote { background: #213958; }html[data-theme="dark"] .article .content pre,html[data-theme="dark"] .article .content pre code { background: transparent; color: #e1e7f0; }
@media(max-width:1000px) { .post-layout { grid-template-columns: 180px minmax(0,1fr); gap: 24px; }.toc { padding-right: 12px; }.post-heading h1 { font-size: 26px; } }
@media(max-width:768px) { .post-layout { display: block; padding: 0 16px; margin-top: 16px; }.toc { border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 20px; }.toc-inner { position: static; }.toc nav { max-height: 180px; }.toc-top { display: none; }.post-heading h1 { font-size: 24px; }.post-breadcrumb { font-size: 10px; }.post-tagbar { flex-wrap: wrap; }.post-tools { margin-left: auto; }.meta { gap: 12px; font-size: 11px; }.article .content h2 { font-size: 22px; }.nav-links { grid-template-columns: minmax(0,1fr); }.nav-links .next { grid-column: 1; }.nav-links a + a { border-left: 0; border-top: 1px solid var(--border); } }
@media print { .top-nav,.toc,.post-tools,.reading-progress,footer,.nav-links { display: none !important; }.post-layout { display: block; max-width: none; margin: 0; }.post-page { background: #fff; }.article .content pre { white-space: pre-wrap; }.article .content pre code { white-space: pre-wrap; } }

.post-page .token.class-name,.post-page .token.constant { color: #ecc48d; }.post-page .token.number,.post-page .token.boolean { color: #f6b58e; }.post-page .token.punctuation { color: #c8d2df; }

.long-code { margin: 14px 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.long-code > summary { cursor: pointer; padding: 10px 14px; font-size: 12px; color: var(--text-secondary); background: var(--surface); }
.long-code .code-frame { margin: 0; border-radius: 0; }