/* Adjustable time parameters - modify here to change the entire timeline range */
        :root {
            --timeline-start-year: 1985;
            --timeline-end-year: 2025;
            --timeline-span: calc(var(--timeline-end-year) - var(--timeline-start-year)); /* 40 years */
            
            /* Time calculation for each company (percentage based on 40-year timeline) */
            --microsoft-start: 1985; /* Started in 1985 */
            --microsoft-position: 0%; /* (1985-1985)/40 * 100% = 0% */
            --microsoft-duration: 100%; /* From 1985 to 2025, spans entire timeline */
            
            --yahoo-start: 1994;
            --yahoo-position: 22.5%; /* (1994-1985)/40 * 100% = 22.5% */
            --yahoo-duration: 77.5%; /* From 1994 to 2025 */
            
            --netscape-start: 1994;
            --netscape-end: 2008;
            --netscape-position: 22.5%; /* (1994-1985)/40 * 100% = 22.5% */
            --netscape-duration: 35%; /* (2008-1994)/40 * 100% = 35% */
            
            --icq-start: 1996;
            --icq-end: 2024;
            --icq-position: 27.5%; /* (1996-1985)/40 * 100% = 27.5% */
            --icq-duration: 70%; /* (2024-1996)/40 * 100% = 70% */
            
            --msn-start: 1995;
            --msn-end: 2013;
            --msn-position: 25%; /* (1995-1985)/40 * 100% = 25% */
            --msn-duration: 45%; /* (2013-1995)/40 * 100% = 45% */
            
            --google-start: 1998;
            --google-position: 32.5%; /* (1998-1985)/40 * 100% = 32.5% */
            --google-duration: 67.5%; /* From 1998 to 2025 */
            
            --gmail-start: 2004;
            --gmail-position: 47.5%; /* (2004-1985)/40 * 100% = 47.5% */
            --gmail-duration: 52.5%; /* From 2004 to 2025 */
            
            --facebook-start: 2004;
            --facebook-position: 47.5%; /* (2004-1985)/40 * 100% = 47.5% */
            --facebook-duration: 52.5%; /* From 2004 to 2025 */
            
            --iphone-start: 2007;
            --iphone-position: 55%; /* (2007-1985)/40 * 100% = 55% */
            --iphone-duration: 45%; /* From 2007 to 2025 */
            
            --gemini-start: 2023;
            --gemini-position: 95%; /* (2023-1985)/40 * 100% = 95% */
            --gemini-duration: 5%; /* From 2023 to 2025 */
        }

        body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            background: 
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 177, 153, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(248, 177, 149, 0.2) 0%, transparent 50%),
                linear-gradient(135deg, 
                    #2c1810 0%,    /* 深棕色 - 1970s */
                    #4a3728 15%,   /* 棕褐色 - 1980s */
                    #6b4423 30%,   /* 復古棕 - 1990s */
                    #8b6914 45%,   /* 金褐色 - 2000s */
                    #4a5d23 60%,   /* 橄欖綠 - 2010s */
                    #2d4a22 75%,   /* 深綠 - 2020s */
                    #1a2f3a 100%   /* 深藍灰 - 2025 */
                );
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            min-height: 100vh; /* 改為 min-height */
            overflow-x: hidden; /* 只隱藏橫向滾動條 */
            position: relative;
            display: flex;
            flex-direction: column;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 2px,
                    rgba(139, 105, 20, 0.03) 2px,
                    rgba(139, 105, 20, 0.03) 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    transparent,
                    transparent 2px,
                    rgba(75, 55, 40, 0.02) 2px,
                    rgba(75, 55, 40, 0.02) 4px
                );
            pointer-events: none;
            z-index: 1;
        }

        /* Dark Mode Styles */
        body.dark-mode {
            background: 
                radial-gradient(circle at 20% 80%, rgba(30, 58, 138, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(55, 65, 81, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(17, 24, 39, 0.2) 0%, transparent 50%),
                linear-gradient(135deg, 
                    #0f172a 0%,    /* 深藍灰 */
                    #1e293b 15%,   /* 石板藍 */
                    #334155 30%,   /* 中藍灰 */
                    #475569 45%,   /* 灰藍 */
                    #64748b 60%,   /* 淡藍灰 */
                    #94a3b8 75%,   /* 更淡藍灰 */
                    #cbd5e1 100%   /* 極淡藍灰 */
                );
            color: #e2e8f0; /* 淡灰色文字 */
        }

        body.dark-mode::before {
            background-image: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 2px,
                    rgba(59, 130, 246, 0.03) 2px,
                    rgba(59, 130, 246, 0.03) 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    transparent,
                    transparent 2px,
                    rgba(30, 64, 175, 0.02) 2px,
                    rgba(30, 64, 175, 0.02) 4px
                );
        }

        .gantt-container {
            background: 
                linear-gradient(135deg, 
                    rgba(255, 248, 240, 0.95) 0%,
                    rgba(253, 245, 230, 0.93) 25%, 
                    rgba(245, 222, 179, 0.91) 50%,
                    rgba(238, 203, 173, 0.89) 75%, 
                    rgba(205, 183, 158, 0.87) 100%
                );
            border-radius: 0;
            padding: 10px 20px; /* 減少上下 padding */
            box-shadow: 
                inset 0 0 50px rgba(139, 105, 20, 0.1),
                0 0 100px rgba(75, 55, 40, 0.2);
            backdrop-filter: blur(10px);
            width: 100vw;
            flex: 1; /* 使用剩餘空間 */
            margin: 0;
            position: relative;
            overflow: visible; /* 改為 visible 讓動畫可以延伸出容器 */
            z-index: 2;
            display: flex;
            flex-direction: column;
        }

        .gantt-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(160, 82, 45, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(210, 180, 140, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }

        /* Dark Mode Container */
        body.dark-mode .gantt-container {
            background: 
                linear-gradient(135deg, 
                    rgba(15, 23, 42, 0.95) 0%,
                    rgba(30, 41, 59, 0.93) 25%, 
                    rgba(51, 65, 85, 0.91) 50%,
                    rgba(71, 85, 105, 0.89) 75%, 
                    rgba(100, 116, 139, 0.87) 100%
                );
            box-shadow: 
                inset 0 0 50px rgba(59, 130, 246, 0.1),
                0 0 100px rgba(30, 64, 175, 0.2);
        }

        body.dark-mode .gantt-container::before {
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(147, 197, 253, 0.05) 0%, transparent 50%);
        }

        .gantt-title {
            text-align: center;
            font-size: 20px; /* 稍微縮小字體 */
            font-weight: 700;
            margin: 0; /* 移除 margin */
            padding: 5px 0; /* 減少 padding */
            background: linear-gradient(135deg, 
                #8b4513 0%,     /* 深棕 */
                #a0522d 25%,    /* 赭褐 */
                #cd853f 50%,    /* 秘魯色 */
                #daa520 75%,    /* 金色 */
                #b8860b 100%    /* 深金色 */
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 1; /* 直接顯示，不需要動畫 */
            transform: none; /* 移除變形 */
            animation: none; /* 移除動畫 */
            position: relative; /* 改為相對定位 */
            z-index: 100;
            background-color: transparent; /* 移除背景色 */
            flex-shrink: 0; /* 防止壓縮 */
        }

        /* Dark Mode Title */
        body.dark-mode .gantt-title {
            background: linear-gradient(135deg, 
                #3b82f6 0%,     /* 藍色 */
                #1d4ed8 25%,    /* 深藍 */
                #2563eb 50%,    /* 中藍 */
                #60a5fa 75%,    /* 淡藍 */
                #93c5fd 100%    /* 極淡藍 */
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-color: rgba(15, 23, 42, 0.98);
            text-shadow: 2px 2px 4px rgba(59, 130, 246, 0.3);
        }

        /* 標題動畫 - 已移除 */

        .gantt-chart {
            position: relative;
            overflow: visible;
            padding: 0;
            width: 100%;
            min-width: 100%; /* 移除固定寬度 */
            margin: 0; /* 移除 margin */
            flex: 1; /* 使用剩餘空間 */
            display: flex;
            flex-direction: column;
        }

        .gantt-content {
            flex: 1; /* 使用剩餘空間 */
            overflow: visible; /* 改為 visible 讓動畫可以完整顯示 */
            padding-right: 0; /* 移除滾動條空間 */
            padding-bottom: 5px; /* 減少底部間距 */
        }

        /* 自定義滾動條樣式 */
        .gantt-content::-webkit-scrollbar {
            width: 12px;
        }

        .gantt-content::-webkit-scrollbar-track {
            background: rgba(245, 222, 179, 0.3);
            border-radius: 10px;
            border: 1px solid rgba(160, 82, 45, 0.2);
        }

        .gantt-content::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #cd853f 0%, #daa520 100%);
            border-radius: 10px;
            border: 2px solid rgba(245, 222, 179, 0.3);
        }

        .gantt-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #b8860b 0%, #cd853f 100%);
        }

        /* Dark Mode 滾動條 */
        body.dark-mode .gantt-content::-webkit-scrollbar-track {
            background: rgba(30, 41, 59, 0.3);
            border: 1px solid rgba(59, 130, 246, 0.2);
        }

        body.dark-mode .gantt-content::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            border: 2px solid rgba(30, 41, 59, 0.3);
        }

        body.dark-mode .gantt-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
        }

        .timeline-header {
            display: flex;
            margin: 0; /* 移除 margin */
            padding-left: 200px;
            padding-right: 35%;
            position: relative; /* 改為相對定位 */
            z-index: 99;
            background: linear-gradient(135deg, 
                rgba(255, 248, 240, 0.98) 0%,
                rgba(245, 222, 179, 0.96) 100%
            );
            backdrop-filter: blur(15px);
            padding-top: 5px; /* 減少 padding */
            padding-bottom: 5px; /* 減少 padding */
            box-shadow: 0 2px 10px rgba(139, 69, 19, 0.1);
            flex-shrink: 0; /* 防止壓縮 */
        }

        /* Dark Mode Timeline Header */
        body.dark-mode .timeline-header {
            background: linear-gradient(135deg, 
                rgba(15, 23, 42, 0.98) 0%,
                rgba(30, 41, 59, 0.96) 100%
            );
            box-shadow: 0 2px 10px rgba(59, 130, 246, 0.1);
        }

        .year-marker {
            flex: 1;
            text-align: center;
            font-weight: 600;
            color: #8b4513;
            border-left: 2px solid rgba(160, 82, 45, 0.3);
            padding: 5px 0; /* 減少 padding */
            opacity: 1; /* 直接顯示 */
            transform: none; /* 移除變形 */
            animation: none; /* 移除動畫 */
            text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.2);
            background: linear-gradient(to bottom, transparent 0%, rgba(210, 180, 140, 0.1) 100%);
        }

        /* Dark Mode Year Markers */
        body.dark-mode .year-marker {
            color: #3b82f6;
            border-left: 2px solid rgba(59, 130, 246, 0.3);
            text-shadow: 1px 1px 2px rgba(59, 130, 246, 0.2);
            background: linear-gradient(to bottom, transparent 0%, rgba(59, 130, 246, 0.1) 100%);
        }

        /* Dark Mode Company Labels */
        body.dark-mode .company-label {
            color: #e2e8f0; /* 淺灰白色 */
        }

        /* Dark Mode Timeline Container */
        body.dark-mode .timeline-container {
            background: 
                linear-gradient(135deg, 
                    rgba(30, 41, 59, 0.4) 0%, 
                    rgba(51, 65, 85, 0.5) 50%, 
                    rgba(71, 85, 105, 0.6) 100%
                );
            border: 1px solid rgba(59, 130, 246, 0.2);
            box-shadow: inset 0 2px 4px rgba(59, 130, 246, 0.1);
        }