html { scroll-behavior: smooth; }
    body {
      background:
        radial-gradient(circle at 15% 20%, rgba(96, 165, 250, 0.12), transparent 20%),
        radial-gradient(circle at 85% 10%, rgba(168, 85, 247, 0.14), transparent 22%),
        linear-gradient(180deg, #050814 0%, #060816 45%, #040611 100%);
    }
    .grid-overlay {
      pointer-events: none;
    }
    .grid-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent);
      pointer-events: none;
    }
    .panel {
      background: linear-gradient(180deg, rgba(12, 18, 40, 0.9), rgba(10, 14, 30, 0.72));
      border: 1px solid rgba(148, 163, 184, 0.14);
      backdrop-filter: blur(16px);
    }
    .lift {
      transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
    }
    .lift:hover {
      transform: translateY(-6px);
      border-color: rgba(96, 165, 250, 0.36);
      box-shadow: 0 24px 60px rgba(37, 99, 235, 0.16);
    }
    .glow-line { position: relative; overflow: hidden; }
    .glow-line::after {
      content: "";
      position: absolute;
      inset: auto -40% 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.9), rgba(168, 85, 247, 0.9), transparent);
    }
    .fade-in { animation: fadeInUp 0.9s ease both; }
    .fade-in-delay { animation: fadeInUp 0.9s ease 0.14s both; }
    .fade-in-delay-2 { animation: fadeInUp 0.9s ease 0.28s both; }
    .lang-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      padding: 0.25rem;
    }
    .lang-toggle button {
      border-radius: 9999px;
      padding: 0.5rem 0.85rem;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: rgb(203 213 225);
      transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    }
    .lang-toggle button:hover { color: white; }
    .lang-toggle button.is-active {
      background: linear-gradient(90deg, rgba(96, 165, 250, 0.32), rgba(168, 85, 247, 0.32));
      color: white;
    }
    .metric-card {
      border: 1px solid rgba(148, 163, 184, 0.14);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      border-radius: 1.5rem;
      padding: 1.25rem;
    }
    .command-group-card {
      border: 1px solid rgba(148, 163, 184, 0.14);
      background: linear-gradient(180deg, rgba(12, 18, 40, 0.95), rgba(9, 13, 28, 0.86));
      border-radius: 1.75rem;
      padding: 1.5rem;
      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
    }
    .command-group-shell {
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      border-radius: 1rem;
      padding: 1rem;
      display: grid;
      gap: 0.9rem;
      margin-top: 1.25rem;
    }
.command-card {
  display: block;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.46);
  border-radius: 1rem;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.command-card:focus-visible,
.command-card:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(2, 6, 23, 0.62);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.26);
  outline: none;
}
    .command-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 0.45rem 0.8rem;
      font-family: "JetBrains Mono", monospace;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: white;
      text-transform: uppercase;
    }
    .accent-blue .command-badge, .accent-blue .group-chip {
      background: rgba(96, 165, 250, 0.12);
      border-color: rgba(96, 165, 250, 0.3);
      color: #bfdbfe;
    }
    .accent-purple .command-badge, .accent-purple .group-chip {
      background: rgba(168, 85, 247, 0.12);
      border-color: rgba(168, 85, 247, 0.3);
      color: #e9d5ff;
    }
    .accent-cyan .command-badge, .accent-cyan .group-chip {
      background: rgba(34, 211, 238, 0.12);
      border-color: rgba(34, 211, 238, 0.3);
      color: #a5f3fc;
    }
    .accent-amber .command-badge, .accent-amber .group-chip {
      background: rgba(245, 158, 11, 0.12);
      border-color: rgba(245, 158, 11, 0.3);
      color: #fde68a;
    }
    .accent-slate .command-badge, .accent-slate .group-chip {
      background: rgba(148, 163, 184, 0.12);
      border-color: rgba(148, 163, 184, 0.3);
      color: #cbd5e1;
    }
.group-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.3rem 0.7rem;
      font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.source-intro-card {
  display: block;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), rgba(168, 85, 247, 0.06));
  border-radius: 1.4rem;
  padding: 1.25rem;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.source-intro-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.34);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.14);
}

.source-preview-shell {
  min-height: 72vh;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0.98));
}

.source-preview-status {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding: 0.9rem 1.25rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: #94a3b8;
}

.source-preview-status.is-error {
  color: #fca5a5;
}

.source-code {
  margin: 0;
  min-height: calc(72vh - 3.4rem);
  overflow: auto;
  padding: 1.25rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.84rem;
  line-height: 1.75;
  white-space: pre;
  color: #e2e8f0;
  background: transparent;
}

.source-meta {
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  padding: 1rem;
}

.source-link-inline {
  color: #bfdbfe;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.source-link-inline:hover {
  color: white;
}

.eyebrow-link {
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.eyebrow-link:hover {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}