/* roulang page: index */
:root {
            --bg-main: #0D1117;
            --card-bg: #161B22;
            --accent-gold: #F59E0B;
            --accent-cyan: #00D2B4;
            --border-line: #30363D;
        }
        body {
            background-color: var(--bg-main);
            color: #8B949E;
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        .hud-border {
            position: relative;
            border: 1px solid var(--border-line);
        }
        .hud-border::before, .hud-border::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            pointer-events: none;
        }
        .hud-border::before {
            top: -1px;
            left: -1px;
            border-top: 2px solid var(--accent-gold);
            border-left: 2px solid var(--accent-gold);
        }
        .hud-border::after {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid var(--accent-cyan);
            border-right: 2px solid var(--accent-cyan);
        }
        .hud-glow {
            box-shadow: 0 0 25px -5px rgba(245, 158, 11, 0.15);
        }
        .hud-glow-cyan {
            box-shadow: 0 0 25px -5px rgba(0, 210, 180, 0.15);
        }
        .radar-sweep {
            background: conic-gradient(from 0deg at 50% 50%, rgba(0, 210, 180, 0.25) 0deg, rgba(0, 210, 180, 0) 60deg);
            animation: sweep 4s linear infinite;
        }
        @keyframes sweep {
            100% { transform: rotate(360deg); }
        }
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        details[open] summary .arrow-icon { transform: rotate(180deg); }

/* roulang page: article */
:root {
            --bg-main: #0D1117;
            --card-bg: #161B22;
            --accent-gold: #F59E0B;
            --accent-cyan: #00D2B4;
            --border-line: #30363D;
        }
        body {
            background-color: var(--bg-main);
            color: #8B949E;
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        .hud-border {
            position: relative;
            border: 1px solid var(--border-line);
        }
        .hud-border::before, .hud-border::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            pointer-events: none;
        }
        .hud-border::before {
            top: -1px;
            left: -1px;
            border-top: 2px solid var(--accent-gold);
            border-left: 2px solid var(--accent-gold);
        }
        .hud-border::after {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid var(--accent-cyan);
            border-right: 2px solid var(--accent-cyan);
        }
        .article-content {
            font-size: 1.05rem;
            line-height: 1.95;
            color: #C9D1D9;
        }
        .article-content h2 {
            color: #F0F6FC;
            font-size: 1.6rem;
            font-weight: 700;
            margin-top: 2.5rem;
            margin-bottom: 1.25rem;
            padding-left: 1rem;
            border-left: 4px solid var(--accent-gold);
            letter-spacing: -0.01em;
        }
        .article-content h3 {
            color: #F0F6FC;
            font-size: 1.3rem;
            font-weight: 600;
            margin-top: 2rem;
            margin-bottom: 1rem;
            padding-left: 0.75rem;
            border-left: 3px solid var(--accent-cyan);
        }
        .article-content p {
            margin-bottom: 1.5rem;
        }
        .article-content ul, .article-content ol {
            margin-bottom: 1.5rem;
            padding-left: 1.75rem;
        }
        .article-content li {
            margin-bottom: 0.5rem;
            list-style-type: square;
        }
        .article-content blockquote {
            margin: 1.75rem 0;
            padding: 1.25rem 1.5rem;
            background: #161B22;
            border-left: 4px solid var(--accent-cyan);
            color: #8B949E;
            font-style: normal;
            border-radius: 0 6px 6px 0;
        }
        .article-content code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            background: #21262D;
            color: var(--accent-gold);
            padding: 0.2rem 0.45rem;
            border-radius: 4px;
            font-size: 0.9em;
        }
        .article-content pre {
            background: #090D13;
            border: 1px solid var(--border-line);
            padding: 1.25rem;
            border-radius: 6px;
            overflow-x: auto;
            margin-bottom: 1.75rem;
        }
        .article-content strong {
            color: #F0F6FC;
            font-weight: 600;
        }

/* roulang page: category1 */
:root {
            --bg-main: #0D1117;
            --card-bg: #161B22;
            --accent-gold: #F59E0B;
            --accent-cyan: #00D2B4;
            --border-line: #30363D;
        }
        body {
            background-color: var(--bg-main);
            color: #8B949E;
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        .hud-border {
            position: relative;
            border: 1px solid var(--border-line);
        }
        .hud-border::before, .hud-border::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            pointer-events: none;
        }
        .hud-border::before {
            top: -1px;
            left: -1px;
            border-top: 2px solid var(--accent-gold);
            border-left: 2px solid var(--accent-gold);
        }
        .hud-border::after {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid var(--accent-cyan);
            border-right: 2px solid var(--accent-cyan);
        }
        details[open] summary .arrow-icon { transform: rotate(180deg); }