/* roulang page: index */
:root {
            --primary: #1E232A;
            --accent: #00E599;
            --cyan: #00B4D8;
            --bg-dark: #0B0F12;
            --bg-light: #F8F9FA;
            --text-dark: #0F172A;
            --text-muted: #64748B;
            --border-light: #E2E8F0;
            --border-dark: rgba(255, 255, 255, 0.08);
            --radius-md: 6px;
        }
        body {
            font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
            line-height: 1.75;
            color: #1E293B;
            background-color: #FFFFFF;
            overflow-x: hidden;
        }
        .wireframe-border {
            border: 1px solid var(--border-light);
        }
        .wireframe-border-dark {
            border: 1px solid var(--border-dark);
        }
        .tech-card-hover {
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .tech-card-hover:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 229, 153, 0.5);
            box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
        }
        .tech-badge {
            font-family: ui-monospace, Menlo, Consolas, monospace;
            letter-spacing: 0.05em;
        }
        /* Handcrafted Accordion Transition */
        .faq-content {
            transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
        }

/* roulang page: category2 */
:root {
      --primary: #1E232A;
      --accent: #00E599;
      --cyan: #00B4D8;
      --bg-dark: #0B0F12;
      --bg-light: #F8F9FA;
      --text-dark: #0F172A;
      --text-muted: #64748B;
      --border-light: #E2E8F0;
      --border-dark: rgba(255, 255, 255, 0.08);
      --radius-md: 6px;
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      color: #1E293B;
      background-color: #FFFFFF;
      overflow-x: hidden;
    }
    .wireframe-border {
      border: 1px solid var(--border-light);
    }
    .wireframe-border-dark {
      border: 1px solid var(--border-dark);
    }
    .tech-card-hover {
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .tech-card-hover:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 229, 153, 0.5);
      box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
    }
    .tech-badge {
      font-family: ui-monospace, Menlo, Consolas, monospace;
      letter-spacing: 0.05em;
    }
    .faq-content {
      transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
    }
    .progress-ring-circle {
      transition: stroke-dashoffset 0.35s;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

/* roulang page: category1 */
:root {
      --primary: #1E232A;
      --accent: #00E599;
      --cyan: #00B4D8;
      --bg-dark: #0B0F12;
      --bg-light: #F8F9FA;
      --text-dark: #0F172A;
      --text-muted: #64748B;
      --border-light: #E2E8F0;
      --border-dark: rgba(255, 255, 255, 0.08);
      --radius-md: 6px;
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      color: #1E293B;
      background-color: #FFFFFF;
      overflow-x: hidden;
    }
    .wireframe-border {
      border: 1px solid var(--border-light);
    }
    .wireframe-border-dark {
      border: 1px solid var(--border-dark);
    }
    .tech-card-hover {
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .tech-card-hover:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 229, 153, 0.5);
      box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
    }
    .tech-badge {
      font-family: ui-monospace, Menlo, Consolas, monospace;
      letter-spacing: 0.05em;
    }
    .faq-content {
      transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
    }

/* roulang page: category5 */
:root {
      --primary: #1E232A;
      --accent: #00E599;
      --cyan: #00B4D8;
      --bg-dark: #0B0F12;
      --bg-light: #F8F9FA;
      --text-dark: #0F172A;
      --text-muted: #64748B;
      --border-light: #E2E8F0;
      --border-dark: rgba(255, 255, 255, 0.08);
      --radius-md: 6px;
    }
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      color: #1E293B;
      background-color: #FFFFFF;
      overflow-x: hidden;
    }
    .mono-num {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    }
    .wireframe-border {
      border: 1px solid var(--border-light);
    }
    .wireframe-border-dark {
      border: 1px solid var(--border-dark);
    }
    .tech-card-hover {
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .tech-card-hover:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 229, 153, 0.5);
      box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
    }
    .tech-badge {
      font-family: ui-monospace, Menlo, Consolas, monospace;
      letter-spacing: 0.05em;
    }
    .faq-content {
      transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
    }