/* 公共 tokens/base 由 Vite manifest 提供，阅读页只定义布局适配。 */
.reading-header { position:fixed; inset:0 0 auto; z-index:10; height:var(--header-h); border-bottom:1px solid transparent; transition:background-color .4s,border-color .4s; }
.reading-header.scrolled { background:var(--header-bg); border-bottom-color:var(--line); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
.reading-bar { display:flex; align-items:center; justify-content:space-between; height:100%; }
.reading-brand { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.reading-logo { width:30px; height:auto; flex:none; }
.reading-header nav { display:flex; align-items:stretch; gap:clamp(16px,4vw,40px); height:100%; font-size:14px; color:var(--muted); }
.reading-header nav a { position:relative; display:inline-flex; align-items:center; transition:color .2s; }
.reading-header nav a::after { content:''; position:absolute; inset:auto 0 14px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transition:transform .4s var(--ease); }
.reading-header a:hover,.reading-header a.active { color:var(--text); }
.reading-header .active::after { transform:scaleX(1); }
#theme-toggle { display:inline-grid; place-items:center; align-self:center; width:36px; height:36px; margin-right:-8px; padding:0; border:0; border-radius:8px; background:none; color:inherit; cursor:pointer; transition:color .2s,background .2s; }
#theme-toggle:hover { background:var(--line); color:var(--text); }
#theme-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#theme-toggle .moon { display:none; }
[data-theme="dark"] #theme-toggle .sun { display:none; }
[data-theme="dark"] #theme-toggle .moon { display:block; }
/* 阅读进度：导航底边上的一条蓝线 */
.reading-progress { position:absolute; inset:auto 0 -1px; height:2px; pointer-events:none; }
.reading-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--accent-soft),var(--accent)); transform:scaleX(0); transform-origin:left; }
.reading-main { min-height:calc(100svh - 180px); }

/* 文章列表 */
.reading-list-content { padding-top:16px; padding-bottom:64px; }
.article-total { display:inline-block; margin-left:18px; color:var(--faint); font-size:16px; font-weight:500; letter-spacing:0; vertical-align:super; animation:reading-fade .8s ease .7s backwards; }
.post-list { border-top:1px solid var(--line); }
.post-item { position:relative; isolation:isolate; display:grid; grid-template-columns:104px 1fr 24px; gap:24px; padding:28px 16px; margin-inline:-16px; border-radius:var(--radius-sm); transition:opacity .3s,background-color .4s; }
.post-item::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:28px 28px; -webkit-mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),#000,transparent); mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),#000,transparent); opacity:0; transition:opacity .4s; pointer-events:none; }
.post-item::after { content:""; position:absolute; left:16px; right:16px; bottom:0; height:1px; background:var(--line); }
.post-item time,.article-meta { font-size:13px; color:var(--muted); font-family:var(--font-mono); }
.post-item time { padding-top:6px; }
.post-item h2 { font-size:23px; font-weight:500; letter-spacing:-.02em; margin:0 0 8px; transition:color .3s; }
.post-item p { color:var(--muted); }
.post-item>span { color:var(--faint); transition:color .3s,transform .4s var(--ease); }
@media(hover:hover) { .post-list:hover .post-item { opacity:.5; } .post-list .post-item:hover { opacity:1; } .post-item:hover::before { opacity:1; } .post-item:hover h2,.post-item:hover>span { color:var(--accent); } .post-item:hover>span { transform:translate(3px,-3px); } }
.empty-posts { position:relative; padding:40px 0 56px; color:var(--muted); }
.empty-posts h2 { color:var(--text); font-size:clamp(1.35rem,3vw,1.75rem); font-weight:500; margin:16px 0 8px; letter-spacing:-.02em; }
.empty-posts a { display:inline-flex; gap:12px; margin-top:24px; font-size:14px; color:var(--accent); }
.empty-posts a span { transition:transform .4s var(--ease); }
.empty-posts a:hover span { transform:translate(3px,-3px); }
.page-intro a { color:var(--accent); }

/* 文章页：标题区复用 page-heading 网格，正文与目录两栏 */
.article-heading { padding-bottom:40px; }
.article-heading .page-grid { opacity:.75; }
.article-heading-content { max-width:calc(860px + var(--gutter) * 2); }
.back-link { display:inline-flex; gap:6px; margin-bottom:28px; color:var(--muted); font-size:14px; transition:color .3s; }
.back-link span { transition:transform .4s var(--ease); }
.back-link:hover { color:var(--accent); }
.back-link:hover span { transform:translateX(-4px); }
.article-meta { display:flex; flex-wrap:wrap; gap:6px 0; }
.article-meta>*+*::before { content:'·'; margin-inline:10px; color:var(--faint); }
.reading-title { margin:18px 0; font-size:clamp(2rem,5vw,3.6rem); font-weight:800; line-height:1.14; letter-spacing:-.035em; overflow-wrap:anywhere; }
.reading-intro { max-width:720px; color:var(--text-2); font-size:clamp(1rem,2vw,1.15rem); }
.reading-article { display:grid; grid-template-columns:minmax(0,860px); justify-content:center; gap:64px; padding-top:8px; padding-bottom:72px; }
.article-cover { width:100%; max-height:480px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:40px; }
.prose { font-size:17px; line-height:1.95; overflow-wrap:anywhere; }
.prose p,.prose ul,.prose ol,.prose .code-block,.prose pre,.prose blockquote,.prose table { margin:0 0 1.5em; }
.prose h1,.prose h2,.prose h3,.prose h4 { position:relative; margin:1.8em 0 .7em; line-height:1.3; scroll-margin-top:calc(var(--header-h) + 24px); }
.prose h2 { font-size:1.6rem; letter-spacing:-.02em; }
.prose h3 { font-size:1.25rem; }
.heading-anchor { margin-left:10px; color:var(--faint); font-weight:400; opacity:0; transition:opacity .2s,color .2s; }
.prose :is(h2,h3):hover .heading-anchor,.heading-anchor:focus-visible { opacity:1; }
.heading-anchor:hover { color:var(--accent); }
.prose a:not(.heading-anchor) { color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent); text-underline-offset:3px; transition:text-decoration-color .3s; }
.prose a:not(.heading-anchor):hover { text-decoration-color:var(--accent); }
.prose img { display:block; max-width:100%; height:auto; border-radius:8px; transition:opacity .6s ease,filter .6s ease; }
.prose img.img-pending { opacity:0; filter:blur(8px); }
.prose hr { height:1px; margin:3em 0; border:0; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }
.prose pre { padding:20px; background:var(--bg-tint); overflow:auto; border-radius:10px; font-size:14px; line-height:1.7; }
.prose :not(pre)>code { padding:.15em .4em; border-radius:6px; background:var(--accent-soft); color:var(--text); font-size:.88em; }
.prose code { font-family:var(--font-mono); }
.code-block { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-tint); overflow:hidden; }
.code-block pre { margin:0; border-radius:0; background:none; }
.code-bar { display:flex; justify-content:space-between; align-items:center; padding:6px 10px 6px 20px; border-bottom:1px solid var(--line); font:12px var(--font-mono); color:var(--muted); }
.code-bar button { padding:4px 10px; border:0; border-radius:6px; background:none; color:var(--muted); font:12px var(--font); cursor:pointer; transition:background .2s,color .2s; }
.code-bar button:hover { background:var(--accent-soft); color:var(--accent); }
.prose>:first-child { margin-top:0; }
.prose blockquote>:last-child { margin-bottom:0; }
.prose blockquote { border-left:3px solid var(--accent); padding:12px 0 12px 20px; color:var(--text-2); background:linear-gradient(90deg,var(--accent-soft),transparent 60%); }
.prose table { display:block; overflow:auto; border-collapse:collapse; }
.prose th,.prose td { border:1px solid var(--line-strong); padding:8px 14px; }
.article-end { display:flex; justify-content:center; margin:56px 0 0; }
.article-end span { width:8px; height:8px; border-radius:2px; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.article-toc { position:sticky; top:calc(var(--header-h) + 32px); align-self:start; max-height:calc(100svh - var(--header-h) - 64px); overflow:auto; font-size:13px; }
.article-toc ol { list-style:none; margin:14px 0 0; padding:0; border-left:1px solid var(--line); }
.article-toc a { position:relative; display:block; padding:6px 0 6px 16px; color:var(--muted); line-height:1.5; transition:color .3s; }
.article-toc .sub a { padding-left:28px; font-size:12px; }
.article-toc a::before { content:''; position:absolute; left:-1px; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--accent); transform:scaleY(0); transition:transform .4s var(--ease); }
.article-toc a:hover,.article-toc a.active { color:var(--text); }
.article-toc a.active::before { transform:scaleY(1); }
@media(min-width:1180px) { .reading-article:has(.article-toc:not([hidden])) { grid-template-columns:minmax(0,760px) 200px; } .article-heading-content { max-width:calc(1024px + var(--gutter) * 2); } }
@media(max-width:1179px) { .article-toc { display:none; } }
.article-pager { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; }
.article-pager a,.not-found-links a { position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); transition:border-color .3s,transform .4s var(--ease),box-shadow .4s; }
.article-pager a { display:flex; flex-direction:column; gap:8px; padding:22px 24px; }
.article-pager .newer { grid-column:2; text-align:right; }
.article-pager strong { font-weight:500; transition:color .3s; }
.article-pager a::before,.not-found-links a::before { content:''; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:28px 28px; -webkit-mask-image:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),#000,transparent); mask-image:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),#000,transparent); opacity:0; pointer-events:none; transition:opacity .4s; }
.article-pager a:hover,.not-found-links a:hover { border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 12px 24px -18px #0003; }
.article-pager a:hover::before,.not-found-links a:hover::before { opacity:1; }
.article-pager a:hover strong { color:var(--accent); }
.update-notice { margin-top:32px; padding:16px; border-radius:var(--radius-sm); background:var(--accent-soft); }
.update-notice button { border:0; background:none; color:var(--accent); cursor:pointer; font:inherit; }

/* 404 */
.not-found { min-height:calc(100svh - 160px); }
.not-found .page-title { font-size:clamp(5rem,16vw,10rem); }
.not-found .page-title .char:nth-child(2) { color:var(--accent); }
.not-found-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.not-found-links a { display:inline-flex; gap:10px; padding:14px 20px; font-size:14px; }
.not-found-links a span { color:var(--accent); transition:transform .4s var(--ease); }
.not-found-links a:hover span { transform:translate(3px,-3px); }

/* 页脚与回到顶部 */
.reading-footer { border-top:1px solid var(--line); color:var(--faint); font-size:13px; }
.reading-footer-main { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; padding-block:36px 28px; }
.reading-footer .reading-brand { color:var(--text); transition:transform .5s var(--ease); }
.reading-footer .reading-brand:hover { transform:translateY(-3px); }
.reading-footer .reading-logo { width:34px; }
.reading-footer nav { display:flex; flex-wrap:wrap; gap:8px 28px; color:var(--muted); font-size:14px; }
.reading-footer a { transition:color .2s; }
.reading-footer a:hover { color:var(--text); }
.reading-footer .to-top span { display:inline-block; transition:transform .4s var(--ease); }
.reading-footer .to-top:hover span { transform:translateY(-3px); }
.reading-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-bottom:28px; }
.reading-beian { display:flex; flex-wrap:wrap; gap:8px 20px; }
.float-top { position:fixed; right:24px; bottom:24px; z-index:9; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--header-bg); color:var(--muted); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .4s,transform .4s var(--ease),visibility .4s,color .2s,border-color .2s; }
.float-top.shown { opacity:1; visibility:visible; transform:none; }
.float-top:hover { color:var(--accent); border-color:var(--line-strong); }
.float-top svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* 入场 */
.reading-rise { animation:reading-rise .85s var(--ease) var(--delay,0ms) both; }
@keyframes reading-rise { from { opacity:0; transform:translateY(20px); } }
@keyframes reading-fade { from { opacity:0; } }
.js [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease) var(--reveal-delay,0ms),transform .8s var(--ease) var(--reveal-delay,0ms),background-color .4s; }
.js [data-reveal].is-visible { opacity:1; transform:none; }
@media(hover:hover) { .js .post-list:hover [data-reveal].is-visible { opacity:.5; transition-delay:0ms; } .js .post-list [data-reveal].is-visible:hover { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .js [data-reveal] { opacity:1; transform:none; } .reading-progress { display:none; } }

@media(max-width:760px) { .reading-header .service-link { display:none; } .reading-header nav { gap:16px; } }
@media(max-width:600px) { .article-heading .page-grid { opacity:.3; } .post-item { grid-template-columns:1fr 20px; gap:10px; } .post-item time { grid-column:1 / -1; padding:0; } .article-pager { grid-template-columns:1fr; } .article-pager .newer { grid-column:auto; } .float-top { right:16px; bottom:16px; } }
@media(max-width:479px) { .reading-header nav { gap:12px; } .reading-header .reading-brand span,.reading-header .home { display:none; } }