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

        html {
            /* 平滑滚动（鼠标滚轮跟随） */
            scroll-behavior: smooth;
        }

        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background: #faf8f5;
            color: #4a3f35;
            overflow-x: hidden;
        }

        /* 去掉 .welcome 与 .resume 的强制吸附 */
        .welcome { scroll-snap-align: none; }
        .resume  { scroll-snap-align: none; }

        /* ========== 星座背景画布（贯穿全页） ========== */
        #constellation {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }

        /* 柔光色斑层：漂浮在模块背后，透过磨砂玻璃显现 */
        /* 暂时去掉（用户要看无云雾效果）。想恢复时，删掉下面的 display:none 即可。 */
        .glows {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(30px);       /* 更清晰，让色彩透过玻璃可见 */
            opacity: .62;             /* 更明显 */
            will-change: transform;
        }

        /* 光斑分布铺满全屏（含四个角落），漂移范围更大，避免只在中部活动 */
        .glow.g1 { width: 460px; height: 460px; background: radial-gradient(circle, #d8b892, transparent 65%); left: 8%; top: -6%; animation: drift1 16s ease-in-out infinite; }
        .glow.g2 { width: 420px; height: 420px; background: radial-gradient(circle, #c8a97e, transparent 65%); right: 8%; top: 10%; animation: drift2 20s ease-in-out infinite; }
        .glow.g3 { width: 380px; height: 380px; background: radial-gradient(circle, #e8d5b5, transparent 65%); left: 14%; bottom: 12%; animation: drift3 24s ease-in-out infinite; }
        .glow.g4 { width: 340px; height: 340px; background: radial-gradient(circle, #b89a70, transparent 65%); right: 12%; bottom: -8%; animation: drift4 18s ease-in-out infinite; }

        /* 每个光斑在更大范围内缓慢游走，铺开覆盖全屏 */
        @keyframes drift1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33%      { transform: translate(140px, 90px) scale(1.15); }
            66%      { transform: translate(-90px, 60px) scale(.9); }
        }
        @keyframes drift2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33%      { transform: translate(-150px, 70px) scale(1.1); }
            66%      { transform: translate(80px, -90px) scale(.95); }
        }
        @keyframes drift3 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33%      { transform: translate(110px, -80px) scale(1.12); }
            66%      { transform: translate(-130px, 40px) scale(.9); }
        }
        @keyframes drift4 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33%      { transform: translate(-100px, -90px) scale(1.08); }
            66%      { transform: translate(120px, 70px) scale(.92); }
        }

        /* ========== 第一屏：问候 ========== */
        .welcome {
            position: relative;
            z-index: 1;
            height: 100vh;              /* 兜底 */
            height: 100dvh;             /* 移动端用动态视口高度，避免地址栏伸缩导致跳动 */
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            /* 整个第一屏都可点击进入第二级界面 */
            cursor: pointer;
        }

        .welcome h1 {
            /* 字号随视口宽度连续缩放：手机最小 2.4rem，大屏最大 4rem，中间按 9vw 平滑过渡 */
            font-size: clamp(2.4rem, 9vw, 4rem);
            letter-spacing: 4px;
            color: #4a3f35;
            opacity: 0;
            transform: translateY(30px);
            animation: riseIn .8s ease forwards;
        }

        /* 挥手表情：动态摆动，模拟打招呼 */
        .welcome .wave {
            display: inline-block;              /* 允许 transform 旋转 */
            transform-origin: 70% 70%;          /* 以手腕为轴心旋转，更自然 */
            animation: wave 2.6s ease-in-out infinite;
        }

        @keyframes wave {
            0%   { transform: rotate(0deg); }
            10%  { transform: rotate(20deg); }
            20%  { transform: rotate(-14deg); }
            30%  { transform: rotate(18deg); }
            40%  { transform: rotate(-10deg); }
            50%  { transform: rotate(14deg); }
            60%  { transform: rotate(-6deg); }
            70%  { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .welcome .divider {
            width: 70px;
            height: 3px;
            background: linear-gradient(90deg, #c8a97e, #a98a63);
            border-radius: 3px;
            margin: 1.4rem auto;
            opacity: 0;
            transform: translateY(30px);
            animation: riseIn .8s .15s ease forwards;
        }

        .welcome p {
            font-size: clamp(1rem, 4.2vw, 1.3rem);   /* 随窗口连续缩放 */
            color: #8a7a68;
            letter-spacing: clamp(1px, .6vw, 2px);
            opacity: 0;
            transform: translateY(30px);
            animation: riseIn .8s .3s ease forwards;
        }

        .welcome .scroll-hint {
            position: absolute;
            bottom: 42px;
            left: 50%;
            transform: translateX(-50%);
            color: #a98a63;
            font-size: clamp(.82rem, 3vw, .95rem);
            letter-spacing: 1px;
            opacity: 0;
            animation: riseIn 1s .6s ease forwards;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .scroll-hint .arrow {
            display: inline-block;
            animation: bob 1.6s ease-in-out infinite;
            font-size: 1.4rem;
        }

        @keyframes bob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(8px); }
        }

        @keyframes riseIn {
            to { opacity: 1; transform: translateY(0); }
        }

        /* ========== 第二屏：简历 ========== */
        .resume {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            /* 页面内边距随窗口缩放：顶部 90px 收窄到 60px，左右保持比例留白 */
            padding: clamp(60px, 7vw, 90px) clamp(16px, 4vw, 5%) clamp(50px, 5vw, 80px);
            max-width: 1360px;   /* 放宽限制，两栏布局有足够空间，居中留白、边缘间距动态 */
            margin: 0 auto;
            /* 整页从下方浮动进场的初始状态 */
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 1s cubic-bezier(.2,.7,.2,1),
                        transform 1s cubic-bezier(.2,.7,.2,1);
        }

        .resume.active {
            opacity: 1;
            transform: translateY(0);
        }

        .resume-head {
            text-align: center;
            margin-bottom: 60px;
        }

        .resume-head h2 {
            font-size: clamp(1.9rem, 4.4vw, 2.6rem);   /* 简历大标题随窗口缩放 */
            letter-spacing: clamp(1px, .8vw, 3px);
            color: #4a3f35;
        }

        .resume-head .divider {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #c8a97e, #a98a63);
            margin: 1rem auto;
            border-radius: 3px;
        }

        .resume-head p {
            color: #8a7a68;
            letter-spacing: 1px;
        }

        /* 模块（逐层上浮 + 磨砂玻璃质感） */
        /* 关键：不用 backdrop-filter（它会在动画后失效导致背景被掩盖），
           改用半透明真背景，让背后的星座与光斑一直稳定透出、永不消失。 */
        .module {
            position: relative;
            background: rgba(255, 255, 255, .30);          /* 半透明真背景，星座一直透出 */
            border: 1px solid rgba(255, 255, 255, .7);
            border-radius: clamp(14px, 2vw, 18px);         /* 圆角随窗口缩放 */
            margin-bottom: clamp(16px, 2.4vw, 24px);
            box-shadow: 0 8px 32px rgba(90, 70, 50, .12);
        }

        .m-inner {
            /* 内边距随视口宽度连续缩放：桌面 34px 横向留白，窄屏收窄到 18px，避免文字挤在窄区间 */
            padding: clamp(18px, 3.2vw, 28px) clamp(16px, 4vw, 34px);
            /* 上浮动动画在此内层播放，不影响外层的半透明透出 */
            opacity: 0;
            transform: translateY(46px);
            /* 更丝滑：回弹缓动曲线 + 透明度轻微滞后，让模块浮现更灵动 */
            transition: opacity .7s cubic-bezier(.3,.1,.15,1) .05s,
                        transform .85s cubic-bezier(.22,1.15,.36,1) 0s;
        }

        .m-inner.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 模块内文字保证清晰可读 */
        .module .module-body,
        .module .module-title h3 {
            position: relative;
            z-index: 1;
            text-shadow: 0 1px 2px rgba(255,255,255,.6);   /* 轻微白边提升在玻璃上的可读性 */
        }

        .module-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .module-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .module-title .emoji {
            font-size: 1.5rem;
        }

        .module-title h3 {
            font-size: clamp(1.2rem, 2.6vw, 1.45rem);   /* 随窗口缩放 */
            letter-spacing: 1px;
            color: #4a3f35;
        }

        .module-link {
            background: #f6efe4;
            color: #a98a63;
            border: 1px solid #e2d3ba;
            padding: clamp(5px, 1vw, 6px) clamp(12px, 2vw, 16px);
            border-radius: 30px;
            font-size: clamp(.8rem, 1.6vw, .88rem);
            cursor: pointer;
            text-decoration: none;
            transition: all .25s ease;
            white-space: nowrap;
        }

        .module-link:hover {
            background: #a98a63;
            color: #fff;
            border-color: #a98a63;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(169,138,99,.3);
        }

        .module-body {
            color: #5d5244;
            font-size: clamp(.95rem, 1.6vw, 1rem);   /* 正文随窗口缩放 */
            line-height: 1.85;
        }

        .module-body ul {
            padding-left: 20px;
        }

        .module-body li {
            margin-bottom: 6px;
        }

        .module-body strong {
            color: #8a6a4b;
        }

        .kv {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px 30px;
        }

        .kv span {
            font-size: .98rem;
        }

        .kv b {
            color: #8a6a4b;
            font-weight: 600;
            margin-right: 8px;
        }

        .github-note {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px dashed #e6dccb;
            color: #8a7a68;
            font-size: .92rem;
        }

        .award {
            border-left: 3px solid #c8a97e;
            padding: 4px 0 4px 14px;
            margin-bottom: 6px;
        }

        .award .tier {
            color: #8a6a4b;
            font-weight: 600;
        }

        /* ========== 项目经历 · 项目块 ========== */
        .proj-item {
            margin-bottom: 30px;
        }

        .proj-item:last-child {
            margin-bottom: 0;
        }

        /* 标题行：编号 + 标题框 + 查看详情按钮，弹性撑满一行，中间留白 */
        .proj-head {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1.6vw, 14px);   /* 间距随窗口缩放 */
            width: 100%;
            margin-bottom: clamp(12px, 2vw, 16px);
            /* 窗口较窄时允许换行，避免挤压 */
            flex-wrap: wrap;
        }

        .proj-tag {
            flex: 0 0 auto;
            background: linear-gradient(135deg, #a98a63, #8a6a4b);
            color: #fff;
            font-size: clamp(.78rem, 1.6vw, .9rem);
            letter-spacing: 1px;
            padding: clamp(6px, 1vw, 7px) clamp(12px, 2vw, 16px);
            border-radius: 30px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(138,106,75,.3);
            white-space: nowrap;
        }

        /* 标题单独一个框凸显出来 */
        .proj-title-box {
            flex: 1 1 auto;
            background: rgba(255, 255, 255, .55);
            border: 1px solid rgba(200, 169, 126, .55);
            border-left: 4px solid #c8a97e;
            border-radius: 12px;
            padding: clamp(8px, 1.6vw, 10px) clamp(12px, 2.2vw, 16px);  /* 标题内边距随窗口缩放 */
            font-size: clamp(1.02rem, 2.4vw, 1.18rem);
            font-weight: 700;
            color: #4a3f35;
            letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(255,255,255,.6);
            box-shadow: 0 3px 10px rgba(90,70,50,.10);
            transition: transform .3s ease, box-shadow .3s ease;
            min-width: 0;
        }

        .proj-title-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(90,70,50,.16);
        }

        .proj-link {
            flex: 0 0 auto;
            background: #f6efe4;
            color: #a98a63;
            border: 1px solid #e2d3ba;
            padding: clamp(7px, 1.2vw, 8px) clamp(14px, 2.4vw, 18px);
            border-radius: 30px;
            font-size: clamp(.8rem, 1.5vw, .85rem);
            cursor: pointer;
            white-space: nowrap;
            transition: all .25s ease;
            font-weight: 600;
        }

        .proj-link:hover {
            background: #a98a63;
            color: #fff;
            border-color: #a98a63;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(169,138,99,.3);
        }

        /* 项目元信息（时间 / 主控 / 完成方式） */
        .proj-meta {
            color: #8a7a68;
            font-size: .92rem;
            letter-spacing: .5px;
            margin-bottom: 12px;
            padding-left: 2px;
        }

        /* 内容区：与标题框在视觉上有区别 */
        .proj-body {
            background: rgba(255, 255, 255, .22);
            border-radius: 12px;
            padding: 14px 18px;
        }

        .proj-body ul {
            padding-left: 20px;
        }

        .proj-body li {
            margin-bottom: 6px;
        }

        .proj-body li:last-child {
            margin-bottom: 0;
        }

        /* 响应式：窄屏时标题行换行堆叠 */
        @media (max-width: 640px) {
            .proj-head {
                flex-wrap: wrap;
                gap: 10px;
            }
            .proj-title-box {
                order: 3;
                flex-basis: 100%;
            }
        }

        /* ========== 详情占位浮层 ========== */
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(60, 48, 36, .45);
            backdrop-filter: blur(4px);
            z-index: 50;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity .3s ease;
        }

        .overlay.open {
            display: flex;
            opacity: 1;
        }

        .overlay-box {
            background: #fff;
            border-radius: clamp(14px, 2vw, 18px);    /* 圆角随窗口缩放 */
            max-width: 520px;
            width: 92%;
            /* 内边距随窗口缩放：桌面 40px，窄屏收窄到 20px，避免内容挤在窄区间 */
            padding: clamp(22px, 4vw, 36px) clamp(18px, 3.2vw, 40px);
            box-shadow: 0 30px 80px rgba(0,0,0,.25);
            transform: translateY(20px) scale(.96);
            transition: transform .35s cubic-bezier(.2,.7,.2,1);
            position: relative;
            max-height: 90dvh;
            overflow-y: auto;
        }

        .overlay.open .overlay-box {
            transform: translateY(0) scale(1);
        }

        .overlay-box .close {
            position: absolute;
            top: 14px;
            right: 18px;
            background: #f3ece1;
            border: none;
            color: #8a7a68;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 1rem;
            cursor: pointer;
            transition: all .2s ease;
        }

        .overlay-box .close:hover {
            background: #e0d3be;
            color: #4a3f35;
        }

        .overlay-box h3 {
            font-size: 1.5rem;
            color: #4a3f35;
            margin-bottom: 12px;
        }

        .overlay-box .pending {
            color: #a98a63;
            border: 1px dashed #d8c9ae;
            border-radius: 10px;
            padding: 14px 16px;
            font-size: .95rem;
            line-height: 1.7;
            background: #fbf8f2;
        }

        /* ========== 荣誉奖项 · 图片画廊 ========== */
        .award-gallery {
            animation: riseIn .5s ease both;
        }

        .gallery-hint {
            color: #a98a63;
            font-size: .9rem;
            letter-spacing: 1px;
            margin-bottom: 16px;
            text-align: center;
        }

        .gallery-grid {
            display: grid;
            /* 图片卡片最小宽度随窗口缩放：窄屏更小、列数更多，宽屏更大 */
            grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 18vw, 160px), 1fr));
            gap: clamp(10px, 1.6vw, 14px);
            max-height: 62vh;
            overflow-y: auto;
            padding: 6px 4px 14px;
        }

        .g-item {
            margin: 0;
            cursor: zoom-in;
            border-radius: 12px;
            overflow: hidden;
            background: #f3ece1;
            border: 1px solid rgba(200, 169, 126, .4);
            box-shadow: 0 4px 14px rgba(90, 70, 50, .10);
            transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
            animation: cardIn .5s ease both;
        }

        /* 卡片依次入场（灵动） */
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(18px) scale(.96); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        .g-item:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 14px 28px rgba(90, 70, 50, .18);
        }

        .g-item img {
            display: block;
            width: 100%;
            height: clamp(110px, 20vw, 150px);   /* 图片高度随窗口缩放 */
            object-fit: cover;
            transition: transform .4s ease;
        }

        .g-item:hover img {
            transform: scale(1.08);
        }

        .g-item figcaption {
            padding: 8px 10px;
            font-size: .78rem;
            color: #6b5c4a;
            text-align: center;
            line-height: 1.4;
        }

        /* ========== 项目详情（项目一 / 项目二） ========== */
        .project-detail {
            animation: riseIn .45s ease both;
            text-align: left;
        }

        .pd-badge {
            display: inline-block;
            background: linear-gradient(135deg, #a98a63, #8a6a4b);
            color: #fff;
            font-size: .85rem;
            padding: 5px 14px;
            border-radius: 30px;
            font-weight: 600;
            margin-bottom: 12px;
            letter-spacing: 1px;
        }

        .project-detail h4 {
            font-size: 1.5rem;
            color: #4a3f35;
            margin-bottom: 6px;
        }

        .pd-meta {
            color: #8a7a68;
            font-size: .92rem;
            margin-bottom: 14px;
        }

        .pd-list {
            padding-left: 0;
            list-style: none;
        }

        .pd-list li {
            position: relative;
            padding: 9px 14px 9px 34px;
            margin-bottom: 10px;
            background: #fbf8f2;
            border: 1px solid rgba(216,201,174,.6);
            border-radius: 10px;
            font-size: .98rem;
            line-height: 1.7;
            color: #5d5244;
        }

        .pd-list li::before {
            content: "";
            position: absolute;
            left: 16px;
            top: 17px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: linear-gradient(135deg, #c8a97e, #a98a63);
        }

        .pd-list strong {
            color: #8a6a4b;
        }

        /* ========== 大图预览（lightbox） ========== */
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 100;
            background: rgba(20, 16, 12, .88);
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            opacity: 0;
            transition: opacity .3s ease;
        }

        .lightbox.open {
            display: flex;
            opacity: 1;
        }

        .lightbox img {
            max-width: 90vw;
            max-height: 82vh;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0,0,0,.5);
            transform: scale(.92);
            transition: transform .3s cubic-bezier(.2,.7,.2,1);
        }

        .lightbox.open img {
            transform: scale(1);
        }

        .lightbox .lb-cap {
            margin-top: 14px;
            color: #e8dcc9;
            letter-spacing: 1px;
            font-size: .95rem;
            text-align: center;
            padding: 0 20px;
        }

        .lightbox .lb-close {
            position: absolute;
            top: 18px;
            right: 22px;
            background: rgba(255,255,255,.14);
            border: none;
            color: #fff;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all .2s ease;
        }

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

        /* 响应式 */
        @media (max-width: 900px) {
            .resume { padding: 70px 4% 60px; }
        }

        /* ========== 手机端优化 ========== */
        /* 手机端断点：仅处理必须"换行为单列/堆叠"或"视觉弱化背景"的情况，
   其余字号/内边距已由 clamp() 在桌面到手机连续平滑缩放，避免与 clamp 冲突 */
@media (max-width: 640px) {
            /* 标题行在窄屏强制换行堆叠：项目一徽章 + 标题框 + 按钮逐行排布，不再挤压 */
            .proj-head { gap: 8px; }
            .proj-title-box { flex-basis: 100%; order: 3; }

            /* 模块标题行竖排，避免两列挤在窄屏 */
            .module-header { flex-direction: column; align-items: flex-start; gap: 10px; }
            .kv { grid-template-columns: 1fr; gap: 8px 0; }
            .kv span { line-height: 1.5; }

            /* 手机端：光斑大幅缩小、降低透明度、移向四角，避免挤在屏幕中央 */
            .glow {
                filter: blur(20px);
                opacity: .28;
                animation: none !important;   /* 弱化漂移，视觉更稳定 */
            }
            .glow.g1 { width: 180px; height: 180px; top: -40px; left: -40px; }
            .glow.g2 { width: 170px; height: 170px; bottom: -40px; right: -40px; }
            .glow.g3 { width: 150px; height: 150px; top: 6%; right: -30px; }
            .glow.g4 { width: 160px; height: 160px; bottom: 12%; left: -30px; }

            /* 星座画布在手机端降低密度（连线由 JS 控制，见脚本） */
            #constellation { opacity: .7; }

            /* 浮层在手机端占满宽度、内容可滚动 */
            .overlay-box {
                width: 96%;
                max-height: 88dvh;
                overflow-y: auto;
                padding: 24px 16px 22px;   /* 手机端收窄内边距，避免文字贴边 */
            }
            .overlay-box h3 { font-size: 1.3rem; }

            /* 大图预览在手机端用整屏 */
            .lightbox img { max-width: 96vw; max-height: 74vh; }
        }

/* ========== 博客式改造：一级界面打字动画 ========== */
.welcome-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.type-line {
    margin-top: 1.6rem;
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
    color: #5d5244;
    letter-spacing: 1px;
    line-height: 2;
    min-height: 1.6em;   /* 预留行高，让文字逐字显现时布局不跳动 */
    max-width: 88vw;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    animation: riseIn .8s .3s ease forwards;
}

/* 打字光标 */
.caret {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    background: #a98a63;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: caretBlink .9s steps(1) infinite;
}

@keyframes caretBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ========== 博客式改造：二级页两栏布局 ========== */
/* 桌面端：左（作者侧边栏，sticky 固定）+ 右（简历模块，随滚动移动） */
.resume-layout {
    display: grid;
    grid-template-columns: clamp(250px, 26vw, 320px) 1fr;
    gap: clamp(20px, 3.5vw, 44px);
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}

/* 左侧作者栏：sticky 固定，滚动简历时它不动 */
.sidebar {
    position: sticky;
    top: clamp(16px, 3vh, 32px);
}

/* 右侧简历模块区：正常流动，随滚动移动 */
.resume-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
}

/* ========== 作者卡片内容 ========== */
.author-card {
    text-align: center;
    /* 磨砂玻璃质感：半透明背景 + backdrop 模糊，背后星座透过毛玻璃隐约显现，柔和绿调 */
    background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(231,242,236,.26)) !important;
    border-color: rgba(167, 196, 184, .45) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
}

/* 磨砂玻璃上的文字加一点轻微白边，保证可读性 */
.author-card .author-name,
.author-card .author-desc,
.author-card .pinned-title {
    text-shadow: 0 1px 3px rgba(255,255,255,.7);
}

.avatar-wrap {
    display: inline-block;
    width: clamp(92px, 12vw, 128px);   /* 头像缩小，不再撑满全屏 */
    height: clamp(92px, 12vw, 128px);
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 16px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(167, 196, 184, .7);   /* 外圈柔绿光环，贴合作者栏绿调 */
    background: #eef4f0;
}

.avatar-wrap:hover .avatar {
    transform: scale(1.1) rotate(5deg);   /* 悬停时头像轻轻放大旋转，动起来 */
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.author-name {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    color: #5f7d70;   /* 柔和鼠尾草绿，与右侧咖啡色简历区分但不冲突 */
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.author-desc {
    color: #8a7a68;
    font-size: .88rem;
    margin-bottom: 18px;
    line-height: 1.6;
}

/* 统计：项目数 + 文章数 */
.author-stats {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #d8cebd;
}

.stat b {
    display: block;
    font-size: 1.35rem;
    color: #7d9b8c;   /* 柔和鼠尾草绿 */
    font-weight: 700;
}

.stat span {
    font-size: .78rem;
    color: #8a7a68;
    letter-spacing: 1px;
}

/* 置顶项目 */
.pinned-title {
    font-size: .95rem;
    color: #5f7d70;   /* 柔和鼠尾草绿 */
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.pin-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(167, 196, 184, .5);   /* 柔绿描边，与右侧咖啡框区分 */
    margin-bottom: 8px;
    transition: all .25s ease;
    text-align: left;
}

.pin-item:hover {
    background: #fff;
    transform: translateX(4px);
    box-shadow: 0 6px 14px rgba(90, 70, 50, .14);
    border-color: #7d9b8c;
}

.pin-ic {
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.pin-txt {
    font-size: .86rem;
    color: #5d5244;
    font-weight: 600;
    line-height: 1.35;
}

/* ========== 博客式改造：响应式 ========== */
/* 中等屏：侧边栏收窄 */
@media (max-width: 1000px) {
    .resume-layout {
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }
}

/* 窄屏（手机/平板）：侧边栏移到顶部，右侧模块单列 */
@media (max-width: 800px) {
    .resume-layout {
        grid-template-columns: 1fr;   /* 单列 */
        gap: 18px;
    }
    .sidebar {
        position: static;             /* 取消固定，随页面流动 */
        order: -1;                    /* 确保作者栏在最上方 */
        width: 100%;
    }
    .resume-main {
        gap: 14px;
    }
    /* 窄屏头像略小，作者栏横向排布更省空间 */
    .author-stats {
        gap: 20px;
    }
}