:root {
            --accent: #E8863A;
            --accent-light: #F0A060;
            --accent-glow: rgba(232,134,58,0.25);
            --accent-subtle: rgba(232,134,58,0.08);
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'DM Sans', system-ui, sans-serif; overflow-x: hidden; }

        /* 导航栏滚动效果 */
        #nav { transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
        .dark #nav.nav-scrolled { background: rgba(9,9,11,0.82); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 1px 40px rgba(0,0,0,0.3); }
        #nav.nav-scrolled { background: rgba(250,249,247,0.85); border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 40px rgba(0,0,0,0.06); }

        /* 滚动动画 */
        .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }
        .reveal-delay-5 { transition-delay: 0.5s; }

        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; transition: none; }
        }

        /* Hero 画布 */
        #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

        /* 卡片悬浮效果 */
        .node-card {
            transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1);
        }
        .node-card:hover { transform: translateY(-6px); }

        /* 工作流节点 */
        .wf-step {
            min-width: 110px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .wf-step:hover { transform: scale(1.05); }

        /* 工作流箭头动画 */
        .wf-arrow { animation: arrowPulse 2s ease-in-out infinite; }
        @keyframes arrowPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* 标签切换 */
        .wf-tab { transition: all 0.3s; cursor: pointer; }
        .wf-tab.active { color: var(--accent); border-color: var(--accent); }

        /* 安装系统切换 */
        .install-os-tab { cursor: pointer; opacity: 0.64; }
        .install-os-tab.active {
            color: #fff;
            opacity: 1;
            background: linear-gradient(135deg, var(--accent), #D4533B);
            box-shadow: 0 8px 24px var(--accent-glow);
        }

        /* 理念卡片图标 */
        .phil-icon {
            width: 56px; height: 56px; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px;
            background: var(--accent-subtle);
            color: var(--accent);
            transition: transform 0.3s, background 0.3s;
        }
        .phil-card:hover .phil-icon { transform: scale(1.1) rotate(-4deg); background: var(--accent-glow); }

        /* 汉堡菜单 */
        .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(.22,1,.36,1); }
        .mobile-menu.open { max-height: 400px; }

        /* 背景装饰 */
        .bg-grid {
            background-image: radial-gradient(circle, rgba(128,128,128,0.08) 1px, transparent 1px);
            background-size: 32px 32px;
        }
        .dark .bg-grid {
            background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
        }

        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, var(--accent) 0%, #D4533B 50%, var(--accent-light) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 分类标签颜色 */
        .cat-processing { --cat: #E8863A; }
        .cat-cover { --cat: #E85D75; }
        .cat-song { --cat: #3AAE8B; }
        .cat-speech { --cat: #5B8DEF; }
        .cat-ai { --cat: #8B8A8E; }

        .cat-badge {
            font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
            padding: 3px 10px; border-radius: 999px;
            background: color-mix(in srgb, var(--cat) 12%, transparent);
            color: var(--cat);
            border: 1px solid color-mix(in srgb, var(--cat) 20%, transparent);
        }

        /* 节点卡片边框高亮 */
        .node-card::before {
            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent), transparent 60%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
            pointer-events: none;
        }

        /* 光标追踪光效 */
        .cursor-glow {
            position: fixed; width: 600px; height: 600px; border-radius: 50%;
            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
            pointer-events: none; z-index: 0; transform: translate(-50%,-50%);
            transition: opacity 0.3s;
            opacity: 0;
        }
        .cursor-glow.active { opacity: 1; }

        /* Toast */
        .toast {
            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
            padding: 12px 24px; border-radius: 12px; font-size: 14px; z-index: 9999;
            transition: transform 0.4s cubic-bezier(.22,1,.36,1), opacity 0.4s;
            opacity: 0; pointer-events: none;
        }
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

        /* 滚动条 */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        .dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
        ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }