@layer components {
  .prose {
    @apply text-base leading-7;
  }
  .prose a {
    @apply text-blue-400 hover:text-blue-300 transition-colors duration-200;
  }
  .prose strong {
    @apply font-semibold text-white/90;
  }
  .prose ol {
    @apply list-decimal pl-6 my-4;
  }
  .prose ul {
    @apply list-disc pl-6 my-4;
  }
  .prose li {
    @apply my-1;
  }
  .prose blockquote {
    @apply border-l-4 border-blue-500/50 pl-4 my-4 italic;
  }
  .prose code {
    @apply bg-[#1E293B] px-1.5 py-0.5 rounded text-sm font-mono text-white/90;
  }
  .prose pre {
    @apply bg-[#1E293B] p-4 rounded-lg my-4 overflow-x-auto;
  }
  .prose pre code {
    @apply bg-transparent p-0 text-sm leading-relaxed block;
  }
  .prose h1 {
    @apply text-2xl font-bold mb-4 text-white/90;
  }
  .prose h2 {
    @apply text-xl font-bold mb-3 text-white/90;
  }
  .prose h3 {
    @apply text-lg font-bold mb-2 text-white/90;
  }
  .prose p {
    @apply mb-4;
  }
  .prose hr {
    @apply border-white/10 my-6;
  }
  .prose table {
    @apply w-full my-4;
  }
  .prose table th {
    @apply bg-[#1E293B] px-4 py-2 text-left font-semibold text-white/90;
  }
  .prose table td {
    @apply border-t border-white/10 px-4 py-2;
  }
}