Organic_Nature_Modal_Documentation

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/50 dark:bg-black/70 backdrop-blur-sm">
  <div class="relative w-full max-w-lg mx-auto overflow-hidden rounded-3xl shadow-xl bg-gradient-to-br from-amber-50 dark:from-stone-800 to-lime-50 dark:to-stone-900 ring-1 ring-lime-200 dark:ring-stone-700 transform transition-all duration-300 ease-out sm:rounded-4xl md:rounded-5xl lg:rounded-6xl">
    <div class="p-6 sm:p-8 md:p-10 lg:p-12">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-2xl font-semibold text-lime-800 dark:text-lime-300 sm:text-3xl font-serif leading-tight">Understanding Ecosystems</h2>
        <button aria-label="Close modal" class="text-stone-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-stone-600 rounded-full p-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <div class="prose prose-lime dark:prose-invert max-w-none text-stone-700 dark:text-stone-300">
        <p class="mb-4 leading-relaxed">An ecosystem is a community of living organisms (biotic components) interacting with their non-living physical environment (abiotic components). These interactions involve the flow of energy and the cycling of nutrients, creating a self-sustaining system.</p>
        <p class="mb-4 leading-relaxed">Key elements include producers (plants), consumers (animals), and decomposers (bacteria and fungi). Each plays a vital role in maintaining the delicate balance of life.</p>
        <figure class="my-6 rounded-xl overflow-hidden shadow-md ring-1 ring-lime-200 dark:ring-stone-700">
          <img src="https://picsum.photos/600/350?random=1" alt="Lush green forest ecosystem" class="w-full h-auto object-cover">
          <figcaption class="text-center text-sm p-2 bg-lime-100 dark:bg-stone-700 text-lime-700 dark:text-stone-300">A flourishing forest ecosystem demonstrating biodiversity.</figcaption>
        </figure>
        <h3 class="text-xl font-medium text-lime-700 dark:text-lime-400 mb-2 font-serif">Types of Ecosystems</h3>
        <ul class="list-disc list-inside space-y-1">
          <li><strong>Terrestrial:</strong> Forests, grasslands, deserts, tundras.</li>
          <li><strong>Aquatic:</strong> Freshwater (rivers, lakes) and marine (oceans, coral reefs).</li>
        </ul>
        <p class="mt-4 leading-relaxed">Understanding these intricate systems helps us appreciate the natural world and develop strategies for conservation.</p>
      </div>
    </div>

    <div class="flex justify-end p-6 pt-0 sm:p-8 sm:pt-0 md:p-10 md:pt-0 lg:p-12 lg:pt-0 border-t border-t-lime-200 dark:border-t-stone-700">
      <button class="px-6 py-3 rounded-full text-sm font-medium text-white bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95">
        Got It
      </button>
    </div>
  </div>
</div>