/* Body typefaces used by kechang.xin: Charter for Latin, Songti/Noto Serif for CJK. */
@font-face {
    font-family: "Home CJK Serif";
    src: local("STZhongsong"), local("华文中宋"), local("Songti SC"), local("SongtiSC-Regular"), local("STSongti-SC-Regular"), local("STSong"), local("Songti TC"), local("SongtiTC-Regular"), local("Source Han Serif SC"), local("SourceHanSerifSC-Regular"), local("Noto Serif CJK SC"), local("NotoSerifCJKsc-Regular"), local("Noto Serif SC"), local("SimSun"), local("NSimSun"), url("/assets/fonts/noto-serif-sc/noto-serif-sc-chinese-simplified-400-normal.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    unicode-range: U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
    font-family: "Home CJK Serif";
    src: local("STZhongsong"), local("华文中宋"), local("Songti SC Bold"), local("SongtiSC-Bold"), local("STSongti-SC-Bold"), local("STSong"), local("Source Han Serif SC Bold"), local("SourceHanSerifSC-Bold"), local("Noto Serif CJK SC Bold"), local("NotoSerifCJKsc-Bold"), local("Noto Serif SC Bold"), local("SimSun"), local("NSimSun"), url("/assets/fonts/noto-serif-sc/noto-serif-sc-chinese-simplified-700-normal.woff2") format("woff2");
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    unicode-range: U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
html { font-size: 15px; }
@font-face {
    font-family: "Mobile Name Serif";
    src: url("/assets/fonts/noto-serif-sc/noto-serif-sc-name-700.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    unicode-range: U+4E00, U+738B;
}
body.homepage {
    background-color: #fff;
    font-size: 15px;
}
body.homepage .page__content {
    color: #20252d;
    font-size: 1.14rem;
    font-weight: 500;
    line-height: 1.65;
}
body.homepage .page__content h2 {
    margin: 1.85rem 0 0.75rem;
    padding: 0;
    border: 0;
    font-size: 1.55rem;
    font-weight: 600;
    color: #4b5563;
}
body.homepage .page__content > p { margin: 0 0 0.5em; }
body.page-not-found .page__title {
    margin: 0 0 0.75rem;
    color: var(--accent-color);
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.3;
}
body.homepage .main-heading {
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    color: var(--accent-color);
}
body.homepage .masthead__inner-wrap { font-size: 15px; line-height: 1.5; }
body.homepage .masthead__menu-item a { font-weight: 500; }
body.homepage .author__avatar img { border: none; }
body.homepage .page__content a { color: var(--link-color); text-decoration: none; }
body.homepage .research-keyword { color: var(--link-color); font-weight: inherit; }
body.homepage .page__content a:hover { color: var(--accent-color-hover); }
body.homepage a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
#news, #education, #experience, #publications, #awards, #services { scroll-margin-top: 80px; }
body.homepage .inline-affiliation { display: inline; vertical-align: baseline; white-space: nowrap; }
body.homepage .inline-affiliation img {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    max-width: none;
    margin: 0 0.25em 0 0;
    vertical-align: -0.2em;
    object-fit: contain;
}

/* Compact, unboxed news with bracketed dates and small list markers. */
.news-box { margin-bottom: 0; }
.news-list { list-style: none; padding: 0; margin: 0; font-size: 1.08rem; font-weight: 500; }
.news-list li { position: relative; padding: 0 0 0.06rem 1rem; margin-bottom: 0.15rem; line-height: 1.65; }
.news-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.62);
}
.news-date { color: #4b5563; font-weight: 600; margin-right: 0.2em; }
.news-box .news-date { margin-right: 0; }
.news-content { color: #20252d; }

/* Awards. */
.award-list .news-date { margin-right: 0.65em; }
.detail-list { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.detail-list li {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 10px 12px 10px 15px;
    background: linear-gradient(to right, rgba(111, 134, 166, 0.075), rgba(111, 134, 166, 0.035) 58%, transparent);
    line-height: 1.3;
}
.detail-list li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #96a8c0; }
.detail-date { color: #6f86a6; font-size: 11.16px; line-height: 1.25; font-weight: 700; }
.detail-content { min-width: 0; color: #292d32; font-size: 14.04px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.detail-list li.detail-list__undated { grid-template-columns: minmax(0, 1fr); }

/* Services: role labels followed by reviewing and contribution details. */
.service-list { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; font-size: 1.08rem; font-weight: 500; }
.service-list .service-row { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); gap: 0.88em; align-items: first baseline; margin: 0; padding: 0; }
.service-label { justify-self: start; color: #4b5563; font-size: inherit; line-height: 1.65; font-weight: 600; white-space: nowrap; }
.service-content { min-width: 0; color: #292d32; font-size: inherit; font-weight: inherit; line-height: 1.65; }
.service-list .service-items { list-style: disc; padding: 0 0 0 1.05em; margin: 0; }
.service-items > li { margin: 0; padding: 0; }
.service-items > li + li { margin-top: 0.2rem; }
.service-ranking { white-space: nowrap; }
.service-model { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.35rem; }
.service-brand { white-space: nowrap; }
.service-brand img { display: inline-block; width: 1.05em; height: 1.05em; margin: 0 0.28rem 0 0; vertical-align: -0.13em; object-fit: contain; }
.service-brand .service-logo--ouro { width: 2.51em; }
.service-model__separator { color: #8a9098; }
.service-note { margin-top: 0.18rem; color: #526071; font-size: inherit; }
@media (max-width: 640px) {
    .service-list .service-row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; align-items: start; }
    .service-content { padding-top: 0; }
}

/* Education and experience: dates, timeline axis, and logo cards. */
.timeline {
    --timeline-gap: 0.72rem;
    --timeline-date-width: 9.4rem;
    --timeline-axis-width: 0.52rem;
    --timeline-dot-size: 0.52rem;
    --timeline-dot-top: 1.02rem;
    --timeline-logo-slot: 6rem;
    --timeline-logo-height: 2.9rem;
    display: grid;
    gap: var(--timeline-gap);
}
.timeline__item {
    display: grid;
    grid-template-columns: var(--timeline-date-width) var(--timeline-axis-width) minmax(0, 1fr);
    column-gap: 0.66rem;
    align-items: stretch;
}
.timeline__date {
    padding-top: 0.56rem;
    color: #4f5a68;
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.34;
    white-space: nowrap;
}
.timeline__axis { position: relative; width: var(--timeline-axis-width); }
.timeline__axis::before {
    content: "";
    position: absolute;
    top: var(--timeline-dot-top);
    left: 50%;
    width: var(--timeline-dot-size);
    height: var(--timeline-dot-size);
    border: 2px solid rgba(var(--accent-rgb), 0.62);
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%);
    z-index: 1;
}
.timeline__axis::after {
    content: "";
    position: absolute;
    top: calc(var(--timeline-dot-top) + var(--timeline-dot-size) / 2);
    left: 50%;
    bottom: calc(0rem - var(--timeline-gap) - var(--timeline-dot-top) - var(--timeline-dot-size) / 2);
    width: 1px;
    transform: translateX(-50%);
    background: rgba(18, 24, 32, 0.14);
}
.timeline__item:last-child .timeline__axis::after { display: none; }
.timeline__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    min-width: 0;
    gap: 1rem;
    padding: 0.52rem 0.82rem;
    min-height: 66px;
    border-radius: 10px;
    border: 1px solid rgba(18, 24, 32, 0.08);
    background: rgba(var(--accent-rgb), 0.038);
}
.timeline__card--experience { background: rgba(var(--accent-rgb), 0.055); }
.timeline__main { min-width: 0; display: grid; row-gap: 0.24rem; }
.timeline__title { color: #20252d; font-weight: 600; font-size: 1.16rem; line-height: 1.28; overflow-wrap: break-word; }
.timeline__meta { color: #526071; font-weight: 500; font-size: 1.08rem; line-height: 1.28; overflow-wrap: break-word; }
.timeline__logo {
    opacity: 0.96;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: var(--timeline-logo-slot);
    max-width: 100%;
}
.timeline__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--timeline-logo-height); margin: 0; object-fit: contain; }
.timeline__logo--wordmark { --timeline-logo-slot: 12.5rem; --timeline-logo-height: 2.9rem; }
.timeline__logo--seal { --timeline-logo-slot: 3.7rem; --timeline-logo-height: 3rem; }
.timeline__logo--msra { --timeline-logo-slot: 11.5rem; --timeline-logo-height: 3rem; gap: 0.55rem; }
.timeline__logo--msra .timeline__microsoft-symbol { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; }
.timeline__logo--msra .timeline__msra-wordmark { min-width: 0; width: auto; height: var(--timeline-logo-height); mix-blend-mode: multiply; }
@media (max-width: 860px), (min-width: 925px) and (max-width: 1100px) {
    .timeline { --timeline-axis-width: 1rem; --timeline-dot-size: 0.38rem; --timeline-dot-top: 0.53rem; }
    .timeline__item {
        grid-template-columns: var(--timeline-axis-width) minmax(0, 1fr);
        grid-template-areas: "axis date" "card card";
        row-gap: 0.35rem;
        column-gap: 0;
    }
    .timeline__date { grid-area: date; padding: 0; }
    .timeline__axis { grid-area: axis; }
    .timeline__axis::before { border-width: 1.5px; }
    .timeline__axis::after { display: none; }
    .timeline__card { grid-area: card; min-height: 0; gap: 0.6rem; padding: 0.56rem 0.7rem; }
    .timeline__title { font-size: 1.12rem; }
    .timeline__meta, .timeline__date { font-size: 1.05rem; }
    .timeline__logo--wordmark { --timeline-logo-slot: 10.5rem; --timeline-logo-height: 2.6rem; }
    .timeline__logo--seal { --timeline-logo-slot: 3.4rem; --timeline-logo-height: 2.75rem; }
}
@media (max-width: 520px) {
    .timeline__logo--msra { --timeline-logo-slot: 8rem; --timeline-logo-height: 2.4rem; gap: 0.4rem; }
    .timeline__logo--msra .timeline__microsoft-symbol { width: 1.6rem; height: 1.6rem; }
    .timeline__logo--wordmark { --timeline-logo-slot: 8.5rem; --timeline-logo-height: 2.35rem; }
    .timeline__logo--seal { --timeline-logo-slot: 2.9rem; --timeline-logo-height: 2.35rem; }
}
@media (max-width: 360px) {
    .timeline__logo--msra { --timeline-logo-slot: 6.5rem; --timeline-logo-height: 2rem; gap: 0.3rem; }
    .timeline__logo--msra .timeline__microsoft-symbol { width: 1.35rem; height: 1.35rem; }
    .timeline__logo--wordmark { --timeline-logo-slot: 6rem; --timeline-logo-height: 2rem; }
    .timeline__logo--seal { --timeline-logo-slot: 2.5rem; --timeline-logo-height: 2rem; }
    .timeline__card { gap: 0.45rem; padding: 0.5rem 0.62rem; }
}

/* Paper typography follows the reference; media remains on the left. */
.publication-list { display: grid; gap: 1.15rem; }
.publication-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 1.2rem;
    align-items: start;
    margin: 0;
    padding: 0.12rem 0 0.35rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.publication-row--text { grid-template-columns: minmax(0, 1fr); }
.publication-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #fafafa;
}
.publication-media > img,
.publication-media > video { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.publication-media--image-bottom > img { object-position: center 65%; }
.publication-venue-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    padding: 0.28rem 0.55rem;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.publication-entry[data-status="preprint"] .publication-venue-badge { background: #777f8b; }
.publication-info { min-width: 0; }
body.homepage .pub-title {
    display: block;
    margin: 0 0 0.12rem;
    color: #1f2937;
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.34;
}
body.homepage .publication-info .pub-authors {
    margin: 0.02rem 0 0;
    color: #5f6977;
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.45;
}
body.homepage .pub-authors a { color: inherit; font-weight: inherit; }
.pub-authors strong { font-weight: 600; }
.pub-authors .pub-author-self { color: #000; }
body.homepage .publication-info .pub-meta {
    margin: 0.06rem 0 0;
    color: #465160;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.45;
}
.pub-venue { color: var(--accent-color); font-weight: 600; }
.publication-entry[data-status="preprint"] .pub-venue { color: #68727f; }
.pub-links { margin-left: 0.82rem; }
.pub-links a { display: inline-block; margin-right: 0.34rem; white-space: nowrap; font-weight: 500; }
.pub-links i { margin-right: 0.08em; font-size: 0.85em; }
body.homepage .pub-links .paper { color: #1565c0; }
body.homepage .pub-links .ieee { color: #00629b; }
body.homepage .pub-links .code { color: var(--accent-color); }
body.homepage .pub-links .models { color: rgba(255, 152, 0, 0.9); }
body.homepage .pub-links .website { color: #8056b3; }
body.homepage .pub-links .rednote { color: #ff2442; }
.publication-info .pub-links--row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.65rem; margin-left: 0; }
.pub-links--row a { margin-right: 0; }
.pub-links--row .pub-resource { display: inline-block; white-space: nowrap; font-weight: 500; }
.pub-coming-soon { color: #68727f; font-size: 0.9em; }
.pub-links .hf-icon { display: inline-block; width: 1em; height: 1em; margin: 0 0.08em 0 0; vertical-align: -0.12em; object-fit: contain; }
.pub-button-container { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; }
.pub-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 3px 10px;
    border: 1px solid #e1d4d4;
    border-radius: 999px;
    background: #fff;
    color: #60656c;
    font-family: inherit;
    font-size: 0.98rem;
    line-height: 1.4;
    cursor: pointer;
}
.pub-button[data-publication-filter="preprint"] { border-color: #dadde1; }
.pub-button.active, .pub-button:hover { background: rgba(var(--accent-rgb), 0.07); }
.pub-button[data-publication-filter="preprint"]:is(.active, :hover) { background: #f3f4f5; }
.pub-button.active::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pub-button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.publication-entry[hidden], .publication-empty[hidden] { display: none !important; }
.publication-empty { padding: 0.5rem 0; margin: 0; color: #68727f; font-size: 0.98rem; }
@media (max-width: 1100px) and (min-width: 925px) {
    .publication-row:not(.publication-row--text) { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 599px) {
    body.homepage .page__content { font-size: 1.1rem; }
    body.homepage .page__content h2 { font-size: 1.42rem; }
    .news-list, .service-list { font-size: 1.05rem; }
    .publication-row:not(.publication-row--text) { grid-template-columns: 120px minmax(0, 1fr); column-gap: 0.7rem; }
    body.homepage .pub-title { font-size: 1.1rem; }
    body.homepage .publication-info :is(.pub-authors, .pub-meta) { font-size: 0.96rem; }
    .publication-venue-badge { padding: 0.22rem 0.35rem; font-size: 0.68rem; }
    .pub-links { display: block; margin-left: 0; margin-top: 0.15rem; }
}
body.homepage .sidebar .author__name { font-size: 1.2em; }
body.homepage .sidebar p,
body.homepage .sidebar li { font-size: 0.875em; }
body.homepage .author__urls li { white-space: normal; }
body.homepage .author__urls a {
    grid-template-columns: 1.85em minmax(0, 1fr);
    overflow-wrap: anywhere;
}
body.homepage .author__urls .author__link-placeholder {
    grid-template-columns: 1.85em minmax(0, 1fr);
    overflow-wrap: anywhere;
}
body.homepage .author-link--googlescholar i { color: #6db6f8; }
body.homepage .author__huggingface-icon { font-style: normal; }
body.homepage .author__wechat i { color: #07c160; }
body.homepage .author__email summary {
    display: grid;
    grid-template-columns: 1.85em minmax(0, 1fr) 0.75em;
    gap: 0.52em;
    align-items: center;
    margin-bottom: 6px;
    padding: 2px 5px 2px 0;
    font-size: 1.1em;
    list-style: none;
    cursor: pointer;
}
body.homepage .author__email summary::-webkit-details-marker { display: none; }
body.homepage .author__email summary i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85em;
    height: 1.85em;
    font-size: 1.22em;
}
body.homepage .author__email summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}
body.homepage .author__email[open] summary::after { transform: rotate(225deg); }
body.homepage .author__email summary:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 4px;
}
body.homepage .author__email-options {
    margin: 0 0 10px 2.6em;
    padding: 4px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #f9f9f9;
}
body.homepage .author__urls .author__email-options a {
    display: block;
    margin: 0;
    padding: 6px 4px;
    font-size: 12px;
    line-height: 1.5;
}
body.homepage .page__content { overflow-wrap: anywhere; }
@media (max-width: 924px) {
    body.homepage .author__name-cjk { font-family: "Mobile Name Serif", serif; }
    body.homepage .sidebar { position: relative; }
    body.homepage .author__urls-wrapper { position: static; }
    body.homepage .author__urls {
        width: min(280px, calc(100vw - 28px));
        left: 0;
        right: auto;
        top: calc(100% + 8px);
        margin-top: 0;
    }
}
@media (min-width: 925px) {
    body.homepage { --homepage-left-bias: clamp(20px, 1.9vw, 34px); }
    body.homepage #main,
    body.homepage .masthead__inner-wrap {
        width: calc(100% - 2 * var(--homepage-left-bias));
        max-width: 1080px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        left: calc(-1 * var(--homepage-left-bias));
    }
    body.homepage #main {
        display: grid;
        grid-template-columns: minmax(175px, 19.5%) minmax(0, 1fr);
        column-gap: clamp(32px, 6.5%, 72px);
        align-items: start;
    }
    body.homepage #main::before,
    body.homepage #main::after { display: none; }
    body.homepage #main > .sidebar {
        position: sticky;
        top: calc(70px + 1em);
        width: auto;
        max-width: none;
        min-width: 0;
        height: auto;
        max-height: none;
        overflow: visible;
        float: none;
        margin: 0;
        padding: 0;
        transform: none;
    }
    body.homepage #main > .page {
        width: auto;
        min-width: 0;
        float: none;
        margin: 0;
        padding: 0;
    }
    body.homepage .masthead__menu-item--lg {
        width: 273px;
        padding-right: 0;
    }
    body.homepage .masthead__menu-item a { margin-left: 0; margin-right: 22px; }
    body.homepage .sidebar .author__desktop { display: block; }
}
@media (min-width: 925px) and (max-height: 600px) {
    body.homepage #main > .sidebar { position: static; }
}
@media (max-width: 767px) {
    body.homepage #main {
        margin-top: 1rem;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }
    body.homepage .page__content h2 { margin-top: 1.85rem; padding-bottom: 0; }
    .main-heading {
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.25;
        margin-bottom: 1.25rem;
    }
    .main-heading img { width: 2rem; height: 2rem; vertical-align: -0.25rem; }
    .detail-list li { grid-template-columns: 86px minmax(0, 1fr); }
}