/* ==========================================================================
   Gaifan's Typora OneNight Starfield (Hexo Butterfly Pro Edition)
   1. 强制铺满全屏，消除椭圆边界
   2. 完美适配 GPU 加速，保留 4 层星星及独立动画时长
   3. 清除主题冲突，修复白色视觉 Bug
   ========================================================================== */

:root {
    --bg-trans-color: #3a3f4a70;
    /* 保持你的原版 GPU 优化动画时长 */
    --star-rotation-duration: 12s;
    --star-breathe-duration: 3s;
    --star-rotation-2-duration: 8s;
    --star-breathe-2-duration: 4s;
    --star-rotation-3-duration: 10s;
    --star-breathe-3-duration: 5s;
    --star-rotation-4-duration: 14s;
    --star-breathe-4-duration: 7s;
}

/* 1. 强制清场：消除椭圆边界和白色 Bug */
/* 修改 html 和 body 部分 */
html {
    /* 设置一个和星空最深处一样的纯色兜底，防止白闪 */
    background-color: #0d1117 !important; 
}

body {
    background: transparent !important;
}

#web_bg {
    /* 使用你原版的渐变色并强制铺满 */
    background: linear-gradient(to bottom, #0f1923, #0d1117, #050608) !important;
    background-attachment: fixed !important;
    mask-image: none !important; /* 关键：消除可能存在的椭圆遮罩 */
    -webkit-mask-image: none !important;
}

/* 2. 基础 GPU 加速配置 */
.star-layer {
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
    pointer-events: none;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout style paint;
}

/* --- 星星层 1 (小星星) --- */
#stars-1 {
    width: 2px; height: 2px;
    border-radius: 50%;
    z-index: -10;
    transform-origin: 50vw 300vh;
    /* 此处粘贴你源码中第1层的 box-shadow 完整内容 */
    box-shadow: 757px 1166px rgba(255, 255, 255, 0.8), 1554px 147px rgba(255, 255, 255, 0.9), 1205px 1239px rgba(255, 255, 255, 0.7), 1149px 493px rgba(255, 255, 255, 1), 183px 123px rgba(255, 255, 255, 0.6), 1076px 957px rgba(255, 255, 255, 0.8), 137px 1723px rgba(255, 255, 255, 0.9), 497px 632px rgba(255, 255, 255, 0.7), 1845px 1279px rgba(255, 255, 255, 1), 1021px 825px rgba(255, 255, 255, 0.6), 347px 583px rgba(255, 255, 255, 0.8), 689px 1230px rgba(255, 255, 255, 0.9), 1864px 428px rgba(255, 255, 255, 0.7), 1334px 1100px rgba(255, 255, 255, 1), 412px 1513px rgba(255, 255, 255, 0.6), 500px 765px rgba(255, 255, 255, 0.8), 1023px 325px rgba(255, 255, 255, 0.9), 1155px 1852px rgba(255, 255, 255, 0.7), 206px 1783px rgba(255, 255, 255, 1), 913px 355px rgba(255, 255, 255, 0.6), 1365px 912px rgba(255, 255, 255, 0.8), 458px 248px rgba(255, 255, 255, 0.9), 1520px 1745px rgba(255, 255, 255, 0.7), 1018px 50px rgba(255, 255, 255, 1), 267px 612px rgba(255, 255, 255, 0.6), 953px 1763px rgba(255, 255, 255, 0.8), 1788px 523px rgba(255, 255, 255, 0.9), 478px 1860px rgba(255, 255, 255, 0.7), 1295px 236px rgba(255, 255, 255, 1), 1612px 1148px rgba(255, 255, 255, 0.6), 1691px 667px rgba(255, 255, 255, 0.8), 893px 276px rgba(255, 255, 255, 0.9), 54px 987px rgba(255, 255, 255, 0.7), 1792px 83px rgba(255, 255, 255, 1), 656px 1312px rgba(255, 255, 255, 0.6), 1212px 1483px rgba(255, 255, 255, 0.8), 251px 874px rgba(255, 255, 255, 0.9), 1988px 341px rgba(255, 255, 255, 0.7), 888px 1563px rgba(255, 255, 255, 1), 1431px 59px rgba(255, 255, 255, 0.6), 333px 1912px rgba(255, 255, 255, 0.8), 1754px 811px rgba(255, 255, 255, 0.9), 602px 222px rgba(255, 255, 255, 0.7), 1222px 1777px rgba(255, 255, 255, 1), 128px 1888px rgba(255, 255, 255, 0.6), 930px 420px rgba(255, 255, 255, 0.8), 1670px 1450px rgba(255, 255, 255, 0.9), 400px 900px rgba(255, 255, 255, 0.7), 1950px 100px rgba(255, 255, 255, 1), 50px 1500px rgba(255, 255, 255, 0.6), 1423px 632px rgba(255, 255, 255, 0.8), 876px 1923px rgba(255, 255, 255, 0.9), 1823px 223px rgba(255, 255, 255, 0.7), 123px 777px rgba(255, 255, 255, 1), 1111px 111px rgba(255, 255, 255, 0.6), 1999px 1555px rgba(255, 255, 255, 0.8), 284px 1912px rgba(255, 255, 255, 0.8), 1055px 741px rgba(255, 255, 255, 0.9), 1734px 123px rgba(255, 255, 255, 0.7), 444px 1444px rgba(255, 255, 255, 1), 987px 299px rgba(255, 255, 255, 0.6), 1621px 1821px rgba(255, 255, 255, 0.8);
    animation: animStarGPU var(--star-rotation-duration) linear infinite,
               animBreatheGPU var(--star-breathe-duration) ease-in-out infinite alternate;
}

/* --- 星星层 2 (大一点的星星) --- */
#stars-2 {
    width: 3px; height: 3px;
    z-index: -10;
    transform-origin: 50vw 250vh;
    /* 此处粘贴你源码中第2层的 box-shadow 完整内容 */
    box-shadow: 1766px 1618px rgba(255, 255, 255, 0.9), 303px 1863px rgba(255, 255, 255, 1), 889px 1034px rgba(255, 255, 255, 0.8), 117px 124px rgba(255, 255, 255, 0.9), 125px 948px rgba(255, 255, 255, 1), 1205px 461px rgba(255, 255, 255, 0.8), 1831px 1108px rgba(255, 255, 255, 0.9), 233px 1476px rgba(255, 255, 255, 1), 978px 345px rgba(255, 255, 255, 0.8), 1135px 1290px rgba(255, 255, 255, 0.9), 384px 756px rgba(255, 255, 255, 1), 623px 1265px rgba(255, 255, 255, 0.8), 1835px 592px rgba(255, 255, 255, 0.9), 512px 983px rgba(255, 255, 255, 1), 1558px 344px rgba(255, 255, 255, 0.8), 322px 1316px rgba(255, 255, 255, 0.9), 1069px 238px rgba(255, 255, 255, 1), 1756px 1715px rgba(255, 255, 255, 0.8), 867px 1456px rgba(255, 255, 255, 0.9), 236px 607px rgba(255, 255, 255, 1), 1590px 855px rgba(255, 255, 255, 0.8), 723px 73px rgba(255, 255, 255, 0.9), 1238px 1897px rgba(255, 255, 255, 1), 493px 382px rgba(255, 255, 255, 0.8), 1888px 200px rgba(255, 255, 255, 0.9), 77px 1500px rgba(255, 255, 255, 1), 642px 642px rgba(255, 255, 255, 0.8), 1499px 1221px rgba(255, 255, 255, 0.9), 1980px 800px rgba(255, 255, 255, 1), 450px 1800px rgba(255, 255, 255, 0.8), 288px 921px rgba(255, 255, 255, 0.9), 1341px 331px rgba(255, 255, 255, 1), 999px 1666px rgba(255, 255, 255, 0.8), 1631px 259px rgba(255, 255, 255, 0.9), 555px 1999px rgba(255, 255, 255, 1), 1801px 811px rgba(255, 255, 255, 0.8), 199px 682px rgba(255, 255, 255, 0.9), 731px 1198px rgba(255, 255, 255, 1), 1456px 456px rgba(255, 255, 255, 0.8), 1987px 1342px rgba(255, 255, 255, 0.9), 367px 1832px rgba(255, 255, 255, 1), 1050px 50px rgba(255, 255, 255, 0.8), 229px 1432px rgba(255, 255, 255, 0.9), 811px 731px rgba(255, 255, 255, 1), 1566px 999px rgba(255, 255, 255, 0.8), 652px 199px rgba(255, 255, 255, 0.9), 1732px 1888px rgba(255, 255, 255, 1), 50px 1050px rgba(255, 255, 255, 0.8), 1229px 432px rgba(255, 255, 255, 0.9), 1811px 1731px rgba(255, 255, 255, 1), 566px 1999px rgba(255, 255, 255, 0.8), 1652px 299px rgba(255, 255, 255, 0.9), 732px 888px rgba(255, 255, 255, 1), 150px 150px rgba(255, 255, 255, 0.8), 812px 1723px rgba(255, 255, 255, 0.9), 1432px 333px rgba(255, 255, 255, 1), 488px 876px rgba(255, 255, 255, 0.8), 1954px 1482px rgba(255, 255, 255, 0.9), 699px 281px rgba(255, 255, 255, 1), 1188px 1982px rgba(255, 255, 255, 0.8);
    animation: animStarGPU var(--star-rotation-2-duration) linear infinite,
               animBreatheGPU var(--star-breathe-2-duration) ease-in-out infinite alternate;
}

/* --- 星星层 3 & 4 (中等与微小星星) --- */
/* 这里我将 3 和 4 合并在一个 ID 上，通过伪元素实现，保持 4 层独立动画 */
#stars-3 {
    width: 2px; height: 2px;
    z-index: -10;
    transform-origin: 50vw 200vh;
    /* 此处粘贴你源码中第3层的 box-shadow 完整内容 */
    box-shadow: 832px 451px rgba(255, 255, 255, 0.7), 198px 1823px rgba(255, 255, 255, 0.9), 1456px 88px rgba(255, 255, 255, 1), 743px 1299px rgba(255, 255, 255, 0.6), 1888px 670px rgba(255, 255, 255, 0.8), 301px 1950px rgba(255, 255, 255, 1), 1129px 234px rgba(255, 255, 255, 0.7), 53px 876px rgba(255, 255, 255, 0.9), 1675px 1432px rgba(255, 255, 255, 0.6), 921px 505px rgba(255, 255, 255, 0.8), 222px 1678px rgba(255, 255, 255, 1), 1388px 321px rgba(255, 255, 255, 0.7), 476px 943px rgba(255, 255, 255, 0.9), 1799px 1199px rgba(255, 255, 255, 0.6), 101px 101px rgba(255, 255, 255, 0.8), 666px 1555px rgba(255, 255, 255, 1), 1598px 487px rgba(255, 255, 255, 0.7), 81px 1333px rgba(255, 255, 255, 0.9), 1245px 765px rgba(255, 255, 255, 0.6), 1912px 1912px rgba(255, 255, 255, 0.8), 5px 600px rgba(255, 255, 255, 1), 555px 123px rgba(255, 255, 255, 0.7), 1821px 1054px rgba(255, 255, 255, 0.9), 388px 1777px rgba(255, 255, 255, 0.6), 1198px 588px rgba(255, 255, 255, 0.8), 23px 1498px rgba(255, 255, 255, 1), 1045px 82px rgba(255, 255, 255, 0.7), 687px 1134px rgba(255, 255, 255, 0.9), 1632px 1632px rgba(255, 255, 255, 0.6), 411px 411px rgba(255, 255, 255, 0.8), 1499px 1987px rgba(255, 255, 255, 1), 99px 888px rgba(255, 255, 255, 0.7), 1088px 132px rgba(255, 255, 255, 0.9), 734px 1569px rgba(255, 255, 255, 0.6), 1833px 933px rgba(255, 255, 255, 0.8), 321px 189px rgba(255, 255, 255, 1), 1532px 1754px rgba(255, 255, 255, 0.7), 601px 601px rgba(255, 255, 255, 0.9), 299px 1983px rgba(255, 255, 255, 0.6), 1776px 453px rgba(255, 255, 255, 0.8), 900px 1100px rgba(255, 255, 255, 1), 1301px 83px rgba(255, 255, 255, 0.7), 45px 1678px rgba(255, 255, 255, 0.9), 1150px 750px rgba(255, 255, 255, 0.6), 1950px 1350px rgba(255, 255, 255, 0.8), 210px 310px rgba(255, 255, 255, 1), 1654px 1876px rgba(255, 255, 255, 0.7), 832px 999px rgba(255, 255, 255, 0.9), 10px 1432px rgba(255, 255, 255, 0.6), 1367px 222px rgba(255, 255, 255, 0.8), 777px 1777px rgba(255, 255, 255, 1), 1824px 842px rgba(255, 255, 255, 0.7), 350px 150px rgba(255, 255, 255, 0.9), 1000px 1000px rgba(255, 255, 255, 0.6), 550px 1850px rgba(255, 255, 255, 0.8), 1999px 250px rgba(255, 255, 255, 1), 25px 999px rgba(255, 255, 255, 0.7), 1280px 1480px rgba(255, 255, 255, 0.9), 880px 80px rgba(255, 255, 255, 0.6), 1580px 1180px rgba(255, 255, 255, 0.8);
    animation: animStarGPU var(--star-rotation-3-duration) linear infinite,
               animBreatheGPU var(--star-breathe-3-duration) ease-in-out infinite alternate;
}

#stars-3::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 3px; height: 3px;
    border-radius: 50%;
    z-index: -9;
    transform-origin: 50vw 350vh;
    /* 此处粘贴你源码中第4层的 box-shadow 完整内容 */
    box-shadow: 1088px 256px rgba(255, 255, 255, 0.4), 1915px 758px rgba(255, 255, 255, 0.5), 512px 1848px rgba(255, 255, 255, 0.3), 795px 543px rgba(255, 255, 255, 0.4), 1408px 1087px rgba(255, 255, 255, 0.5), 263px 1544px rgba(255, 255, 255, 0.3), 1231px 283px rgba(255, 255, 255, 0.4), 178px 967px rgba(255, 255, 255, 0.5), 1528px 448px rgba(255, 255, 255, 0.3), 1935px 1765px rgba(255, 255, 255, 0.4), 845px 24px rgba(255, 255, 255, 0.5), 1813px 1093px rgba(255, 255, 255, 0.3), 582px 1125px rgba(255, 255, 255, 0.4), 1240px 1228px rgba(255, 255, 255, 0.5), 409px 925px rgba(255, 255, 255, 0.3), 1184px 1785px rgba(255, 255, 255, 0.4), 1978px 675px rgba(255, 255, 255, 0.5), 792px 1744px rgba(255, 255, 255, 0.3), 1683px 1336px rgba(255, 255, 255, 0.4), 324px 696px rgba(255, 255, 255, 0.5), 1725px 972px rgba(255, 255, 255, 0.3), 597px 1459px rgba(255, 255, 255, 0.4), 1805px 266px rgba(255, 255, 255, 0.5), 647px 890px rgba(255, 255, 255, 0.3), 933px 412px rgba(255, 255, 255, 0.4), 1852px 1183px rgba(255, 255, 255, 0.5), 1728px 305px rgba(255, 255, 255, 0.3), 389px 1129px rgba(255, 255, 255, 0.4), 1304px 1487px rgba(255, 255, 255, 0.5), 189px 1797px rgba(255, 255, 255, 0.3), 945px 680px rgba(255, 255, 255, 0.4), 1929px 84px rgba(255, 255, 255, 0.5), 1770px 1299px rgba(255, 255, 255, 0.3), 561px 232px rgba(255, 255, 255, 0.4), 42px 424px rgba(255, 255, 255, 0.5), 1675px 1988px rgba(255, 255, 255, 0.3), 999px 999px rgba(255, 255, 255, 0.4), 1337px 137px rgba(255, 255, 255, 0.5), 222px 1222px rgba(255, 255, 255, 0.3), 1881px 188px rgba(255, 255, 255, 0.4), 335px 843px rgba(255, 255, 255, 0.5), 1024px 1444px rgba(255, 255, 255, 0.3), 1567px 732px rgba(255, 255, 255, 0.4), 688px 1821px rgba(255, 255, 255, 0.5), 1900px 500px rgba(255, 255, 255, 0.3), 200px 1000px rgba(255, 255, 255, 0.4), 701px 121px rgba(255, 255, 255, 0.5), 1432px 1654px rgba(255, 255, 255, 0.3), 187px 832px rgba(255, 255, 255, 0.4), 1654px 333px rgba(255, 255, 255, 0.5), 815px 1389px rgba(255, 255, 255, 0.3), 1293px 948px rgba(255, 255, 255, 0.4), 444px 555px rgba(255, 255, 255, 0.5), 1777px 177px rgba(255, 255, 255, 0.3), 22px 1690px rgba(255, 255, 255, 0.4), 1987px 934px rgba(255, 255, 255, 0.5), 623px 1892px rgba(255, 255, 255, 0.3), 1492px 72px rgba(255, 255, 255, 0.4), 888px 1111px rgba(255, 255, 255, 0.5), 1621px 1321px rgba(255, 255, 255, 0.3), 284px 1583px rgba(255, 255, 255, 0.4), 983px 621px rgba(255, 255, 255, 0.5), 1385px 1024px rgba(255, 255, 255, 0.3), 482px 1982px rgba(255, 255, 255, 0.4), 1932px 832px rgba(255, 255, 255, 0.5), 321px 1832px rgba(255, 255, 255, 0.3), 1832px 1321px rgba(255, 255, 255, 0.4), 832px 321px rgba(255, 255, 255, 0.5), 1121px 1121px rgba(255, 255, 255, 0.3), 1488px 1844px rgba(255, 255, 255, 0.4), 356px 978px rgba(255, 255, 255, 0.5), 1123px 1589px rgba(255, 255, 255, 0.3), 1789px 467px rgba(255, 255, 255, 0.4), 254px 1234px rgba(255, 255, 255, 0.5), 876px 121px rgba(255, 255, 255, 0.3), 1998px 1876px rgba(255, 255, 255, 0.4);
    animation: animStarGPU var(--star-rotation-4-duration) linear infinite,
               animBreatheGPU var(--star-breathe-4-duration) ease-in-out infinite alternate;
}

/* 3. 动画定义 (保持 GPU 加速) */
@keyframes animStarGPU {
    0% { transform: translateZ(0) rotate(0deg); }
    100% { transform: translateZ(0) rotate(25deg); }
}

@keyframes animBreatheGPU {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* 4. 组件背景色适配 (去除表格背景色导致白边的问题) */
#write table tr {
    background-color: var(--bg-trans-color) !important;
}

/* ==========================================================================
   Archive: backend log style
   ========================================================================== */

body:has(#archive) #page-header.not-home-page {
    min-height: 360px;
}

body:has(#archive) #page-header.not-home-page::before {
    background: linear-gradient(180deg, rgba(3, 7, 12, .38), rgba(3, 7, 12, .86)) !important;
}

body:has(#archive) #page-site-info {
    top: 54%;
    width: min(900px, calc(100% - 36px));
    text-align: left;
}

body:has(#archive) #site-title {
    position: relative;
    display: inline-block;
    margin: 0;
    color: transparent !important;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1;
    letter-spacing: 0;
}

body:has(#archive) #site-title::before {
    content: "归档";
    color: #f6f9fc;
}

body:has(#archive) #site-title::after {
    content: "archive.service / commit history";
    display: block;
    margin-top: 18px;
    color: #67e8b9;
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body:has(#archive) #page-site-info::before {
    content: "LOGS INDEXED  /  YEAR GROUPED  /  STATUS ONLINE";
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(103, 232, 185, .28);
    border-radius: 6px;
    background: rgba(8, 12, 18, .46);
    color: #b7c7d8;
    backdrop-filter: blur(12px);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .05em;
}

body:has(#archive) #page-site-info::after {
    content: "gaifan@archive:~$ tail -f learning.log";
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 11px 14px;
    border-left: 2px solid #67e8b9;
    background: rgba(8, 12, 18, .58);
    color: #d8e2ec;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .26);
    font: 600 13px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
}

#content-inner.layout:has(> #archive) {
    display: block !important;
    max-width: 1180px !important;
    padding-top: 34px !important;
}

#content-inner.layout:has(> #archive) > #aside-content {
    display: none !important;
}

#archive + #aside-content {
    display: none !important;
}

#archive {
    width: 100% !important;
    padding: clamp(26px, 4vw, 54px) !important;
    border: 1px solid rgba(132, 154, 178, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(rgba(103, 232, 185, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 185, 0.026) 1px, transparent 1px),
        radial-gradient(circle at 88% 10%, rgba(103, 232, 185, 0.12), transparent 26%),
        rgba(8, 12, 18, 0.84) !important;
    background-size: 42px 42px, 42px 42px, auto, auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(16px);
}

#archive::before {
    content: "archive.service / commit history";
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #67e8b9;
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#archive::after {
    content: "";
    display: block;
    clear: both;
}

#archive .article-sort-title {
    margin: 0 0 28px !important;
    padding: 0 0 22px !important;
    border-bottom: 1px solid rgba(132, 154, 178, 0.2);
    color: #f6f9fc;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: 0;
}

#archive .article-sort-title::before,
#archive .article-sort-title::after {
    display: none !important;
}

#archive .article-sort {
    margin: 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
}

#archive .article-sort-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 84px;
    margin: 0 0 14px !important;
    padding: 16px 18px 16px 50px;
    border: 1px solid rgba(132, 154, 178, 0.14);
    border-radius: 8px;
    background: rgba(12, 18, 26, 0.72);
    box-shadow: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

#archive .article-sort-item::before {
    left: 19px !important;
    width: 9px !important;
    height: 9px !important;
    border: 0 !important;
    background: #67e8b9 !important;
    box-shadow: 0 0 18px rgba(103, 232, 185, .7);
}

#archive .article-sort-item::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 44px;
    bottom: -22px;
    width: 1px;
    background: rgba(103, 232, 185, .22);
}

#archive .article-sort-item:last-child::after {
    display: none;
}

#archive .article-sort-item:hover {
    transform: translateY(-2px);
    border-color: rgba(103, 232, 185, .45);
    background: rgba(16, 24, 35, 0.9);
}

#archive .article-sort-item.year {
    display: flex !important;
    min-height: auto;
    margin: 34px 0 16px !important;
    padding: 0 0 0 50px !important;
    border: 0;
    background: transparent;
    color: #67e8b9;
    box-shadow: none;
    font: 800 28px/1 "Cascadia Code", Consolas, Monaco, monospace;
}

#archive .article-sort-item.year:first-child {
    margin-top: 6px !important;
}

#archive .article-sort-item.year::before {
    top: 9px;
    left: 18px !important;
    width: 11px !important;
    height: 11px !important;
    background: #67e8b9 !important;
}

#archive .article-sort-item.year::after {
    top: 26px;
}

#archive .article-sort-item-img {
    grid-column: 1;
    width: 112px !important;
    height: 74px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, .08);
    opacity: .88;
}

#archive .article-sort-item-info {
    grid-column: 2;
    min-width: 0;
    padding: 0 !important;
}

#archive .article-sort-item.no-article-cover {
    grid-template-columns: minmax(0, 1fr);
}

#archive .article-sort-item.no-article-cover .article-sort-item-info {
    grid-column: 1;
}

#archive .article-sort-item-time {
    margin-bottom: 8px;
    color: #8493a6 !important;
    font: 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
}

#archive .article-sort-item-time i {
    color: #67e8b9;
}

#archive .article-sort-item-title {
    color: #f6f9fc !important;
    font-size: clamp(16px, 2vw, 20px) !important;
    font-weight: 700;
    line-height: 1.35;
}

#archive .article-sort-item-title:hover {
    color: #67e8b9 !important;
    transform: none !important;
}

#archive .pagination {
    margin-top: 30px;
}

/* ==========================================================================
   Categories: module route console
   ========================================================================== */

#body-wrap.type-categories #page-header.not-home-page {
    min-height: 360px;
}

#body-wrap.type-categories #page-header.not-home-page::before {
    background: linear-gradient(180deg, rgba(3, 7, 12, .36), rgba(3, 7, 12, .86)) !important;
}

#body-wrap.type-categories #page-site-info {
    top: 54%;
    width: min(920px, calc(100% - 36px));
    text-align: left;
}

#body-wrap.type-categories #site-title {
    position: relative;
    display: inline-block;
    margin: 0;
    color: transparent !important;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1;
    letter-spacing: 0;
}

#body-wrap.type-categories #site-title::before {
    content: "分类";
    color: #f6f9fc;
}

#body-wrap.type-categories #site-title::after {
    content: "category.index / module route map";
    display: block;
    margin-top: 18px;
    color: #67e8b9;
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-categories #page-site-info::before {
    content: "CATEGORY INDEX  /  ROUTE MAP  /  STATUS ONLINE";
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(103, 232, 185, .28);
    border-radius: 6px;
    background: rgba(8, 12, 18, .46);
    color: #b7c7d8;
    backdrop-filter: blur(12px);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .05em;
}

#body-wrap.type-categories #page-site-info::after {
    content: "gaifan@category:~$ ls ./knowledge-modules";
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 11px 14px;
    border-left: 2px solid #67e8b9;
    background: rgba(8, 12, 18, .58);
    color: #d8e2ec;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .26);
    font: 600 13px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-categories #content-inner.layout {
    display: block !important;
    max-width: 1100px !important;
}

#body-wrap.type-categories #page {
    width: 100% !important;
    border: 1px solid rgba(132, 154, 178, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(rgba(103, 232, 185, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 185, 0.026) 1px, transparent 1px),
        radial-gradient(circle at 88% 10%, rgba(103, 232, 185, 0.12), transparent 26%),
        rgba(8, 12, 18, 0.84) !important;
    background-size: 42px 42px, 42px 42px, auto, auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(16px);
}

#body-wrap.type-categories #page::before {
    content: "modules.loaded / classify knowledge nodes";
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #67e8b9;
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-categories .category-lists {
    margin-top: 8px;
}

#body-wrap.type-categories .category-lists::before {
    content: "C++  /  Linux  /  Algorithm  /  Backend";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 26px;
    padding: 10px 14px;
    border: 1px solid rgba(132, 154, 178, .16);
    border-radius: 7px;
    background: rgba(12, 18, 26, .76);
    color: #aab7c5;
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .04em;
}

#body-wrap.type-categories .category-lists ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 0 !important;
}

#body-wrap.type-categories .category-lists li {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

#body-wrap.type-categories .category-lists li::before {
    display: none !important;
}

#body-wrap.type-categories .category-lists a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 18px;
    border: 1px solid rgba(132, 154, 178, 0.14);
    border-radius: 8px;
    background: rgba(12, 18, 26, 0.72);
    color: #f6f9fc !important;
    font-weight: 700;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

#body-wrap.type-categories .category-lists a::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 12px;
    border-radius: 50%;
    background: #67e8b9;
    box-shadow: 0 0 18px rgba(103, 232, 185, .7);
}

#body-wrap.type-categories .category-lists a:hover {
    transform: translateY(-2px);
    border-color: rgba(103, 232, 185, .45);
    background: rgba(16, 24, 35, 0.9);
}

#body-wrap.type-categories .category-list-count {
    margin-left: auto !important;
    color: #67e8b9 !important;
    font-family: "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-categories .category-list-count::before {
    content: "POSTS " !important;
}

#body-wrap.type-categories .category-list-count::after {
    content: "" !important;
}

/* ==========================================================================
   Tags: keyword signal radar
   ========================================================================== */

#body-wrap.type-tags #page-header.not-home-page {
    min-height: 360px;
}

#body-wrap.type-tags #page-header.not-home-page::before {
    background:
        radial-gradient(circle at 72% 32%, rgba(103, 232, 185, .18), transparent 28%),
        linear-gradient(180deg, rgba(3, 7, 12, .34), rgba(3, 7, 12, .88)) !important;
}

#body-wrap.type-tags #page-site-info {
    top: 54%;
    width: min(920px, calc(100% - 36px));
    text-align: left;
}

#body-wrap.type-tags #site-title {
    position: relative;
    display: inline-block;
    margin: 0;
    color: transparent !important;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1;
    letter-spacing: 0;
}

#body-wrap.type-tags #site-title::before {
    content: "标签";
    color: #f6f9fc;
}

#body-wrap.type-tags #site-title::after {
    content: "tag.radar / keyword signal map";
    display: block;
    margin-top: 18px;
    color: #67e8b9;
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-tags #page-site-info::before {
    content: "TAG INDEX  /  SIGNAL MAP  /  STATUS ONLINE";
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(103, 232, 185, .28);
    border-radius: 6px;
    background: rgba(8, 12, 18, .46);
    color: #b7c7d8;
    backdrop-filter: blur(12px);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .05em;
}

#body-wrap.type-tags #page-site-info::after {
    content: "gaifan@tags:~$ grep -R \"#keyword\" ./notes";
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 11px 14px;
    border-left: 2px solid #67e8b9;
    background: rgba(8, 12, 18, .58);
    color: #d8e2ec;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .26);
    font: 600 13px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-tags #content-inner.layout {
    display: block !important;
    max-width: 1100px !important;
}

#body-wrap.type-tags #aside-content {
    display: none !important;
}

#body-wrap.type-tags #page {
    width: 100% !important;
    border: 1px solid rgba(132, 154, 178, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(rgba(103, 232, 185, 0.034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 185, 0.026) 1px, transparent 1px),
        radial-gradient(circle at 18% 18%, rgba(103, 232, 185, 0.12), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(96, 165, 250, 0.11), transparent 30%),
        rgba(8, 12, 18, 0.84) !important;
    background-size: 42px 42px, 42px 42px, auto, auto, auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(16px);
}

#body-wrap.type-tags #page::before {
    content: "signals.detected / bind keywords to notes";
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    color: #67e8b9;
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-tags .tag-cloud-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    margin: 8px 0 30px;
    padding: 22px;
    border: 1px solid rgba(132, 154, 178, .14);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 50%, rgba(103, 232, 185, .08), transparent 38%),
        rgba(12, 18, 26, .62);
    overflow: hidden;
}

#body-wrap.type-tags .tag-cloud-list::before {
    content: "KEYWORD SIGNALS";
    position: absolute;
    top: 13px;
    right: 16px;
    color: rgba(170, 183, 197, .46);
    font: 700 11px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .1em;
}

#body-wrap.type-tags .tag-cloud-list::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 18px;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(103, 232, 185, .16);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(103, 232, 185, .18) 0 2px, transparent 3px),
        repeating-radial-gradient(circle, transparent 0 18px, rgba(103, 232, 185, .11) 19px 20px);
    opacity: .78;
    pointer-events: none;
}

#body-wrap.type-tags .tag-cloud-list a {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 14px;
    border: 1px solid rgba(132, 154, 178, .18);
    border-radius: 7px;
    background: rgba(13, 20, 30, .78) !important;
    color: #f6f9fc !important;
    box-shadow: none !important;
    font: 700 14px/1 "Cascadia Code", Consolas, Monaco, monospace !important;
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

#body-wrap.type-tags .tag-cloud-list a::before {
    content: "#";
    margin-right: 4px;
    color: #67e8b9;
}

#body-wrap.type-tags .tag-cloud-list a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-radius: 50%;
    background: #67e8b9;
    box-shadow: 0 0 16px rgba(103, 232, 185, .65);
}

#body-wrap.type-tags .tag-cloud-list a:hover {
    transform: translateY(-2px);
    border-color: rgba(103, 232, 185, .48);
    background: rgba(16, 24, 35, .94) !important;
    color: #67e8b9 !important;
}

#body-wrap.type-tags .custom-hr {
    opacity: .22;
}

/* ==========================================================================
   Link: friend node console with anime signal slot
   ========================================================================== */

#body-wrap.type-link {
    --link-visual-image: none;
    --link-accent: #67e8b9;
    --link-anime: #ff7ab6;
    --link-violet: #a78bfa;
}

#body-wrap.type-link #page-header.not-home-page {
    min-height: 360px;
}

#body-wrap.type-link #page-header.not-home-page::before {
    background:
        radial-gradient(circle at 74% 24%, rgba(255, 122, 182, .18), transparent 26%),
        radial-gradient(circle at 58% 46%, rgba(167, 139, 250, .14), transparent 28%),
        linear-gradient(180deg, rgba(3, 7, 12, .34), rgba(3, 7, 12, .88)) !important;
}

#body-wrap.type-link #page-site-info {
    top: 54%;
    width: min(920px, calc(100% - 36px));
    text-align: left;
}

#body-wrap.type-link #site-title {
    position: relative;
    display: inline-block;
    margin: 0;
    color: transparent !important;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1;
    letter-spacing: 0;
}

#body-wrap.type-link #site-title::before {
    content: "友链";
    color: #f6f9fc;
}

#body-wrap.type-link #site-title::after {
    content: "friend.nodes / signal exchange";
    display: block;
    margin-top: 18px;
    color: var(--link-accent);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-link #page-site-info::before {
    content: "LINK HUB  /  FRIEND NODES  /  STATUS ONLINE";
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(103, 232, 185, .28);
    border-radius: 6px;
    background: rgba(8, 12, 18, .46);
    color: #b7c7d8;
    backdrop-filter: blur(12px);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .05em;
}

#body-wrap.type-link #page-site-info::after {
    content: "gaifan@links:~$ ping trusted-friends";
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 11px 14px;
    border-left: 2px solid var(--link-accent);
    background: rgba(8, 12, 18, .58);
    color: #d8e2ec;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .26);
    font: 600 13px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-link #content-inner.layout {
    display: block !important;
    max-width: 1120px !important;
}

#body-wrap.type-link #page {
    width: 100% !important;
    border: 1px solid rgba(132, 154, 178, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(rgba(103, 232, 185, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 185, 0.024) 1px, transparent 1px),
        radial-gradient(circle at 12% 18%, rgba(103, 232, 185, 0.12), transparent 27%),
        radial-gradient(circle at 88% 16%, rgba(255, 122, 182, 0.12), transparent 25%),
        radial-gradient(circle at 78% 88%, rgba(167, 139, 250, 0.11), transparent 30%),
        rgba(8, 12, 18, 0.84) !important;
    background-size: 42px 42px, 42px 42px, auto, auto, auto, auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(16px);
}

#body-wrap.type-link #article-container {
    display: flex;
    flex-direction: column;
    color: #d8e2ec;
}

#body-wrap.type-link .link-signal-hero {
    order: -1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    gap: 22px;
    margin: 4px 0 34px;
    padding: 0;
}

#body-wrap.type-link .link-signal-copy,
#body-wrap.type-link .link-anime-visual {
    min-height: 250px;
    border: 1px solid rgba(132, 154, 178, .16);
    border-radius: 9px;
    background: rgba(12, 18, 26, .68);
}

#body-wrap.type-link .link-signal-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}

#body-wrap.type-link .link-signal-kicker {
    color: var(--link-accent);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-link .link-signal-copy h2 {
    margin: 16px 0 12px !important;
    color: #f6f9fc;
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.18;
    letter-spacing: 0;
}

#body-wrap.type-link .link-signal-copy p {
    max-width: 620px;
    margin: 0;
    color: #aab7c5;
    font-size: 15px;
    line-height: 1.9;
}

#body-wrap.type-link .link-signal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

#body-wrap.type-link .link-signal-meta span {
    padding: 7px 10px;
    border: 1px solid rgba(132, 154, 178, .16);
    border-radius: 6px;
    background: rgba(7, 11, 17, .58);
    color: #b7c7d8;
    font: 700 11px/1 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .06em;
}

#body-wrap.type-link .link-signal-meta span:nth-child(2) {
    border-color: rgba(255, 122, 182, .3);
    color: #ffc2dc;
}

#body-wrap.type-link .link-anime-visual {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    margin: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 122, 182, .14), transparent 38%),
        linear-gradient(315deg, rgba(103, 232, 185, .12), transparent 40%),
        var(--link-visual-image),
        rgba(12, 18, 26, .78);
    background-position: center;
    background-size: cover;
}

#body-wrap.type-link .link-anime-visual::before {
    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(255, 122, 182, .18);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(255, 122, 182, .2) 1px, transparent 1px),
        linear-gradient(rgba(103, 232, 185, .13) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .42;
    pointer-events: none;
}

#body-wrap.type-link .link-anime-visual::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 24px;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(103, 232, 185, .24);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 13px, rgba(103, 232, 185, .16) 14px 15px);
    pointer-events: none;
}

#body-wrap.type-link .link-anime-visual-placeholder {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    background: linear-gradient(180deg, transparent, rgba(3, 7, 12, .54));
}

#body-wrap.type-link .link-anime-visual-placeholder span,
#body-wrap.type-link .link-anime-visual-placeholder small {
    color: #ffc2dc;
    font: 700 11px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-link .link-anime-visual-placeholder strong {
    margin: 8px 0 8px;
    color: #f6f9fc;
    font-size: 22px;
    letter-spacing: 0;
}

#body-wrap.type-link .flink {
    order: 1;
    margin-top: 4px;
}

#body-wrap.type-link .flink h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 8px !important;
    color: #f6f9fc;
    font-size: 22px;
    letter-spacing: 0;
}

#body-wrap.type-link .flink h2::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--link-accent);
    box-shadow: 0 0 18px rgba(103, 232, 185, .68);
}

#body-wrap.type-link .flink-desc {
    margin: 0 0 14px;
    color: #aab7c5;
    font: 600 13px/1.6 "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-link .flink .flink-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    overflow: visible;
    padding: 12px 0 2px;
    text-align: left;
}

#body-wrap.type-link .flink .flink-list > .flink-list-item {
    float: none;
    width: auto !important;
    margin: 0;
    border: 1px solid rgba(132, 154, 178, .15);
    background: rgba(12, 18, 26, .72);
    box-shadow: none;
}

#body-wrap.type-link .flink .flink-list > .flink-list-item::before {
    z-index: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)),
        linear-gradient(135deg, rgba(103, 232, 185, .12), rgba(255, 122, 182, .09)),
        rgba(255, 255, 255, .035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px) saturate(1.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
}

#body-wrap.type-link .flink .flink-list > .flink-list-item a {
    position: relative;
    z-index: 1;
    display: block;
    color: #f6f9fc !important;
}

#body-wrap.type-link .flink .flink-list > .flink-list-item a .flink-item-icon {
    background: rgba(7, 11, 17, .78);
}

#body-wrap.type-link .flink .flink-item-name {
    color: #f6f9fc;
}

#body-wrap.type-link .flink .flink-item-desc {
    color: #aab7c5;
}

#body-wrap.type-link #post-comment {
    margin-top: 28px;
}

/* ==========================================================================
   Shuoshuo: life signal stream
   ========================================================================== */

#body-wrap.type-shuoshuo {
    --life-accent: #8be9d4;
    --life-warm: #ffd166;
    --life-pink: #ff9ecb;
    --life-ink: #f6f9fc;
}

#body-wrap.type-shuoshuo #page-header.not-home-page {
    min-height: 360px;
}

#body-wrap.type-shuoshuo #page-header.not-home-page::before {
    background:
        radial-gradient(circle at 16% 30%, rgba(255, 209, 102, .18), transparent 24%),
        radial-gradient(circle at 78% 24%, rgba(255, 158, 203, .16), transparent 26%),
        linear-gradient(180deg, rgba(3, 7, 12, .28), rgba(3, 7, 12, .84)) !important;
}

#body-wrap.type-shuoshuo #page-site-info {
    top: 54%;
    width: min(920px, calc(100% - 36px));
    text-align: left;
}

#body-wrap.type-shuoshuo #site-title {
    position: relative;
    display: inline-block;
    margin: 0;
    color: transparent !important;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1;
    letter-spacing: 0;
}

#body-wrap.type-shuoshuo #site-title::before {
    content: "说说";
    color: var(--life-ink);
}

#body-wrap.type-shuoshuo #site-title::after {
    content: "life.signal / random moments";
    display: block;
    margin-top: 18px;
    color: var(--life-accent);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#body-wrap.type-shuoshuo #page-site-info::before {
    content: "MOOD ONLINE  /  DAILY LOG  /  LIFE CACHE";
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(139, 233, 212, .28);
    border-radius: 6px;
    background: rgba(8, 12, 18, .42);
    color: #d7dee8;
    backdrop-filter: blur(12px);
    font: 700 12px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .05em;
}

#body-wrap.type-shuoshuo #page-site-info::after {
    content: "today.mood => keep a small, bright record";
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 11px 14px;
    border-left: 2px solid var(--life-warm);
    background: rgba(8, 12, 18, .52);
    color: #f1e7c8;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
    font: 600 13px/1.2 "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-shuoshuo #content-inner.layout {
    display: block !important;
    max-width: 960px !important;
}

#body-wrap.type-shuoshuo #aside-content {
    display: none !important;
}

#body-wrap.type-shuoshuo #page {
    width: 100% !important;
    border: 1px solid rgba(132, 154, 178, 0.16);
    border-radius: 10px;
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 209, 102, .11), transparent 26%),
        radial-gradient(circle at 86% 16%, rgba(255, 158, 203, .1), transparent 26%),
        linear-gradient(rgba(139, 233, 212, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 233, 212, 0.018) 1px, transparent 1px),
        rgba(8, 12, 18, .78) !important;
    background-size: auto, auto, 44px 44px, 44px 44px, auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(16px);
}

#body-wrap.type-shuoshuo #article-container {
    position: relative;
    min-height: 300px;
    padding-top: 164px;
}

#body-wrap.type-shuoshuo #article-container::before {
    content: "生活不是只有编译和日志，也有晚风、咖啡、音乐、截图和忽然冒出来的小想法。";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 116px;
    padding: 30px 32px;
    border: 1px solid rgba(132, 154, 178, .15);
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(255, 209, 102, .13), transparent 34%),
        linear-gradient(315deg, rgba(255, 158, 203, .12), transparent 34%),
        rgba(12, 18, 26, .66);
    color: #d8e2ec;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    line-height: 1.75;
}

#body-wrap.type-shuoshuo #article-container::after {
    content: "MOOD  /  PHOTO SLOT  /  RANDOM NOTES";
    position: absolute;
    top: 104px;
    left: 32px;
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid rgba(255, 209, 102, .24);
    border-radius: 6px;
    background: rgba(7, 11, 17, .52);
    color: #f1e7c8;
    font: 700 11px/1 "Cascadia Code", Consolas, Monaco, monospace;
    letter-spacing: .06em;
}

#body-wrap.type-shuoshuo #article-container:empty::before {
    content: "还没有写下第一条说说。等你把日常碎片放进 source/_data/shuoshuo.yml，这里会自动变成生活流。";
}

#body-wrap.type-shuoshuo .shuoshuo-item {
    position: relative;
    margin: 0 0 18px !important;
    padding: 28px 28px 24px !important;
    border: 1px solid rgba(132, 154, 178, .15);
    border-radius: 9px;
    background:
        linear-gradient(90deg, rgba(139, 233, 212, .08), transparent 28%),
        rgba(12, 18, 26, .74) !important;
    box-shadow: none !important;
    overflow: hidden;
}

#body-wrap.type-shuoshuo .shuoshuo-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--life-accent), var(--life-warm), var(--life-pink));
}

#body-wrap.type-shuoshuo .shuoshuo-item:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 233, 212, .34);
}

#body-wrap.type-shuoshuo .shuoshuo-avatar {
    width: 44px !important;
    height: 44px !important;
    border: 2px solid rgba(139, 233, 212, .32);
    box-shadow: 0 0 22px rgba(139, 233, 212, .18);
}

#body-wrap.type-shuoshuo .shuoshuo-author {
    color: var(--life-ink);
    font-weight: 800;
}

#body-wrap.type-shuoshuo .shuoshuo-date {
    color: #aab7c5 !important;
    font: 600 12px/1.4 "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-shuoshuo .shuoshuo-content {
    color: #d8e2ec;
    font-size: 15px;
    line-height: 1.9;
}

#body-wrap.type-shuoshuo .shuoshuo-content img {
    max-height: 420px;
    border-radius: 8px;
    border: 1px solid rgba(132, 154, 178, .16);
    object-fit: cover;
}

#body-wrap.type-shuoshuo .shuoshuo-footer .shuoshuo-tag {
    border-color: rgba(255, 209, 102, .34) !important;
    background: rgba(255, 209, 102, .08);
    color: #f1e7c8 !important;
    font: 700 12px/1.6 "Cascadia Code", Consolas, Monaco, monospace;
}

#body-wrap.type-shuoshuo .shuoshuo-footer .shuoshuo-tag:hover {
    background: rgba(255, 209, 102, .18) !important;
    color: #fff3d0 !important;
}

#body-wrap.type-shuoshuo .shuoshuo-comment-btn {
    color: var(--life-pink) !important;
}

#body-wrap.type-shuoshuo .shuoshuo-navigation {
    margin-top: 20px;
}

/* ==========================================================================
   Post: restrained cover media
   ========================================================================== */

#body-wrap.post #page-header.post-bg {
    height: 320px !important;
    min-height: 320px !important;
    border-radius: 0 0 22px 22px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

#body-wrap.post #page-header.post-bg::before {
    border-radius: inherit;
}

#body-wrap.post #page-header #post-info {
    bottom: 26px;
}

#body-wrap.post #article-container > p:first-child:has(> img:only-child) {
    text-align: center;
}

#body-wrap.post #article-container > p:first-child > img:only-child {
    display: block;
    width: min(760px, 82%);
    height: auto;
    margin: 0 auto 24px;
    border-radius: 16px;
    border: 1px solid rgba(132, 154, 178, .16);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .18);
}

@media (max-width: 768px) {
    body:has(#archive) #page-header.not-home-page {
        min-height: 300px;
    }

    body:has(#archive) #page-site-info {
        top: 56%;
        width: calc(100% - 30px);
    }

    body:has(#archive) #page-site-info::before {
        content: "LOGS INDEXED / ONLINE";
        font-size: 11px;
    }

    body:has(#archive) #page-site-info::after {
        font-size: 11px;
        white-space: normal;
    }

    #content-inner.layout:has(> #archive) {
        padding: 20px 8px !important;
    }

    #archive {
        padding: 22px 16px !important;
    }

    #archive .article-sort-item {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 12px;
        padding: 14px 14px 14px 38px;
    }

    #archive .article-sort-item::before {
        left: 13px !important;
    }

    #archive .article-sort-item::after {
        left: 17px;
    }

    #archive .article-sort-item.year {
        padding-left: 38px !important;
        font-size: 24px;
    }

    #archive .article-sort-item.year::before {
        left: 12px !important;
    }

    #archive .article-sort-item-img {
        width: 74px !important;
        height: 68px !important;
    }

    #body-wrap.type-categories #page-header.not-home-page {
        min-height: 300px;
    }

    #body-wrap.type-categories #page-site-info {
        top: 56%;
        width: calc(100% - 30px);
    }

    #body-wrap.type-categories #page-site-info::before {
        content: "CATEGORY INDEX / ONLINE";
        font-size: 11px;
    }

    #body-wrap.type-categories #page-site-info::after {
        font-size: 11px;
        white-space: normal;
    }

    #body-wrap.type-categories #content-inner.layout {
        padding: 20px 8px !important;
    }

    #body-wrap.type-categories #page {
        padding: 22px 16px !important;
    }

    #body-wrap.type-categories .category-lists ul {
        grid-template-columns: 1fr;
    }

    #body-wrap.type-tags #page-header.not-home-page {
        min-height: 300px;
    }

    #body-wrap.type-tags #page-site-info {
        top: 56%;
        width: calc(100% - 30px);
    }

    #body-wrap.type-tags #page-site-info::before {
        content: "TAG INDEX / ONLINE";
        font-size: 11px;
    }

    #body-wrap.type-tags #page-site-info::after {
        font-size: 11px;
        white-space: normal;
    }

    #body-wrap.type-tags #content-inner.layout {
        padding: 20px 8px !important;
    }

    #body-wrap.type-tags #page {
        padding: 22px 16px !important;
    }

    #body-wrap.type-tags .tag-cloud-list {
        gap: 10px;
        padding: 18px 14px 54px;
    }

    #body-wrap.type-tags .tag-cloud-list::before {
        position: static;
        flex-basis: 100%;
        margin-bottom: 4px;
    }

    #body-wrap.type-tags .tag-cloud-list::after {
        right: 14px;
        bottom: 12px;
        width: 72px;
        height: 72px;
    }

    #body-wrap.type-tags .tag-cloud-list a {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px !important;
    }

    #body-wrap.type-link #page-header.not-home-page {
        min-height: 300px;
    }

    #body-wrap.type-link #page-site-info {
        top: 56%;
        width: calc(100% - 30px);
    }

    #body-wrap.type-link #page-site-info::before {
        content: "LINK HUB / ONLINE";
        font-size: 11px;
    }

    #body-wrap.type-link #page-site-info::after {
        font-size: 11px;
        white-space: normal;
    }

    #body-wrap.type-link #content-inner.layout {
        padding: 20px 8px !important;
    }

    #body-wrap.type-link #page {
        padding: 22px 16px !important;
    }

    #body-wrap.type-link .link-signal-hero {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #body-wrap.type-link .link-signal-copy,
    #body-wrap.type-link .link-anime-visual {
        min-height: 220px;
    }

    #body-wrap.type-link .link-signal-copy {
        padding: 22px 18px;
    }

    #body-wrap.type-link .link-anime-visual-placeholder {
        padding: 22px 18px;
    }

    #body-wrap.type-link .flink .flink-list {
        grid-template-columns: 1fr;
    }

    #body-wrap.type-shuoshuo #page-header.not-home-page {
        min-height: 300px;
    }

    #body-wrap.type-shuoshuo #page-site-info {
        top: 56%;
        width: calc(100% - 30px);
    }

    #body-wrap.type-shuoshuo #page-site-info::before {
        content: "MOOD ONLINE / LIFE CACHE";
        font-size: 11px;
    }

    #body-wrap.type-shuoshuo #page-site-info::after {
        font-size: 11px;
        white-space: normal;
    }

    #body-wrap.type-shuoshuo #content-inner.layout {
        padding: 20px 8px !important;
    }

    #body-wrap.type-shuoshuo #page {
        padding: 22px 16px !important;
    }

    #body-wrap.type-shuoshuo #article-container {
        padding-top: 184px;
    }

    #body-wrap.type-shuoshuo #article-container::before {
        min-height: 136px;
        padding: 22px 18px;
        font-size: 15px;
    }

    #body-wrap.type-shuoshuo #article-container::after {
        top: 126px;
        left: 18px;
        font-size: 10px;
    }

    #body-wrap.type-shuoshuo .shuoshuo-item {
        padding: 22px 18px 20px !important;
    }

    #body-wrap.post #page-header.post-bg {
        height: 250px !important;
        min-height: 250px !important;
        border-radius: 0 0 16px 16px;
    }

    #body-wrap.post #page-header #post-info {
        bottom: 20px;
    }

    #body-wrap.post #article-container > p:first-child > img:only-child {
        width: 100%;
        border-radius: 12px;
    }
}