.font-display {
    font-family: 'DM Serif Display', serif;
  }
  .font-sans {
    font-family: 'Inter', sans-serif;
  }
  .font-mono {
    font-family: 'Fira Code', monospace;
  }

  /* Gradient underline (hover) effect */
  .accent-border {
    position: relative;
  }
  .accent-border::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #10b981, #059669);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  .accent-border:hover::after {
    transform: scaleX(1);
  }

  /* Fade-in animation for elements */
  .animate-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Staggered fade-in for gallery images */
  .gallery-figure:nth-child(1) { animation-delay: 100ms; }
  .gallery-figure:nth-child(2) { animation-delay: 200ms; }
  .gallery-figure:nth-child(3) { animation-delay: 300ms; }
  .gallery-figure:nth-child(4) { animation-delay: 400ms; }
  .gallery-figure:nth-child(5) { animation-delay: 500ms; }
  .gallery-figure:nth-child(n+6) { animation-delay: 600ms; }

  /* Mobile menu transition */
  .mobile-menu {
    transition: max-height 0.3s ease;
  }

  /* Rich text content styling */
  .prose a {
    color: #059669 !important;
    text-decoration: underline !important;
    transition: all 0.2s;
  }

  .prose a:hover {
    color: #047857 !important;
  }

  /* Document/file links */
  .prose a[data-document] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
  }

  .prose a[data-document]::before {
    content: 'doc';
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #059669;
    margin-right: 0.5rem;
  }

  .prose a[data-document]:hover {
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
  }

  /* Better content formatting */
  .prose {
    max-width: none;
  }

  @media (min-width: 768px) {
    .prose {
      font-size: 1.125rem;
      line-height: 1.8;
    }
    
    .prose p {
      margin-bottom: 2rem;
    }
  }

  .prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose ul {
    list-style-type: disc;
    padding-left: 1.625em;
  }

  .prose ol {
    list-style-type: decimal;
    padding-left: 1.625em;
  }

  .prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  /* Enhanced image and video styling */
  .prose img,
  .prose iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    transition: transform 0.2s ease-in-out !important;
  }

  .prose img:hover,
  .prose iframe:hover {
    transform: scale(1.01) !important;
  }

  .prose img {
    height: auto !important;
    max-height: 600px !important;
    object-fit: contain !important;
  }

  .prose iframe {
    aspect-ratio: 16/9 !important;
    height: 480px !important;
  }

  @media (max-width: 640px) {
    .prose iframe {
      height: 240px !important;
    }
  }

  /* Code block styling */
  .prose pre {
    background: #1a1a1a;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 2rem 0;
    overflow-x: auto;
  }

  .prose code {
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
  }

  /* Gallery improvements */
  .gallery-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7));
    opacity: 0;
    transition: opacity 0.3s;
  }

  .gallery-figure:hover::after {
    opacity: 1;
  }

  /* Reading progress bar */
  .read-progress-container {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #f3f4f6;
    z-index: 50;
  }

  .read-progress-bar {
    height: 100%;
    background: #059669;
    width: 0%;
    transition: width 0.1s ease-out;
  }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    .prose {
      color: #e5e7eb;
    }
    .prose pre {
      background: #111111;
    }
  }
  .code-block {
    @apply my-8 rounded-lg overflow-hidden border border-gray-200;
    background: #1f2937;
  }
  
  .code-header {
    @apply flex items-center justify-between px-4 py-2 bg-gray-800 text-gray-300;
  }
  
  .language {
    @apply text-sm font-medium;
  }
  
  .copy-button {
    @apply px-3 py-1 text-sm font-medium text-gray-300 hover:text-white 
           border border-gray-600 rounded-md transition-colors duration-200
           hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 
           focus:ring-offset-gray-800 focus:ring-gray-500;
  }
  
  .code-block pre {
    @apply m-0 p-4 overflow-x-auto;
  }
  
  .code-block code {
    @apply font-mono text-sm leading-relaxed;
    font-family: 'Fira Code', monospace;
  }
  
  /* Customize Prism.js theme */
  .code-block .token.comment,
  .code-block .token.prolog,
  .code-block .token.doctype,
  .code-block .token.cdata {
    @apply text-gray-500;
  }
  
  .code-block .token.punctuation {
    @apply text-gray-400;
  }
  
  .code-block .token.property,
  .code-block .token.keyword,
  .code-block .token.tag {
    @apply text-emerald-400;
  }
  
  .code-block .token.string {
    @apply text-amber-300;
  }
  
  .code-block .token.operator,
  .code-block .token.entity,
  .code-block .token.url {
    @apply text-sky-300;
  }
  
  .code-block .token.function {
    @apply text-purple-400;
  }
  
  /* Copy button states */
  .copy-button.copied {
    @apply bg-emerald-600 border-emerald-500 text-white;
  }