/* roulang page: index */
:root {
            --brand-cyan: #00B8A9;
            --brand-dark: #11141A;
            --brand-orange: #FF6B35;
            --brand-slate: #64748B;
            --brand-light: #F8FAFC;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            color: #1e293b;
            background-color: #F8FAFC;
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            overflow-x: hidden;
        }
        .scroll-mt-header {
            scroll-margin-top: 88px;
        }
        .code-syntax {
            background: #0d1117;
            color: #c9d1d9;
            font-family: Consolas, Monaco, 'Courier New', Courier, monospace;
        }
        .cockpit-grid {
            background-size: 24px 24px;
            background-image: linear-gradient(to right, rgba(0, 184, 169, 0.05) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(0, 184, 169, 0.05) 1px, transparent 1px);
        }
        .cockpit-grid-dark {
            background-size: 32px 32px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }
        .glass-header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
        }
        .btn-glow {
            transition: all 0.25s ease-in-out;
        }
        .btn-glow:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px -4px rgba(0, 184, 169, 0.35);
        }
        .btn-orange-glow:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px -4px rgba(255, 107, 53, 0.4);
        }