/* roulang page: index */
:root {
            --brand-primary: #0284c7;
            --brand-dark: #0f172a;
            --brand-night: #0a0f1d;
            --brand-accent: #ea580c;
            --brand-accent-hover: #c2410c;
            --bg-canvas: #f8fafc;
            --border-light: #e2e8f0;
            --text-main: #1e293b;
            --text-muted: #64748b;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            color: var(--text-main);
            background-color: #ffffff;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        .text-night { color: var(--brand-night); }
        .bg-night { background-color: var(--brand-night); }
        .text-tech { color: var(--brand-primary); }
        .bg-tech { background-color: var(--brand-primary); }
        .border-tech { border-color: var(--brand-primary); }
        .shadow-subtle { box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06); }
        .glow-border {
            border: 1px solid rgba(2, 132, 199, 0.15);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glow-border:hover {
            border-color: rgba(2, 132, 199, 0.45);
            box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.12);
            transform: translateY(-2px);
        }
        .dark-card {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .dark-card:hover {
            border-color: rgba(2, 132, 199, 0.6);
        }
        .code-font {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        }