/*

    Template Author : pixelhint.com
    Author Email    : contact@pixelhint.com
    Template Name   : Magnetic


    *****************************************


    - Fonts
    - General CSS
    - Header
    - Home/portfolio
    - Inner page
    - Map/Contact page
    - Tooltip
    - Responsive code


*/



/*  Fonts  */
/* 思源黑体 Noto Sans SC - 免费商用，支持中日韩及Emoji */
@font-face {
    font-family: 'noto-sans-sc';
    src: url('../fonts/NotoSansSC-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'noto-sans-sc';
    src: url('../fonts/NotoSansSC-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/*  General CSS*/
body{
    background: #fff;
}

.wrapper{
    width: 92.72727272727273%;
    margin: 0 auto;
}

header ul.social li a,
.main .work a .caption,
header nav ul li a{
    transition: padding-left 0.3s ease-in-out;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
/* 当侧边栏隐藏时调整主内容区域 */
header:not(.show_menu) ~ .main {
    padding-left: 50px;
}
}

h1, h2, h3, h4, h5 ,h6{
    color: #4b4848;
    font-family: 'noto-sans-sc', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    letter-spacing: 1px;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4              { font-size: 1.4em; margin: 1em 0 }
h5              { font-size: 1.3em; margin: 1.2em 0 }
h6              { font-size: 1.25em; margin: 1.4em 0 }
h1, h2, h3, h4, h5, h6          { font-weight: bolder }

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/*  Header  */
@media (min-width:1099px){
    header{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        min-height: 100%;
        padding: 0 0 0 50px;
        background: #ffffff;
        float: left;
        overflow: hidden;
        z-index: 9999;
        -webkit-transition: transform 0.3s ease;
        -moz-transition: transform 0.3s ease;
        -o-transition: transform 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform: translateX(-200px);
        will-change: transform;
    }

    /* 当侧边栏收起时的文字透明度 */
    header .logo,
    header nav,
    header .footer,
    header .social,
    header a,
    header p,
    header .subtitle,
    header .description {
        transition: opacity 0.4s ease;
        opacity: 0.02;
    }
    
    header:hover,
    header.show_menu {
        transform: translateX(0);
        box-shadow: 2px 0 12px rgba(0,0,0,0.1);
    }

    /* 当侧边栏展开时恢复文字透明度 */
    header:hover .logo,
    header:hover nav,
    header:hover .footer,
    header:hover .social,
    header:hover a,
    header:hover p,
    header:hover .subtitle,
    header:hover .description,
    header.show_menu .logo,
    header.show_menu nav,
    header.show_menu .footer,
    header.show_menu .social,
    header.show_menu a,
    header.show_menu p,
    header.show_menu .subtitle,
    header.show_menu .description {
        opacity: 1;
    }

    header .logo{
        margin-top: 100px;
        text-align: right;
        padding-right: 20px;
        width: 180px;
    }

    header .logo .subtitle {
        font-family: 'raleway-bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 0.6em;
        color: #666;
        margin-top: 10px;
        line-height: 1;
        text-align: right;
        white-space: nowrap;
        letter-spacing: -0.2px;
        font-weight: 700;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    header .logo .description {
        font-family: 'raleway-regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 0.8em;
        color: #888;
        margin-top: 15px;
        line-height: 1.5;
        text-align: right;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    header .logo a, header .logo a:active, header .logo a:visited {
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'raleway-regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: #454545;
        font-size: 1.5em;
        letter-spacing: 0.20em;
        white-space: nowrap;
        display: inline-block;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    header .logo a:hover {
        text-decoration: none;
        color: #969595;
        font-size: 1.5em;
    }

    header nav ul{
        display: block;
        overflow: hidden;
        margin-top: 100px;
        list-style: none;
    }

    header nav ul li{
        display: block;
        margin-bottom: 30px;
    }

    header nav ul li a{
        color: #454545;
        font-family: "raleway-regular", arial;
        font-size: 14px;
        text-decoration: none;
        letter-spacing: 1px;
    }

    header nav ul li a:hover,
    header nav ul li a.selected{
        color: #969595;
    }

    header .footer{
        position: absolute;
        bottom: 50px;
    }

    header ul.social{
        list-style: none;
        margin-bottom: 5px;
    }

    header ul.social li{
        display: block;
        float: left;
        position: relative;
        margin: 0 15px 15px 0;
    }


    header ul.social li a{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid #d9d9d9;
        border-radius: 12px;
        color: #565656;
        background: transparent;
        position: relative;
    }

    header ul.social li a::before{
        content: "";
        display: block;
        width: 22px;
        height: 22px;
        background-color: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        transition: transform 0.2s ease;
    }


    header ul.social li a:hover,
    header ul.social li a:focus{
        color: #0a84ff;
        border-color: #0a84ff;
    }


    header ul.social li a:hover::before,
    header ul.social li a:focus::before{
        transform: scale(1.1);
    }


    header ul.social li a.behance::before{
        mask-image: url('../img/social/icon-bilibili.svg');
        -webkit-mask-image: url('../img/social/icon-bilibili.svg');
    }


    header ul.social li a.google::before{
        mask-image: url('../img/social/icon-email.svg');
        -webkit-mask-image: url('../img/social/icon-email.svg');
    }

    header ul.social li a.behance,
    header ul.social li a.google,
    header ul.social li a.dribble,
    header ul.social li a.rss,
    header ul.social li a.instagram{
        background: transparent;
    }

    header ul.social li a.dribble::before{
        mask-image: url('../img/social/icon-douban.svg');
        -webkit-mask-image: url('../img/social/icon-douban.svg');
    }

    header ul.social li a.rss::before{
        mask-image: url('../img/social/icon-rss.svg');
        -webkit-mask-image: url('../img/social/icon-rss.svg');
    }

    header ul.social li a.instagram::before{
        mask-image: url('../img/social/icon-instagram.svg');
        -webkit-mask-image: url('../img/social/icon-instagram.svg');
    }

    header ul.social li a.youtube::before{
        mask-image: none;
    }

    header .rights p{
        color: #454545;
        font-family: "raleway-regular", arial;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 18px;
    }

    header .rights a{
        font-family: "raleway-bold", arial;
        font-weight: bold;
        text-decoration: none;
    }
    #menu_icon,
    .close_menu{
        display: none;
    }

}

#menu_icon,
.close_menu{
    float: right;
    margin-right: 40px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url('../img/men_icons.png') no-repeat;
}

#menu_icon{
    background-position: 0 0;
}
.close_menu{
    background-position: -41px 0!important;
}

/*  Main  */
.main{
    width: 100%;
    height: 100%;
    padding-left: 300px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 55;
    background: #f6f6f6;
    clear: both;
    min-height: 100vh;
    transition: padding-left 0.3s ease-in-out;
}

/* 当侧边栏隐藏时调整主内容区域 */
header:not(.show_menu) ~ .main {
    padding-left: 50px;
}

/*  Home/portfolio  */
.main .work{
    display: block;
    width: calc(25% - 0.75px);
    float: left;
    position: relative;
    overflow: hidden;
    margin-right: 1px;
    margin-bottom: 1px;
    box-sizing: border-box;
}

.main .work:nth-of-type(4n){
    margin-right: 0;
}

.main .work::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 宽高比 */
}

.main .work a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.main .work .media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.main .pagination-container{
    display: block;
    width: 100%;
    height: 60px;
    text-align: center;
    overflow: hidden;
    float: left;
    position: relative;
}

.main .pagination {
    display: inline-block;
    font-family: "raleway-regular", arial;
    width: auto;
    height: auto;
    letter-spacing: .01em;
    cursor: pointer;
    margin: 0 4px 7px 0;
    color: #454545!important;
    padding: 7px 15px;
    margin-top: 17px;
}

.main .pagination:hover{
    color: #969595!important;
}

.main .pagination a{
    text-decoration: none;
}

.main .pagination a:hover{
    color: #969595;
}

.main .work .media{
    width: 100%;
    vertical-align: middle;
}

.main .work .caption{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ffffff;
    opacity: 0;
}

.main .work a:hover .caption{
    opacity: 1;
}

.work .caption .work_title{
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -40px;
}

.main .work .caption h1{
    position: relative;
    display: inline-block;
    max-width: 90%;
    padding: 20px 0;
    z-index: 77;
    color: #454545;
    font-family: "raleway-regular", arial;
    font-size: 16px;
    letter-spacing: .5px;
    border-bottom: 1px solid #bfbbbb;
    border-top: 1px solid #bfbbbb;
}

.main .gallery-container{
    width: 100%;
}

/* Clearfix */
.main .gallery-container:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 50px;
    clear: both;
}

.main .gallery-container .picture-container{
    width: 150px;
    float: left;
    margin-right: 30px;
}

.main .gallery-container .picture-container .img-thumbnail{
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.main .tags {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    position: relative;
    z-index: 10;
}

.main .tags a, .main .tags a:visited, .main .tags a:active{
    display: inline-block;
    background: #fff;
    width: auto;
    height: auto;
    border-radius: 3px;
    letter-spacing: .01em;
    cursor: pointer;
    margin: 0 4px 7px 0;
    color: #454545!important;
    border: 1px solid #454545;
    padding: 7px 15px;
    text-decoration: none;
}

.main .tags a:hover{
    color: #969595!important;
    border: 1px solid #969595;
}

/*  Inner Page  */
.top{
    width: 100%;
    height: 350px;
    overflow: hidden;
    display: block;
    position: relative;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-position: 50% 50% !important;
}

.work_nav{
    display: block;
    width: 100%;
}

.work_nav .btn{
    float: right;
}

.work_nav ul{
    list-style: none;
}

.work_nav ul li{
    display: block;
    float: left;
    margin: 0 0 1px 1px;
    position: relative;
}

.work_nav a{
    display: block;
    width: 40px;
    height: 40px;
    background: url('../img/p_navigation.png') no-repeat;
    background-position: 0 0;
}

.work_nav a.previous{
    background-position: 0 0;
}

.work_nav a.previous.disabled{
    cursor: no-drop;
}

.work_nav a.grid{
    background-position: -41px 0;
}

.work_nav a.next{
    background-position: -82px 0;
}

.work_nav a.next.disabled{
    cursor: no-drop;
}

.top .title{
    display: block;
    width: 100%;color: #4b4848;
    font-family: "raleway-bold", arial;
    font-size: 26px;
    font-weight: bold;
    background: rgba(255, 255, 255, .7);
    padding: 20px;
    text-transform: uppercase;
    line-height: 30px;
    margin: 0!important;
    overflow: hidden;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

}

.content_header{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 50%;
    margin-left: -46.36363636363637%;
}

.content{
    color: #4b4848;
    font-family: "raleway-regular", arial;
    font-size: 15px;
    line-height: 22px;
    padding: 60px 30px;
    background: #fff;
    margin-bottom: 70px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.content.archives{
    margin-top: 90px;
}

.content p{
    color: #4b4848;
    font-family: "raleway-regular", arial;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 30px; /* 从18px提高到22px，增加段落间距 */
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
    color: #4b4848;
    font-family: "raleway-semibold", arial;
    font-weight: bold;
    line-height: 1.4;
    position: relative;
    padding-left: 24px;  /* 为折叠按钮留出空间 */
}

/* 随层级调整间距 */
.content h1 {
    margin-top: 40px;
    margin-bottom: 25px;
    font-size: 2em;
}

.content h2 {
    margin-top: 35px;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.4em;
}

.content h4 {
    margin-top: 25px;
    margin-bottom: 12px;
    font-size: 1.35em;
}

.content h5 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.content h6 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.25em;
}

/* 标题缩进 */
.content h1 { margin-left: 0; }
.content h2 { margin-left: 24px; }
.content h3 { margin-left: 48px; }
.content h4 { margin-left: 72px; }
.content h5 { margin-left: 96px; }
.content h6 { margin-left: 120px; }

/* 标题后的内容缩进 */
.content h1 ~ p,
.content h1 ~ ul,
.content h1 ~ ol,
.content h1 ~ blockquote,
.content h1 ~ figure,
.content h1 ~ table,
.content h1 ~ .codeblock,
.content h1 ~ .code-block-container,
.content h1 ~ img { margin-left: 24px; }

.content h2 ~ p,
.content h2 ~ ul,
.content h2 ~ ol,
.content h2 ~ blockquote,
.content h2 ~ figure,
.content h2 ~ table,
.content h2 ~ .codeblock,
.content h2 ~ .code-block-container,
.content h2 ~ img { margin-left: 48px; }

.content h3 ~ p,
.content h3 ~ ul,
.content h3 ~ ol,
.content h3 ~ blockquote,
.content h3 ~ figure,
.content h3 ~ table,
.content h3 ~ .codeblock,
.content h3 ~ .code-block-container,
.content h3 ~ img { margin-left: 72px; }

.content h4 ~ p,
.content h4 ~ ul,
.content h4 ~ ol,
.content h4 ~ blockquote,
.content h4 ~ figure,
.content h4 ~ table,
.content h4 ~ .codeblock,
.content h4 ~ .code-block-container,
.content h4 ~ img { margin-left: 96px; }

.content h5 ~ p,
.content h5 ~ ul,
.content h5 ~ ol,
.content h5 ~ blockquote,
.content h5 ~ figure,
.content h5 ~ table,
.content h5 ~ .codeblock,
.content h5 ~ .code-block-container,
.content h5 ~ img { margin-left: 120px; }

.content h6 ~ p,
.content h6 ~ ul,
.content h6 ~ ol,
.content h6 ~ blockquote,
.content h6 ~ figure,
.content h6 ~ table,
.content h6 ~ .codeblock,
.content h6 ~ .code-block-container,
.content h6 ~ img { margin-left: 144px; }

/* 折叠按钮样式 */
.collapse-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: inline-block;
}

.collapse-button::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 8px;
    height: 2px;
    background-color: #666;
    transition: transform 0.3s ease;
}

.collapse-button::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 2px;
    height: 8px;
    background-color: #666;
    transition: transform 0.3s ease;
}

/* 折叠状态 */
.content h1.collapsed .collapse-button::after,
.content h2.collapsed .collapse-button::after,
.content h3.collapsed .collapse-button::after,
.content h4.collapsed .collapse-button::after,
.content h5.collapsed .collapse-button::after,
.content h6.collapsed .collapse-button::after {
    transform: scaleY(0);
}

.content img{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* 列表样式 - 统一有序和无序列表的样式 */
.content ol, .content ul{
    margin-left: 0; /* 移除固定缩进，继承父级 */
    margin-top: 0;
    margin-bottom: 0; /* 减小下间距，与上间距一致 */
    padding-left: 1.5em; /* 给标记符号留出空间 */
    list-style-position: outside; /* 标记符号在外部，避免长文本换行问题 */
    line-height: 1.6;
    font-family: 'noto-sans-sc', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 18px;
    color: #4b4848;
}

.content ol li, .content ul li {
    margin-bottom: 4px; /* 减小列表项之间的间距 */
    line-height: 1.6;
    padding-left: 0.3em; /* 标记和文本之间的小间距 */
}

.content ol li:last-child, .content ul li:last-child {
    margin-bottom: 0;
}

/* 嵌套列表的间距调整 - 保持一致 */
.content ol ol,
.content ul ul,
.content ol ul,
.content ul ol {
    margin-top: 4px; /* 减小嵌套列表与父项的间距 */
    margin-bottom: 0; /* 嵌套列表下间距由父li控制 */
    margin-left: 0; /* 嵌套列表不额外缩进，靠padding-left控制 */
    font-size: 17px; /* 嵌套列表稍小 */
}

/* 二级嵌套列表 */
.content ol ol ol,
.content ul ul ul,
.content ol ul ul,
.content ul ol ol {
    font-size: 16px;
    color: #5a5757;
}

/* 三级嵌套列表 */
.content ol ol ol ol,
.content ul ul ul ul {
    font-size: 15px;
    color: #6a6767;
}

.content div.archive-title{
    margin-left: 45px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'noto-sans-sc', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #454545;
    font-size: 1.5em;
    margin-bottom: 50px;
}

.content .archive-year {
    margin-bottom: 40px;
}

.content .archive-year .year-title {
    font-size: 28px;
    font-family: "raleway-bold", arial;
    color: #454545;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.content ul.archive-list{
    margin: 0 0 20px 45px;
    list-style-type: none;
    padding-left: 20px; /* 文章列表的缩进 */
}

.content ul.archive-list li.archive-item {
    margin: 15px 0;
    position: relative;
    padding-left: 120px;
}

.content ul.archive-list li.archive-item .archive-date {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-family: "raleway-regular", arial;
    font-size: 14px;
}

.content ul.archive-list li a, .content ul.archive-list li a:active, .content ul.archive-list li a:visited{
    text-decoration: none;
    color: #454545;
    transition: color 0.3s ease;
    font-size: 16px;
}

.content ul.archive-list li a:hover {
    color: #969595;
}

.content ul.archive-list li a:hover{
    color: #969595;
}

/*  Tooltip  */
.tooltip{
    display: block;
    padding: 7px 10px;
    background: #454545;
    color: #fff;
    font-family: "raleway-regular", arial;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    text-align: center;
    letter-spacing: .5px;

}

.tooltip:after{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #454545 transparent transparent transparent;
    display: block;
    text-align: center;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}

/* 文档导航器 */
.toc-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 280px;
    min-width: 200px;
    max-width: 600px;
    height: 360px;
    min-height: 150px;
    max-height: 80vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    resize: both;
}

.toc-header {
    padding: 12px 16px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    cursor: move;
    user-select: none;
}

.toc-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.toc-content {
    height: calc(100% - 45px);
    overflow-y: auto;
    overflow-x: auto;
    padding: 12px 0;
}

.toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: max-content;
}

/* 标题层级缩进 */
.toc-item[data-level="2"] { padding-left: 32px; }
.toc-item[data-level="3"] { padding-left: 48px; }
.toc-item[data-level="4"] { padding-left: 64px; }
.toc-item[data-level="5"] { padding-left: 80px; }
.toc-item[data-level="6"] { padding-left: 96px; }

.toc-item {
    padding: 4px 16px 4px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    overflow: visible;
    display: block;
}

.toc-item:hover {
    color: #349ef3;
    background: #f5f5f5;
}

/* 移除单个项目的滚动条样式，改为整体滚动条 */
.toc-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.toc-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.toc-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.toc-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.toc-content::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* 标题层级颜色变化 - 增强对比度 */
.toc-item[data-level="1"] { color: #222; font-weight: 600; }
.toc-item[data-level="2"] { color: #444; font-weight: 500; }
.toc-item[data-level="3"] { color: #666; font-weight: normal; }
.toc-item[data-level="4"] { color: #888; font-weight: normal; }
.toc-item[data-level="5"] { color: #aaa; font-weight: normal; }
.toc-item[data-level="6"] { color: #ccc; font-weight: normal; }

/* TOC 折叠按钮 - 每个标题都有，但按层级缩进 */
.toc-item .toc-collapse-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* 按层级设置按钮位置，增加与标题的间距 */
.toc-item[data-level="1"] .toc-collapse-btn { left: 4px; }
.toc-item[data-level="2"] .toc-collapse-btn { left: 20px; }
.toc-item[data-level="3"] .toc-collapse-btn { left: 36px; }
.toc-item[data-level="4"] .toc-collapse-btn { left: 52px; }
.toc-item[data-level="5"] .toc-collapse-btn { left: 68px; }
.toc-item[data-level="6"] .toc-collapse-btn { left: 84px; }

/* 标题文本与按钮保持间距，防止换行 */
.toc-item[data-level="1"] .toc-item-text { margin-left: 24px; white-space: nowrap; display: inline-block; }
.toc-item[data-level="2"] .toc-item-text { margin-left: 24px; white-space: nowrap; display: inline-block; }
.toc-item[data-level="3"] .toc-item-text { margin-left: 24px; white-space: nowrap; display: inline-block; }
.toc-item[data-level="4"] .toc-item-text { margin-left: 24px; white-space: nowrap; display: inline-block; }
.toc-item[data-level="5"] .toc-item-text { margin-left: 24px; white-space: nowrap; display: inline-block; }
.toc-item[data-level="6"] .toc-item-text { margin-left: 24px; white-space: nowrap; display: inline-block; }

.toc-collapse-btn::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 6px;
    height: 2px;
    background-color: #666;
    transition: transform 0.3s ease;
}

.toc-collapse-btn::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 2px;
    height: 6px;
    background-color: #666;
    transition: transform 0.3s ease;
}

/* 折叠状态 */
.toc-item.collapsed .toc-collapse-btn::after {
    transform: scaleY(0);
}

/* 隐藏被折叠的子项 */
.toc-item.toc-hidden {
    display: none !important;
}

/* 标题层级缩进 */
.toc-item[data-level="2"] { padding-left: 32px; }
.toc-item[data-level="3"] { padding-left: 48px; }
.toc-item[data-level="4"] { padding-left: 64px; }
.toc-item[data-level="5"] { padding-left: 80px; }
.toc-item[data-level="6"] { padding-left: 96px; }

/* 响应式调整 */
@media (max-width: 768px) {
    .toc-container {
        display: none;
    }
}

/* Mermaid 图表样式 */
.mermaid {
    text-align: center;
    margin: 20px 0;
    background-color: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* 在不同标题层级下的 Mermaid 图表缩进 */
.content h1 ~ .mermaid { margin-left: 24px; max-width: calc(100% - 24px); }
.content h2 ~ .mermaid { margin-left: 48px; max-width: calc(100% - 48px); }
.content h3 ~ .mermaid { margin-left: 72px; max-width: calc(100% - 72px); }
.content h4 ~ .mermaid { margin-left: 96px; max-width: calc(100% - 96px); }
.content h5 ~ .mermaid { margin-left: 120px; max-width: calc(100% - 120px); }
.content h6 ~ .mermaid { margin-left: 144px; max-width: calc(100% - 144px); }

/* 响应式 Mermaid */
@media (max-width: 768px) {
    .content h1 ~ .mermaid { margin-left: 12px; max-width: calc(100% - 12px); }
    .content h2 ~ .mermaid { margin-left: 24px; max-width: calc(100% - 24px); }
    .content h3 ~ .mermaid { margin-left: 36px; max-width: calc(100% - 36px); }
    .content h4 ~ .mermaid { margin-left: 48px; max-width: calc(100% - 48px); }
    .content h5 ~ .mermaid { margin-left: 60px; max-width: calc(100% - 60px); }
    .content h6 ~ .mermaid { margin-left: 72px; max-width: calc(100% - 72px); }
}

/*  Responsive code  */
@media (max-width:1099px){

    header{
        display: block;
        width: 100%;
        min-height: 100px;
        padding: 0;
        position: relative;
    }
    header .logo{
        margin: 40px 0 0 30px;
        float: left;
    }

    header .logo a, header .logo a:active, header .logo a:visited {
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'raleway-regular';
        color: #454545;
        font-size: 1.5em;
    }

    header .logo a:hover {
        text-decoration: none;
        color: #969595;
        font-size: 1.5em;
    }

    header .footer{
        display: none;
    }
    header #menu_icon,
    header .close_menu{
        float: right;
        margin: 30px 30px 0 0;
    }

    header nav{
        width: 100%;
        position: absolute;
        top: 100px;
        left: 0;
        z-index: 9999;
    }

    header nav ul{
        list-style: none;
        display: none;
        position: relative;
    }
    header nav ul li a{
        display: block;
        width: 100%;
        padding: 30px 0;
        text-align: center;
        color: #454545;
        font-family: "raleway-regular", arial;
        font-size: 14px;
        text-decoration: none;
        border-top: 1px solid #f7f5f5;
        background: #fff;
    }
    header nav ul li a:active{
        background: #f7f5f5;
    }
    #menu_icon,
    .close_menu,
    .show_menu{
        display: block;
    }
    .show_menu{
        display: block;
    }

    .main .work{
        width: calc(33.33333333333333% - 30px); /* 在平板上显示3列并保留间隔 */
    }
    .main{
        width: 100%;
        position: relative;
        padding-left: 0;
    }
}

@media (max-width:768px){
    .main .work{
        width: calc(50% - 30px); /* 在较小屏幕上显示2列并保留间隔 */
    }
}

@media (max-width:550px){
     .main .work{
        width: calc(100% - 30px); /* 在手机上显示1列并保留左右内边距 */
        margin-right: 0; /* 单列时取消右侧间距以居中 */
    }
}


/*Quotes*/
blockquote {
    border-left: 3px solid #5d686f;
    padding: 0 15px;
    font-style: italic;
    margin: 1.5em 0 0;
}
blockquote cite:before {
    content: ' — ';
    padding: 0 0.3em;
}
blockquote > p:first-child {
    margin: 0;
}

.pullquote {
    text-align: left;
    font-style: italic;
    margin: 1.5em 0 0;
}
.pullquote.left {
    width: 45%;
    float: left;
    margin: 1.5em 35px 1.5em 0;
}
.pullquote.right {
    width: 45%;
    float: right;
    margin: 1.5em 0 1.5em 35px;
}
.pullquote.blur {
    background-color: #eef0f1;
}


/*Code Block*/

pre > code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    font-family: Courier New, Courier, monospace;
    border: none;
    margin: 0;
    cursor: text;
    overflow-x: auto;
    line-height: 1.7em;
    font-size: 15px;
}

code {
    font-size: 15px;
    display: inline-block;
    font-family: "Courier New", Courier, monospace;
    font-weight: 400;
    background-color: #f7f8f8;
    padding: 0 10px;
}

figure.highlight,
.codeblock {
    margin: 10px 0;
    line-height: 1.3em;
    background-color: #f7f8f8;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
figure.highlight table,
.codeblock table {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
figure.highlight pre,
figure.highlight .gutter,
figure.highlight .code,
figure.highlight .tag,
.codeblock pre,
.codeblock .gutter,
.codeblock .code,
.codeblock .tag {
    background-color: inherit;
    font-family: Courier New, Courier, monospace;
    border: none;
    padding: 0;
    margin: 0;
    cursor: text;
}
figure.highlight .gutter,
figure.highlight .code,
.codeblock .gutter,
.codeblock .code {
    vertical-align: top;
}
figure.highlight.plain .gutter,
.codeblock.plain .gutter {
    display: none;
}
figure.highlight figcaption,
.codeblock figcaption {
    font-size: 15px;
    padding: 0 15px 20px;
    margin: 0;
}
figure.highlight figcaption a,
.codeblock figcaption a {
    float: right;
}
figure.highlight .gutter,
.codeblock .gutter {
    border-right: 1px solid;
    padding: 0.3em 15px;
}
figure.highlight .code,
.codeblock .code {
    width: auto;
    padding: 1em;
    overflow-x: auto;
}

figure.highlight .code pre,
.codeblock .code pre {
    margin: 0;
    white-space: pre;
    width: max-content;
}

figure.highlight .line,
.codeblock .line {
    height: 1.3em;
    font-size: 15px;
    white-space: pre;
}

.codeblock--tabbed figure.highlight,
.codeblock--tabbed pre > code {
    margin-bottom: 0;
    padding-bottom: 0;
}
.codeblock--tabbed figcaption a, .codeblock--tabbed figcaption span {
    float: left !important;
}
.codeblock--tabbed figcaption .tabs {
    float: right;
}
.codeblock--tabbed figcaption .tabs .tab {
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    padding: 0 7px;
}
.codeblock--tabbed figcaption .tabs .tab:last-child {
    margin-right: 0;
}

.gist .line,
.gist .line-number {
    font-family: "Courier New", Courier, monospace;
    font-size: 1em;
    margin: 0 0 5px 0;
}

pre > code {
    background: #f7f8f8;
    color: #333;
}

code {
    background-color: #f7f8f8;
}

.codeblock--tabbed figcaption .tab.active {
    background: #349ef3;
    color: white;
}

figure.highlight,
.codeblock {
    background: #f7f8f8;
    color: #333;
}
figure.highlight figcaption,
.codeblock figcaption {
    background: #f7f8f8;
    color: #999999;
}
figure.highlight .gutter,
.codeblock .gutter {
    background: #f7f8f8;
    border-right-color: #e6e6e6;
}
figure.highlight .gutter .line,
.codeblock .gutter .line {
    color: #aaaaaa;
}
figure.highlight .comment,
.codeblock .comment {
    color: #969896;
}
figure.highlight .string,
.codeblock .string {
    color: #183691;
}
figure.highlight .keyword,
.codeblock .keyword {
    color: #a71d5d;
}
figure.highlight.apacheconf .code .common,
figure.highlight.apacheconf .code .nomarkup,
figure.highlight.apacheconf .code .attribute,
figure.highlight.apacheconf .code .variable,
figure.highlight.apacheconf .code .cbracket,
figure.highlight.apacheconf .code .keyword,
.codeblock.apacheconf .code .common,
.codeblock.apacheconf .code .nomarkup,
.codeblock.apacheconf .code .attribute,
.codeblock.apacheconf .code .variable,
.codeblock.apacheconf .code .cbracket,
.codeblock.apacheconf .code .keyword {
    color: #0086b3;
}
figure.highlight.apacheconf .code .sqbracket,
.codeblock.apacheconf .code .sqbracket {
    color: #df5000;
}
figure.highlight.apacheconf .code .section,
figure.highlight.apacheconf .code .tag,
.codeblock.apacheconf .code .section,
.codeblock.apacheconf .code .tag {
    color: #63a35c;
}
figure.highlight.bash .code .shebang,
.codeblock.bash .code .shebang {
    color: #969896;
}
figure.highlight.bash .code .literal,
figure.highlight.bash .code .built_in,
.codeblock.bash .code .literal,
.codeblock.bash .code .built_in {
    color: #0086b3;
}
figure.highlight.bash .code .variable,
.codeblock.bash .code .variable {
    color: #333;
}
figure.highlight.bash .code .title,
.codeblock.bash .code .title {
    color: #795da3;
}
figure.highlight.coffeescript .code .title,
.codeblock.coffeescript .code .title {
    color: #795da3;
}
figure.highlight.coffeescript .code .literal,
figure.highlight.coffeescript .code .built_in,
figure.highlight.coffeescript .code .number,
.codeblock.coffeescript .code .literal,
.codeblock.coffeescript .code .built_in,
.codeblock.coffeescript .code .number {
    color: #0086b3;
}
figure.highlight.coffeescript .code .reserved,
figure.highlight.coffeescript .code .attribute,
.codeblock.coffeescript .code .reserved,
.codeblock.coffeescript .code .attribute {
    color: #1d3e81;
}
figure.highlight.coffeescript .code .subst,
figure.highlight.coffeescript .code .regexp,
figure.highlight.coffeescript .code .attribute,
.codeblock.coffeescript .code .subst,
.codeblock.coffeescript .code .regexp,
.codeblock.coffeescript .code .attribute {
    color: #df5000;
}
figure.highlight.cpp .code .preprocessor, figure.highlight.c .code .preprocessor,
.codeblock.cpp .code .preprocessor,
.codeblock.c .code .preprocessor {
    color: #df5000;
}
figure.highlight.cpp .code .meta-keyword, figure.highlight.c .code .meta-keyword,
.codeblock.cpp .code .meta-keyword,
.codeblock.c .code .meta-keyword {
    color: #a71d5d;
}
figure.highlight.cpp .code .title, figure.highlight.c .code .title,
.codeblock.cpp .code .title,
.codeblock.c .code .title {
    color: #795da3;
}
figure.highlight.cpp .code .number,
figure.highlight.cpp .code .built_in, figure.highlight.c .code .number,
figure.highlight.c .code .built_in,
.codeblock.cpp .code .number,
.codeblock.cpp .code .built_in,
.codeblock.c .code .number,
.codeblock.c .code .built_in {
    color: #0086b3;
}
figure.highlight.cs .code .preprocessor,
figure.highlight.cs .code .preprocessor .keyword,
.codeblock.cs .code .preprocessor,
.codeblock.cs .code .preprocessor .keyword {
    color: #333;
}
figure.highlight.cs .code .title,
.codeblock.cs .code .title {
    color: #795da3;
}
figure.highlight.cs .code .number,
figure.highlight.cs .code .built_in,
.codeblock.cs .code .number,
.codeblock.cs .code .built_in {
    color: #0086b3;
}
figure.highlight.cs .code .xmlDocTag,
figure.highlight.cs .code .doctag,
.codeblock.cs .code .xmlDocTag,
.codeblock.cs .code .doctag {
    color: #63a35c;
}
figure.highlight.css .code .at_rule,
figure.highlight.css .code .important,
figure.highlight.css .code .meta,
.codeblock.css .code .at_rule,
.codeblock.css .code .important,
.codeblock.css .code .meta {
    color: #a71d5d;
}
figure.highlight.css .code .attribute,
figure.highlight.css .code .hexcolor,
figure.highlight.css .code .number,
figure.highlight.css .code .function,
.codeblock.css .code .attribute,
.codeblock.css .code .hexcolor,
.codeblock.css .code .number,
.codeblock.css .code .function {
    color: #0086b3;
}
figure.highlight.css .code .attr_selector,
figure.highlight.css .code .value,
.codeblock.css .code .attr_selector,
.codeblock.css .code .value {
    color: #333;
}
figure.highlight.css .code .id,
figure.highlight.css .code .class,
figure.highlight.css .code .pseudo,
figure.highlight.css .code .selector-pseudo,
.codeblock.css .code .id,
.codeblock.css .code .class,
.codeblock.css .code .pseudo,
.codeblock.css .code .selector-pseudo {
    color: #795da3;
}
figure.highlight.css .code .tag,
figure.highlight.css .code .selector-tag,
.codeblock.css .code .tag,
.codeblock.css .code .selector-tag {
    color: #63a35c;
}
figure.highlight.diff .code .chunk,
figure.highlight.diff .code .meta,
.codeblock.diff .code .chunk,
.codeblock.diff .code .meta {
    color: #795da3;
    font-weight: bold;
}
figure.highlight.diff .code .addition,
.codeblock.diff .code .addition {
    color: #55a532;
    background-color: #eaffea;
}
figure.highlight.diff .code .deletion,
.codeblock.diff .code .deletion {
    color: #bd2c00;
    background-color: #ffecec;
}
figure.highlight.http .code .attribute,
figure.highlight.http .code .attr,
.codeblock.http .code .attribute,
.codeblock.http .code .attr {
    color: #183691;
}
figure.highlight.http .code .literal,
.codeblock.http .code .literal {
    color: #0086b3;
}
figure.highlight.http .code .request,
.codeblock.http .code .request {
    color: #a71d5d;
}
figure.highlight.ini .code .title,
figure.highlight.ini .code .section,
.codeblock.ini .code .title,
.codeblock.ini .code .section {
    color: #795da3;
}
figure.highlight.ini .code .setting,
figure.highlight.ini .code .attr,
.codeblock.ini .code .setting,
.codeblock.ini .code .attr {
    color: #a71d5d;
}
figure.highlight.ini .code .value,
figure.highlight.ini .code .keyword,
.codeblock.ini .code .value,
.codeblock.ini .code .keyword {
    color: #333;
}
figure.highlight.java .code .title,
.codeblock.java .code .title {
    color: #795da3;
}
figure.highlight.java .code .javadoc,
.codeblock.java .code .javadoc {
    color: #969896;
}
figure.highlight.java .code .meta,
figure.highlight.java .code .annotation,
figure.highlight.java .code .javadoctag,
.codeblock.java .code .meta,
.codeblock.java .code .annotation,
.codeblock.java .code .javadoctag {
    color: #a71d5d;
}
figure.highlight.java .code .number,
.codeblock.java .code .number {
    color: #0086b3;
}
figure.highlight.java .code .params,
.codeblock.java .code .params {
    color: #1d3e81;
}
figure.highlight.js .code .built_in,
figure.highlight.js .code .title,
.codeblock.js .code .built_in,
.codeblock.js .code .title {
    color: #795da3;
}
figure.highlight.js .code .javadoc,
.codeblock.js .code .javadoc {
    color: #969896;
}
figure.highlight.js .code .tag,
figure.highlight.js .code .javadoctag,
.codeblock.js .code .tag,
.codeblock.js .code .javadoctag {
    color: #a71d5d;
}
figure.highlight.js .code .tag .title,
.codeblock.js .code .tag .title {
    color: #333;
}
figure.highlight.js .code .regexp,
.codeblock.js .code .regexp {
    color: #df5000;
}
figure.highlight.js .code .literal,
figure.highlight.js .code .number,
.codeblock.js .code .literal,
.codeblock.js .code .number {
    color: #0086b3;
}
figure.highlight.json .code .attribute,
.codeblock.json .code .attribute {
    color: #183691;
}
figure.highlight.json .code .number,
figure.highlight.json .code .literal,
.codeblock.json .code .number,
.codeblock.json .code .literal {
    color: #0086b3;
}
figure.highlight.mak .code .constant,
.codeblock.mak .code .constant {
    color: #333;
}
figure.highlight.mak .code .title,
.codeblock.mak .code .title {
    color: #795da3;
}
figure.highlight.mak .code .keyword,
figure.highlight.mak .code .meta-keyword,
.codeblock.mak .code .keyword,
.codeblock.mak .code .meta-keyword {
    color: #0086b3;
}
figure.highlight.md .code .value,
figure.highlight.md .code .link_label,
figure.highlight.md .code .strong,
figure.highlight.md .code .emphasis,
figure.highlight.md .code .blockquote,
figure.highlight.md .code .quote,
figure.highlight.md .code .section,
.codeblock.md .code .value,
.codeblock.md .code .link_label,
.codeblock.md .code .strong,
.codeblock.md .code .emphasis,
.codeblock.md .code .blockquote,
.codeblock.md .code .quote,
.codeblock.md .code .section {
    color: #183691;
}
figure.highlight.md .code .link_reference,
figure.highlight.md .code .symbol,
figure.highlight.md .code .code,
.codeblock.md .code .link_reference,
.codeblock.md .code .symbol,
.codeblock.md .code .code {
    color: #0086b3;
}
figure.highlight.md .code .link_url,
figure.highlight.md .code .link,
.codeblock.md .code .link_url,
.codeblock.md .code .link {
    text-decoration: underline;
}
figure.highlight.nginx .code .title,
figure.highlight.nginx .code .attribute,
.codeblock.nginx .code .title,
.codeblock.nginx .code .attribute {
    color: #a71d5d;
}
figure.highlight.nginx .code .built_in,
figure.highlight.nginx .code .literal,
.codeblock.nginx .code .built_in,
.codeblock.nginx .code .literal {
    color: #0086b3;
}
figure.highlight.nginx .code .regexp,
.codeblock.nginx .code .regexp {
    color: #183691;
}
figure.highlight.nginx .code .variable,
.codeblock.nginx .code .variable {
    color: #333;
}
figure.highlight.objectivec .code .preprocessor,
figure.highlight.objectivec .code .meta,
.codeblock.objectivec .code .preprocessor,
.codeblock.objectivec .code .meta {
    color: #a71d5d;
}
figure.highlight.objectivec .code .preprocessor .title,
figure.highlight.objectivec .code .meta .title,
.codeblock.objectivec .code .preprocessor .title,
.codeblock.objectivec .code .meta .title {
    color: #df5000;
}
figure.highlight.objectivec .code .meta-string,
.codeblock.objectivec .code .meta-string {
    color: #183691;
}
figure.highlight.objectivec .code .title,
.codeblock.objectivec .code .title {
    color: #795da3;
}
figure.highlight.objectivec .code .literal,
figure.highlight.objectivec .code .number,
figure.highlight.objectivec .code .built_in,
.codeblock.objectivec .code .literal,
.codeblock.objectivec .code .number,
.codeblock.objectivec .code .built_in {
    color: #0086b3;
}
figure.highlight.perl .code .sub,
.codeblock.perl .code .sub {
    color: #795da3;
}
figure.highlight.perl .code .title,
.codeblock.perl .code .title {
    color: #795da3;
}
figure.highlight.perl .code .regexp,
.codeblock.perl .code .regexp {
    color: #df5000;
}
figure.highlight.php .code .phpdoc,
figure.highlight.php .code .doctag,
.codeblock.php .code .phpdoc,
.codeblock.php .code .doctag {
    color: #a71d5d;
}
figure.highlight.php .code .regexp,
.codeblock.php .code .regexp {
    color: #df5000;
}
figure.highlight.php .code .literal,
figure.highlight.php .code .number,
.codeblock.php .code .literal,
.codeblock.php .code .number {
    color: #0086b3;
}
figure.highlight.php .code .title,
.codeblock.php .code .title {
    color: #795da3;
}
figure.highlight.python .code .decorator,
figure.highlight.python .code .title,
figure.highlight.python .code .meta,
.codeblock.python .code .decorator,
.codeblock.python .code .title,
.codeblock.python .code .meta {
    color: #795da3;
}
figure.highlight.python .code .number,
.codeblock.python .code .number {
    color: #0086b3;
}
figure.highlight.ruby .code .parent,
figure.highlight.ruby .code .title,
.codeblock.ruby .code .parent,
.codeblock.ruby .code .title {
    color: #795da3;
}
figure.highlight.ruby .code .prompt,
figure.highlight.ruby .code .constant,
figure.highlight.ruby .code .number,
figure.highlight.ruby .code .subst .keyword,
figure.highlight.ruby .code .symbol,
.codeblock.ruby .code .prompt,
.codeblock.ruby .code .constant,
.codeblock.ruby .code .number,
.codeblock.ruby .code .subst .keyword,
.codeblock.ruby .code .symbol {
    color: #0086b3;
}
figure.highlight.sql .built_in,
.codeblock.sql .built_in {
    color: #a71d5d;
}
figure.highlight.sql .number,
.codeblock.sql .number {
    color: #0086b3;
}
figure.highlight.xml .tag, figure.highlight.html .tag,
.codeblock.xml .tag,
.codeblock.html .tag {
    color: #333;
}
figure.highlight.xml .value, figure.highlight.html .value,
.codeblock.xml .value,
.codeblock.html .value {
    color: #183691;
}
figure.highlight.xml .attribute,
figure.highlight.xml .attr, figure.highlight.html .attribute,
figure.highlight.html .attr,
.codeblock.xml .attribute,
.codeblock.xml .attr,
.codeblock.html .attribute,
.codeblock.html .attr {
    color: #795da3;
}
figure.highlight.xml .title,
figure.highlight.xml .name, figure.highlight.html .title,
figure.highlight.html .name,
.codeblock.xml .title,
.codeblock.xml .name,
.codeblock.html .title,
.codeblock.html .name {
    color: #63a35c;
}
figure.highlight.puppet .title,
.codeblock.puppet .title {
    color: #795da3;
}
figure.highlight.puppet .function,
.codeblock.puppet .function {
    color: #0086b3;
}
figure.highlight.puppet .name,
.codeblock.puppet .name {
    color: #a71d5d;
}
figure.highlight.puppet .attr,
.codeblock.puppet .attr {
    color: #0086b3;
}
figure.highlight.less .tag,
figure.highlight.less .at_rule,
.codeblock.less .tag,
.codeblock.less .at_rule {
    color: #a71d5d;
}
figure.highlight.less .number,
figure.highlight.less .hexcolor,
figure.highlight.less .function,
figure.highlight.less .attribute,
.codeblock.less .number,
.codeblock.less .hexcolor,
.codeblock.less .function,
.codeblock.less .attribute {
    color: #0086b3;
}
figure.highlight.less .built_in,
.codeblock.less .built_in {
    color: #df5000;
}
figure.highlight.less .id,
figure.highlight.less .pseudo,
figure.highlight.less .class,
figure.highlight.less .selector-id,
figure.highlight.less .selector-class,
figure.highlight.less .selector-tag,
.codeblock.less .id,
.codeblock.less .pseudo,
.codeblock.less .class,
.codeblock.less .selector-id,
.codeblock.less .selector-class,
.codeblock.less .selector-tag {
    color: #795da3;
}
figure.highlight.scss .tag,
figure.highlight.scss .at_rule,
figure.highlight.scss .important,
.codeblock.scss .tag,
.codeblock.scss .at_rule,
.codeblock.scss .important {
    color: #a71d5d;
}
figure.highlight.scss .number,
figure.highlight.scss .hexcolor,
figure.highlight.scss .function,
figure.highlight.scss .attribute,
.codeblock.scss .number,
.codeblock.scss .hexcolor,
.codeblock.scss .function,
.codeblock.scss .attribute {
    color: #0086b3;
}
figure.highlight.scss .variable,
.codeblock.scss .variable {
    color: #333;
}
figure.highlight.scss .built_in,
.codeblock.scss .built_in {
    color: #df5000;
}
figure.highlight.scss .id,
figure.highlight.scss .pseudo,
figure.highlight.scss .class,
figure.highlight.scss .preprocessor,
figure.highlight.scss .selector-class,
figure.highlight.scss .selector-id,
.codeblock.scss .id,
.codeblock.scss .pseudo,
.codeblock.scss .class,
.codeblock.scss .preprocessor,
.codeblock.scss .selector-class,
.codeblock.scss .selector-id {
    color: #795da3;
}
figure.highlight.scss .tag,
figure.highlight.scss .selector-tag,
.codeblock.scss .tag,
.codeblock.scss .selector-tag {
    color: #63a35c;
}
figure.highlight.stylus .at_rule,
.codeblock.stylus .at_rule {
    color: #a71d5d;
}
figure.highlight.stylus .tag,
figure.highlight.stylus .selector-tag,
.codeblock.stylus .tag,
.codeblock.stylus .selector-tag {
    color: #63a35c;
}
figure.highlight.stylus .number,
figure.highlight.stylus .hexcolor,
figure.highlight.stylus .attribute,
figure.highlight.stylus .params,
.codeblock.stylus .number,
.codeblock.stylus .hexcolor,
.codeblock.stylus .attribute,
.codeblock.stylus .params {
    color: #0086b3;
}
figure.highlight.stylus .class,
figure.highlight.stylus .id,
figure.highlight.stylus .pseudo,
figure.highlight.stylus .title,
figure.highlight.stylus .selector-id,
figure.highlight.stylus .selector-pseudo,
figure.highlight.stylus .selector-class,
.codeblock.stylus .class,
.codeblock.stylus .id,
.codeblock.stylus .pseudo,
.codeblock.stylus .title,
.codeblock.stylus .selector-id,
.codeblock.stylus .selector-pseudo,
.codeblock.stylus .selector-class {
    color: #795da3;
}
figure.highlight.go .typename,
.codeblock.go .typename {
    color: #a71d5d;
}
figure.highlight.go .built_in,
figure.highlight.go .constant,
.codeblock.go .built_in,
.codeblock.go .constant {
    color: #0086b3;
}
figure.highlight.swift .preprocessor,
.codeblock.swift .preprocessor {
    color: #a71d5d;
}
figure.highlight.swift .title,
.codeblock.swift .title {
    color: #795da3;
}
figure.highlight.swift .built_in,
figure.highlight.swift .number,
figure.highlight.swift .type,
.codeblock.swift .built_in,
.codeblock.swift .number,
.codeblock.swift .type {
    color: #0086b3;
}
figure.highlight.yml .line
.attr,
.codeblock.yml .line
.attr {
    color: #63a35c;
}
figure.highlight.yml .line,
figure.highlight.yml .string,
figure.highlight.yml .type,
figure.highlight.yml .literal,
figure.highlight.yml .meta,
.codeblock.yml .line,
.codeblock.yml .string,
.codeblock.yml .type,
.codeblock.yml .literal,
.codeblock.yml .meta {
    color: #183691;
}
figure.highlight.yml .number,
.codeblock.yml .number {
    color: #0086b3;
}

/* Code Block Expansion Styles */
.code-block-container {
    position: relative;
    margin: 10px 0; /* Match figure.highlight margin */
}

.code-block-container.collapsed figure.highlight {
    max-height: none;
    overflow: visible;
    position: relative;
    margin: 0; /* Remove default margin to prevent double spacing */
}

.code-block-container.collapsed figure.highlight pre.code {
    margin: 0;
    padding: 15px 15px 60px 15px;
    max-height: 400px;
    overflow: auto;
    background-color: #f7f8f8;
    font-family: Courier New, Courier, monospace;
    line-height: 1.3em;
}

/* Ensure code blocks inherit proper indentation from parent elements */
figure.highlight {
    margin-left: inherit;
    margin-right: inherit;
}

/* 代码块按钮组容器 */
.code-buttons {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 1px;
    z-index: 2;
}

/* 复制按钮样式 */
.copy-code-button {
    background: #666;
    color: white;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 0;
    font-size: 12px;
    transition: background-color 0.3s ease;
    height: 44px;
    box-sizing: border-box;
    font-family: 'noto-sans-sc', -apple-system, BlinkMacSystemFont, sans-serif;
}

.copy-code-button:hover {
    background: #555;
}

.copy-code-button.copied {
    background: #4CAF50;
}

/* 展开按钮样式 */
.expand-button {
    background: #666;
    color: white;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 0 0 4px 0; /* Match the container's border radius */
    font-size: 12px;
    transition: background-color 0.3s ease;
    height: 44px;
    box-sizing: border-box;
    font-family: 'noto-sans-sc', -apple-system, BlinkMacSystemFont, sans-serif;
}

.expand-button:hover {
    background: #555;
}

.expand-button.expanded {
    background: #333;
}

/* 如果没有展开按钮，复制按钮独占时的圆角 */
.code-buttons .copy-code-button:only-child {
    border-radius: 0 0 4px 0;
}

/* Fullscreen Modal Styles */
.code-fullscreen-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
}

.code-fullscreen-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.code-fullscreen-content {
    width: 100%;
    height: 100%;
    max-width: 95%;
    max-height: 95%;
    background: #f7f8f8;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.code-fullscreen-content figure.highlight {
    margin: 0 !important;
    flex: 1 1 auto;
    height: 100%;
    max-height: 100% !important;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 允许flex子项收缩 */
}

.code-fullscreen-content figure.highlight pre.code {
    display: block;
    flex: 1;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 20px;
    overflow-y: auto;
    overflow-x: auto;
    background-color: #f7f8f8;
    font-family: Courier New, Courier, monospace;
    line-height: 1.3em;
    border-radius: 8px;
    box-sizing: border-box;
}

/* 处理嵌套pre的情况 - 让内层pre根据内容撑开 */
.code-fullscreen-content figure.highlight pre.code > pre {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 100%;
}

/* 确保滚动条始终可见且美观 */
.code-fullscreen-content figure.highlight pre.code::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.code-fullscreen-content figure.highlight pre.code::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 6px;
}

.code-fullscreen-content figure.highlight pre.code::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

.code-fullscreen-content figure.highlight pre.code::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.close-fullscreen {
    position: absolute;
    top: 10px;
    right: 15px;
    background: #666;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10;
}

.close-fullscreen:hover {
    background: #555;
}