* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ========================================================
   卡纸/纸雕特种纸纹理叠加层 (Real Paper Texture Overlay)
   思路：双层叠加 = 亮纤维 + 暗纤维，模拟真实纸雕受光
   ======================================================== */

/* 第 1 层：反相后用 screen 提亮"白丝"（卡纸的纤维高光） */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99998;
    pointer-events: none;

    background-image: url('assets/paper_texture/paper_texture.jpg');
    background-repeat: repeat;
    background-size: 350px auto;

    /* 关键滤镜链：反相 + 大幅提亮 + 强化对比，把微弱的灰丝推到接近纯白 */
    filter: invert(1) brightness(2.2) contrast(1.8);

    /* screen 滤色：黑底(深海)不变，白丝(纤维)发光 */
    mix-blend-mode: screen;

    opacity: 0.22;
}

/* 第 2 层：原图用 overlay 加深"暗丝"（卡纸的纤维阴影/纹路） */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;

    background-image: url('assets/paper_texture/paper_texture.jpg');
    background-repeat: repeat;
    background-size: 350px auto;

    /* 原始图，温和提亮以保留黑丝细节 */
    filter: brightness(1.4) contrast(1.2);

    /* overlay 叠加：中间灰让深色更深，浅色更浅，暗丝在深海里若隐若现 */
    mix-blend-mode: overlay;

    opacity: 0.15;
}

body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(180deg, #020b0e, #05141a);
    cursor: none;
}

#seaweedCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

#cinematic-title-container {
    position: fixed;
    top: 20%;
    left: 50%;
    width: 100%;
    max-width: 100vw;
    padding: 0 4vw;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    /* Tunnel book layer 3: content paper floats in front of seaweed (1), behind diver (10) */
    z-index: 5;
    animation: fadeBlurReveal 4.5s cubic-bezier(0.25, 1, 0.5, 1) forwards, liquidBreath 4s ease-in-out 4.5s infinite;
}

.main-title {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: center;
    width: 100%;
    display: block;
    white-space: pre-wrap !important; /* 强制浏览器精准保留 HTML 代码中的每一个空格，绝不合并 */
    color: rgba(245, 247, 250, 0.95);
    margin-bottom: 0.8rem;
    font-weight: 300;
    /* Sticker-style hard paper shadow (no glow) */
    text-shadow: 4px 4px 0px rgba(0, 3, 10, 0.8) !important;
    animation: letterSpacingReveal 4.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.seaweed-label-layer {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
}

.seaweed-label {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    padding: 0.35rem 0.6rem;
    pointer-events: auto;
    appearance: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.seaweed-label-text {
    display: block;
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: rgba(245, 247, 250, 0.76);
    text-transform: uppercase;
    transform: scale(1) translateY(0);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, text-shadow, color;
}

.seaweed-label:hover .seaweed-label-text {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.seaweed-label.is-focused .seaweed-label-text {
    transform: scale(1.4) translateY(-30px);
    color: rgba(255, 255, 255, 1);
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 3, 5, 0.85);
}

.title-divider {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 247, 250, 0.5), transparent);
    margin: 0 auto 1.25rem;
}

.subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.28em;
    color: rgba(245, 247, 250, 0.62);
    font-weight: 300;
    line-height: 1.7;
    width: 100%;
    text-align: center;
}

.branding-name {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.45em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    font-weight: 300;
    width: 100%;
    text-align: center;
}

@keyframes fadeBlurReveal {
    0% {
        opacity: 0;
        filter: blur(30px);
    }
    40% {
        opacity: 0.4;
        filter: blur(12px);
    }
    100% {
        opacity: 0.85;
        filter: blur(0px);
    }
}

@keyframes letterSpacingReveal {
    0% {
        letter-spacing: 1em;
    }
    100% {
        letter-spacing: 0.18em;
    }
}

@keyframes liquidBreath {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0px);
        opacity: 0.75;
    }
    50% {
        transform: translate(-50%, -50%) translateY(-6px);
        opacity: 0.88;
    }
}

#content-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    padding-top: 80vh;
}

.content-section {
    width: 100%;
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    /* Tunnel book layer 3: content paper floats in front of seaweed (1), behind diver (10) */
    position: relative;
    z-index: 5;
}

#section-resume {
    min-height: auto;
    padding-top: 20vh;
    padding-bottom: 20vh;
}

.section-left {
    justify-content: center;
    padding-left: 0;
    text-align: inherit;
}

.section-right {
    justify-content: center;
    padding-right: 0;
    text-align: inherit;
}

.content-section .container {
    width: 86% !important;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease;
}

.section-content {
    width: 100%;
    max-width: 700px;
    pointer-events: auto;
}

.content-section:nth-of-type(odd) .container {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
    padding-right: 20px;
}

.content-section:nth-of-type(even) .container {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    padding-left: 20px;
}

#section-portfolio .container,
#section-contact .container {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

#section-portfolio {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
    z-index: 5;
}

#section-portfolio .section-title {
    position: relative;
    z-index: 20;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

#section-portfolio .portfolio-grid {
    width: 100% !important;
    position: relative;
    z-index: 6;
}

.section-content.is-staged,
.resume-section.is-staged {
    opacity: 0;
    transform: translate3d(0, 80px, 0) scale(0.96);
    filter: blur(18px) brightness(0.25);
    transition: transform 1.2s cubic-bezier(0.18, 1, 0.22, 1), opacity 1s cubic-bezier(0.18, 1, 0.22, 1), filter 1.1s cubic-bezier(0.18, 1, 0.22, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity, filter;
}

.section-content.is-staged.is-revealed,
.resume-section.is-staged.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) brightness(1);
}

.resume-container {
    max-width: 1200px;
    padding: 3rem 0;
}

.resume-layout {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.profile-portrait-container {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0.1rem;
}

.profile-image {
    width: 150px;
    height: 225px;
    object-fit: cover;
    border-radius: 8px !important;
    filter: contrast(110%) brightness(95%);
    mix-blend-mode: luminosity;
    opacity: 0.8;
    user-select: none !important;
    -webkit-user-drag: none !important;
    pointer-events: auto;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.profile-portrait-container:hover .profile-image {
    opacity: 0.95;
    filter: contrast(120%) brightness(105%);
}

.portrait-light-leak {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    pointer-events: none;
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0) 0%, 
        rgba(0, 255, 255, 0.08) 50%, 
        rgba(0, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.profile-portrait-container:hover .portrait-light-leak {
    opacity: 1;
}

.resume-content {
    flex: 1;
    min-width: 0;
    max-width: 1100px;
}

.section-title {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(245, 247, 250, 0.95);
    margin-bottom: 1rem;
    font-weight: 300;
}

.subtitle-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 1rem;
    color: rgba(245, 247, 250, 0.7);
    letter-spacing: 0.3em;
    text-align: inherit;
    margin-bottom: 3.5rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}

.column {
    text-align: inherit;
}

.column-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(245, 247, 250, 0.5);
    margin-bottom: 2rem;
}

.skill-item {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.95rem;
    color: rgba(245, 247, 250, 0.9);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    width: 100%;
    margin-top: 40px;
}

.project-card {
    display: flex;
    flex-direction: column;
    /* Stacked paper card: solid, opaque, no glass */
    background: #04161d !important;
    /* 取消数码圆角，改用刻刀切斜角 */
    border: none !important;
    border-radius: 0 !important;
    padding: 22px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 5;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
    /* Multi-layered physical paper drop shadow: tight inner edge + deep cast */
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 20px 40px rgba(0, 3, 5, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    /* 八边形刻刀切角：12px 斜切 (可微调到 8/16) */
    clip-path: polygon(
        12px 0%,
        calc(100% - 12px) 0%,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0% calc(100% - 12px),
        0% 12px
    );
    /* 抗锯齿：clip-path 在高分屏可能有微小锯齿 */
    transform: translateZ(0);
    will-change: transform;

    /* 顶部描边主色（CSS 变量，可被 :hover 覆盖）— 模拟卡纸顶面"受光高光" */
    --card-accent: rgba(255, 255, 255, 0.22);
}

/* 顶部描边高亮：覆盖顶边 + 顶部两个斜角，模拟卡纸斜面受光
   关键修复：4 顶点梯形 polygon，左右斜边斜率 ±1 完全对齐卡片真实斜角
   (从 (0,12)→(12,0) 是 y=-x+12, 斜率 -1)。
   渐变 0~2px 染色 → 可见彩色区是一条贴着卡纸上轮廓的 2px 厚 "屋檐带"：
   - 顶横线部分：2px 高的水平彩色条
   - 左/右上斜角部分：沿 45° 斜面约 2.83px 长的彩色条
   注：之前 6 顶点版本的 (0,2)→(12,0) 斜率是 -1/6（跨度 12 高度差 2），
   远缓于真实斜角的 -1，导致彩色区完全落在卡片内部、远离斜角。 */
.project-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--card-accent) 0px,
        var(--card-accent) 3.5px,
        transparent 3.5px,
        transparent 100%
    );
    /* 4 顶点梯形：左右斜边斜率 ±1，与卡片 clip-path 完全重合 */
    clip-path: polygon(
        0 12px,                    /* 左下 12px（卡片左斜角起点） */
        12px 0,                    /* 顶左斜角顶点 */
        calc(100% - 12px) 0,       /* 顶右斜角顶点 */
        100% 12px                  /* 右下 12px（卡片右斜角起点） */
    );
    z-index: 3;
}

/* 因 clip-path 会裁切 border，用 ::after + clip-path: inherit 重绘带斜角的纸张切面细线 */
.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    clip-path: inherit;
    z-index: 2;
}

.project-card:hover {
    transform: translateY(-5px);
    background: #062536 !important;
    /* Hover: paper lifts off — stronger two-layer drop shadow */
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    /* Hover: 顶部高光加亮（与常规描边一起"浮起"） */
    --card-accent: rgba(255, 255, 255, 0.42);
}

/* Hover 时让 ::after 切面反光亮起（替代原 border-top-color） */
.project-card:hover::after {
    border-color: rgba(255, 255, 255, 0.26);
}

/* Diver paper-cut foreground — swims in front of cards, behind modals */
#diverOverlayCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10 !important;
    pointer-events: none !important;
}

.diver, [class*="diver"], .swim-diver {
    position: relative;
    z-index: 100 !important;
}

.project-card:has(.tag-monument):hover {
    --card-accent: rgba(179, 21, 21, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card:has(.tag-perception):hover {
    --card-accent: rgba(255, 159, 67, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card:has(.tag-sustainability):hover {
    --card-accent: rgba(16, 172, 132, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card:has(.tag-community):hover {
    --card-accent: rgba(131, 149, 36, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.project-card.ai-exploration-card:hover {
    --card-accent: rgba(187, 128, 255, 0.7) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 彻底根除文本选择对点击事件的吞噬与干扰 */
.project-card {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* 确保背景画布和粒子层允许鼠标事件穿透 */
canvas,
#canvas,
.background-container,
.particles-wrapper,
.diver-container {
    pointer-events: none !important;
}

.project-logo-wrapper {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 15px;
}

.project-logo {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.project-card:hover .project-logo {
    transform: scale(1.05);
}

.project-meta {
    text-align: left;
}

.project-date {
    display: block;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.5px;
    margin-top: 4px;
    font-family: 'Cinzel', serif;
}

.project-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.tag-monument { color: #b31515 !important; }
.tag-perception { color: #ff9f43 !important; }
.tag-sustainability { color: #10ac84 !important; }
.tag-community { color: #839524 !important; }
.tag-other { color: #c8c8c8 !important; }

.project-title {
    font-size: 16px;
    color: #ffffff;
    margin: 5px 0 0 0;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
}

.interests-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.interests-main-title {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(245, 247, 250, 0.95);
    margin-bottom: 0.5rem;
    font-weight: 300;
}

.interests-subtitle {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(245, 247, 250, 0.8);
    margin-bottom: 1.5rem;
}

.interests-tags {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.interest-tag {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(245, 247, 250, 0.9);
}

.interests-desc-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    color: rgba(245, 247, 250, 0.6);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
    margin: 0;
}

.contact-input, .contact-textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(245, 247, 250, 0.2);
    color: rgba(245, 247, 250, 0.95);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 14px;
    padding: 12px 4px;
    width: 100%;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}

.contact-input::placeholder, .contact-textarea::placeholder {
    color: rgba(245, 247, 250, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.contact-input:focus, .contact-textarea:focus {
    border-bottom: 1px solid rgba(245, 247, 250, 0.8);
    outline: none;
}

.contact-textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-button {
    background: transparent;
    border: 1px solid rgba(245, 247, 250, 0.4);
    color: rgba(245, 247, 250, 0.95);
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 12px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    width: fit-content;
}

.contact-button:hover {
    background: rgba(245, 247, 250, 0.95);
    color: #071a1f;
    border-color: rgba(245, 247, 250, 0.95);
}

/* ================================================
   Contact Section - Social Links Matrix
   ================================================ */

.contact-social-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.contact-lead {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: rgba(245, 247, 250, 0.85);
    margin: 0;
}

.social-links-matrix {
    display: flex;
    gap: 20px;
}

.social-link-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(35, 43, 54, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.social-link-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-icon {
    width: 28px;
    height: 28px;
    color: rgba(245, 247, 250, 0.8);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.social-link-item:hover {
    border-color: rgba(0, 242, 254, 0.4);
    transform: translateY(-4px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.7),
        0 16px 32px rgba(0, 3, 5, 0.85);
}

.social-link-item:hover::before {
    opacity: 1;
}

.social-link-item:hover .social-icon {
    color: #00f2fe;
    transform: scale(1.1);
}

/* Platform-specific hover accents */
.social-link-item:nth-child(1):hover {
    border-color: rgba(0, 119, 181, 0.7);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.7),
        0 16px 32px rgba(0, 3, 5, 0.85);
}

.social-link-item:nth-child(1):hover .social-icon {
    color: #0077b5;
}

.social-link-item:nth-child(2):hover {
    border-color: rgba(234, 70, 147, 0.7);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.7),
        0 16px 32px rgba(0, 3, 5, 0.85);
}

.social-link-item:nth-child(2):hover .social-icon {
    color: #e44693;
}

.social-link-item:nth-child(3):hover {
    border-color: rgba(255, 136, 0, 0.7);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.7),
        0 16px 32px rgba(0, 3, 5, 0.85);
}

.social-link-item:nth-child(3):hover .social-icon {
    color: #ff8800;
}

.resume-section {
    margin-bottom: 4rem;
    position: relative;
    padding-top: 1.5rem;
}

.section-tag {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(245, 247, 250, 0.4);
    margin-bottom: 1.5rem;
    font-weight: 300;
}

/* === UNIFIED TWO-COLUMN RESUME GRID === */

.resume-item {
    margin-bottom: 2.5rem;
}

.resume-trigger {
    position: relative;
    cursor: pointer;
    padding: 16px 30px 16px 0;
    pointer-events: auto;
}

.item-meta {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 0;
    white-space: nowrap;
}

.item-meta-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    justify-content: flex-end;
    min-width: 0;
    white-space: nowrap;
    order: 1;
}

.experience-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 12px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
    white-space: nowrap;
}

.tag-parttime {
    background: #0a2238;
    color: #58a6ff;
    border: 1px solid rgba(56, 139, 253, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.tag-school {
    background: #0a2614;
    color: #57ab5a;
    border: 1px solid rgba(46, 160, 67, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.tag-intern {
    background: #1f1233;
    color: #d3b6ff;
    border: 1px solid rgba(187, 128, 255, 0.6);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.tag-award {
    background: #2a1f0a;
    color: #ffc154;
    border: 1px solid rgba(255, 193, 84, 0.5);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.item-title {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 1.15rem;
    color: rgba(245, 247, 250, 0.95);
    letter-spacing: 0.05em;
    font-weight: 300;
    min-width: 0;
    flex: 1;
    text-align: right;
}

.item-date {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.95rem;
    color: rgba(245, 247, 250, 0.95);
    letter-spacing: 0.1em;
    font-weight: 400;
    flex-shrink: 0;
    white-space: nowrap;
    order: -1;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    text-align: left;
    margin-right: 20px;
}

.item-sub {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.95rem;
    color: rgba(245, 247, 250, 0.7);
    letter-spacing: 0.05em;
    margin: 4px 0 0 0;
    padding-left: 200px;
    text-align: right;
    white-space: nowrap;
}



.fold-arrow {
    position: absolute;
    right: 0;
    top: 22px;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transform: rotate(45deg);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.resume-trigger:hover .fold-arrow {
    border-color: rgba(255, 255, 255, 0.8);
}

/* Awards 和 Toolkit 区域隐藏折叠箭头 */
.resume-section:nth-of-type(n+3) .fold-arrow {
    display: none;
}

.resume-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    padding-left: 200px;
    box-sizing: border-box;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, padding-top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: auto;
}

.resume-item.is-active .resume-details {
    max-height: 600px;
    opacity: 1;
    padding-top: 15px;
}

.resume-item.is-active .fold-arrow {
    transform: rotate(225deg);
    border-color: #fff;
}

.item-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-bullet-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
    text-align: justify;
    white-space: normal;
}

.item-bullet-list li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.35);
}

.item-bullet-list strong {
    color: rgba(245, 247, 250, 0.95);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* === SKILLS & TOOLKIT SECTION === */

.skills-grid {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.skill-group {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
    line-height: 2;
    margin: 8px 0;
    white-space: normal;
}

.skill-group strong,
.skill-group b {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.award-media-box {
    margin-top: 15px;
    width: 100%;
    max-width: 600px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.award-preview-img {
    width: 100%;
    max-height: 420px;
    display: block;
    object-fit: contain;
    object-position: center top;
    filter: brightness(0.9) contrast(1.1);
    background: rgba(0, 0, 0, 0.15);
}

.image-placeholder-tip {
    padding: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.content-section:nth-of-type(odd) .resume-layout {
    justify-content: flex-end;
}

.content-section:nth-of-type(odd) .resume-content,
.content-section:nth-of-type(odd) .resume-section,
.content-section:nth-of-type(odd) .skill-group,
.content-section:nth-of-type(odd) .interest-item {
    text-align: right;
}

.content-section:nth-of-type(odd) .award-media-box {
    margin-left: auto;
    margin-right: 0;
}

.content-section:nth-of-type(odd) .experience-tag {
    margin-right: 0;
    margin-left: 0;
}

.ai-exploration-card {
    background: linear-gradient(
        180deg,
        rgba(40, 35, 54, 0.55) 0%,
        rgba(25, 22, 36, 0.5) 100%
    ) !important;
    border: 1px solid rgba(187, 128, 255, 0.15) !important;
    border-top-color: rgba(187, 128, 255, 0.3) !important;
}

.tag-ai {
    color: #bb80ff !important;
    font-weight: 700;
}

.ai-status-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 9px;
    color: rgba(187, 128, 255, 0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(187, 128, 255, 0.3);
    padding: 2px 8px;
    border-radius: 10px;
}

/* PDF Loading Bar */
.pdf-loading-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0%;
    height: 3px !important;
    background: linear-gradient(90deg, #00f2fe, #4facfe) !important;
    z-index: 1000001 !important;
    transition: width 0.4s ease !important;
    box-shadow: 0 0 8px #00f2fe !important;
}

/* PDF Click Feedback */
.project-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease !important;
}
.project-card:active {
    transform: scale(0.96) translateY(2px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    filter: brightness(0.8);
}

/* Global PDF Preview Modal (iframe) — solid dark paper overlay, no glass blur */
.pdf-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(2, 8, 12, 0.96) !important;
    z-index: 9999999 !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.pdf-modal-overlay.active {
    opacity: 1 !important;
    display: flex !important;
    cursor: auto !important;
}
.pdf-modal-overlay.active * {
    cursor: auto !important;
}
.pdf-modal-overlay.active .pdf-modal-header button,
.pdf-modal-overlay.active .pdf-gallery-nav {
    cursor: pointer !important;
}
.pdf-modal-container {
    width: 85vw !important;
    height: 85vh !important;
    background: #04161d !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    position: relative !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.85),
        0 40px 80px rgba(0, 3, 5, 0.95) !important;
    transform: translateY(30px) scale(0.95) !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    /* 八角形刻刀切角：16px 斜切（与卡片 12px 区分，模态框更大需更宽的斜角） */
    clip-path: polygon(
        16px 0%,
        calc(100% - 16px) 0%,
        100% 16px,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        16px 100%,
        0% calc(100% - 16px),
        0% 16px
    ) !important;
    /* 顶部描边主色（青色高光）— 模拟卡纸顶面"受光" */
    --card-accent: rgba(0, 242, 254, 0.28);
    transform: translateZ(0);
    will-change: transform;
}
.pdf-modal-overlay.active .pdf-modal-container {
    transform: translateY(0) scale(1) !important;
}

/* 顶部描边高亮：覆盖顶边 + 顶部两个斜角
   4 顶点梯形 polygon，左右斜边斜率 ±1 与容器 clip-path 完全重合 */
.pdf-modal-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--card-accent) 0px,
        var(--card-accent) 4.5px,
        transparent 4.5px,
        transparent 100%
    );
    clip-path: polygon(
        0 16px,
        16px 0,
        calc(100% - 16px) 0,
        100% 16px
    );
    z-index: 3;
}

/* 因 clip-path 会裁切 border，用 ::after + clip-path: inherit 重绘带斜角的纸张切面细线 */
.pdf-modal-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    clip-path: inherit;
    z-index: 2;
}
.pdf-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 24px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    flex-shrink: 0;
}
#pdf-modal-title {
    margin: 0 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}
.pdf-close-button {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 24px !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    padding: 0 4px !important;
    line-height: 1 !important;
}
.pdf-close-button:hover {
    color: #ffffff !important;
}
.pdf-modal-body {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    background: #0d0f13 !important;
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    padding: 20px 0 !important;
}

#pdf-canvas-container {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: auto;
}
#pdf-canvas-container.zoomed-in {
    cursor: grab;
}
#pdf-canvas-container.dragging {
    cursor: grabbing !important;
}

#pdf-canvas-container canvas,
#pdf-canvas-container img,
#pdf-canvas-container div {
    display: block;
    margin: auto;
}

/* PDF Gallery (page images) */
.pdf-gallery-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pdf-gallery-image {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    background: #ffffff;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.pdf-gallery-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}
.pdf-gallery-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    padding: 30px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 6px;
    line-height: 1;
    pointer-events: auto;
}
.pdf-gallery-nav button:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: rgba(0, 242, 254, 0.4);
    color: #00f2fe;
}

.pdf-gallery-prev {
    left: 30px;
}
.pdf-gallery-next {
    right: 30px;
}

@media (min-width: 1400px) {
    .pdf-gallery-prev { left: 5%; }
    .pdf-gallery-next { right: 5%; }
}

.pdf-gallery-info {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
    font-family: monospace;
    pointer-events: none;
}

.zoom-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    font-size: 12px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(20, 30, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0 8px;
}

@media (max-width: 768px) {
    body { cursor: auto; }
    #seaweedCanvas, #diverOverlayCanvas { cursor: auto; }

    /* ---- 标题区域 ---- */
    #cinematic-title-container {
        top: 15%;
        padding: 0 6vw;
    }
    .main-title {
        font-size: clamp(1rem, 3.8vw, 1.5rem) !important;
        letter-spacing: 0.2em;
    }
    .branding-name {
        font-size: 0.7rem;
        letter-spacing: 0.3em;
    }
    .subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.15em;
    }
    .title-divider { width: 80px; }

    /* ---- 内容区域 ---- */
    .content-section {
        padding: 30px 0;
    }
    .content-section .container {
        width: 94% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .content-section:nth-of-type(odd) .container,
    .content-section:nth-of-type(even) .container {
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #section-resume { padding-top: 12vh; padding-bottom: 10vh; }

    .section-title {
        font-size: 1.8rem;
        letter-spacing: 0.15em;
    }
    #section-portfolio .section-title { font-size: 1.8rem; }

    /* ---- 简历布局：纵向堆叠 ---- */
    .resume-layout {
        flex-direction: column;
        gap: 1.5rem;
    }
    .profile-portrait-container {
        align-self: center;
    }
    .profile-image {
        width: 100px;
        height: 150px;
    }

    /* 日期列占位归零 */
    .item-date {
        width: auto;
        min-width: 0;
        max-width: none;
        margin-right: 0;
        font-size: 0.75rem;
        white-space: nowrap;
        order: 0;
    }
    .item-meta-main {
        justify-content: flex-start;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .item-sub, .resume-details {
        padding-left: 0 !important;
    }
    .item-sub {
        white-space: normal;
        font-size: 0.75rem;
        margin-top: 2px;
    }
    .item-title {
        font-size: 0.9rem;
        white-space: normal;
        text-align: left;
        flex: initial;
    }
    .resume-trigger {
        padding: 10px 20px 10px 0;
    }
    .fold-arrow { top: 16px; }
    .experience-tag {
        font-size: 9px;
        padding: 2px 8px;
    }
    .resume-details {
        padding-left: 0;
    }

    /* ---- Portfolio 网格 ---- */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
        margin-top: 20px;
    }
    .project-card {
        padding: 16px;
    }
    .project-logo-wrapper {
        height: 90px;
        margin-bottom: 10px;
    }
    .project-title { font-size: 14px; }
    .project-tag { font-size: 9px; }

    /* ---- Interests ---- */
    .interests-main-title { font-size: 1.8rem; }
    .interests-subtitle { font-size: 0.85rem; }
    .interest-tag { font-size: 0.8rem; }
    .interests-desc-text { font-size: 0.75rem; }
    
    /* Interest Cards Mobile */
    .interests-card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .interest-card--large,
    #marathon-card,
    #travel-card,
    #photography-card,
    #finance-card {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 160px;
    }
    
    /* Interest Modal Mobile */
    .interest-modal-container {
        width: 94vw !important;
        height: 80vh !important;
    }
    .interest-modal-title { font-size: 1.2rem; }
    .interest-modal-icon { font-size: 28px; }

    /* ---- Contact ---- */
    .contact-input, .contact-textarea { font-size: 13px; padding: 10px 4px; }

    /* ---- X1 侧边栏 ---- */
    .x1-elegant-text {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 60px 24px 40px !important;
        border-right: none !important;
    }
    .x1-elegant-text h2 { font-size: 17px !important; }
    .x1-elegant-text p { font-size: 11px !important; }
    .x1-elegant-text p.en-para { font-size: 9.5px !important; }

    /* ---- PDF 模态框 ---- */
    .pdf-modal-container {
        width: 96vw !important;
        height: 90vh !important;
    }
    .pdf-gallery-nav {
        padding: 20px 10px;
        font-size: 16px;
    }
    .pdf-gallery-prev { left: 8px !important; }
    .pdf-gallery-next { right: 8px !important; }
    .zoom-controls { bottom: 15px; right: 15px; }
    .zoom-controls button { width: 34px; height: 34px; font-size: 14px; }

    /* ---- Canvas 适配 ---- */
    #seaweedCanvas, #diverOverlayCanvas {
        width: 100vw;
        height: 100vh;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: clamp(0.85rem, 4.5vw, 1rem) !important;
        letter-spacing: 0.15em;
    }
    .branding-name { font-size: 0.6rem; letter-spacing: 0.25em; }
    .subtitle { font-size: 0.65rem; }

    .section-title {
        font-size: 1.4rem;
    }

    .resume-layout { gap: 1rem; }
    .item-meta-main { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
    .item-date { font-size: 0.65rem; }
    .item-title { font-size: 0.8rem; }
    .experience-tag { font-size: 8px; }

    .project-logo-wrapper { height: 70px; }
    .project-title { font-size: 12px; }

    .x1-elegant-text {
        padding: 50px 16px 30px !important;
    }
    .x1-elegant-text h2 { font-size: 15px !important; }
    .x1-elegant-text p { font-size: 10px !important; }

    .pdf-modal-container {
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    .pdf-gallery-nav {
        padding: 14px 8px;
        font-size: 14px;
    }
    .pdf-gallery-prev { left: 4px !important; }
    .pdf-gallery-next { right: 4px !important; }
}

@media (max-width: 600px) {
    .mechanics-grid {
        grid-template-columns: 1fr;
    }
    .project-detail-exhibit {
        padding: 20px 15px;
    }
}

/* ================================================
   水印直属容器：确保具备层级上下文
   ================================================ */
.pdf-gallery-wrapper,
.pdf-modal-body {
    position: relative !important;
    overflow: auto !important;
}

/* ================================================
   Zoom Controls Widget 样式
   ================================================ */
.zoom-controls {
    position: absolute;
    bottom: 30px;
    right: 40px;
    display: flex;
    gap: 8px;
    z-index: 100000;
}
.zoom-controls button {
    background: #04161d;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
    transition: all 0.2s;
}
.zoom-controls button:hover {
    background: #00f2fe;
    color: #000;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
}

/* ================================================
   方案二：潜水员探照灯光束
   ================================================ */
.diver-spotlight {
    position: fixed !important;
    pointer-events: none !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, rgba(0, 242, 254, 0.05) 40%, transparent 70%) !important;
    transform: translate(-50%, -50%) !important;
    mix-blend-mode: screen !important;
    z-index: 5 !important;
    opacity: 0;
    transition: opacity 0.3s;
}

/* ================================================
   方案四：卡片水流涟漪扭曲
   ================================================ */
.project-card {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s, filter 0.3s !important;
}
.project-card.fluid-wake {
    animation: fluidRipple 0.8s ease-in-out !important;
    filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.3)) !important;
}
@keyframes fluidRipple {
    0%   { transform: scale(1) skewX(0deg); filter: blur(0px); }
    30%  { transform: scale(1.02) skewX(1deg); filter: blur(0.5px); }
    60%  { transform: scale(0.99) skewX(-0.5deg); filter: blur(0px); }
    100% { transform: scale(1) skewX(0deg); }
}

/* ================================================
   方案三：流体粒子 Canvas
   ================================================ */
#fluid-particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
}

/* ================================================
   SVG 物理水波置换 + 多维视差环境
   ================================================ */
.project-card {
    position: relative !important;
    overflow: hidden !important;
    will-change: filter, transform;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s !important;
    z-index: 5 !important;
}

/* 核心波纹母体 — 三层互有物理延迟的同心圆偏置波纹 */
.card-sonar-ripple {
    position: absolute !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0, 242, 254, 0.7) !important;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, transparent 70%) !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.3), inset 0 0 10px rgba(0, 242, 254, 0.2) !important;
    pointer-events: none !important;
    mix-blend-mode: screen !important;
    transform: translate(-50%, -50%) scale(0) !important;
    animation: sonarWaveExpand 1.2s cubic-bezier(0.1, 0.8, 0.25, 1) forwards !important;
    z-index: 10 !important;
}

/* 三层波纹的动态 offset 偏置延迟 */
.card-sonar-ripple.layer-1 {
    animation-delay: 0s !important;
}
.card-sonar-ripple.layer-2 {
    animation-delay: 0.2s !important;
    border-color: rgba(0, 242, 254, 0.4) !important;
    opacity: 0.8;
}
.card-sonar-ripple.layer-3 {
    animation-delay: 0.4s !important;
    border-color: rgba(0, 242, 254, 0.2) !important;
    opacity: 0.6;
}

@keyframes sonarWaveExpand {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    80%  { opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

/* 卡片点击物理水波置换扭曲 */
.project-card.physical-water-ripple {
    animation: realWaterDisplace 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important;
}

@keyframes realWaterDisplace {
    0% {
        filter: url(#water-displacement-filter) drop-shadow(0 0 0px rgba(0,242,254,0));
        transform: scale(1);
    }
    15% {
        filter: url(#water-displacement-filter) drop-shadow(0 0 20px rgba(0,242,254,0.5));
        transform: scale(0.98);
    }
    100% {
        filter: url(#water-displacement-filter) drop-shadow(0 0 0px rgba(0,242,254,0));
        transform: scale(1);
    }
}

/* 海面光束叠加层 */
.deep-sea-godrays {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 50% -20%, rgba(0, 242, 254, 0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 8;
}

/* ================================================
   Interests Section - Asymmetric Card Grid
   ================================================ */

.interests-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    margin-top: 30px;
}

.interest-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    min-height: 180px;
    display: flex;
    align-items: flex-end;
}

.interest-card--large {
    grid-column: span 2;
    min-height: 240px;
}

/* Marathon: First row, spans 2 columns */
#marathon-card {
    grid-column: 1 / 3;
    grid-row: 1;
}

/* Travel: First row, right side */
#travel-card {
    grid-column: 3;
    grid-row: 1;
}

/* Photography: Second row, spans 2 columns */
#photography-card {
    grid-column: 1 / 3;
    grid-row: 2;
}

/* Finance: Second row, right side */
#finance-card {
    grid-column: 3;
    grid-row: 2;
}

.interest-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.interest-card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(2, 10, 14, 0.7) 100%);
}

.interest-card:hover .interest-card-bg {
    transform: scale(1.05);
}

.interest-card-content {
    position: relative;
    z-index: 2;
    padding: 24px;
    width: 100%;
}

.interest-card-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

.interest-card-title {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(245, 247, 250, 0.95);
    margin-bottom: 8px;
    font-weight: 400;
}

.interest-card-philosophy {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.85rem;
    color: rgba(245, 247, 250, 0.7);
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.interest-card--static {
    background: #04161d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 20px 40px rgba(0, 3, 5, 0.85);
}

.interest-card--interactive {
    /* Stacked paper card: solid, opaque, no glass — mirrors .project-card */
    background: #04161d !important;
    /* 取消数码圆角，改用刻刀切斜角（与 .project-card 同步） */
    border: none !important;
    border-radius: 0 !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 20px 40px rgba(0, 3, 5, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    /* 八边形刻刀切角：12px 斜切 (可微调到 8/16) */
    clip-path: polygon(
        12px 0%,
        calc(100% - 12px) 0%,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0% calc(100% - 12px),
        0% 12px
    );
    /* 抗锯齿：clip-path 在高分屏可能有微小锯齿 */
    transform: translateZ(0);
    will-change: transform;

    /* 顶部描边主色（CSS 变量，可被 :hover 覆盖）— 模拟卡纸顶面"受光高光" */
    --card-accent: rgba(255, 255, 255, 0.22);
}

/* 顶部描边高亮：覆盖顶边 + 顶部两个斜角（与 .project-card 同步）
   4 顶点梯形 polygon，左右斜边斜率 ±1 与卡片 clip-path 完全重合 */
.interest-card--interactive::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--card-accent) 0px,
        var(--card-accent) 3.5px,
        transparent 3.5px,
        transparent 100%
    );
    clip-path: polygon(
        0 12px,
        12px 0,
        calc(100% - 12px) 0,
        100% 12px
    );
    z-index: 3;
}

/* 因 clip-path 会裁切 border，用 ::after + clip-path: inherit 重绘带斜角的纸张切面细线 */
.interest-card--interactive::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    clip-path: inherit;
    z-index: 2;
}

.interest-card--interactive:hover {
    transform: translateY(-5px);
    background: #062536 !important;
    /* Hover: paper lifts off — stronger two-layer drop shadow */
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    /* Hover: 顶部高光加亮 */
    --card-accent: rgba(255, 255, 255, 0.42);
}

.interest-card--interactive:hover::after {
    border-color: rgba(255, 255, 255, 0.26);
}

/* 彻底根除文本选择对点击事件的吞噬与干扰（与 .project-card 一致） */
.interest-card--interactive {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* Active / click 反馈：轻微下压 + 变暗 + 阴影收缩（与 .project-card:active 一致） */
.interest-card--interactive {
    transition:
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s ease,
        filter 0.3s !important;
}
.interest-card--interactive:active {
    transform: scale(0.96) translateY(2px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    filter: brightness(0.8);
}

/* Icon 悬浮缩放（对应 .project-logo 的 scale(1.05) 效果） */
.interest-card--interactive .interest-card-icon {
    transition: transform 0.4s ease;
}
.interest-card--interactive:hover .interest-card-icon {
    transform: scale(1.05);
}

/* ================================================
   Interest card theme accents — hover 时顶部高光染色
   对应 .project-card 的 tag 配色（红/橙/绿/橄榄/紫）
   ================================================ */

/* Marathon: 暗红（对应 tag-monument） */
#marathon-card.interest-card--interactive:hover {
    --card-accent: rgba(179, 21, 21, 0.7) !important;
}

/* Travel: 橙（对应 tag-perception） */
#travel-card.interest-card--interactive:hover {
    --card-accent: rgba(255, 159, 67, 0.7) !important;
}

/* Photography: 蓝紫（视觉叙事类，独有配色） */
#photography-card.interest-card--interactive:hover {
    --card-accent: rgba(120, 168, 255, 0.7) !important;
}

/* Finance: 金（资本/金融类语义色） */
#finance-card.interest-card--interactive:hover {
    --card-accent: rgba(245, 197, 66, 0.7) !important;
}

/* ================================================
   Fluid wake 涟漪（main.js 检测到潜水员接近时挂上
   .fluid-wake 类）。原本只对 .project-card 生效，这里
   同步到 .interest-card。
   ================================================ */
.interest-card--interactive {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s, filter 0.3s !important;
}
.interest-card--interactive.fluid-wake {
    animation: fluidRipple 0.8s ease-in-out !important;
    filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.3)) !important;
}

/* 潜水员在兴趣卡上方的物理水波置换扭曲（与 project-card 一致） */
.interest-card--interactive.physical-water-ripple {
    animation: realWaterDisplace 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important;
}

/* ================================================
   Interest Modal Styles
   ================================================ */

.interest-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 8, 12, 0.96);
    z-index: 9999999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

body.modal-open {
    overflow: hidden;
}

/* When any modal is open, prevent background interest-cards from being clickable */
body.modal-open .interest-card--interactive,
body.modal-open .interest-card--large,
body.modal-open #marathon-card,
body.modal-open #travel-card,
body.modal-open #photography-card,
body.modal-open #finance-card {
    pointer-events: none !important;
}

.interest-modal-overlay.active {
    opacity: 1;
    display: flex;
}

.interest-modal-container {
    width: 70vw;
    max-width: 900px;
    height: 70vh;
    max-height: 90vh;
    background: #0b1116;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* 八角形刻刀切角：16px 斜切（与卡片 12px 区分，模态框更大需更宽的斜角） */
    clip-path: polygon(
        16px 0%,
        calc(100% - 16px) 0%,
        100% 16px,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        16px 100%,
        0% calc(100% - 16px),
        0% 16px
    );
    /* 顶部描边主色（青色高光）— 模拟卡纸顶面"受光" */
    --card-accent: rgba(0, 242, 254, 0.28);
    transform: translateZ(0);
    will-change: transform;
}

.interest-modal-overlay.active .interest-modal-container {
    transform: translateY(0) scale(1);
}

/* 顶部描边高亮：覆盖顶边 + 顶部两个斜角
   4 顶点梯形 polygon，左右斜边斜率 ±1 与容器 clip-path 完全重合 */
.interest-modal-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--card-accent) 0px,
        var(--card-accent) 4.5px,
        transparent 4.5px,
        transparent 100%
    );
    clip-path: polygon(
        0 16px,
        16px 0,
        calc(100% - 16px) 0,
        100% 16px
    );
    z-index: 3;
}

/* 因 clip-path 会裁切 border，用 ::after + clip-path: inherit 重绘带斜角的纸张切面细线 */
.interest-modal-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    clip-path: inherit;
    z-index: 2;
}

.interest-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0;
    line-height: 1;
    z-index: 100;
    pointer-events: auto;
}

.interest-modal-close:hover {
    color: #ffffff;
}

.interest-modal-header {
    padding: 24px 30px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    flex-shrink: 0;
}

.interest-modal-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 10px;
}

.interest-modal-title {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(245, 247, 250, 0.95);
    margin-bottom: 6px;
    font-weight: 400;
}

.interest-modal-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.85rem;
    color: rgba(245, 247, 250, 0.5);
    letter-spacing: 0.1em;
}

.interest-modal-body {
    flex: 1 1 0;
    min-height: 0;
    max-height: calc(70vh - 140px);
    padding: 20px 30px 30px;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
}

.interest-modal-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    text-align: center;
    gap: 14px;
    padding: 20px;
}

.interest-modal-placeholder .placeholder-zh {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(245, 247, 250, 0.85);
    letter-spacing: 0.05em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.interest-modal-placeholder .placeholder-en {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(245, 247, 250, 0.5);
    letter-spacing: 0.08em;
    font-style: italic;
}

/* Custom horizontal scrollbar (visible only when overflow allowed) */
.interest-modal-body::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.interest-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}
.interest-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.3);
    border-radius: 4px;
}
.interest-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 254, 0.5);
}

/* Marathon timeline drag cursor */
#marathon-modal .interest-modal-body {
    cursor: grab;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    pointer-events: auto !important;
    isolation: isolate;
}
#marathon-modal .interest-modal-body.is-panning {
    cursor: grabbing;
}

/* Left/Right scroll buttons (可靠的 pan fallback) */
.marathon-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 48px;
    height: 48px;
    background: #04161d;
    border: 2px solid rgba(0, 242, 254, 0.7);
    color: #00f2fe;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
    padding: 0;
    line-height: 0;
    pointer-events: auto !important;
}
.marathon-scroll-btn:hover {
    background: rgba(0, 242, 254, 0.5);
    border-color: rgba(0, 242, 254, 1);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 24px rgba(0, 242, 254, 0.6);
}
.marathon-scroll-btn:active {
    transform: translateY(-50%) scale(0.92);
}
.marathon-scroll-btn:disabled,
.marathon-scroll-btn.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none !important;
}
.marathon-scroll-btn--left {
    left: 18px;
}
.marathon-scroll-btn--right {
    right: 18px;
}

/* 拖拽提示文字 */
.marathon-scroll-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(0, 242, 254, 0.5);
    font-size: 11px;
    letter-spacing: 0.12em;
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
    text-align: center;
}
#marathon-modal .interest-modal-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ================================================
   Marathon Timeline (横向时间轴布局)
   ================================================ */

.marathon-timeline {
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 100%;
    height: 400px;
    padding: 0 60px;
    margin: 0 auto;
    will-change: transform;
}

/* 时间轴主线 — paper band (4px) with hard cast shadow, no glow */
.timeline-axis {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    background: #062936;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
}

.marathon-race-card {
    position: relative;
    width: 340px;
    height: 150px;
    flex-shrink: 0;
    background: #04161d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 14px;
    row-gap: 10px;
    align-items: start;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s;
    z-index: 2;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 20px 40px rgba(0, 3, 5, 0.85);
}

/* 上方卡片 (奇数) */
.timeline-card--above {
    align-self: flex-start;
    margin-top: 25px;
    margin-right: 70px;
    margin-left: 0;
}

/* 下方卡片 (偶数) */
.timeline-card--below {
    align-self: flex-end;
    margin-bottom: 25px;
    margin-left: 70px;
    margin-right: 0;
}

/* 时间轴节点 — paper-cut diamond (no glow) */
.timeline-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: #e0f7fa;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
    z-index: 4;
}

.timeline-card--above .timeline-node {
    bottom: -32px;
}

.timeline-card--below .timeline-node {
    top: -32px;
}

/* 时间轴连接虚线 — paper-tape, thicker & harder */
.timeline-connector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    border-left: 2px dashed rgba(224, 247, 250, 0.5);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    pointer-events: none;
}

.timeline-card--above .timeline-connector {
    bottom: -25px;
    height: 25px;
}

.timeline-card--below .timeline-connector {
    top: -25px;
    height: 25px;
}

.marathon-race-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 30px 60px rgba(0, 3, 5, 0.95);
}

.timeline-card--above:hover {
    transform: translateY(-4px);
}

.timeline-card--below:hover {
    transform: translateY(4px);
}

.marathon-race-card:hover .timeline-node {
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75);
}

.marathon-race-card--full {
    border-color: rgba(255, 193, 84, 0.35);
    background: #1a1408;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 20px 40px rgba(20, 10, 0, 0.9);
}

.marathon-race-card--full .timeline-node {
    background: #ffc154;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.marathon-race-card--full:hover .timeline-node {
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75);
}

.race-card-img {
    width: 80px;
    height: 100%;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: zoom-in;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    grid-row: 1 / span 2;
    align-self: stretch;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.race-card-img:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.35);
}

.race-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
}

.race-card-date {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 10px;
    color: rgba(0, 242, 254, 0.85);
    text-align: left;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.marathon-race-card--full .race-card-date {
    color: #ffc154;
}

.race-card-name {
    font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
    font-size: 0.88rem;
    color: rgba(245, 247, 250, 0.95);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    word-break: break-word;
}

.race-card-distance {
    font-size: 0.72rem;
    color: rgba(245, 247, 250, 0.5);
    letter-spacing: 0.04em;
    word-break: break-word;
}

.marathon-race-card--full .race-card-distance {
    color: #ffc154;
    opacity: 0.85;
}

.race-card-result {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.22);
    border-radius: 8px;
    min-width: 0;
}

.marathon-race-card--full .race-card-result {
    background: rgba(255, 193, 84, 0.1);
    border-color: rgba(255, 193, 84, 0.32);
}

.race-card-time {
    font-family: monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: #00f2fe;
    letter-spacing: 0.05em;
}

.marathon-race-card--full .race-card-time {
    color: #ffc154;
}

/* ================================================
   X1 设计自述弹窗展示样式
   ================================================ */
.project-detail-exhibit {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 30px;
    color: #ccd6f6;
    line-height: 1.7;
}

.exhibit-header h2 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #e6f1ff;
    margin: 8px 0 6px;
}

.exhibit-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #00f2fe;
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 3px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.exhibit-header .subtitle {
    font-size: 13px;
    color: #8892b0;
    font-style: italic;
    margin: 0;
}

.exhibit-divider {
    border: none;
    border-top: 1px solid rgba(0, 242, 254, 0.15);
    margin: 20px 0;
}

/* ================================================
   Image Lightbox (图片大图查看器)
   ================================================ */
.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.image-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.image-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.image-lightbox.active .image-lightbox-img {
    transform: scale(1);
}

.image-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 100000000;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.image-lightbox-caption {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    letter-spacing: 0.1em;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    text-align: center;
}

.exhibit-section {
    margin-top: 30px;
}

.exhibit-section h3 {
    font-size: 15px;
    font-weight: 500;
    color: #00f2fe;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.exhibit-section p {
    font-size: 14px;
    color: #8892b0;
    margin-bottom: 10px;
}

.exhibit-list {
    list-style-type: square;
    padding-left: 20px;
    color: #8892b0;
    line-height: 1.8;
    font-size: 14px;
}

.exhibit-list li {
    margin-bottom: 6px;
}

.mechanics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

.mechanics-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid rgba(0, 242, 254, 0.05);
}

.mechanics-card h4 {
    color: #00f2fe;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.mechanics-card p {
    font-size: 13px;
    color: #8892b0;
    margin: 0;
}

.mechanics-card code {
    color: #00f2fe;
    font-size: 12px;
    background: rgba(0, 242, 254, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
}

.tech-specs {
    background: rgba(211, 56, 30, 0.04);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(211, 56, 30, 0.15);
}

.specs-table {
    width: 100%;
    font-size: 13px;
    text-align: left;
    color: #8892b0;
    margin-top: 10px;
    border-collapse: collapse;
}

.specs-table td {
    padding: 8px 0;
}

.specs-key {
    color: #d3381e;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 20px;
}

@media (max-width: 600px) {
    .mechanics-grid {
        grid-template-columns: 1fr;
    }
    .project-detail-exhibit {
        padding: 20px 15px;
    }
}

/* ================================================
   X1 专属全透视弹窗 — 暴力全面穿透（不留任何黑背景死角）
   ================================================ */
.x1-modal-mode,
.x1-modal-mode .pdf-modal-mask,
.x1-modal-mode .pdf-modal-overlay,
.x1-modal-mode .pdf-modal-wrapper,
.x1-modal-mode .pdf-modal-window,
.x1-modal-mode .pdf-modal-content,
.x1-modal-mode .pdf-modal-container,
.x1-modal-mode .pdf-modal-header,
.x1-modal-mode .pdf-modal-body {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

/* X1 专属关闭按钮：恢复可点击 */
.x1-modal-mode .pdf-header {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.x1-modal-mode .pdf-close-button,
.x1-modal-mode #pdf-modal-close-btn,
.x1-modal-mode [class*="close"] {
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* 核心：将描述框重构为顶天立地的左侧高级侧边栏 */
.x1-elegant-text {
    position: fixed !important; /* 改为 fixed，确保相对于整个屏幕视口定位 */
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 8 !important; /* 在内容（z=5）之上、潜水员画布（z=10）之下，让潜水员依然可见 */

    /* 恢复完美宽度：占据屏幕左侧约 30% 到 35% 的黄金比例空间 */
    width: 460px !important;
    height: 100vh !important; /* 强制填满屏幕高度 */

    /* 内部排版：恢复正常的从左到右阅读，并给足呼吸感内边距 */
    direction: ltr !important;
    padding: 80px 50px !important;
    box-sizing: border-box !important;

    /* 侧边纸板：坚实的硬卡纸质感 */
    background: #04161d !important;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.7) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;

    /* 允许内部文本多时优雅滚动 */
    overflow: auto !important;
    pointer-events: auto !important; /* 必须允许鼠标在这里滑滚动条 */

    color: #ffffff !important;
}

/* 极致精致的微型滚动条，贴在文字框的最右侧边缘 */
.x1-elegant-text::-webkit-scrollbar {
    width: 4px !important;
}
.x1-elegant-text::-webkit-scrollbar-track {
    background: transparent !important;
}
.x1-elegant-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
}
.x1-elegant-text::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 254, 0.4) !important;
}

/* 终极解决：使用固定伪元素制作永不消失的倾斜空间水印 */
.x1-elegant-text::before {
    content: "HORACE'S PORTFOLIO   HORACE'S PORTFOLIO\A\A HORACE'S PORTFOLIO   HORACE'S PORTFOLIO\A\A HORACE'S PORTFOLIO   HORACE'S PORTFOLIO" !important;
    white-space: pre !important;
    position: fixed !important; /* 关键：用 fixed 挂在屏幕上，绝不随文本滚动而位移 */
    top: -10% !important;
    left: -20% !important;
    width: 140% !important;
    height: 140% !important;

    /* 水印字体排版：极尽克制、微弱、高级 */
    font-family: 'Cinzel', 'Times New Roman', serif !important;
    font-size: 13px !important;
    letter-spacing: 7px !important;
    line-height: 4.5 !important;
    color: rgba(255, 255, 255, 0.025) !important; /* 极低的透明度，若隐若现 */

    /* 核心：完美的斜向错落编织质感 */
    transform: rotate(-18deg) !important;
    transform-origin: center center !important;

    /* 视觉层级：在磨砂玻璃层之上、纯文本内容之下 */
    z-index: -1 !important;
    pointer-events: none !important; /* 绝不干扰任何鼠标划过或文字复制的操作 */
}

/* 确保大容器本身依然保持穿透，把右侧 70% 的空间完全留给 Canvas 动效交互 */
.pdf-modal-container.x1-modal-mode,
.x1-transparent-exhibit {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 99990 !important;
}

/* 排版文字微调 */
.x1-elegant-text h2 {
    font-size: 20px !important;
    font-weight: 300 !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
}

.x1-elegant-text .en-title {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase;
}

.x1-elegant-text .tech-tag {
    display: inline-block;
    font-size: 8px;
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 0px 6px;
    border-radius: 4px;
    color: #00f2fe;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.x1-elegant-text h3 {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    margin-top: 25px !important;
    margin-bottom: 6px !important;
    border-left: 2px solid #00f2fe;
    padding-left: 8px;
}

.x1-elegant-text p {
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-align: justify !important;
    margin-bottom: 4px !important;
}

.x1-elegant-text p.en-para {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 15px !important;
}

/* ---- X1 动态加载的 Markdown 渲染样式 ---- */
.x1-modal-loading {
    color: rgba(245, 247, 250, 0.45) !important;
    font-size: 12px !important;
    font-style: italic;
    letter-spacing: 0.5px;
    padding: 20px 0;
}

.x1-elegant-text .x1-fallback {
    padding: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(245, 247, 250, 0.78);
}
.x1-elegant-text .x1-fallback p {
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    color: rgba(245, 247, 250, 0.78) !important;
    text-align: left !important;
    margin: 0 0 12px !important;
}
.x1-elegant-text .x1-fallback code.x1-code {
    display: inline-block;
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 10px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 11.5px;
    color: rgba(0, 242, 254, 0.85);
    border-left: 2px solid rgba(0, 242, 254, 0.4);
}
.x1-elegant-text .x1-fallback .x1-fallback-link {
    display: inline-block;
    color: #00f2fe;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 242, 254, 0.4);
    padding-bottom: 1px;
    transition: all 0.2s ease;
    font-size: 12.5px;
    letter-spacing: 0.02em;
}
.x1-elegant-text .x1-fallback .x1-fallback-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.x1-elegant-text .x1-md-body {
    line-height: 1.7;
    font-size: 13px;
}
.x1-elegant-text .x1-md-body h1,
.x1-elegant-text .x1-md-body h2,
.x1-elegant-text .x1-md-body h3 {
    font-weight: 400 !important;
    letter-spacing: 0.05em;
    margin: 26px 0 10px;
    text-align: left !important;
    border-left: 2px solid #00f2fe;
    padding-left: 10px;
}
.x1-elegant-text .x1-md-body h1 { font-size: 16px !important; color: #00f2fe !important; }
.x1-elegant-text .x1-md-body h2 { font-size: 13px !important; color: rgba(255,255,255,0.92) !important; }
.x1-elegant-text .x1-md-body h3 { font-size: 12px !important; color: rgba(0, 242, 254, 0.75) !important; border-left-color: rgba(0, 242, 254, 0.5); }
.x1-elegant-text .x1-md-body h1:first-child,
.x1-elegant-text .x1-md-body h2:first-child { margin-top: 0; }

.x1-elegant-text .x1-md-body p {
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    color: rgba(245, 247, 250, 0.78) !important;
    text-align: left !important;
    margin: 0 0 12px !important;
}
.x1-elegant-text .x1-md-body strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}
.x1-elegant-text .x1-md-body em {
    color: rgba(0, 242, 254, 0.7);
    font-style: normal;
}
.x1-elegant-text .x1-md-body code {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11.5px;
    color: rgba(0, 242, 254, 0.85);
}
.x1-elegant-text .x1-md-body pre {
    background: rgba(0, 0, 0, 0.45);
    padding: 12px 14px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 11px;
    line-height: 1.6;
    border-left: 2px solid rgba(0, 242, 254, 0.4);
    margin: 0 0 14px;
}
.x1-elegant-text .x1-md-body pre code {
    background: none;
    padding: 0;
    color: rgba(245, 247, 250, 0.85);
}
.x1-elegant-text .x1-md-body ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.x1-elegant-text .x1-md-body li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 6px;
    color: rgba(245, 247, 250, 0.75);
    font-size: 12.5px;
    line-height: 1.65;
}
.x1-elegant-text .x1-md-body li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: rgba(0, 242, 254, 0.7);
}
.x1-elegant-text .x1-md-body hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 22px 0;
}
.x1-elegant-text .x1-md-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0 16px;
    font-size: 11.5px;
    display: block;
    overflow-x: auto;
}
.x1-elegant-text .x1-md-body th,
.x1-elegant-text .x1-md-body td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 9px;
    text-align: left;
    color: rgba(245, 247, 250, 0.75);
}
.x1-elegant-text .x1-md-body th {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(0, 242, 254, 0.7);
    font-weight: 500;
}

/* 水印已改为 JS 动态注入 DOM（.js-watermark-overlay），见 script.js */

/* Explicitly set Contact section container styles to prevent layout issues */
#section-contact .container {
    width: 100% !important;
    max-width: 700px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 20px !important;
}

/* ===== 滚动条全面卡纸化 ===== */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #020b0e;
}
::-webkit-scrollbar-thumb {
    background: #0d4b61;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1565c0;
}
/* Firefox 兼容 */
* {
    scrollbar-width: thin;
    scrollbar-color: #0d4b61 #020b0e;
}

/* ================================================
   手机浏览器适配 / Mobile Browser Adaptation
   ================================================ */

/* 全局：移动端禁用自定义光标 + 关闭标题区入场动画 */
@media (hover: none) and (pointer: coarse) {
    body { cursor: auto !important; }
    #seaweedCanvas, #diverOverlayCanvas { cursor: auto !important; }
    /* 移动端不等待入场动画，立即可见 */
    #cinematic-title-container {
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
    .main-title {
        animation: none !important;
        letter-spacing: 0.18em !important;
    }
    /* 禁用 backface-visibility 等可能干扰移动渲染的属性 */
    .project-card, .interest-card--interactive {
        -webkit-tap-highlight-color: transparent;
    }
}

/* 触屏设备优化：减少背景动画以节省电量 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================
   平板及以下 (<= 1024px)
   ================================================ */
@media (max-width: 1024px) {
    .content-section .container {
        width: 92% !important;
    }
    .section-title {
        font-size: 2.2rem;
        letter-spacing: 0.2em;
    }
    .interests-main-title {
        font-size: 2.2rem;
    }
    #section-portfolio .section-title { font-size: 2.2rem; }
    .interests-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #marathon-card {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    #travel-card {
        grid-column: 1;
        grid-row: 2;
    }
    #photography-card {
        grid-column: 2;
        grid-row: 2;
    }
    #finance-card {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    /* X1 侧边栏：缩窄 */
    .x1-elegant-text {
        width: 380px !important;
        padding: 70px 36px !important;
    }
}

/* ================================================
   已在的 @media (max-width: 768px) 之上：补充手机端细节
   ================================================ */
@media (max-width: 768px) {
    /* 全局：标题容器不要过大，左右内边距收紧 */
    #cinematic-title-container {
        top: 18% !important;
        padding: 0 5vw !important;
    }
    .title-divider { width: 60px; margin-bottom: 0.8rem; }

    /* 让内容段落文字两端对齐（避免移动端右对齐大段空白难看） */
    .item-bullet-list li {
        text-align: left !important;
    }
    .content-section:nth-of-type(odd) .resume-content,
    .content-section:nth-of-type(odd) .resume-section,
    .content-section:nth-of-type(odd) .skill-group,
    .content-section:nth-of-type(odd) .interest-item {
        text-align: left !important;
    }
    .content-section:nth-of-type(odd) .award-media-box {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .content-section:nth-of-type(odd) .item-title {
        text-align: left !important;
    }
    .item-meta { white-space: normal; }
    .item-meta-main { white-space: normal; }
}

/* ================================================
   手机端 (<= 480px) 进一步精细化
   ================================================ */
@media (max-width: 480px) {
    /* 兴趣卡片 padding 收紧 */
    .interest-card-content {
        padding: 16px !important;
    }
    .interest-card-title {
        font-size: 1.1rem;
        letter-spacing: 0.1em;
    }
    .interest-card-philosophy {
        font-size: 0.78rem;
    }
    .interest-card-icon {
        font-size: 22px;
        margin-bottom: 6px;
    }
    /* 社交按钮变小 */
    .social-link-item {
        width: 44px;
        height: 44px;
    }
    .social-icon { width: 22px; height: 22px; }
    .social-links-matrix { gap: 12px; }
    /* Resume 段间距 */
    .resume-section { margin-bottom: 2.5rem; }
    .section-tag { font-size: 0.75rem; margin-bottom: 1rem; }
    .resume-item { margin-bottom: 1.5rem; }
    .resume-trigger { padding: 8px 16px 8px 0; }
    /* 折叠箭头位置 */
    .fold-arrow { top: 14px; width: 8px; height: 8px; }
    /* 详情文字 */
    .item-bullet-list li { font-size: 12px; line-height: 1.7; }
    .skill-group { font-size: 12px; line-height: 1.85; }
    /* 奖励图片 */
    .award-preview-img { max-height: 240px; }
    .award-media-box { margin-top: 10px; }
    /* Portfolio 标题 */
    .project-card { padding: 14px; }
    .project-logo-wrapper { height: 70px; margin-bottom: 8px; }
    .project-meta { text-align: left; }
    /* Marathon timeline 在手机端：保留横向结构 (JS 已支持触屏拖拽)，缩小卡片 */
    .marathon-timeline {
        height: 320px !important;
        padding: 0 24px !important;
    }
    .marathon-race-card {
        width: 260px !important;
        height: 130px !important;
        padding: 12px 14px !important;
        column-gap: 10px !important;
        row-gap: 6px !important;
        grid-template-columns: 60px 1fr !important;
    }
    .timeline-card--above {
        margin-top: 20px !important;
        margin-right: 30px !important;
    }
    .timeline-card--below {
        margin-bottom: 20px !important;
        margin-left: 30px !important;
    }
    .race-card-img { width: 60px !important; }
    /* Marathon 滚动按钮位置 */
    .marathon-scroll-btn--left { left: 4px !important; }
    .marathon-scroll-btn--right { right: 4px !important; }
    .marathon-scroll-btn { width: 36px; height: 36px; }
    /* PDF 模态框：占满屏幕 */
    .pdf-modal-container { border-radius: 0 !important; }
    .pdf-modal-header { padding: 10px 16px !important; }
    #pdf-modal-title { font-size: 12px !important; }
    .pdf-modal-body { padding: 10px 0 !important; }
    .pdf-gallery-nav button { padding: 20px 10px; font-size: 18px; }
    .pdf-gallery-prev { left: 4px !important; }
    .pdf-gallery-next { right: 4px !important; }
    .zoom-controls { bottom: 10px !important; right: 10px !important; }
    .zoom-controls button { width: 30px !important; height: 30px !important; font-size: 13px !important; }
    /* Image lightbox 调整 */
    .image-lightbox { padding: 20px; }
    .image-lightbox-close { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 22px; }
    .image-lightbox-caption { font-size: 12px; bottom: 16px; padding: 6px 12px; }
    /* X1 弹窗：变成顶栏 + 滚动区 */
    .x1-elegant-text {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 50vh !important;
        padding: 50px 20px 20px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .x1-elegant-text::before { display: none !important; }
}

/* ================================================
   超小屏 (<= 360px) iPhone SE 1代 等
   ================================================ */
@media (max-width: 360px) {
    .main-title {
        font-size: 0.75rem !important;
        letter-spacing: 0.12em !important;
    }
    .branding-name { font-size: 0.55rem; }
    .subtitle { font-size: 0.6rem; }
    .section-title, .interests-main-title {
        font-size: 1.2rem !important;
        letter-spacing: 0.12em;
    }
    .item-title { font-size: 0.75rem; }
    .item-date { font-size: 0.6rem; }
    .project-title { font-size: 11px; }
    .interest-card-title { font-size: 1rem; }
    .interest-card-philosophy { font-size: 0.7rem; }
    .marathon-race-card { padding: 10px 12px !important; }
    .race-card-name { font-size: 0.78rem; }
    .race-card-time { font-size: 0.9rem; }
}

/* ================================================
   横屏模式 (手机横屏) — 减小垂直留白
   ================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .content-section { padding: 24px 0; min-height: auto; }
    #section-resume { padding-top: 12vh; padding-bottom: 8vh; }
    #cinematic-title-container { top: 35%; }
    .main-title { font-size: 1rem !important; }
    .interests-card-grid { grid-template-columns: repeat(4, 1fr) !important; }
    #marathon-card, #photography-card { grid-column: span 2 !important; }
    #travel-card, #finance-card { grid-column: span 2 !important; }
    .interest-card--large { min-height: 160px !important; }
}

/* ================================================
   安全区域 (iPhone 灵动岛/底部小白条)
   ================================================ */
@supports (padding: env(safe-area-inset-top)) {
    #cinematic-title-container {
        padding-top: max(0px, env(safe-area-inset-top));
    }
    .interest-modal-container {
        margin-top: env(safe-area-inset-top);
        margin-bottom: env(safe-area-inset-bottom);
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    .pdf-modal-container {
        margin-top: env(safe-area-inset-top);
        margin-bottom: env(safe-area-inset-bottom);
    }
}