.gradient-bg {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.dark .gradient-bg {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Enhanced Link Visibility */
article a {
  color: #3B82F6 !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  transition: all 0.2s;
}
article a:hover {
  color: #2563EB !important;
  text-decoration-thickness: 2px;
}
.dark article a {
  color: #60a5fa !important;
}
.dark article a:hover {
  color: #93c5fd !important;
}

/* Code Block Styling (Prism and Default) */
.prose pre {
  background: #0f172a !important; /* Force dark background for code blocks (slate-950) */
  border: 1px solid #1e293b !important; /* slate-800 */
  border-radius: 0.75rem !important;
  padding: 1.25rem !important;
  font-size: 0.875rem !important;
  line-height: 1.7142857 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  color: #f8fafc !important; /* Ensure text is readable on dark background */
}

.dark .prose pre {
  background: #020617 !important; /* Even darker in dark mode (slate-950 or custom) */
  border: 1px solid #1e293b !important;
}

/* Prism specific adjustments to ensure it overrides defaults correctly */
pre[class*="language-"] {
  margin: 1.5rem 0 !important;
  border-radius: 0.75rem !important;
}

code[class*="language-"] {
  text-shadow: none !important;
}

/* Code block with filename header */
.code-block-container pre {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
}