/* ============================================
           CSS RESET - 确保跨浏览器一致性
           ============================================ */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
            text-rendering: optimizeLegibility;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        body {
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.8;
            font-family: var(--font-chinese);
            font-weight: 400;
            letter-spacing: 0.02em;
        }

        img, picture, video, canvas, svg {
            display: block;
            max-width: 100%;
        }

        input, button, textarea, select {
            font: inherit;
        }

        p, h1, h2, h3, h4, h5, h6 {
            overflow-wrap: break-word;
        }

        #root, #__next {
            isolation: isolate;
        }

        /* ============================================
           DESIGN SYSTEM - 设计令牌
           ============================================ */
        :root {
            /* 主色调 - 温暖浪漫系 */
            --color-primary-50: #fdf2f8;
            --color-primary-100: #fce7f3;
            --color-primary-200: #fbcfe8;
            --color-primary-300: #f9a8d4;
            --color-primary-400: #f472b6;
            --color-primary-500: #ec4899;
            --color-primary-600: #db2777;
            --color-primary-700: #be185d;
            --color-primary-800: #9d174d;
            --color-primary-900: #831843;

            /* 辅助色 - 紫罗兰系 */
            --color-secondary-50: #f5f3ff;
            --color-secondary-100: #ede9fe;
            --color-secondary-200: #ddd6fe;
            --color-secondary-300: #c4b5fd;
            --color-secondary-400: #a78bfa;
            --color-secondary-500: #8b5cf6;
            --color-secondary-600: #7c3aed;
            --color-secondary-700: #6d28d9;
            --color-secondary-800: #5b21b6;
            --color-secondary-900: #4c1d95;

            /* 中性色 */
            --color-neutral-0: #ffffff;
            --color-neutral-50: #fafafa;
            --color-neutral-100: #f5f5f5;
            --color-neutral-200: #e5e5e5;
            --color-neutral-300: #d4d4d4;
            --color-neutral-400: #a3a3a3;
            --color-neutral-500: #737373;
            --color-neutral-600: #525252;
            --color-neutral-700: #404040;
            --color-neutral-800: #262626;
            --color-neutral-900: #171717;

            /* 语义化颜色 */
            --color-bg-primary: var(--color-neutral-50);
            --color-bg-secondary: var(--color-neutral-0);
            --color-bg-tertiary: var(--color-primary-50);
            --color-text-primary: var(--color-neutral-900);
            --color-text-secondary: var(--color-neutral-600);
            --color-text-tertiary: var(--color-neutral-400);
            --color-border: var(--color-neutral-200);

            /* 渐变 */
            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            --gradient-warm: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --gradient-cool: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            --gradient-romantic: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            --gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);

            /* 阴影系统 */
            --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            --shadow-glow: 0 0 40px rgba(236, 72, 153, 0.3);
            --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

            /* 圆角 */
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --radius-2xl: 32px;
            --radius-full: 9999px;

            /* 间距系统 - 8px基准 */
            --space-1: 0.25rem;   /* 4px */
            --space-2: 0.5rem;    /* 8px */
            --space-3: 0.75rem;   /* 12px */
            --space-4: 1rem;      /* 16px */
            --space-5: 1.25rem;   /* 20px */
            --space-6: 1.5rem;    /* 24px */
            --space-8: 2rem;      /* 32px */
            --space-10: 2.5rem;   /* 40px */
            --space-12: 3rem;     /* 48px */
            --space-16: 4rem;     /* 64px */
            --space-20: 5rem;     /* 80px */
            --space-24: 6rem;     /* 96px */

            /* 字体：霞鹜文楷承载纪念册叙事，Inter负责日期与数字信息 */
            --anniversary-font-story: "LXGW WenKai Screen", "STKaiti", "KaiTi", "PingFang SC", sans-serif;
            --anniversary-font-data: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
            --font-chinese: var(--anniversary-font-story);
            --font-display: var(--anniversary-font-story);
            --font-en: var(--anniversary-font-data);

            /* 字体大小 - 使用rem确保可访问性 */
            --text-xs: 0.75rem;    /* 12px */
            --text-sm: 0.875rem;   /* 14px */
            --text-base: 1rem;     /* 16px */
            --text-lg: 1.125rem;   /* 18px */
            --text-xl: 1.25rem;    /* 20px */
            --text-2xl: 1.5rem;    /* 24px */
            --text-3xl: 1.875rem;  /* 30px */
            --text-4xl: 2.25rem;   /* 36px */
            --text-5xl: 3rem;      /* 48px */
            --text-6xl: 3.75rem;   /* 60px */

            /* 行高 */
            --leading-tight: 1.25;
            --leading-snug: 1.375;
            --leading-normal: 1.5;
            --leading-relaxed: 1.625;
            --leading-loose: 2;

            /* 字重 */
            --font-light: 300;
            --font-normal: 400;
            --font-medium: 500;
            --font-semibold: 600;
            --font-bold: 700;

            /* 过渡 */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

            /* Z-index层级 */
            --z-base: 0;
            --z-dropdown: 100;
            --z-sticky: 200;
            --z-fixed: 300;
            --z-modal: 400;
            --z-tooltip: 500;
        }

        /* ============================================
           BASE STYLES - 基础样式
           ============================================ */
        body {
            font-family: var(--font-chinese);
            font-size: var(--text-base);
            line-height: var(--leading-relaxed);
            color: var(--color-text-primary);
            background-color: var(--color-bg-primary);
        }

        /* 字体优化 - 提升可读性 */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            font-weight: 600;
            letter-spacing: 0.03em;
            line-height: 1.4;
        }

        p {
            line-height: 1.9;
            letter-spacing: 0.01em;
        }

        /* /anniversary 独立字体层级，不继承博客页的标题字设置 */
        html body.anniversary-page,
        html body.anniversary-page p,
        html body.anniversary-page .hero-subtitle,
        html body.anniversary-page .timeline-desc,
        html body.anniversary-page .milestone-desc,
        html body.anniversary-page .footer-quote {
            font-family: var(--anniversary-font-story) !important;
        }

        html body.anniversary-page h1,
        html body.anniversary-page h2,
        html body.anniversary-page h3,
        html body.anniversary-page .hero-title,
        html body.anniversary-page .section-title,
        html body.anniversary-page .timeline-title,
        html body.anniversary-page .milestone-title,
        html body.anniversary-page .navbar-brand {
            font-family: var(--anniversary-font-story) !important;
            font-weight: 400;
            letter-spacing: 0.045em;
        }

        html body.anniversary-page .hero-title-line1 {
            letter-spacing: 0.08em;
        }

        html body.anniversary-page .hero-title-line2 {
            letter-spacing: 0.045em;
        }

        html body.anniversary-page .navbar-menu,
        html body.anniversary-page .hero-badge,
        html body.anniversary-page .stat-value,
        html body.anniversary-page .stat-label,
        html body.anniversary-page .section-label,
        html body.anniversary-page .timeline-year,
        html body.anniversary-page .timeline-date,
        html body.anniversary-page .view-count-number,
        html body.anniversary-page .footer-view-count,
        html body.anniversary-page .footer-copyright {
            font-family: var(--anniversary-font-data) !important;
            font-variant-numeric: tabular-nums;
        }

        /* 英文和数字使用 Quicksand 字体 */
        .stat-value, .milestone-title, .view-count-number {
            font-family: var(--font-en);
            font-weight: 600;
        }

        /* ============================================
           背景动画系统 - 修复层级和性能
           ============================================ */
        .ambient-bg {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
            will-change: transform;
        }

        .ambient-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.5;
            will-change: transform;
            animation: blob-float 25s infinite ease-in-out;
        }

        .ambient-blob-1 {
            width: 700px;
            height: 700px;
            background: var(--gradient-warm);
            top: -300px;
            right: -200px;
            animation-delay: 0s;
        }

        .ambient-blob-2 {
            width: 600px;
            height: 600px;
            background: var(--gradient-cool);
            bottom: -200px;
            left: -200px;
            animation-delay: -8s;
        }

        .ambient-blob-3 {
            width: 500px;
            height: 500px;
            background: var(--gradient-romantic);
            top: 40%;
            left: 60%;
            animation-delay: -16s;
        }

        @keyframes blob-float {
            0%, 100% {
                transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
            }
            33% {
                transform: translate3d(40px, -40px, 0) scale(1.1) rotate(120deg);
            }
            66% {
                transform: translate3d(-30px, 30px, 0) scale(0.9) rotate(240deg);
            }
        }

        /* 粒子效果 - 优化性能 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: var(--color-primary-300);
            border-radius: 50%;
            opacity: 0.6;
            will-change: transform, opacity;
            animation: particle-rise 15s infinite linear;
        }

        @keyframes particle-rise {
            0% {
                transform: translate3d(0, 100vh, 0) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
            }
            90% {
                opacity: 0.6;
            }
            100% {
                transform: translate3d(0, -100vh, 0) scale(1);
                opacity: 0;
            }
        }

        /* ============================================
           布局容器 - 修复盒模型
           ============================================ */
        .app-container {
            width: 100%;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding-left: var(--space-6);
            padding-right: var(--space-6);
            position: relative;
            z-index: 1;
        }

        @media (min-width: 768px) {
            .app-container {
                padding-left: var(--space-10);
                padding-right: var(--space-10);
            }
        }

        @media (min-width: 1200px) {
            .app-container {
                padding-left: var(--space-16);
                padding-right: var(--space-16);
            }
        }

        /* ============================================
           导航栏 - 修复定位和层级
           ============================================ */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: var(--z-fixed);
            padding-top: var(--space-4);
            padding-bottom: var(--space-4);
            background-color: rgba(250, 250, 250, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: background-color var(--transition-base), box-shadow var(--transition-base);
        }

        .navbar-content {
            width: 100%;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding-left: var(--space-6);
            padding-right: var(--space-6);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-brand {
            font-family: var(--font-display);
            font-size: var(--text-xl);
            font-weight: var(--font-semibold);
            color: var(--color-primary-600);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            transition: color var(--transition-fast);
        }

        @media (hover: hover) and (pointer: fine) {


        .navbar-brand:hover {
            color: var(--color-primary-700);
        }


        }

        .navbar-brand-icon {
            font-size: 1.5rem;
            line-height: 1;
        }

        .navbar-menu {
            display: none;
            gap: var(--space-6);
            align-items: center;
        }

        @media (min-width: 768px) {
            .navbar-menu {
                display: flex;
            }
        }

        .navbar-link {
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
            text-decoration: none;
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            transition: color var(--transition-fast), background-color var(--transition-fast);
        }

        @media (hover: hover) and (pointer: fine) {


        .navbar-link:hover {
            color: var(--color-primary-600);
            background-color: var(--color-primary-50);
        }


        }

        /* ============================================
           Hero 区域 - 修复布局和间距
           ============================================ */
        .hero {
            min-height: 100vh;
            min-height: 100dvh; /* 支持动态视口高度 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding-top: calc(var(--space-24) + 60px); /* 为导航栏留出空间 */
            padding-bottom: var(--space-24);
            padding-left: var(--space-6);
            padding-right: var(--space-6);
            position: relative;
        }

        @media (max-width: 767px) {
            .hero {
                padding-top: calc(var(--space-16) + 60px);
                padding-bottom: var(--space-16);
            }
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background-color: var(--color-primary-50);
            border: 1px solid var(--color-primary-200);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            color: var(--color-primary-700);
            margin-bottom: var(--space-6);
            opacity: 0;
            animation: fade-in-up 0.8s ease-out forwards;
        }

        .hero-badge-dot {
            width: 8px;
            height: 8px;
            background-color: var(--color-primary-500);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 8vw, 3.75rem);
            font-weight: var(--font-semibold);
            line-height: var(--leading-tight);
            margin-bottom: var(--space-6);
            opacity: 0;
            animation: fade-in-up 0.8s ease-out 0.1s forwards;
        }

        .hero-title-line1 {
            display: block;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-title-line2 {
            display: block;
            color: var(--color-text-secondary);
            font-weight: var(--font-normal);
            font-size: 0.5em;
            margin-top: var(--space-2);
        }

        @media (max-width: 767px) {
            .hero-title-line2 {
                font-size: 0.6em;
            }
        }

        .hero-subtitle {
            font-size: var(--text-lg);
            color: var(--color-text-secondary);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: var(--space-10);
            opacity: 0;
            animation: fade-in-up 0.8s ease-out 0.2s forwards;
        }

        @media (max-width: 767px) {
            .hero-subtitle {
                font-size: var(--text-base);
            }
        }

        /* 统计卡片 - 修复Flexbox布局 */
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-4);
            margin-bottom: var(--space-12);
            opacity: 0;
            animation: fade-in-up 0.8s ease-out 0.3s forwards;
        }

        @media (min-width: 768px) {
            .stats-container {
                gap: var(--space-6);
            }
        }

        .stat-card {
            background-color: var(--color-bg-secondary);
            padding: var(--space-5) var(--space-6);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            text-align: center;
            min-width: 120px;
            flex: 0 1 auto;
            border: 1px solid var(--color-border);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
            will-change: transform;
        }

        @media (min-width: 768px) {
            .stat-card {
                padding: var(--space-6) var(--space-8);
                min-width: 140px;
            }
        }

        @media (hover: hover) and (pointer: fine) {


        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-xl), var(--shadow-glow);
        }


        }

        .stat-value {
            font-family: var(--font-display);
            font-size: var(--text-3xl);
            font-weight: var(--font-bold);
            background: var(--gradient-warm);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
        }

        @media (min-width: 768px) {
            .stat-value {
                font-size: var(--text-4xl);
            }
        }

        .stat-label {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
            margin-top: var(--space-2);
        }

        /* 滚动提示 */
        .scroll-hint {
            position: absolute;
            bottom: var(--space-10);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
            color: var(--color-text-tertiary);
            font-size: var(--text-sm);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-10px); }
        }

        .scroll-hint-icon {
            font-size: 1.5rem;
            line-height: 1;
        }

        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================================
           时间轴区域 - 修复定位和布局
           ============================================ */
        .timeline-section {
            padding-top: var(--space-24);
            padding-bottom: var(--space-24);
            position: relative;
        }

        @media (max-width: 767px) {
            .timeline-section {
                padding-top: var(--space-16);
                padding-bottom: var(--space-16);
            }
        }

        .section-header {
            text-align: center;
            margin-bottom: var(--space-16);
        }

        @media (max-width: 767px) {
            .section-header {
                margin-bottom: var(--space-12);
            }
        }

        .section-label {
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            color: var(--color-primary-600);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: var(--space-4);
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 5vw, 2.25rem);
            font-weight: var(--font-semibold);
            color: var(--color-text-primary);
        }

        /* 时间轴 - 修复定位 */
        .timeline {
            position: relative;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .timeline-line {
            position: absolute;
            left: 30px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                var(--color-primary-300) 10%,
                var(--color-secondary-400) 50%,
                var(--color-primary-300) 90%,
                transparent 100%
            );
        }

        @media (min-width: 768px) {
            .timeline-line {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        /* 时间轴项目 - 修复布局 */
        .timeline-item {
            position: relative;
            margin-bottom: var(--space-12);
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.6s ease, transform 0.6s ease;
            will-change: opacity, transform;
        }

        .timeline-item.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 移动端布局 */
        .timeline-card {
            margin-left: 70px;
            margin-right: 0;
            text-align: left;
        }

        /* 桌面端双列布局 */
        @media (min-width: 768px) {
            .timeline-item:nth-child(odd) .timeline-card {
                margin-left: auto;
                margin-right: calc(50% + 50px);
                text-align: right;
            }

            .timeline-item:nth-child(even) .timeline-card {
                margin-left: calc(50% + 50px);
                margin-right: auto;
                text-align: left;
            }
        }

        /* 时间节点 - 修复定位 */
        .timeline-node {
            position: absolute;
            left: 30px;
            top: 20px;
            transform: translateX(-50%);
            z-index: 10;
        }

        @media (min-width: 768px) {
            .timeline-node {
                left: 50%;
            }
        }

        .timeline-dot {
            width: 20px;
            height: 20px;
            background-color: var(--color-bg-secondary);
            border: 4px solid var(--color-primary-500);
            border-radius: 50%;
            box-shadow: 0 0 0 6px rgba(236, 72, 153, 0.2);
            transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
            cursor: pointer;
            will-change: transform;
        }

        @media (hover: hover) and (pointer: fine) {


        .timeline-item:hover .timeline-dot {
            transform: scale(1.3);
            border-color: var(--color-secondary-500);
            box-shadow: 0 0 0 10px rgba(139, 92, 246, 0.2);
        }


        }

        .timeline-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.2rem;
            opacity: 0;
            transition: opacity var(--transition-base);
            pointer-events: none;
        }

        @media (hover: hover) and (pointer: fine) {


        .timeline-item:hover .timeline-icon {
            opacity: 1;
        }


        }

        /* 时间轴卡片 - 修复盒模型 */
        .timeline-card {
            background-color: var(--color-bg-secondary);
            border-radius: var(--radius-xl);
            padding: var(--space-5);
            box-shadow: var(--shadow-md);
            border: 1px solid var(--color-border);
            max-width: 100%;
            transition: transform var(--transition-base), box-shadow var(--transition-base);
            position: relative;
            will-change: transform;
        }

        @media (min-width: 768px) {
            .timeline-card {
                padding: var(--space-6);
                max-width: 420px;
            }
        }

        /* 卡片箭头 - 修复定位和显示 */
        .timeline-card::after {
            content: '';
            position: absolute;
            left: -10px;
            top: 20px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent var(--color-bg-secondary) transparent transparent;
        }

        @media (min-width: 768px) {
            .timeline-card::after {
                display: none;
            }

            .timeline-item:nth-child(odd) .timeline-card::before {
                content: '';
                position: absolute;
                top: 24px;
                right: -12px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 12px 0 12px 12px;
                border-color: transparent transparent transparent var(--color-bg-secondary);
            }

            .timeline-item:nth-child(even) .timeline-card::before {
                content: '';
                position: absolute;
                top: 24px;
                left: -12px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 12px 12px 12px 0;
                border-color: transparent var(--color-bg-secondary) transparent transparent;
            }
        }

        @media (hover: hover) and (pointer: fine) {


        .timeline-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-xl);
        }


        }

        .timeline-date {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-xs);
            font-weight: var(--font-semibold);
            color: var(--color-primary-600);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: var(--space-1) var(--space-3);
            background-color: var(--color-primary-50);
            border-radius: var(--radius-full);
            margin-bottom: var(--space-3);
        }

        .timeline-date-icon {
            font-size: 0.9em;
            line-height: 1;
        }

        .timeline-title {
            font-family: var(--font-display);
            font-size: var(--text-lg);
            font-weight: var(--font-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-3);
            line-height: var(--leading-snug);
        }

        @media (min-width: 768px) {
            .timeline-title {
                font-size: var(--text-xl);
            }
        }

        .timeline-desc {
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
        }

        /* 时间轴年份标签 - 修复sticky定位 */
        .timeline-year {
            position: sticky;
            top: 80px;
            display: table;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: var(--space-8);
            background-color: var(--color-bg-secondary);
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            font-family: var(--font-display);
            font-size: var(--text-sm);
            font-weight: var(--font-bold);
            color: var(--color-primary-600);
            box-shadow: var(--shadow-md);
            border: 1px solid var(--color-primary-200);
            z-index: 5;
        }

        /* ============================================
           里程碑区域 - 修复Grid布局
           ============================================ */
        .milestones-section {
            padding-top: var(--space-24);
            padding-bottom: var(--space-24);
            background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-primary-50) 50%, var(--color-bg-primary) 100%);
        }

        @media (max-width: 767px) {
            .milestones-section {
                padding-top: var(--space-16);
                padding-bottom: var(--space-16);
            }
        }

        .milestones-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-4);
            margin-top: var(--space-12);
        }

        @media (min-width: 640px) {
            .milestones-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-6);
            }
        }

        @media (min-width: 1024px) {
            .milestones-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .milestone-card {
            background-color: var(--color-bg-secondary);
            border-radius: var(--radius-2xl);
            padding: var(--space-6);
            text-align: center;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--color-border);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
            position: relative;
            overflow: hidden;
            will-change: transform;
        }

        @media (min-width: 768px) {
            .milestone-card {
                padding: var(--space-8);
            }
        }

        .milestone-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-warm);
        }

        @media (hover: hover) and (pointer: fine) {


        .milestone-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-2xl);
        }


        }

        .milestone-icon {
            font-size: 2.5rem;
            margin-bottom: var(--space-4);
            display: inline-block;
            line-height: 1;
            animation: float-gentle 3s ease-in-out infinite;
            will-change: transform;
        }

        @media (min-width: 768px) {
            .milestone-icon {
                font-size: 3rem;
            }
        }

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

        .milestone-title {
            font-family: var(--font-display);
            font-size: var(--text-xl);
            font-weight: var(--font-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-2);
        }

        @media (min-width: 768px) {
            .milestone-title {
                font-size: var(--text-2xl);
            }
        }

        .milestone-desc {
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
        }

        /* ============================================
           页脚 - 修复布局和间距
           ============================================ */
        .footer {
            padding-top: var(--space-16);
            padding-bottom: var(--space-16);
            text-align: center;
            border-top: 1px solid var(--color-border);
        }

        .footer-content {
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            padding-left: var(--space-6);
            padding-right: var(--space-6);
        }

        .footer-quote {
            font-family: var(--font-display);
            font-size: var(--text-xl);
            font-style: italic;
            color: var(--color-text-secondary);
            margin-bottom: var(--space-6);
        }

        @media (min-width: 768px) {
            .footer-quote {
                font-size: var(--text-2xl);
            }
        }

        .footer-heart {
            display: inline-block;
            color: var(--color-primary-500);
            animation: heartbeat 1.5s ease-in-out infinite;
            will-change: transform;
        }

        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            14% { transform: scale(1.15); }
            28% { transform: scale(1); }
            42% { transform: scale(1.15); }
            70% { transform: scale(1); }
        }

        .footer-copyright {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
        }

        /* ============================================
           访问次数统计
           ============================================ */
        .footer-view-count {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
            margin-top: var(--space-4);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
        }

        .view-count-icon {
            font-size: 1.1em;
            line-height: 1;
        }

        .view-count-number {
            color: var(--color-primary-600);
            font-weight: var(--font-bold);
            font-family: var(--font-display);
        }

        /* 周年页返回顶部按钮：复用全站交互，视觉上呼应时间轴圆点与玫红主色。 */
        body.anniversary-page {
            --back-top-size: 52px;
            --back-top-radius: var(--radius-full);
            --back-top-right: 30px;
            --back-top-bottom: 28px;
            --back-top-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(253, 242, 248, 0.92));
            --back-top-surface-hover: linear-gradient(145deg, #fff7fb, #fce7f3);
            --back-top-border: rgba(219, 39, 119, 0.22);
            --back-top-border-hover: rgba(219, 39, 119, 0.42);
            --back-top-icon: var(--color-primary-600);
            --back-top-shadow: 0 12px 30px rgba(190, 24, 93, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.92);
            --back-top-shadow-hover: 0 16px 34px rgba(190, 24, 93, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.98);
        }

        html body.anniversary-page #backToTop {
            border-radius: var(--radius-full) !important;
        }

        html body.anniversary-page #backToTop i {
            font-size: 18px !important;
        }

        @media (hover: hover) and (pointer: fine) {


        html body.anniversary-page #backToTop:active {
            box-shadow: 0 7px 18px rgba(190, 24, 93, 0.16) !important;
        }


        }

        html body.anniversary-page #backToTop:focus-visible {
            outline: 3px solid rgba(219, 39, 119, 0.26) !important;
            outline-offset: 3px !important;
        }

        html[data-blog-theme="dark"] body.anniversary-page {
            --back-top-surface: linear-gradient(145deg, rgba(74, 40, 57, 0.94), rgba(55, 31, 44, 0.92));
            --back-top-surface-hover: linear-gradient(145deg, rgba(91, 46, 67, 0.98), rgba(67, 35, 50, 0.98));
            --back-top-border: rgba(249, 168, 212, 0.26);
            --back-top-border-hover: rgba(249, 168, 212, 0.48);
            --back-top-icon: var(--color-primary-300);
            --back-top-shadow: 0 14px 32px rgba(35, 10, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            --back-top-shadow-hover: 0 18px 38px rgba(35, 10, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        @media (max-width: 767px) {
            body.anniversary-page {
                --back-top-size: 46px;
                --back-top-right: max(16px, env(safe-area-inset-right));
                --back-top-bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
            }
        }

        @media (max-width: 375px) {
            body.anniversary-page {
                --back-top-size: 42px;
            }
        }

        @media (prefers-reduced-transparency: reduce) {
            html body.anniversary-page #backToTop {
                background: #fff7fb !important;
            }

            html[data-blog-theme="dark"] body.anniversary-page #backToTop {
                background: #4a2839 !important;
            }
        }

        /* ============================================
           无障碍支持 - 减少动画
           ============================================ */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* 焦点样式 */
        :focus-visible {
            outline: 2px solid var(--color-primary-500);
            outline-offset: 2px;
        }

        /* ============================================
           打印样式
           ============================================ */
        @media print {
            .ambient-bg,
            .particles,
            .navbar,
            .scroll-hint {
                display: none !important;
            }

            .timeline-line {
                background-color: var(--color-neutral-300) !important;
            }

            .timeline-card {
                box-shadow: none !important;
                border: 1px solid var(--color-neutral-300) !important;
                break-inside: avoid;
            }

            .hero {
                min-height: auto;
                padding-top: var(--space-8);
            }
        }