/* =========================================================
   htj · CNBlogs Theme
   Style: GitHub × Vercel × Minimal
   Base Skin: LessIsMoreRight
   ========================================================= */


/* ---------- 1. 全局 ---------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #f6f8fa;

    color: #1f2328;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        "Microsoft YaHei",
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.75;

    -webkit-font-smoothing: antialiased;
}


/* ---------- 2. 链接 ---------- */

a {
    color: #0969da;
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: #0550ae;
    text-decoration: none;
}


/* ---------- 3. 整个博客主体 ---------- */

#home {
    width: min(1180px, calc(100% - 48px));
    min-width: 0;

    margin: 32px auto;

    padding: 0 34px 36px;

    background: #ffffff;

    border: 1px solid #d8dee4;
    border-radius: 14px;

    box-shadow:
        0 1px 2px rgba(31, 35, 40, 0.04),
        0 8px 28px rgba(140, 149, 159, 0.12);
}


/* ---------- 4. 顶部博客标题 ---------- */

#header {
    padding-top: 30px;
}

#blogTitle {
    height: auto;
    min-height: 82px;
    padding: 6px 2px 22px;
}

#blogTitle h1 {
    margin: 0;

    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.8px;
}

#blogTitle h1 a {
    color: #1f2328;
}

#blogTitle h1 a:hover {
    color: #0969da;
}

#blogTitle h2 {
    margin-top: 8px;

    color: #656d76;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}


/* ---------- 5. 导航栏 ---------- */

#navigator {
    height: auto;

    margin: 0;

    padding: 0;

    border-top: 1px solid #d8dee4;
    border-bottom: 1px solid #d8dee4;

    background: transparent;
}

#navList {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 28px;

    padding: 0;
    margin: 0;
}

#navList li {
    margin: 0;
}

#navList a {
    width: auto;
    height: auto;

    padding: 16px 0;

    color: #57606a;

    font-size: 14px;
    font-weight: 600;
}

#navList a:link,
#navList a:visited {
    color: #57606a;
}

#navList a:hover {
    color: #0969da;
}

.blogStats {
    margin-top: 17px;

    color: #8c959f;

    font-size: 12px;
}


/* ---------- 6. 主体区域 ---------- */

#main {
    width: 100%;

    margin-top: 32px;

    display: flex;

    gap: 38px;
}

#mainContent {
    width: calc(100% - 280px);

    margin: 0;
    padding: 0;

    float: none;
}

#mainContent .forFlow {
    width: 100%;
    float: none;
}


/* ---------- 7. 首页文章卡片 ---------- */

.day {
    position: relative;

    margin: 0 0 22px;
    padding: 26px 28px 24px;

    background: #ffffff;

    border: 1px solid #d8dee4;
    border-radius: 12px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.day:hover {
    transform: translateY(-2px);

    border-color: #afb8c1;

    box-shadow:
        0 3px 6px rgba(140, 149, 159, 0.08),
        0 8px 24px rgba(140, 149, 159, 0.12);
}


/* 日期标题弱化 */

.dayTitle {
    position: static;

    width: auto;
    height: auto;

    margin: 0 0 10px;

    padding: 0;

    border: none;

    background: transparent;

    color: #8c959f;

    font-size: 12px;
    line-height: 1.5;

    text-align: left;
}

.dayTitle a {
    width: auto;

    margin: 0;

    color: #8c959f;

    font-size: 12px;
}


/* 去掉旧主题装饰圆点 */

.day:after {
    display: none !important;
}


/* ---------- 8. 文章标题 ---------- */

.postTitle {
    width: 100%;

    margin: 0 0 10px;

    padding: 0;

    float: none;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.45;

    letter-spacing: -0.3px;
}

.postTitle a,
.postTitle a:link,
.postTitle a:visited {
    color: #1f2328;

    font-family: inherit;

    font-size: inherit;

    font-weight: 700;

    background: transparent;
}

.postTitle a:hover {
    color: #0969da;
}


/* ---------- 9. 首页文章摘要 ---------- */

.postCon,
.entrylistPostSummary {
    width: 100%;

    margin: 0;

    padding: 8px 0 0;

    color: #57606a;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.85;

    text-align: left;
}


/* 阅读全文 */

.c_b_p_desc_readmore {
    display: inline-block;

    width: auto;

    margin-top: 16px;

    padding: 7px 12px;

    border: 1px solid #d0d7de;
    border-radius: 7px;

    background: #f6f8fa;

    color: #24292f !important;

    font-size: 13px;
    font-weight: 600;

    transition: all .2s ease;
}

.c_b_p_desc_readmore:hover {
    background: #f3f4f6;

    border-color: #afb8c1;

    color: #0969da !important;
}


/* ---------- 10. 文章底部信息 ---------- */

.postDesc {
    width: 100%;

    margin: 16px 0 0;
    padding-top: 14px;

    border-top: 1px solid #f0f1f2;

    color: #8c959f;

    font-family: inherit;

    font-size: 12px;

    line-height: 1.7;

    text-align: left;
}


/* ---------- 11. 右侧栏 ---------- */

#sideBar {
    width: 242px;

    margin: 0;

    padding: 0;

    float: none;
}

#sideBarMain {
    width: 100%;
}

.catList,
.catListArticleArchive,
.catListArticleCategory,
.catListBlogRank,
.catListComment,
.catListEssay,
.catListFeedback,
.catListImageCategory,
.catListLink,
.catListNoteBook,
.catListPostArchive,
.catListPostCategory,
.catListTag,
.catListView,
.mySearch,
.newsItem {
    margin-bottom: 18px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #d8dee4;
    border-radius: 10px;

    word-wrap: break-word;
}


/* 侧边栏标题 */

.catListTitle,
.catListComment h3,
.catListEssay h3,
.catListView h3,
.catListFeedback h3,
.catListArchive h3,
.catListLink h3 {
    margin: 0 0 12px;

    padding: 0 0 10px;

    border-bottom: 1px solid #d8dee4;

    color: #1f2328;

    font-size: 14px;
    font-weight: 700;
}


/* 侧栏链接 */

#sideBar a {
    color: #57606a;

    font-size: 13px;
}

#sideBar a:hover {
    color: #0969da;

    text-decoration: none;
}


/* ---------- 12. 搜索框 ---------- */

.input_my_zzk {
    width: 100%;
    height: 36px;

    padding: 0 12px;

    background: #ffffff;

    color: #24292f;

    border: 1px solid #d0d7de;
    border-radius: 7px;

    outline: none;

    transition:
        border .2s ease,
        box-shadow .2s ease;
}

.input_my_zzk:focus {
    border-color: #0969da;

    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}


/* ---------- 13. 文章详情 ---------- */

#topics {
    padding: 30px 34px;

    background: #ffffff;

    border: 1px solid #d8dee4;
    border-radius: 12px;
}

#topics .postTitle {
    margin-bottom: 12px;

    font-size: 30px;
}


/* ---------- 14. Markdown 正文 ---------- */

#cnblogs_post_body {
    color: #24292f;

    font-size: 16px;
    line-height: 1.9;
}

#cnblogs_post_body p {
    margin: 1em 0;
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4 {
    color: #1f2328;

    font-weight: 700;

    line-height: 1.35;
}

#cnblogs_post_body h1 {
    margin-top: 1.8em;
    padding-bottom: .35em;

    border-bottom: 1px solid #d8dee4;

    font-size: 28px;
}

#cnblogs_post_body h2 {
    margin-top: 1.7em;
    padding-bottom: .3em;

    border-bottom: 1px solid #d8dee4;

    font-size: 23px;
}

#cnblogs_post_body h3 {
    margin-top: 1.5em;

    font-size: 19px;
}


/* ---------- 15. 引用 ---------- */

#cnblogs_post_body blockquote {
    margin: 18px 0;

    padding: 10px 18px;

    border-left: 4px solid #d0d7de;

    background: #f6f8fa;

    color: #57606a;
}


/* ---------- 16. 行内代码 ---------- */

#cnblogs_post_body code {
    padding: .15em .4em;

    background: rgba(175, 184, 193, .2);

    border-radius: 5px;

    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        Consolas,
        monospace;

    font-size: 90%;
}


/* ---------- 17. 代码块 ---------- */

#cnblogs_post_body pre {
    overflow-x: auto;

    margin: 18px 0;

    padding: 18px;

    background: #f6f8fa;

    border: 1px solid #d8dee4;
    border-radius: 9px;

    line-height: 1.65;
}

#cnblogs_post_body pre code {
    padding: 0;

    background: transparent;

    border-radius: 0;
}


/* ---------- 18. 表格 ---------- */

#cnblogs_post_body table {
    width: 100%;

    margin: 18px 0;

    border-collapse: collapse;
}

#cnblogs_post_body th,
#cnblogs_post_body td {
    padding: 9px 13px;

    border: 1px solid #d0d7de;
}

#cnblogs_post_body th {
    background: #f6f8fa;

    font-weight: 600;
}


/* ---------- 19. 图片 ---------- */

#cnblogs_post_body img {
    max-width: 100%;

    border-radius: 8px;
}


/* ---------- 20. 横线 ---------- */

#cnblogs_post_body hr {
    height: 1px;

    margin: 28px 0;

    background: #d8dee4;

    border: none;
}


/* ---------- 21. 分页 ---------- */

.topicListFooter {
    margin-top: 28px;
}

.pager a,
.pager span {
    display: inline-block;

    margin: 0 3px;

    padding: 6px 10px;

    border: 1px solid #d0d7de;
    border-radius: 6px;

    background: #ffffff;

    color: #24292f;
}


/* ---------- 22. 页脚 ---------- */

#footer {
    padding-top: 28px;

    color: #8c959f;

    font-size: 12px;

    text-align: center;
}


/* ---------- 23. 手机 / 平板适配 ---------- */

@media screen and (max-width: 900px) {

    body {
        background: #ffffff;
    }

    #home {
        width: 100%;

        margin: 0;

        padding: 0 20px 30px;

        border: none;
        border-radius: 0;

        box-shadow: none;
    }

    #main {
        display: block;
    }

    #mainContent {
        width: 100%;
    }

    #sideBar {
        width: 100%;

        margin-top: 28px;
    }

    #navList {
        gap: 18px;

        overflow-x: auto;
    }

    .blogStats {
        display: none;
    }

    .day {
        padding: 22px 20px;
    }

    #topics {
        padding: 24px 20px;
    }
}


/* ---------- 24. 手机 ---------- */

@media screen and (max-width: 600px) {

    #home {
        padding-left: 14px;
        padding-right: 14px;
    }

    #blogTitle h1 {
        font-size: 26px;
    }

    #navList {
        min-height: 48px;
    }

    #navList a {
        padding: 13px 0;

        font-size: 13px;
    }

    .day {
        padding: 18px 16px;

        border-radius: 9px;
    }

    .postTitle {
        font-size: 20px;
    }

    #topics .postTitle {
        font-size: 25px;
    }

    #cnblogs_post_body {
        font-size: 15px;
    }
}

/* =========================================================
   htj Theme Patch 01
   首页布局优化
   ========================================================= */


/* ---------- 1. 主体重新布局 ---------- */

#main {
    display: block !important;
    width: 100% !important;

    margin: 38px 0 0 !important;
    padding: 0 !important;
}


/* ---------- 2. 隐藏博客园传统右侧栏 ---------- */

#sideBar {
    display: none !important;
}


/* ---------- 3. 主文章区域占满 ---------- */

#mainContent {
    width: 100% !important;
    max-width: 920px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    float: none !important;

    position: static !important;
}

#mainContent .forFlow {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


/* ---------- 4. 首页文章卡片 ---------- */

.day {
    width: 100% !important;

    margin: 0 0 28px !important;
    padding: 30px 32px !important;

    background: #ffffff !important;

    border: 1px solid #d8dee4 !important;
    border-radius: 12px !important;

    box-shadow: none !important;
}

.day:hover {
    transform: translateY(-2px);

    border-color: #afb8c1 !important;

    box-shadow:
        0 8px 24px rgba(140,149,159,.12) !important;
}


/* ---------- 5. 顶部标题强制修正 ---------- */

#blogTitle h1,
#blogTitle h1 a,
#blogTitle h1 a:link,
#blogTitle h1 a:visited {
    color: #1f2328 !important;

    font-size: 30px !important;
    font-weight: 750 !important;

    text-decoration: none !important;
}

#blogTitle h1 a:hover {
    color: #0969da !important;
}


/* ---------- 6. 子标题 ---------- */

#blogTitle h2 {
    color: #656d76 !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    margin-top: 8px !important;
}


/* ---------- 7. 顶部区域收紧 ---------- */

#header {
    padding-top: 22px !important;
}

#blogTitle {
    padding: 10px 2px 24px !important;
    min-height: 0 !important;
}


/* ---------- 8. 导航 ---------- */

#navigator {
    margin: 0 !important;

    border-top: 1px solid #d8dee4 !important;
    border-bottom: 1px solid #d8dee4 !important;

    background: transparent !important;
}

#navList {
    display: flex !important;

    align-items: center;

    gap: 30px;

    min-height: 54px !important;

    padding: 0 !important;
}

#navList li {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

#navList a,
#navList a:link,
#navList a:visited {
    display: block;

    width: auto !important;

    padding: 15px 0 !important;

    color: #57606a !important;

    background: transparent !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

#navList a:hover {
    color: #0969da !important;
}


/* ---------- 9. 博客统计弱化 ---------- */

.blogStats {
    margin-top: 16px !important;

    color: #8c959f !important;

    font-size: 12px !important;
}


/* ---------- 10. 日期 ---------- */

.dayTitle,
.dayTitle a {
    color: #8c959f !important;

    font-size: 12px !important;

    background: none !important;

    border: none !important;
}


/* ---------- 11. 文章标题 ---------- */

.postTitle {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}

.postTitle a,
.postTitle a:link,
.postTitle a:visited {
    color: #1f2328 !important;

    font-size: 24px !important;
    font-weight: 700 !important;

    border: none !important;

    background: none !important;

    text-decoration: none !important;
}

.postTitle a:hover {
    color: #0969da !important;
}


/* ---------- 12. 摘要 ---------- */

.postCon {
    color: #57606a !important;

    font-size: 14px !important;

    line-height: 1.85 !important;
}


/* ---------- 13. 页面底部 ---------- */

#footer {
    margin-top: 56px !important;
    padding: 26px 0 !important;

    border-top: 1px solid #d8dee4;

    color: #8c959f !important;

    text-align: center;
}


/* ---------- 14. 平板 ---------- */

@media screen and (max-width: 900px) {

    #mainContent {
        max-width: 100% !important;
    }

    .day {
        padding: 24px !important;
    }
}


/* ---------- 15. 手机 ---------- */

@media screen and (max-width: 600px) {

    .day {
        padding: 20px 17px !important;
    }

    .postTitle a {
        font-size: 20px !important;
    }
}
/* =========================================================
   htj Hero Section
   ========================================================= */


/* ---------- Hero 主区域 ---------- */

.htj-hero {
    max-width: 920px;

    margin: 54px auto 18px;
    padding: 68px 32px 66px;

    text-align: center;

    border-bottom: 1px solid #d8dee4;
}


/* ---------- 顶部小标签 ---------- */

.htj-hero-badge {
    display: inline-block;

    margin-bottom: 22px;
    padding: 6px 12px;

    background: #f6f8fa;

    border: 1px solid #d8dee4;
    border-radius: 20px;

    color: #57606a;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .2px;
}


/* ---------- 主标题 ---------- */

.htj-hero-title {
    margin: 0;

    color: #1f2328;

    font-size: clamp(44px, 6vw, 72px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -2.5px;
}

.htj-hero-title span {
    color: #0969da;
}


/* ---------- 身份 ---------- */

.htj-hero-desc {
    margin: 22px 0 0;

    color: #24292f;

    font-size: 20px;
    font-weight: 600;
}


/* ---------- 介绍 ---------- */

.htj-hero-intro {
    max-width: 620px;

    margin: 14px auto 0;

    color: #656d76;

    font-size: 16px;
    line-height: 1.8;
}


/* ---------- 技术标签 ---------- */

.htj-hero-tags {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 25px;
}

.htj-hero-tags span {
    display: inline-flex;

    align-items: center;

    padding: 5px 11px;

    background: #f6f8fa;

    border: 1px solid #d8dee4;
    border-radius: 20px;

    color: #57606a;

    font-size: 12px;
    font-weight: 500;
}


/* ---------- 按钮区域 ---------- */

.htj-hero-actions {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 12px;

    margin-top: 30px;
}


/* ---------- 通用按钮 ---------- */

.htj-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.htj-btn:hover {
    transform: translateY(-1px);
}


/* ---------- 黑色主按钮 ---------- */

.htj-btn-primary {
    background: #24292f;

    border: 1px solid #24292f;

    color: #ffffff !important;
}

.htj-btn-primary:hover {
    background: #1f2328;

    color: #ffffff !important;
}


/* ---------- GitHub 次按钮 ---------- */

.htj-btn-secondary {
    background: #ffffff;

    border: 1px solid #d0d7de;

    color: #24292f !important;
}

.htj-btn-secondary:hover {
    background: #f6f8fa;

    border-color: #afb8c1;

    color: #24292f !important;
}


/* ---------- Motto ---------- */

.htj-hero-motto {
    margin-top: 34px;

    color: #8c959f;

    font-family:
        Georgia,
        "Times New Roman",
        "Microsoft YaHei",
        serif;

    font-size: 14px;

    font-style: italic;
}

.htj-hero-motto span {
    margin-left: 4px;

    color: #656d76;
}


/* ---------- 平板 ---------- */

@media screen and (max-width: 900px) {

    .htj-hero {
        margin-top: 36px;

        padding: 54px 22px;
    }

    .htj-hero-title {
        letter-spacing: -1.8px;
    }
}


/* ---------- 手机 ---------- */

@media screen and (max-width: 600px) {

    .htj-hero {
        margin-top: 22px;

        padding: 44px 12px 48px;
    }

    .htj-hero-title {
        font-size: 42px;

        letter-spacing: -1.4px;
    }

    .htj-hero-desc {
        font-size: 17px;
    }

    .htj-hero-intro {
        font-size: 14px;
    }

    .htj-hero-actions {
        flex-direction: column;
    }

    .htj-btn {
        width: 190px;
    }
}
/* =========================================================
   htj Theme Patch 02
   去除博客园默认头部，让主页成为完整 Portfolio
   ========================================================= */

/* 隐藏原来的博客标题区域 */
#header {
    display: none !important;
}

/* 隐藏博客园默认导航栏 */
#navigator {
    display: none !important;
}

/* 去掉外层大白色卡片 */
#home {
    width: min(1100px, calc(100% - 48px)) !important;

    margin: 0 auto !important;
    padding: 0 0 50px !important;

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

/* 正文和 Hero 更自然地衔接 */
#main {
    margin-top: 0 !important;
}

/* 博客统计暂时隐藏 */
.blogStats {
    display: none !important;
}

/* 文章区域 */
#mainContent {
    max-width: 920px !important;
    margin: 0 auto !important;
}

/* 页脚也不要出现大卡片感 */
#footer {
    max-width: 920px;
    margin: 70px auto 0 !important;
}
/* =========================================================
   Custom Navigation
   ========================================================= */

.htj-navbar {
    width: min(1100px, calc(100% - 48px));
    height: 72px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #d8dee4;
}


/* Logo */

.htj-logo,
.htj-logo:link,
.htj-logo:visited {
    color: #1f2328;

    font-size: 20px;
    font-weight: 750;

    letter-spacing: -0.5px;

    text-decoration: none !important;
}

.htj-logo span {
    color: #0969da;
}


/* 导航链接 */

.htj-nav-links {
    display: flex;
    align-items: center;

    gap: 30px;
}

.htj-nav-links a,
.htj-nav-links a:link,
.htj-nav-links a:visited {
    position: relative;

    color: #57606a;

    font-size: 14px;
    font-weight: 550;

    text-decoration: none !important;

    transition: color .18s ease;
}

.htj-nav-links a:hover {
    color: #1f2328;
}


/* hover 小下划线 */

.htj-nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: #0969da;

    transition: width .2s ease;
}

.htj-nav-links a:hover::after {
    width: 100%;
}


/* 平板 / 手机 */

@media screen and (max-width: 600px) {

    .htj-navbar {
        width: calc(100% - 28px);
        height: 62px;
    }

    .htj-nav-links {
        gap: 17px;
    }

    .htj-nav-links a {
        font-size: 12px;
    }

    .htj-nav-links a:nth-child(3) {
        display: none;
    }
}
/* =========================================================
   首页 / 文章页状态
   ========================================================= */


/* 首页 Hero 正常显示 */

.htj-is-home .htj-home-only {
    display: block;
}


/* 文章、分类等内页隐藏首页内容 */

.htj-is-inner .htj-home-only {
    display: none !important;
}


/* 内页导航栏和正文之间保持适当距离 */

.htj-is-inner .htj-navbar {
    margin-bottom: 42px;
}


/* 内页正文不需要首页那种大间距 */

.htj-is-inner #main {
    margin-top: 0 !important;
}


/* 文章详情居中 */

.htj-is-inner #mainContent {
    max-width: 920px !important;
    margin: 0 auto !important;
}
/* =========================================================
   htj Theme Enhancement
   Dark Mode / TOC / Progress / Back To Top / Code Copy
   ========================================================= */


/* =========================================================
   1. Theme Toggle
   ========================================================= */

.htj-theme-toggle {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent;

    border: 1px solid #d0d7de;
    border-radius: 7px;

    color: #57606a;

    font-size: 16px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.htj-theme-toggle:hover {
    background: #f6f8fa;

    border-color: #afb8c1;

    color: #1f2328;

    transform: translateY(-1px);
}


/* =========================================================
   2. Reading Progress
   ========================================================= */

.htj-reading-progress {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 99999;

    width: 100%;
    height: 3px;

    pointer-events: none;
}

.htj-reading-progress-bar {
    width: 100%;
    height: 100%;

    background: #0969da;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform .08s linear;
}


/* =========================================================
   3. TOC · V2
   轻量右侧目录：无卡片、无标题、更大字号
   ========================================================= */

.htj-toc {
    position: fixed;

    top: 128px;
    right: max(
        28px,
        calc((100vw - 1500px) / 2)
    );

    z-index: 30;

    width: 270px;
    max-height: calc(100vh - 178px);

    overflow-y: auto;
    overflow-x: hidden;

    padding: 2px 4px 8px 18px;

    background: transparent;

    border: none;
    border-left: 1px solid #d8dee4;
    border-radius: 0;

    box-shadow: none;
    backdrop-filter: none;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.htj-toc::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* ---------- 一级目录：h2 ---------- */

.htj-toc a.htj-toc-h2,
.htj-toc a.htj-toc-h2:link,
.htj-toc a.htj-toc-h2:visited {
    position: relative;

    display: block;

    margin: 0 0 4px;
    padding: 7px 10px;

    color: #57606a;

    background: transparent;

    border-radius: 6px;

    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.58;

    text-decoration: none !important;

    transition:
        color .15s ease,
        background .15s ease;
}


/* ---------- 二级目录：h3 ---------- */

.htj-toc a.htj-toc-h3,
.htj-toc a.htj-toc-h3:link,
.htj-toc a.htj-toc-h3:visited {
    position: relative;

    display: block;

    margin: 0 0 2px;
    padding: 5px 10px 5px 22px;

    color: #8c959f;

    background: transparent;

    border-radius: 6px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.58;

    text-decoration: none !important;

    transition:
        color .15s ease,
        background .15s ease;
}


/* ---------- hover / 当前阅读位置 ---------- */

.htj-toc a:hover {
    color: #0969da !important;

    background:
        rgba(9, 105, 218, .055) !important;
}

.htj-toc a.active {
    color: #0969da !important;

    background:
        rgba(9, 105, 218, .07) !important;

    font-weight: 600 !important;
}

.htj-toc a.active::before {
    content: "";

    position: absolute;

    left: -19px;
    top: 7px;
    bottom: 7px;

    width: 2px;

    background: #0969da;

    border-radius: 2px;
}


/* 标题跳转时不要贴到浏览器顶部 */

#cnblogs_post_body h2,
#cnblogs_post_body h3 {
    scroll-margin-top: 90px;
}


/* 屏幕空间不足时自动隐藏目录 */

@media screen and (max-width: 1480px) {

    .htj-toc {
        display: none !important;
    }

}


/* =========================================================
   Article Typography · V2
   轻微提升长文阅读体验，不改变首页
   ========================================================= */

.htj-is-inner #mainContent {
    max-width: 920px !important;
}

.htj-is-inner #topics {
    padding: 38px 38px 48px !important;
}

.htj-is-inner #cnblogs_post_body {
    color: #24292f;

    font-size: 16.5px !important;
    line-height: 1.95 !important;

    letter-spacing: .02px;
}

.htj-is-inner #cnblogs_post_body p {
    margin: 1.05em 0 !important;
}

.htj-is-inner #cnblogs_post_body h2 {
    margin: 2.15em 0 .82em !important;
    padding-bottom: .42em !important;

    border-bottom: 1px solid #d8dee4 !important;

    font-size: 25px !important;
    font-weight: 720 !important;
    line-height: 1.4 !important;

    letter-spacing: -.45px;
}

.htj-is-inner #cnblogs_post_body h3 {
    margin: 1.8em 0 .7em !important;

    font-size: 20px !important;
    font-weight: 680 !important;
    line-height: 1.45 !important;
}

.htj-is-inner #cnblogs_post_body h4 {
    margin: 1.55em 0 .6em !important;

    font-size: 17px !important;
    font-weight: 650 !important;
}

.htj-is-inner #cnblogs_post_body ul,
.htj-is-inner #cnblogs_post_body ol {
    padding-left: 1.65em !important;
}

.htj-is-inner #cnblogs_post_body li {
    margin: .42em 0 !important;

    line-height: 1.85 !important;
}

.htj-is-inner #cnblogs_post_body a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.htj-is-inner #cnblogs_post_body table {
    margin: 24px 0 !important;
}

.htj-is-inner #cnblogs_post_body td,
.htj-is-inner #cnblogs_post_body th {
    padding: 11px 14px !important;

    line-height: 1.7 !important;
}

.htj-is-inner #cnblogs_post_body img {
    display: block;

    max-width: 100%;

    margin: 26px auto !important;

    border: 1px solid #d8dee4;
    border-radius: 8px;
}

@media screen and (max-width: 600px) {

    .htj-is-inner #topics {
        padding: 24px 17px 35px !important;
    }

    .htj-is-inner #cnblogs_post_body {
        font-size: 15.5px !important;
        line-height: 1.9 !important;
    }

    .htj-is-inner #cnblogs_post_body h2 {
        font-size: 22px !important;
    }

    .htj-is-inner #cnblogs_post_body h3 {
        font-size: 18px !important;
    }

}

/* =========================================================
   4. Back To Top
   ========================================================= */

.htj-back-top {
    position: fixed;

    right: 28px;
    bottom: 30px;

    z-index: 100;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #ffffff;

    border: 1px solid #d0d7de;
    border-radius: 8px;

    color: #57606a;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 4px 14px rgba(140,149,159,.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease,
        border-color .2s ease;
}

.htj-back-top.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.htj-back-top:hover {
    border-color: #afb8c1;

    color: #0969da;
}


/* =========================================================
   5. Code Copy
   ========================================================= */

#cnblogs_post_body pre.htj-has-copy {
    position: relative;

    padding-top: 44px !important;
}

.htj-copy-code {
    position: absolute;

    top: 8px;
    right: 9px;

    padding: 4px 9px;

    background: #ffffff;

    border: 1px solid #d0d7de;
    border-radius: 5px;

    color: #656d76;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        sans-serif;

    font-size: 10px;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.htj-copy-code:hover {
    background: #f6f8fa;

    color: #0969da;

    border-color: #afb8c1;
}


/* =========================================================
   6. Footer
   ========================================================= */

#footer {
    max-width: 920px !important;

    margin: 70px auto 0 !important;
    padding: 28px 0 32px !important;

    border-top: 1px solid #d8dee4 !important;

    color: #8c959f !important;

    font-size: 11px !important;

    line-height: 1.9 !important;
}

.htj-footer-signature {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 10px;

    color: #656d76;

    font-size: 12px;
}

.htj-footer-signature a {
    color: #57606a !important;

    font-weight: 600;
}

.htj-footer-signature a:hover {
    color: #0969da !important;
}


/* =========================================================
   7. Dark Mode
   ========================================================= */

html.htj-dark {
    color-scheme: dark;
}


/* 全局 */

html.htj-dark body {
    background: #0d1117 !important;

    color: #c9d1d9 !important;
}

html.htj-dark #home {
    background: transparent !important;
}


/* 导航 */

html.htj-dark .htj-navbar {
    border-color: #30363d !important;
}

html.htj-dark .htj-logo,
html.htj-dark .htj-logo:link,
html.htj-dark .htj-logo:visited {
    color: #f0f6fc !important;
}

html.htj-dark .htj-logo span {
    color: #58a6ff !important;
}

html.htj-dark .htj-nav-links a,
html.htj-dark .htj-nav-links a:link,
html.htj-dark .htj-nav-links a:visited {
    color: #8b949e !important;
}

html.htj-dark .htj-nav-links a:hover {
    color: #f0f6fc !important;
}

html.htj-dark .htj-nav-links a::after {
    background: #58a6ff !important;
}


/* 深色模式按钮 */

html.htj-dark .htj-theme-toggle {
    background: #161b22;

    border-color: #30363d;

    color: #c9d1d9;
}

html.htj-dark .htj-theme-toggle:hover {
    background: #21262d;

    border-color: #8b949e;

    color: #ffffff;
}


/* Hero */

html.htj-dark .htj-hero {
    border-color: #30363d !important;
}

html.htj-dark .htj-hero-badge {
    background: #161b22 !important;

    border-color: #30363d !important;

    color: #8b949e !important;
}

html.htj-dark .htj-hero-title {
    color: #f0f6fc !important;
}

html.htj-dark .htj-hero-title span {
    color: #58a6ff !important;
}

html.htj-dark .htj-hero-desc {
    color: #f0f6fc !important;
}

html.htj-dark .htj-hero-intro {
    color: #8b949e !important;
}

html.htj-dark .htj-hero-tags span {
    background: #161b22 !important;

    border-color: #30363d !important;

    color: #c9d1d9 !important;
}

html.htj-dark .htj-btn-primary {
    background: #f0f6fc !important;

    border-color: #f0f6fc !important;

    color: #0d1117 !important;
}

html.htj-dark .htj-btn-primary:hover {
    background: #ffffff !important;

    color: #0d1117 !important;
}

html.htj-dark .htj-btn-secondary {
    background: #161b22 !important;

    border-color: #30363d !important;

    color: #f0f6fc !important;
}

html.htj-dark .htj-btn-secondary:hover {
    background: #21262d !important;

    border-color: #8b949e !important;
}

html.htj-dark .htj-hero-motto {
    color: #6e7681 !important;
}

html.htj-dark .htj-hero-motto span {
    color: #8b949e !important;
}


/* 首页文章卡片 */

html.htj-dark .day {
    background: #161b22 !important;

    border-color: #30363d !important;

    box-shadow: none !important;
}

html.htj-dark .day:hover {
    border-color: #484f58 !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22) !important;
}

html.htj-dark .dayTitle,
html.htj-dark .dayTitle a {
    color: #6e7681 !important;
}

html.htj-dark .postTitle a,
html.htj-dark .postTitle a:link,
html.htj-dark .postTitle a:visited {
    color: #f0f6fc !important;
}

html.htj-dark .postTitle a:hover {
    color: #58a6ff !important;
}

html.htj-dark .postCon,
html.htj-dark .entrylistPostSummary {
    color: #8b949e !important;
}

html.htj-dark .postDesc {
    color: #6e7681 !important;

    border-color: #30363d !important;
}

html.htj-dark .c_b_p_desc_readmore {
    background: #21262d !important;

    border-color: #30363d !important;

    color: #c9d1d9 !important;
}

html.htj-dark .c_b_p_desc_readmore:hover {
    border-color: #8b949e !important;

    color: #58a6ff !important;
}


/* 文章页 */

html.htj-dark #topics {
    background: #0d1117 !important;

    border-color: #30363d !important;
}

html.htj-dark #cnblogs_post_body {
    color: #c9d1d9 !important;
}

html.htj-dark #cnblogs_post_body h1,
html.htj-dark #cnblogs_post_body h2,
html.htj-dark #cnblogs_post_body h3,
html.htj-dark #cnblogs_post_body h4 {
    color: #f0f6fc !important;

    border-color: #30363d !important;
}

html.htj-dark #cnblogs_post_body a {
    color: #58a6ff !important;
}


/* 引用 */

html.htj-dark #cnblogs_post_body blockquote {
    background: #161b22 !important;

    border-color: #484f58 !important;

    color: #8b949e !important;
}


/* 行内代码 */

html.htj-dark #cnblogs_post_body code {
    background: rgba(110,118,129,.25) !important;

    color: #e6edf3;
}


/* 代码块 */

html.htj-dark #cnblogs_post_body pre {
    background: #161b22 !important;

    border-color: #30363d !important;

    color: #e6edf3 !important;
}

html.htj-dark #cnblogs_post_body pre code {
    background: transparent !important;
}


/* 表格 */

html.htj-dark #cnblogs_post_body th,
html.htj-dark #cnblogs_post_body td {
    border-color: #30363d !important;
}

html.htj-dark #cnblogs_post_body th {
    background: #161b22 !important;
}


/* 横线 */

html.htj-dark #cnblogs_post_body hr {
    background: #30363d !important;
}


/* TOC · V2 */

html.htj-dark .htj-toc {
    background: transparent !important;

    border: none !important;
    border-left: 1px solid #30363d !important;
}

html.htj-dark .htj-toc a.htj-toc-h2,
html.htj-dark .htj-toc a.htj-toc-h2:link,
html.htj-dark .htj-toc a.htj-toc-h2:visited {
    color: #8b949e !important;
}

html.htj-dark .htj-toc a.htj-toc-h3,
html.htj-dark .htj-toc a.htj-toc-h3:link,
html.htj-dark .htj-toc a.htj-toc-h3:visited {
    color: #6e7681 !important;
}

html.htj-dark .htj-toc a:hover {
    color: #58a6ff !important;

    background:
        rgba(88, 166, 255, .08) !important;
}

html.htj-dark .htj-toc a.active {
    color: #58a6ff !important;

    background:
        rgba(88, 166, 255, .10) !important;
}

html.htj-dark .htj-toc a.active::before {
    background: #58a6ff !important;
}

html.htj-dark #cnblogs_post_body img {
    border-color: #30363d !important;
}


/* 返回顶部 */

html.htj-dark .htj-back-top {
    background: #161b22;

    border-color: #30363d;

    color: #8b949e;

    box-shadow:
        0 4px 16px rgba(0,0,0,.25);
}

html.htj-dark .htj-back-top:hover {
    border-color: #8b949e;

    color: #58a6ff;
}


/* Copy */

html.htj-dark .htj-copy-code {
    background: #21262d;

    border-color: #30363d;

    color: #8b949e;
}

html.htj-dark .htj-copy-code:hover {
    border-color: #8b949e;

    color: #58a6ff;
}


/* 页脚 */

html.htj-dark #footer {
    border-color: #30363d !important;

    color: #6e7681 !important;
}

html.htj-dark .htj-footer-signature {
    color: #8b949e;
}

html.htj-dark .htj-footer-signature a {
    color: #8b949e !important;
}

html.htj-dark .htj-footer-signature a:hover {
    color: #58a6ff !important;
}


/* =========================================================
   手机
   ========================================================= */

@media screen and (max-width: 600px) {

    .htj-theme-toggle {
        width: 31px;
        height: 31px;

        font-size: 14px;
    }

    .htj-back-top {
        right: 16px;
        bottom: 18px;

        width: 38px;
        height: 38px;
    }

    .htj-footer-signature {
        flex-direction: column;

        gap: 3px;
    }

}
/* =========================================================
   htj Background Image
   个人博客背景图
   直接追加到页面定制 CSS 最末尾
   ========================================================= */


/* ---------------------------------------------------------
   只需要修改下面这一处图片地址
   把 YOUR_IMAGE_URL 换成你的图片直链
   例如：
   url("https://xxx.com/background.jpg")
   --------------------------------------------------------- */

:root {
    --htj-background-image:
        url("https://images.cnblogs.com/cnblogs_com/blogs/878452/galleries/2532757/o_260914133724_6b9db804b4b4c9b9f059f9c0cbb33410.jpg");
}


/* =========================================================
   1. 浅色模式背景
   ========================================================= */

body {
    background-image:
        linear-gradient(
            rgba(246, 248, 250, 0.82),
            rgba(246, 248, 250, 0.82)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;

    min-height:
        100vh;
}


/* =========================================================
   2. 保持网站主体透明
   这样背景图才能露出来
   ========================================================= */

#home {
    background:
        transparent !important;
}


/* =========================================================
   3. 首页文章卡片
   稍微带一点半透明效果
   ========================================================= */

.day {
    background:
        rgba(255, 255, 255, 0.94) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   4. 文章详情页
   保证正文清晰
   ========================================================= */

.htj-is-inner #topics {
    background:
        rgba(255, 255, 255, 0.96) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 12px 38px
        rgba(31, 35, 40, 0.08) !important;
}


/* =========================================================
   5. 顶部导航栏
   轻微透明，和背景融合
   ========================================================= */

.htj-navbar {
    background:
        rgba(246, 248, 250, 0.72);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* =========================================================
   6. Hero 区域
   保持干净，不额外做大卡片
   ========================================================= */

.htj-hero {
    position:
        relative;

    background:
        transparent !important;
}


/* =========================================================
   7. 右侧文章目录
   保持你现在喜欢的轻量风格
   ========================================================= */

.htj-toc {
    background:
        rgba(246, 248, 250, 0.60) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* =========================================================
   8. 页脚
   ========================================================= */

#footer {
    background:
        transparent !important;
}


/* =========================================================
   9. 深色模式背景
   ========================================================= */

html.htj-dark body {
    background-image:
        linear-gradient(
            rgba(13, 17, 23, 0.82),
            rgba(13, 17, 23, 0.82)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}


/* 深色首页文章卡片 */

html.htj-dark .day {
    background:
        rgba(22, 27, 34, 0.94) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* 深色文章正文 */

html.htj-dark .htj-is-inner #topics {
    background:
        rgba(13, 17, 23, 0.95) !important;

    box-shadow:
        0 12px 38px
        rgba(0, 0, 0, 0.25) !important;
}


/* 深色导航 */

html.htj-dark .htj-navbar {
    background:
        rgba(13, 17, 23, 0.72);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* 深色目录 */

html.htj-dark .htj-toc {
    background:
        rgba(13, 17, 23, 0.58) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* =========================================================
   10. 手机和平板
   fixed 背景在部分移动浏览器表现不好
   移动端改成普通滚动
   ========================================================= */

@media screen and (max-width: 900px) {

    body,
    html.htj-dark body {
        background-attachment:
            scroll !important;
    }
}

/* =========================================================
   htj Background V2
   乌萨奇背景图视觉优化
   —— 直接追加到页面定制 CSS 最末尾 ——
   ========================================================= */


/* =========================================================
   1. 背景图整体显示方式
   不再使用 cover，避免兔子被无限放大
   ========================================================= */

body {
    background-size:
        min(1050px, 78vw) auto !important;

    background-position:
        center 85px !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}


/* =========================================================
   2. 首页稍微降低白色蒙版强度
   让兔子可以看见，但不影响 Hero 文字
   ========================================================= */

html:not(.htj-dark) body {
    background-image:
        linear-gradient(
            rgba(246, 248, 250, 0.72),
            rgba(246, 248, 250, 0.82)
        ),
        var(--htj-background-image) !important;
}


/* =========================================================
   3. Hero 保持透明
   不做额外白色卡片
   ========================================================= */

.htj-hero {
    background:
        transparent !important;
}


/* =========================================================
   4. Hero 文字增加极轻微阴影
   防止背景线条刚好穿过文字
   ========================================================= */

.htj-hero-title,
.htj-hero-desc,
.htj-hero-intro,
.htj-hero-motto {
    text-shadow:
        0 1px 3px
        rgba(255, 255, 255, 0.75);
}


/* =========================================================
   5. 顶部导航
   保持通透，但文字一定清晰
   ========================================================= */

.htj-navbar {
    background:
        rgba(246, 248, 250, 0.68) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   6. 首页文章卡片
   与背景图片分离
   ========================================================= */

.day {
    background:
        rgba(255, 255, 255, 0.95) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 28px
        rgba(31, 35, 40, 0.06) !important;
}


/* =========================================================
   7. 文章页正文
   阅读优先，不让背景影响正文
   ========================================================= */

.htj-is-inner #topics {
    background:
        rgba(255, 255, 255, 0.97) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   8. 内页背景再淡一点
   首页可以有个性，文章页专注阅读
   ========================================================= */

html.htj-is-inner:not(.htj-dark) body {
    background-image:
        linear-gradient(
            rgba(246, 248, 250, 0.88),
            rgba(246, 248, 250, 0.93)
        ),
        var(--htj-background-image) !important;
}


/* =========================================================
   9. 深色模式
   ========================================================= */

html.htj-dark body {
    background-image:
        linear-gradient(
            rgba(13, 17, 23, 0.78),
            rgba(13, 17, 23, 0.88)
        ),
        var(--htj-background-image) !important;

    background-size:
        min(1050px, 78vw) auto !important;

    background-position:
        center 85px !important;
}


/* 深色模式取消浅色文字阴影 */

html.htj-dark .htj-hero-title,
html.htj-dark .htj-hero-desc,
html.htj-dark .htj-hero-intro,
html.htj-dark .htj-hero-motto {
    text-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.55);
}


/* 深色导航 */

html.htj-dark .htj-navbar {
    background:
        rgba(13, 17, 23, 0.68) !important;
}


/* 深色文章卡片 */

html.htj-dark .day {
    background:
        rgba(22, 27, 34, 0.95) !important;
}


/* 深色正文 */

html.htj-dark .htj-is-inner #topics {
    background:
        rgba(13, 17, 23, 0.97) !important;
}


/* =========================================================
   10. 大屏显示
   防止 2K / 4K 屏幕兔子太小
   ========================================================= */

@media screen and (min-width: 1800px) {

    body,
    html.htj-dark body {
        background-size:
            1150px auto !important;
    }

}


/* =========================================================
   11. 平板
   ========================================================= */

@media screen and (max-width: 900px) {

    body,
    html.htj-dark body {
        background-size:
            900px auto !important;

        background-position:
            center 70px !important;

        background-attachment:
            scroll !important;
    }

}


/* =========================================================
   12. 手机
   手机屏幕不适合完整展示大背景
   稍微放大，但保持主体在中央
   ========================================================= */

@media screen and (max-width: 600px) {

    body,
    html.htj-dark body {
        background-size:
            720px auto !important;

        background-position:
            center 60px !important;
    }

}
/* =========================================================
   htj Background V3
   让背景更明显 + 占据空间更大
   —— 直接追加到页面定制 CSS 最末尾 ——
   ========================================================= */


/* =========================================================
   1. 首页背景：更清晰、更大
   ========================================================= */

html.htj-is-home body {
    background-image:
        linear-gradient(
            rgba(246, 248, 250, 0.48),
            rgba(246, 248, 250, 0.58)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    background-position:
        center top !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}


/* =========================================================
   2. 首页 Hero 区域加高
   让背景在首屏占据更大空间
   ========================================================= */

.htj-is-home .htj-hero {
    min-height: 700px !important;

    padding:
        110px
        32px
        140px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    z-index: 1;
}


/* =========================================================
   3. Hero 文字增强可读性
   背景更明显后，文字要更稳
   ========================================================= */

.htj-is-home .htj-hero-title,
.htj-is-home .htj-hero-desc,
.htj-is-home .htj-hero-intro,
.htj-is-home .htj-hero-motto {
    text-shadow:
        0 2px 10px rgba(255, 255, 255, 0.85) !important;
}

.htj-is-home .htj-hero-title {
    font-size: clamp(58px, 8vw, 92px) !important;
}

.htj-is-home .htj-hero-desc {
    font-size: 22px !important;
}

.htj-is-home .htj-hero-intro {
    font-size: 17px !important;
}


/* =========================================================
   4. 顶部导航更通透
   ========================================================= */

.htj-is-home .htj-navbar {
    background:
        rgba(246, 248, 250, 0.46) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;
}


/* =========================================================
   5. 首页文章卡片与背景分层
   ========================================================= */

.htj-is-home .day {
    background:
        rgba(255, 255, 255, 0.92) !important;

    backdrop-filter:
        blur(12px) !important;

    -webkit-backdrop-filter:
        blur(12px) !important;

    box-shadow:
        0 14px 36px rgba(31, 35, 40, 0.08) !important;
}


/* =========================================================
   6. 首页文章区上移一点
   形成“从背景中浮出来”的感觉
   ========================================================= */

.htj-is-home #main {
    margin-top: -26px !important;
    position: relative;
    z-index: 2;
}


/* =========================================================
   7. 内页依旧保持阅读优先：背景淡一点
   ========================================================= */

html.htj-is-inner:not(.htj-dark) body {
    background-image:
        linear-gradient(
            rgba(246, 248, 250, 0.84),
            rgba(246, 248, 250, 0.90)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    background-position:
        center top !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}

.htj-is-inner #topics {
    background:
        rgba(255, 255, 255, 0.96) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;
}


/* =========================================================
   8. 深色模式：首页背景更明显
   ========================================================= */

html.htj-dark.htj-is-home body {
    background-image:
        linear-gradient(
            rgba(13, 17, 23, 0.42),
            rgba(13, 17, 23, 0.58)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    background-position:
        center top !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}

html.htj-dark.htj-is-home .htj-hero-title,
html.htj-dark.htj-is-home .htj-hero-desc,
html.htj-dark.htj-is-home .htj-hero-intro,
html.htj-dark.htj-is-home .htj-hero-motto {
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

html.htj-dark.htj-is-home .htj-navbar {
    background:
        rgba(13, 17, 23, 0.44) !important;
}

html.htj-dark.htj-is-home .day {
    background:
        rgba(22, 27, 34, 0.90) !important;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.20) !important;
}


/* =========================================================
   9. 深色模式：内页继续偏阅读
   ========================================================= */

html.htj-dark.htj-is-inner body {
    background-image:
        linear-gradient(
            rgba(13, 17, 23, 0.78),
            rgba(13, 17, 23, 0.86)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    background-position:
        center top !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}

html.htj-dark.htj-is-inner #topics {
    background:
        rgba(13, 17, 23, 0.95) !important;
}


/* =========================================================
   10. 超大屏优化
   ========================================================= */

@media screen and (min-width: 1700px) {

    .htj-is-home .htj-hero {
        min-height: 780px !important;
        padding-top: 130px !important;
        padding-bottom: 160px !important;
    }

}


/* =========================================================
   11. 平板优化
   ========================================================= */

@media screen and (max-width: 900px) {

    html.htj-is-home body,
    html.htj-is-inner body,
    html.htj-dark.htj-is-home body,
    html.htj-dark.htj-is-inner body {
        background-attachment:
            scroll !important;
    }

    .htj-is-home .htj-hero {
        min-height: 600px !important;

        padding:
            88px
            22px
            110px !important;
    }

    .htj-is-home .htj-hero-title {
        font-size: clamp(48px, 10vw, 72px) !important;
    }

}


/* =========================================================
   12. 手机优化
   ========================================================= */

@media screen and (max-width: 600px) {

    .htj-is-home .htj-hero {
        min-height: 520px !important;

        padding:
            70px
            12px
            90px !important;
    }

    .htj-is-home .htj-hero-title {
        font-size: 46px !important;
    }

    .htj-is-home .htj-hero-desc {
        font-size: 18px !important;
    }

    .htj-is-home .htj-hero-intro {
        font-size: 15px !important;
    }

    .htj-is-home #main {
        margin-top: -10px !important;
    }

}
/* =========================================================
   htj Homepage V4
   背景增强 + Hero 紧凑化
   —— 整段直接追加到页面定制 CSS 最末尾 ——
   ========================================================= */


/* =========================================================
   1. 首页背景图
   更清晰、更明艳，并整体向上移动
   ========================================================= */

html.htj-is-home:not(.htj-dark) body {
    background-image:
        linear-gradient(
            rgba(246, 248, 250, 0.20),
            rgba(246, 248, 250, 0.28)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    /* 向上移动背景 */
    background-position:
        center -120px !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}


/* =========================================================
   2. Hero 整体压缩
   原来 700px 太高，这里改成约 500px
   ========================================================= */

.htj-is-home .htj-hero {
    min-height:
        500px !important;

    margin:
        0 auto !important;

    padding:
        58px
        32px
        62px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        transparent !important;

    position:
        relative;

    z-index:
        1;
}


/* =========================================================
   3. 删除介绍文字
   Exploring Machine Learning...
   ========================================================= */

.htj-is-home .htj-hero-intro {
    display:
        none !important;
}


/* =========================================================
   4. 删除技术标签
   Python / Machine Learning / LLM / Agent / Bioinformatics
   ========================================================= */

.htj-is-home .htj-hero-tags {
    display:
        none !important;
}


/* =========================================================
   5. 修复 Welcome 被拉成长条的问题
   ========================================================= */

.htj-is-home .htj-hero-badge {
    display:
        inline-flex !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    align-self:
        center !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 0 18px !important;

    padding:
        6px 13px !important;

    background:
        rgba(255, 255, 255, 0.84) !important;

    border:
        1px solid rgba(208, 215, 222, 0.9) !important;

    border-radius:
        999px !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   6. 主标题
   保留视觉中心，但不要过度巨大
   ========================================================= */

.htj-is-home .htj-hero-title {
    margin:
        0 !important;

    font-size:
        clamp(58px, 6vw, 78px) !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -2.5px !important;

    text-shadow:
        0 2px 12px
        rgba(255, 255, 255, 0.78) !important;
}


/* =========================================================
   7. FZU 身份行
   ========================================================= */

.htj-is-home .htj-hero-desc {
    margin:
        18px 0 0 !important;

    font-size:
        20px !important;

    line-height:
        1.5 !important;

    text-shadow:
        0 1px 8px
        rgba(255, 255, 255, 0.82) !important;
}


/* =========================================================
   8. 按钮区域收紧
   ========================================================= */

.htj-is-home .htj-hero-actions {
    margin-top:
        26px !important;

    gap:
        12px !important;
}


/* 按钮略微收紧 */

.htj-is-home .htj-btn {
    min-height:
        40px !important;

    padding:
        0 17px !important;
}


/* =========================================================
   9. Motto 收紧
   ========================================================= */

.htj-is-home .htj-hero-motto {
    margin-top:
        22px !important;

    font-size:
        14px !important;

    text-shadow:
        0 1px 6px
        rgba(255, 255, 255, 0.9) !important;
}


/* =========================================================
   10. Hero 与文章区域之间不要留巨大空白
   ========================================================= */

.htj-is-home #main {
    margin-top:
        0 !important;

    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   11. 首页文章卡片
   背景明显以后，卡片保持清晰
   ========================================================= */

.htj-is-home .day {
    background:
        rgba(255, 255, 255, 0.94) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 10px 32px
        rgba(31, 35, 40, 0.08) !important;
}


/* =========================================================
   12. 导航栏
   背景更透明，让整张背景图连起来
   ========================================================= */

.htj-is-home .htj-navbar {
    background:
        rgba(246, 248, 250, 0.46) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* =========================================================
   13. 深色模式首页
   ========================================================= */

html.htj-dark.htj-is-home body {
    background-image:
        linear-gradient(
            rgba(13, 17, 23, 0.32),
            rgba(13, 17, 23, 0.42)
        ),
        var(--htj-background-image) !important;

    background-size:
        cover !important;

    background-position:
        center -120px !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}


html.htj-dark.htj-is-home .htj-hero-badge {
    background:
        rgba(22, 27, 34, 0.78) !important;

    border-color:
        rgba(48, 54, 61, 0.95) !important;
}


html.htj-dark.htj-is-home .htj-hero-title,
html.htj-dark.htj-is-home .htj-hero-desc,
html.htj-dark.htj-is-home .htj-hero-motto {
    text-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.55) !important;
}


html.htj-dark.htj-is-home .htj-navbar {
    background:
        rgba(13, 17, 23, 0.48) !important;
}


html.htj-dark.htj-is-home .day {
    background:
        rgba(22, 27, 34, 0.93) !important;
}


/* =========================================================
   14. 平板
   ========================================================= */

@media screen and (max-width: 900px) {

    html.htj-is-home body,
    html.htj-dark.htj-is-home body {
        background-position:
            center -70px !important;

        background-attachment:
            scroll !important;
    }


    .htj-is-home .htj-hero {
        min-height:
            470px !important;

        padding:
            52px
            22px
            58px !important;
    }


    .htj-is-home .htj-hero-title {
        font-size:
            clamp(50px, 9vw, 68px) !important;
    }

}


/* =========================================================
   15. 手机
   ========================================================= */

@media screen and (max-width: 600px) {

    html.htj-is-home body,
    html.htj-dark.htj-is-home body {
        background-position:
            center -35px !important;
    }


    .htj-is-home .htj-hero {
        min-height:
            430px !important;

        padding:
            46px
            14px
            50px !important;
    }


    .htj-is-home .htj-hero-title {
        font-size:
            46px !important;

        letter-spacing:
            -1.6px !important;
    }


    .htj-is-home .htj-hero-desc {
        margin-top:
            15px !important;

        font-size:
            17px !important;
    }


    .htj-is-home .htj-hero-actions {
        margin-top:
            22px !important;
    }


    .htj-is-home .htj-hero-motto {
        margin-top:
            18px !important;
    }

}
/* =========================================================
   htj Homepage V5
   1. “无限进步”改清晰，不显示 Tim
   2. Hero 上下空白压缩，整体更紧凑
   —— 直接追加到页面定制 CSS 最末尾 ——
   ========================================================= */


/* =========================================================
   1. Hero 整体再压缩
   解决上下空白太大的问题
   ========================================================= */

.htj-is-home .htj-hero {
    min-height: 390px !important;

    padding:
        28px
        24px
        26px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   2. Welcome 小标签更贴近内容
   ========================================================= */

.htj-is-home .htj-hero-badge {
    margin:
        0 0 14px !important;
}


/* =========================================================
   3. 主标题更紧凑
   ========================================================= */

.htj-is-home .htj-hero-title {
    margin:
        0 !important;

    line-height:
        1.02 !important;
}


/* =========================================================
   4. 副标题更贴近主标题
   ========================================================= */

.htj-is-home .htj-hero-desc {
    margin:
        12px 0 0 !important;

    line-height:
        1.35 !important;
}


/* =========================================================
   5. 按钮区域往上收一点
   ========================================================= */

.htj-is-home .htj-hero-actions {
    margin-top:
        18px !important;
}


/* =========================================================
   6. Motto：直接改成“无限进步”
   不显示 Tim，同时提高可读性
   ========================================================= */

/* 隐藏原文字 */
.htj-is-home .htj-hero-motto {
    margin-top:
        16px !important;

    font-size:
        0 !important;

    line-height:
        1 !important;

    color:
        transparent !important;

    text-shadow:
        none !important;
}

/* 隐藏原来的 Tim */
.htj-is-home .htj-hero-motto span {
    display:
        none !important;
}

/* 用新的文字替换 */
.htj-is-home .htj-hero-motto::before {
    content:
        "无限进步";

    display:
        inline-block;

    color:
        #1f2328 !important;

    font-size:
        18px !important;

    font-weight:
        700 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        1px !important;

    text-shadow:
        0 1px 8px rgba(255, 255, 255, 0.92) !important;
}


/* =========================================================
   7. 深色模式下 Motto 也清晰
   ========================================================= */

html.htj-dark.htj-is-home .htj-hero-motto::before {
    color:
        #f0f6fc !important;

    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.65) !important;
}


/* =========================================================
   8. 首页文章区和 Hero 更贴近
   ========================================================= */

.htj-is-home #main {
    margin-top:
        -6px !important;
}


/* =========================================================
   9. 平板
   ========================================================= */

@media screen and (max-width: 900px) {

    .htj-is-home .htj-hero {
        min-height:
            350px !important;

        padding:
            24px
            20px
            22px !important;
    }

    .htj-is-home .htj-hero-desc {
        margin-top:
            10px !important;
    }

    .htj-is-home .htj-hero-actions {
        margin-top:
            16px !important;
    }

    .htj-is-home .htj-hero-motto {
        margin-top:
            14px !important;
    }

    .htj-is-home .htj-hero-motto::before {
        font-size:
            17px !important;
    }

}


/* =========================================================
   10. 手机
   ========================================================= */

@media screen and (max-width: 600px) {

    .htj-is-home .htj-hero {
        min-height:
            320px !important;

        padding:
            20px
            12px
            18px !important;
    }

    .htj-is-home .htj-hero-badge {
        margin-bottom:
            12px !important;
    }

    .htj-is-home .htj-hero-desc {
        margin-top:
            8px !important;
    }

    .htj-is-home .htj-hero-actions {
        margin-top:
            14px !important;
    }

    .htj-is-home .htj-hero-motto {
        margin-top:
            12px !important;
    }

    .htj-is-home .htj-hero-motto::before {
        font-size:
            16px !important;
    }

}