:root{--ink:#222;--muted:#828282;--line:#ececec;--soft:#f7f7f7;--page:min(760px,calc(100% - 48px));--header-h:76px;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.7}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.page-shell{width:var(--page);margin:0 auto}.site-header{position:sticky;top:0;z-index:20;height:var(--header-h);pointer-events:none;background:linear-gradient(180deg,#fff 68%,rgba(255,255,255,0));transition:height .3s var(--ease),box-shadow .3s ease}.site-header.is-scrolled{box-shadow:0 1px 0 rgba(0,0,0,.045)}.site-bar{position:relative;width:var(--page);height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;pointer-events:auto}.brand{font-size:16px;font-weight:650;letter-spacing:.01em;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:15px}.search-form{position:relative;width:116px;transition:width .35s var(--ease)}.search-form:focus-within{width:188px}.search-form input{width:100%;height:31px;border:1px solid #e8e8e8;border-radius:999px;padding:0 48px 0 12px;color:#333;font-size:12px;outline:0;background:#fff;transition:border-color .2s,box-shadow .2s}.search-form input:focus{border-color:#cfcfcf;box-shadow:0 0 0 3px rgba(0,0,0,.025)}.search-submit,.search-clear{position:absolute;top:50%;border:0;background:transparent;color:#999;transform:translateY(-50%);padding:0}.search-submit{right:10px;width:16px;height:16px}.search-submit span:before{content:"";position:absolute;left:1px;top:1px;width:7px;height:7px;border:1.2px solid currentColor;border-radius:50%}.search-submit span:after{content:"";position:absolute;left:8px;top:9px;width:6px;height:1.2px;background:currentColor;transform:rotate(45deg);transform-origin:left center}.search-clear{right:29px;font-size:17px;line-height:1;opacity:0;pointer-events:none}.search-form.has-value .search-clear{opacity:1;pointer-events:auto}.site-nav{display:flex;align-items:center;gap:16px;font-size:13px;color:#777}.site-nav>a,.category-trigger{border:0;padding:5px 0;background:transparent;color:inherit}.site-nav .is-current,.site-nav a:hover,.category-trigger:hover{color:#111}.category-trigger b{display:inline-block;width:5px;height:5px;margin:0 0 3px 4px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}.category-menu{position:absolute;right:0;top:58px;width:150px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:.18s ease}.category-menu.is-open{opacity:1;visibility:visible;transform:none}.category-menu a{display:block;padding:8px 10px;border-radius:7px;font-size:12px;color:#777}.category-menu a:hover{background:var(--soft);color:#222}.menu-toggle{display:none}.site-main{min-height:calc(100vh - 166px)}.listing-shell{padding:74px 0 56px}.intro-block{margin:0 0 54px}.eyebrow{margin:0 0 12px;color:#9a9a9a;font-size:11px;letter-spacing:.14em}.intro-block h1{max-width:640px;margin:0;font-size:26px;line-height:1.45;font-weight:450;letter-spacing:-.025em}.post-list{border-top:1px solid var(--line)}.post-card{padding:30px 0 28px;border-bottom:1px solid var(--line);transition:transform .25s var(--ease)}.post-card:hover{transform:translateX(3px)}.post-meta{display:flex;align-items:center;gap:7px;margin:0 0 9px;color:#999;font-size:12px}.post-card h2{margin:0;font-size:20px;line-height:1.45;font-weight:570;letter-spacing:-.018em}.post-card h2 a:hover{color:#666}.post-excerpt{margin:9px 0 13px;color:#777;font-size:14px;line-height:1.85}.post-arrow{display:inline-flex;align-items:center;gap:7px;color:#555;font-size:12px}.post-arrow span{transition:transform .2s var(--ease)}.post-arrow:hover span{transform:translateX(4px)}.pagination{display:flex;justify-content:space-between;gap:12px;margin:42px 0 0;color:#777;font-size:13px}.pagination a{padding:8px 0}.pagination a:hover{color:#111}.skeleton-list{display:none;border-top:1px solid var(--line)}.is-loading .skeleton-list{display:block}.is-loading .post-list{display:none}.skeleton-post{padding:30px 0;border-bottom:1px solid var(--line)}.skeleton-post i,.skeleton-post b,.skeleton-post em{display:block;border-radius:6px;background:linear-gradient(90deg,#f3f3f3 25%,#fafafa 37%,#f3f3f3 63%);background-size:400% 100%;animation:shimmer 1.25s infinite}.skeleton-post i{width:22%;height:12px}.skeleton-post b{width:57%;height:25px;margin:12px 0}.skeleton-post em{width:86%;height:14px}.article-shell{padding:74px 0 72px}.article-head{max-width:690px}.article-head h1{margin:0;font-size:40px;line-height:1.28;font-weight:580;letter-spacing:-.04em}.article-reading{margin:12px 0 0;color:#999;font-size:12px}.article-line{height:1px;margin:38px 0;background:var(--line)}.article-content{font-size:16px;line-height:2;color:#313131;word-break:break-word}.article-content>*:first-child{margin-top:0}.article-content h2,.article-content h3{margin:2.25em 0 .8em;line-height:1.4;letter-spacing:-.02em}.article-content h2{font-size:25px}.article-content h3{font-size:20px}.article-content p,.article-content ul,.article-content ol,.article-content blockquote{margin:0 0 1.45em}.article-content a{color:#111;text-decoration:underline;text-decoration-color:#d2d2d2;text-underline-offset:3px}.article-content blockquote{margin-left:0;padding:2px 0 2px 18px;border-left:2px solid #222;color:#666}.article-content pre{overflow:auto;padding:18px;border-radius:10px;background:#161616;color:#efefef;font-size:13px;line-height:1.65}.article-content code{padding:.16em .36em;border-radius:4px;background:#f3f3f3;font-size:.88em}.article-content pre code{padding:0;background:transparent}.image-frame{position:relative;display:block;overflow:hidden;margin:1.8em 0;border-radius:10px;background:#f5f5f5}.image-frame img{position:relative;z-index:1;display:block;width:100%;height:auto;opacity:0;transition:opacity .38s ease}.image-frame img.is-loaded{opacity:1}.image-shimmer{position:absolute;inset:0;background:linear-gradient(100deg,#f1f1f1 20%,#fafafa 45%,#f1f1f1 70%);background-size:200% 100%;animation:shimmer 1.25s infinite}.image-frame:has(img.is-loaded) .image-shimmer{display:none}.article-foot{margin-top:44px}.article-tags{font-size:12px;color:#777}.article-tags span{margin-right:8px;color:#aaa}.article-tags a{display:inline-block;margin:0 6px 6px 0;padding:2px 8px;border:1px solid #e7e7e7;border-radius:99px;text-decoration:none}.article-end{margin:46px 0 0;color:#aaa;font:italic 15px Georgia,serif}.near-posts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:60px 0 0;padding-top:24px;border-top:1px solid var(--line)}.near-posts div:last-child{text-align:right}.near-posts span{display:block;margin-bottom:4px;color:#aaa;font-size:11px}.near-posts a{font-size:13px}.comments{margin-top:62px;padding-top:30px;border-top:1px solid var(--line)}.comments h2{margin:0 0 18px;font-size:18px;font-weight:600}.comment-list{margin:0;padding:0;list-style:none}.comment{margin:0 0 16px}.comment-child{margin-left:35px}.comment-card{display:flex;gap:12px;padding:16px;border-radius:10px;background:#fafafa}.comment-avatar{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#e9e9e9;color:#777;font-size:12px}.comment-body{min-width:0;flex:1}.comment-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px}.comment-head time{color:#aaa;font-size:11px}.comment-text{margin-top:7px;font-size:13px;line-height:1.75}.comment-reply{margin-top:7px;font-size:11px;color:#888}.respond{margin-top:34px}.respond label{display:block;margin:0 0 14px;color:#666;font-size:12px}.respond input,.respond textarea{display:block;width:100%;margin-top:6px;padding:10px 11px;border:1px solid #e4e4e4;border-radius:8px;outline:0;background:#fff;color:#222;transition:border-color .2s}.respond input:focus,.respond textarea:focus{border-color:#aaa}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary-button{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:8px;padding:10px 14px;background:#222;color:#fff;font-size:13px}.primary-button:hover{background:#444}.cancel-reply{font-size:12px}.login-note,.comments-closed{font-size:13px;color:#888}.empty-state{padding:58px 0;text-align:center}.empty-state h2{font-size:20px}.empty-state p{color:#888;font-size:14px}.empty-state a{font-size:13px;text-decoration:underline}.site-footer{padding:30px 0;border-top:1px solid var(--line);color:#999;font-size:12px}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer-inner p{margin:0}.to-top{position:fixed;right:22px;bottom:22px;width:36px;height:36px;border:1px solid #e6e6e6;border-radius:50%;background:#fff;color:#777;box-shadow:0 5px 16px rgba(0,0,0,.06);opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s ease}.to-top.is-visible{opacity:1;pointer-events:auto;transform:none}@keyframes shimmer{to{background-position:-200% 0}}@media (min-width:768px) and (max-width:1024px){:root{--page:min(720px,calc(100% - 64px))}.listing-shell,.article-shell{padding-top:62px}.article-head h1{font-size:36px}.post-card h2{font-size:21px}}@media (max-width:767px){:root{--page:calc(100% - 40px);--header-h:66px}.site-header{background:#fff}.site-bar{width:var(--page)}.brand{font-size:15px}.header-actions{gap:9px}.search-form{width:34px}.search-form:focus-within{width:142px}.search-form input{padding-left:10px;opacity:0}.search-form:focus-within input{opacity:1}.site-nav{position:absolute;right:0;top:56px;display:none;min-width:150px;padding:7px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 15px 30px rgba(0,0,0,.08)}.site-nav.is-open{display:block}.site-nav>a,.site-nav .category-trigger{display:block;width:100%;padding:9px;text-align:left}.category-menu{position:static;display:none;width:100%;box-shadow:none;border:0;padding:0 0 0 8px;opacity:1;visibility:visible;transform:none}.category-menu.is-open{display:block}.menu-toggle{position:relative;display:block;width:28px;height:28px;border:0;background:transparent}.menu-toggle i{position:absolute;left:6px;width:16px;height:1px;background:#555;transition:.2s}.menu-toggle i:first-child{top:10px}.menu-toggle i:last-child{top:16px}.menu-toggle.is-open i:first-child{top:13px;transform:rotate(45deg)}.menu-toggle.is-open i:last-child{top:13px;transform:rotate(-45deg)}.listing-shell{padding:48px 0}.intro-block{margin-bottom:36px}.intro-block h1{font-size:23px}.post-card{padding:25px 0}.post-card h2{font-size:18px}.post-excerpt{font-size:13px}.article-shell{padding:48px 0 56px}.article-head h1{font-size:30px}.article-line{margin:28px 0}.article-content{font-size:15px;line-height:1.95}.article-content h2{font-size:22px}.near-posts{grid-template-columns:1fr;margin-top:45px}.near-posts div:last-child{text-align:left}.form-grid{grid-template-columns:1fr}.comment-child{margin-left:14px}.comment-card{padding:13px}.footer-inner{display:block}.footer-inner p+p{margin-top:4px}.to-top{right:16px;bottom:16px}}@media (max-width:850px) and (orientation:landscape){:root{--header-h:58px}.listing-shell,.article-shell{padding-top:38px}.site-nav{top:50px}} .not-found-search{display:flex;justify-content:center;gap:10px;margin-top:25px}.not-found-search input{width:min(240px,60vw);padding:10px 12px;border:1px solid #ddd;border-radius:8px;outline:0}.not-found-search input:focus{border-color:#aaa}@media(max-width:420px){.not-found-search{flex-direction:column;align-items:center}.not-found-search input{width:100%}} @media (min-width:1025px){ .header-actions{gap:15px;transition:gap .45s var(--ease)} .search-form{flex:0 0 116px;transition:width .45s var(--ease),flex-basis .45s var(--ease)} .site-nav{min-width:0;max-width:300px;overflow:hidden;white-space:nowrap;transition:max-width .45s var(--ease),opacity .25s ease,transform .45s var(--ease),visibility .45s step-end} .header-actions.is-search-active{gap:0} .header-actions.is-search-active .search-form{width:348px;flex-basis:348px} .header-actions.is-search-active .site-nav{max-width:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(8px);transition: max-width .45s var(--ease),opacity .2s ease,transform .45s var(--ease),visibility .45s step-start} } /* Stable desktop search interaction: preserve the original left edge and never reflow content. */ .post-card:hover{transform:none} @media (min-width:1025px){ .header-actions.search-layout-ready{position:relative;display:block;width:var(--header-actions-width);height:31px} .header-actions.search-layout-ready .search-form{position:absolute;left:0;top:0;z-index:2;width:116px;flex:none;transform:none} .header-actions.search-layout-ready .site-nav{position:absolute;left:var(--nav-offset);top:0;height:31px;max-width:none;overflow:visible;transform:none} .header-actions.search-layout-ready.is-search-active .search-form{left:0;width:var(--expanded-search-width);flex-basis:auto;transform:none} .header-actions.search-layout-ready.is-search-active .site-nav{left:var(--nav-offset);max-width:none;opacity:0;visibility:hidden;pointer-events:none;transform:none;transition:opacity .2s ease,visibility .45s step-start} } /* Category menu refinement. */ .category-trigger b{transition:transform .2s ease} #categoryTrigger[aria-expanded="true"] b{transform:rotate(225deg);margin-bottom:-1px} @media (min-width:1025px){ .header-actions.search-layout-ready .category-menu{top:calc(100% + 5px)} } /* Search, scroll header and mobile control refinement. */ .search-clear{font-size:0;line-height:0;display:block} .search-clear::before,.search-clear::after{pointer-events:none} .search-form.has-value .search-clear{display:block} .site-bar{transition:width .55s var(--ease)} @media (min-width:768px){ .site-header.is-scrolled{height:64px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.045)} .site-header.is-scrolled .site-bar{width:calc(100% - 44px)} } @media (max-width:767px){ .site-header.is-scrolled{height:var(--header-h);background:#fff;box-shadow:none} .header-actions.is-mobile-search-active{width:calc(100vw - 40px);gap:0} .header-actions.is-mobile-search-active .search-form{width:100%;flex:0 0 100%} .header-actions.is-mobile-search-active .search-form input{opacity:1;padding-left:12px} .header-actions.is-mobile-search-active .menu-toggle,.header-actions.is-mobile-search-active .site-nav{display:none} .site-nav .category-trigger{min-height:40px} .site-nav .category-menu{margin-top:2px;padding-left:0} .site-nav .category-menu a{min-height:40px;display:flex;align-items:center} } /* Light / dark theme switcher. */ .brand-group{display:flex;align-items:center;gap:7px;min-width:0} .theme-toggle{position:relative;width:25px;height:25px;border:0;border-radius:50%;padding:0;background:transparent;color:#777;transition:color .2s ease,background .2s ease;flex:0 0 25px} .theme-toggle:hover{color:#222;background:#f2f2f2} .theme-toggle:focus-visible{outline:2px solid #9b9b9b;outline-offset:2px} .theme-icon{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;line-height:1;transition:opacity .22s ease,transform .28s var(--ease)} .theme-icon-sun{opacity:0;transform:rotate(-45deg) scale(.65)} .theme-icon-moon{opacity:1;transform:rotate(0) scale(1)} html.theme-dark{color-scheme:dark;--ink:#ededed;--muted:#a8a8a8;--line:#303030;--soft:#1d1d1d;background:#121212} html.theme-dark body{background:#121212;color:#ededed} html.theme-dark .theme-icon-moon{opacity:0;transform:rotate(45deg) scale(.65)} html.theme-dark .theme-icon-sun{opacity:1;transform:rotate(0) scale(1)} html.theme-dark .theme-toggle{color:#d6d6d6} html.theme-dark .theme-toggle:hover{color:#fff;background:#242424} html.theme-dark .site-header{background:linear-gradient(180deg,#121212 68%,rgba(18,18,18,0))} html.theme-dark .site-header.is-scrolled{background:rgba(18,18,18,.94);box-shadow:0 1px 0 rgba(255,255,255,.09)} html.theme-dark .brand,html.theme-dark .site-nav .is-current,html.theme-dark .site-nav a:hover,html.theme-dark .category-trigger:hover{color:#fff} html.theme-dark .site-nav,html.theme-dark .category-trigger{color:#b9b9b9} html.theme-dark .search-form input{border-color:#3a3a3a;background:#1b1b1b;color:#ededed} html.theme-dark .search-form input::placeholder{color:#838383} html.theme-dark .search-form input:focus{border-color:#696969;box-shadow:0 0 0 3px rgba(255,255,255,.05)} html.theme-dark .search-submit,html.theme-dark .search-clear{color:#aaa} html.theme-dark .category-menu,html.theme-dark .site-nav.is-open{border-color:#383838;background:#1a1a1a;box-shadow:0 15px 30px rgba(0,0,0,.3)} html.theme-dark .category-menu a{color:#bcbcbc} html.theme-dark .category-menu a:hover{background:#272727;color:#fff} html.theme-dark .post-list,html.theme-dark .post-card,html.theme-dark .article-line,html.theme-dark .comments,html.theme-dark .site-footer{border-color:#303030} html.theme-dark .post-card h2 a:hover{color:#c9c9c9} html.theme-dark .post-excerpt,html.theme-dark .article-content{color:#c9c9c9} html.theme-dark .post-meta,html.theme-dark .article-reading,html.theme-dark .article-tags,html.theme-dark .article-end,html.theme-dark .site-footer{color:#999} html.theme-dark .article-content a{color:#f2f2f2;text-decoration-color:#555} html.theme-dark .article-content blockquote{border-color:#c8c8c8;color:#aaa} html.theme-dark .article-content pre{background:#1c1c1c;color:#e5e5e5} html.theme-dark .article-content code{background:#262626;color:#e9e9e9} html.theme-dark .image-frame{background:#202020} html.theme-dark .image-shimmer{background:linear-gradient(100deg,#202020 20%,#2a2a2a 45%,#202020 70%)} html.theme-dark .respond label{color:#b5b5b5} html.theme-dark .respond input,html.theme-dark .respond textarea{border-color:#404040;background:#1a1a1a;color:#eee} html.theme-dark .respond input:focus,html.theme-dark .respond textarea:focus{border-color:#777} html.theme-dark .primary-button{background:#ededed;color:#181818} html.theme-dark .primary-button:hover{background:#fff} html.theme-dark .to-top{border-color:#3c3c3c;background:#1d1d1d;color:#c9c9c9;box-shadow:0 5px 16px rgba(0,0,0,.3)} html.theme-dark .skeleton-post i,html.theme-dark .skeleton-post b,html.theme-dark .skeleton-post em{background:linear-gradient(90deg,#202020 25%,#2a2a2a 37%,#202020 63%)} @media (max-width:767px){ .brand-group{gap:5px} .theme-toggle{width:24px;height:24px;flex-basis:24px} .theme-icon{font-size:15px} } /* Transparent side header with automatic content protection. */ .site-header{transition:height .3s var(--ease),background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease} @media (min-width:768px){ .site-header.is-scrolled{background:transparent;backdrop-filter:none;box-shadow:none} .site-header.is-scrolled.has-content-overlap{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.045)} html.theme-dark .site-header.is-scrolled{background:transparent;backdrop-filter:none;box-shadow:none} html.theme-dark .site-header.is-scrolled.has-content-overlap{background:rgba(18,18,18,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.09)} } /* v1.0.9 · 统一、舒缓的日夜切换与开放式 SVG 图标。 */ .theme-button{position:relative;width:28px;height:28px;padding:0;border:0;outline:0;display:flex;align-items:center;justify-content:center;background:transparent;color:#777;border-radius:0;cursor:pointer;flex:0 0 28px;transition:color .8s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1)} .theme-button:hover{color:#222;background:transparent;transform:translateY(-1px)} .theme-button:active{transform:scale(.92)} .theme-button:focus-visible{outline:2px solid #9b9b9b;outline-offset:3px} /* 覆盖旧文字图标布局，确保新 SVG 保持参考尺寸与居中位置。 */ .theme-button .theme-icon{position:static;inset:auto;display:block;width:19px;height:19px;overflow:visible;font-size:initial;line-height:normal;transition:none} .theme-button .sun{transform-box:fill-box;transform-origin:center;opacity:1;transform:scale(1) rotate(0deg);transition:opacity .7s ease,transform 1.05s cubic-bezier(.22,1,.36,1)} .theme-button .sun-core{fill:none;stroke:currentColor;stroke-width:1.25} .theme-button .sun-rays{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round} .theme-button .moon{transform-box:fill-box;transform-origin:center;opacity:0;transform:translate(2px,-1px) scale(.65) rotate(-25deg);transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,1,.36,1)} .theme-button .moon path{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round} html.theme-dark .theme-button{color:#b8b8b8} html.theme-dark .theme-button:hover{color:#f4f4f4;background:transparent} html.theme-dark .theme-button .sun{opacity:0;transform:scale(.45) rotate(70deg)} html.theme-dark .theme-button .moon{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)} .theme-button.theme-click .theme-icon{animation:themePulse .78s cubic-bezier(.22,1,.36,1)} @keyframes themePulse{0%{transform:scale(1)}45%{transform:scale(.9)}100%{transform:scale(1)}} /* 只在用户点击时启用，避免首屏加载出现颜色闪烁。 */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after{ transition-property:background-color,background,color,border-color,box-shadow,fill,stroke; transition-duration:1.25s; transition-timing-function:cubic-bezier(.22,1,.36,1); } /* 页头渐变和遮罩与页面正文同速，避免首页切换时出现分层跳变。 */ html.theme-transitioning .site-header{transition-property:height,background,background-color,box-shadow,backdrop-filter,color,border-color;transition-duration:1.25s;transition-timing-function:cubic-bezier(.22,1,.36,1)} @media (max-width:767px){.theme-button{width:28px;height:28px;flex-basis:28px}} /* v1.0.12 · 常态页头与正文使用同一底色；仅真实遮挡文字时显示保护层。 */ .site-header{isolation:isolate;background:transparent!important} .site-bar{z-index:1} .site-header::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:transparent;opacity:0;transition:opacity .25s ease,background-color .25s ease,backdrop-filter .25s ease} .site-header::after{content:none} html.theme-transitioning .site-header::before{transition:opacity 1.25s cubic-bezier(.22,1,.36,1),background-color 1.25s cubic-bezier(.22,1,.36,1),backdrop-filter 1.25s cubic-bezier(.22,1,.36,1)} @media (min-width:768px){ .site-header.is-scrolled::before{opacity:0;background:transparent;backdrop-filter:none} .site-header.is-scrolled.has-content-overlap::before{background:rgba(255,255,255,.94);opacity:1;backdrop-filter:blur(10px)} html.theme-dark .site-header.is-scrolled.has-content-overlap::before{background:rgba(18,18,18,.94);opacity:1;backdrop-filter:blur(10px)} } @media (max-width:767px){ .site-header::before{background:transparent;opacity:0} } /* v1.0.8 · 移动端搜索、展开控件和留言折叠。 */ .category-trigger b{position:relative;width:12px;height:12px;margin:0 0 0 6px;border:0;vertical-align:middle;transform:none!important} .category-trigger b::before,.category-trigger b::after{content:"";position:absolute;top:50%;width:7px;height:1.2px;background:currentColor;border-radius:99px;transition:transform .28s cubic-bezier(.22,1,.36,1)} .category-trigger b::before{left:0;transform:translateY(-50%) rotate(45deg)} .category-trigger b::after{right:0;transform:translateY(-50%) rotate(-45deg)} #categoryTrigger[aria-expanded="true"] b{margin:0 0 0 6px;transform:none!important} #categoryTrigger[aria-expanded="true"] b::before{transform:translateY(-50%) rotate(-45deg)} #categoryTrigger[aria-expanded="true"] b::after{transform:translateY(-50%) rotate(45deg)} .comment-toggle{width:100%;padding:0;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:18px;font-weight:600;line-height:1.4;cursor:pointer} .comment-toggle:hover{color:#666} .comment-toggle:focus-visible{outline:2px solid #9b9b9b;outline-offset:5px;border-radius:4px} .comment-toggle-arrow{position:relative;display:block;width:18px;height:18px;flex:0 0 18px} .comment-toggle-arrow::before,.comment-toggle-arrow::after{content:"";position:absolute;top:50%;width:9px;height:1.35px;background:currentColor;border-radius:99px;transition:transform .3s cubic-bezier(.22,1,.36,1)} .comment-toggle-arrow::before{left:1px;transform:translateY(-50%) rotate(45deg)} .comment-toggle-arrow::after{right:1px;transform:translateY(-50%) rotate(-45deg)} .respond.is-open .comment-toggle-arrow::before{transform:translateY(-50%) rotate(-45deg)} .respond.is-open .comment-toggle-arrow::after{transform:translateY(-50%) rotate(45deg)} .comment-form-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .36s cubic-bezier(.22,1,.36,1),opacity .22s ease,margin-top .36s cubic-bezier(.22,1,.36,1)} .comment-form-panel>form{min-height:0;overflow:hidden} .respond.is-open .comment-form-panel{grid-template-rows:1fr;opacity:1;margin-top:18px} html.theme-dark .comment-toggle:hover{color:#d6d6d6} /* v1.0.17 · 移动端使用独立搜索层，不再依赖裁切或二次触碰。 */ @media (max-width:767px){ .header-actions{position:static;width:28px;height:31px;gap:0} .header-actions .search-form,.header-actions .search-form:focus-within{position:absolute;z-index:5;right:37px;top:50%;width:34px;height:31px;flex:none;transform:translateY(-50%);clip-path:none;transition:none} .header-actions.is-mobile-search-active{position:static;width:28px;gap:0} .header-actions.is-mobile-search-active .search-form,.header-actions.is-mobile-search-active .search-form:focus-within{left:0;right:0;width:auto;height:31px;flex:none;clip-path:none;opacity:1;transition:none} .header-actions.is-mobile-search-active .search-form input{opacity:1;padding-left:12px} .header-actions.is-mobile-search-closing .search-form,.header-actions.is-mobile-search-closing .search-form:focus-within{left:auto;right:37px;width:34px;opacity:1;transition:none!important;-webkit-transition:none!important} .header-actions.is-mobile-search-active .menu-toggle,.header-actions.is-mobile-search-active .site-nav{display:none} .site-bar:has(.header-actions.is-mobile-search-active) .brand-group{opacity:0;pointer-events:none;transition:opacity .12s ease} .comment-toggle{font-size:17px} } /* v1.0.21 · 站内跳转的向右发光加载条与轻柔页面过渡。 */ .page-loader{position:fixed;z-index:1000;top:0;left:0;width:100%;height:3px;pointer-events:none;opacity:0;transition:opacity .18s ease} .page-loader span{display:block;position:relative;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#6bd7ff 0%,#b3f1ff 46%,#c6b5ff 100%);box-shadow:0 0 7px rgba(107,215,255,.78),0 0 16px rgba(157,185,255,.48);transition:transform .72s cubic-bezier(.2,.8,.25,1)} .page-loader span::after{content:"";position:absolute;top:50%;right:-18px;width:52px;height:10px;transform:translateY(-50%);background:radial-gradient(ellipse at left,rgba(255,255,255,.98),rgba(169,234,255,.66) 34%,rgba(169,234,255,0) 74%);filter:blur(2px)} .page-loader.is-active{opacity:1} .page-loader.is-active span{transform:scaleX(.72)} .page-loader.is-completing span{transform:scaleX(1);transition-duration:.3s} body.page-is-entering .site-main,body.page-is-entering .site-footer{opacity:0;transform:translateY(5px)} .site-main,.site-footer{transition:opacity .24s ease,transform .28s cubic-bezier(.22,1,.36,1)} body.page-is-leaving .site-main,body.page-is-leaving .site-footer{opacity:0;transform:translateY(6px);pointer-events:none} html.theme-dark .page-loader span{background:linear-gradient(90deg,#79dfff 0%,#c5f5ff 48%,#d4c7ff 100%);box-shadow:0 0 8px rgba(121,223,255,.9),0 0 20px rgba(155,191,255,.58)} @media (prefers-reduced-motion:reduce){.page-loader,.page-loader span,.site-main,.site-footer{transition-duration:.01ms!important}.page-loader span::after{display:none}} /* v1.0.23 · 首页文章首图为横向缩略图，并统一所有卡片的纵向节奏。 */ .post-list>.post-card{min-height:192px} .post-card.has-thumbnail{display:grid;grid-template-columns:minmax(0,1fr) 168px;align-items:center;gap:24px} .post-card.has-thumbnail .post-card-copy{min-width:0} .post-thumbnail{display:block;position:relative;width:168px;aspect-ratio:3 / 2;overflow:hidden;border-radius:14px} .post-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;opacity:.96;transition:transform .5s var(--ease),opacity .3s ease} .post-card.has-thumbnail:hover .post-thumbnail img{transform:scale(1.045);opacity:1} @media (min-width:768px) and (max-width:1024px){.post-list>.post-card{min-height:160px}.post-card.has-thumbnail{grid-template-columns:minmax(0,1fr) 150px;gap:22px}.post-thumbnail{width:150px}} @media (max-width:767px){.post-list>.post-card{min-height:142px}.post-card.has-thumbnail{grid-template-columns:minmax(0,1fr) 102px;gap:16px;align-items:center}.post-thumbnail{width:102px;border-radius:11px}.post-card.has-thumbnail .post-excerpt{margin-bottom:0}} /* v1.0.26 · 略微收紧首页文章列表的纵向节奏。 */ .post-card{padding:27px 0 25px} .post-list>.post-card{min-height:184px} .skeleton-post{padding:27px 0 25px} @media (min-width:768px) and (max-width:1024px){.post-list>.post-card{min-height:154px}} @media (max-width:767px){.post-card{padding:23px 0}.post-list>.post-card{min-height:136px}.skeleton-post{padding:23px 0}} /* v1.0.27 · 放大首页文章预览图，强化点击前的视觉预览。 */ .post-card.has-thumbnail{grid-template-columns:minmax(0,1fr) 198px;gap:26px} .post-thumbnail{width:198px} @media (min-width:768px) and (max-width:1024px){.post-card.has-thumbnail{grid-template-columns:minmax(0,1fr) 172px;gap:24px}.post-thumbnail{width:172px}} @media (max-width:767px){.post-card.has-thumbnail{grid-template-columns:minmax(0,1fr) 118px;gap:17px}.post-thumbnail{width:118px}}