:root {
          --bg-base: #030712;
          --bg-card: #0f172a;
          --bg-hover: #1e293b;
          --border-color: #334155;
          --text-primary: #f8fafc;
          --text-secondary: #cbd5e1;
          --text-muted: #94a3b8;
          --accent: #38bdf8;
          --accent-secondary: #818cf8;
          --accent-glow: rgba(56, 189, 248, 0.12);
          --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
          --success: #34d399;
      }

      * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          font-family: 'Inter', sans-serif;
          background: var(--bg-base);
          color: var(--text-primary);
          line-height: 1.7;
          padding-bottom: 80px;
          background-image:
              radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(129, 140, 248, 0.05) 0%, transparent 40%);
          background-attachment: fixed;
      }

      .container {
          width: 90%;
          max-width: 950px;
          margin: auto;
          padding: 20px 0;
      }

      /* Navbar */
      nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid var(--border-color);
          padding: 20px 0;
          margin-bottom: 40px;
          backdrop-filter: blur(12px);
      }

      .logo {
          font-size: 20px;
          font-weight: 800;
          color: var(--text-primary);
          display: flex;
          align-items: center;
          gap: 8px;
          text-decoration: none;
          letter-spacing: -0.5px;
      }

      .logo span {
          background: var(--accent-gradient);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }

      .nav-links {
          display: flex;
          gap: 24px;
      }

      .nav-links a {
          color: var(--text-secondary);
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          transition: color 0.2s ease;
      }

      .nav-links a:hover {
          color: var(--accent);
      }

      /* Hero */
      .hero {
          text-align: center;
          padding: 10px 20px 40px;
          position: relative;
      }

      .hero h1 {
          font-size: 46px;
          font-weight: 800;
          margin-bottom: 18px;
          letter-spacing: -1.5px;
          background: var(--accent-gradient);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }

      .hero p {
          font-size: 19px;
          color: var(--text-secondary);
          max-width: 800px;
          margin: 0 auto 30px;
          font-weight: 300;
      }

      .badges {
          display: flex;
          justify-content: center;
          gap: 12px;
          flex-wrap: wrap;
          margin-bottom: 30px;
      }

      .badge {
          background: var(--bg-card);
          border: 1px solid var(--border-color);
          padding: 8px 16px;
          border-radius: 9999px;
          font-size: 13px;
          color: var(--accent);
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 8px;
          transition: all 0.3s ease;
      }

      .badge:hover {
          border-color: var(--accent);
          background: var(--accent-glow);
          transform: translateY(-1px);
      }

      /* Grid & Cards */
      .grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 28px;
          margin-bottom: 40px;
      }

      .card {
          background: var(--bg-card);
          border: 1px solid var(--border-color);
          border-radius: 20px;
          padding: 35px;
          transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      }

      .card:hover {
          border-color: var(--accent);
          transform: translateY(-3px);
          box-shadow: 0 15px 35px rgba(56, 189, 248, 0.08);
      }

      .card h2 {
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 18px;
          color: var(--text-primary);
          display: flex;
          align-items: center;
          gap: 12px;
          border-bottom: 1px solid var(--border-color);
          padding-bottom: 10px;
      }

      .card h2 svg {
          color: var(--accent);
          width: 24px;
          height: 24px;
      }

      .card p {
          font-size: 14.5px;
          color: var(--text-secondary);
          margin-bottom: 20px;
          font-weight: 300;
      }

      /* Code styling */
      pre {
          background: #060913;
          padding: 18px;
          border-radius: 10px;
          border: 1px solid var(--border-color);
          overflow-x: auto;
          font-family: 'Fira Code', monospace;
          font-size: 13.5px;
          position: relative;
          margin-bottom: 15px;
      }

      code {
          color: #e2e8f0;
      }

      .copy-btn {
          position: absolute;
          top: 10px;
          right: 10px;
          background: var(--bg-card);
          border: 1px solid var(--border-color);
          color: var(--text-muted);
          padding: 5px 10px;
          font-size: 11px;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-weight: 500;
      }

      .copy-btn:hover {
          color: var(--text-primary);
          border-color: var(--accent);
          background: var(--bg-hover);
      }

      /* Table styling */
      .api-table {
          width: 100%;
          border-collapse: collapse;
          text-align: left;
          font-size: 14px;
          margin-top: 15px;
      }

      .api-table th {
          padding: 12px 8px;
          border-bottom: 2px solid var(--border-color);
          color: var(--accent);
          font-weight: 600;
      }

      .api-table td {
          padding: 12px 8px;
          border-bottom: 1px solid var(--border-color);
          color: var(--text-secondary);
          vertical-align: top;
      }

      /* Playground */
      .playground {
          background: var(--bg-card);
          border: 1px solid var(--border-color);
          border-radius: 24px;
          padding: 40px;
          margin-top: 50px;
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
          position: relative;
      }

      .playground::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 24px;
          padding: 1.5px;
          background: linear-gradient(135deg, var(--border-color) 0%, rgba(56, 189, 248, 0.4) 50%, var(--border-color) 100%);
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
      }

      .playground h2 {
          font-size: 26px;
          margin-bottom: 12px;
          color: var(--text-primary);
      }

      .playground-p {
          font-size: 15px;
          color: var(--text-secondary);
          margin-bottom: 30px;
          font-weight: 300;
      }

      .playground-inputs {
          display: grid;
          grid-template-columns: 1fr;
          gap: 25px;
          margin-bottom: 30px;
      }

      @media(min-width: 992px) {
          .playground-inputs {
              grid-template-columns: 3fr 2fr;
          }
      }

      .input-group {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .input-group label {
          font-size: 12px;
          font-weight: 700;
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      .input-group textarea,
      .input-group input {
          background: #060913;
          border: 1px solid var(--border-color);
          border-radius: 10px;
          padding: 16px;
          color: var(--text-primary);
          font-family: 'Fira Code', monospace;
          font-size: 13.5px;
          width: 100%;
          outline: none;
          transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .input-group textarea:focus,
      .input-group input:focus {
          border-color: var(--accent);
          box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
      }

      .regex-editor-card {
          background: #080d1a;
          border: 1px solid var(--border-color);
          border-radius: 12px;
          padding: 20px;
          display: flex;
          flex-direction: column;
          gap: 15px;
      }

      .btn {
          background: var(--accent-gradient);
          color: #030712;
          font-weight: 700;
          font-size: 15px;
          padding: 14px 28px;
          border: none;
          border-radius: 10px;
          cursor: pointer;
          transition: opacity 0.2s ease, transform 0.1s ease;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
      }

      .btn:hover {
          opacity: 0.95;
          box-shadow: 0 5px 15px rgba(56, 189, 248, 0.25);
      }

      .btn:active {
          transform: scale(0.98);
      }

      /* Tabs and Results */
      .results-section {
          margin-top: 35px;
          border-top: 1px solid var(--border-color);
          padding-top: 30px;
      }

      .tabs {
          display: flex;
          gap: 12px;
          margin-bottom: 20px;
          border-bottom: 1px solid var(--border-color);
          padding-bottom: 10px;
      }

      .tab-btn {
          background: transparent;
          border: none;
          color: var(--text-muted);
          padding: 8px 18px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          border-radius: 6px;
          position: relative;
      }

      .tab-btn:hover {
          color: var(--text-primary);
          background: var(--bg-hover);
      }

      .tab-btn.active {
          color: var(--accent);
          background: var(--accent-glow);
      }

      .results-display {
          min-height: 200px;
      }

      .results-grid-display {
          display: grid;
          grid-template-columns: 1fr;
          gap: 20px;
      }

      @media(min-width: 768px) {
          .results-grid-display {
              grid-template-columns: 1fr 1fr;
          }
      }

      .column-box {
          background: #060913;
          border: 1px solid var(--border-color);
          border-radius: 12px;
          padding: 20px;
      }

      .column-title {
          font-size: 14px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin-bottom: 15px;
          color: var(--accent-secondary);
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .count-badge {
          background: var(--bg-card);
          border: 1px solid var(--border-color);
          color: var(--accent);
          padding: 2px 8px;
          font-size: 11px;
          border-radius: 99px;
          font-weight: 600;
      }

      /* Match lists cards */
      .match-item-card {
          background: var(--bg-card);
          border: 1px solid var(--border-color);
          border-radius: 8px;
          padding: 12px 15px;
          margin-bottom: 10px;
          transition: border-color 0.2s ease;
          font-size: 13px;
      }

      .match-item-card:hover {
          border-color: var(--accent);
      }

      .match-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;
      }

      .match-variable {
          font-family: 'Fira Code', monospace;
          color: var(--accent);
          font-weight: 600;
      }

      .match-folder {
          font-family: 'Fira Code', monospace;
          color: var(--accent-secondary);
          font-weight: 500;
          background: rgba(129, 140, 248, 0.08);
          padding: 1px 6px;
          border-radius: 4px;
      }

      .match-line {
          font-family: 'Fira Code', monospace;
          color: var(--text-muted);
          overflow-x: auto;
          white-space: nowrap;
          padding: 4px 0;
      }

      .match-num {
          color: var(--text-muted);
          font-size: 11px;
      }

      .no-matches-placeholder {
          color: var(--text-muted);
          font-style: italic;
          text-align: center;
          padding: 30px 0;
      }

      .json-output {
          background: #060913;
          border: 1px solid var(--border-color);
          border-radius: 12px;
          padding: 20px;
          font-family: 'Fira Code', monospace;
          font-size: 13px;
          color: var(--success);
          white-space: pre-wrap;
          max-height: 450px;
          overflow-y: auto;
      }

      footer {
          text-align: center;
          margin-top: 80px;
          color: var(--text-muted);
          font-size: 14px;
          border-top: 1px solid var(--border-color);
          padding-top: 30px;
      }

      footer a {
          color: var(--accent);
          text-decoration: none;
          font-weight: 500;
      }

      footer a:hover {
          text-decoration: underline;
      }

      /* Icons */
      svg {
          fill: currentColor;
      }