/* roulang page: index */
:root {
      --bg-base: #0A0F12;
      --brand-green: #00F076;
      --brand-orange: #FF5A1F;
      --text-main: #F1F5F9;
      --text-muted: #94A3B8;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }
    .grid-pattern {
      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);
      background-size: 32px 32px;
    }
    .tabular-nums {
      font-variant-numeric: tabular-nums;
    }
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    .animate-marquee {
      display: flex;
      width: 200%;
      animation: marquee 25s linear infinite;
    }
    .animate-marquee:hover {
      animation-play-state: paused;
    }

/* roulang page: category1 */
:root {
            --bg-base: #0A0F12;
            --brand-green: #00F076;
            --brand-orange: #FF5A1F;
            --text-main: #F1F5F9;
            --text-muted: #94A3B8;
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            overflow-x: hidden;
        }
        .grid-pattern {
            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);
            background-size: 32px 32px;
        }
        .tabular-nums {
            font-variant-numeric: tabular-nums;
        }