/* ===== 基础样式重置和通用设置 ===== */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr, dl, dd, ol, ul, figure {
    margin: 0;
    padding: 0;
}

hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
}

body, html {
    height: 100%;
}

body {
    z-index: initial;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    color: #111;
    background-color: #f9f9f9;
    -webkit-text-size-adjust: 100%;
}

body:after {
    display: none;
    content: url("images/background/background1.JPG") url("images/background/background2.jpg");
}

/* ===== 通用内容样式 ===== */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight {
    margin-bottom: 15px;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

figure > img {
    display: block;
}

figcaption {
    font-size: 14px;
}

ul, ol {
    margin-left: 30px;
}

li > ul, li > ol {
    margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

/* ===== 链接样式 ===== */
a {
    color: #2a7ae2;
    text-decoration: none;
}

a:visited {
    color: #1756a9;
}

a:hover {
    color: #111;
    text-decoration: underline;
}

/* ===== 引用和代码样式 ===== */
blockquote {
    color: #828282;
    border-left: 4px solid #e8e8e8;
    padding-left: 15px;
    font-size: 18px;
    letter-spacing: -1px;
    font-style: italic;
}

blockquote > :last-child {
    margin-bottom: 0;
}

pre, code {
    font-size: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background-color: #eef;
}

code {
    padding: 1px 5px;
}

pre {
    padding: 8px 12px;
    overflow-x: scroll;
}

pre > code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
}

/* ===== 容器和布局系统 ===== */
.wrapper {
    max-width: calc(1024px - 60px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 30px;
    padding-left: 30px;
}

@media screen and (max-width: 800px) {
    .wrapper {
        max-width: calc(1024px - 30px);
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* ===== 清除浮动 ===== */
.wrapper:after,
.footer-col-wrapper:after,
.cover:after,
.profile-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

/* ===== 文本颜色工具类 ===== */
.text-grey-light { color: #e8e8e8; }
.text-grey-bright { color: #fff; }
.text-grey { color: #828282; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }

/* ===== 标题样式 ===== */
.sm-heading {
    font-size: 20px;
    color: #9b3022;
    font-weight: 300;
}

.md-heading {
    font-size: 24px;
    color: #9b3022;
    font-weight: 400;
}

.lg-heading {
    font-size: 30px;
    color: #9b3022;
    font-weight: 600;
}

/* ===== 统一的Section容器 ===== */
/* 这是解决对齐问题的关键：为所有section使用统一的基础样式 */
.section-container {
    max-width: calc(100% - 15px);
    margin: 20px auto;
    padding: 0;
}

@media screen and (max-width: 600px) {
    .section-container {
        max-width: calc(100% - 15px);
        margin: 15px auto;
    }
}

/* ===== 特定section的扩展样式 ===== */
/* Biography section */
.bio {
    /* 继承 .section-container 的样式，可以添加特定的样式 */
}

.bio-body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Publications section */
.publications {
    /* 继承 .section-container 的样式 */
    font-family: 'Roboto', sans-serif, Helvetica;
}

/* Timeline/Experiences section */
.timeline-brief,
.timeline {
    /* 继承 .section-container 的样式 */
    font-family: 'Roboto', sans-serif, Helvetica;
    font-size: 20px;
    font-weight: 400;
}

/* ===== 头部导航 ===== */
.site-header {
    border-top: 3px solid #9b3022;
    border-bottom: 1px solid #9b3022;
    min-height: 56px;
    position: relative;
}

.site-title {
    font-size: 26px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif, Helvetica;
    line-height: 56px;
    letter-spacing: -1px;
    margin-bottom: 0;
    float: left;
}

.site-title,
.site-title:visited {
    color: #002336;
}

.site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 56px;
    z-index: 3;
}

.site-nav .menu-icon {
    display: none;
}

.site-nav .page-link {
    font-weight: 400;
    color: #002336;
    line-height: 1.5;
}

.site-nav .page-link:not(:first-child) {
    margin-left: 20px;
}

@media screen and (max-width: 600px) {
    .site-nav {
        position: absolute;
        top: 9px;
        right: 30px;
        background-color: #f9f9f9;
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        text-align: right;
    }

    .site-nav .menu-icon {
        display: block;
        float: right;
        width: 36px;
        height: 26px;
        line-height: 0;
        padding-top: 10px;
        text-align: center;
    }

    .site-nav .menu-icon > svg {
        width: 18px;
        height: 15px;
    }

    .site-nav .menu-icon > svg path {
        fill: #113f7c;
    }

    .site-nav .trigger {
        clear: both;
        display: none;
    }

    .site-nav:hover .trigger {
        display: block;
        padding-bottom: 5px;
    }

    .site-nav .page-link {
        font-weight: 400;
        display: block;
        padding: 5px 10px;
    }
}

/* ===== 页脚 ===== */
.site-footer {
    border-top: 1px solid #9b3022;
    padding: 30px 0;
}

.footer-heading {
    font-size: 18px;
    margin-bottom: 15px;
}

.contact-list,
.social-media-list {
    list-style: none;
    margin-left: 0;
}

.footer-col-wrapper {
    font-size: 15px;
    color: #828282;
    margin-left: -15px;
}

.footer-col {
    float: left;
    margin-bottom: 15px;
    padding-left: 15px;
}

.footer-col-1 { width: calc(25% - 15px); }
.footer-col-2 { width: calc(35% - 15px); }
.footer-col-3 { width: calc(40% - 15px); }

@media screen and (max-width: 800px) {
    .footer-col-1,
    .footer-col-2 {
        width: calc(50% - 15px);
    }
    .footer-col-3 {
        width: calc(100% - 15px);
    }
}

@media screen and (max-width: 600px) {
    .footer-col {
        float: none;
        width: calc(100% - 15px);
    }
}

/* ===== 主要内容区域 ===== */
.page-content {
    padding: 30px 0;
}

/* ===== 按钮样式 ===== */
.custom-button {
    font-size: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #0077B5;
    padding: 5px 5px;
    outline: none;
}

.custom-button:hover {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.button {
    padding: 10px;
    margin-top: 25px;
}

.button a {
    border: solid 1px #e0e0e0;
    border-radius: 0.2rem;
    color: #868686;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 2.0rem;
    text-decoration: none;
}

.button em {
    border: solid 1px #e0e0e0;
    border-radius: 0.2rem;
    color: #868686;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
}

.button > .heading > a:hover {
    color: #fff;
    background-color: #292929;
    border: solid 1px #292929;
}

/* ===== Profile/封面区域 ===== */
.cover {
    max-width: 100%;
    height: 320px;
    z-index: initial;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0px;
    padding-left: 0px;
}

@media screen and (max-width: 800px) {
    .cover {
        max-width: calc(1024px - 30px);
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media screen and (max-width: 600px) {
    .cover {
        height: 400px;
    }
}

.shallow-bg {
    background-image: url("images/background/background_ict.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.deep-bg {
    background-image: url("images/background/background2.JPG");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.profile-wrapper {
    border-radius: 25px;
    position: relative;
    top: 20%;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 600px) {
    .profile-wrapper {
        top: 5%;
        border-radius: 25px;
        position: relative;
        width: calc(90% - 15px);
        margin-left: auto;
        margin-right: auto;
    }
}

.wrapper-light {
    background-color: rgba(255, 255, 255, 0.8);
}

.wrapper-dark {
    background-color: rgba(150, 150, 150, 0.8);
}

.profile-col {
    float: left !important;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.profile-col-1 { width: calc(40% - 15px); }
.profile-col-2 { width: calc(60% - 15px); }

@media screen and (max-width: 800px) {
    .profile-col-1,
    .profile-col-2 {
        width: calc(50% - 15px);
    }
}

@media screen and (max-width: 600px) {
    .profile-col {
        position: relative;
        margin: 10px auto;
        float: none;
        width: 100%;
    }
}

/* ===== Profile图片和信息样式 ===== */
.circle-img {
    margin: 0px auto;
    width: 168px;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
}

.border-dark { border-color: #292929; }
.border-bright { border-color: #fff; }
.border-light { border-color: #e8e8e8; }

.circle-img-light {
    margin: 0px auto;
    width: 168px;
    border-width: 3px;
    border-style: solid;
    border-radius: 50%;
}

#my-name {
    font-size: 32px;
    font-weight: bold;
    color: #292929;
}

#my-title {
    font-size: 20px;
    color: #292929;
    font-weight: 200;
}

#my-email {
    font-size: 16px;
    color: #292929;
    font-weight: 160;
}

#my-desc-title {
    font-size: 28px;
    color: #fff;
    font-weight: bold;
}

#my-desc-content {
    font-size: 18px;
    color: #e8e8e8;
    font-weight: 200;
}

@media screen and (max-width: 600px) {
    #my-title {
        display: none;
    }
}

/* ===== 工具类 ===== */
.preview {
    text-overflow: ellipsis;
    overflow: hidden;
}

.hide { display: none; }
.hidden { display: none; }

.maxim {
    background-color: #e8e8e8;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 20px;
    border-radius: 4px;
    color: #002336;
}

@media screen and (max-width: 600px) {
    .maxim {
        padding: 2px;
        margin: 2px;
    }
}

.maxim > div > strong,
.maxim > p > strong,
.maxim > strong { color: #9b3022; }

.maxim > div > b,
.maxim > p > b,
.maxim > b { color: #00a200; }

.maxim > div > s,
.maxim > s { color: #00a200; }

.maxim > div > em,
.maxim > em {
    color: #002336;
    font-weight: 400;
}

.maxim > div > i,
.maxim > i {
    color: #0077B5;
    font-weight: 400;
}

.maxim > div > u,
.maxim > u {
    color: #4d004d;
    font-weight: 400;
}

.maxim > div {
    margin: 5px;
}

/* ===== 分隔线 ===== */
hr.soft {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.75), transparent);
    padding: 0;
    margin: 0;
}

/* ===== 回到顶部按钮 ===== */
.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #35DACA;
    background-color: rgba(235, 235, 235, 0.8);
    font-size: 16px;
    font-weight: bold;
    padding: 1em;
    display: none;
}

.back-to-top:hover {
    background-color: rgba(135, 135, 135, 0.5);
}

/* ===== 社交媒体图标 ===== */
.social-icon {
    width: 40px;
    height: 40px;
    display: inline-block;
}

.icon-button {
    background-color: white;
    border-radius: 3.6rem;
    cursor: pointer;
    display: inline-block;
    font-size: 2.0rem;
    height: 3.6rem;
    line-height: 3.6rem;
    margin: 0 5px;
    position: relative;
    text-align: center;
    user-select: none;
    width: 3.6rem;
}

.icon-button span {
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    transition: all 0.3s;
    width: 0;
}

.icon-button:hover span {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 3.6rem;
    margin: -1.8rem;
}

.twitter span { background-color: #4099ff; }
.facebook span { background-color: #3B5998; }
.linkedin span { background-color: #0077B5; }
.github span { background-color: #000; }

.icon-button i {
    background: none;
    color: white;
    height: 3.6rem;
    left: 0;
    line-height: 3.6rem;
    position: absolute;
    top: 0;
    transition: all 0.3s;
    width: 3.6rem;
    z-index: 10;
}

.icon-button .icon-twitter { color: #4099ff; }
.icon-button .icon-facebook { color: #3B5998; }
.icon-button .icon-github { color: #000; }
.icon-button .icon-linkedin { color: #0077B5; }

.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-github,
.icon-button:hover .icon-linkedin {
    color: white;
}

/* ===== Timeline/时间轴样式 ===== */
.timeline-body {
    padding: 0;
}

.timeline-start {
    width: calc(100% - 40px);
    text-align: center;
    padding: 20px;
}

.timeline-item:before {
    width: 11px;
    height: 11px;
    background: #333;
    content: "";
    display: block;
    position: absolute;
    border-radius: 5px;
}

.timeline-item {
    width: calc(50% - 20px);
    position: relative;
}

.timeline-item:nth-child(odd):before { left: -8px; }
.timeline-item:nth-child(odd):after { left: -8px; bottom: 0; }

.timeline-item:nth-child(odd) {
    margin-left: 50%;
    padding-left: 20px;
    border-left: 5px solid #333;
    text-align: left;
}

.timeline-item:nth-child(even) {
    margin-right: calc(50% + 20px);
    padding-right: 20px;
    border-right: 5px solid #333;
    text-align: right;
}

.timeline-item:nth-child(even):before { right: -8px; }
.timeline-item:nth-child(even):after { right: -8px; }

.timeline-date {
    font-size: 16px;
    font-weight: 600;
    color: #113f7c;
}

.timeline-title {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: #9b3022;
}

.timeline-desc {
    font-size: 16px;
    font-weight: 200;
}

.timeline-host {
    font-size: 14px;
    font-weight: 400;
}

.timeline > .timeline-body > .timeline-item:last-child:after {
    bottom: 0;
    width: 11px;
    height: 11px;
    background: #333;
    content: "";
    display: block;
    position: absolute;
    border-radius: 5px;
}

.timeline > .timeline-body > .timeline-item:last-child:nth-child(even) {
    vertical-align: middle;
    min-height: 200px;
    border-right: 5px dashed #333;
}

.timeline > .timeline-body > .timeline-item:last-child:nth-child(odd) {
    vertical-align: middle;
    min-height: 200px;
    border-left: 5px dashed #333;
}

@media screen and (max-width: 600px) {
    .timeline-start {
        min-height: 50px;
        padding: 0 0 0 5px;
        text-align: left;
        border-left: 5px dashed #333;
        width: 100%;
        padding-left: 5px;
        margin-left: 5px;
    }

    .timeline-start:after {
        left: 17px;
        width: 11px;
        height: 11px;
        background: #333;
        content: "";
        display: block;
        position: absolute;
        border-radius: 5px;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        min-height: 0;
        text-align: left;
        border-left: 5px solid #333;
        border-right: 0px;
        width: 100%;
        padding-left: 5px;
        margin-left: 5px;
        margin-right: 0px;
        padding-right: 0px;
    }

    .timeline > .timeline-body > .timeline-item:last-child:nth-child(odd),
    .timeline > .timeline-body > .timeline-item:last-child:nth-child(even) {
        min-height: 0;
        text-align: left;
        border-left: 5px solid #333;
        border-right: 0px;
        width: 100%;
        padding-left: 5px;
        margin-left: 5px;
        margin-right: 0px;
        padding-right: 0px;
    }

    .timeline-item:before { left: -8px; }
    .timeline-item:after { left: -8px; }

    .timeline-date { font-size: 14px; }
    .timeline-title { font-size: 16px; }
    .timeline-desc { font-size: 12px; }
    .timeline-host { font-size: 10px; }
}

/* ===== Publications样式 ===== */
.pub-list {
    overflow: auto;
}

.pub {
    margin-top: 5px;
    margin-bottom: 15px;
    overflow: auto;
}

.pub-left {
    float: left;
    width: calc(40% - 15px);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.pub-left > .intro-img {
    width: 280px;
    height: 130px;
    border-style: solid;
    border-color: #9b3022;
    object-fit: contain;
    object-position: center;
}

.pub-right {
    float: right;
    width: calc(60% - 15px);
}

@media screen and (max-width: 800px) {
    .pub-left,
    .pub-right {
        float: none;
        margin: 10px auto;
        width: calc(100% - 15px);
    }
}

@media screen and (max-width: 600px) {
    .pub {
        position: relative;
        margin: 10px auto;
        float: none;
        width: calc(100% - 15px);
    }
}

.pub-right > .title {
    font-weight: 600;
}

.pub-right > .authors > .author {
    color: #0077B5;
    font-weight: 400;
}

.pub-right > .tags > .tag {
    color: #9b3022;
    font-weight: 500;
    font-size: 14px;
}

.pub-right > .desc > p {
    margin: auto;
}

.pub-right > .publish {
    float: right;
}

.pub-right > .publish > .publisher {
    color: #002336;
    font-size: 16px;
}

.pub-right > .publish > .status {
    color: #9b3022;
    font-weight: 800;
    font-size: 16px;
}

@media screen and (max-width: 600px) {
    .pub-right > .publish > .status {
        display: none;
    }
}

.pub-right > .publish > .place {
    color: #0077B5;
    font-weight: 500;
    font-size: 16px;
}

@media screen and (max-width: 600px) {
    .pub-right > .publish > .place {
        display: none;
    }
}

/* ===== 缩进列表样式 (用于News等) ===== */
li.indented {
    position: relative;
    padding-left: 90px;
}

li.indented::before {
    content: attr(data-date);
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}

/* ===== GitHub卡片样式 ===== */
.card-container {
    display: flex;
    justify-content: center;
    gap: 24px 32px;
    flex-wrap: wrap;
    width: 940px;
    margin: 0 auto;
}

.github-card {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    background-color: white;
    margin-bottom: 24px;
    width: 430px;
    font-family: system-ui, sans-serif;
    font-size: 14px;
    color: #333;
}

.github-card a {
    color: #1a1a1a;
    text-decoration: none;
}

.github-card a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.github-card .repo-link {
    font-weight: 500;
    font-size: 14px;
}

.github-card .label {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    font-size: 12px;
    color: #6b7280;
}

.github-card .description {
    margin-top: 8px;
    font-size: 11px;
    color: #6b7280;
}

.github-card .meta {
    margin-top: 12px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #6b7280;
}

.github-card .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #2563eb;
    border-radius: 50%;
    margin-right: 6px;
}

.github-card .meta a {
    display: inline-flex;
    align-items: center;
    margin-left: 16px;
    color: #6b7280;
}

.github-card .meta a:hover {
    color: #2563eb;
}

.github-card svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* ===== Academic Services 样式 ===== */
.reviewer-section {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
}

.reviewer-column {
    flex: 1 1 50%;
    box-sizing: border-box;
    padding-right: 20px;
    font-size: 0.85em;
    line-height: 1.6;
    position: relative;
    padding-left: 1em;
    margin-bottom: 4px;
}

.reviewer-column::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #555;
}

@media (max-width: 600px) {
    .reviewer-column {
        flex: 1 1 100%;
    }
}

.reviewer-title {
    margin-top: 12px;
    font-weight: bold;
}

/* ===== 分页样式 ===== */
li.float-right { float: right; }
li.float-left { float: left; }

div.paginate-container {
    background: #f9f9f9;
    padding: 1rem;
    margin-top: 3rem;
    border-radius: 0.2rem;
    text-align: center;
    width: calc(100% - 2rem);
}

div.paginate-container ul {
    width: 100%;
    margin: 0px;
    padding-left: 0px;
}

.pagination > ul,
.pagination > ul > li {
    list-style: none;
    display: inline-block;
    padding-left: 0px;
}

.pagination > ul > li:hover a {
    color: #fff;
    background-color: #292929;
    border: solid 1px #292929;
}

.pagination > ul > li.active a {
    color: #fff;
    background-color: #292929;
    border: solid 1px #292929;
}

.pagination > ul > li.deactive a {
    background-color: #e8e8e8;
    border: solid 1px #f2f2f2;
}

.pagination > ul > li a {
    border: solid 1px #e0e0e0;
    border-radius: 0.2rem;
    color: #868686;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
}

.pagination > ul > li em {
    border: solid 1px #e0e0e0;
    border-radius: 0.2rem;
    color: #868686;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
}

/* ===== 项目相关样式 ===== */
.posts {
    max-width: calc(96% - 15px);
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 600px) {
    .posts {
        max-width: calc(100% - 15px);
    }
}

.post-list {
    margin-left: 0;
    list-style: none;
}

.post-list > li {
    margin-bottom: 30px;
}

.post-item {
    border-top: thin solid #c0c0c0;
}

.post-meta {
    font-size: 14px;
    color: #828282;
}

.post-link {
    display: block;
    font-size: 24px;
}

.post-header {
    margin-bottom: 30px;
}

.post-title {
    font-size: 42px;
    letter-spacing: -1px;
    line-height: 1;
}

@media screen and (max-width: 800px) {
    .post-title {
        font-size: 36px;
    }
}

.post-content {
    margin-bottom: 30px;
}

.post-content h2 { font-size: 32px; }
.post-content h3 { font-size: 26px; }
.post-content h4 { font-size: 20px; }

@media screen and (max-width: 800px) {
    .post-content h2 { font-size: 28px; }
    .post-content h3 { font-size: 22px; }
    .post-content h4 { font-size: 18px; }
}

.project-header {
    max-width: calc(96% - 15px);
}

@media screen and (max-width: 600px) {
    .project-header {
        max-width: calc(100% - 15px);
    }
}

.project-header > h1 {
    font-size: 20pt;
    font-weight: 800;
    text-align: center;
}

.project-header > .project-meta {
    font-size: 14px;
    color: #292929;
    float: right;
}

.project-header > .project-contributors {
    margin-left: auto;
    margin-right: auto;
    width: calc(96% - 7.5px);
}

.project-contributor {
    margin-left: 5pt;
    margin-right: 5pt;
    float: left;
    font-weight: 600;
    color: #0077B5;
}

.footnote {
    font-size: 14px;
    color: #828282;
    float: left;
}

.project-thumbnail,
.project-figure {
    margin-top: 10pt;
    margin-bottom: 10pt;
    margin: auto;
    width: 96%;
}

.project-figure > img { align: middle; }
.project-thumbnail > img { align: middle; border: solid; }

.project-desc {
    background-color: #e8e8e8;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 20px;
    border-radius: 4px;
    color: #002336;
}

@media screen and (max-width: 600px) {
    .project-desc {
        padding: 2px;
        margin: 2px;
    }
}

.project-desc > div > strong,
.project-desc > p > strong,
.project-desc > strong { color: #9b3022; }

.project-desc > .tags { font-weight: 600; }

.project-desc > .tag,
.project-desc > .tags > .tag { color: #9b3022; }

.publisher {
    color: #00a200;
    font-size: 14px;
    font-weight: 600;
}

.project-content {
    margin-bottom: 30px;
}

.project-content h2 { font-size: 32px; }
.project-content h3 { font-size: 26px; }
.project-content h4 { font-size: 20px; }

@media screen and (max-width: 800px) {
    .project-content h2 { font-size: 28px; }
    .project-content h3 { font-size: 22px; }
    .project-content h4 { font-size: 18px; }
}

/* ===== 计数器样式 ===== */
.count-down-digit {
    font-size: 28px;
}

@media screen and (max-width: 800px) {
    .count-down-digit { font-size: 20px; }
}

@media screen and (max-width: 600px) {
    .count-down-digit { font-size: 24px; }
}

.count-down-heading {
    font-size: 50px;
}

@media screen and (max-width: 800px) {
    .count-down-heading { font-size: 40px; }
}

@media screen and (max-width: 600px) {
    .count-down-heading { font-size: 30px; }
}

.count-down {
    width: 100%;
    height: 40%;
    text-align: center;
    font-size: 20px;
}

/* ===== 语法高亮样式 ===== */
.highlight { background: #fff; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: teal; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: teal; }
.highlight .ni { color: purple; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: navy; }
.highlight .nv { color: teal; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: teal; }
.highlight .vg { color: teal; }
.highlight .vi { color: teal; }
.highlight .il { color: #099; }