```html



  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Catppuccin Macchiato Theme
  <script src="/tailwindcss.js">"></script>
  <style>
 /* Custom styles to supplement Tailwind CSS */
 .glassmorphism {
 background: rgba(255,255,255,0.1);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border:1px solid rgba(255,255,255,0.2);
 }
 .color-swatch {
 width: 40px;
 height: 40px;
 border-radius: 4px;
 margin-bottom: 8px;
 }
 .palette-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 12px;
 }
 .theme-preview {
 transition: background-color 0.3s ease;
 padding: 20px;
 border-radius: 8px;
 margin-top: 16px;
 }
 .card {
 transition: transform 0.3s ease-in-out;
 }
 .card:hover {
 transform: scale(1.03);
 }
  </style>


  <header class="glassmorphism p-4 text-center sticky top-0 z-10">
  <nav>
  <ul class="flex justify-center space-x-4">
  <li>><a href="/catppuccin.org/index.html" class="hover:underline">Home
  <li>><a href="/catppuccin.org/themes.html" class="hover:underline">Themes
  <li>><a href="/catppuccin.org/community.html" class="hover:underline">Community
  </ul>
  </nav>
  </header>
  <main>
  <section class="hero p-8 text-center mt-20">
  <h1 class="text-5xl font-bold mb-4 text-[#f2cdcd] animate-fade-in">Macchiato Theme
  <p class="mb-4 text-lg">A rich and vibrant theme that adds a touch of elegance to your development workflow..</p>
  <a href="/github.com/catppuccin" class="bg-[#89B4FA] text-[#1e1e2e] px-4 py-2 rounded hover:bg-[#8fa4c4] transition duration-300">View on GitHub
  </section>

  <section class="theme-overview p-8 bg-[#2f2f3d] rounded-lg mx-auto max-w-4xl mt-10 glassmorphism card">
  <h2 class="text-3xl font-bold mb-6">Overview
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
  <div>
  <h3 class="text-2xl font-bold mb-3 text-[#89b4fa]">About Macchiato
  <p>Macchiato is a vibrant and rich variation of Catppuccin with a palette that emphasizes contrast and expressiveness. Ideal for users who want a dynamic and visually engaging workspace without sacrificing readability..</p>
  </div>
  <div>
  <h3 class="text-2xl font-bold mb-3 text-[#89b4fa]">Key Features
  <ul class="list-disc pl-4 space-y-2">
  <li>Vivid color palette that enhances visual feedback and code separation
  <li>High contrast for deep focus and immersive sessions
  <li>Custom color variables for easy integration into supported editors
  </ul>
  </div>
  </div>
  </section>

  <section class="color-palette p-8 mt-10 bg-[#2f2f3d] rounded-lg mx-auto max-w-6xl glassmorphism">
  <h2 class="text-3xl font-bold mb-4">Color Palette
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
  <div class="flex items-center space-x-2">
  <div class="color-swatch bg-[#cdd6f4]">"></div>
  <div class="text-[#cdd6f4]">Base #cdd6f4
  </div>
  <div class="flex items-center space-x-2">
  <div class="color-swatch bg-[#cba6f7]">"></div>
  <div class="text-[#cba6f7]">Accent #cba6f7
  </div>
  <div class="flex items-center space-x-2">
  <div class="color-swatch bg-[#89b4fa]">"></div>
  <div class="text-[#89b4fa]">Highlight #89b4fa
  </div>
  <div class="flex items-center space-x-2">
  <div class="color-swatch bg-[#94e2d5]">"></div>
  <div class="text-[#94e2d5]">Compliment #94e2d5
  </div>
  <div class="flex items-center space-x-2">
  <div class="color-swatch bg-[#fae6c6]">"></div>
  <div class="text-[#fae6c6]">Muted #fae6c6
  </div>
  </div>
  </section>

  <section class="code-preview p-8 mt-10">
  <h2 class="text-3xl font-bold mb-4">Code Preview
  <div class="bg