/* roulang page: index */
:root {
      --bg-dark: #0B0E14;
      --surface-dark: #161B22;
      --panel-dark: #1F242C;
      --brand-accent: #00F59B;
      --brand-matrix: #6366F1;
      --text-main: #F0F6FC;
      --text-muted: #8B949E;
      --border-glow: rgba(0, 245, 155, 0.18);
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }
    .glow-border {
      border: 1px solid var(--border-glow);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }
    .glow-border:hover {
      border-color: rgba(0, 245, 155, 0.55);
      box-shadow: 0 8px 32px rgba(0, 245, 155, 0.15);
      transform: translateY(-4px);
    }
    .code-editor-bg {
      background: radial-gradient(circle at 15% 15%, #1f2836 0%, #0d1117 80%);
    }
    .hero-glow-bg {
      background: radial-gradient(circle at 50% -20%, rgba(0, 245, 155, 0.18) 0%, rgba(11, 14, 20, 0) 70%);
    }
    /* Mobile Drawer */
    #mobileMenu {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }
    #mobileMenu.open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }
    #mobileMenu.closed {
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
    }
    /* Native Accordion rotation */
    details[open] summary svg {
      transform: rotate(180deg);
    }
    summary::-webkit-details-marker {
      display: none;
    }