/* ===== CubeLog 苹果风样式 ===== */
:root {
    --primary: #0071e3;
    --primary-hover: #0077ed;
    --primary-soft: rgba(0, 113, 227, 0.12);
    --text-dark: #1d1d1f;
    --text-light: #6e6e73;
    /* 浅色模式改用纯白底，卡片靠描边+投影分层（原来是 #f5f5f7 灰底） */
    --bg: #ffffff;
    --bg-glow: rgba(0, 113, 227, 0.10);
    --nav-bg: rgba(255, 255, 255, 0.78);
    --menu-bg: rgba(255, 255, 255, 0.94);
    --nav-border: rgba(0, 0, 0, 0.07);
    --card-bg: rgba(255, 255, 255, 0.75);
    --card-border: rgba(0, 0, 0, 0.07);
    --card-shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.11);
    --tab-bg: rgba(245, 245, 247, 0.9);
    --tab-border: rgba(0, 0, 0, 0.08);
    --hero-from: #1d1d1f;
    --hero-to: #0071e3;
    --hero-shine: #64d2ff;
    --aurora-1: rgba(10, 132, 255, 0.32);
    --aurora-2: rgba(96, 120, 255, 0.20);
    --aurora-3: rgba(90, 200, 250, 0.28);
    --particle: rgba(10, 132, 255, 0.55);
    --particle-glow: rgba(10, 132, 255, 0.35);
    --ink-blue: #0071e3;
    --ink-cyan: #0a9ad6;
    --ink-violet: #6b5cff;
    --ink-green: #22a06b;
    /* 玻璃立方体：面几乎透明，靠亮边 + 内发光 + 外扩散成形 */
    --cube-edge: rgba(255, 255, 255, 0.62);
    --cube-face-front: linear-gradient(140deg, rgba(90, 180, 255, 0.30), rgba(170, 225, 255, 0.10));
    --cube-face-top: linear-gradient(140deg, rgba(200, 235, 255, 0.46), rgba(130, 200, 255, 0.16));
    --cube-face-right: linear-gradient(200deg, rgba(60, 150, 245, 0.24), rgba(120, 200, 255, 0.06));
    --cube-face-left: linear-gradient(-20deg, rgba(40, 120, 220, 0.26), rgba(90, 170, 255, 0.08));
    --cube-inner-glow: inset 0 0 26px rgba(140, 205, 255, 0.30);
    --cube-halo: 0 0 18px rgba(90, 170, 255, 0.20);
    --cube-glow: rgba(10, 132, 255, 0.34);
    --footer-border: rgba(0, 0, 0, 0.06);
    --nav-height: 48px;
    --cube-size: 100px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --primary: #0a84ff;
    --primary-hover: #339dff;
    --primary-soft: rgba(10, 132, 255, 0.18);
    --text-dark: #f5f5f7;
    --text-light: #a1a1a6;
    --bg: #0d0d0f;
    --bg-glow: rgba(10, 132, 255, 0.10);
    --nav-bg: rgba(24, 24, 27, 0.82);
    --menu-bg: rgba(28, 28, 30, 0.96);
    --nav-border: rgba(255, 255, 255, 0.12);
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.12);
    --card-shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
    --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.45);
    --tab-bg: rgba(255, 255, 255, 0.08);
    --tab-border: rgba(255, 255, 255, 0.14);
    --hero-from: #f5f5f7;
    --hero-to: #0a84ff;
    --hero-shine: #7ee0ff;
    --aurora-1: rgba(10, 132, 255, 0.30);
    --aurora-2: rgba(120, 92, 255, 0.24);
    --aurora-3: rgba(64, 190, 255, 0.22);
    --particle: rgba(140, 200, 255, 0.60);
    --particle-glow: rgba(90, 170, 255, 0.45);
    --ink-blue: #4aa3ff;
    --ink-cyan: #45bdf0;
    --ink-violet: #9a8cff;
    --ink-green: #3ddc84;
    /* 深色下玻璃要更亮一点才显得通透 */
    --cube-edge: rgba(190, 230, 255, 0.55);
    --cube-face-front: linear-gradient(140deg, rgba(110, 195, 255, 0.26), rgba(180, 230, 255, 0.06));
    --cube-face-top: linear-gradient(140deg, rgba(205, 238, 255, 0.38), rgba(140, 205, 255, 0.12));
    --cube-face-right: linear-gradient(200deg, rgba(70, 150, 240, 0.22), rgba(140, 210, 255, 0.05));
    --cube-face-left: linear-gradient(-20deg, rgba(50, 130, 225, 0.24), rgba(110, 180, 255, 0.06));
    --cube-inner-glow: inset 0 0 26px rgba(150, 215, 255, 0.26);
    --cube-halo: 0 0 20px rgba(110, 190, 255, 0.22);
    --cube-glow: rgba(10, 132, 255, 0.38);
    --footer-border: rgba(255, 255, 255, 0.10);
}

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

html {
    scroll-behavior: smooth;
    /* 固定导航栏下方的锚点不会被遮住 */
    scroll-padding-top: calc(var(--nav-height) + 8px);
    /* 整页底色跟随主题：深色手机上 iOS 回弹区/滚动条不会露出白边 */
    background: var(--bg);
    color-scheme: light;
    /* 去掉手机点击时 Chromium 默认的浅蓝色高亮块，反馈改用下面的 :active */
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--primary-soft);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text-dark);
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* 顶部环境光 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(640px 420px at 50% -80px, var(--bg-glow), transparent 70%);
    pointer-events: none;
}

/* ===== 键盘可达性 ===== */
.skip-link {
    position: fixed;
    top: 8px;
    left: 50%;
    z-index: 2000;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--primary);
    border-radius: 980px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transform: translate(-50%, -160%);
    transition: transform 0.25s ease;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* 只在键盘操作时显示焦点环，鼠标点击不显示 */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.icon-btn:focus-visible,
.cta-btn:focus-visible,
.blog-tab:focus-visible {
    border-radius: 980px;
}

#main:focus {
    outline: none;
}

.blog-panel:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 8px;
    border-radius: 12px;
}

/* ===== 液态玻璃导航栏 ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    transition: background-color 0.4s ease;
}

.nav-container {
    max-width: 980px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
}

.nav-logo {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: opacity 0.3s;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 图标按钮（主题切换 / 菜单） */
.icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tab-border);
    background: var(--tab-bg);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 主题图标：显示「当前模式」（跟随系统 / 浅色 / 深色）；没有脚本时默认显示跟随系统 */
.theme-icon {
    display: none;
}

.theme-icon-auto {
    display: inline;
}

[data-theme-mode="light"] .theme-icon-auto,
[data-theme-mode="dark"] .theme-icon-auto {
    display: none;
}

[data-theme-mode="light"] .theme-icon-light,
[data-theme-mode="dark"] .theme-icon-dark {
    display: inline;
}

/* 汉堡菜单按钮（桌面端隐藏） */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.menu-bar {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-dark);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle.open .menu-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.open .menu-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open .menu-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-link {
    font-size: 14px;
    color: var(--text-dark);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
    position: relative;
}

.nav-link.active {
    opacity: 1;
    font-weight: 500;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

/* ===== 页面板块 ===== */
.section {
    position: relative;
    overflow: hidden;   /* 裁剪章节环境光色块 */
    display: none;
    min-height: 100vh;
    /* 手机浏览器工具栏展开时 100vh 比可见区高，会让首屏内容被顶出视口 */
    min-height: 100svh;
    padding-top: var(--nav-height);
}

/* 章节环境光：与首页极光同一套配色语言 */
body[data-section="blog"] {
    --amb-a: rgba(10, 132, 255, 0.21);
    --amb-b: rgba(90, 200, 250, 0.16);
    --title-accent: rgba(10, 132, 255, 0.30);
    --title-ink: var(--ink-blue);
}

body[data-section="projects"] {
    --amb-a: rgba(120, 92, 255, 0.20);
    --amb-b: rgba(10, 132, 255, 0.15);
    --title-accent: rgba(120, 92, 255, 0.26);
    --title-ink: var(--ink-violet);
}

[data-theme="dark"] body[data-section="blog"] {
    --amb-a: rgba(10, 132, 255, 0.24);
    --amb-b: rgba(64, 190, 255, 0.18);
    --title-accent: rgba(10, 132, 255, 0.26);
    --title-ink: var(--ink-blue);
}

[data-theme="dark"] body[data-section="projects"] {
    --amb-a: rgba(120, 92, 255, 0.23);
    --amb-b: rgba(10, 132, 255, 0.17);
    --title-accent: rgba(120, 92, 255, 0.24);
    --title-ink: var(--ink-violet);
}


/* 关于页：青绿调环境光（原来缺这组变量，所以看不到炫光） */
body[data-section="about"] {
    --amb-a: rgba(64, 200, 255, 0.21);
    --amb-b: rgba(48, 209, 88, 0.15);
    --title-accent: rgba(64, 200, 255, 0.28);
    --title-ink: var(--ink-cyan);
}

[data-theme="dark"] body[data-section="about"] {
    --amb-a: rgba(64, 200, 255, 0.24);
    --amb-b: rgba(48, 209, 88, 0.17);
    --title-accent: rgba(64, 200, 255, 0.24);
    --title-ink: var(--ink-cyan);
}

/* 首页：极光本身够亮，环境光压低一点 */
body[data-section="home"] {
    --amb-a: rgba(10, 132, 255, 0.20);
    --amb-b: rgba(120, 92, 255, 0.16);
}

[data-theme="dark"] body[data-section="home"] {
    --amb-a: rgba(10, 132, 255, 0.22);
    --amb-b: rgba(120, 92, 255, 0.18);
}

/* 全局炫光层：固定铺满，靠 z-index:-1 待在所有内容之后 */
body[data-section="home"] .amb-layer {
    display: none;             /* 首页有流体渐变，不需要再叠一层 */
}

/* 切换板块：内容淡入 + 轻微上浮，和炫光的过渡节奏一致 */
@keyframes section-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.section.active-section {
    animation: section-in 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.amb-layer {
    position: fixed;
    inset: 0;
    z-index: 0;              /* 注意：不能用 -1，body 有不透明背景会把光层盖住 */
    overflow: hidden;
    pointer-events: none;
}

/* 内容抬到光层之上 */
main,
footer {
    position: relative;
    z-index: 1;
}

/* 让自定义属性可插值 → 切换板块时颜色真正平滑过渡（不只是声明了 transition） */
@property --amb-a {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(0, 0, 0, 0);
}

@property --amb-b {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(0, 0, 0, 0);
}

body {
    transition: --amb-a 900ms ease, --amb-b 900ms ease;
}

/* 切换板块时颜色平滑过渡，不再硬切 */
.amb-blob {
    transition: background 900ms ease;
}

/* 证书图去掉细边框 */
.awards .award img { border: 0; }   /* 去掉证书细边框（提高优先级以覆盖后面的规则） */


.amb-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
    will-change: transform;
}

.amb-blob-a {
    top: 10%;                  /* 圆心在屏幕内（负 margin 抵消半个尺寸） */
    left: 50%;
    width: 132vmax;
    height: 76vmax;
    margin-top: -38vmax;
    margin-left: -66vmax;
    background: radial-gradient(circle at 50% 50%, var(--amb-a), transparent 68%);
    animation: aurora-a 24s ease-in-out infinite;
}

.amb-blob-b {
    top: 92%;                  /* 右下角小光点，只做点缀 */
    left: 82%;
    width: 54vmax;
    height: 54vmax;
    margin-top: -27vmax;
    margin-left: -27vmax;
    background: radial-gradient(circle at 50% 50%, var(--amb-b), transparent 68%);
    animation: aurora-b 29s ease-in-out infinite;
}

.section.active-section {
    display: block;
}

#blog.active-section,
#projects.active-section {
    animation: section-in 0.45s ease;
}

@keyframes section-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ===== 首页 Hero ===== */
.hero {
    position: relative;
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100svh - var(--nav-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 78px;
    text-align: center;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 极光背景：三团缓慢漂移的模糊色块 */
.hero-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.aurora-blob {
    position: absolute;
    width: 58vmax;
    height: 58vmax;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
}

.aurora-blob-a {
    top: -34%;
    left: -20%;
    background: radial-gradient(circle at 50% 50%, var(--aurora-1), transparent 68%);
    animation: aurora-a 22s ease-in-out infinite;
}

.aurora-blob-b {
    top: -26%;
    right: -24%;
    background: radial-gradient(circle at 50% 50%, var(--aurora-2), transparent 68%);
    animation: aurora-b 27s ease-in-out infinite;
}

.aurora-blob-c {
    bottom: -42%;
    left: 8%;
    background: radial-gradient(circle at 50% 50%, var(--aurora-3), transparent 68%);
    animation: aurora-c 31s ease-in-out infinite;
}

@keyframes aurora-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(9%, 7%, 0) scale(1.14); }
}

@keyframes aurora-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
    50% { transform: translate3d(-8%, 10%, 0) scale(0.94); }
}

@keyframes aurora-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(7%, -9%, 0) scale(1.16); }
}

/* 漂浮粒子：数量、位置、速度由脚本随机生成 */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    bottom: -8%;
    width: var(--dot-size, 3px);
    height: var(--dot-size, 3px);
    border-radius: 50%;
    background: var(--particle);
    box-shadow: 0 0 8px var(--particle-glow);
    opacity: 0;
    animation-name: particle-rise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes particle-rise {
    0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
    12% { opacity: 0.9; }
    80% { opacity: 0.5; }
    100% { transform: translate3d(var(--dot-drift, 0px), -108vh, 0) scale(1); opacity: 0; }
}

/* 数据胶囊 */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    list-style: none;
    font-size: 13px;
    color: var(--text-light);
    animation: hero-fade-up 0.8s 0.62s ease both;
}

.hero-stats li {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 980px;
    border: 1px solid var(--tab-border);
    background: var(--tab-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.stat-num {
    font-weight: 600;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

/* 滚动提示 */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--text-light);
    text-decoration: none;
    transform: translateX(-50%);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.scroll-hint.is-hidden {
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
}

.scroll-chev {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    animation: chev-bounce 2.1s ease-in-out infinite;
}

@keyframes chev-bounce {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.45; }
    50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

.hero .cube-logo {
    animation: hero-fade-up 0.8s ease both, cube-float 7s ease-in-out 0.8s infinite;
}

.hero-subtitle {
    animation: hero-fade-up 0.8s 0.42s ease both;
}

.hero-cta {
    animation: hero-fade-up 0.8s 0.52s ease both;
}

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cube-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* ===== 3D旋转Cube ===== */
.cube-logo {
    position: relative;
    width: 200px;
    height: 200px;
    perspective: 800px;
    margin-bottom: 40px;
}

.cube-glow {
    position: absolute;
    inset: 4%;
    background: radial-gradient(circle, var(--cube-glow), transparent 70%);
    filter: blur(30px);
    animation: glow-pulse 6s ease-in-out infinite;
}

/* 指针倾斜层：与自转动画分层，互不覆盖 */
.cube-tilt {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cube-logo.cube-pulse .cube-tilt {
    transform: scale(1.09);
}

.cube-3d {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: cube-spin 6s linear infinite;
}

/* 地面投影：让立方体看起来悬浮着 */
.cube-floor {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 148px;
    height: 24px;
    margin-left: -74px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--cube-glow), transparent 72%);
    filter: blur(9px);
    animation: floor-breathe 7s ease-in-out 0.8s infinite;
}

@keyframes floor-breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(0.86); opacity: 0.5; }
}

@keyframes cube-spin {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.75;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.cube-face {
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    left: 50%;
    top: 50%;
    margin-left: calc(var(--cube-size) / -2);
    margin-top: calc(var(--cube-size) / -2);
    border: 1.5px solid var(--cube-edge);
    border-radius: 10px;
    background-image: var(--cube-face-front);
    box-shadow: var(--cube-inner-glow), var(--cube-halo);
}

.cube-face.front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.cube-face.back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

/* 各面用不同明度，玻璃也有受光层次 */
.cube-face.top    { background-image: var(--cube-face-top); }
.cube-face.right,
.cube-face.back   { background-image: var(--cube-face-right); }
.cube-face.left,
.cube-face.bottom { background-image: var(--cube-face-left); }

/* ===== 标题：流光渐变 =====
   注意：不要在标题里用「逐字 transform 动画」——子元素被提升为独立图层后，
   background-clip: text 裁不到字形，配合透明填充会让标题整个消失。 */
.hero-title {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg,
        var(--hero-from) 0%,
        var(--hero-to) 36%,
        var(--hero-shine) 50%,
        var(--hero-to) 64%,
        var(--hero-from) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hero-fade-up 0.8s 0.18s ease both, title-sheen 9s ease-in-out 1.2s infinite;
}

@keyframes title-sheen {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-subtitle {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-light);
    letter-spacing: 0.12em;
}

/* 不支持 background-clip:text 的浏览器上标题会变成"透明文字"而看不见，这里退回纯色 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--hero-to);
    }
}

.hero-cta {
    margin-top: 38px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-btn {
    padding: 12px 26px;
    border-radius: 980px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    background: var(--primary);
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.cta-btn-secondary {
    background: var(--tab-bg);
    color: var(--text-dark);
    border: 1px solid var(--tab-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== 日志/项目板块 ===== */
.section-content {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
    padding: 60px 22px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

/* 玻璃图标块 + 标题 + 英文小字（章节标题方案 C） */
.title-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 1;
    color: var(--title-ink, var(--primary));
    border-radius: 13px;
    border: 1px solid var(--card-border);
    background: radial-gradient(circle at 32% 26%, var(--title-accent, var(--primary-soft)), transparent 74%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.title-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.title-text {
    font-size: 25px;
    line-height: 1.15;
}

.title-kicker {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* ===== 手绘矢量图标（替代 emoji，颜色跟随主题）===== */
.ico {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.title-icon .ico {
    width: 22px;
    height: 22px;
}

.project-icon .ico {
    width: 26px;
    height: 26px;
}

.icon-btn .ico {
    width: 19px;
    height: 19px;
}

.chip-ico {
    width: 15px;
    height: 15px;
    color: var(--primary);
    stroke-width: 1.9;
}


/* ===== 日志分类标签 ===== */
.blog-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.blog-tab {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    background: var(--tab-bg);
    border: 1px solid var(--tab-border);
    border-radius: 980px;
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.blog-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ===== 日志面板 ===== */
.blog-panel {
    display: none;
}

.blog-panel.active {
    display: block;
}

/* ===== 毛玻璃日志卡片 ===== */
.blog-card {
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--card-shadow-inset), var(--card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.blog-date {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.blog-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.blog-content {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
}

/* ===== 项目卡片 ===== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}

.project-card {
    --card-accent: var(--primary-soft);
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: var(--card-shadow-inset), var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* 每张卡片一个色调，图标做成玻璃小方块 */
.project-card:nth-child(1) { --card-accent: rgba(10, 132, 255, 0.30); --card-ink: var(--ink-blue); }
.project-card:nth-child(2) { --card-accent: rgba(90, 200, 250, 0.28); --card-ink: var(--ink-cyan); }
.project-card:nth-child(3) { --card-accent: rgba(120, 92, 255, 0.26); --card-ink: var(--ink-violet); }
.project-card:nth-child(4) { --card-accent: rgba(48, 209, 88, 0.22); --card-ink: var(--ink-green); }

.project-card-soon {
    border: 1px dashed var(--card-border);
}

.project-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    color: var(--card-ink, var(--primary));
    border-radius: 16px;
    border: 1px solid var(--card-border);
    background: radial-gradient(circle at 32% 26%, var(--card-accent), transparent 74%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.project-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.project-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    flex: 1;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 980px;
    background: var(--primary-soft);
    color: var(--primary);
}

.project-link {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}

/* ===== 页脚 ===== */
.footer {
    border-top: 1px solid var(--footer-border);
    padding: 26px 22px 34px;
    text-align: center;
}

.footer-inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-light);
}

/* 备案位：虚线胶囊是"待填写"的占位样式，填入真实号码后可直接留用 */
.footer-record {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-light);
}

.record-slot {
    padding: 4px 12px;
    border-radius: 980px;
    border: 1px dashed var(--tab-border);
    background: var(--tab-bg);
}

/* ===== 滚动渐显 =====
   只在脚本正常运行时才把卡片隐藏起来（html.has-js），
   脚本加载失败或报错时内容依旧可见 */
.has-js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.has-js .reveal.visible {
    opacity: 1;
    transform: none;
}

/* 卡片逐张入场 */
.has-js .blog-card:nth-child(2),
.has-js .project-card:nth-child(2) {
    transition-delay: 0.07s;
}

.has-js .blog-card:nth-child(3),
.has-js .project-card:nth-child(3) {
    transition-delay: 0.14s;
}

.has-js .blog-card:nth-child(4),
.has-js .project-card:nth-child(4) {
    transition-delay: 0.21s;
}

/* ===== 悬停效果（仅限真正支持悬停的设备，避免触屏"粘住"）===== */
@media (hover: hover) and (pointer: fine) {
    .nav-logo:hover {
        opacity: 0.7;
    }

    .nav-link:hover {
        opacity: 1;
    }

    .icon-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .cta-btn:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px var(--primary-soft);
    }

    .cta-btn-secondary:hover {
        background: var(--card-bg);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .blog-tab:hover {
        background: var(--card-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .blog-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--card-shadow-inset), var(--card-shadow-hover);
    }

    .project-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--card-shadow-inset), var(--card-shadow-hover);
    }

    .project-link:hover {
        text-decoration: underline;
    }
}

/* ===== 触屏按下反馈（替代被移除的系统蓝色高亮块）===== */
.blog-tab:active,
.cta-btn:active,
.icon-btn:active {
    transform: scale(0.95);
    transition-duration: 0.06s;
}

.nav-link:active,
.nav-logo:active,
.project-link:active {
    opacity: 0.6;
    transition-duration: 0.06s;
}

/* ===== 不支持 backdrop-filter 时的不透明回退 ===== */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .navbar,
    .nav-links {
        background: rgba(255, 255, 255, 0.96);
    }

    [data-theme="dark"] .navbar,
    [data-theme="dark"] .nav-links {
        background: rgba(24, 24, 27, 0.97);
    }

    .blog-card,
    .project-card {
        background: #fff;
    }

    [data-theme="dark"] .blog-card,
    [data-theme="dark"] .project-card {
        background: #1c1c1e;
    }
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    :root {
        /* 移动端导航略高一点，给 44px 触控热区留空间 */
        --nav-height: 52px;
        /* 手机浏览器毛玻璃常不生效，导航栏提高不透明度，避免正文透出来与导航栏"重叠" */
        --nav-bg: rgba(255, 255, 255, 0.95);
    }

    /* 手机端不提供手动切换：主题完全跟随手机系统的深色/浅色 */
    #theme-toggle {
        display: none;
    }

    [data-theme="dark"] {
        --nav-bg: rgba(24, 24, 27, 0.96);
    }

    .icon-btn {
        width: 44px;
        height: 44px;
    }

    /* 手机上色块调小、模糊减轻，降低 GPU 压力 */
    .aurora-blob {
        width: 88vw;
        height: 88vw;
        filter: blur(46px);
    }

    /* 手机：切换板块只做淡入，不做位移 */
    @keyframes section-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .section.active-section {
        animation-duration: 220ms;
    }

    /* 手机：尺寸收小、动画关闭。之前抖动就是大模糊元素做 transform 动画掉帧导致的 */
    .amb-blob {
        filter: blur(38px);
        animation: none !important;
        will-change: auto;
    }

    .amb-blob-a {
        top: 8%;
        left: 50%;
        width: 170vw;
        height: 92vw;
        margin-top: -46vw;
        margin-left: -85vw;
    }

    .amb-blob-b {
        top: 94%;
        left: 84%;
        width: 96vw;
        height: 96vw;
        margin-top: -48vw;
        margin-left: -48vw;
    }

    .hero-stats {
        margin-top: 22px;
        font-size: 12px;
    }

    .scroll-hint {
        bottom: 12px;
        font-size: 11px;
    }

    .hero-title {
        font-size: 44px;
    }

    .hero-subtitle {
        font-size: 17px;
    }

    .menu-toggle {
        display: flex;
    }

    /* 移动端下拉菜单（navbar 的 backdrop-filter 使其成为定位基准，top 正好贴住导航栏底部） */
    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 22px 16px;
        background: var(--menu-bg);
        backdrop-filter: saturate(180%) blur(30px);
        -webkit-backdrop-filter: saturate(180%) blur(30px);
        border-bottom: 1px solid var(--nav-border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.4s ease;
    }

    .nav-links.open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-link {
        padding: 14px 0;
        font-size: 16px;
    }

    /* 下拉菜单里链接是整行宽，下划线要收成短标签，否则看着像一条分割线 */
    .nav-link.active::after {
        bottom: 6px;
        right: auto;
        width: 22px;
    }

    .blog-tabs {
        flex-wrap: wrap;
    }

    .section-content {
        padding: 48px 20px;
    }

    .footer-inner {
        flex-direction: column;
    }
}

/* ===== 小屏手机 ===== */
@media (max-width: 480px) {
    :root {
        --cube-size: 76px;
    }

    .cube-logo {
        width: 156px;
        height: 156px;
        margin-bottom: 28px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-subtitle {
        font-size: 15px;
        letter-spacing: 0.08em;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 300px;
        gap: 10px;
    }

    .cta-btn {
        text-align: center;
        padding: 15px 26px;
    }

    .nav-container {
        padding: 0 16px;
    }

    .nav-links {
        padding: 8px 16px 14px;
    }

    .section-content {
        padding: 38px 16px;
    }

    .section-title {
        gap: 10px;
        margin-bottom: 22px;
    }

    .title-icon {
        width: 38px;
        height: 38px;
        font-size: 19px;
        border-radius: 11px;
    }

    .title-icon .ico {
        width: 20px;
        height: 20px;
    }

    .title-text {
        font-size: 22px;
    }

    .blog-tabs {
        gap: 8px;
        margin-bottom: 22px;
    }

    .blog-tab {
        padding: 7px 14px;
        font-size: 13px;
    }

    .blog-card {
        padding: 20px;
    }

    .project-card {
        padding: 22px 20px;
    }

    .footer-inner {
        font-size: 12px;
    }
}

/* ===== 减弱动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .section.active-section,
    .cube-3d,
    .cube-glow,
    .cube-floor,
    .aurora-blob,
    .amb-blob,
    .particle,
    .scroll-chev,
    .hero .cube-logo,
    .hero-title,
    .hero-subtitle,
    .hero-cta,
    .hero-stats,
    .section.active-section {
        animation: none;
    }

    .reveal,
    .has-js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    body,
    .navbar,
    .nav-links,
    .skip-link {
        transition: none;
    }
}

/* ===== 打印 ===== */
        /* ===== 关于 ===== */
        .about-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
            gap: 48px;
            align-items: start;          /* 三块顶对齐 */
            margin-top: 4px;
        }

        .about-main {
            display: flex;
            align-items: center;
        }

        .about-lead {
            margin: 0 0 18px;
            font-size: 34px;
            line-height: 1.2;
            font-weight: 600;
            letter-spacing: -0.015em;
            color: var(--text-dark);
        }

        .about-text {
            margin: 0 0 14px;
            max-width: 64ch;
            font-size: 15px;
            line-height: 1.85;
            color: var(--text-light);
        }

        .about-sub {
            margin: 0 0 14px;
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--text-light);
        }

        .about-side { padding-top: 0; }   /* 与技能块顶对齐，勿加内边距 */

        .about-side .project-tags { margin-bottom: 38px; }

        .about-contact {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            grid-auto-rows: 32px;        /* 与技能块同高 */
            gap: 12px 16px;              /* 与技能块同行距 */
            align-content: start;
            margin: 0;
        }

        .about-skills-block .about-sub,
        .about-contact dt,
        .about-contact dd {
            display: flex;
            align-items: center;
            margin: 0;
        }

        .about-contact dt {
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
            font-size: 11.5px;
            letter-spacing: 0.06em;
            color: var(--text-light);
        }

        .about-contact dd {
            margin: 0;
            font-size: 14px;
            color: var(--text-dark);
            word-break: break-all;
        }

        .about-contact a {
            color: var(--primary);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s ease;
        }

        .about-contact a:hover { border-bottom-color: var(--primary); }

        .about-todo {
            padding: 1px 7px;
            border: 1px dashed var(--tab-border);
            font-size: 13px;
            color: var(--text-light);
        }

        .about-intro {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .about-avatar {
            flex: none;
            width: 108px;
            height: 108px;
            border-radius: 50%;
            border: 1px solid var(--tab-border);
            object-fit: cover;
            background: #fff;
        }

        /* 技能块与联系块：行高 + 行距完全相同 → 逐行对齐 */
        .about-skills-block {
            display: grid;
            grid-auto-rows: 32px;
            gap: 12px;
            align-content: start;
        }

        .about-skills-block .project-tags { display: contents; }

        .about-skills-block .tag {
            align-self: stretch;         /* 填满整行 → 与联系块逐像素对齐 */
            justify-self: start;
            display: inline-flex;
            align-items: center;
            padding: 0;                  /* 去掉外框：与联系方式同款纯文字 */
            border: 0;
            border-radius: 0;
            background: none;
            font-family: inherit;
            font-size: 14px;
            letter-spacing: 0;
            color: var(--text-dark);
        }

        .about-main .project-tags { margin-bottom: 0; }

        .about-awards-title { margin-top: 56px; }

        .awards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
            gap: 34px;
        }

        .award { margin: 0; }

        .award img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 900 / 1260;      /* 三张证书统一高度，说明文字自然对齐 */
            object-fit: contain;           /* 完整显示，绝不裁切 */
            object-position: top center;
            border: 1px solid var(--tab-border);
        }

        .award figcaption {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 15px;
        }

        .award-year {
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
            font-size: 11.5px;
            color: var(--text-light);
        }

        .award-name {
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--text-dark);
        }

        .award-org {
            font-size: 13px;
            line-height: 1.65;
            color: var(--text-light);
        }

        .about-note {
            margin: 24px 0 0;
            font-size: 12px;
            color: var(--text-light);
        }

        @media (max-width: 768px) {
            /* 手机也两列：头像+名字占满一行，技能与联系并排（联系栏略宽，避免邮箱折行） */
            .about-grid {
                grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
                gap: 26px 16px;
            }
            .about-main { grid-column: 1 / -1; }
            .about-lead { font-size: 27px; }
            .about-side { padding-top: 0; }
            .about-skills-block,
            .about-contact {
                grid-auto-rows: minmax(32px, auto);   /* 内容换行时自动长高，不裁剪 */
                gap: 10px;
            }
            .about-contact { gap: 10px 7px; }
            .about-contact dt { font-size: 11px; }
            .about-contact dd { font-size: 12px; }
            .about-skills-block .tag { font-size: 12px; }
            .about-awards-title { margin-top: 38px; }
            .awards { grid-template-columns: 1fr; gap: 28px; }
        }

@media print {
    body {
        background: #fff;
        color: #000;
    }

    body::before,
    .navbar,
    .footer,
    .skip-link,
    .hero-cta,
    .blog-tabs {
        display: none !important;
    }

    /* 打印时三个板块与全部分类都平铺输出 */
    .section,
    .blog-panel {
        display: block !important;
        min-height: 0;
        padding-top: 0;
    }

    .section.active-section {
        animation: none;
    }

    .section-content {
        max-width: none;
        padding: 0 0 14px;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .blog-card,
    .project-card {
        background: #fff;
        border: 1px solid #ddd;
        box-shadow: none;
        break-inside: avoid;
    }

    .hero {
        min-height: 0;
        padding: 0 0 14px;
    }

    .cube-logo {
        display: none;
    }
}

/* ============================================================
   首页首屏 · 流体渐变（hero2）
   设计要点：左对齐编辑式排版（不再居中）、四团缓慢变形融合的色块、
   胶片颗粒去掉塑料感、底部跑马灯填补下缘
   ============================================================ */
.hero2 {
    position: relative;
    min-height: calc(100svh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 0 96px;
    overflow: hidden;
    isolation: isolate;
}

/* --- 流体渐变场 --- */
.hero2-fluid {
    position: absolute;
    inset: -16% -10% -8%;
    z-index: -2;
    filter: blur(68px) saturate(172%);
    opacity: 1;
}

.fluid {
    position: absolute;
    display: block;
    border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
    mix-blend-mode: multiply;
    will-change: transform, border-radius;
}

.fluid-1 {
    width: 54vmax;
    height: 54vmax;
    top: -18%;
    left: 4%;
    background: radial-gradient(circle at 42% 42%, #3f7bff, transparent 68%);
    animation: fluid-a 28s ease-in-out infinite;
}

.fluid-2 {
    width: 46vmax;
    height: 46vmax;
    top: 4%;
    right: -8%;
    background: radial-gradient(circle at 50% 46%, #12c2c8, transparent 68%);
    animation: fluid-b 33s ease-in-out infinite;
}

.fluid-3 {
    width: 42vmax;
    height: 42vmax;
    bottom: -22%;
    left: 18%;
    background: radial-gradient(circle at 46% 54%, #ffb340, transparent 70%);
    animation: fluid-c 39s ease-in-out infinite;
}

.fluid-4 {
    width: 40vmax;
    height: 40vmax;
    top: 30%;
    left: 48%;
    background: radial-gradient(circle at 50% 50%, #8a5cff, transparent 70%);
    animation: fluid-d 31s ease-in-out infinite;
}

@keyframes fluid-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; }
    33% { transform: translate3d(7%, 5%, 0) scale(1.14); border-radius: 60% 40% 44% 56% / 44% 58% 42% 56%; }
    66% { transform: translate3d(-5%, 7%, 0) scale(0.94); border-radius: 42% 58% 54% 46% / 58% 46% 54% 42%; }
}

@keyframes fluid-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 52% 48% 42% 58% / 46% 56% 44% 54%; }
    40% { transform: translate3d(-8%, 8%, 0) scale(1.1); border-radius: 44% 56% 58% 42% / 58% 42% 56% 44%; }
    70% { transform: translate3d(4%, -6%, 0) scale(0.96); border-radius: 56% 44% 48% 52% / 42% 58% 46% 54%; }
}

@keyframes fluid-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 44% 56% 52% 48% / 54% 46% 58% 42%; }
    45% { transform: translate3d(9%, -7%, 0) scale(1.16); border-radius: 58% 42% 46% 54% / 44% 56% 42% 58%; }
}

@keyframes fluid-d {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 50% 50% 46% 54% / 52% 48% 56% 44%; }
    50% { transform: translate3d(-7%, -9%, 0) scale(1.08); border-radius: 42% 58% 56% 44% / 58% 42% 52% 48%; }
}

/* 左侧压一层底色：保证文字可读，同时形成"左内容 / 右视觉"的不对称层次 */
.hero2-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(96deg,
        rgba(255, 255, 255, 0.90) 0%,
        rgba(255, 255, 255, 0.70) 30%,
        rgba(255, 255, 255, 0.16) 58%,
        rgba(255, 255, 255, 0) 78%);
}

[data-theme="dark"] .hero2-scrim {
    background: linear-gradient(96deg,
        rgba(13, 13, 15, 0.92) 0%,
        rgba(13, 13, 15, 0.74) 30%,
        rgba(13, 13, 15, 0.20) 58%,
        rgba(13, 13, 15, 0) 78%);
}

/* 胶片颗粒：抹掉"塑料渐变"感的关键一层 */
.hero2-grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.20;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* --- 内容 --- */
.hero2-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

.hero2-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-light);
}

.hero2-eyebrow i {
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.hero2-title {
    margin: 0 0 20px;
    font-size: 76px;
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-dark);
}

.hero2-title span {
    display: block;
}

/* 第三个词弱化，制造视觉层次 */
.hero2-title span:nth-child(3) {
    color: var(--text-light);
}

.hero2-latest {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 30px;
    padding-left: 12px;
    border-left: 2px solid var(--primary);
    font-size: 14px;
    color: var(--text-light);
}

.hero2-latest b {
    color: var(--text-dark);
    font-weight: 600;
}

.hero2-latest em {
    font-style: normal;
    font-size: 12px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.hero2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 26px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-solid {
    background: var(--text-dark);
    color: var(--bg);
}

.btn-line {
    border: 1px solid var(--tab-border);
    color: var(--text-dark);
}

.hero2-stats {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--tab-border);
    max-width: 560px;
}

.hero2-stats > div {
    padding-right: 30px;
    margin-right: 30px;
    border-right: 1px solid var(--tab-border);
}

.hero2-stats > div:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
}

.hero2-stats dt {
    margin-bottom: 3px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.hero2-stats dd {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

/* --- 底部跑马灯 --- */
.hero2-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    padding: 11px 0;
    border-top: 1px solid var(--tab-border);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee-track span {
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-light);
}

@keyframes marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (hover: hover) and (pointer: fine) {
    .btn-solid:hover {
        transform: translateY(-2px);
    }

    .btn-line:hover {
        border-color: var(--text-dark);
    }
}

/* --- 深色：色块改用 screen 混合，像发光的液体 --- */
[data-theme="dark"] .hero2-fluid {
    opacity: 0.80;
    filter: blur(74px) saturate(150%);
}

[data-theme="dark"] .fluid {
    mix-blend-mode: screen;
}

[data-theme="dark"] .hero2-grain {
    opacity: 0.16;
}

/* --- 响应式 --- */
@media (max-width: 768px) {
    .hero2 {
        padding: 56px 0 88px;
    }

    .hero2-inner {
        padding: 0 22px;
    }

    .hero2-title {
        font-size: 52px;
    }

    .hero2-fluid {
        inset: -6% -18% -2%;
        filter: blur(48px) saturate(180%);
    }

    /* 手机：关掉流体色块的动画 —— 大尺寸模糊层每帧重算 transform + border-radius 会掉帧（表现为"抽搐"） */
    .fluid-1,
    .fluid-2,
    .fluid-3,
    .fluid-4 {
        animation: none !important;
    }

    /* 手机上重新布点：让色块铺满下半屏，避免"大白底 + 一点淡紫" */
    .fluid-1 {
        width: 112vw;
        height: 112vw;
        top: -6%;
        left: -22%;
    }

    .fluid-2 {
        width: 96vw;
        height: 96vw;
        top: 20%;
        right: -28%;
    }

    .fluid-3 {
        width: 124vw;
        height: 124vw;
        bottom: -10%;
        left: -12%;
    }

    .fluid-4 {
        width: 100vw;
        height: 100vw;
        top: 44%;
        left: 16%;
    }

    /* 手机上文字在上、色块在下，压色改为竖直方向且更薄 */
    .hero2-scrim {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.62) 38%,
            rgba(255, 255, 255, 0.14) 70%,
            rgba(255, 255, 255, 0) 100%);
    }

    [data-theme="dark"] .hero2-scrim {
        background: linear-gradient(180deg,
            rgba(13, 13, 15, 0.92) 0%,
            rgba(13, 13, 15, 0.70) 38%,
            rgba(13, 13, 15, 0.22) 70%,
            rgba(13, 13, 15, 0) 100%);
    }
}

@media (max-width: 480px) {
    .hero2 {
        padding: 44px 0 80px;
    }

    .hero2-title {
        font-size: 40px;
        letter-spacing: -0.03em;
    }

    .hero2-latest {
        font-size: 13px;
        margin-bottom: 26px;
    }

    .hero2-actions {
        gap: 10px;
        margin-bottom: 32px;
    }

    .btn {
        flex: 1 1 auto;
        height: 48px;
    }

    .hero2-stats > div {
        padding-right: 20px;
        margin-right: 20px;
    }

    .hero2-stats dd {
        font-size: 15px;
    }

    .marquee-track span {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fluid,
    .marquee-track {
        animation: none !important;
    }
}

/* ============================================================
   全站统一：编辑式风格（与新版首页同一套语言）
   原则：细线代替玻璃、直角代替大圆角、等宽小字做元信息、去掉悬浮位移
   ============================================================ */
.section-content {
    max-width: 1100px;
    padding: 76px 32px 96px;
}

/* --- 章节标题：图标块改成方形细边，标题放大 --- */
.section-title {
    gap: 14px;
    margin-bottom: 34px;
}

.title-icon {
    width: 46px;
    height: 46px;
    font-size: 22px;
    border-radius: 4px;
    border-color: var(--tab-border);
    box-shadow: none;
}

.title-text {
    font-size: 38px;
    letter-spacing: -0.035em;
}

.title-kicker {
    font-size: 10px;
    letter-spacing: 0.24em;
}

/* --- 分类切换：药丸按钮 → 下划线分段控件 --- */
.blog-tabs {
    gap: 0;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--tab-border);
}

.blog-tab {
    padding: 10px 0;
    margin-right: 30px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.blog-tab.active {
    background: none;
    color: var(--text-dark);
    box-shadow: inset 0 -2px 0 0 var(--primary);
}

/* --- 日志卡片：从玻璃块变成细线分隔的条目 --- */
.blog-card {
    padding: 22px 0;
    margin-bottom: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tab-border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.blog-card:last-child {
    border-bottom: 1px solid var(--tab-border);
}

.blog-date {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
}

.blog-title {
    margin: 7px 0 7px;
    font-size: 17px;
    letter-spacing: -0.01em;
}

/* --- 项目卡片：同样改成细线分隔 --- */
.projects-grid {
    gap: 0;
    border-top: 1px solid var(--tab-border);
}

.project-card {
    padding: 26px 26px 26px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tab-border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.project-card-soon {
    border-bottom-style: dashed;
}

.project-icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    box-shadow: none;
}

.project-title {
    font-size: 18px;
}

.project-desc {
    font-size: 14px;
    max-width: 46ch;
}

/* 项目卡底部动作行：两个入口并排 */
.project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 6px;
}

/* --- 标签：药丸 → 细边框小方签 --- */
.tag {
    padding: 3px 9px;
    border: 1px solid var(--tab-border);
    border-radius: 2px;
    background: none;
    color: var(--text-light);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
}

/* --- 页脚与备案位 --- */
.record-slot {
    border-radius: 2px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
}

/* --- 去掉卡片悬浮位移，只留描边变化 --- */
@media (hover: hover) and (pointer: fine) {
    .blog-card:hover,
    .project-card:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--tab-border);
    }

    .blog-card:hover .blog-title,
    .project-card:hover .project-title {
        color: var(--primary);
    }

    .blog-tab:hover {
        background: none;
        box-shadow: none;
        color: var(--text-dark);
    }
}

@media (max-width: 768px) {
    .section-content {
        padding: 56px 22px 72px;
    }

    .title-icon {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .title-text {
        font-size: 29px;
    }

    .blog-tab {
        margin-right: 22px;
    }
}