/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #071028;
    --card: #0f1b2b;
    --glass: rgba(255, 255, 255, 0.06);
    --accent1: #7c5cff;
    --accent2: #00d4ff;
    --muted: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-glow: 0 8px 40px rgba(124, 92, 255, 0.08);
    font-family: 'Inter', system-ui, Arial;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    background: linear-gradient(180deg, #041021 0%, #071028 60%);
    color: #eaf1ff
}

/* particle canvas underlay */
#tsparticles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none
}

.wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px
}

.card {
    width: min(1100px, 95%);
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border-radius: 18px;
    padding: 28px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(8px)
}

/* left hero */
.hero {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.overline {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 2px
}

h1 {
    font-size: 42px;
    margin: 8px 0 6px;
    line-height: 1;
}

h1 .accent {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

p.lead {
    color: var(--muted);
    font-size: 16px;
    margin: 12px 0 20px;
    max-width: 70%
}

.cta-row {
    display: flex;
    gap: 12px;
    align-items: center
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-weight: 600
}

.btn .fa {
    font-size: 16px
}

.btn.primary {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    color: #041028;
    border: none;
    box-shadow: 0 8px 30px rgba(124, 92, 255, 0.12)
}

/* GitHub：深蓝紫 × 发光 */
.btn.github {
    background: linear-gradient(90deg, #6a5cff, #8f7bff);
    color: #041028;
    border: none;
    box-shadow: 0 6px 20px rgba(110, 92, 255, 0.35);
    transition: all .25s;
}

.btn.github:hover {
    box-shadow: 0 0 20px rgba(110, 92, 255, 0.55);
    transform: translateY(-2px);
}

/* 邮件：青蓝 → 绿松石 */
.btn.mail {
    background: linear-gradient(90deg, #00d4ff, #1affc9);
    color: #041028;
    border: none;
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.35);
    transition: all .25s;
}

.btn.mail:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.55);
    transform: translateY(-2px);
}

/* QQ：樱桃粉 → 橙金 */
.btn.qq {
    background: linear-gradient(90deg, #ff7bc8, #ff9b5e);
    color: #041028;
    border: none;
    box-shadow: 0 6px 20px rgba(255, 123, 200, 0.35);
    transition: all .25s;
}

.btn.qq:hover {
    box-shadow: 0 0 20px rgba(255, 123, 200, 0.55);
    transform: translateY(-2px);
}

.stats {
    display: flex;
    gap: 16px;
    margin-top: 20px
}

.stat {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 13px
}

.stat strong {
    display: block;
    font-weight: 700;
    font-size: 16px
}

/* right preview card */
.panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.01));
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.03)
}

/* 修改 avatar 容器为正圆 */
.avatar {
    width: 260px;
    /* 宽高相等 */
    height: 260px;
    border-radius: 50%;
    /* 正圆 */
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    /* 阴影 */
    margin: 0 auto;
    /* 居中 */
}

/* 图片填充圆形容器 */
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持比例填充 */
    display: block;
    transform: scale(1.02);
    transition: transform .8s cubic-bezier(.2, .9, .3, 1);
}

/* 鼠标悬浮放大效果 */
.avatar:hover img {
    transform: scale(1.08);
}


.icons {
    display: flex;
    gap: 10px;
    margin-top: 14px
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    text-decoration: none;
    color: inherit;
    background: transparent
}

.icon-btn .fa {
    width: 20px;
    text-align: center
}

/* footer */
.footer {
    margin-top: 18px;
    color: var(--muted);
    font-size: 13px
}

/* subtle floating animation */
.float {
    animation: float 6s ease-in-out infinite
}

@keyframes float {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }

    100% {
        transform: translateY(0)
    }
}

/* responsive */
@media (max-width:980px) {
    .card {
        grid-template-columns: 1fr;
    }

    .avatar {
        height: 200px
    }

    p.lead {
        max-width: 100%
    }
}

/* 按钮悬浮发光动画 */
.btn:hover {
    box-shadow: 0 0 18px rgba(124, 92, 255, 0.25), 0 0 28px rgba(0, 212, 255, 0.22);
    transform: translateY(-2px);
    transition: all .3s
}

/* 项目项悬浮放大 */
.icon-btn {
    transition: all .25s
}

.icon-btn:hover {
    transform: translateX(6px) scale(1.03);
    background: rgba(255, 255, 255, 0.06)
}

/* 卡片淡入动画 */
.card {
    animation: fadeUp .9s ease-out both
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(26px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

/* 头像轻微旋转动画 */
.avatar img {
    animation: slowTilt 6s ease-in-out infinite
}

@keyframes slowTilt {
    0% {
        transform: scale(1.02) rotate(0)
    }

    50% {
        transform: scale(1.05) rotate(1deg)
    }

    100% {
        transform: scale(1.02) rotate(0)
    }
}

/* 页面背景微动 */
body {
    animation: bgMove 20s linear infinite
}

@keyframes bgMove {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 600px
    }
}

/* 手机端 Projects 动画 */
@media (max-width:980px) {
    aside.panel {
        animation: float 8s ease-in-out infinite
    }
}