@import url("/themes/theme-kaze/assets/fonts/noto-serif-sc.css");
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/themes/theme-kaze/assets/inter-latin-400-normal-C38fXH4l.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/themes/theme-kaze/assets/inter-latin-500-normal-Cerq10X2.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/themes/theme-kaze/assets/inter-latin-600-normal-LgqL8muc.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/themes/theme-kaze/assets/inter-latin-700-normal-Yt3aPRUw.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/themes/theme-kaze/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/themes/theme-kaze/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/themes/theme-kaze/assets/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary:var(--color-primary);--color-primary-light:var(--color-primary-light);--color-bg:var(--color-bg);--color-bg-secondary:#fff;--color-title:#1f2937;--color-body:var(--color-body);--color-border:var(--color-border);--color-border-dark:var(--color-border-dark);--color-white:#fff;--color-success:#10b981;--color-success-ring:#10b9812e;--color-danger:var(--color-danger);--font-family:"Inter", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--max-width:1200px;--header-height:64px}@media (width>=1440px){:root{--max-width:1320px}}@media (width>=1920px){:root{--max-width:1480px}}html.dark{--color-primary:var(--color-primary);--color-primary-light:color-mix(in srgb,var(--color-primary) 15%,transparent);--color-bg:#111827;--color-bg-secondary:#1e293b;--color-title:var(--color-bg);--color-body:var(--color-danger);--color-border:#1f2937;--color-border-dark:#374151;--color-white:#1f2937;--color-success:#34d399;--color-success-ring:#34d3992e;--color-danger:var(--color-body)}html{scroll-behavior:smooth;max-width:100vw;overflow-x:hidden}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-title);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}img{max-width:100%;display:block}ul,ol{list-style:none}.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}.site-header{z-index:1000;height:var(--header-height);-webkit-backdrop-filter:blur(24px);background-color:#ffffffb8;border-bottom:1px solid #0000000f;position:fixed;top:0;left:0;right:0}.site-header .container{justify-content:space-between;align-items:center;height:100%;display:flex}.site-logo{color:var(--color-title);align-items:center;gap:8px;display:flex}.site-logo-image{object-fit:contain;width:auto;height:32px}.site-logo-icon{background:radial-gradient(circle at 30% 30%,var(--color-primary),var(--color-primary) 70%);border-radius:50%;flex-shrink:0;width:28px;height:28px;display:inline-block}.site-logo-text{letter-spacing:-.2px;font-size:18px;font-weight:700}.site-nav{align-items:center;display:flex}.site-nav nav ul{align-items:center;gap:4px;margin:0;padding:0;list-style:none;display:flex}.site-nav nav a{color:var(--color-body);padding:8px 12px;font-size:14px;font-weight:500;transition:color .2s;display:block;position:relative}.site-nav nav a:hover{color:var(--color-title)}.site-nav nav a.active{color:var(--color-title);font-weight:700}.site-nav nav a.active:after{content:"";background-color:var(--color-primary);border-radius:9999px;width:20px;height:2px;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.header-actions{align-items:center;gap:4px;margin-left:16px;display:flex}.header-actions button,.header-auth-btn{cursor:pointer;width:36px;height:36px;color:inherit;font-size:inherit;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;text-decoration:none;transition:background-color .2s;display:flex}.header-actions button:hover,.header-auth-btn:hover{background-color:var(--color-border)}.header-actions svg,.header-auth-btn svg{width:16px;height:16px;color:var(--color-title)}.header-auth-btn img{object-fit:cover;border-radius:50%;width:20px;height:20px}.header-user-wrap{position:relative}.header-user-menu{z-index:1050;opacity:0;visibility:hidden;pointer-events:none;background:#fff;border:1px solid var(--color-border-dark);border-radius:10px;min-width:150px;padding:4px;transition:opacity .15s,transform .15s,visibility .15s;position:fixed;transform:translateY(-4px);box-shadow:0 4px 16px #0000001a}.header-user-menu svg{width:14px;height:14px}.header-user-menu.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.header-user-menu-item{color:#374151;cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;font-family:inherit;font-size:13px;line-height:1.4;text-decoration:none;display:flex}.header-user-menu-item:hover{background:var(--color-border)}.header-user-menu-item svg{flex-shrink:0}.header-user-menu-logout{color:#dc2626}.header-user-menu-logout:hover{background:#fef2f2}html.dark .header-user-menu{background:#1e293b;border-color:#334155;box-shadow:0 4px 16px #0000004d}html.dark .header-user-menu-item{color:#e2e8f0}html.dark .header-user-menu-item:hover{background:#334155}html.dark .header-user-menu-logout{color:#f87171}html.dark .header-user-menu-logout:hover{background:#451a1a}.search-bar{z-index:200;-webkit-backdrop-filter:blur(4px);background:#00000080;display:none;position:fixed;inset:0}.search-bar.active{justify-content:center;align-items:flex-start;padding-top:15vh;display:flex}.search-bar-inner{background:var(--color-bg);border-radius:12px;width:100%;max-width:600px;margin:0 16px;overflow:hidden;box-shadow:0 20px 60px #0000004d}.search-bar-inner form{border-bottom:1px solid var(--color-border);align-items:center;gap:10px;padding:14px 18px;display:flex}.search-bar-inner form svg{width:18px;height:18px;color:var(--color-body);flex-shrink:0}.search-bar-inner input{font-size:15px;font-family:var(--font-family);color:var(--color-title);background:0 0;border:none;outline:none;flex:1}.search-bar-inner kbd{font-family:var(--font-family);background:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-body);border-radius:4px;padding:2px 6px;font-size:11px}.search-results{max-height:400px;overflow-y:auto}.search-result-empty{text-align:center;color:var(--color-body);padding:24px;font-size:14px}.search-result-item{border-bottom:1px solid var(--color-border);padding:12px 18px;text-decoration:none;transition:background .15s;display:block}.search-result-item:hover{background:var(--color-bg-secondary)}.search-result-item:last-child{border-bottom:none}.search-result-item-title{color:var(--color-title);margin-bottom:4px;font-size:14px;font-weight:600}.search-result-item-desc{color:var(--color-body);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.4;display:-webkit-box;overflow:hidden}.search-result-item-desc B{color:var(--color-primary);font-weight:600}.search-result-item-meta{color:var(--color-primary);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-size:11px}.search-bar input{border:1px solid var(--color-border-dark);background-color:var(--color-bg);width:100%;height:40px;font-size:14px;font-family:var(--font-family);border-radius:8px;outline:none;padding:0 12px}.header-actions .menu-toggle{display:none}@media (width>=769px){.header-actions .menu-toggle{display:none!important}.mobile-nav-drawer{display:none}}@media (width<=768px){.site-nav>nav{display:none}.container,.post-shell,.post-body,.article-content,.post-detail,.post-cover-wrapper,.page-content-wrapper,.links-page,.gear-page,.photography-page,.about-page,.moments-page{max-width:100%!important;overflow-x:hidden!important}.header-actions .menu-toggle{display:flex}.menu-toggle svg line{transform-origin:50%;transition:transform .3s,opacity .3s}.menu-toggle.active svg line:first-child{transform:translateY(6px)rotate(45deg)}.menu-toggle.active svg line:nth-child(2){opacity:0}.menu-toggle.active svg line:nth-child(3){transform:translateY(-6px)rotate(-45deg)}.mobile-nav-drawer{z-index:1010;-webkit-backdrop-filter:blur(24px);background:#fffffffa;width:240px;max-width:70vw;height:100vh;padding:80px 20px 24px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-4px 0 24px #00000014}.mobile-nav-drawer.mobile-open{transform:translate(0)}.mobile-nav-drawer ul{flex-direction:column;gap:0;margin:0;padding:0;list-style:none;display:flex}.mobile-nav-drawer a{color:var(--color-body);border-bottom:1px solid var(--color-border);padding:14px 0;font-size:16px;font-weight:500;transition:color .2s;display:block;position:relative}.mobile-nav-drawer a:last-child{border-bottom:none}.mobile-nav-drawer a:hover,.mobile-nav-drawer a.active{color:var(--color-primary)}.site-logo-text{font-size:16px}.header-actions{gap:0;margin-left:4px}.header-actions button,.header-auth-btn{width:36px;height:36px}.header-actions button svg,.header-auth-btn svg{width:18px;height:18px}.site-logo-image{height:28px}.site-logo-text{text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:15px;overflow:hidden}.search-bar{padding:0}}.site-main{padding-top:var(--header-height);max-width:100vw;overflow-x:hidden}.hero{max-width:var(--max-width);margin:0 auto;padding:0 24px;position:relative}.hero-inner{border-radius:16px;height:clamp(440px,72vh,820px);position:relative;overflow:hidden}.hero-slide{opacity:0;transition:opacity .7s;position:absolute;inset:0}.hero-slide.active{opacity:1}.hero-image{object-fit:cover;width:100%;height:100%}.hero-slide .hero-image{position:absolute;inset:0}.hero-overlay{background:linear-gradient(#fff0,#fff9);position:absolute;inset:0}html.dark .hero-overlay{background:linear-gradient(#11182700,#11182780)}.hero-content{text-align:center;z-index:2;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:0 32px;display:flex;position:relative}.hero-badge{color:#fff;letter-spacing:.6px;text-transform:uppercase;background-color:color-mix(in srgb,var(--color-primary) 95%,transparent);border-radius:9999px;margin-bottom:16px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.hero-title{color:#fff;text-shadow:0 2px 12px #00000073;max-width:720px;font-size:44px;font-weight:700;line-height:1.15}.hero-subtitle{color:var(--color-border);text-shadow:0 1px 8px #0006;max-width:560px;margin-top:12px;font-size:16px}.hero-cta{color:#1f2937;background-color:#fff;border:1px solid #0000000f;border-radius:8px;align-items:center;gap:8px;max-width:500px;height:40px;margin-top:20px;padding:0 16px;font-size:13px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 4px 16px #0000002e}.hero-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00000038}.hero-cta-label{color:var(--color-primary);white-space:nowrap}.hero-cta-divider{color:var(--color-border-dark)}.hero-cta-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.hero-cta svg{color:var(--color-primary);flex-shrink:0}.hero-nav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;z-index:3;color:#1f2937;opacity:0;background-color:#ffffffb3;border:1px solid #0000000f;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:opacity .25s,background-color .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.hero-inner:hover .hero-nav{opacity:1}.hero-nav:hover{background-color:#ffffffe6}.hero-prev{left:16px}.hero-next{right:16px}.hero-dots{z-index:3;gap:8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.hero-dot{background-color:#1f29374d;border-radius:9999px;width:8px;height:6px;transition:all .3s}.hero-dot.active{background-color:var(--color-primary);width:24px}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;display:flex}.section-title{color:var(--color-title);font-size:24px;font-weight:700}.section-subtitle{color:var(--color-body);margin-top:4px}.filter-pills{flex-wrap:wrap;gap:8px;display:flex}.filter-pill{border:1px solid var(--color-border-dark);background-color:var(--color-white);color:var(--color-body);cursor:pointer;border-radius:9999px;padding:6px 14px;font-size:13px;font-weight:500;transition:all .2s;display:inline-block}.filter-pill:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-pill.active{background-color:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}.post-grid{grid-template-columns:1fr;gap:24px;display:grid}@media (width>=768px){.post-grid{grid-template-columns:repeat(2,1fr)}}.post-grid-list{grid-template-columns:1fr;gap:16px}.post-grid-list .post-card{border-radius:12px;flex-direction:row;display:flex}.post-grid-list .post-card:hover{transform:translate(4px)}.post-grid-list .post-card>a{border-radius:12px;flex-shrink:0;width:280px;overflow:hidden}.post-grid-list .post-card-cover{aspect-ratio:auto;border-radius:0;height:200px}.post-grid-list .post-card-cover img{object-fit:cover;width:100%;height:200px}.post-grid-list .post-card-body{flex:1;justify-content:center;min-height:200px;padding:16px 24px}.post-grid-list .post-card>a:empty{display:none}.post-grid-list .post-card>a:not(:empty)+.post-card-body{min-height:200px}.post-grid-list .post-card-title{-webkit-line-clamp:1;font-size:17px}.post-grid-list .post-card-excerpt{-webkit-line-clamp:2}@media (width<=640px){.post-grid-list .post-card{flex-direction:column}.post-grid-list .post-card>a{border-radius:12px 12px 0 0;width:100%}.post-grid-list .post-card-cover{aspect-ratio:16/9;border-radius:0;height:auto}.post-grid-list .post-card-cover img{height:100%}.post-grid-list .post-card-body{min-height:0;padding:14px 16px 16px}.post-grid-list .post-card-title{-webkit-line-clamp:2;font-size:16px}.post-grid-list .post-card-excerpt{-webkit-line-clamp:2;font-size:13px}}html.dark .post-grid-list .post-card{background-color:var(--color-white);border-color:var(--color-border-dark)}.post-card{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:12px;transition:all .3s;overflow:hidden;box-shadow:0 1px 2px #1018280a}.post-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #10182814}.post-card-cover{aspect-ratio:16/9;position:relative;overflow:hidden}.post-card-cover img{object-fit:cover;width:100%;height:100%;transition:transform .5s}.post-card:hover .post-card-cover img{transform:scale(1.05)}.post-card-category{background-color:var(--color-primary-soft,#dbeafe);color:var(--color-primary,var(--color-primary));letter-spacing:.3px;white-space:nowrap;border-radius:999px;align-items:center;padding:3px 10px;font-size:11px;font-weight:600;line-height:1.4;display:inline-flex}html.dark .post-card-category{color:var(--color-primary);background-color:var(--color-primary-light)}.post-card-body{flex-direction:column;gap:12px;padding:20px;display:flex}.post-card-title{color:var(--color-title);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:20px;font-weight:700;line-height:1.35;display:-webkit-box;overflow:hidden}.post-card-title a{color:inherit}.post-card-excerpt{color:var(--color-body);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;line-height:1.6;display:-webkit-box;overflow:hidden}.post-card-meta{color:var(--color-body);flex-wrap:wrap;align-items:center;gap:16px;padding-top:8px;font-size:12px;display:flex}.post-card-meta span{align-items:center;gap:6px;display:flex}.post-card-meta svg{width:12px;height:12px}.recent-posts{max-width:var(--max-width);margin:64px auto 0;padding:0 24px}.home-layout{align-items:flex-start;gap:32px;display:flex}.home-main{flex:1;min-width:0}.sidebar{width:300px;top:calc(var(--header-height) + 24px);flex-direction:column;flex-shrink:0;gap:20px;display:flex;position:sticky}.sidebar-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;padding:20px}.sidebar-card-title{color:var(--color-body);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;font-size:13px;font-weight:600}.sidebar-author{text-align:center;padding:24px 20px}.sidebar-author-avatar{object-fit:cover;border:2px solid var(--color-border);border-radius:50%;width:72px;height:72px;margin:0 auto 12px;display:block}.sidebar-author-name{color:var(--color-title);margin-bottom:4px;font-size:16px;font-weight:700}.sidebar-author-bio{color:var(--color-body);font-size:13px;line-height:1.5}.sidebar-author-social{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;display:flex}.sidebar-author-social a{width:34px;height:34px;color:var(--color-body);border:1px solid var(--color-border);background-color:#0000;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;transition:all .18s;display:inline-flex}.sidebar-author-social a:hover{color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-2px)}.sidebar-author-social a svg{width:16px;height:16px}.sidebar-categories-list{margin:0;padding:0;list-style:none}.sidebar-categories-list li{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.sidebar-categories-list li:last-child{border-bottom:none}.sidebar-categories-list a{color:var(--color-title);font-size:14px;text-decoration:none;transition:color .15s}.sidebar-categories-list a:hover{color:var(--color-primary)}.sidebar-categories-count{color:var(--color-body);background:var(--color-bg-secondary);border-radius:10px;padding:2px 8px;font-size:12px}.sidebar-tags-list{flex-wrap:wrap;gap:8px;display:flex}.sidebar-tag-pill{background:var(--color-bg-secondary);color:var(--color-body);border-radius:6px;padding:4px 10px;font-size:12px;text-decoration:none;transition:all .15s;display:inline-block}.sidebar-tag-pill:hover{background:var(--color-primary-light);color:var(--color-primary)}.sidebar-recent-list{margin:0;padding:0;list-style:none}.sidebar-recent-item{border-bottom:1px solid var(--color-border);padding:8px 0;text-decoration:none;transition:color .15s;display:block}.sidebar-recent-item:last-child{border-bottom:none}.sidebar-recent-title{color:var(--color-title);white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.4;display:block;overflow:hidden}.sidebar-recent-item:hover .sidebar-recent-title{color:var(--color-primary)}.sidebar-recent-date{color:var(--color-body);margin-top:4px;font-size:11px}@media (width<=1023px){.sidebar{display:none}.home-layout{display:block}}@media (width>=768px) and (width<=1023px){.post-shell{padding:32px 32px 56px}.post-body{max-width:720px}.recent-posts,.hero{padding:0 32px}}html.dark .sidebar-card{background:var(--color-white)}html.dark .sidebar-author-social a{border-color:var(--color-border-dark)}html.dark .sidebar-tag-pill{background:var(--color-border)}html.dark .sidebar-tag-pill:hover{background:var(--color-primary-light)}html.dark .sidebar-categories-count{background:var(--color-border)}.home-content{padding-top:32px;padding-bottom:96px}.pagination{justify-content:center;align-items:center;gap:8px;padding:48px 0;display:flex}.pagination a,.pagination span{color:var(--color-body);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.pagination a{background:var(--color-bg);border:1px solid var(--color-border-dark);border-radius:8px;justify-content:center;align-items:center;min-width:40px;height:40px;text-decoration:none;transition:all .2s;display:inline-flex}.pagination a:hover{border-color:var(--color-primary);color:var(--color-primary)}.pagination a.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.pagination a.disabled,.pagination span.disabled{background:var(--color-bg);color:var(--color-border-dark);border:1px solid var(--color-border-dark);border-radius:8px;justify-content:center;align-items:center;min-width:40px;height:40px;display:inline-flex}.pagination .page-prev,.pagination .page-next{gap:4px;padding:0 16px}html.dark .pagination a{border-color:var(--color-border-dark);color:var(--color-body)}html.dark .pagination a:hover{border-color:var(--color-primary)}.photo-pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:48px 0;display:flex}.photo-pagination .page-prev,.photo-pagination .page-next{color:var(--color-body);background:var(--color-bg);cursor:pointer;border:1px solid var(--color-border-dark);border-radius:8px;align-items:center;gap:6px;height:40px;padding:0 16px;font-size:13px;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s,background .2s;display:inline-flex}.photo-pagination .page-prev:hover,.photo-pagination .page-next:hover{border-color:var(--color-primary);color:var(--color-primary)}.photo-pagination .page-numbers{align-items:center;gap:6px;margin:0 4px;display:inline-flex}.photo-pagination .page-btn{color:var(--color-body);background:var(--color-bg);font-variant-numeric:tabular-nums;border:1px solid var(--color-border-dark);border-radius:8px;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 8px;font-size:13px;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s,background .2s;display:inline-flex}.photo-pagination .page-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.photo-pagination .page-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.photo-pagination .page-ellipsis{color:var(--color-danger);justify-content:center;align-items:center;min-width:28px;height:40px;font-size:13px;display:inline-flex}.photo-pagination .page-prev[style*=not-allowed],.photo-pagination .page-next[style*=not-allowed]{color:var(--color-border-dark)!important;cursor:not-allowed!important;border-color:var(--color-border-dark)!important}.photo-pagination .page-prev[style*=not-allowed]:hover,.photo-pagination .page-next[style*=not-allowed]:hover{color:var(--color-border-dark)!important;border-color:var(--color-border-dark)!important}html.dark .photo-pagination .page-prev,html.dark .photo-pagination .page-next,html.dark .photo-pagination .page-btn{border-color:var(--color-border-dark);color:var(--color-body);background:#1f2937}html.dark .photo-pagination .page-prev:hover,html.dark .photo-pagination .page-next:hover,html.dark .photo-pagination .page-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}html.dark .photo-pagination .page-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}@media (width<=640px){.photo-pagination{gap:6px;padding:32px 0}.photo-pagination .page-prev,.photo-pagination .page-next{padding:0 12px;font-size:12px}.photo-pagination .page-btn{min-width:36px;height:36px;font-size:12px}}html.dark .pagination span.disabled{border-color:var(--color-border-dark);color:var(--color-border-dark)}.archive-page,.tags-page,.tag-page,.categories-page,.category-page,.author-page{max-width:var(--max-width);margin:0 auto;padding:48px 24px 96px}.archive-timeline{flex-direction:column;gap:32px;display:flex}.archive-group{border:1px solid var(--color-border-dark);background-color:var(--color-white);border-radius:12px;overflow:hidden}.archive-group-header{border-bottom:1px solid var(--color-border);background-color:var(--color-bg);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.archive-group-label{color:var(--color-title);font-size:16px;font-weight:700}.archive-group-count{color:var(--color-body);background-color:var(--color-border);border-radius:9999px;padding:2px 10px;font-size:12px;font-weight:600}.archive-posts{flex-direction:column;display:flex}.archive-post-item{color:var(--color-title);align-items:center;gap:16px;padding:14px 24px;text-decoration:none;transition:background-color .15s;display:flex}.archive-post-item+.archive-post-item{border-top:1px solid var(--color-border)}.archive-post-item:hover{background-color:var(--color-primary-light)}.archive-post-day{color:var(--color-primary);text-align:center;min-width:28px;font-size:13px;font-weight:600}.archive-post-title{font-size:15px;font-weight:500;line-height:1.4}.tags-cloud{flex-wrap:wrap;gap:12px;display:flex}.tag-pill{border:1px solid var(--color-border-dark);background-color:var(--color-white);color:var(--color-title);border-radius:9999px;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.tag-pill:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.tag-pill-count{color:var(--color-body);background-color:var(--color-border);border-radius:9999px;padding:1px 7px;font-size:11px;font-weight:600}.tag-pill:hover .tag-pill-count{background-color:var(--color-primary-light);color:var(--color-primary)}.tag-page-badge{color:var(--color-primary);background-color:var(--color-primary-light);text-transform:uppercase;letter-spacing:.5px;border-radius:6px;margin-bottom:8px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-block}.categories-grid{grid-template-columns:1fr;gap:20px;display:grid}@media (width>=640px){.categories-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.categories-grid{grid-template-columns:repeat(3,1fr)}}.category-card{border:1px solid var(--color-border-dark);background-color:var(--color-white);color:var(--color-title);border-radius:12px;flex-direction:column;gap:12px;padding:24px;text-decoration:none;transition:all .3s;display:flex}.category-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 8px 24px #1018280f}.category-card-header{justify-content:space-between;align-items:center;display:flex}.category-card-name{font-size:18px;font-weight:700;line-height:1.3}.category-card-count{color:var(--color-white);background-color:var(--color-primary);border-radius:8px;justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 8px;font-size:12px;font-weight:600;display:flex}.category-card-desc{color:var(--color-body);font-size:14px;line-height:1.5}.category-children{border-top:1px solid var(--color-border);flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px;display:flex}.category-child-link{color:var(--color-body);background-color:var(--color-border);border-radius:4px;align-items:center;gap:4px;padding:3px 8px;font-size:12px;text-decoration:none;transition:all .15s;display:inline-flex}.category-child-link:hover{background-color:var(--color-primary-light);color:var(--color-primary)}.category-child-count{font-size:10px;font-weight:600}.author-header{border:1px solid var(--color-border-dark);background-color:var(--color-white);border-radius:16px;align-items:flex-start;gap:24px;margin-bottom:40px;padding:32px;display:flex}.author-avatar{object-fit:cover;border:3px solid var(--color-primary);border-radius:50%;flex-shrink:0;width:96px;height:96px}.author-info{flex:1;min-width:0}.author-name{color:var(--color-title);font-size:28px;font-weight:700;line-height:1.2}.author-bio{color:var(--color-body);margin-top:8px;font-size:15px;line-height:1.6}.author-meta{color:var(--color-body);flex-wrap:wrap;align-items:center;gap:16px;margin-top:12px;font-size:13px;display:flex}.author-meta span{align-items:center;gap:6px;display:flex}.author-meta a{color:var(--color-primary);text-decoration:none}.author-meta a:hover{text-decoration:underline}.post-detail{background-color:#fff;max-width:100%;margin:0 auto;overflow-x:hidden}.reading-progress{top:var(--header-height);z-index:40;background-color:#0000;height:2px;position:fixed;left:0;right:0}.reading-progress-bar{background-color:var(--color-primary);width:0%;height:100%;transition:width 80ms linear}.post-cover-wrapper{max-width:var(--max-width);margin:0 auto;padding:24px 24px 0}.post-cover-wrapper>img,.post-cover{aspect-ratio:21/9;object-fit:cover;background-color:var(--color-border);border-radius:16px;width:100%;max-height:460px}.post-shell{max-width:var(--max-width);grid-template-columns:1fr;gap:32px;margin:0 auto;padding:40px 24px 64px;display:grid;overflow-x:hidden}@media (width>=1024px){.post-shell{grid-template-columns:240px minmax(0,1fr) 60px}}.post-actions-rail{z-index:40;padding:8px calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 8px);-webkit-backdrop-filter:blur(16px);background-color:#fffffff0;border-top:1px solid #0000000f;flex-direction:row;justify-content:space-around;align-items:center;gap:0;display:flex;position:fixed;bottom:0;left:0;right:0}.post-actions-rail .post-action-btn{position:relative}.post-actions-rail .post-action-count{background-color:var(--color-border-dark);min-width:16px;height:16px;color:var(--color-body);text-align:center;border-radius:8px;padding:0 4px;font-size:10px;line-height:16px;position:absolute;top:2px;right:-2px}@media (width<=1023px){.post-detail{padding-bottom:80px}}html.dark .post-actions-rail{background-color:#111827f0;border-top-color:#ffffff14}@media (width>=1024px){.post-actions-rail{-webkit-backdrop-filter:none;background-color:#0000;border-top:none;flex-direction:column;justify-content:flex-start;align-items:center;gap:8px;padding:0;display:flex;position:sticky;inset:112px auto auto}.post-actions-rail .post-action-count{min-width:0;height:auto;font-size:11px;line-height:inherit;background:0 0;padding:0;position:static}}.post-action-btn{cursor:pointer;color:#1f2937;background-color:#fff;border:1px solid var(--color-border-dark);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;text-decoration:none;transition:all .2s;display:flex}.post-action-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #00000014}.post-action-btn.share-btn.copied{border-color:var(--color-primary);color:var(--color-primary)}#toast-container{z-index:9999;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;top:24px;left:50%;transform:translate(-50%)}.toast-msg{color:#fff;opacity:0;pointer-events:auto;background:#1f2937;border-radius:8px;padding:10px 24px;font-size:14px;transition:all .3s;transform:translateY(-16px)}.toast-msg.show{opacity:1;transform:translateY(0)}html.dark .toast-msg{color:#1f2937;background:var(--color-bg)}.post-action-btn.like-btn.active{color:#f43f5e;border-color:#f43f5e}.post-action-btn.like-btn.active svg{fill:#f43f5e}.post-action-btn.like-btn svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.post-action-btn.like-btn.like-pulse svg{transform:scale(1.45)}.post-action-count{color:var(--color-body);text-align:center;font-variant-numeric:tabular-nums;font-size:11px}.post-body{width:100%;max-width:860px;margin:0 auto}.post-back-btn{color:var(--color-body);align-items:center;gap:6px;margin-bottom:24px;font-size:13px;font-weight:500;text-decoration:none;transition:color .2s;display:inline-flex}.post-back-btn:hover{color:var(--color-primary)}.post-category-badge{color:var(--color-primary);letter-spacing:.4px;text-transform:uppercase;background-color:var(--color-primary-light);border-radius:6px;margin-bottom:16px;padding:4px 10px;font-size:12px;font-weight:600;text-decoration:none;transition:opacity .2s;display:inline-block}.post-category-badge:hover{opacity:.85}.article-title{color:#111827;letter-spacing:-.4px;margin-bottom:0;font-size:36px;font-weight:700;line-height:1.2}.post-meta-row{color:var(--color-body);border-bottom:1px solid var(--color-border);flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px;margin-bottom:32px;padding-bottom:32px;font-size:14px;display:flex}.post-meta-item{align-items:center;gap:6px;display:flex}.article-content{color:#1f2937;word-break:break-word;overflow-wrap:break-word;max-width:100%;font-size:18px;line-height:1.8;overflow-x:hidden}.article-content *{box-sizing:border-box;max-width:100%}.article-content iframe,.article-content video,.article-content embed,.article-content object{aspect-ratio:16/9;width:100%!important;max-width:100%!important;height:auto!important}.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{color:#111827;scroll-margin-top:100px;font-weight:700;line-height:1.4}.article-content h1{margin:1.5em 0 .5em;font-size:2em}.article-content h2{border-left:4px solid var(--color-primary);margin:56px 0 16px;padding-left:14px;font-size:26px;line-height:1.3}.article-content h3{margin:36px 0 12px;font-size:20px;line-height:1.35}.article-content h4{margin:1.5em 0 .5em;font-size:1.1em}.article-content p{margin:0 0 24px}.article-content img{border-radius:8px;max-width:100%;margin:32px 0}.article-content figure{margin:32px 0}.article-content figure img{object-fit:cover;border-radius:12px;width:100%;margin:0}.article-content figcaption{text-align:center;color:var(--color-body);margin-top:12px;font-size:13px;font-style:italic}.article-content a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.article-content a:hover{opacity:.8}.article-content blockquote{color:#1f2937;background-color:var(--color-bg);border-left:4px solid var(--color-primary);border-radius:4px;margin:28px 0;padding:18px 22px;font-size:17px;font-style:italic;line-height:1.7}.article-content pre{color:var(--color-border-dark);background-color:#1f2937;border-radius:0 0 8px 8px;margin:0;padding:16px;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.65;overflow-x:auto}.article-content pre+pre,.article-content .code-block-wrapper+.code-block-wrapper{margin-top:24px}.article-content .code-block-wrapper{border-radius:8px;margin:24px 0;overflow:hidden}.article-content .code-block-header{color:var(--color-danger);background-color:#111827;justify-content:space-between;align-items:center;padding:8px 16px;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;display:flex}.article-content .code-block-header button{color:var(--color-danger);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;font-family:inherit;font-size:12px;transition:color .2s;display:flex}.article-content .code-block-header button:hover{color:#fff}.article-content .code-block-header button.copied{color:#34d399}.article-content code{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.article-content :not(pre)>code{color:#db2777;background-color:var(--color-border);border-radius:4px;padding:2px 6px;font-size:.9em}.article-content ul,.article-content ol{margin:0 0 24px;padding-left:1.5em}.article-content ul{list-style:outside}.article-content ol{list-style:decimal}.article-content li{margin:.25em 0}.article-content table{border-collapse:collapse;-webkit-overflow-scrolling:touch;width:100%;margin:24px 0;display:block;overflow-x:auto}.article-content th,.article-content td{border:1px solid var(--color-border-dark);text-align:left;padding:8px 12px}.article-content th{background-color:var(--color-border);font-weight:600}.post-toolbar-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;flex-direction:column;gap:24px;margin-top:48px;padding:24px;display:flex;box-shadow:0 1px 2px #1018280a}.post-toolbar-card .post-tags-list{flex-wrap:wrap;gap:8px;display:flex}.post-tag-pill{color:#1f2937;background:#fff;border:1px solid var(--color-border-dark);border-radius:9999px;padding:4px 12px;font-size:12px;font-weight:500;text-decoration:none;transition:background .2s;display:inline-block}.post-tag-pill:hover{color:var(--color-primary);background:var(--color-primary-light);border-color:var(--color-primary)}.post-license{color:var(--color-body);font-size:12px}.post-license a{color:var(--color-primary);font-weight:500;text-decoration:none}.post-license a:hover{text-decoration:underline}.post-toolbar-card .post-author-card{box-shadow:none;background:0 0;border:none;align-items:center;gap:16px;margin:0;padding:0;display:flex}.post-author-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:56px;height:56px}.post-author-info{flex:1;min-width:0}.post-author-name{color:#111827;margin:0;font-size:15px;font-weight:700}.post-author-bio{color:var(--color-body);margin:2px 0 0;font-size:13px}.post-follow-btn{color:#fff;background-color:var(--color-primary);border-radius:8px;flex-shrink:0;height:36px;padding:0 16px;font-size:13px;font-weight:600;line-height:36px;text-decoration:none;transition:opacity .2s}.post-follow-btn:hover{opacity:.9}.post-comments-section{margin-top:48px;scroll-margin-top:100px}:root{--halo-cw-primary-1-color:#2563eb;--halo-cw-primary-2-color:#3b82f6;--halo-cw-primary-3-color:#eff6ff;--halo-cw-text-1-color:#111827;--halo-cw-text-2-color:#374151;--halo-cw-text-3-color:var(--color-body);--halo-cw-muted-1-color:var(--color-border-dark);--halo-cw-muted-2-color:var(--color-border);--halo-cw-muted-3-color:var(--color-bg);--halo-cw-base-rounded:8px;--halo-cw-avatar-rounded:50%;--halo-cw-avatar-size:40px;--halo-cw-base-font-size:14px;--halo-cw-base-font-family:"Inter", system-ui, -apple-system, sans-serif}html.dark{--halo-cw-primary-1-color:#60a5fa;--halo-cw-primary-2-color:#3b82f6;--halo-cw-primary-3-color:#60a5fa26;--halo-cw-text-1-color:var(--color-bg);--halo-cw-text-2-color:var(--color-border-dark);--halo-cw-text-3-color:var(--color-danger);--halo-cw-muted-1-color:#374151;--halo-cw-muted-2-color:#1f2937;--halo-cw-muted-3-color:#111827}.post-toc-rail{display:none}@media (width>=1024px){.post-toc-rail{display:block}}.post-toc{border-right:1px solid var(--color-border);padding-right:20px;position:sticky;top:112px}.post-toc-heading{letter-spacing:1.2px;text-transform:uppercase;color:var(--color-body);align-items:center;gap:6px;margin-bottom:12px;font-size:12px;font-weight:700;display:flex}.post-toc ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.post-toc li{margin:0}.post-toc a{color:var(--color-body);padding:2px 0;font-size:13px;font-weight:500;line-height:1.5;text-decoration:none;transition:color .2s;display:block}.post-toc a:hover{color:#111827}.post-toc a.active{color:var(--color-primary);font-weight:600}.post-toc .toc-h3{padding-left:14px}.post-category-nav{grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:40px auto 24px;padding:0 24px;display:grid}.post-category-nav--fallback{margin-top:0}.post-category-nav-item{color:#111827;background:#fff;border:1px solid var(--color-border-dark);border-radius:14px;flex-direction:column;gap:8px;min-height:0;padding:18px 22px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex}.post-category-nav-item:hover:not(.is-disabled){border-color:#6366f1;transform:translateY(-2px);box-shadow:0 6px 20px -8px #6366f159}.post-category-nav-item.is-disabled{color:var(--color-danger);cursor:default;background:var(--color-bg)}.post-category-nav-prev{text-align:left}.post-category-nav-next{text-align:right;align-items:flex-end}.post-category-nav-label{color:var(--color-body);align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}.post-category-nav-next .post-category-nav-label{flex-direction:row}.post-category-nav-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}@media (width<=640px){.post-category-nav{grid-template-columns:1fr;margin:28px auto 16px}.post-category-nav-next{text-align:left;align-items:flex-start}}html.dark .post-category-nav-item{color:var(--color-border-dark);background:#1f2937;border-color:#374151}html.dark .post-category-nav-item.is-disabled{color:#4b5563;background:#111827}html.dark .post-category-nav-label{color:var(--color-danger)}html.dark .post-category-nav-item:hover:not(.is-disabled){border-color:#818cf8;box-shadow:0 6px 20px -8px #818cf866}.post-related{background-color:var(--color-bg);border-top:1px solid var(--color-border);padding:64px 0}.post-related-inner{max-width:1200px;margin:0 auto;padding:0 24px}.post-related-title{color:#111827;margin-bottom:20px;font-size:22px;font-weight:700}.post-related-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}@media (width<=1024px){.post-related-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.post-related-grid{grid-template-columns:1fr}}@media (width<=768px){.post-cover-wrapper>img,.post-cover{aspect-ratio:16/9;border-radius:12px;max-height:280px}.post-shell{padding:24px 16px 48px}.article-title{font-size:28px;line-height:1.3}.footer-runtime,.footer-visit{gap:6px;font-size:12px}.footer-legal{gap:6px;font-size:11px}.footer-bottom{gap:6px;padding-top:16px}.site-footer .container{gap:24px}.filter-pill,.sidebar-tag-pill{padding:8px 14px;font-size:13px}.footer-friend-card{min-height:48px;padding:10px 12px}.post-card-meta span{gap:8px}.article-content{font-size:17px;line-height:1.75}.article-content p{margin:0 0 20px}.article-content img{margin:24px 0}.article-content h2{margin-top:32px;margin-bottom:14px;font-size:22px}.article-content h3{margin-top:24px;margin-bottom:12px;font-size:19px}.article-content pre{padding:12px;font-size:12.5px}.article-content blockquote{margin:20px 0;padding:14px 16px;font-size:15.5px}.article-content :not(pre)>code{word-break:break-all;white-space:normal}.post-meta-row{gap:12px;margin-bottom:24px;padding-bottom:20px}.post-meta-item{font-size:13px}.post-related{padding:40px 0}.post-related-inner{padding:0 16px}.post-related-title{margin-bottom:16px;font-size:19px}.post-toolbar-card{margin-top:32px;padding:16px}.post-toolbar-card .post-author-card{text-align:center;flex-direction:column;gap:12px}.post-toolbar-card .post-author-avatar{width:64px;height:64px}.post-toolbar-card .post-author-info{flex-direction:column;align-items:center;gap:4px;display:flex}.post-follow-btn{text-align:center;width:100%}}.post-related-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;text-decoration:none;transition:all .3s;display:block;overflow:hidden;box-shadow:0 1px 2px #1018280a}.post-related-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #10182814}.post-related-thumb{aspect-ratio:16/9;background-color:var(--color-border);overflow:hidden}.post-related-thumb img{object-fit:cover;width:100%;height:100%}.post-related-body{padding:16px}.post-related-body h3{color:#1f2937;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}html.dark .post-detail{background-color:var(--color-white)}html.dark .reading-progress-bar{background-color:var(--color-primary)}html.dark .post-cover-wrapper>img,html.dark .post-cover{background-color:var(--color-border)}html.dark .article-title,html.dark .article-content,html.dark .article-content h1,html.dark .article-content h2,html.dark .article-content h3,html.dark .article-content h4,html.dark .article-content h5,html.dark .article-content h6{color:var(--color-title)}html.dark .article-content h2{border-left-color:var(--color-primary)}html.dark .article-content blockquote{color:var(--color-title);background-color:color-mix(in srgb,var(--color-primary) 8%,transparent)}html.dark .article-content :not(pre)>code{color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,transparent)}html.dark .article-content pre{background-color:#0f172a}html.dark .code-block-header{color:var(--color-body);background-color:#0f172a}html.dark .code-block-header button{color:var(--color-body)}html.dark .code-block-header button:hover{color:var(--color-title)}html.dark .code-block-header button.copied{color:var(--color-success)}html.dark .post-toc-heading{color:var(--color-body)}html.dark .post-related-thumb{background-color:var(--color-border)}html.dark .post-action-btn{background-color:var(--color-white);border-color:var(--color-border-dark);color:var(--color-title)}html.dark .post-category-badge{color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,transparent)}html.dark .post-meta-row{border-bottom-color:var(--color-border);color:var(--color-body)}html.dark .post-toolbar-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .post-tag-pill{background:var(--color-border);border-color:var(--color-border-dark);color:var(--color-title)}html.dark .post-tag-pill:hover{border-color:var(--color-primary);color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 15%,transparent)}html.dark .post-author-name{color:var(--color-title)}html.dark .post-author-bio{color:var(--color-body)}html.dark .post-toc{border-right-color:var(--color-border)}html.dark .post-toc a{color:var(--color-body)}html.dark .post-toc a:hover,html.dark .post-toc a.active{color:var(--color-primary)}html.dark .post-related{background-color:var(--color-bg);border-top-color:var(--color-border)}html.dark .post-related-title{color:var(--color-title)}html.dark .post-related-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .post-related-body h3{color:var(--color-title)}html.dark .article-content a{color:var(--color-primary)}html.dark .article-content figcaption,html.dark .post-action-count,html.dark .post-back-btn{color:var(--color-body)}html.dark .post-back-btn:hover{color:var(--color-primary)}html.dark .post-license{color:var(--color-body)}html.dark .post-license a{color:var(--color-primary)}html.dark .post-follow-btn{background-color:var(--color-primary)}.site-footer{color:var(--color-body);background-color:var(--color-bg);border-top:1px solid var(--color-border-dark);padding:40px 0;font-size:13px}.site-footer .container{flex-direction:column;gap:32px;display:flex}.footer-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;display:flex}.footer-link-exchange{color:var(--color-body);align-items:center;gap:6px;font-size:12px;font-weight:500;transition:color .2s;display:inline-flex}.footer-link-exchange:hover{color:var(--color-primary)}.footer-section-heading{color:var(--color-body);letter-spacing:1.2px;text-transform:uppercase;margin:0;font-size:13px;font-weight:600}.footer-friends{flex-direction:column;display:flex}.footer-friends-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;display:grid}.footer-friend-card{background-color:#fff;border:1px solid var(--color-border-dark);border-radius:8px;align-items:center;gap:10px;min-height:56px;padding:8px 10px;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 1px 1px #10182808}.footer-friend-card:hover{border-color:var(--color-primary);transform:translateY(-2px)}.footer-friend-card:hover .footer-friend-name{color:var(--color-primary)}.footer-friend-avatar{color:#fff;background-color:var(--color-primary);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:700;display:flex}.footer-friend-logo{object-fit:cover;border-radius:6px;flex-shrink:0;width:32px;height:32px}.footer-friend-name{color:#1f2937;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;font-weight:500;transition:color .2s;display:-webkit-box;overflow:hidden}.footer-sponsor{border-top:1px solid var(--color-border);flex-direction:column;align-items:center;padding-top:24px;display:flex}.footer-sponsor-box{color:var(--color-danger);background-color:#fff;border:1.5px dashed var(--color-border-dark);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:300px;height:100px;font-size:14px;font-weight:500;display:flex}.footer-sponsor-contact{color:var(--color-border-dark);font-size:12px;text-decoration:none;transition:color .2s}.footer-sponsor-contact:hover{color:var(--color-primary)}.footer-bottom{flex-direction:column;align-items:center;gap:8px;padding-top:24px;display:flex}.footer-stats{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.footer-stats-divider{color:var(--color-border-dark)}.footer-legal{text-align:center;color:var(--color-danger);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:12px;display:flex}.footer-legal a{white-space:nowrap;align-items:center;gap:3px;display:inline-flex}.footer-runtime{color:var(--color-body);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:13px;display:flex}.footer-runtime-days{color:var(--color-primary);font-variant-numeric:tabular-nums;font-weight:700}.footer-runtime-time{color:var(--color-primary);font-variant-numeric:tabular-nums;margin-left:4px;font-weight:700}.footer-visit{color:var(--color-body);justify-content:center;align-items:center;gap:6px;font-size:13px;display:flex}.footer-visit-count{color:var(--color-primary);font-variant-numeric:tabular-nums;font-weight:700}.footer-credit{text-align:center;color:var(--color-border-dark);margin-top:-8px;font-size:12px}.footer-credit a{color:inherit;text-decoration:none;transition:color .2s}.footer-credit a:hover{color:var(--color-primary)}.back-to-top{background:var(--color-primary);color:#fff;cursor:pointer;opacity:0;visibility:hidden;z-index:50;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:opacity .3s,visibility .3s,transform .3s;display:flex;position:fixed;bottom:32px;right:32px;transform:translateY(10px);box-shadow:0 2px 8px #00000026}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}html.dark .back-to-top{background:var(--color-primary)}@media (width<=768px){.back-to-top{width:40px;height:40px;bottom:20px;right:20px}}.page-content-wrapper{padding-top:32px;padding-bottom:96px}.page-content-wrapper .post-detail{max-width:800px;margin:0 auto;padding:0 24px}.search-page{max-width:var(--max-width);margin:0 auto;padding:32px 24px 96px}.search-page-header{margin-bottom:32px}.search-empty{text-align:center;color:var(--color-body);padding:64px 0;font-size:15px}.error-page{min-height:calc(100vh - var(--header-height) - 120px);text-align:center;justify-content:center;align-items:center;padding:32px 24px;display:flex}.error-content{max-width:480px}.error-code{color:var(--color-border-dark);letter-spacing:-4px;font-size:120px;font-weight:700;line-height:1}.error-message{color:var(--color-title);margin-top:16px;font-size:24px;font-weight:700}.error-description{color:var(--color-body);margin-top:8px;font-size:15px;line-height:1.6}.error-home-btn{border:1px solid var(--color-border-dark);background-color:var(--color-white);height:44px;color:var(--color-title);font-size:14px;font-weight:600;font-family:var(--font-family);border-radius:8px;align-items:center;gap:8px;margin-top:32px;padding:0 24px;transition:all .2s;display:inline-flex}.error-home-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.error-home-btn svg{width:16px;height:16px}html.dark .site-header{background-color:#111827b8;border-bottom-color:#ffffff0f}html.dark .mobile-nav-drawer{background:#111827fa;box-shadow:-4px 0 24px #0000004d}html.dark .mobile-nav-drawer a{color:var(--color-body);border-bottom-color:var(--color-border-dark)}html.dark .mobile-nav-drawer a:hover,html.dark .mobile-nav-drawer a.active{color:var(--color-primary)}html.dark .header-actions button:hover,html.dark .header-auth-btn:hover{background-color:var(--color-border-dark)}html.dark .header-auth-btn svg{color:var(--color-title)}html.dark .hero-nav{color:var(--color-bg);background-color:#1f2937b3;border-color:#ffffff1a}html.dark .hero-nav:hover{background-color:#1f2937e6}html.dark .hero-cta{background-color:var(--color-white);color:var(--color-title);border-color:var(--color-border-dark)}html.dark .hero-cta-label,html.dark .hero-cta svg{color:var(--color-primary)}html.dark .hero-dot{background-color:var(--color-danger)66}html.dark .hero-dot.active{background-color:var(--color-primary)}html.dark .post-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .btn-load-more,html.dark .error-home-btn{border-color:var(--color-border-dark);background-color:var(--color-white);color:var(--color-title)}html.dark .search-bar-inner{background:var(--color-white)}html.dark .search-bar input{background-color:var(--color-white);border-color:var(--color-border-dark);color:var(--color-title)}html.dark .search-bar input::placeholder{color:var(--color-body)}html.dark .search-result-item:hover{background:var(--color-border)}html.dark .photo-card{background-color:var(--color-border-dark)}html.dark .gear-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .gear-card-image{background-color:var(--color-border-dark)}html.dark .about-sidebar-panel,html.dark .about-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .about-social-btn{border-color:var(--color-border-dark)}html.dark .about-social-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}html.dark .about-stats{background-color:var(--color-border-dark)}html.dark .about-stat-item+.about-stat-item{border-color:var(--color-border-dark)}html.dark .about-gear-item{background-color:var(--color-border-dark);border-color:var(--color-border-dark)}html.dark .about-interest-blue,html.dark .filter-pill{background-color:var(--color-border-dark)}html.dark .filter-pill:hover{border-color:var(--color-primary)}html.dark .site-footer{background-color:var(--color-bg);border-top-color:var(--color-border)}html.dark .footer-friend-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .footer-friend-name{color:var(--color-title)}html.dark .footer-sponsor-box{background-color:var(--color-white);border-color:var(--color-border-dark);color:var(--color-body)}html.dark .footer-link-exchange,html.dark .footer-section-heading{color:var(--color-body)}html.dark .footer-sponsor-contact,html.dark .footer-legal{color:var(--color-border-dark)}html.dark .footer-runtime,html.dark .footer-visit{color:var(--color-body)}html.dark .footer-visit-count{color:var(--color-primary)}html.dark .footer-credit{color:var(--color-border-dark)}html.dark .footer-friend-avatar{background-color:var(--color-primary);color:var(--color-white)}html.dark .footer-sponsor{border-top-color:var(--color-border)}html.dark .icon-moon{display:none}html.dark .icon-sun{display:block}.icon-sun{display:none}.icon-moon{display:block}html.dark .archive-group{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .archive-group-header{background-color:var(--color-bg)}html.dark .archive-post-item:hover{background-color:var(--color-primary-light)}html.dark .tag-pill,html.dark .category-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .category-card:hover{border-color:var(--color-primary)}html.dark .author-header{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .moment-month-divider{border-bottom-color:var(--color-border-dark);background-color:#111827d9}html.dark .moment-card{border-color:var(--color-border-dark);background:var(--color-white)}html.dark .moment-card:hover{box-shadow:0 4px 16px #0003}html.dark .moments-sidebar-card{background-color:var(--color-white);border-color:var(--color-border-dark)}html.dark .moments-about-card{background-color:var(--color-white)}html.dark .moments-about-text{color:var(--color-title)}html.dark .moments-activity-label{color:var(--color-body)}html.dark .about-timeline{border-left-color:var(--color-border-dark)}html.dark .moments-sidebar-label{color:var(--color-body)}html.dark .moments-month-count{color:var(--color-border-dark)}html.dark .moment-actions .like-btn:hover,html.dark .moment-actions .like-btn.liked{color:#f43f5e}html.dark .moment-actions .like-btn.liked svg{fill:#f43f5e}html.dark .about-gear-thumb,html.dark .about-photo-masonry img{background-color:var(--color-border)}html.dark .moments-month-nav a{color:var(--color-title)}html.dark .moments-month-nav a:hover{background-color:var(--color-border-dark)}@media (width<=768px){.hero-title{font-size:28px}.hero-inner{height:62vh}.hero-subtitle{font-size:14px}.hero-cta{max-width:calc(100% - 32px);height:36px;margin-top:12px;padding:0 12px;font-size:12px}.hero-cta-title{max-width:160px}.hero-nav{display:none}.section-header{flex-direction:column;align-items:flex-start}.about-sidebar-panel{text-align:center}.footer-friends-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.moments-layout{gap:24px}.album-grid{grid-template-columns:1fr}.lightbox-modal{width:95vw;height:90vh}.lightbox-thumbs{display:none}.author-header{text-align:center;flex-direction:column;align-items:center;padding:24px}.author-meta{justify-content:center}.categories-grid{grid-template-columns:1fr}.about-social-grid{grid-template-columns:repeat(2,1fr)}.about-stats{grid-template-columns:repeat(3,1fr)}.about-photo-masonry{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.about-social-grid{grid-template-columns:repeat(2,1fr)}.about-stats{grid-template-columns:1fr;gap:8px}.about-stat-item+.about-stat-item{border-top:1px solid var(--color-border-dark);border-left:none;padding-top:8px}.about-photo-masonry{grid-template-columns:1fr}.article-title{-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:22px;line-height:1.3;display:-webkit-box;overflow:hidden}.post-cover-wrapper>img,.post-cover{max-height:220px}.hero-inner{height:50vh}.hero-title{font-size:22px;line-height:1.3}.hero-subtitle{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:8px;font-size:13px;display:-webkit-box;overflow:hidden}.hero-content{padding:0 16px}.hero-badge{margin-bottom:10px;padding:3px 10px;font-size:10px}.hero-cta{height:34px;margin-top:12px;padding:0 10px;font-size:11px}.hero-cta-title,.hero-cta-divider{display:none}.hero,.recent-posts{padding:0 16px}.post-shell{padding:20px 16px 48px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media print{.site-header,.site-nav,.site-footer,.post-actions-rail,.post-toc-rail,.lightbox,.reading-progress,.hero,.search-bar{display:none!important}body{color:#000;background:#fff}.post-detail{box-shadow:none;border:none}}.shop-page{max-width:var(--max-width);margin:0 auto;padding:32px 24px 96px}.shop-page .shop-entry{max-width:none;margin-top:0;padding:0}:is(body:has(.shop-page) #searchToggle,body:has(.shop-page) #themeToggle){display:none!important}.about-page{max-width:var(--max-width);margin:0 auto;padding:32px 24px 96px}.about-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:32px;display:grid}@media (width>=1024px){.about-layout{grid-template-columns:380px minmax(0,1fr)}}.about-sidebar-panel{background-color:var(--color-white);border:1px solid var(--color-border);text-align:center;border-radius:16px;flex-direction:column;align-items:center;min-width:0;padding:28px;display:flex;box-shadow:0 1px 2px #1018280a,0 8px 24px #1018280a}@media (width>=1024px){.about-sidebar-panel{position:sticky;top:96px}}.about-avatar-large{object-fit:cover;border:4px solid var(--color-primary);border-radius:50%;flex-shrink:0;width:150px;height:150px;box-shadow:0 0 0 6px color-mix(in srgb,var(--color-primary) 8%,transparent)}.about-sidebar-name{color:var(--color-title);margin-top:20px;font-size:24px;font-weight:700}.about-sidebar-bio{color:var(--color-body);margin-top:6px;font-size:14px;line-height:1.55}.about-stats{background-color:var(--color-bg);border-radius:12px;grid-template-columns:repeat(3,1fr);width:100%;margin-top:24px;padding:14px 8px;display:grid}.about-stat-item{flex-direction:column;align-items:center;display:flex}.about-stat-item+.about-stat-item{border-left:1px solid var(--color-border-dark)}.about-stat-value{color:var(--color-title);font-size:18px;font-weight:700}.about-stat-label{color:var(--color-body);letter-spacing:.4px;text-transform:uppercase;margin-top:2px;font-size:11px}.about-social-grid{grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:8px;width:100%;margin-top:24px;display:grid}.about-social-btn{background-color:var(--color-white);height:40px;color:var(--color-title);cursor:pointer;border:1px solid var(--color-border-dark);border-radius:8px;justify-content:center;align-items:center;transition:border-color .2s,color .2s;display:flex}.about-social-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.about-social-btn svg{width:16px;height:16px}.about-cta{background-color:var(--color-primary);width:100%;height:44px;color:var(--color-white);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;margin-top:24px;font-size:14px;font-weight:600;transition:opacity .2s;display:flex;box-shadow:0 6px 16px color-mix(in srgb,var(--color-primary) 28%,transparent)}.about-cta:hover{opacity:.9}.about-cta svg{width:15px;height:15px}.about-content{flex-direction:column;gap:32px;display:flex}.about-card{background-color:var(--color-white);overflow-wrap:break-word;border:1px solid var(--color-border);border-radius:16px;min-width:0;padding:28px;box-shadow:0 1px 2px #1018280a,0 8px 24px #1018280a}.about-card-title{color:var(--color-title);font-size:18px;font-weight:700}.about-card-subtitle{color:var(--color-body);margin-top:4px;font-size:13.5px}.about-story-text{color:var(--color-title);flex-direction:column;gap:16px;margin-top:16px;font-size:15px;line-height:1.75;display:flex}.about-story-text>p{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;margin:0}.about-interests-blue{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.about-interest-blue{color:var(--color-primary);background-color:var(--color-primary-light);border-radius:9999px;padding:6px 12px;font-size:12px;font-weight:500}.about-timeline-label{color:var(--color-body);letter-spacing:1px;text-transform:uppercase;margin-top:32px;margin-bottom:16px;font-size:13px;font-weight:700}.about-timeline{border-left:2px solid var(--color-border-dark);margin:0;padding-left:24px;list-style:none;position:relative}.about-timeline-item{padding-bottom:20px;position:relative}.about-timeline-item:last-child{padding-bottom:0}.about-timeline-item:before{content:"";background-color:var(--color-primary);width:12px;height:12px;box-shadow:0 0 0 4px var(--color-white), 0 0 0 5px color-mix(in srgb,var(--color-primary) 25%,transparent);border-radius:50%;position:absolute;top:4px;left:-31px}.about-timeline-year{color:var(--color-primary);font-variant-numeric:tabular-nums;margin:0 0 4px;font-size:13px;font-weight:700}.about-timeline-text{color:var(--color-title);white-space:pre-wrap;word-break:break-word;margin:0;font-size:14px;line-height:1.65}.about-timeline-compact{margin-top:16px}.about-timeline-compact .about-timeline-item{padding-bottom:12px}.about-radar-container{width:100%;min-width:0;height:320px;margin-top:8px;overflow:hidden}.about-radar-svg{width:100%;max-width:100%;height:100%;display:block}.about-radar-svg .radar-grid{stroke:var(--color-border-dark)}.about-radar-svg .radar-data{fill:var(--color-primary);stroke:var(--color-primary)}.about-radar-svg .radar-label{fill:var(--color-body)}html.dark .about-radar-svg .radar-grid{stroke:#374151}html.dark .about-radar-svg .radar-data{fill:var(--color-primary);stroke:var(--color-primary)}html.dark .about-radar-svg .radar-label{fill:var(--color-danger)}.about-gear-list{flex-direction:column;gap:12px;margin-top:16px;display:flex}.about-gear-item{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;align-items:center;gap:16px;padding:12px;display:flex}.about-gear-thumb{background-color:var(--color-border);border-radius:8px;flex-shrink:0;width:64px;height:64px;overflow:hidden}.about-gear-thumb img{object-fit:cover;width:100%;height:100%}.about-gear-info{flex:1;min-width:0}.about-gear-name{color:var(--color-title);font-size:14px;font-weight:600}.about-gear-review{color:var(--color-body);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13px;line-height:1.5;overflow:hidden}.about-card-header{justify-content:space-between;align-items:center;display:flex}.about-card-link{color:var(--color-primary);align-items:center;gap:4px;font-size:13px;font-weight:600;text-decoration:none;transition:-webkit-text-decoration .2s,text-decoration .2s;display:flex}.about-card-link:hover{text-decoration:underline}.about-card-link svg{width:13px;height:13px}.about-photo-masonry{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;display:grid}.about-photo-masonry img{aspect-ratio:1;object-fit:cover;background-color:var(--color-border);border-radius:8px;width:100%;transition:transform .3s}@media (width<=768px){.about-page{padding:16px 16px 64px}.about-layout{gap:20px}.about-sidebar-panel{border-radius:12px;padding:20px 16px}.about-avatar-large{width:100px;height:100px}.about-sidebar-name{margin-top:14px;font-size:20px}.about-sidebar-bio{font-size:13px}.about-stats{padding:12px 6px}.about-stat-value{font-size:16px}.about-stat-label{font-size:10px}.about-social-grid{gap:6px}.about-social-btn{height:36px}.about-content{gap:20px}.about-card{border-radius:12px;padding:20px 16px}.about-card-title{font-size:16px}.about-story-text{margin-top:12px;font-size:14px}.about-timeline{padding-left:20px}.about-timeline-item:before{width:10px;height:10px;left:-27px}.about-timeline-item{padding-bottom:14px}.about-radar-container{height:260px}.about-gear-item{gap:12px;padding:10px}.about-gear-thumb{width:48px;height:48px}.about-gear-name{font-size:13px}.about-gear-review{font-size:12px}.about-card-header{flex-direction:column;align-items:flex-start;gap:6px}.about-interests-blue{gap:6px}.about-interest-blue{padding:4px 10px;font-size:11px}}
/* ===================================================================
   Layer on top of Kaze theme's built layout.css
   Covers: font import · color variables · light/dark mode · 
           responsive · film grain · asymmetric grid · hero full-bleed
   =================================================================== */


/* ── Font: Noto Serif SC (思源宋体) — locally hosted, see @import on line 1 ── */


/* ── CSS Variable Overrides — Light Mode ──────────────────────── */
:root {
  /* Core palette — deep indigo + warm amber */
  --cp-primary:       #f59e0b;  /* amber-500 */
  --cp-primary-light: #fef3c7;  /* amber-100 */
  --cp-primary-dark:  #b45309;  /* amber-700 */
  --cp-bg:            #faf7f2;  /* warm off-white */
  --cp-bg-secondary:  #fefdfb;  /* cream-white */
  --cp-title:         #1a1a2e;  /* deep indigo */
  --cp-body:          #575c6b;  /* muted slate */
  --cp-border:        #f0ece4;  /* warm border */
  --cp-border-dark:   #e2dcd0;  /* stronger warm border */
  --cp-white:         #ffffff;
  --cp-success:       #65a30d;  /* lime-600 */
  --cp-danger:        #a8a29e;  /* warm gray-400 */

  /* Typography — bilingual professional: Chinese → Noto Serif SC, English → Inter */
  --cp-font-display: "Noto Serif SC", "Inter", "Songti SC", "STSong", "SimSun", "KaiTi", "STKaiti", serif;
  --cp-font-body:    "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
                     "Helvetica Neue", Arial, sans-serif;
  --cp-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular,
                     Menlo, Consolas, monospace;

  /* Override theme variables */
  --color-primary:       var(--cp-primary);
  --color-primary-light: var(--cp-primary-light);
  --color-bg:            var(--cp-bg);
  --color-bg-secondary:  var(--cp-bg-secondary);
  --color-title:         var(--cp-title);
  --color-body:          var(--cp-body);
  --color-border:        var(--cp-border);
  --color-border-dark:   var(--cp-border-dark);
  --color-white:         var(--cp-white);
  --color-success:       var(--cp-success);
  --color-success-ring:  color-mix(in srgb, var(--cp-success) 18%, transparent);
  --color-danger:        var(--cp-danger);
  --font-family:         var(--cp-font-body);
  --font-mono:           var(--cp-font-mono);

  /* Layout constants */
  --max-width:       1200px;
  --header-height:   64px;

  /* Halo Comment Widget overrides */
  --halo-cw-primary-1-color: var(--cp-primary);
  --halo-cw-primary-2-color: var(--cp-primary-dark);
  --halo-cw-primary-3-color: var(--cp-primary-light);
  --halo-cw-text-1-color:    var(--cp-title);
  --halo-cw-text-2-color:    var(--cp-body);
  --halo-cw-base-font-family: var(--cp-font-body);
}


/* ── CSS Variable Overrides — Dark Mode ───────────────────────── */
html.dark {
  --cp-primary:       #fbbf24;  /* amber-400 */
  --cp-primary-light: #fbbf2414;
  --cp-primary-dark:  #f59e0b;  /* amber-500 */
  --cp-bg:            #0f0f1a;  /* deepest night */
  --cp-bg-secondary:  #1a1a2e;  /* deep indigo */
  --cp-title:         #f5f0e8;  /* warm white */
  --cp-body:          #a8adb8;  /* lighter lavender-gray — 8.4:1 contrast vs bg */
  --cp-border:        #1f1f35;  /* dark indigo border */
  --cp-border-dark:   #2a2a45;
  --cp-white:         #1a1a2e;
  --cp-success:       #a3e635;  /* lime-400 */
  --cp-danger:        #78716c;  /* warm gray-500 */

  --color-primary:       var(--cp-primary);
  --color-primary-light: var(--cp-primary-light);
  --color-bg:            var(--cp-bg);
  --color-bg-secondary:  var(--cp-bg-secondary);
  --color-title:         var(--cp-title);
  --color-body:          var(--cp-body);
  --color-border:        var(--cp-border);
  --color-border-dark:   var(--cp-border-dark);
  --color-white:         var(--cp-white);
  --color-success:       var(--cp-success);
  --color-success-ring:  color-mix(in srgb, var(--cp-success) 18%, transparent);
  --color-danger:        var(--cp-danger);

  /* Halo Comment Widget overrides — dark mode */
  --halo-cw-primary-1-color: var(--cp-primary);
  --halo-cw-primary-2-color: var(--cp-primary-dark);
  --halo-cw-primary-3-color: color-mix(in srgb, var(--cp-primary) 15%, transparent);
  --halo-cw-text-1-color:    var(--cp-title);
  --halo-cw-text-2-color:    var(--cp-body);
  --halo-cw-base-font-family: var(--cp-font-body);
}


/* ── Hero Dot Pagination ──────────────────────────────────────────── */
.hero-dot {
  transition: all 0.3s ease;
  border-radius: 9999px;
}

.hero-dot.active {
  background-color: var(--cp-primary);
  width: 24px;
}


/* ── Hitokoto Card ────────────────────────────────────────────────── */
.hitokoto-card {
  border-color: var(--cp-border);
  background-color: var(--cp-bg-secondary);
}

.hitokoto-text {
  font-family: var(--cp-font-display);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cp-title);
}

.hitokoto-author {
  color: var(--cp-body);
  font-size: 13px;
}

.hitokoto-refresh,
.sidebar-hitokoto-refresh {
  transition: all 0.2s ease;
  color: var(--cp-body);
}

.hitokoto-refresh:hover,
.sidebar-hitokoto-refresh:hover,
.hitokoto-refresh.error,
.sidebar-hitokoto-refresh.error {
  color: var(--cp-primary);
}

.hitokoto-refresh.loading,
.sidebar-hitokoto-refresh.loading {
  animation: hitokoto-spin 0.6s linear infinite;
  opacity: 0.6;
}

@keyframes hitokoto-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hitokoto-like-btn,
.sidebar-hitokoto-like-btn {
  transition: all 0.2s ease;
  color: var(--cp-body);
}

.hitokoto-like-btn:hover,
.sidebar-hitokoto-like-btn:hover,
.hitokoto-like-btn.liked,
.sidebar-hitokoto-like-btn.liked {
  color: #ef4444;
}

.hitokoto-like-btn.liked svg,
.sidebar-hitokoto-like-btn.liked svg {
  fill: #ef4444;
}


/* ── Mobile Nav Drawer ────────────────────────────────────────────── */
.mobile-nav-drawer a:hover,
.mobile-nav-drawer a.active {
  color: var(--cp-primary) !important;
}


/* ── Header / Nav Adjustments ────────────────────────────────── */
.site-header {
  background-color: var(--cp-bg);
  background-color: color-mix(in srgb, var(--cp-bg) 88%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--cp-border);
}

html.dark .site-header {
  background-color: var(--cp-bg);
  background-color: color-mix(in srgb, var(--cp-bg) 88%, transparent);
  border-bottom-color: var(--cp-border);
}

.site-logo-text {
  font-family: var(--cp-font-display);
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 21px;
}

.site-logo-icon {
  background: radial-gradient(circle at 30% 30%, var(--cp-primary), var(--cp-primary-dark));
}

/* ── Navigation Menu — spacious layout ─────────────────────────── */
.site-nav nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav nav a {
  font-weight: 400;
  letter-spacing: 0.3px;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.site-nav nav a:hover {
  color: var(--cp-primary);
  background-color: color-mix(in srgb, var(--cp-primary) 8%, transparent);
}

.site-nav nav a.active:after {
  background-color: var(--cp-primary);
}

/* Header actions — spacing & alignment */
.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-actions button,
.header-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.header-actions button:hover,
.header-actions a:hover {
  background-color: color-mix(in srgb, var(--cp-primary) 8%, transparent);
  color: var(--cp-primary);
}

/* Mobile nav drawer — refined spacing */
.mobile-nav-drawer {
  padding: 12px 0;
}

.mobile-nav-drawer ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav-drawer a {
  display: block;
  padding: 12px 24px;
  font-size: 15px;
  border-radius: 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mobile-nav-drawer a:hover {
  background-color: color-mix(in srgb, var(--cp-primary) 8%, transparent);
}


/* ── Hero — Container-aligned with rounded corners ──────────────── */
.hero {
  padding: 0 24px !important;
  margin-top: var(--header-height);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  border-radius: 16px;
  aspect-ratio: 21/9;
  min-height: 55vh;
  max-height: 80vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

@media (max-width: 768px) {
  .hero-inner {
    aspect-ratio: 4/3;
    min-height: 45vh;
  }
}

@media (max-width: 480px) {
  .hero-inner {
    aspect-ratio: 3/4;
    min-height: 50vh;
  }
}

/* Slides and images — enforce rounded corners & containment */
.hero-slide,
.hero-image {
  border-radius: 16px !important;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Direct child image (single-image fallback, no .hero-slide wrapper) */
.hero-inner > .hero-image {
  position: relative !important;
  inset: auto !important;
  border-radius: 16px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Hero gradient overlay — amber-toned for warmth */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(15, 15, 26, 0.15) 0%,
    rgba(15, 15, 26, 0.05) 40%,
    rgba(15, 15, 26, 0.60) 85%,
    rgba(15, 15, 26, 0.85) 100%
  );
}

/* Hero text treatment */
.hero-title {
  font-family: var(--cp-font-display);
  font-weight: 600;
  letter-spacing: 4px;
  line-height: 1.3;
}

.hero-subtitle {
  font-family: var(--cp-font-body);
  font-weight: 300;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.hero-badge {
  background-color: var(--cp-primary-light);
  background-color: color-mix(in srgb, var(--cp-primary) 20%, transparent);
  color: var(--cp-primary);
  border: 1px solid var(--cp-primary-light);
  border: 1px solid color-mix(in srgb, var(--cp-primary) 30%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 4px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero-cta {
  background-color: var(--cp-primary);
  color: var(--cp-bg);
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}

.hero-cta:hover {
  background-color: var(--cp-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cp-primary) 35%, transparent);
}

.hero-nav {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: var(--cp-bg);
  background-color: color-mix(in srgb, var(--cp-bg) 75%, transparent);
  border-color: var(--cp-border);
  color: var(--cp-body);
}

html.dark .hero-nav {
  background-color: var(--cp-bg);
  background-color: color-mix(in srgb, var(--cp-bg) 70%, transparent);
  border-color: var(--cp-border);
}


/* ── Post Grid — Asymmetric Magazine Layout ────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* Hero card — first post spans full width, splits into image+text */
.post-grid > .post-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.post-grid > .post-card:first-child .post-card-cover {
  height: 100%;
  min-height: 320px;
  border-radius: 12px 0 0 12px;
  aspect-ratio: auto;
}

.post-grid > .post-card:first-child .post-card-cover img {
  height: 100%;
  object-fit: cover;
}

.post-grid > .post-card:first-child .post-card-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: auto;
}

.post-grid > .post-card:first-child .post-card-title {
  font-size: 28px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .post-grid > .post-card:first-child {
    grid-template-columns: 1fr;
  }
  .post-grid > .post-card:first-child .post-card-cover {
    min-height: 200px;
    border-radius: 12px 12px 0 0;
  }
  .post-grid > .post-card:first-child .post-card-body {
    padding: 20px;
  }
  .post-grid > .post-card:first-child .post-card-title {
    font-size: 21px;
  }
}

/* ── List Mode — single-column, each card: image left + text right ─── */
.post-grid.post-grid-list {
  grid-template-columns: 1fr;
}

.post-grid.post-grid-list .post-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* The <a> wrapping the cover image */
.post-grid.post-grid-list .post-card > a:first-child {
  flex-shrink: 0;
  width: 280px;
  display: block;
}

/* Hide empty <a> when post has no cover (avoids 280px gap) */
.post-grid.post-grid-list .post-card > a:first-child:not(:has(.post-card-cover)) {
  display: none;
}

.post-grid.post-grid-list .post-card-cover {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border-radius: 12px;
  aspect-ratio: auto;
}

.post-grid.post-grid-list .post-card-cover img {
  height: 100%;
  object-fit: cover;
}

.post-grid.post-grid-list .post-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 24px;
  min-width: 0;
  min-height: auto;
}

.post-grid.post-grid-list .post-card-title {
  font-size: 18px;
}

/* Override the first-child hero grid treatment in list mode */
.post-grid.post-grid-list > .post-card:first-child {
  display: flex;
  flex-direction: row;
  grid-column: auto;
  grid-template-columns: none;
}

.post-grid.post-grid-list > .post-card:first-child .post-card-cover {
  height: 100%;
  min-height: 180px;
  width: 100%;
  border-radius: 12px;
}

.post-grid.post-grid-list > .post-card:first-child .post-card-body {
  padding: 16px 24px;
}

.post-grid.post-grid-list > .post-card:first-child .post-card-title {
  font-size: 18px;
}

/* ── List Mode — Responsive: stack vertically on mobile ───────── */
@media (max-width: 768px) {
  .post-grid.post-grid-list .post-card {
    flex-direction: column;
  }

  .post-grid.post-grid-list .post-card > a:first-child {
    width: 100%;
  }

  .post-grid.post-grid-list .post-card-cover {
    width: 100%;
    height: auto;
    min-height: auto;
    aspect-ratio: 16/9;
    border-radius: 12px 12px 0 0;
  }

  .post-grid.post-grid-list .post-card-body {
    padding: 16px;
    justify-content: flex-start;
  }

  .post-grid.post-grid-list > .post-card:first-child {
    flex-direction: column;
  }

  .post-grid.post-grid-list > .post-card:first-child .post-card-cover {
    width: 100%;
    height: auto;
    min-height: auto;
    aspect-ratio: 16/9;
    border-radius: 12px 12px 0 0;
  }

  .post-grid.post-grid-list > .post-card:first-child .post-card-body {
    padding: 16px;
  }
}

/* Post card refinements */
.post-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-color: var(--cp-border);
  background-color: var(--cp-bg-secondary);
}

.post-card-title {
  font-family: var(--cp-font-display);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  font-size: 18px;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--cp-title) 10%, transparent);
}

.post-card-cover img {
  transition: transform 0.5s ease;
}

.post-card:hover .post-card-cover img {
  transform: scale(1.03);
}

.post-card-excerpt {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--cp-body);
}

html.dark .post-card {
  background-color: var(--cp-bg-secondary);
  border-color: var(--cp-border-dark);
}


/* ── Article / Post Detail Page ────────────────────────────────── */

/* Post cover full-bleed treatment */
.post-cover-wrapper {
  margin: 0 calc(-1 * (100vw - var(--max-width)) / 2);
  max-width: 100vw;
  border-radius: 0;
  overflow: hidden;
}

.post-cover-wrapper > img,
.post-cover {
  max-height: 50vh;
  object-fit: cover;
  width: 100%;
  border-radius: 0;
}

@media (max-width: 1248px) {
  .post-cover-wrapper {
    margin: 0 -24px;
  }
}

.article-title {
  font-family: var(--cp-font-display);
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.3;
}

.article-content {
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--cp-title);
}

.article-content h1 {
  font-size: 30px;
}

.article-content h2 {
  font-size: 24px;
}

.article-content h3 {
  font-size: 20px;
}

.article-content h4 {
  font-size: 17px;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--cp-font-display);
  letter-spacing: 1px;
}

.article-content h2 {
  border-left: 3px solid var(--cp-primary);
  padding-left: 14px;
}

.article-content blockquote {
  background-color: color-mix(in srgb, var(--cp-primary-light) 50%, transparent);
  border-left: 3px solid var(--cp-primary);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  font-style: italic;
  position: relative;
}

.article-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 10px;
  top: -6px;
  font-size: 40px;
  color: var(--cp-primary);
  opacity: 0.25;
  font-family: Georgia, serif;
  line-height: 1;
}

.article-content :not(pre) > code {
  color: var(--cp-primary-dark);
  background-color: var(--cp-primary-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
}

html.dark .article-content :not(pre) > code {
  color: var(--cp-primary);
  background-color: color-mix(in srgb, var(--cp-primary) 12%, transparent);
}

.article-content pre {
  border-radius: 10px;
  border: 1px solid var(--cp-border-dark);
  border-left: 3px solid var(--cp-primary);
  background-color: var(--cp-bg);
  background-color: color-mix(in srgb, var(--cp-bg-secondary) 60%, transparent);
  font-size: 14px;
}

html.dark .article-content pre {
  background-color: var(--cp-bg);
  border-color: var(--cp-border-dark);
  border-left-color: var(--cp-primary);
}

/* ── Dark Mode Code Syntax Highlighting ────────────────────────────
   Halo uses server-side syntax highlighting with inline styles
   (light-theme colors invisible on dark bg).
   Two-layer defense:
   1. Prism .token.* class rules → full dark syntax theme
   2. Unified light color → fallback if Halo uses inline styles
   Palette: One Dark inspired ───────────────────────────────────── */
html.dark .article-content pre code {
  color: #e4e4e7 !important;       /* readable light default */
}
html.dark .article-content pre code .token.comment,
html.dark .article-content pre code .token.prolog,
html.dark .article-content pre code .token.doctype,
html.dark .article-content pre code .token.cdata {
  color: #5c6370 !important;       /* muted gray */
}
html.dark .article-content pre code .token.punctuation {
  color: #abb2bf !important;       /* light gray */
}
html.dark .article-content pre code .token.tag,
html.dark .article-content pre code .token.boolean,
html.dark .article-content pre code .token.number,
html.dark .article-content pre code .token.constant,
html.dark .article-content pre code .token.symbol,
html.dark .article-content pre code .token.deleted {
  color: #d19a66 !important;       /* orange */
}
html.dark .article-content pre code .token.selector,
html.dark .article-content pre code .token.attr-name,
html.dark .article-content pre code .token.string,
html.dark .article-content pre code .token.char,
html.dark .article-content pre code .token.builtin,
html.dark .article-content pre code .token.inserted {
  color: #98c379 !important;       /* green */
}
html.dark .article-content pre code .token.operator,
html.dark .article-content pre code .token.entity,
html.dark .article-content pre code .token.url,
html.dark .article-content pre code .token.variable {
  color: #56b6c2 !important;       /* cyan */
}
html.dark .article-content pre code .token.atrule,
html.dark .article-content pre code .token.attr-value,
html.dark .article-content pre code .token.keyword {
  color: #c678dd !important;       /* purple */
}
html.dark .article-content pre code .token.function,
html.dark .article-content pre code .token.class-name {
  color: #61afef !important;       /* blue */
}
html.dark .article-content pre code .token.regex,
html.dark .article-content pre code .token.important {
  color: #e5c07b !important;       /* amber */
}
html.dark .article-content pre code .token.property {
  color: #e5c07b !important;       /* amber */
}
html.dark .article-content pre code .token.parameter {
  color: #abb2bf !important;       /* light gray */
}

/* ── Light Mode Code Syntax Highlighting ────────────────────────────
   Second defense layer: override Halo server-side inline styles
   with a warm, high-contrast scheme on off-white #faf7f2.
   Palette: warm amber-adjacent, all above 7:1 on #faf7f2 ──────── */
.article-content pre code .token.comment,
.article-content pre code .token.prolog,
.article-content pre code .token.doctype,
.article-content pre code .token.cdata {
  color: #8c8fa3 !important;       /* muted gray — 6.5:1 on #faf7f2 */
}
.article-content pre code .token.punctuation {
  color: #494d5e !important;       /* dark slate — 11.5:1 */
}
.article-content pre code .token.tag,
.article-content pre code .token.boolean,
.article-content pre code .token.number,
.article-content pre code .token.constant,
.article-content pre code .token.symbol,
.article-content pre code .token.deleted {
  color: #c2410c !important;       /* deep orange — 8.5:1 */
}
.article-content pre code .token.selector,
.article-content pre code .token.attr-name,
.article-content pre code .token.string,
.article-content pre code .token.char,
.article-content pre code .token.builtin,
.article-content pre code .token.inserted {
  color: #15803d !important;       /* forest green — 7.8:1 */
}
.article-content pre code .token.operator,
.article-content pre code .token.entity,
.article-content pre code .token.url,
.article-content pre code .token.variable {
  color: #0e7490 !important;       /* deep cyan — 8.2:1 */
}
.article-content pre code .token.atrule,
.article-content pre code .token.attr-value,
.article-content pre code .token.keyword {
  color: #7c3aed !important;       /* violet — 9.3:1 */
}
.article-content pre code .token.function,
.article-content pre code .token.class-name {
  color: #1d4ed8 !important;       /* royal blue — 8.8:1 */
}
.article-content pre code .token.regex,
.article-content pre code .token.important,
.article-content pre code .token.property {
  color: #b45309 !important;       /* amber-700 — 9.0:1 */
}
.article-content pre code .token.parameter {
  color: #575c6b !important;       /* body text — 9.5:1 */
}

.code-block-header {
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  padding: 8px 14px;
  background-color: var(--cp-border);
  color: var(--cp-body);
}

html.dark .code-block-header {
  background-color: var(--cp-border);
}

.reading-progress-bar {
  background-color: var(--cp-primary);
}

.post-category-badge {
  background-color: var(--cp-primary-light);
  color: var(--cp-primary-dark);
}

html.dark .post-category-badge {
  color: var(--cp-primary);
  background-color: color-mix(in srgb, var(--cp-primary) 15%, transparent);
}

.post-tag-pill {
  border-radius: 9999px;
  border-color: var(--cp-border-dark);
  transition: all 0.2s ease;
}

.post-tag-pill:hover {
  border-color: var(--cp-primary);
  background-color: var(--cp-primary-light);
  color: var(--cp-primary-dark);
}

.post-meta-row {
  border-bottom: 1px solid var(--cp-border);
  color: var(--cp-body);
}

.post-author-card {
  border-top: 1px solid var(--cp-border);
  padding-top: 20px;
}

.post-related-card:hover {
  border-color: var(--cp-primary);
}


/* ── TOC (Table of Contents) ────────────────────────────────────── */
.post-toc a {
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: all 0.2s ease;
}

.post-toc a:hover,
.post-toc a.active {
  color: var(--cp-primary) !important;
  border-left-color: var(--cp-primary);
}

.post-toc-heading {
  font-family: var(--cp-font-display);
  letter-spacing: 1px;
  font-size: 13px;
}


/* ── Photography Page ──────────────────────────────────────────── */
.photography-page {
  padding-top: calc(var(--header-height) + 32px);
}

.album-card {
  border-radius: 12px;
  overflow: hidden;
  border-color: var(--cp-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.album-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--cp-title) 10%, transparent);
}

.album-card-cover img {
  transition: transform 0.5s ease;
}

.album-card:hover .album-card-cover img {
  transform: scale(1.05);
}

.album-card-body h3 {
  font-family: var(--cp-font-display);
  font-weight: 500;
  letter-spacing: 1px;
}

.album-card-photo-count {
  background-color: var(--cp-bg);
  background-color: color-mix(in srgb, var(--cp-bg) 85%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 12px;
}

.filter-pill {
  border-radius: 9999px;
  border-color: var(--cp-border-dark);
  font-size: 13px;
  padding: 6px 16px;
  transition: all 0.2s ease;
}

.filter-pill.active {
  background-color: var(--cp-primary);
  color: var(--cp-bg);
  border-color: var(--cp-primary);
}

.filter-pill:hover:not(.active) {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}

/* Photo gallery — full-bleed container */
.album-grid {
  gap: 16px;
}


/* ── About Page ────────────────────────────────────────────────── */
.about-sidebar-panel {
  border-color: var(--cp-border);
}

.about-avatar-large {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 6px var(--cp-primary-light);
}

.about-cta {
  background-color: var(--cp-primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cp-primary) 40%, transparent);
}

.about-cta:hover {
  opacity: 0.92;
}

.about-card {
  border-color: var(--cp-border);
}

.about-card-title {
  font-family: var(--cp-font-display);
  letter-spacing: 1px;
}

.about-interest-blue {
  background-color: var(--cp-primary-light);
  color: var(--cp-primary-dark);
}

html.dark .about-interest-blue {
  color: var(--cp-primary);
}

.about-timeline-item::before {
  background-color: var(--cp-primary);
  box-shadow: 0 0 0 4px var(--cp-bg-secondary), 0 0 0 5px color-mix(in srgb, var(--cp-primary) 30%, transparent);
}

.about-timeline-year {
  color: var(--cp-primary);
}

/* Radar chart */
.about-radar-svg .radar-data {
  fill: var(--cp-primary);
  stroke: var(--cp-primary);
}

html.dark .about-radar-svg .radar-data {
  fill: var(--cp-primary);
  stroke: var(--cp-primary);
}


/* ── Gear Page ──────────────────────────────────────────────────── */
.gear-card {
  border-color: var(--cp-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gear-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--cp-title) 10%, transparent);
}

.gear-card-status {
  background-color: var(--cp-primary-light);
  color: var(--cp-primary-dark);
}

html.dark .gear-card-status {
  color: var(--cp-primary);
}


/* ── Moments Page ────────────────────────────────────────────────── */
.moment-card {
  border-color: var(--cp-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.moment-card:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cp-title) 8%, transparent);
}

.moment-month-divider {
  border-bottom-color: var(--cp-border);
}


/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar-card {
  border-color: var(--cp-border);
  border-radius: 12px;
}

.sidebar-card-title {
  font-family: var(--cp-font-display);
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 15px;
}

/* Sidebar author card — clickable links to about page */
.sidebar-author-link {
  display: inline-block;
  text-decoration: none;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  line-height: 0;
}

.sidebar-author-link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px var(--cp-primary-light), 0 4px 16px color-mix(in srgb, var(--cp-primary) 25%, transparent);
}

.sidebar-author-name-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.sidebar-author-name-link:hover {
  color: var(--cp-primary);
}

.sidebar-tag-pill {
  border-radius: 9999px;
  border: 1px solid var(--cp-border-dark);
  transition: all 0.2s ease;
}

.sidebar-tag-pill:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}



/* ── Homepage Widgets Section (Memo + Hitokoto/Contribute + Music) ── */
.home-widgets {
  max-width: var(--max-width);
  margin: 32px auto 0;
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--cp-border);
}

html.dark .home-widgets {
  border-bottom-color: var(--cp-border-dark);
}

.home-widgets-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  /* Fixed-height rows via stretch — tallest column sets the height */
}

/* Middle column: hitokoto + contribute stacked */
.home-widgets-middle {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cards within middle column each take half */
.home-widgets-middle > .widget-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .home-widgets-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .home-widgets-middle {
    gap: 16px;
  }
  .home-widgets-middle > .widget-card {
    flex: none;
  }
}

/* Widget card base */
.widget-card {
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background-color: var(--cp-bg-secondary);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.widget-card:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cp-title) 8%, transparent);
  transform: translateY(-2px);
}

html.dark .widget-card {
  border-color: var(--cp-border-dark);
  background-color: var(--cp-bg-secondary);
}

.widget-card-title {
  font-family: var(--cp-font-display);
  font-size: 16px;
}

/* ── Widget: Memo (ruled-paper style) ────────────────────────────── */
.widget-memo-header {
  padding: 12px 20px 8px;
  border-bottom: 2px solid var(--cp-primary);
}

.widget-memo-body {
  padding: 2px 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
  /* Ruled-paper grid lines */
  background-image: repeating-linear-gradient(
    var(--cp-border) 0px,
    var(--cp-border) 1px,
    transparent 1px,
    transparent 30px
  );
  /* Scroll fade overlay at bottom */
  position: relative;
}

.widget-memo-body::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 24px;
  background: linear-gradient(to top, var(--cp-bg-secondary), transparent);
  pointer-events: none;
  flex-shrink: 0;
}

html.dark .widget-memo-body {
  background-image: repeating-linear-gradient(
    var(--cp-border-dark) 0px,
    var(--cp-border-dark) 1px,
    transparent 1px,
    transparent 28px
  );
}

html.dark .widget-memo-body::after {
  background: linear-gradient(to top, var(--cp-bg-secondary), transparent);
}

.widget-memo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget-memo-item {
  display: flex;
  align-items: center;
  padding: 4px 20px;
  min-height: 27px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cp-title);
  box-sizing: border-box;
}

.widget-memo-item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cp-primary);
  margin-right: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

.widget-memo-text {
  flex: 1;
}

/* ── Memo Like Button ──────────────────────────────────────────── */
.widget-memo-like {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: var(--cp-body);
  font-size: 12px;
  line-height: 1;
}

.widget-memo-like:hover {
  color: #f43f5e;
  background: #f43f5e0d;
}

.widget-memo-like.liked {
  color: #f43f5e;
}

.widget-memo-like svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.widget-memo-like:hover svg {
  transform: scale(1.2);
}

.widget-memo-like.liked svg {
  fill: #f43f5e;
}

.widget-memo-like-count {
  font-size: 12px;
  font-weight: 500;
  min-width: 8px;
  text-align: center;
}

/* +1 pop animation */
@keyframes memo-plus-one {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-18px); }
}

.memo-plus-one {
  position: absolute;
  color: #f43f5e;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  animation: memo-plus-one 0.8s ease-out forwards;
}

/* ── Hitokoto card clickable cursor ─────────────────────────────── */
.hitokoto-clickable {
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.hitokoto-clickable:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cp-primary) 12%, transparent);
}

/* ── Widget: Hitokoto (narrow card) ──────────────────────────── */
.widget-hitokoto-header {
  padding: 12px 20px 6px;
}

.widget-hitokoto-body {
  padding: 2px 20px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.widget-hitokoto-quote {
  font-size: 38px;
  line-height: 1;
  color: var(--cp-primary);
  opacity: 0.3;
  font-family: Georgia, serif;
  margin: 0 0 -6px;
  padding: 0;
}

.widget-hitokoto-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cp-title);
  margin: 0 0 8px;
  font-family: var(--cp-font-display);
  font-style: italic;
}

.widget-hitokoto-footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  gap: 8px;
}

.widget-hitokoto-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.widget-hitokoto-author {
  font-size: 13px;
  color: var(--cp-body);
}

/* ── Widget: Contribute ──────────────────────────────────────────── */
.widget-contribute-header {
  padding: 12px 20px 8px;
  border-bottom: 2px solid var(--cp-primary);
}

.widget-contribute-body {
  padding: 12px 20px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.widget-contribute-desc {
  font-size: 14px;
  color: var(--cp-body);
  line-height: 1.6;
  margin: 0 0 10px;
}

.widget-contribute-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.widget-contribute-input,
.widget-contribute-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cp-border-dark);
  border-radius: 8px;
  background-color: var(--cp-bg);
  color: var(--cp-title);
  font-family: var(--cp-font-body);
  font-size: 15px;
  padding: 8px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.widget-contribute-input:focus,
.widget-contribute-textarea:focus {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-primary) 15%, transparent);
}

html.dark .widget-contribute-input,
html.dark .widget-contribute-textarea {
  background-color: var(--cp-bg);
  border-color: var(--cp-border);
}

.widget-contribute-textarea {
  resize: vertical;
  min-height: 56px;
  max-height: 120px;
}

.widget-contribute-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.widget-contribute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--cp-font-body);
  color: var(--cp-bg);
  background-color: var(--cp-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  line-height: 1;
}

.widget-contribute-btn:hover {
  background-color: var(--cp-primary-dark);
  transform: translateY(-1px);
}

.widget-contribute-btn:active {
  transform: translateY(0);
}

.widget-contribute-hint {
  font-size: 13px;
  color: var(--cp-body);
  line-height: 1;
}

.widget-contribute-hint.success {
  color: var(--cp-success);
}

.widget-contribute-samples {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--cp-border);
  padding-top: 10px;
}

html.dark .widget-contribute-samples {
  border-top-color: var(--cp-border-dark);
}

.widget-contribute-sample {
  font-size: 13.5px;
  line-height: 1.6;
}

.widget-contribute-sample-author {
  display: block;
  font-size: 11.5px;
  color: var(--cp-primary);
  font-weight: 500;
  margin-bottom: 3px;
  letter-spacing: 0.3px;
}

.widget-contribute-sample-text {
  margin: 0;
  color: var(--cp-body);
  font-style: italic;
}

/* Simplified contribute card: description + action button, no inline form */
.widget-contribute-link-card {
  min-height: auto;
}

.widget-contribute-link-card .widget-contribute-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 20px;
}

.widget-contribute-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--cp-font-body);
  color: var(--cp-bg);
  background-color: var(--cp-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
  align-self: flex-start;
  margin-top: 8px;
}

.widget-contribute-link-btn:hover {
  background-color: var(--cp-primary-dark);
  transform: translateY(-1px);
}

/* ── Contribute Page (full-page submission form) ─────────────────── */
.contribute-page {
  max-width: 640px;
  margin: 48px auto 64px;
  padding: 0 24px;
}

.contribute-page-header {
  text-align: center;
  margin-bottom: 32px;
}

.contribute-page-title {
  font-family: var(--cp-font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--cp-title);
  margin: 0 0 8px;
}

.contribute-page-subtitle {
  font-size: 15px;
  color: var(--cp-body);
  line-height: 1.6;
  margin: 0;
}

.contribute-page-card {
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background-color: var(--cp-bg-secondary);
  padding: 24px;
}

.contribute-page-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contribute-page-input,
.contribute-page-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cp-border-dark);
  border-radius: 8px;
  background-color: var(--cp-bg);
  color: var(--cp-title);
  font-family: var(--cp-font-body);
  font-size: 15px;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.contribute-page-input:focus,
.contribute-page-textarea:focus {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-primary) 15%, transparent);
}

.contribute-page-textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
}

.contribute-page-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--cp-font-body);
  color: var(--cp-bg);
  background-color: var(--cp-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  align-self: flex-start;
}

.contribute-page-submit:hover {
  background-color: var(--cp-primary-dark);
  transform: translateY(-1px);
}

.contribute-page-hint {
  font-size: 13px;
  color: var(--cp-body);
}

.contribute-page-hint.success {
  color: var(--cp-success);
}

.contribute-page-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.contribute-page-success.visible {
  display: block;
}

.contribute-page-success-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.contribute-page-success-title {
  font-family: var(--cp-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--cp-title);
  margin: 0 0 8px;
}

.contribute-page-success-text {
  font-size: 15px;
  color: var(--cp-body);
  line-height: 1.6;
}

.contribute-page-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 14px;
  background-color: color-mix(in srgb, var(--cp-primary) 6%, transparent);
  border-radius: 8px;
  font-size: 13px;
  color: var(--cp-body);
  line-height: 1.5;
}

.contribute-page-privacy svg {
  flex-shrink: 0;
  color: var(--cp-primary);
}

/* ── Widget: Music Player ────────────────────────────────────────── */
.widget-music-header {
  padding: 12px 20px 6px;
}

.widget-music-body {
  padding: 0 20px 12px;
  flex: 1;
}

/* Row layout: cover left, info + controls right */
.widget-music-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.widget-music-cover {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--cp-bg);
  flex-shrink: 0;
}

.widget-music-cover.playing {
  animation: music-rotate 6s linear infinite;
}

@keyframes music-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.widget-music-info {
  flex: 1;
  min-width: 0;
}

.widget-music-title {
  font-family: var(--cp-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--cp-title);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-music-artist {
  font-size: 12px;
  color: var(--cp-body);
  margin: 2px 0 0;
}

/* Progress bar */
.widget-music-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
}

.widget-music-time {
  font-size: 10px;
  color: var(--cp-body);
  min-width: 28px;
}

.widget-music-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background-color: var(--cp-border-dark);
  cursor: pointer;
  position: relative;
}

.widget-music-bar-fill {
  height: 100%;
  border-radius: 2px;
  background-color: var(--cp-primary);
  transition: width 0.15s linear;
}

/* Controls row: prev + play + next on left, volume on right */
.widget-music-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.widget-music-ctrl-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-music-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--cp-body);
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  transition: color 0.15s ease, transform 0.15s ease;
}

.widget-music-btn:hover { color: var(--cp-primary); }
.widget-music-btn:active { transform: scale(0.9); }

.widget-music-btn-play {
  width: 34px;
  height: 34px;
  background-color: var(--cp-primary);
  color: var(--cp-bg);
}

.widget-music-btn-play:hover {
  background-color: var(--cp-primary-dark);
  color: var(--cp-bg);
}

/* Volume — compact, only icon + thin slider */
.widget-music-vol-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Mode button: active states for non-default modes */
#musicModeBtn[data-mode="repeatAll"],
#musicModeBtn[data-mode="repeatOne"],
#musicModeBtn[data-mode="shuffle"] {
  color: var(--cp-primary);
}

.widget-music-volume-slider {
  width: 56px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--cp-border-dark);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.widget-music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cp-primary);
  cursor: pointer;
}

.widget-music-volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cp-primary);
  cursor: pointer;
  border: none;
}

/* Lyrics display — 2 lines, centered */
.widget-music-lyrics {
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--cp-border);
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.widget-music-lyrics-line {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cp-body);
  min-height: 18px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-music-lyrics-line.current {
  font-weight: 500;
  color: var(--cp-primary);
}

.widget-music-lyrics-line.next {
  font-size: 11px;
  opacity: 0.75;
}

.widget-music-lyrics.empty {
  color: var(--cp-border-dark);
  font-size: 11px;
}

/* Playlist — compact, scrollable */
.widget-music-playlist {
  margin-top: 8px;
  border-top: 1px solid var(--cp-border);
  padding-top: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.widget-music-playlist-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--cp-body);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.widget-music-playlist-item:hover {
  background-color: color-mix(in srgb, var(--cp-primary) 8%, transparent);
  color: var(--cp-title);
}

.widget-music-playlist-item.active {
  background-color: color-mix(in srgb, var(--cp-primary) 12%, transparent);
  color: var(--cp-primary);
  font-weight: 500;
}

.widget-music-playlist-num {
  font-size: 10px;
  color: var(--cp-body);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.widget-music-playlist-item.active .widget-music-playlist-num {
  color: var(--cp-primary);
}

.widget-music-playlist-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Error message ────────────────────────────────── */
.widget-music-error {
  margin: 6px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #d32f2f;
  background: rgba(211,47,47,0.06);
  border-radius: 6px;
  word-break: break-all;
}
html.dark .widget-music-error {
  color: #ef9a9a;
  background: rgba(239,154,154,0.1);
}

/* Dark mode tweaks */
html.dark .widget-music-bar { background-color: var(--cp-border); }
html.dark .widget-music-volume-slider { background: var(--cp-border); }
html.dark .widget-music-playlist,
html.dark .widget-music-lyrics { border-top-color: var(--cp-border-dark); }
html.dark .widget-music-lyrics.empty { color: var(--cp-border); }


/* ── Section Label ("最新文章" divider) ──────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 24px;
  max-width: 100%;
}

.section-label-line {
  flex: 1;
  height: 1px;
  background-color: var(--cp-border);
}

html.dark .section-label-line {
  background-color: var(--cp-border-dark);
}

.section-label-text {
  flex-shrink: 0;
  font-family: var(--cp-font-display);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cp-body);
  opacity: 0.6;
}


/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  border-top-color: var(--cp-border);
  background-color: var(--cp-bg);
}

.footer-friend-card {
  border-color: var(--cp-border);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.footer-friend-card:hover {
  border-color: var(--cp-primary);
  transform: translateY(-2px);
}

.footer-friend-avatar {
  background-color: var(--cp-primary);
}

.footer-runtime-days,
.footer-runtime-time,
.footer-visit-count {
  color: var(--cp-primary);
}

.footer-link-exchange:hover {
  color: var(--cp-primary);
}

.footer-credit a:hover {
  color: var(--cp-primary);
}

.footer-sponsor-box {
  border-color: var(--cp-border-dark);
}


/* ── Pagination ──────────────────────────────────────────────────── */
.page-btn.active {
  background-color: var(--cp-primary);
  color: var(--cp-bg);
  border-color: var(--cp-primary);
}

.page-btn:hover:not(.active) {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}


/* ── Back to Top ──────────────────────────────────────────────────── */
.back-to-top {
  background-color: var(--cp-primary);
}

.back-to-top:hover {
  background-color: var(--cp-primary-dark);
}


/* ── Search Bar ──────────────────────────────────────────────────── */
.search-bar input:focus {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px var(--cp-primary-light);
}


/* ── Category / Tag Pages ────────────────────────────────────────── */
.category-card {
  border-color: var(--cp-border);
  transition: transform 0.3s ease;
}

.category-card:hover {
  border-color: var(--cp-primary);
  transform: translateY(-2px);
}

.tag-pill {
  border-color: var(--cp-border-dark);
  transition: all 0.2s ease;
}

.tag-pill:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}


/* ── Author Page ─────────────────────────────────────────────────── */
.author-header {
  border-color: var(--cp-border);
}


/* ── 404 / Error Pages ──────────────────────────────────────────── */
.error-home-btn:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}


/* ── Links Page ──────────────────────────────────────────────────── */
.links-card {
  border-color: var(--cp-border);
}


/* ── Complementary Utilities ──────────────────────────────────────── */

/* Load more button */
.btn-load-more {
  border-color: var(--cp-border-dark);
  transition: all 0.2s ease;
}

.btn-load-more:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}

/* Post card meta */
.post-card-meta {
  color: var(--cp-body);
  font-size: 13px;
}

/* Subtle amber accent on selected/active states */
::selection {
  background-color: color-mix(in srgb, var(--cp-primary) 30%, transparent);
  color: var(--cp-title);
}

/* Link hover underlines */
.article-content a {
  color: var(--cp-primary-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cp-primary) 30%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}

.article-content a:hover {
  text-decoration-color: var(--cp-primary);
}

html.dark .article-content a {
  color: var(--cp-primary);
  text-decoration-color: color-mix(in srgb, var(--cp-primary) 30%, transparent);
}

html.dark .article-content a:hover {
  text-decoration-color: var(--cp-primary);
}


/* ── Responsive Fine-Tuning ──────────────────────────────────────── */
@media (max-width: 768px) {
  .about-sidebar-panel {
    border-radius: 12px;
  }

  .about-card {
    border-radius: 12px;
  }

  .post-card {
    border-radius: 10px;
  }

  .album-card {
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .about-avatar-large {
    width: 100px;
    height: 100px;
  }

  .article-title {
    font-size: 24px;
    letter-spacing: 1px;
  }
}


/* ── Print Optimization ──────────────────────────────────────────── */
@media print {
  .post-card:hover,
  .album-card:hover,
  .gear-card:hover,
  .moment-card:hover,
  .category-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ── Post Card Entrance Animation ────────────────────────────────── */
.post-card {
  opacity: 0;
  transform: translateY(20px);
  animation: card-fade-in 0.5s ease forwards;
}

/* Stagger animations — nth-child works because grid renders in order */
.post-card:nth-child(1) { animation-delay: 0.05s; }
.post-card:nth-child(2) { animation-delay: 0.10s; }
.post-card:nth-child(3) { animation-delay: 0.15s; }
.post-card:nth-child(4) { animation-delay: 0.20s; }
.post-card:nth-child(5) { animation-delay: 0.25s; }
.post-card:nth-child(6) { animation-delay: 0.30s; }
.post-card:nth-child(7) { animation-delay: 0.35s; }
.post-card:nth-child(8) { animation-delay: 0.40s; }
.post-card:nth-child(9) { animation-delay: 0.45s; }
.post-card:nth-child(10) { animation-delay: 0.50s; }
.post-card:nth-child(n+11) { animation-delay: 0.55s; }

@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .post-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ── Focus Indicator (Keyboard Accessibility) ────────────────────── */
:focus-visible {
  outline: 2px solid var(--cp-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--cp-primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse clicks (good practice) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Reading Progress Bar (article/post pages) ───────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cp-primary), var(--cp-primary-dark));
  z-index: 9999;
  transition: width 0.1s linear;
  width: 0%;
}

.reading-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9998;
}

/* ===================================================================
   Patch v1.5.1 — 五项优化补丁
   1) 文章页 TOC 粘性定位修复
   2) 首页音乐播放器列表限高 + 与今日一言卡片等高
   3) 文章页移动端适配增强
   4) 文章列表无封面图模式
   5) 评论区仅登录可见（默认隐藏）
   =================================================================== */

/* ── 1) TOC 粘性定位修复 ─────────────────────────────────────────────
   根因：.site-main / .post-detail / .post-shell 均设有 overflow-x:hidden，
   每个都会创建新滚动容器，使得内部 position:sticky 锚定在该容器而非视口，
   导致滚动至文章底部时 TOC 跟随容器移出视口而消失。
   修复策略：
   (a) 桌面端（≥1024px，三栏布局生效）清除父级链上所有 overflow-x:hidden，
       仅保留 .article-content 自带的 overflow-x:hidden（防止表格/代码块溢出）；
   (b) 将 sticky 从 .post-toc 移到 .post-toc-rail，rail 限高并允许内部滚动，
       避免 TOC 内容过长遮挡页脚；
   (c) 移动端（<1024px）TOC 自然隐藏，不受影响。
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* 清除父级滚动容器链——修复 sticky 定位基准 */
  .site-main,
  .post-detail,
  .post-shell,
  .post-body {
    overflow-x: visible !important;
  }

  .post-toc-rail {
    position: sticky !important;
    top: 112px !important;
    align-self: start !important;
    height: fit-content !important;
    max-height: calc(100vh - 132px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-dark, #cbd5e1) transparent;
  }
  .post-toc-rail::-webkit-scrollbar { width: 4px; }
  .post-toc-rail::-webkit-scrollbar-thumb {
    background: var(--color-border-dark, #cbd5e1);
    border-radius: 4px;
  }
  .post-toc-rail::-webkit-scrollbar-track { background: transparent; }

  /* 取消 .post-toc 自身的 sticky（已由 rail 负责） */
  .post-toc {
    position: static !important;
    border-right: 1px solid var(--color-border);
    padding-right: 20px;
  }
}

/* ── 2) 音乐播放器列表限高 + 与今日一言卡片等高 ─────────────────── */
/* 限制 playlist 显示两首歌（约 60px），保留原有滚动机制 */
.widget-music-playlist {
  max-height: 60px !important;
}

/* 让音乐卡片在 grid 行内拉伸，与今日一言卡片视觉协调 */
.widget-music {
  align-self: stretch !important;
}

/* 让今日一言卡片在 home-widgets-middle 中扩展，匹配音乐卡片高度 */
.home-widgets-middle > .widget-hitokoto {
  flex: 1 1 auto !important;
}

/* 音乐卡片内部用 flex 布局，让 playlist 始终位于底部，留白不突兀 */
.widget-music-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.widget-music-playlist {
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* 移动端同步覆盖（覆盖原 index.html 内联样式的 max-height） */
@media (max-width: 1023px) {
  .widget-music-playlist { max-height: 60px !important; }
}
@media (max-width: 640px) {
  .widget-music-playlist { max-height: 56px !important; }
}

/* ── 3) 文章页移动端适配增强 ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* 文章正文基础调整 */
  .article-content {
    font-size: 16px !important;
    line-height: 1.75 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow-x: hidden !important;
  }
  /* 所有子元素宽度限制，防止溢出 */
  .article-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .article-content p,
  .article-content li {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* 图片、视频、iframe 自适应 */
  .article-content img,
  .article-content video,
  .article-content iframe,
  .article-content object,
  .article-content embed {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }
  /* 代码块：横向滚动而非整页溢出 */
  .article-content pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
    margin: 16px 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  .article-content .code-block-wrapper {
    max-width: 100% !important;
    margin: 16px 0 !important;
  }
  /* 行内代码：允许换行，避免长 URL/代码撑破容器 */
  .article-content :not(pre) > code {
    word-break: break-all !important;
    white-space: normal !important;
    padding: 1px 5px !important;
    font-size: .9em !important;
  }
  /* 表格：横向滚动 */
  .article-content table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 标题缩放 */
  .article-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    letter-spacing: 0 !important;
  }
  .article-content h2 {
    font-size: 19px !important;
    margin: 24px 0 12px !important;
    padding-left: 10px !important;
    border-left-width: 3px !important;
  }
  .article-content h3 {
    font-size: 17px !important;
    margin: 20px 0 10px !important;
  }
  .article-content h4 { font-size: 15px !important; }
  /* 引用块紧凑化 */
  .article-content blockquote {
    margin: 16px 0 !important;
    padding: 12px 14px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  /* 图说 */
  .article-content figcaption { font-size: 12px !important; margin-top: 8px !important; }

  /* 文章 shell 间距收紧 */
  .post-shell {
    padding: 16px 12px 80px !important;
  }
  .post-body {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  /* 元信息行允许换行 */
  .post-meta-row {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .post-meta-item {
    white-space: nowrap !important;
  }
  .post-meta-category {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 底部工具栏 */
  .post-toolbar-card {
    padding: 16px 12px !important;
  }
  .post-tags-list {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .post-tag-pill {
    font-size: 12px !important;
    padding: 3px 10px !important;
  }
  /* 作者卡片纵向堆叠 */
  .post-author-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }
  .post-author-card .post-follow-btn {
    align-self: stretch !important;
    text-align: center !important;
  }
  /* 同分类上下篇 */
  .post-category-nav {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .post-category-nav-item {
    max-width: 100% !important;
  }
  .post-category-nav-title {
    font-size: 14px !important;
    -webkit-line-clamp: 2 !important;
  }
  /* 相关文章 */
  .post-related-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* 移动端隐藏 TOC rail（继承原有规则，再次明确） */
  .post-toc-rail { display: none !important; }
  /* 右侧操作栏在移动端为 fixed bottom（继承原样式），保证不遮挡内容 */
  .post-body { padding-bottom: 72px !important; }
}

/* ── 4) 文章列表无封面图模式 ─────────────────────────────────────── */
/* 当 .post-grid 带 no-cover 类时（全无封面图模式），隐藏所有卡片封面图 */
.post-grid.no-cover .post-card-cover {
  display: none !important;
}
/* 当 .post-card 自身带 no-cover 类时（智能模式：仅未设封面图的卡片） */
.post-card.no-cover .post-card-cover {
  display: none !important;
}
.post-grid.no-cover .post-card,
.post-card.no-cover {
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.post-grid.no-cover .post-card:hover,
.post-card.no-cover:hover {
  border-left-color: var(--cp-primary, var(--color-primary));
  transform: translateX(2px);
}
.post-grid.no-cover .post-card-body,
.post-card.no-cover .post-card-body {
  padding: 14px 16px !important;
}
.post-grid.no-cover .post-card-title,
.post-card.no-cover .post-card-title {
  font-size: 16px !important;
  margin-bottom: 6px !important;
}
.post-grid.no-cover .post-card-excerpt,
.post-card.no-cover .post-card-excerpt {
  font-size: 13px !important;
  -webkit-line-clamp: 2 !important;
  margin-bottom: 8px !important;
}
.post-grid.no-cover .post-card-meta,
.post-card.no-cover .post-card-meta {
  font-size: 12px !important;
}

/* 无封面图模式在 list 布局下也适用（紧凑列表条目） */
.post-grid-list.no-cover .post-card,
.post-grid-list .post-card.no-cover {
  display: flex !important;
  flex-direction: column !important;
}

/* ── 5) 评论区仅登录可见（默认隐藏，登录后显示） ────────────────── */
/* 通过 .post-comments-section 上的 .is-hidden-guest 类控制；JS 在检测到
   已登录后移除该类。即使 JS 失败，默认也是隐藏状态，安全。 */
.post-comments-section.is-hidden-guest {
  display: none !important;
}
/* 评论跳转按钮在未登录时也一并隐藏（避免点击 #comments 跳到空锚点），
   同时隐藏其后的评论计数徽章。桌面右栏与移动端底部操作栏均适用。 */
.post-actions-rail .comment-jump-btn.is-hidden-guest,
.post-actions-rail .comment-jump-btn.is-hidden-guest + .post-action-count {
  display: none !important;
}