From ace9c7c216b6b26e05afcdb091bf7306ff69fd13 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 15:57:16 +0530
Subject: [PATCH 01/36] fix: solve overlap issue in community support card

---
 overrides/css/landing-page.css | 77 +++++++++++++++++++++++++++++++++-
 1 file changed, 75 insertions(+), 2 deletions(-)

diff --git a/overrides/css/landing-page.css b/overrides/css/landing-page.css
index 968c8a04..a7342fec 100644
--- a/overrides/css/landing-page.css
+++ b/overrides/css/landing-page.css
@@ -652,7 +652,8 @@ body:has(.landing-page) .md-sidebar--secondary {
 
 .landing-community-support-item {
   border-radius: var(--radius-lg);
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-md) calc(var(--spacing-lg) + 30px) var(--spacing-md)
+    var(--spacing-lg);
   border: 1px solid var(--border-color);
   display: flex;
   align-items: center;
@@ -664,6 +665,7 @@ body:has(.landing-page) .md-sidebar--secondary {
   text-decoration: none;
   color: inherit;
   min-height: 80px;
+  overflow: hidden;
 }
 
 .landing-community-support-item:hover {
@@ -684,6 +686,13 @@ body:has(.landing-page) .md-sidebar--secondary {
   opacity: 0;
   transition: all 0.2s ease;
   color: var(--text-primary);
+  z-index: 1;
+  pointer-events: none;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 [data-md-color-scheme="default"] .landing-community-support-arrow {
@@ -914,6 +923,28 @@ body:has(.landing-page) .md-sidebar--secondary {
 }
 
 /* Responsive Design */
+@media (max-width: 1024px) {
+  /* Two column layout for community support on medium to large tablets */
+  .landing-community-support-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-md);
+  }
+}
+
+@media (max-width: 992px) {
+  /* Reduce arrow size and adjust position for medium screens */
+  .landing-community-support-arrow {
+    font-size: 16px;
+    right: var(--spacing-md);
+  }
+
+  /* Reduce extra padding on medium screens */
+  .landing-community-support-item {
+    padding: var(--spacing-md) calc(var(--spacing-md) + 25px) var(--spacing-md)
+      var(--spacing-md);
+  }
+}
+
 @media (max-width: 768px) {
   .landing-tutorial-row {
     flex-direction: column;
@@ -928,8 +959,9 @@ body:has(.landing-page) .md-sidebar--secondary {
     grid-template-columns: repeat(2, 1fr);
   }
 
+  /* Keep two column layout for community support */
   .landing-community-support-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   .landing-hero-content {
@@ -942,4 +974,45 @@ body:has(.landing-page) .md-sidebar--secondary {
     align-self: stretch;
     justify-content: center;
   }
+
+  /* Hide arrow on mobile to prevent overlap */
+  .landing-community-support-arrow {
+    display: none !important;
+  }
+
+  /* Adjust community support item padding for mobile - remove extra right padding when arrow is hidden */
+  .landing-community-support-item {
+    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md)
+      var(--spacing-lg);
+  }
+}
+
+@media (max-width: 480px) {
+  .landing-features-list {
+    grid-template-columns: 1fr;
+  }
+
+  .landing-integration-grid {
+    grid-template-columns: 1fr;
+  }
+
+  /* Switch to single column only on very small screens */
+  .landing-community-support-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .landing-main-content {
+    padding: 0 var(--spacing-md) var(--spacing-xl) var(--spacing-md);
+  }
+
+  /* Ensure no arrow interference on very small screens */
+  .landing-community-support-arrow {
+    display: none !important;
+  }
+
+  /* Compact padding for very small screens */
+  .landing-community-support-item {
+    padding: var(--spacing-sm) var(--spacing-md);
+    min-height: 60px;
+  }
 }

From 2952e8c51392614f3b0787829b32aaf0b9b42ea8 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 16:02:50 +0530
Subject: [PATCH 02/36] fix: resolve card view issue of popular integration
 section

---
 overrides/css/landing-page.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/overrides/css/landing-page.css b/overrides/css/landing-page.css
index a7342fec..233138f6 100644
--- a/overrides/css/landing-page.css
+++ b/overrides/css/landing-page.css
@@ -924,6 +924,11 @@ body:has(.landing-page) .md-sidebar--secondary {
 
 /* Responsive Design */
 @media (max-width: 1024px) {
+  /* Three column layout for integration grid on tablets and small laptops */
+  .landing-integration-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   /* Two column layout for community support on medium to large tablets */
   .landing-community-support-grid {
     grid-template-columns: repeat(2, 1fr);

From 3262e0f1c2b193c377151f39d15008909db43a98 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 16:05:46 +0530
Subject: [PATCH 03/36] fix: change css for hero section banner

---
 overrides/css/landing-page.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/overrides/css/landing-page.css b/overrides/css/landing-page.css
index 233138f6..37befe3a 100644
--- a/overrides/css/landing-page.css
+++ b/overrides/css/landing-page.css
@@ -924,6 +924,20 @@ body:has(.landing-page) .md-sidebar--secondary {
 
 /* Responsive Design */
 @media (max-width: 1024px) {
+  /* Hero section - column layout for tablets and small laptops */
+  .landing-hero-content {
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-lg);
+    text-align: center;
+  }
+
+  .landing-hero-buttons {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-md);
+  }
+
   /* Three column layout for integration grid on tablets and small laptops */
   .landing-integration-grid {
     grid-template-columns: repeat(3, 1fr);

From 18a0bdb1105c62c8d5cf3ba36853e373e5f6529b Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 16:47:41 +0530
Subject: [PATCH 04/36] fix: hero banner button css

---
 overrides/css/landing-page.css | 46 +++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/overrides/css/landing-page.css b/overrides/css/landing-page.css
index 37befe3a..010c891e 100644
--- a/overrides/css/landing-page.css
+++ b/overrides/css/landing-page.css
@@ -254,14 +254,17 @@ body:has(.landing-page) .md-sidebar--secondary {
   transition: all 0.3s ease;
   background-color: rgb(107, 118, 226);
   border: 1px solid transparent;
-  padding: 5px 14px !important;
+  padding: 8px 16px !important;
   text-decoration: none;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: var(--spacing-xs);
   font-size: var(--font-size-md);
   white-space: nowrap;
+  min-height: 36px;
+  line-height: 1.2;
 }
 
 .primary-button:hover {
@@ -293,18 +296,48 @@ body:has(.landing-page) .md-sidebar--secondary {
 .landing-btn-content {
   display: flex;
   align-items: center;
-  gap: 0.5em;
+  justify-content: center;
+  gap: 6px;
   white-space: nowrap;
+  line-height: 1.2;
 }
 
 .landing-play-icon {
   display: flex;
   align-items: center;
-  font-size: 1.15em;
-  margin-right: 0.1em;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
   flex-shrink: 0;
 }
 
+.landing-play-icon img {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+/* Additional button text containment rules */
+.primary-button span {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  line-height: 1.2;
+}
+
+.landing-btn-content span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Ensure buttons maintain consistent height */
+.landing-hero-buttons .primary-button {
+  min-height: 36px;
+  height: auto;
+  box-sizing: border-box;
+}
+
 /* Section Styles */
 .landing-section {
   margin-bottom: 15px;
@@ -935,7 +968,9 @@ body:has(.landing-page) .md-sidebar--secondary {
   .landing-hero-buttons {
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: var(--spacing-md);
+    flex-wrap: wrap;
   }
 
   /* Three column layout for integration grid on tablets and small laptops */
@@ -992,6 +1027,9 @@ body:has(.landing-page) .md-sidebar--secondary {
   .landing-hero-buttons {
     align-self: stretch;
     justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
   }
 
   /* Hide arrow on mobile to prevent overlap */

From 4f2c4d421a334284d86dc5f705e70cd30db50ec9 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 16:54:16 +0530
Subject: [PATCH 05/36] fix: resolve button size issue

---
 overrides/css/landing-page.css | 18 +++++++++---------
 overrides/partials/index.html  |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/overrides/css/landing-page.css b/overrides/css/landing-page.css
index 010c891e..5f3fe22b 100644
--- a/overrides/css/landing-page.css
+++ b/overrides/css/landing-page.css
@@ -243,7 +243,7 @@ body:has(.landing-page) .md-sidebar--secondary {
 }
 
 /* Primary Button Styles */
-.primary-button {
+.primary-button-hero {
   position: relative;
   border: none;
   color: white !important;
@@ -267,24 +267,24 @@ body:has(.landing-page) .md-sidebar--secondary {
   line-height: 1.2;
 }
 
-.primary-button:hover {
+.primary-button-hero:hover {
   background-color: var(--color-hover-card);
   color: white !important;
   text-decoration: none;
 }
 
-.primary-button:visited,
-.primary-button:focus {
+.primary-button-hero:visited,
+.primary-button-hero:focus {
   color: white !important;
   text-decoration: none;
 }
 
-.primary-button *,
-.primary-button:hover * {
+.primary-button-hero *,
+.primary-button-hero:hover * {
   color: white !important;
 }
 
-.primary-button:disabled {
+.primary-button-hero:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   background-image: linear-gradient(180deg, #8cc7ff 0%, #7ab7ff 100%),
@@ -318,7 +318,7 @@ body:has(.landing-page) .md-sidebar--secondary {
 }
 
 /* Additional button text containment rules */
-.primary-button span {
+.primary-button-hero span {
   display: flex;
   align-items: center;
   height: 100%;
@@ -332,7 +332,7 @@ body:has(.landing-page) .md-sidebar--secondary {
 }
 
 /* Ensure buttons maintain consistent height */
-.landing-hero-buttons .primary-button {
+.landing-hero-buttons .primary-button-hero {
   min-height: 36px;
   height: auto;
   box-sizing: border-box;
diff --git a/overrides/partials/index.html b/overrides/partials/index.html
index dff7cac1..deabb2de 100644
--- a/overrides/partials/index.html
+++ b/overrides/partials/index.html
@@ -17,7 +17,7 @@
             </p>
           </div>
           <div class="landing-hero-buttons">
-            <a href="overview/" class="primary-button">
+            <a href="overview/" class="primary-button-hero">
               <span class="landing-btn-content">
                 <span class="landing-play-icon">
                   <img src="/docs/assets/view.svg" alt="" />
@@ -25,7 +25,7 @@
                 <span>Overview</span>
               </span>
             </a>
-            <a href="/downloads/" class="primary-button">
+            <a href="/downloads/" class="primary-button-hero">
               <span class="landing-btn-content">
                 <span class="landing-play-icon">
                   <img src="/docs/assets/download.svg" alt="" />

From c75ca5c468ec401eeb0330a5f23ffee1367ea998 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 17:09:48 +0530
Subject: [PATCH 06/36] fix: remove unused padding

---
 overrides/partials/header.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/overrides/partials/header.html b/overrides/partials/header.html
index bc943c83..51e0b5e4 100644
--- a/overrides/partials/header.html
+++ b/overrides/partials/header.html
@@ -8,9 +8,9 @@
       <div class="lg:block hidden">
         <header class="sticky top-0 z-50 w-full">
           <div
-            class="container mx-auto px-4 sm:px-6 lg:px-8 xl:px-10 flex justify-between items-center py-2"
+            class="container mx-auto px-4 sm:px-0 flex justify-between items-center py-2"
           >
-            <a class="flex items-center h-11 w-40 md:w-52" href="/">
+            <a class="flex items-center h-11 w-48" href="/">
               <img
                 src="/docs/assets/o2-logo-readme.svg"
                 alt="OpenObserve"
@@ -171,7 +171,7 @@
                 Log In
               </a>
               <a
-                class="github-button"
+                class="github-button py-1.5"
                 href="https://github.com/openobserve/openobserve"
                 data-color-scheme="light"
                 data-size="large"

From 510b32c4c24a5a0f4a55439c9701d14a3158b03d Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 18:16:31 +0530
Subject: [PATCH 07/36] fix: change css for search bar

---
 docs/stylesheets/extra.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 2ce80a1b..5a553339 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -202,10 +202,10 @@ html {
   color: #222 !important;
   transition: border-color 0.2s;
   box-shadow: none !important;
-  padding: 0.2em 3.2em 0.2em 3.2em !important; /* Remove extra right padding for desktop */
+  padding: 8px 3.2em 8px 3.2em !important; /* Match docs title padding: 5px vertical */
   font-size: 1.5em !important;
   min-width: 20em !important;
-  height: 3em !important;
+  height: auto !important; /* Let height be determined by padding + content */
   /* Remove background image for desktop - will be added for mobile only */
 }
 .md-search__input::placeholder {
@@ -221,7 +221,7 @@ html {
   /* transition: color 0.2s; */
   position: absolute !important;
   right: 1.5em !important;
-  top: 50% !important;
+  top: 46% !important;
   transform: translateY(-50%) !important;
   font-size: 1.25em !important;
   pointer-events: auto;
@@ -243,10 +243,10 @@ html {
   color: #fff !important;
   border-radius: 999px !important;
   box-shadow: none !important;
-  padding: 0.85em 3.2em 0.85em 3.2em !important; /* Remove extra right padding for desktop */
+  padding: 5px 3.2em 5px 3.2em !important; /* Match docs title padding: 5px vertical */
   font-size: 1.5em !important;
   min-width: 20em !important;
-  height: 3em !important;
+  height: auto !important; /* Let height be determined by padding + content */
   /* Remove close button for desktop - will be added for mobile only */
 }
 [data-md-color-scheme="slate"] .md-search__input::placeholder {
@@ -515,6 +515,7 @@ html {
   .md-header .md-search__input {
     min-width: 14em !important;
     font-size: 1.5em !important;
+    height: auto !important; /* Ensure consistent height calculation */
   }
 }
 
@@ -536,7 +537,7 @@ html {
     width: 100% !important;
     min-width: auto !important;
     margin: 0 !important;
-    padding: 0.75em 4.5em 0.75em 1em !important; /* Extra right padding for close button on mobile */
+    padding: 5px 4.5em 5px 1em !important; /* Match docs title padding: 5px vertical, extra right for close button */
     font-size: 1.2em !important;
     border-radius: 8px !important;
     pointer-events: auto !important;
@@ -602,5 +603,6 @@ html {
     min-width: 20em !important;
     font-size: 1.5em !important;
     display: inline-block !important;
+    height: auto !important; /* Ensure consistent height calculation */
   }
 }

From 356343d3685c671e19294da3b26cf766d9754c11 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 9 Sep 2025 18:26:33 +0530
Subject: [PATCH 08/36] fix: add proper padding

---
 docs/stylesheets/extra.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 5a553339..721dab0d 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -171,7 +171,7 @@ html {
   color: #fff !important;
   border-radius: 8px !important;
   box-shadow: none !important;
-  padding: 0.75em 2.5em 0.75em 3.2em !important;
+  padding: 8px 3.2em 8px 3.2em !important;
   font-size: 1.5em !important;
   min-width: 16em !important;
 }
@@ -241,9 +241,9 @@ html {
 [data-md_color-scheme="slate"] .md-search__input {
   background-color: #7c3aed !important;
   color: #fff !important;
-  border-radius: 999px !important;
+  border-radius: 8px !important;
   box-shadow: none !important;
-  padding: 5px 3.2em 5px 3.2em !important; /* Match docs title padding: 5px vertical */
+  padding: 8px 3.2em 8px 3.2em !important; /* Match docs title padding: 5px vertical */
   font-size: 1.5em !important;
   min-width: 20em !important;
   height: auto !important; /* Let height be determined by padding + content */

From 2a5bc48eb68a968e4851f007e97067b62a591b73 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 10 Sep 2025 12:59:27 +0530
Subject: [PATCH 09/36] fix: solve sidebar highlight issue

---
 docs/js/toc-highlight.js   |  86 +++++++++++++++++
 docs/stylesheets/extra.css | 189 +++++++++++++++++++++++++------------
 mkdocs.yml                 |   1 +
 3 files changed, 217 insertions(+), 59 deletions(-)
 create mode 100644 docs/js/toc-highlight.js

diff --git a/docs/js/toc-highlight.js b/docs/js/toc-highlight.js
new file mode 100644
index 00000000..271a2b3a
--- /dev/null
+++ b/docs/js/toc-highlight.js
@@ -0,0 +1,86 @@
+/**
+ * Simple TOC scroll-based highlighting
+ * Highlights current section in purple text
+ */
+
+(function () {
+  "use strict";
+
+  let tocLinks = [];
+  let headings = [];
+
+  function init() {
+    // Find TOC links
+    tocLinks = Array.from(
+      document.querySelectorAll(".md-nav--secondary .md-nav__link")
+    );
+    if (tocLinks.length === 0) return;
+
+    // Find corresponding headings
+    headings = tocLinks
+      .map((link) => {
+        const href = link.getAttribute("href");
+        return href && href.startsWith("#")
+          ? document.getElementById(href.substring(1))
+          : null;
+      })
+      .filter((h) => h !== null);
+
+    if (headings.length === 0) return;
+
+    // Listen to scroll
+    window.addEventListener("scroll", updateHighlight, { passive: true });
+    updateHighlight();
+  }
+
+  function updateHighlight() {
+    const scrollTop = window.pageYOffset;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    // If near bottom, highlight last item
+    if (scrollTop + windowHeight >= documentHeight - 50) {
+      setActive(tocLinks.length - 1);
+      return;
+    }
+
+    // Find current section
+    let activeIndex = -1;
+    for (let i = headings.length - 1; i >= 0; i--) {
+      if (headings[i] && headings[i].getBoundingClientRect().top <= 80) {
+        activeIndex = i;
+        break;
+      }
+    }
+
+    setActive(activeIndex);
+  }
+
+  function setActive(index) {
+    // Remove all active classes
+    tocLinks.forEach((link) => {
+      link.classList.remove("md-nav__link--active", "is-active");
+    });
+
+    // Add active class to current item
+    if (index >= 0 && index < tocLinks.length) {
+      tocLinks[index].classList.add("md-nav__link--active", "is-active");
+    }
+  }
+
+  // Initialize when ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  // Re-initialize on page changes
+  let currentUrl = location.href;
+  new MutationObserver(() => {
+    if (location.href !== currentUrl) {
+      currentUrl = location.href;
+      setTimeout(init, 100);
+    }
+  }).observe(document, { childList: true, subtree: true });
+})();
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 721dab0d..bc21e1b5 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -94,6 +94,30 @@ html {
   }
 }
 
+.md-nav--secondary .md-nav__link.is-active,
+.md-nav--secondary .md-nav__link--active {
+  color: #7c3aed !important;
+  font-weight: 600 !important;
+  /* Remove border and padding modifications */
+}
+
+.md-nav--secondary .md-nav__link:hover {
+  color: #7c3aed;
+}
+
+/* Dark theme TOC styling - clean purple text only */
+[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link.is-active,
+[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
+  color: #a78bfa !important;
+  font-weight: 600 !important;
+}
+
+[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover {
+  color: #a78bfa;
+}
+
+/* Note: TOC positioning is now handled in the secondary sidebar section below */
+
 [data-md-color-scheme="slate"] .md-search__input {
   background-color: #7c3aed !important;
   border: 2px solid #7c3aed !important;
@@ -278,6 +302,11 @@ html {
   z-index: 10 !important;
   /* allow the active indicator to sit inside the rounded border */
   overflow: visible !important;
+  /* Fix positioning to prevent movement */
+  position: sticky !important;
+  top: 5rem !important;
+  max-height: calc(100vh - 6.4rem) !important;
+  transform: none !important;
 }
 
 @media (min-width: 1024px) {
@@ -294,6 +323,11 @@ html {
   box-shadow: none !important;
   z-index: 10 !important;
   overflow: hidden !important;
+  /* Fix positioning to prevent movement */
+  position: sticky !important;
+  top: 3.2rem !important;
+  max-height: calc(100vh - 6.4rem) !important;
+  transform: none !important;
 }
 
 .md-sidebar__title,
@@ -334,21 +368,6 @@ html {
   /* font-weight on an empty pseudo-element has no effect; kept empty for visual bar */
 }
 
-/* Thin sidebar scrollbar thumb, flush with border */
-.md-sidebar--primary .md-sidebar__scrollwrap {
-  scrollbar-width: thin !important;
-}
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
-  width: 6px !important;
-  background: transparent !important;
-}
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
-  background: #7c3aed !important;
-  border-radius: 6px !important;
-  margin: 0 !important;
-  border: none !important;
-}
-
 /* --- Sidebar: Add right margin for full rounded border visibility --- */
 .md-sidebar--primary {
   margin-right: 1em !important;
@@ -382,16 +401,6 @@ html {
   border-right: none !important;
   box-sizing: border-box !important;
 }
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
-  width: 6px !important;
-  background: transparent !important;
-}
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
-  background: #7c3aed !important;
-  border-radius: 6px !important;
-  border-right: none !important;
-  margin-right: 0 !important;
-}
 
 /* --- Final fix: Remove all space between sidebar scrollbar and border --- */
 .md-sidebar--primary {
@@ -438,47 +447,53 @@ html {
 }
 
 /* Hide native scrollbar inside the sidebar scrollwrap and provide a custom
-   visual track + thumb that we control via JS so the active marker can be
-   aligned exactly with the visible thumb. */
-.md-sidebar--primary .md-sidebar__scrollwrap {
-  scrollbar-width: none !important; /* Firefox */
-}
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
-  display: none !important; /* Chrome/Safari */
+/* --- Remove background and shadow from sidebar nav title --- */
+.md-sidebar--primary .md-nav__title,
+.md-sidebar--secondary .md-nav__title,
+.md-sidebar--primary .md-nav__title:before,
+.md-sidebar--primary .md-nav__title:after {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
 }
 
-/* custom track & thumb appended as children of the outer sidebar */
-.md-sidebar--primary > .o-scroll-track {
-  position: absolute;
-  right: 2px;
-  width: 12px; /* includes some padding so thumb doesn't touch the border */
-  top: 0;
-  height: 100%;
-  pointer-events: none; /* visual only */
+/* --- SECONDARY SIDEBAR (TOC) Custom Design --- */
+.md-sidebar--secondary {
+  background: rgb(245, 243, 254) !important;
+  border: 2px solid #7c3aed !important;
+  border-radius: 8px !important;
+  padding: 1em 0.5em !important;
+  margin-left: 1em !important;
+  box-shadow: none !important;
+  z-index: 9 !important;
+  position: sticky !important;
+  top: 10rem !important;
+  max-height: calc(100vh - 100px) !important;
+  overflow-y: auto !important;
+  /* Keep it visible when scrolling */
+  transform: none !important;
 }
-.md-sidebar--primary > .o-scroll-track .o-scroll-thumb {
-  position: absolute;
-  right: 3px; /* place thumb inside track, a few px from border */
-  width: 6px;
-  background: #4b237a; /* purple thumb */
-  border-radius: 6px;
-  box-shadow: 0 0 0 2px rgba(75, 35, 122, 0.06) inset;
-  transition: top 120ms linear, height 120ms linear;
-  pointer-events: auto;
+
+@media (min-width: 1024px) {
+  .md-sidebar--secondary {
+    margin-right: 12px !important;
+  }
 }
 
-/* Keep the active indicator visually matching the custom thumb (same color)
-   but slightly narrower so it reads as an indicator inside the sidebar. */
-.md-sidebar--primary > .o-active-indicator {
-  right: 8px; /* move it slightly left so it appears inside the content area */
-  width: 4px;
-  background: #4b237a;
+/* Dark theme secondary sidebar */
+[data-md-color-scheme="slate"] .md-sidebar--secondary {
+  background: rgb(23, 20, 29) !important;
+  border: 2px solid #7c3aed !important;
+  border-radius: 8px !important;
+  padding: 1em 0.5em !important;
+  margin-left: 1em !important;
+  box-shadow: none !important;
 }
 
-/* --- Remove background and shadow from sidebar nav title --- */
-.md-sidebar--primary .md-nav__title,
-.md-sidebar--primary .md-nav__title:before,
-.md-sidebar--primary .md-nav__title:after {
+/* Ensure secondary sidebar title has no background */
+.md-sidebar--secondary .md-nav__title,
+.md-sidebar--secondary .md-nav__title:before,
+.md-sidebar--secondary .md-nav__title:after {
   background: transparent !important;
   box-shadow: none !important;
   border: none !important;
@@ -606,3 +621,59 @@ html {
     height: auto !important; /* Ensure consistent height calculation */
   }
 }
+
+/* Slim scrollbar styling for both sidebars - High specificity override */
+.md-sidebar--primary .md-sidebar__scrollwrap,
+.md-sidebar--secondary .md-sidebar__scrollwrap {
+  scrollbar-width: thin !important;
+  scrollbar-color: #7c3aed transparent !important;
+}
+
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar,
+.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
+  width: 3px !important;
+  height: 3px !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track,
+.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb,
+.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
+  background: #7c3aed !important;
+  background-color: #7c3aed !important;
+  border-radius: 3px !important;
+  border: none !important;
+  min-height: 20px !important;
+}
+
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover,
+.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
+  background: #6d28d9 !important;
+  background-color: #6d28d9 !important;
+}
+
+/* Fix sidebar overflow and ensure proper scrolling */
+.md-sidebar--primary .md-sidebar__scrollwrap,
+.md-sidebar--secondary .md-sidebar__scrollwrap {
+  overflow-y: auto !important;
+  max-height: inherit !important;
+}
+
+/* Ensure sidebars maintain their position and don't move */
+.md-sidebar--primary,
+.md-sidebar--secondary {
+  will-change: auto !important;
+  transition: none !important;
+}
+
+/* Override any MkDocs Material default transforms */
+.md-sidebar--primary[data-md-state],
+.md-sidebar--secondary[data-md-state] {
+  transform: none !important;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index e722b27a..535e5d64 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -23,6 +23,7 @@ extra_javascript:
   - js/vector_co.js
   - js/search-close-minimal.js
   - js/search-tracking.js
+  - js/toc-highlight.js
   - https://buttons.github.io/buttons.js
   - js/reo.js
 extra:

From 53e648d9075e0eea84f1af8b8cae79a2427fc5e9 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 10 Sep 2025 13:02:25 +0530
Subject: [PATCH 10/36] fix: resolve overlap issue in bottom of toc

---
 docs/stylesheets/extra.css | 63 ++++++++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index bc21e1b5..1f4e6ea6 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -313,6 +313,9 @@ html {
   .md-sidebar--primary {
     margin-left: 12px;
   }
+  .md-sidebar--secondary {
+    margin-right: 12px !important;
+  }
 }
 [data-md-color-scheme="slate"] .md-sidebar--primary {
   background: rgb(23, 20, 29) !important;
@@ -465,20 +468,18 @@ html {
   padding: 1em 0.5em !important;
   margin-left: 1em !important;
   box-shadow: none !important;
-  z-index: 9 !important;
+  z-index: 200 !important;
   position: sticky !important;
-  top: 10rem !important;
-  max-height: calc(100vh - 100px) !important;
-  overflow-y: auto !important;
+  top: 5rem !important;
+  max-height: calc(100vh - 6.4rem) !important;
+  overflow: visible !important;
   /* Keep it visible when scrolling */
   transform: none !important;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
-@media (min-width: 1024px) {
-  .md-sidebar--secondary {
-    margin-right: 12px !important;
-  }
-}
+
 
 /* Dark theme secondary sidebar */
 [data-md-color-scheme="slate"] .md-sidebar--secondary {
@@ -488,6 +489,14 @@ html {
   padding: 1em 0.5em !important;
   margin-left: 1em !important;
   box-shadow: none !important;
+  z-index: 200 !important;
+  position: sticky !important;
+  top: 5rem !important;
+  max-height: calc(100vh - 6.4rem) !important;
+  overflow: visible !important;
+  transform: none !important;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 /* Ensure secondary sidebar title has no background */
@@ -499,6 +508,31 @@ html {
   border: none !important;
 }
 
+/* Secondary sidebar scroll container - match primary sidebar behavior */
+.md-sidebar--secondary .md-sidebar__scrollwrap {
+  flex: 1 !important;
+  overflow-y: auto !important;
+  padding: 0.25rem 0 2.25rem !important;
+  overscroll-behavior: contain !important;
+  width: 100% !important;
+  padding-right: 0 !important;
+  margin-right: 0 !important;
+  border-right: none !important;
+  box-sizing: border-box !important;
+}
+
+/* Remove any masking pseudo-elements from secondary sidebar */
+.md-sidebar--secondary .md-sidebar__scrollwrap:after {
+  display: none !important;
+}
+
+.md-sidebar--secondary:before,
+.md-sidebar--secondary:after,
+.md-sidebar--secondary .md-sidebar__inner:before,
+.md-sidebar--secondary .md-sidebar__inner:after {
+  display: none !important;
+}
+
 .md-nav__title {
   font-weight: 700 !important;
   /* Ensure the nav title is not sticky — override any theme "sticky" rules */
@@ -677,3 +711,14 @@ html {
 .md-sidebar--secondary[data-md-state] {
   transform: none !important;
 }
+
+/* Ensure both sidebars have proper footer clearance */
+@media (min-width: 60em) {
+  .md-main,
+  .md-content {
+    padding-bottom: 0.5rem;
+  }
+  .md-footer {
+    z-index: 0;
+  }
+}

From e83876b8b8b1e15402f9640fa4c2390ce078f8da Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 10 Sep 2025 15:16:10 +0530
Subject: [PATCH 11/36] fix: change css for sidebar and toc

---
 docs/stylesheets/extra.css | 221 ++++++++++++++++++++++++++++---------
 1 file changed, 166 insertions(+), 55 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 1f4e6ea6..e72fede4 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -42,15 +42,6 @@ html {
    4. Provide stable scrollbar to avoid layout shift.
 */
 @media (min-width: 60em) {
-  /* Minimal, non-intrusive adjustments */
-  .md-sidebar--primary {
-    position: sticky; /* stay visible */
-    top: 0; /* eliminate excess gap */
-    z-index: 200;
-    display: flex;
-    flex-direction: column;
-  }
-
   /* Add bottom padding to main content so sidebar never gets overlapped by footer */
   .md-main,
   .md-content {
@@ -59,12 +50,19 @@ html {
   .md-footer {
     z-index: 0;
   }
-  /* Give room so last items can scroll fully into view */
+  /* Primary sidebar scroll container - content-based height like secondary sidebar */
   .md-sidebar--primary .md-sidebar__scrollwrap {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.25rem 0 2.25rem; /* trim top, moderate bottom */
-    overscroll-behavior: contain;
+    overflow-y: auto !important;
+    padding: 0.25rem 0 1rem !important;
+    overscroll-behavior: contain !important;
+    width: 100% !important;
+    padding-right: 0 !important;
+    margin-right: 0 !important;
+    border-right: none !important;
+    box-sizing: border-box !important;
+    /* Allow content-based height - exactly like secondary sidebar */
+    height: auto !important;
+    max-height: calc(100vh - 12rem) !important;
   }
   /* Remove bottom fade/overlay that appeared as white block */
   .md-sidebar--primary .md-sidebar__scrollwrap:after {
@@ -291,6 +289,21 @@ html {
   pointer-events: none;
 }
 
+/* --- NAVBAR HEIGHT CONSISTENCY --- */
+.md-header {
+  min-height: 4rem !important;
+  height: auto !important;
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 1000 !important;
+}
+
+.md-header__inner {
+  min-height: 4rem !important;
+  height: auto !important;
+  padding: 0.5rem 1rem !important;
+}
+
 /* --- FINAL: Sidebar Custom Design --- */
 .md-sidebar--primary {
   background: rgb(245, 243, 254) !important;
@@ -299,14 +312,17 @@ html {
   padding: 1em 0.5em !important;
   /* margin-right: 2em !important; */
   box-shadow: none !important;
-  z-index: 10 !important;
-  /* allow the active indicator to sit inside the rounded border */
-  overflow: visible !important;
-  /* Fix positioning to prevent movement */
+  z-index: 200 !important;
   position: sticky !important;
-  top: 5rem !important;
-  max-height: calc(100vh - 6.4rem) !important;
+  top: 10rem !important;
+  /* Content-based height instead of fixed - exactly like secondary sidebar */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: calc(100vh - 10rem) !important;
+  overflow: hidden !important;
+  /* Keep it visible when scrolling */
   transform: none !important;
+  display: block !important;
 }
 
 @media (min-width: 1024px) {
@@ -324,13 +340,16 @@ html {
   padding: 1em 0.5em !important;
   margin-right: 2em !important;
   box-shadow: none !important;
-  z-index: 10 !important;
-  overflow: hidden !important;
-  /* Fix positioning to prevent movement */
+  z-index: 200 !important;
   position: sticky !important;
-  top: 3.2rem !important;
-  max-height: calc(100vh - 6.4rem) !important;
+  top: 10rem !important;
+  /* Content-based height instead of fixed - exactly like secondary sidebar */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: calc(100vh - 10rem) !important;
+  overflow: hidden !important;
   transform: none !important;
+  display: block !important;
 }
 
 .md-sidebar__title,
@@ -344,31 +363,27 @@ html {
 .md-sidebar--primary .md-nav__item--active > .md-nav__link {
   position: relative !important;
   background: transparent !important;
-  border-radius: 5px !important;
+  border-radius: 3px !important;
   /* make the active link text bold (applies to the text, not the empty pseudo-element) */
   font-weight: 700 !important;
   /* leave space on the RIGHT for the indicator that sits against the sidebar border */
   padding-right: 1.6em !important;
   /* keep a little left padding for text alignment */
   padding-left: 1.1em !important;
-  overflow: visible !important;
+  overflow: hidden !important;
 }
 .md-sidebar--primary .md-nav__item--active > .md-nav__link::before {
   content: "";
   position: absolute;
-  /* place the indicator INSIDE the sidebar inner border (right side in this theme)
-     tweak the `right` value if you want it closer/further from the border */
-  right: 8px; /* adjust this number to visually align with your border (2px) */
+  right: 8px;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 4px;
-  height: 25px;
+  height: 30px;
   background: #4b237a;
-  /* slightly rounded marker to match sidebar corner curvature */
   border-radius: 3px !important;
   z-index: 3 !important;
-  /* font-weight on an empty pseudo-element has no effect; kept empty for visual bar */
 }
 
 /* --- Sidebar: Add right margin for full rounded border visibility --- */
@@ -460,43 +475,55 @@ html {
   border: none !important;
 }
 
+/* Ensure primary sidebar inner container is content-based like secondary */
+.md-sidebar--primary .md-sidebar__inner {
+  height: auto !important;
+  min-height: auto !important;
+  display: block !important;
+  overflow: hidden !important;
+}
+
+/* Ensure all navigation elements stay within sidebar boundaries */
+.md-sidebar--primary .md-nav,
+.md-sidebar--primary .md-nav__list,
+.md-sidebar--primary .md-nav__item,
+.md-sidebar--primary .md-nav__link {
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  word-wrap: break-word !important;
+}
+
 /* --- SECONDARY SIDEBAR (TOC) Custom Design --- */
 .md-sidebar--secondary {
-  background: rgb(245, 243, 254) !important;
-  border: 2px solid #7c3aed !important;
-  border-radius: 8px !important;
-  padding: 1em 0.5em !important;
   margin-left: 1em !important;
-  box-shadow: none !important;
   z-index: 200 !important;
   position: sticky !important;
-  top: 5rem !important;
-  max-height: calc(100vh - 6.4rem) !important;
+  top: 10rem !important;
+  /* Content-based height instead of fixed */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: calc(100vh - 10rem) !important;
   overflow: visible !important;
   /* Keep it visible when scrolling */
   transform: none !important;
-  display: flex !important;
-  flex-direction: column !important;
+  display: block !important;
 }
 
-
-
 /* Dark theme secondary sidebar */
 [data-md-color-scheme="slate"] .md-sidebar--secondary {
-  background: rgb(23, 20, 29) !important;
-  border: 2px solid #7c3aed !important;
-  border-radius: 8px !important;
   padding: 1em 0.5em !important;
   margin-left: 1em !important;
-  box-shadow: none !important;
   z-index: 200 !important;
   position: sticky !important;
-  top: 5rem !important;
-  max-height: calc(100vh - 6.4rem) !important;
+  top: 10rem !important;
+  /* Content-based height instead of fixed */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: calc(100vh - 5rem) !important;
   overflow: visible !important;
   transform: none !important;
-  display: flex !important;
-  flex-direction: column !important;
+  display: block !important;
 }
 
 /* Ensure secondary sidebar title has no background */
@@ -508,17 +535,26 @@ html {
   border: none !important;
 }
 
-/* Secondary sidebar scroll container - match primary sidebar behavior */
+/* Ensure secondary sidebar inner container is content-based */
+.md-sidebar--secondary .md-sidebar__inner {
+  height: auto !important;
+  min-height: auto !important;
+  display: block !important;
+}
+
+/* Secondary sidebar scroll container - content-based height */
 .md-sidebar--secondary .md-sidebar__scrollwrap {
-  flex: 1 !important;
   overflow-y: auto !important;
-  padding: 0.25rem 0 2.25rem !important;
+  padding: 0.25rem 0 1rem !important;
   overscroll-behavior: contain !important;
   width: 100% !important;
   padding-right: 0 !important;
   margin-right: 0 !important;
   border-right: none !important;
   box-sizing: border-box !important;
+  /* Allow content-based height */
+  height: auto !important;
+  max-height: calc(100vh - 7rem) !important;
 }
 
 /* Remove any masking pseudo-elements from secondary sidebar */
@@ -704,6 +740,9 @@ html {
 .md-sidebar--secondary {
   will-change: auto !important;
   transition: none !important;
+  /* Force sticky positioning and prevent any transforms */
+  position: sticky !important;
+  transform: none !important;
 }
 
 /* Override any MkDocs Material default transforms */
@@ -712,6 +751,18 @@ html {
   transform: none !important;
 }
 
+/* Stronger override for primary sidebar positioning */
+.md-sidebar--primary {
+  top: 8rem !important;
+  position: sticky !important;
+}
+
+/* Stronger override for secondary sidebar positioning */
+.md-sidebar--secondary {
+  top: 8rem !important;
+  position: sticky !important;
+}
+
 /* Ensure both sidebars have proper footer clearance */
 @media (min-width: 60em) {
   .md-main,
@@ -722,3 +773,63 @@ html {
     z-index: 0;
   }
 }
+
+/* === FINAL SIDEBAR POSITIONING OVERRIDE === */
+/* These rules must be at the end to override all other positioning */
+.md-sidebar--primary,
+.md-sidebar--primary[data-md-component="sidebar"],
+.md-sidebar--primary[data-md-state],
+.md-sidebar--primary[data-md-state="lock"] {
+  position: sticky !important;
+  top: 8rem !important;
+  transform: none !important;
+  transition: none !important;
+  will-change: auto !important;
+  z-index: 200 !important;
+}
+
+.md-sidebar--secondary,
+.md-sidebar--secondary[data-md-component="toc"],
+.md-sidebar--secondary[data-md-state],
+.md-sidebar--secondary[data-md-state="lock"] {
+  position: sticky !important;
+  top: 8rem !important;
+  transform: none !important;
+  transition: none !important;
+  will-change: auto !important;
+  z-index: 200 !important;
+}
+
+/* Override any CSS transforms that might be applied by JavaScript */
+.md-sidebar--primary * {
+  transform: none !important;
+}
+
+.md-sidebar--secondary * {
+  transform: none !important;
+}
+
+/* Force override any inline styles that might be applied by MkDocs Material */
+.md-sidebar--primary[style*="transform"],
+.md-sidebar--secondary[style*="transform"] {
+  transform: none !important;
+}
+
+/* Additional safety measures to prevent sidebar shifting */
+html .md-sidebar--primary,
+html .md-sidebar--secondary {
+  position: sticky !important;
+  top: 8rem !important;
+}
+
+/* Remove any masking pseudo-elements from primary sidebar - like secondary sidebar */
+.md-sidebar--primary .md-sidebar__scrollwrap:after {
+  display: none !important;
+}
+
+.md-sidebar--primary:before,
+.md-sidebar--primary:after,
+.md-sidebar--primary .md-sidebar__inner:before,
+.md-sidebar--primary .md-sidebar__inner:after {
+  display: none !important;
+}

From 099dd7ac3aab4d8ba9f9e0237a743403f123548c Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 10 Sep 2025 17:16:49 +0530
Subject: [PATCH 12/36] fix: resolve auto scroll issue

---
 docs/js/toc-highlight.js   | 10 +++++++--
 docs/stylesheets/extra.css | 44 ++++++++++++++++++++++----------------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/docs/js/toc-highlight.js b/docs/js/toc-highlight.js
index 271a2b3a..94dbdae0 100644
--- a/docs/js/toc-highlight.js
+++ b/docs/js/toc-highlight.js
@@ -62,9 +62,15 @@
       link.classList.remove("md-nav__link--active", "is-active");
     });
 
-    // Add active class to current item
+    // Add active class to current item and scroll into view if needed
     if (index >= 0 && index < tocLinks.length) {
-      tocLinks[index].classList.add("md-nav__link--active", "is-active");
+      const activeLink = tocLinks[index];
+      activeLink.classList.add("md-nav__link--active", "is-active");
+      // Scroll the active link into view within the sidebar
+      // Only if not already fully visible
+      if (typeof activeLink.scrollIntoView === "function") {
+        activeLink.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      }
     }
   }
 
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index e72fede4..2b969767 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -60,7 +60,7 @@ html {
     margin-right: 0 !important;
     border-right: none !important;
     box-sizing: border-box !important;
-    /* Allow content-based height - exactly like secondary sidebar */
+    /* Allow content-based height with increased footer clearance */
     height: auto !important;
     max-height: calc(100vh - 12rem) !important;
   }
@@ -314,11 +314,11 @@ html {
   box-shadow: none !important;
   z-index: 200 !important;
   position: sticky !important;
-  top: 10rem !important;
-  /* Content-based height instead of fixed - exactly like secondary sidebar */
+  top: 8rem !important;
+  /* Content-based height with increased footer clearance */
   height: auto !important;
   min-height: auto !important;
-  max-height: calc(100vh - 10rem) !important;
+  max-height: calc(100vh - 9rem) !important;
   overflow: hidden !important;
   /* Keep it visible when scrolling */
   transform: none !important;
@@ -342,11 +342,11 @@ html {
   box-shadow: none !important;
   z-index: 200 !important;
   position: sticky !important;
-  top: 10rem !important;
-  /* Content-based height instead of fixed - exactly like secondary sidebar */
+  top: 8rem !important;
+  /* Content-based height with increased footer clearance */
   height: auto !important;
   min-height: auto !important;
-  max-height: calc(100vh - 10rem) !important;
+  max-height: calc(100vh - 9rem) !important;
   overflow: hidden !important;
   transform: none !important;
   display: block !important;
@@ -499,15 +499,22 @@ html {
   margin-left: 1em !important;
   z-index: 200 !important;
   position: sticky !important;
-  top: 10rem !important;
-  /* Content-based height instead of fixed */
+  top: 8rem !important;
+  /* Content-based height with increased footer clearance */
   height: auto !important;
   min-height: auto !important;
-  max-height: calc(100vh - 10rem) !important;
-  overflow: visible !important;
+  max-height: calc(100vh - 16rem) !important;
+  overflow: hidden !important;
   /* Keep it visible when scrolling */
   transform: none !important;
   display: block !important;
+  background: rgb(245, 243, 254) !important;
+  border: 2px solid #7c3aed !important;
+  border-radius: 8px !important;
+  padding: 1em 0.5em !important;
+  /* margin-right: 2em !important; */
+  box-shadow: none !important;
+  margin-bottom: 20px !important;
 }
 
 /* Dark theme secondary sidebar */
@@ -516,12 +523,12 @@ html {
   margin-left: 1em !important;
   z-index: 200 !important;
   position: sticky !important;
-  top: 10rem !important;
-  /* Content-based height instead of fixed */
+  top: 8rem !important;
+  /* Content-based height with increased footer clearance */
   height: auto !important;
   min-height: auto !important;
-  max-height: calc(100vh - 5rem) !important;
-  overflow: visible !important;
+  max-height: calc(100vh - 16rem) !important;
+  overflow: hidden !important;
   transform: none !important;
   display: block !important;
 }
@@ -552,9 +559,9 @@ html {
   margin-right: 0 !important;
   border-right: none !important;
   box-sizing: border-box !important;
-  /* Allow content-based height */
+  /* Allow content-based height with increased footer clearance */
   height: auto !important;
-  max-height: calc(100vh - 7rem) !important;
+  max-height: calc(100vh - 18rem) !important;
 }
 
 /* Remove any masking pseudo-elements from secondary sidebar */
@@ -767,10 +774,11 @@ html {
 @media (min-width: 60em) {
   .md-main,
   .md-content {
-    padding-bottom: 0.5rem;
+    padding-bottom: 3rem;
   }
   .md-footer {
     z-index: 0;
+    margin-top: 2rem;
   }
 }
 

From 637b441f12bc9b40e46d7b5fad3492887159205d Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 09:42:04 +0530
Subject: [PATCH 13/36] fix: add top padding

---
 overrides/css/landing-page.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/overrides/css/landing-page.css b/overrides/css/landing-page.css
index 5f3fe22b..662557f4 100644
--- a/overrides/css/landing-page.css
+++ b/overrides/css/landing-page.css
@@ -155,7 +155,7 @@ body:has(.landing-page) .md-sidebar--secondary {
 .landing-main-content {
   width: 100%;
   padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
-  margin-top: 0 !important;
+  margin-top: 1rem !important;
   padding-top: 0 !important;
 }
 

From cd82f2b2b340823a324d9d1fc19349f855d1e88f Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 11:02:00 +0530
Subject: [PATCH 14/36] fix: resolve highlight issue

---
 docs/stylesheets/extra.css | 164 +++----------------------------------
 1 file changed, 11 insertions(+), 153 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 2b969767..cc8cafd9 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -92,30 +92,6 @@ html {
   }
 }
 
-.md-nav--secondary .md-nav__link.is-active,
-.md-nav--secondary .md-nav__link--active {
-  color: #7c3aed !important;
-  font-weight: 600 !important;
-  /* Remove border and padding modifications */
-}
-
-.md-nav--secondary .md-nav__link:hover {
-  color: #7c3aed;
-}
-
-/* Dark theme TOC styling - clean purple text only */
-[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link.is-active,
-[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
-  color: #a78bfa !important;
-  font-weight: 600 !important;
-}
-
-[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover {
-  color: #a78bfa;
-}
-
-/* Note: TOC positioning is now handled in the secondary sidebar section below */
-
 [data-md-color-scheme="slate"] .md-search__input {
   background-color: #7c3aed !important;
   border: 2px solid #7c3aed !important;
@@ -328,10 +304,7 @@ html {
 @media (min-width: 1024px) {
   .md-sidebar--primary {
     margin-left: 12px;
-  }
-  .md-sidebar--secondary {
-    margin-right: 12px !important;
-  }
+  }  
 }
 [data-md-color-scheme="slate"] .md-sidebar--primary {
   background: rgb(23, 20, 29) !important;
@@ -467,7 +440,6 @@ html {
 /* Hide native scrollbar inside the sidebar scrollwrap and provide a custom
 /* --- Remove background and shadow from sidebar nav title --- */
 .md-sidebar--primary .md-nav__title,
-.md-sidebar--secondary .md-nav__title,
 .md-sidebar--primary .md-nav__title:before,
 .md-sidebar--primary .md-nav__title:after {
   background: transparent !important;
@@ -494,88 +466,6 @@ html {
   word-wrap: break-word !important;
 }
 
-/* --- SECONDARY SIDEBAR (TOC) Custom Design --- */
-.md-sidebar--secondary {
-  margin-left: 1em !important;
-  z-index: 200 !important;
-  position: sticky !important;
-  top: 8rem !important;
-  /* Content-based height with increased footer clearance */
-  height: auto !important;
-  min-height: auto !important;
-  max-height: calc(100vh - 16rem) !important;
-  overflow: hidden !important;
-  /* Keep it visible when scrolling */
-  transform: none !important;
-  display: block !important;
-  background: rgb(245, 243, 254) !important;
-  border: 2px solid #7c3aed !important;
-  border-radius: 8px !important;
-  padding: 1em 0.5em !important;
-  /* margin-right: 2em !important; */
-  box-shadow: none !important;
-  margin-bottom: 20px !important;
-}
-
-/* Dark theme secondary sidebar */
-[data-md-color-scheme="slate"] .md-sidebar--secondary {
-  padding: 1em 0.5em !important;
-  margin-left: 1em !important;
-  z-index: 200 !important;
-  position: sticky !important;
-  top: 8rem !important;
-  /* Content-based height with increased footer clearance */
-  height: auto !important;
-  min-height: auto !important;
-  max-height: calc(100vh - 16rem) !important;
-  overflow: hidden !important;
-  transform: none !important;
-  display: block !important;
-}
-
-/* Ensure secondary sidebar title has no background */
-.md-sidebar--secondary .md-nav__title,
-.md-sidebar--secondary .md-nav__title:before,
-.md-sidebar--secondary .md-nav__title:after {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-/* Ensure secondary sidebar inner container is content-based */
-.md-sidebar--secondary .md-sidebar__inner {
-  height: auto !important;
-  min-height: auto !important;
-  display: block !important;
-}
-
-/* Secondary sidebar scroll container - content-based height */
-.md-sidebar--secondary .md-sidebar__scrollwrap {
-  overflow-y: auto !important;
-  padding: 0.25rem 0 1rem !important;
-  overscroll-behavior: contain !important;
-  width: 100% !important;
-  padding-right: 0 !important;
-  margin-right: 0 !important;
-  border-right: none !important;
-  box-sizing: border-box !important;
-  /* Allow content-based height with increased footer clearance */
-  height: auto !important;
-  max-height: calc(100vh - 18rem) !important;
-}
-
-/* Remove any masking pseudo-elements from secondary sidebar */
-.md-sidebar--secondary .md-sidebar__scrollwrap:after {
-  display: none !important;
-}
-
-.md-sidebar--secondary:before,
-.md-sidebar--secondary:after,
-.md-sidebar--secondary .md-sidebar__inner:before,
-.md-sidebar--secondary .md-sidebar__inner:after {
-  display: none !important;
-}
-
 .md-nav__title {
   font-weight: 700 !important;
   /* Ensure the nav title is not sticky — override any theme "sticky" rules */
@@ -700,28 +590,24 @@ html {
 }
 
 /* Slim scrollbar styling for both sidebars - High specificity override */
-.md-sidebar--primary .md-sidebar__scrollwrap,
-.md-sidebar--secondary .md-sidebar__scrollwrap {
+.md-sidebar--primary .md-sidebar__scrollwrap {
   scrollbar-width: thin !important;
   scrollbar-color: #7c3aed transparent !important;
 }
 
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar,
-.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
   width: 3px !important;
   height: 3px !important;
   background: transparent !important;
   background-color: transparent !important;
 }
 
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track,
-.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track{
   background: transparent !important;
   background-color: transparent !important;
 }
 
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb,
-.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb{
   background: #7c3aed !important;
   background-color: #7c3aed !important;
   border-radius: 3px !important;
@@ -729,22 +615,19 @@ html {
   min-height: 20px !important;
 }
 
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover,
-.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover{
   background: #6d28d9 !important;
   background-color: #6d28d9 !important;
 }
 
 /* Fix sidebar overflow and ensure proper scrolling */
-.md-sidebar--primary .md-sidebar__scrollwrap,
-.md-sidebar--secondary .md-sidebar__scrollwrap {
+.md-sidebar--primary .md-sidebar__scrollwrap {
   overflow-y: auto !important;
   max-height: inherit !important;
 }
 
 /* Ensure sidebars maintain their position and don't move */
-.md-sidebar--primary,
-.md-sidebar--secondary {
+.md-sidebar--primary{
   will-change: auto !important;
   transition: none !important;
   /* Force sticky positioning and prevent any transforms */
@@ -753,8 +636,7 @@ html {
 }
 
 /* Override any MkDocs Material default transforms */
-.md-sidebar--primary[data-md-state],
-.md-sidebar--secondary[data-md-state] {
+.md-sidebar--primary[data-md-state] {
   transform: none !important;
 }
 
@@ -764,12 +646,6 @@ html {
   position: sticky !important;
 }
 
-/* Stronger override for secondary sidebar positioning */
-.md-sidebar--secondary {
-  top: 8rem !important;
-  position: sticky !important;
-}
-
 /* Ensure both sidebars have proper footer clearance */
 @media (min-width: 60em) {
   .md-main,
@@ -796,36 +672,18 @@ html {
   z-index: 200 !important;
 }
 
-.md-sidebar--secondary,
-.md-sidebar--secondary[data-md-component="toc"],
-.md-sidebar--secondary[data-md-state],
-.md-sidebar--secondary[data-md-state="lock"] {
-  position: sticky !important;
-  top: 8rem !important;
-  transform: none !important;
-  transition: none !important;
-  will-change: auto !important;
-  z-index: 200 !important;
-}
 
 /* Override any CSS transforms that might be applied by JavaScript */
 .md-sidebar--primary * {
   transform: none !important;
 }
-
-.md-sidebar--secondary * {
-  transform: none !important;
-}
-
 /* Force override any inline styles that might be applied by MkDocs Material */
-.md-sidebar--primary[style*="transform"],
-.md-sidebar--secondary[style*="transform"] {
+.md-sidebar--primary[style*="transform"]{
   transform: none !important;
 }
 
 /* Additional safety measures to prevent sidebar shifting */
-html .md-sidebar--primary,
-html .md-sidebar--secondary {
+html .md-sidebar--primary{
   position: sticky !important;
   top: 8rem !important;
 }

From bfbdbb2a621949b9dc7ce176998aafe2c126293c Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 12:02:34 +0530
Subject: [PATCH 15/36] fix: resolve toc issue

---
 docs/stylesheets/extra.css | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index cc8cafd9..65aaf5e8 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,3 +1,16 @@
+/* === FINAL SECONDARY SIDEBAR POSITIONING OVERRIDE === */
+.md-sidebar--secondary,
+.md-sidebar--secondary[data-md-component="sidebar"],
+.md-sidebar--secondary[data-md-state],
+.md-sidebar--secondary[data-md-state="lock"] {
+  position: sticky !important;
+  top: 8rem !important;
+  transform: none !important;
+  transition: none !important;
+  will-change: auto !important;
+  z-index: 200 !important;
+}
+
 [data-md-color-scheme="openobserve"] {
   --md-primary-fg-color: #ffffff;
   --md-primary-fg-color--light: #ecb7b7;
@@ -304,7 +317,7 @@ html {
 @media (min-width: 1024px) {
   .md-sidebar--primary {
     margin-left: 12px;
-  }  
+  }
 }
 [data-md-color-scheme="slate"] .md-sidebar--primary {
   background: rgb(23, 20, 29) !important;
@@ -602,12 +615,12 @@ html {
   background-color: transparent !important;
 }
 
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track{
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
   background: transparent !important;
   background-color: transparent !important;
 }
 
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb{
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
   background: #7c3aed !important;
   background-color: #7c3aed !important;
   border-radius: 3px !important;
@@ -615,7 +628,7 @@ html {
   min-height: 20px !important;
 }
 
-.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover{
+.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
   background: #6d28d9 !important;
   background-color: #6d28d9 !important;
 }
@@ -627,7 +640,7 @@ html {
 }
 
 /* Ensure sidebars maintain their position and don't move */
-.md-sidebar--primary{
+.md-sidebar--primary {
   will-change: auto !important;
   transition: none !important;
   /* Force sticky positioning and prevent any transforms */
@@ -672,18 +685,17 @@ html {
   z-index: 200 !important;
 }
 
-
 /* Override any CSS transforms that might be applied by JavaScript */
 .md-sidebar--primary * {
   transform: none !important;
 }
 /* Force override any inline styles that might be applied by MkDocs Material */
-.md-sidebar--primary[style*="transform"]{
+.md-sidebar--primary[style*="transform"] {
   transform: none !important;
 }
 
 /* Additional safety measures to prevent sidebar shifting */
-html .md-sidebar--primary{
+html .md-sidebar--primary {
   position: sticky !important;
   top: 8rem !important;
 }

From b392c0b509c92740294b631dcb123235dfe37ae9 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 12:18:24 +0530
Subject: [PATCH 16/36] fix: remove unused z-index

---
 docs/stylesheets/extra.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 65aaf5e8..af565aad 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -283,8 +283,7 @@ html {
   min-height: 4rem !important;
   height: auto !important;
   position: sticky !important;
-  top: 0 !important;
-  z-index: 1000 !important;
+  top: 0 !important;  
 }
 
 .md-header__inner {

From ad56bb9ec461cdcc1de2f4e5b363ce44ac475ee1 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 18:03:20 +0530
Subject: [PATCH 17/36] fix: solve sidebar and toc sidebar issue

---
 docs/stylesheets/extra.css     |  278 ++-
 input.css                      |   16 +-
 mkdocs.yml                     |    2 +-
 overrides/css/output.css       | 3012 ++++++++++++++++----------------
 overrides/partials/footer.html |  142 +-
 overrides/partials/header.html |  248 +--
 overrides/partials/navbar.html |    8 +-
 package-lock.json              | 1623 +++++++++--------
 package.json                   |    8 +-
 tailwind.config.cjs            |    9 +
 10 files changed, 2822 insertions(+), 2524 deletions(-)
 create mode 100644 tailwind.config.cjs

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index af565aad..564ffc5f 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -283,7 +283,7 @@ html {
   min-height: 4rem !important;
   height: auto !important;
   position: sticky !important;
-  top: 0 !important;  
+  top: 0 !important;
 }
 
 .md-header__inner {
@@ -313,9 +313,11 @@ html {
   display: block !important;
 }
 
-@media (min-width: 1024px) {
+/* Desktop-only styles */
+@media (min-width: 76.25em) {
   .md-sidebar--primary {
     margin-left: 12px;
+    margin-right: 1em !important;
   }
 }
 [data-md-color-scheme="slate"] .md-sidebar--primary {
@@ -323,7 +325,6 @@ html {
   border: 2px solid #7c3aed !important;
   border-radius: 8px !important;
   padding: 1em 0.5em !important;
-  margin-right: 2em !important;
   box-shadow: none !important;
   z-index: 200 !important;
   position: sticky !important;
@@ -337,6 +338,13 @@ html {
   display: block !important;
 }
 
+/* Desktop-only dark theme margin */
+@media (min-width: 76.25em) {
+  [data-md-color-scheme="slate"] .md-sidebar--primary {
+    margin-right: 1em !important;
+  }
+}
+
 .md-sidebar__title,
 .md-sidebar__title:before,
 .md-sidebar__title:after {
@@ -372,12 +380,7 @@ html {
 }
 
 /* --- Sidebar: Add right margin for full rounded border visibility --- */
-.md-sidebar--primary {
-  margin-right: 1em !important;
-}
-[data-md_color-scheme="slate"] .md-sidebar--primary {
-  margin-right: 1em !important;
-}
+/* Margins are now handled in the main sidebar rules above */
 
 /* --- Remove white shadow from sidebar title --- */
 .md-sidebar__title {
@@ -710,3 +713,260 @@ html .md-sidebar--primary {
 .md-sidebar--primary .md-sidebar__inner:after {
   display: none !important;
 }
+
+.md-header {
+  position: fixed !important;
+  top: 70px !important;
+}
+
+.md-main__inner {
+  margin-top: 70px !important;
+}
+
+nav.md-grid {
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem; /* default (base) = px-4 */
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  nav.md-grid {
+    padding-left: 1.5rem; /* sm:px-6 */
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  nav.md-grid {
+    padding-left: 2rem; /* lg:px-8 */
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  nav.md-grid {
+    padding-left: 2.5rem; /* xl:px-10 */
+    padding-right: 2.5rem;
+  }
+}
+.md-search__inner {
+  width: 20rem;
+}
+@media (max-width: 768px) {
+  .md-search__inner {
+    top: 80px !important;
+  }
+
+  .md-search__input {
+    pointer-events: auto !important;
+    color: black !important;
+  }
+}
+
+.md-header__title {
+  margin-left: 0.1rem;
+  width: 100px;
+}
+
+@media (min-width: 1025px) {
+  .md-header__title {
+    flex-grow: 0;
+    flex-basis: auto;
+    max-width: 400px;
+  }
+  .md-header__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+/* === MOBILE SIDEBAR RESPONSIVE FIXES === */
+
+/* Mobile breakpoints for sidebar */
+@media (max-width: 76.24em) {
+  /* Reset sidebar positioning for mobile */
+  .md-sidebar--primary,
+  .md-sidebar--primary[data-md-component="sidebar"],
+  .md-sidebar--primary[data-md-state],
+  .md-sidebar--primary[data-md-state="lock"] {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    max-width: 280px !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    z-index: 300 !important;
+    transform: translateX(-100%) !important;
+    transition: transform 0.3s ease-in-out !important;
+    margin: 0 !important;
+    padding: 1rem !important;
+    border-radius: 0 !important;
+    border: none !important;
+    border-right: 2px solid #7c3aed !important;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
+    will-change: transform !important;
+  }
+
+  /* Show sidebar when drawer is checked (mobile menu open) */
+  .md-toggle[data-md-toggle="drawer"]:checked
+    ~ .md-container
+    .md-sidebar--primary,
+  input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary {
+    transform: translateX(0) !important;
+  }
+
+  /* Mobile sidebar scroll container */
+  .md-sidebar--primary .md-sidebar__scrollwrap {
+    height: 100% !important;
+    max-height: calc(100vh - 2rem) !important;
+    overflow-y: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+  }
+
+  /* Mobile sidebar inner container */
+  .md-sidebar--primary .md-sidebar__inner {
+    height: 100% !important;
+    min-height: 100% !important;
+    padding: 1rem 0 !important;
+  }
+
+  /* Hide secondary sidebar on mobile */
+  .md-sidebar--secondary {
+    display: none !important;
+  }
+
+  /* Ensure main content doesn't overlap */
+  .md-main {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .md-main__inner {
+    margin-top: 4rem !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding: 0 1rem !important;
+  }
+
+  /* Mobile navigation improvements */
+  .md-sidebar--primary .md-nav__title {
+    padding: 1rem 0 0.5rem !important;
+    font-size: 1.1rem !important;
+    border-bottom: 1px solid rgba(124, 58, 237, 0.2) !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .md-sidebar--primary .md-nav__link {
+    padding: 0.75rem 1rem !important;
+    font-size: 0.9rem !important;
+    line-height: 1.4 !important;
+  }
+
+  /* Mobile nested navigation */
+  .md-sidebar--primary .md-nav__item--nested .md-nav__link {
+    padding-left: 1rem !important;
+  }
+
+  .md-sidebar--primary .md-nav[data-md-level="1"] .md-nav__link {
+    padding-left: 1.5rem !important;
+  }
+
+  .md-sidebar--primary .md-nav[data-md-level="2"] .md-nav__link {
+    padding-left: 2rem !important;
+  }
+
+  .md-sidebar--primary .md-nav[data-md-level="3"] .md-nav__link {
+    padding-left: 2.5rem !important;
+  }
+
+  /* Mobile active link styling */
+  .md-sidebar--primary .md-nav__item--active > .md-nav__link::before {
+    right: 0 !important;
+    width: 3px !important;
+    height: 100% !important;
+    top: 0 !important;
+    transform: none !important;
+  }
+
+  /* Mobile drawer overlay */
+  .md-overlay {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    background: rgba(0, 0, 0, 0.5) !important;
+    z-index: 250 !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    transition: opacity 0.3s ease !important;
+  }
+
+  input[id="__drawer"]:checked ~ .md-overlay {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+}
+
+/* Tablet-specific adjustments */
+@media (max-width: 1024px) and (min-width: 769px) {
+  .md-sidebar--primary {
+    max-width: 260px !important;
+    padding: 0.75rem !important;
+  }
+
+  .md-sidebar--primary .md-sidebar__scrollwrap {
+    max-height: calc(100vh - 6rem) !important;
+  }
+}
+
+/* Extra small mobile devices */
+@media (max-width: 480px) {
+  .md-sidebar--primary {
+    max-width: 90vw !important;
+    padding: 0.75rem !important;
+  }
+
+  .md-sidebar--primary .md-nav__link {
+    padding: 0.6rem 0.75rem !important;
+    font-size: 0.85rem !important;
+  }
+
+  .md-main__inner {
+    padding: 0 0.5rem !important;
+  }
+}
+
+/* Dark theme mobile adjustments */
+@media (max-width: 76.24em) {
+  [data-md-color-scheme="slate"] .md-sidebar--primary {
+    background: rgb(23, 20, 29) !important;
+    border-right: 2px solid #7c3aed !important;
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3) !important;
+  }
+
+  [data-md-color-scheme="openobserve"] .md-sidebar--primary {
+    background: #1a1a2e !important;
+    border-right: 2px solid #7c3aed !important;
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4) !important;
+  }
+}
+
+/* Improve mobile header and navigation button */
+@media (max-width: 76.24em) {
+  .md-header__button[for="__drawer"] {
+    margin-right: 0.5rem !important;
+    color: #7c3aed !important;
+  }
+
+  .md-header__title {
+    margin-left: 0.5rem !important;
+    flex-grow: 1 !important;
+  }
+}
diff --git a/input.css b/input.css
index 76f76b60..8e8d6ea9 100644
--- a/input.css
+++ b/input.css
@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @layer utilities {
   .hover\:text-\[\#7782FF\]:hover {
@@ -7,7 +9,7 @@
 }
 
 .hero-gradient {
-  @apply bg-gradient-to-r from-[#6A76E3] to-[#45A4F3];
+  background: linear-gradient(to right, #6a76e3, #45a4f3);
 }
 
 input {
@@ -188,11 +190,11 @@ nav.md-grid {
   }
 }
 
-  .md-header__title {
-    margin-left: 0.1rem;
-    width: 100px;
-  }
-    
+.md-header__title {
+  margin-left: 0.1rem;
+  width: 100px;
+}
+
 @media (min-width: 1025px) {
   .md-header__title {
     flex-grow: 0;
diff --git a/mkdocs.yml b/mkdocs.yml
index 535e5d64..e77f12cd 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -23,7 +23,7 @@ extra_javascript:
   - js/vector_co.js
   - js/search-close-minimal.js
   - js/search-tracking.js
-  - js/toc-highlight.js
+  # - js/toc-highlight.js
   - https://buttons.github.io/buttons.js
   - js/reo.js
 extra:
diff --git a/overrides/css/output.css b/overrides/css/output.css
index ee15b8c8..9d0499ac 100644
--- a/overrides/css/output.css
+++ b/overrides/css/output.css
@@ -1,1119 +1,1275 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
-    --color-red-400: oklch(70.4% 0.191 22.216);
-    --color-yellow-300: oklch(90.5% 0.182 98.111);
-    --color-blue-50: oklch(97% 0.014 254.604);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
-    --color-gray-100: oklch(96.7% 0.003 264.542);
-    --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-gray-300: oklch(87.2% 0.01 258.338);
-    --color-gray-500: oklch(55.1% 0.027 264.364);
-    --color-gray-700: oklch(37.3% 0.034 259.733);
-    --color-black: #000;
-    --color-white: #fff;
-    --spacing: 0.25rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
-    --text-sm: 0.875rem;
-    --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
-    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --blur-md: 12px;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-  }
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
 }
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  summary {
-    display: list-item;
-  }
-  ol, ul, menu {
-    list-style: none;
-  }
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  ::placeholder {
-    opacity: 1;
-  }
-  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-  textarea {
-    resize: vertical;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
-    appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden="until-found"])) {
-    display: none !important;
-  }
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
 }
-@layer utilities {
-  .pointer-events-auto {
-    pointer-events: auto;
-  }
-  .visible {
-    visibility: visible;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .relative {
-    position: relative;
-  }
-  .static {
-    position: static;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .inset-0 {
-    inset: calc(var(--spacing) * 0);
-  }
-  .top-0 {
-    top: calc(var(--spacing) * 0);
-  }
-  .top-\[120px\] {
-    top: 120px;
-  }
-  .top-full {
-    top: 100%;
-  }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
-  .bottom-5 {
-    bottom: calc(var(--spacing) * 5);
-  }
-  .bottom-\[-5px\] {
-    bottom: -5px;
-  }
-  .left-0 {
-    left: calc(var(--spacing) * 0);
-  }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
-  .left-1\/2 {
-    left: calc(1/2 * 100%);
-  }
-  .isolate {
-    isolation: isolate;
-  }
-  .z-50 {
-    z-index: 50;
-  }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
-  .mx-auto {
-    margin-inline: auto;
-  }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
-  .mt-10 {
-    margin-top: calc(var(--spacing) * 10);
-  }
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .mb-3 {
-    margin-bottom: calc(var(--spacing) * 3);
-  }
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-  .mb-6 {
-    margin-bottom: calc(var(--spacing) * 6);
-  }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
-  .block {
-    display: block;
-  }
-  .contents {
-    display: contents;
-  }
-  .flex {
-    display: flex;
-  }
-  .grid {
-    display: grid;
-  }
-  .hidden {
-    display: none;
-  }
-  .inline {
-    display: inline;
-  }
-  .inline-block {
-    display: inline-block;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .table {
-    display: table;
-  }
-  .h-0 {
-    height: calc(var(--spacing) * 0);
-  }
-  .h-0\.5 {
-    height: calc(var(--spacing) * 0.5);
-  }
-  .h-4 {
-    height: calc(var(--spacing) * 4);
-  }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
-  .h-11 {
-    height: calc(var(--spacing) * 11);
-  }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
-  .h-\[calc\(100vh-120px\)\] {
-    height: calc(100vh - 120px);
-  }
-  .h-full {
-    height: 100%;
-  }
-  .w-4 {
-    width: calc(var(--spacing) * 4);
-  }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
-  }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
-  .w-12 {
-    width: calc(var(--spacing) * 12);
-  }
-  .w-40 {
-    width: calc(var(--spacing) * 40);
-  }
-  .w-\[430px\] {
-    width: 430px;
-  }
-  .w-\[450px\] {
-    width: 450px;
-  }
-  .w-\[660px\] {
-    width: 660px;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .flex-1 {
-    flex: 1;
-  }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-  .flex-grow {
-    flex-grow: 1;
-  }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .rotate-90 {
-    rotate: 90deg;
-  }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
-  .cursor-pointer {
-    cursor: pointer;
-  }
-  .resize {
-    resize: both;
-  }
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .flex-wrap {
-    flex-wrap: wrap;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
-  .gap-2\.5 {
-    gap: calc(var(--spacing) * 2.5);
-  }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
-  .space-y-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-x-0 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-0\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .overflow-y-auto {
-    overflow-y: auto;
-  }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
-  .rounded-lg {
-    border-radius: var(--radius-lg);
-  }
-  .rounded-md {
-    border-radius: var(--radius-md);
-  }
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
-  .\!border-gray-200 {
-    border-color: var(--color-gray-200) !important;
-  }
-  .border-\[\#4a90e2\] {
-    border-color: #4a90e2;
-  }
-  .border-black {
-    border-color: var(--color-black);
-  }
-  .border-gray-300 {
-    border-color: var(--color-gray-300);
-  }
-  .border-gray-700 {
-    border-color: var(--color-gray-700);
-  }
-  .bg-\[\#7782FF\] {
-    background-color: #7782FF;
-  }
-  .bg-\[\#121212\] {
-    background-color: #121212;
-  }
-  .bg-transparent {
-    background-color: transparent;
-  }
-  .bg-white {
-    background-color: var(--color-white);
-  }
-  .object-contain {
-    object-fit: contain;
-  }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
-  .p-5 {
-    padding: calc(var(--spacing) * 5);
-  }
-  .p-6 {
-    padding: calc(var(--spacing) * 6);
-  }
-  .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
-  .px-1\.5 {
-    padding-inline: calc(var(--spacing) * 1.5);
-  }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-  .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
-  }
-  .px-10 {
-    padding-inline: calc(var(--spacing) * 10);
-  }
-  .py-1 {
-    padding-block: calc(var(--spacing) * 1);
-  }
-  .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
-  }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .py-10 {
-    padding-block: calc(var(--spacing) * 10);
-  }
-  .pt-4 {
-    padding-top: calc(var(--spacing) * 4);
-  }
-  .pt-5 {
-    padding-top: calc(var(--spacing) * 5);
-  }
-  .text-center {
-    text-align: center;
-  }
-  .text-left {
-    text-align: left;
-  }
-  .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-  }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
-  .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
-  .text-\[14px\] {
-    font-size: 14px;
-  }
-  .text-\[15px\] {
-    font-size: 15px;
-  }
-  .text-\[17px\] {
-    font-size: 17px;
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .text-nowrap {
-    text-wrap: nowrap;
-  }
-  .text-wrap {
-    text-wrap: wrap;
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .\!text-white {
-    color: var(--color-white) !important;
-  }
-  .text-\[rgba\(255\,255\,255\,0\.6\)\] {
-    color: rgba(255,255,255,0.6);
-  }
-  .text-black {
-    color: var(--color-black);
-  }
-  .text-blue-600 {
-    color: var(--color-blue-600);
-  }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
-  .text-gray-500 {
-    color: var(--color-gray-500);
-  }
-  .text-red-400 {
-    color: var(--color-red-400);
-  }
-  .text-white {
-    color: var(--color-white);
-  }
-  .text-white\/90 {
-    color: color-mix(in srgb, #fff 90%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 90%, transparent);
-    }
-  }
-  .text-yellow-300 {
-    color: var(--color-yellow-300);
-  }
-  .capitalize {
-    text-transform: capitalize;
-  }
-  .lowercase {
-    text-transform: lowercase;
-  }
-  .uppercase {
-    text-transform: uppercase;
-  }
-  .underline {
-    text-decoration-line: underline;
-  }
-  .placeholder-\[rgba\(255\,255\,255\,0\.6\)\] {
-    &::placeholder {
-      color: rgba(255,255,255,0.6);
-    }
-  }
-  .caret-white {
-    caret-color: var(--color-white);
-  }
-  .opacity-100 {
-    opacity: 100%;
-  }
-  .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .grayscale {
-    --tw-grayscale: grayscale(100%);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .backdrop-blur-md {
-    --tw-backdrop-blur: blur(var(--blur-md));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-transform {
-    transition-property: transform, translate, scale, rotate;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
-  .duration-500 {
-    --tw-duration: 500ms;
-    transition-duration: 500ms;
-  }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
-  }
-  .outline-none {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-  .group-hover\:flex {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        display: flex;
-      }
-    }
-  }
-  .group-hover\:translate-x-1 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        --tw-translate-x: calc(var(--spacing) * 1);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
-  .group-hover\:flex-wrap {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        flex-wrap: wrap;
-      }
-    }
-  }
-  .group-hover\:gap-x-8 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        column-gap: calc(var(--spacing) * 8);
-      }
-    }
-  }
-  .group-hover\:gap-y-4 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        row-gap: calc(var(--spacing) * 4);
-      }
-    }
-  }
-  .hover\:bg-\[\#6672fa\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: #6672fa;
-      }
-    }
-  }
-  .hover\:bg-blue-50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-50);
-      }
-    }
-  }
-  .hover\:bg-gray-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
-  }
-  .hover\:bg-white {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-white);
-      }
-    }
-  }
-  .hover\:text-\[\#6b76e3\] {
-    &:hover {
-      @media (hover: hover) {
-        color: #6b76e3;
-      }
-    }
-  }
-  .hover\:text-\[\#7782FF\] {
-    &:hover {
-      @media (hover: hover) {
-        color: #7782FF;
-      }
-    }
-  }
-  .hover\:text-black {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-black);
-      }
-    }
-  }
-  .hover\:shadow-xl {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
-  .focus-visible\:ring-2 {
-    &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus-visible\:ring-offset-2 {
-    &:focus-visible {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus-visible\:outline-none {
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .active\:scale-98 {
-    &:active {
-      --tw-scale-x: 98%;
-      --tw-scale-y: 98%;
-      --tw-scale-z: 98%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
-  .disabled\:pointer-events-none {
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-  .disabled\:opacity-50 {
-    &:disabled {
-      opacity: 50%;
-    }
-  }
-  .sm\:grid-cols-3 {
-    @media (width >= 40rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-  .sm\:px-6 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
-  .md\:mt-0 {
-    @media (width >= 48rem) {
-      margin-top: calc(var(--spacing) * 0);
-    }
-  }
-  .md\:h-4 {
-    @media (width >= 48rem) {
-      height: calc(var(--spacing) * 4);
-    }
-  }
-  .md\:h-7 {
-    @media (width >= 48rem) {
-      height: calc(var(--spacing) * 7);
-    }
-  }
-  .md\:w-4 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 4);
-    }
-  }
-  .md\:w-52 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 52);
-    }
-  }
-  .md\:max-w-fit {
-    @media (width >= 48rem) {
-      max-width: fit-content;
-    }
-  }
-  .md\:flex-row {
-    @media (width >= 48rem) {
-      flex-direction: row;
-    }
-  }
-  .md\:items-center {
-    @media (width >= 48rem) {
-      align-items: center;
-    }
-  }
-  .md\:items-start {
-    @media (width >= 48rem) {
-      align-items: flex-start;
-    }
-  }
-  .md\:justify-between {
-    @media (width >= 48rem) {
-      justify-content: space-between;
-    }
-  }
-  .md\:justify-start {
-    @media (width >= 48rem) {
-      justify-content: flex-start;
-    }
-  }
-  .md\:gap-1 {
-    @media (width >= 48rem) {
-      gap: calc(var(--spacing) * 1);
-    }
-  }
-  .md\:gap-2 {
-    @media (width >= 48rem) {
-      gap: calc(var(--spacing) * 2);
-    }
-  }
-  .md\:gap-3 {
-    @media (width >= 48rem) {
-      gap: calc(var(--spacing) * 3);
-    }
-  }
-  .md\:px-5 {
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 5);
-    }
-  }
-  .md\:font-semibold {
-    @media (width >= 48rem) {
-      --tw-font-weight: var(--font-weight-semibold);
-      font-weight: var(--font-weight-semibold);
-    }
-  }
-  .md\:text-white {
-    @media (width >= 48rem) {
-      color: var(--color-white);
-    }
-  }
-  .lg\:block {
-    @media (width >= 64rem) {
-      display: block;
-    }
-  }
-  .lg\:flex {
-    @media (width >= 64rem) {
-      display: flex;
-    }
-  }
-  .lg\:hidden {
-    @media (width >= 64rem) {
-      display: none;
-    }
-  }
-  .lg\:w-\[75\%\] {
-    @media (width >= 64rem) {
-      width: 75%;
-    }
-  }
-  .lg\:flex-grow {
-    @media (width >= 64rem) {
-      flex-grow: 1;
-    }
-  }
-  .lg\:grid-cols-4 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .lg\:flex-row {
-    @media (width >= 64rem) {
-      flex-direction: row;
-    }
-  }
-  .lg\:items-center {
-    @media (width >= 64rem) {
-      align-items: center;
-    }
-  }
-  .lg\:justify-between {
-    @media (width >= 64rem) {
-      justify-content: space-between;
-    }
-  }
-  .lg\:justify-end {
-    @media (width >= 64rem) {
-      justify-content: flex-end;
-    }
-  }
-  .lg\:gap-4 {
-    @media (width >= 64rem) {
-      gap: calc(var(--spacing) * 4);
-    }
-  }
-  .lg\:px-8 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
-  }
-  .lg\:text-left {
-    @media (width >= 64rem) {
-      text-align: left;
-    }
-  }
-  .xl\:px-10 {
-    @media (width >= 80rem) {
-      padding-inline: calc(var(--spacing) * 10);
-    }
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+.tw-container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .tw-container {
+    max-width: 640px;
   }
-  .xl\:px-12 {
-    @media (width >= 80rem) {
-      padding-inline: calc(var(--spacing) * 12);
-    }
+}
+
+@media (min-width: 768px) {
+  .tw-container {
+    max-width: 768px;
   }
-  .\[\&_svg\]\:size-4 {
-    & svg {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-    }
+}
+
+@media (min-width: 1024px) {
+  .tw-container {
+    max-width: 1024px;
   }
-  .\[\&_svg\]\:shrink-0 {
-    & svg {
-      flex-shrink: 0;
-    }
+}
+
+@media (min-width: 1280px) {
+  .tw-container {
+    max-width: 1280px;
   }
 }
-@layer utilities {
-  .hover\:text-\[\#7782FF\]:hover {
-    color: #7782ff;
+
+@media (min-width: 1536px) {
+  .tw-container {
+    max-width: 1536px;
   }
 }
+
+.tw-pointer-events-auto {
+  pointer-events: auto;
+}
+
+.tw-visible {
+  visibility: visible;
+}
+
+.tw-fixed {
+  position: fixed;
+}
+
+.tw-absolute {
+  position: absolute;
+}
+
+.tw-relative {
+  position: relative;
+}
+
+.tw-sticky {
+  position: sticky;
+}
+
+.tw-inset-0 {
+  inset: 0px;
+}
+
+.tw-bottom-5 {
+  bottom: 1.25rem;
+}
+
+.tw-bottom-\[-5px\] {
+  bottom: -5px;
+}
+
+.tw-left-0 {
+  left: 0px;
+}
+
+.tw-left-1\/2 {
+  left: 50%;
+}
+
+.tw-right-2 {
+  right: 0.5rem;
+}
+
+.tw-top-0 {
+  top: 0px;
+}
+
+.tw-top-\[120px\] {
+  top: 120px;
+}
+
+.tw-top-full {
+  top: 100%;
+}
+
+.tw-z-50 {
+  z-index: 50;
+}
+
+.tw-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.tw-mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.tw-mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.tw-mb-4 {
+  margin-bottom: 1rem;
+}
+
+.tw-mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.tw-ml-1 {
+  margin-left: 0.25rem;
+}
+
+.tw-ml-2 {
+  margin-left: 0.5rem;
+}
+
+.tw-mt-1 {
+  margin-top: 0.25rem;
+}
+
+.tw-mt-2 {
+  margin-top: 0.5rem;
+}
+
+.tw-mt-5 {
+  margin-top: 1.25rem;
+}
+
+.tw-block {
+  display: block;
+}
+
+.tw-inline-block {
+  display: inline-block;
+}
+
+.tw-flex {
+  display: flex;
+}
+
+.tw-inline-flex {
+  display: inline-flex;
+}
+
+.tw-grid {
+  display: grid;
+}
+
+.tw-hidden {
+  display: none;
+}
+
+.tw-h-0\.5 {
+  height: 0.125rem;
+}
+
+.tw-h-11 {
+  height: 2.75rem;
+}
+
+.tw-h-12 {
+  height: 3rem;
+}
+
+.tw-h-4 {
+  height: 1rem;
+}
+
+.tw-h-5 {
+  height: 1.25rem;
+}
+
+.tw-h-6 {
+  height: 1.5rem;
+}
+
+.tw-h-7 {
+  height: 1.75rem;
+}
+
+.tw-h-\[calc\(100vh-120px\)\] {
+  height: calc(100vh - 120px);
+}
+
+.tw-h-full {
+  height: 100%;
+}
+
+.tw-w-12 {
+  width: 3rem;
+}
+
+.tw-w-4 {
+  width: 1rem;
+}
+
+.tw-w-40 {
+  width: 10rem;
+}
+
+.tw-w-48 {
+  width: 12rem;
+}
+
+.tw-w-5 {
+  width: 1.25rem;
+}
+
+.tw-w-7 {
+  width: 1.75rem;
+}
+
+.tw-w-\[430px\] {
+  width: 430px;
+}
+
+.tw-w-\[450px\] {
+  width: 450px;
+}
+
+.tw-w-\[660px\] {
+  width: 660px;
+}
+
+.tw-w-full {
+  width: 100%;
+}
+
+.tw-flex-1 {
+  flex: 1 1 0%;
+}
+
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.tw-shrink-0 {
+  flex-shrink: 0;
+}
+
+.tw--translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-cursor-pointer {
+  cursor: pointer;
+}
+
+.tw-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.tw-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.tw-flex-col {
+  flex-direction: column;
+}
+
+.tw-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.tw-items-center {
+  align-items: center;
+}
+
+.tw-justify-center {
+  justify-content: center;
+}
+
+.tw-justify-between {
+  justify-content: space-between;
+}
+
+.tw-gap-1 {
+  gap: 0.25rem;
+}
+
+.tw-gap-2 {
+  gap: 0.5rem;
+}
+
+.tw-gap-2\.5 {
+  gap: 0.625rem;
+}
+
+.tw-gap-4 {
+  gap: 1rem;
+}
+
+.tw-gap-6 {
+  gap: 1.5rem;
+}
+
+.tw-space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.tw-space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.tw-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.tw-space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.tw-space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.tw-space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.tw-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.tw-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.tw-text-nowrap {
+  text-wrap: nowrap;
+}
+
+.tw-rounded-full {
+  border-radius: 9999px;
+}
+
+.tw-rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.tw-rounded-md {
+  border-radius: 0.375rem;
+}
+
+.tw-border {
+  border-width: 1px;
+}
+
+.tw-border-2 {
+  border-width: 2px;
+}
+
+.tw-border-t {
+  border-top-width: 1px;
+}
+
+.\!tw-border-gray-200 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
+}
+
+.tw-border-\[\#4a90e2\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 144 226 / var(--tw-border-opacity, 1));
+}
+
+.tw-border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+}
+
+.tw-border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
+.tw-border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+
+.tw-bg-\[\#121212\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
+}
+
+.tw-bg-\[\#7782FF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(119 130 255 / var(--tw-bg-opacity, 1));
+}
+
+.tw-bg-transparent {
+  background-color: transparent;
+}
+
+.tw-bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.tw-object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.tw-p-2 {
+  padding: 0.5rem;
+}
+
+.tw-p-3 {
+  padding: 0.75rem;
+}
+
+.tw-p-4 {
+  padding: 1rem;
+}
+
+.tw-p-5 {
+  padding: 1.25rem;
+}
+
+.tw-p-6 {
+  padding: 1.5rem;
+}
+
+.tw-px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.tw-px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.tw-px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.tw-px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.tw-px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.tw-py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.tw-py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.tw-py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.tw-py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.tw-pt-4 {
+  padding-top: 1rem;
+}
+
+.tw-pt-5 {
+  padding-top: 1.25rem;
+}
+
+.tw-text-left {
+  text-align: left;
+}
+
+.tw-text-center {
+  text-align: center;
+}
+
+.tw-text-\[14px\] {
+  font-size: 14px;
+}
+
+.tw-text-\[15px\] {
+  font-size: 15px;
+}
+
+.tw-text-\[17px\] {
+  font-size: 17px;
+}
+
+.tw-text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.tw-text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.tw-text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.tw-text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.tw-font-bold {
+  font-weight: 700;
+}
+
+.tw-font-medium {
+  font-weight: 500;
+}
+
+.tw-font-semibold {
+  font-weight: 600;
+}
+
+.tw-capitalize {
+  text-transform: capitalize;
+}
+
+.\!tw-text-white {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
+}
+
+.tw-text-\[rgba\(255\,255\,255\,0\.6\)\] {
+  color: rgba(255,255,255,0.6);
+}
+
+.tw-text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.tw-text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
+.tw-text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+
+.tw-text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
+.tw-text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+
+.tw-text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.tw-text-white\/90 {
+  color: rgb(255 255 255 / 0.9);
+}
+
+.tw-text-yellow-300 {
+  --tw-text-opacity: 1;
+  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
+}
+
+.tw-underline {
+  text-decoration-line: underline;
+}
+
+.tw-placeholder-\[rgba\(255\,255\,255\,0\.6\)\]::-moz-placeholder {
+  color: rgba(255,255,255,0.6);
+}
+
+.tw-placeholder-\[rgba\(255\,255\,255\,0\.6\)\]::placeholder {
+  color: rgba(255,255,255,0.6);
+}
+
+.tw-caret-white {
+  caret-color: #fff;
+}
+
+.tw-opacity-100 {
+  opacity: 1;
+}
+
+.tw-shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.tw-outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.tw-grayscale {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.tw-backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.tw-transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.tw-transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.tw-transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.tw-duration-200 {
+  transition-duration: 200ms;
+}
+
+.tw-duration-300 {
+  transition-duration: 300ms;
+}
+
+.tw-duration-500 {
+  transition-duration: 500ms;
+}
+
+.tw-ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .hero-gradient {
-  --tw-gradient-position: to right in oklab;
-  background-image: linear-gradient(var(--tw-gradient-stops));
-  --tw-gradient-from: #6A76E3;
-  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  --tw-gradient-to: #45A4F3;
-  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  background: linear-gradient(to right, #6a76e3, #45a4f3);
 }
+
 input {
   color: #ffffff;
 }
+
 .custom-gradient {
-  background: linear-gradient( 180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.3) 100% );
-}
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.75) 0%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0.3) 100%
+  );
+}
+
 .theme-purple {
   --color-primary-purple: rgba(107, 118, 227);
   color: var(--color-primary-purple);
@@ -1122,18 +1278,21 @@ input {
   --color-tabs-background: rgba(107, 118, 227);
   --color-tabs-title-text: rgba(107, 118, 227);
 }
-html, body {
+
+html {
   margin: 0;
   width: 100%;
-  height: 100%;
   font-family: "Inter", sans-serif;
   scroll-behavior: smooth;
   scroll-padding-top: 8rem;
+  /* height: 100%; removed to prevent extra space at the bottom */
 }
+
 main {
   min-height: calc(100vh - 8rem);
   padding-top: 3rem;
 }
+
 .primary-button {
   position: relative;
   border: none;
@@ -1144,18 +1303,23 @@ main {
   background-clip: padding-box, border-box;
   transition: all 0.3s ease;
   background-color: rgba(107, 118, 227);
+  /* Creates a 2px border that matches the button color initially */
   border: 1px solid transparent;
   font-size: 12px;
 }
+
 .primary-button:hover {
   background-color: hsl(233 53% 53%);
 }
+
 .primary-button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  background-image: linear-gradient(180deg, #8cc7ff 0%, #7ab7ff 100%), linear-gradient(180deg, #8cc7ff 0%, #7ab7ff 100%);
+  background-image: linear-gradient(180deg, #8cc7ff 0%, #7ab7ff 100%),
+    linear-gradient(180deg, #8cc7ff 0%, #7ab7ff 100%);
   box-shadow: none;
 }
+
 .secondary-button {
   position: relative;
   border: none;
@@ -1169,440 +1333,274 @@ main {
   border: 1px solid transparent;
   font-size: 12px;
 }
+
 .secondary-button:hover {
+  /* Transparent border to show gradient */
   background-color: #f3f4f6;
 }
+
 .secondary-button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   border-color: #cccccc;
+  /* Light gray border for disabled state */
   background: transparent;
   box-shadow: none;
 }
+
 .gradient-hover {
   background: linear-gradient(to left, #6a76e3, #45a4f3);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
-.md-header {
-  position: fixed !important;
-  top: 70px !important;
-}
-.md-main__inner {
-  margin-top: 70px !important;
-}
-.md-sidebar {
-  top: 75px !important;
-}
-@media (min-width: 640px) and (max-width: 1023px) {
-  .md-sidebar {
-    top: 70px !important;
-  }
-}
-@media (min-width: 1024px) {
-  .md-sidebar {
-    top: 70px !important;
-    height: calc(100vh - 70px) !important;
-  }
-}
-nav.md-grid {
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
+
+.hover\:tw-bg-\[\#6672fa\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(102 114 250 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:tw-bg-blue-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:tw-bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:tw-bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:tw-bg-opacity-10:hover {
+  --tw-bg-opacity: 0.1;
+}
+
+.hover\:tw-text-\[\#6b76e3\]:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 118 227 / var(--tw-text-opacity, 1));
+}
+
+.hover\:tw-text-\[\#7782FF\]:hover {
+  --tw-text-opacity: 1;
+  color: rgb(119 130 255 / var(--tw-text-opacity, 1));
+}
+
+.hover\:tw-text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.hover\:tw-shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus-visible\:tw-outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-visible\:tw-ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:tw-ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+.disabled\:tw-pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.disabled\:tw-opacity-50:disabled {
+  opacity: 0.5;
+}
+
+.tw-group:hover .group-hover\:tw-flex {
+  display: flex;
+}
+
+.tw-group:hover .group-hover\:tw-translate-x-1 {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-group:hover .group-hover\:tw-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.tw-group:hover .group-hover\:tw-gap-x-8 {
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+}
+
+.tw-group:hover .group-hover\:tw-gap-y-4 {
+  row-gap: 1rem;
+}
+
 @media (min-width: 640px) {
-  nav.md-grid {
+  .sm\:tw-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .sm\:tw-px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 }
-@media (min-width: 1024px) {
-  nav.md-grid {
-    padding-left: 2rem;
-    padding-right: 2rem;
+
+@media (min-width: 768px) {
+  .md\:tw-mt-0 {
+    margin-top: 0px;
   }
-}
-@media (min-width: 1280px) {
-  nav.md-grid {
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
+
+  .md\:tw-h-4 {
+    height: 1rem;
   }
-}
-.md-search__inner {
-  width: 20rem;
-}
-@media (max-width: 768px) {
-  .md-search__inner {
-    top: 80px !important;
+
+  .md\:tw-h-7 {
+    height: 1.75rem;
   }
-  .md-search__input {
-    pointer-events: auto !important;
-    color: black !important;
+
+  .md\:tw-w-4 {
+    width: 1rem;
+  }
+
+  .md\:tw-w-52 {
+    width: 13rem;
+  }
+
+  .md\:tw-max-w-fit {
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+  }
+
+  .md\:tw-flex-row {
+    flex-direction: row;
+  }
+
+  .md\:tw-items-start {
+    align-items: flex-start;
+  }
+
+  .md\:tw-items-center {
+    align-items: center;
+  }
+
+  .md\:tw-justify-start {
+    justify-content: flex-start;
+  }
+
+  .md\:tw-justify-between {
+    justify-content: space-between;
+  }
+
+  .md\:tw-gap-1 {
+    gap: 0.25rem;
+  }
+
+  .md\:tw-gap-2 {
+    gap: 0.5rem;
+  }
+
+  .md\:tw-gap-3 {
+    gap: 0.75rem;
+  }
+
+  .md\:tw-px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .md\:tw-font-semibold {
+    font-weight: 600;
+  }
+
+  .md\:tw-text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
 }
-.md-header__title {
-  margin-left: 0.1rem;
-  width: 100px;
-}
-@media (min-width: 1025px) {
-  .md-header__title {
-    flex-grow: 0;
-    flex-basis: auto;
-    max-width: 400px;
+
+@media (min-width: 1024px) {
+  .lg\:tw-block {
+    display: block;
   }
-  .md-header__inner {
+
+  .lg\:tw-flex {
     display: flex;
+  }
+
+  .lg\:tw-hidden {
+    display: none;
+  }
+
+  .lg\:tw-w-\[75\%\] {
+    width: 75%;
+  }
+
+  .lg\:tw-flex-grow {
+    flex-grow: 1;
+  }
+
+  .lg\:tw-grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .lg\:tw-flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:tw-items-center {
     align-items: center;
+  }
+
+  .lg\:tw-justify-end {
+    justify-content: flex-end;
+  }
+
+  .lg\:tw-justify-between {
     justify-content: space-between;
   }
+
+  .lg\:tw-gap-4 {
+    gap: 1rem;
+  }
+
+  .lg\:tw-px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:tw-text-left {
+    text-align: left;
+  }
 }
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-space-x-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
-      --tw-space-y-reverse: 0;
-      --tw-space-x-reverse: 0;
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
-      --tw-duration: initial;
-      --tw-ease: initial;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
-    }
+
+@media (min-width: 1280px) {
+  .xl\:tw-px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
   }
+
+  .xl\:tw-px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
+.\[\&_svg\]\:tw-size-4 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.\[\&_svg\]\:tw-shrink-0 svg {
+  flex-shrink: 0;
 }
diff --git a/overrides/partials/footer.html b/overrides/partials/footer.html
index 7a9db5f6..26d29c61 100644
--- a/overrides/partials/footer.html
+++ b/overrides/partials/footer.html
@@ -21,10 +21,10 @@
   IN THE SOFTWARE.
 -->
 
-<footer class="relative bg-[#121212] w-full">
+<footer class="tw-relative tw-bg-[#121212] tw-w-full">
   <!-- Background SVG -->
   <svg
-    class="absolute inset-0 w-full h-full"
+    class="tw-absolute tw-inset-0 tw-w-full tw-h-full"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1221 684"
     fill="none"
@@ -73,30 +73,36 @@
     </defs>
   </svg>
 
-  <div class="relative container mx-auto px-4 py-10 lg:px-8 xl:px-12">
-    <div class="flex flex-col lg:flex-row gap-6">
+  <div
+    class="tw-relative tw-container tw-mx-auto tw-px-4 tw-py-10 lg:tw-px-8 xl:tw-px-12"
+  >
+    <div class="tw-flex tw-flex-col lg:tw-flex-row tw-gap-6">
       <!-- Footer Grid -->
       <div
         id="footer-columns"
-        class="w-full lg:w-[75%] grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6"
+        class="tw-w-full lg:tw-w-[75%] tw-grid tw-grid-cols-2 sm:tw-grid-cols-3 lg:tw-grid-cols-4 tw-gap-6"
       ></div>
 
       <!-- Newsletter -->
-      <div class="rounded-lg text-center mx-auto">
+      <div class="tw-rounded-lg tw-text-center tw-mx-auto">
         <form id="newsletter-form" name="newsletter" novalidate>
-          <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
+          <h2
+            class="tw-text-white tw-font-medium tw-text-lg tw-mb-2 tw-relative tw-inline-block"
+          >
             Stay Updated
             <span
-              class="absolute bottom-[-5px] left-0 w-full h-0.5 bg-white block"
+              class="tw-absolute tw-bottom-[-5px] tw-left-0 tw-w-full tw-h-0.5 tw-bg-white tw-block"
             ></span>
           </h2>
-          <p class="text-gray-300 text-sm transition duration-300 mb-6">
+          <p
+            class="tw-text-gray-300 tw-text-sm tw-transition tw-duration-300 tw-mb-6"
+          >
             Get the latest OpenObserve insights
           </p>
 
-          <div class="flex flex-col gap-2.5 mb-4">
+          <div class="tw-flex tw-flex-col tw-gap-2.5 tw-mb-4">
             <div
-              class="text-xs rounded-full border border-[#4a90e2] text-left !text-white caret-white"
+              class="tw-text-xs tw-rounded-full tw-border tw-border-[#4a90e2] tw-text-left !tw-text-white tw-caret-white"
             >
               <input
                 type="email"
@@ -105,33 +111,34 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
                 placeholder="Enter your email"
                 required
                 aria-label="Email address"
-                class="flex-1 px-4 py-2 w-full rounded-full bg-transparent !text-white caret-white outline-none placeholder-[rgba(255,255,255,0.6)]"
+                class="tw-flex-1 tw-px-4 tw-py-2 tw-w-full tw-rounded-full tw-bg-transparent !tw-text-white tw-caret-white tw-outline-none tw-placeholder-[rgba(255,255,255,0.6)]"
               />
             </div>
             <div
               id="newsletter-error"
-              class="text-left ml-2 text-red-400 text-sm hidden"
+              class="tw-text-left tw-ml-2 tw-text-red-400 tw-text-sm tw-hidden"
             ></div>
             <div
-              class="px-6 py-2 rounded-full bg-[#7782FF] text-white text-sm font-medium hover:bg-[#6672fa]"
+              class="tw-px-6 tw-py-2 tw-rounded-full tw-bg-[#7782FF] tw-text-white tw-text-sm tw-font-medium hover:tw-bg-[#6672fa]"
             >
               <button
                 type="submit"
                 id="newsletter-submit"
-                class="transition active:scale-98 w-full cursor-pointer"
+                class="tw-transition active:tw-scale-98 tw-w-full tw-cursor-pointer"
               >
                 Subscribe
               </button>
             </div>
           </div>
 
-          <p class="text-xs text-[rgba(255,255,255,0.6)]">
-            By subscribing, you agree to receive product and marketing related updates from OpenObserve.
+          <p class="tw-text-xs tw-text-[rgba(255,255,255,0.6)]">
+            By subscribing, you agree to receive product and marketing related
+            updates from OpenObserve.
           </p>
         </form>
         <div
           id="newsletter-toast"
-          class="fixed bottom-5 right-2 transform bg-[#7782FF] text-white p-6 rounded-lg shadow-lg z-50 hidden transition-opacity duration-300"
+          class="tw-fixed tw-bottom-5 tw-right-2 tw-transform tw-bg-[#7782FF] tw-text-white tw-p-6 tw-rounded-lg tw-shadow-lg tw-z-50 tw-hidden tw-transition-opacity tw-duration-300"
         ></div>
       </div>
 
@@ -181,10 +188,13 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
                   showToast("Subscribed successfully with: " + email);
                   form.reset();
                   // Segment tracking
-                  if (window.analytics && typeof window.analytics.track === "function") {
+                  if (
+                    window.analytics &&
+                    typeof window.analytics.track === "function"
+                  ) {
                     window.analytics.track("O2 Website - Newsletter Signup", {
                       email: email,
-                      source: "website"
+                      source: "website",
                     });
                   }
                 } else {
@@ -221,15 +231,15 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
     <!-- Toast -->
     <div
       id="newsletter-toast"
-      class="fixed bottom-5 right-2 transform bg-[#7782FF] text-white p-6 rounded-lg shadow-lg z-50 hidden transition-opacity duration-300"
+      class="tw-fixed tw-bottom-5 tw-right-2 tw-transform tw-bg-[#7782FF] tw-text-white tw-p-6 tw-rounded-lg tw-shadow-lg tw-z-50 tw-hidden tw-transition-opacity tw-duration-300"
     ></div>
 
-    <div class="flex justify-center lg:justify-end">
-      <div class="flex items-center gap-4">
-        <div class="w-12 h-12 flex-shrink-0 grayscale">
+    <div class="tw-flex tw-justify-center lg:tw-justify-end">
+      <div class="tw-flex tw-items-center tw-gap-4">
+        <div class="tw-w-12 tw-h-12 tw-flex-shrink-0 tw-grayscale">
           <img
             src="/docs/assets/soc.webp"
-            class="w-full h-full object-contain"
+            class="tw-w-full tw-h-full tw-object-contain"
             alt="Official AICPA SOC badge"
             loading="lazy"
             width="48"
@@ -237,11 +247,13 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
           />
         </div>
 
-        <div class="flex flex-col text-white">
-          <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
-          <p class="whitespace-nowrap text-xs">Certified</p>
+        <div class="tw-flex tw-flex-col tw-text-white">
+          <h2 class="tw-whitespace-nowrap tw-text-sm">SOC2 Type II</h2>
+          <p class="tw-whitespace-nowrap tw-text-xs">Certified</p>
         </div>
-        <div class="flex flex-wrap justify-center md:justify-start gap-2">
+        <div
+          class="tw-flex tw-flex-wrap tw-justify-center md:tw-justify-start tw-gap-2"
+        >
           <a
             class="github-button"
             href="https://github.com/openobserve/openobserve"
@@ -256,22 +268,22 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
       </div>
     </div>
     <!-- <div>
-      <section class="hero-gradient w-full rounded-md">
+      <section class="tw-hero-gradient tw-w-full tw-rounded-md">
         <div
-          class="flex flex-col md:flex-row md:items-start lg:items-center md:justify-between gap-4 p-2"
+          class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-start lg:tw-items-center md:tw-justify-between tw-gap-4 tw-p-2"
         >
           <div
-            class="flex flex-col lg:flex-row w-full text-white gap-1 md:gap-1 lg:gap-4"
+            class="tw-flex tw-flex-col lg:tw-flex-row tw-w-full tw-text-white tw-gap-1 md:tw-gap-1 lg:tw-gap-4"
           >
             <div
-              class="flex flex-col md:flex-row md:items-center gap-1 md:gap-3 lg:gap-4"
+              class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-center tw-gap-1 md:tw-gap-3 lg:tw-gap-4"
             >
               <div
-                class="flex items-center gap-2 text-xs font-semibold text-yellow-300"
+                class="tw-flex tw-items-center tw-gap-2 tw-text-xs tw-font-semibold tw-text-yellow-300"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="w-5 h-5 md:w-4 md:h-4 shrink-0"
+                  class="tw-w-5 tw-h-5 md:tw-w-4 md:tw-h-4 tw-shrink-0"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -287,17 +299,17 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
               </div>
 
               <h2
-                class="font-bold text-white text-xs md:font-semibold md:text-white md:mt-0 md:max-w-fit"
+                class="tw-font-bold tw-text-white tw-text-xs md:tw-font-semibold md:tw-text-white md:tw-mt-0 md:tw-max-w-fit"
               >
                 From Zero to Observability in 30 Minutes
               </h2>
             </div>
 
-            <div class="flex gap-4 text-xs md:flex-row md:gap-2">
-              <div class="flex items-center gap-2 text-white/90">
+            <div class="tw-flex tw-gap-4 tw-text-xs md:tw-flex-row md:tw-gap-2">
+              <div class="tw-flex tw-items-center tw-gap-2 tw-text-white/90">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="w-5 h-5 md:w-4 md:h-4"
+                  class="tw-w-5 tw-h-5 md:tw-w-4 md:tw-h-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -312,10 +324,10 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
                 July 29, 2025
               </div>
 
-              <div class="flex items-center gap-2 text-white/90">
+              <div class="tw-flex tw-items-center tw-gap-2 tw-text-white/90">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="w-5 h-5 md:w-4 md:h-4"
+                  class="tw-w-5 tw-h-5 md:tw-w-4 md:tw-h-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -332,11 +344,11 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
             </div>
           </div>
 
-          <div class="flex flex-col text-blue-600 text-xs">
+          <div class="tw-flex tw-flex-col tw-text-blue-600 tw-text-xs">
             <a
               href="/webinars-videos/zero-to-observability-in-30-minutes/"
               target="_blank"
-              class="ring-offset-background focus-visible:outline-none focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 h-6 md:h-7 bg-white  hover:bg-blue-50 font-semibold px-3 py-1 shadow-lg hover:shadow-xl transition-all duration-300 group cursor-pointer"
+              class="tw-ring-offset-background focus-visible:tw-outline-none focus-visible:tw-ring-ring tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-whitespace-nowrap tw-rounded-md focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 disabled:tw-pointer-events-none disabled:tw-opacity-50 [&_svg]:tw-size-4 [&_svg]:tw-shrink-0 tw-h-6 md:tw-h-7 tw-bg-white hover:tw-bg-blue-50 tw-font-semibold tw-px-3 tw-py-1 tw-shadow-lg hover:tw-shadow-xl tw-transition-all tw-duration-300 group tw-cursor-pointer"
             >
               Register Now
               <svg
@@ -349,7 +361,7 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                class="lucide lucide-arrow-right ml-1 w-4 h-4 transition-transform duration-200 transform group-hover:translate-x-1"
+                class="lucide lucide-arrow-right tw-ml-1 tw-w-4 tw-h-4 tw-transition-transform tw-duration-200 tw-transform group-hover:tw-translate-x-1"
               >
                 <path d="M5 12h14"></path>
                 <path d="m12 5 7 7-7 7"></path>
@@ -361,47 +373,49 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
     </div> -->
     <!-- Bottom Footer -->
     <div
-      class="border-t border-gray-700 mt-10 pt-5 flex flex-col lg:flex-row justify-between items-center text-white gap-4"
+      class="tw-border-t tw-border-gray-700 tw-mt-5 tw-pt-5 tw-flex tw-flex-col lg:tw-flex-row tw-justify-between tw-items-center tw-text-white tw-gap-4"
     >
-      <div class="text-center text-xs lg:text-left">
-        <p class="">OpenObserve Inc. © <span id="current-year"></span></p>
+      <div class="tw-text-center tw-text-xs lg:tw-text-left">
+        <p class="tw-text-white">
+          OpenObserve Inc. © <span id="current-year"></span>
+        </p>
         <p>3000 Sand Hill Rd Building 1, Suite 260, Menlo Park, CA 94025</p>
       </div>
-      <ul class="flex flex-wrap gap-4 text-xs text-gray-300">
-        <li class="hover:text-[#7782FF]">
+      <ul class="tw-flex tw-flex-wrap tw-gap-4 tw-text-xs tw-text-gray-300">
+        <li class="hover:tw-text-[#7782FF]">
           <a href="/policies/terms-of-service/" target="_blank"
             >Terms of Service</a
           >
         </li>
-        <li class="hover:text-[#7782FF]">
+        <li class="hover:tw-text-[#7782FF]">
           <a href="/policies/privacy-policy/" target="_blank">Privacy Policy</a>
         </li>
       </ul>
-      <ul class="flex gap-2">
+      <ul class="tw-flex tw-gap-2">
         <li
-          class="p-2 rounded-lg transition-all duration-200 hover:bg-white hover:bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
         >
           <a href="https://short.openobserve.ai/community" target="_blank">
             <img
               src="/docs/assets/slack-icon.svg"
               alt="slack"
-              class="w-5 h-5"
+              class="tw-w-5 tw-h-5"
             />
           </a>
         </li>
         <li
-          class="p-2 rounded-lg transition-all duration-200 hover:bg-white hover:bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
         >
           <a href="https://twitter.com/OpenObserve" target="_blank">
             <img
               src="/docs/assets/twitter-icon.svg"
               alt="twitter"
-              class="w-5 h-5"
+              class="tw-w-5 tw-h-5"
             />
           </a>
         </li>
         <li
-          class="p-2 rounded-lg transition-all duration-200 hover:bg-white hover:bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
         >
           <a
             href="https://www.linkedin.com/company/openobserve"
@@ -410,29 +424,29 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
             <img
               src="/docs/assets/linkdin-icon.svg"
               alt="linkedin"
-              class="w-5 h-5"
+              class="tw-w-5 tw-h-5"
             />
           </a>
         </li>
         <li
-          class="p-2 rounded-lg transition-all duration-200 hover:bg-white hover:bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
         >
           <a href="https://github.com/openobserve/openobserve" target="_blank">
             <img
               src="/docs/assets/github-dark.svg"
               alt="github"
-              class="w-5 h-5"
+              class="tw-w-5 tw-h-5"
             />
           </a>
         </li>
         <li
-          class="p-2 rounded-lg transition-all duration-200 hover:bg-white hover:bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
         >
           <a href="https://www.youtube.com/@openobserve" target="_blank">
             <img
               src="/docs/assets/youtube-icon.svg"
               alt="youtube"
-              class="w-5 h-5"
+              class="tw-w-5 tw-h-5"
             />
           </a>
         </li>
@@ -524,13 +538,13 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
       footerData.forEach((section) => {
         const column = document.createElement("div");
         column.innerHTML = `
-          <h2 class="text-white font-medium text-base mb-3">${
+          <h2 class="tw-text-white tw-font-medium tw-text-base tw-mb-3">${
             section.title
           }</h2>
-          <ul class="space-y-2 text-gray-300 text-xs">
+          <ul class="tw-space-y-2 tw-text-gray-300 tw-text-xs">
             ${section.items
               .map(
-                (item) => `<li class="hover:text-[#7782FF]">
+                (item) => `<li class="hover:tw-text-[#7782FF]">
                   <a href="${item.link}" target="${item.target || ""}">${
                   item.text
                 }</a>
diff --git a/overrides/partials/header.html b/overrides/partials/header.html
index 51e0b5e4..0399c8fb 100644
--- a/overrides/partials/header.html
+++ b/overrides/partials/header.html
@@ -2,59 +2,59 @@
 <html lang="en">
   <body>
     <div
-      class="w-full fixed top-0 z-50 backdrop-blur-md custom-gradient text-black transition-all duration-500"
+      class="tw-w-full tw-fixed tw-top-0 tw-z-50 tw-backdrop-blur-md custom-gradient tw-text-black tw-transition-all tw-duration-500"
     >
       <!-- Desktop Header -->
-      <div class="lg:block hidden">
-        <header class="sticky top-0 z-50 w-full">
+      <div class="lg:tw-block tw-hidden">
+        <header class="tw-sticky tw-top-0 tw-z-50 tw-w-full">
           <div
-            class="container mx-auto px-4 sm:px-0 flex justify-between items-center py-2"
+            class="tw-container tw-mx-auto tw-px-4 sm:tw-px-6 lg:tw-px-8 xl:tw-px-10 tw-flex tw-justify-between tw-items-center tw-py-2"
           >
-            <a class="flex items-center h-11 w-48" href="/">
+            <a class="tw-flex tw-items-center tw-h-11 tw-w-48" href="/">
               <img
                 src="/docs/assets/o2-logo-readme.svg"
                 alt="OpenObserve"
-                class="w-full h-full py-1"
+                class="tw-w-full tw-h-full tw-py-1"
               />
             </a>
             <nav>
               <ul
-                class="flex items-center space-x-0.5 w-full font-semibold text-[17px]"
+                class="tw-flex tw-items-center tw-space-x-0.5 tw-w-full tw-font-semibold tw-text-[17px]"
               >
                 <!-- PLATFORM -->
-                <li class="group relative">
-                  <div class="hover:text-[#6b76e3]">
+                <li class="tw-group tw-relative">
+                  <div class="hover:tw-text-[#6b76e3]">
                     <a
                       href="/platform/"
-                      class="px-3 py-2 rounded-lg transition-all bg-transparent"
+                      class="tw-px-3 tw-py-2 tw-rounded-lg tw-transition-all tw-bg-transparent"
                       >Platform</a
                     >
                   </div>
                   <div
-                    class="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-[660px] p-5 bg-white rounded-lg border-2 border-gray-300 shadow-lg hidden group-hover:flex"
+                    class="tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-full tw-mt-2 tw-w-[660px] tw-p-5 tw-bg-white tw-rounded-lg tw-border-2 tw-border-gray-300 tw-shadow-lg tw-hidden group-hover:tw-flex"
                   >
                     <ul
-                      class="space-y-2 grid grid-cols-3 text-[14px] text-gray-500 w-full"
+                      class="tw-space-y-2 tw-grid tw-grid-cols-3 tw-text-[14px] tw-text-gray-500 tw-w-full"
                     >
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/logs/">Logs</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/metrics/">Metrics</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/traces/">Traces</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/frontend-monitoring/">Frontend Monitoring</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/pipelines/">Pipelines</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/alerts/">Alerts</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/visualization-and-dashboards/"
                           >Visualization & Dashboards</a
                         >
@@ -64,38 +64,38 @@
                 </li>
 
                 <!-- SOLUTIONS -->
-                <li class="group relative">
-                  <div class="hover:text-[#6b76e3]">
+                <li class="tw-group tw-relative">
+                  <div class="hover:tw-text-[#6b76e3]">
                     <a
                       href="/solutions/"
-                      class="px-3 py-2 rounded-lg transition-all bg-transparent"
+                      class="tw-px-3 tw-py-2 tw-rounded-lg tw-transition-all tw-bg-transparent"
                       >Solutions</a
                     >
                   </div>
                   <div
-                    class="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-[430px] p-5 bg-white rounded-lg border-2 border-gray-300 shadow-lg hidden group-hover:flex group-hover:flex-wrap group-hover:gap-x-8 group-hover:gap-y-4"
+                    class="tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-full tw-mt-2 tw-w-[430px] tw-p-5 tw-bg-white tw-rounded-lg tw-border-2 tw-border-gray-300 tw-shadow-lg tw-hidden group-hover:tw-flex group-hover:tw-flex-wrap group-hover:tw-gap-x-8 group-hover:tw-gap-y-4"
                   >
                     <ul
-                      class="space-y-2 grid grid-cols-2 text-[14px] text-gray-500 w-full"
+                      class="tw-space-y-2 tw-grid tw-grid-cols-2 tw-text-[14px] tw-text-gray-500 tw-w-full"
                     >
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/aws-monitoring/">AWS Monitoring</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/azure-monitoring/">Azure Monitoring</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/gcp-monitoring/">GCP Monitoring</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/kubernetes-monitoring/"
                           >Kubernetes Monitoring</a
                         >
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/database-monitoring/">Database Monitoring</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/opentelemetry/">OpenTelemetry</a>
                       </li>
                     </ul>
@@ -103,42 +103,42 @@
                 </li>
 
                 <!-- RESOURCES -->
-                <li class="group relative">
-                  <div class="hover:text-[#6b76e3]">
+                <li class="tw-group tw-relative">
+                  <div class="hover:tw-text-[#6b76e3]">
                     <a
                       href="/resources/"
-                      class="px-3 py-2 rounded-lg transition-all bg-transparent"
+                      class="tw-px-3 tw-py-2 tw-rounded-lg tw-transition-all tw-bg-transparent"
                       >Resources</a
                     >
                   </div>
                   <div
-                    class="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-[450px] p-5 bg-white rounded-lg border-2 border-gray-300 shadow-lg hidden group-hover:flex group-hover:flex-wrap group-hover:gap-x-8 group-hover:gap-y-4"
+                    class="tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-full tw-mt-2 tw-w-[450px] tw-p-5 tw-bg-white tw-rounded-lg tw-border-2 tw-border-gray-300 tw-shadow-lg tw-hidden group-hover:tw-flex group-hover:tw-flex-wrap group-hover:tw-gap-x-8 group-hover:tw-gap-y-4"
                   >
                     <ul
-                      class="space-y-2 grid grid-cols-2 text-[14px] text-gray-500 w-full"
+                      class="tw-space-y-2 tw-grid tw-grid-cols-2 tw-text-[14px] tw-text-gray-500 tw-w-full"
                     >
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/docs" target="_blank">Documentation</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/customer-stories/">Customer Stories</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/blog/">Blog</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/faqs/">Freqently Asked Questions</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/webinars-videos/">Webinar and Videos</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/partners">Partners</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/events/">Events</a>
                       </li>
-                      <li class="hover:text-black">
+                      <li class="hover:tw-text-black">
                         <a href="/downloads/">Downloads</a>
                       </li>
                     </ul>
@@ -146,32 +146,32 @@
                 </li>
 
                 <!-- PRICING -->
-                <li class="relative hover:text-[#6b76e3]">
+                <li class="tw-relative hover:tw-text-[#6b76e3]">
                   <a
                     href="/pricing/"
-                    class="px-3 py-2 rounded-lg transition-all bg-transparent hover:text-primary-purple"
+                    class="tw-px-3 tw-py-2 tw-rounded-lg tw-transition-all tw-bg-transparent hover:tw-text-primary-purple"
                     >Pricing</a
                   >
                 </li>
               </ul>
             </nav>
-            <div class="flex items-center space-x-2">
+            <div class="tw-flex tw-items-center tw-space-x-2">
               <a
-                class="flex capitalize text-nowrap text-center justify-center items-center px-3 md:px-5 py-1.5 text-xs primary-button transition-opacity duration-500 ease-in-out opacity-100 visible pointer-events-auto"
+                class="tw-flex tw-capitalize tw-text-nowrap tw-text-center tw-justify-center tw-items-center tw-px-3 md:tw-px-5 tw-py-1.5 tw-text-xs primary-button tw-transition-opacity tw-duration-500 tw-ease-in-out tw-opacity-100 tw-visible tw-pointer-events-auto"
                 href="/demo/"
                 target="_self"
               >
                 Get Demo
               </a>
               <a
-                class="flex capitalize text-nowrap text-center justify-center items-center px-3 md:px-5 py-1.5 text-xs secondary-button border !border-gray-200"
+                class="tw-flex tw-capitalize tw-text-nowrap tw-text-center tw-justify-center tw-items-center tw-px-3 md:tw-px-5 tw-py-1.5 tw-text-xs secondary-button tw-border !tw-border-gray-200"
                 href="https://cloud.openobserve.ai"
                 target="_blank"
               >
                 Log In
               </a>
               <a
-                class="github-button py-1.5"
+                class="github-button tw-py-1.5"
                 href="https://github.com/openobserve/openobserve"
                 data-color-scheme="light"
                 data-size="large"
@@ -186,23 +186,28 @@
       </div>
 
       <!-- Mobile Header -->
-      <div class="lg:hidden block">
-        <header class="flex flex-col z-50 relative">
-          <div class="relative">
+      <div class="lg:tw-hidden tw-block">
+        <header class="tw-flex tw-flex-col tw-z-50 tw-relative">
+          <div class="tw-relative">
             <!-- Top Navbar -->
             <div
-              class="flex justify-between items-center p-2 container mx-auto"
+              class="tw-flex tw-justify-between tw-items-center tw-p-2 tw-container tw-mx-auto"
             >
-              <a class="flex items-center h-12 w-40 md:w-52" href="/">
+              <a
+                class="tw-flex tw-items-center tw-h-12 tw-w-40 md:tw-w-52"
+                href="/"
+              >
                 <img
                   src="assets/o2-logo-readme.svg"
                   alt="OpenObserve"
-                  class="w-full h-full py-1"
+                  class="tw-w-full tw-h-full tw-py-1"
                 />
               </a>
-              <div class="flex items-center justify-center space-x-1">
+              <div
+                class="tw-flex tw-items-center tw-justify-center tw-space-x-1"
+              >
                 <a
-                  class="flex capitalize text-nowrap text-center justify-center items-center px-1.5 md:px-5 py-1.5 text-xs primary-button transition-opacity duration-500 ease-in-out"
+                  class="tw-flex tw-capitalize tw-text-nowrap tw-text-center tw-justify-center tw-items-center tw-px-1.5 md:tw-px-5 tw-py-1.5 tw-text-xs primary-button tw-transition-opacity tw-duration-500 tw-ease-in-out"
                   href="/demo/"
                   target="_self"
                 >
@@ -221,19 +226,19 @@
                 <!-- Toggle Icon -->
                 <div
                   id="mobile-menu-toggle"
-                  class="cursor-pointer h-7 w-7 flex items-center"
+                  class="tw-cursor-pointer tw-h-7 tw-w-7 tw-flex tw-items-center"
                 >
                   <img
                     id="menu-icon"
                     src="assets/navmenu.svg"
                     alt="Open Menu"
-                    class="block "
+                    class="tw-block"
                   />
                   <img
                     id="close-icon"
                     src="assets/close.svg"
                     alt="Close Menu"
-                    class="hidden"
+                    class="tw-hidden"
                   />
                 </div>
               </div>
@@ -242,84 +247,92 @@
             <!-- Mobile Fullscreen Menu -->
             <div
               id="mobile-menu"
-              class="w-full fixed top-[120px] z-50 h-[calc(100vh-120px)] overflow-y-auto bg-white hidden"
+              class="tw-w-full tw-fixed tw-top-[120px] tw-z-50 tw-h-[calc(100vh-120px)] tw-overflow-y-auto tw-bg-white tw-hidden"
             >
               <!-- Menu Items -->
               <div
-                class="w-full flex flex-col items-center space-y-4 bg-white h-full overflow-y-auto mt-2"
+                class="tw-w-full tw-flex tw-flex-col tw-items-center tw-space-y-4 tw-bg-white tw-h-full tw-overflow-y-auto tw-mt-2"
               >
-                <ul class="w-full flex flex-col space-y-4 p-4">
+                <ul class="tw-w-full tw-flex tw-flex-col tw-space-y-4 tw-p-4">
                   <!-- PLATFORM -->
-                  <li class="flex flex-col space-y-2">
+                  <li class="tw-flex tw-flex-col tw-space-y-2">
                     <div
-                      class="flex items-center justify-between text-gray-500 text-base font-semibold w-full text-left toggle-btn"
+                      class="tw-flex tw-items-center tw-justify-between tw-text-gray-500 tw-text-base tw-font-semibold tw-w-full tw-text-left toggle-btn"
                     >
                       <h4>Platform</h4>
                       <img
                         src="assets/submenu-icon.svg"
                         alt="Arrow"
-                        class="arrow w-4 h-4 transition-transform"
+                        class="arrow tw-w-4 tw-h-4 tw-transition-transform"
                       />
                     </div>
-                    <div class="submenu hidden space-y-4 mt-2">
+                    <div class="submenu tw-hidden tw-space-y-4 tw-mt-2">
                       <div
-                        class="border rounded-md p-4 text-center flex flex-col space-y-2"
+                        class="tw-border tw-rounded-md tw-p-4 tw-text-center tw-flex tw-flex-col tw-space-y-2"
                       >
-                        <h3 class="font-medium text-xs text-black">
+                        <h3 class="tw-font-medium tw-text-xs tw-text-black">
                           Full Stack Observability Platform
                         </h3>
                         <a
                           href="/platform/"
-                          class="text-xs gradient-hover font-medium underline"
+                          class="tw-text-xs gradient-hover tw-font-medium tw-underline"
                           >View Platform</a
                         >
                       </div>
                       <ul
-                        class="text-[15px] text-gray-500 font-semibold space-y-1"
+                        class="tw-text-[15px] tw-text-gray-500 tw-font-semibold tw-space-y-1"
                       >
                         <li>
-                          <a href="/logs/" class="block hover:text-black"
+                          <a href="/logs/" class="tw-block hover:tw-text-black"
                             >Logs</a
                           >
                         </li>
                         <li>
-                          <a href="/metrics/" class="block hover:text-black"
+                          <a
+                            href="/metrics/"
+                            class="tw-block hover:tw-text-black"
                             >Metrics</a
                           >
                         </li>
                         <li>
-                          <a href="/traces/" class="block hover:text-black"
+                          <a
+                            href="/traces/"
+                            class="tw-block hover:tw-text-black"
                             >Traces</a
                           >
                         </li>
                         <li>
                           <a
                             href="/frontend-monitoring/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >Frontend Monitoring</a
                           >
                         </li>
                         <li>
-                          <a href="/pipelines/" class="block hover:text-black"
+                          <a
+                            href="/pipelines/"
+                            class="tw-block hover:tw-text-black"
                             >Pipelines</a
                           >
                         </li>
                         <li>
-                          <a href="/alerts/" class="block hover:text-black"
+                          <a
+                            href="/alerts/"
+                            class="tw-block hover:tw-text-black"
                             >Alerts</a
                           >
                         </li>
                         <li>
                           <a
                             href="/visualization-and-dashboards/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >Visualization & Dashboards</a
                           >
                         </li>
                       </ul>
                     </div>
                     <div
-                      class="w-full flex justify-center h-0.5 mt-1"
+                      class="tw-w-full tw-flex tw-justify-center tw-h-0.5 tw-mt-1"
                       style="
                         background: linear-gradient(
                           90deg,
@@ -333,79 +346,79 @@ <h3 class="font-medium text-xs text-black">
                   </li>
 
                   <!-- SOLUTIONS -->
-                  <li class="flex flex-col space-y-2">
+                  <li class="tw-flex tw-flex-col tw-space-y-2">
                     <div
-                      class="flex items-center justify-between text-gray-500 text-base font-semibold w-full text-left toggle-btn"
+                      class="tw-flex tw-items-center tw-justify-between tw-text-gray-500 tw-text-base tw-font-semibold tw-w-full tw-text-left toggle-btn"
                     >
                       <h4>Solutions</h4>
                       <img
                         src="assets/submenu-icon.svg"
                         alt="Arrow"
-                        class="arrow w-4 h-4 transition-transform"
+                        class="arrow tw-w-4 tw-h-4 tw-transition-transform"
                       />
                     </div>
-                    <div class="submenu hidden space-y-4 mt-2">
+                    <div class="submenu tw-hidden tw-space-y-4 tw-mt-2">
                       <div
-                        class="border rounded-md p-4 text-center flex flex-col space-y-2"
+                        class="tw-border tw-rounded-md tw-p-4 tw-text-center tw-flex tw-flex-col tw-space-y-2"
                       >
-                        <h3 class="font-medium text-xs text-black">
+                        <h3 class="tw-font-medium tw-text-xs tw-text-black">
                           Full Stack Observability Solutions
                         </h3>
                         <a
                           href="/solutions/"
-                          class="text-xs gradient-hover font-medium underline"
+                          class="tw-text-xs gradient-hover tw-font-medium tw-underline"
                           >View Solutions</a
                         >
                       </div>
                       <ul
-                        class="text-[15px] text-gray-500 font-semibold space-y-1"
+                        class="tw-text-[15px] tw-text-gray-500 tw-font-semibold tw-space-y-1"
                       >
                         <li>
                           <a
                             href="/aws-monitoring/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >AWS Monitoring</a
                           >
                         </li>
                         <li>
                           <a
                             href="/azure-monitoring/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >Azure Monitoring</a
                           >
                         </li>
                         <li>
                           <a
                             href="/gcp-monitoring/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >GCP Monitoring</a
                           >
                         </li>
                         <li>
                           <a
                             href="/kubernetes-monitoring/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >Kubernetes Monitoring</a
                           >
                         </li>
                         <li>
                           <a
                             href="/database-monitoring/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >Database Monitoring</a
                           >
                         </li>
                         <li>
                           <a
                             href="/opentelemetry/"
-                            class="block hover:text-black"
+                            class="tw-block hover:tw-text-black"
                             >OpenTelemetry</a
                           >
                         </li>
                       </ul>
                     </div>
                     <div
-                      class="w-full flex justify-center h-0.5"
+                      class="tw-w-full tw-flex tw-justify-center tw-h-0.5"
                       style="
                         background: linear-gradient(
                           90deg,
@@ -419,32 +432,34 @@ <h3 class="font-medium text-xs text-black">
                   </li>
 
                   <!-- RESOURCES -->
-                  <li class="flex flex-col space-y-2">
+                  <li class="tw-flex tw-flex-col tw-space-y-2">
                     <div
-                      class="flex items-center justify-between text-gray-500 text-base font-semibold w-full text-left toggle-btn"
+                      class="tw-flex tw-items-center tw-justify-between tw-text-gray-500 tw-text-base tw-font-semibold tw-w-full tw-text-left toggle-btn"
                     >
                       <h4>Resources</h4>
                       <img
                         src="assets/submenu-icon.svg"
                         alt="Arrow"
-                        class="arrow w-4 h-4 transition-transform"
+                        class="arrow tw-w-4 tw-h-4 tw-transition-transform"
                       />
                     </div>
-                    <div class="submenu hidden space-y-4 mt-2">
-                      <div class="border rounded-md p-4 text-center">
+                    <div class="submenu tw-hidden tw-space-y-4 tw-mt-2">
+                      <div
+                        class="tw-border tw-rounded-md tw-p-4 tw-text-center"
+                      >
                         <h3
-                          class="font-medium text-xs text-black flex flex-col space-y-2"
+                          class="tw-font-medium tw-text-xs tw-text-black tw-flex tw-flex-col tw-space-y-2"
                         >
                           Full Stack Observability Resources
                         </h3>
                         <a
                           href="/resources/"
-                          class="text-xs gradient-hover font-medium underline"
+                          class="tw-text-xs gradient-hover tw-font-medium tw-underline"
                           >View Resources</a
                         >
                       </div>
                       <ul
-                        class="text-[15px] text-gray-500 font-semibold space-y-1"
+                        class="tw-text-[15px] tw-text-gray-500 tw-font-semibold tw-space-y-1"
                       >
                         <li>
                           <a href="/" target="_blank">Documentation</a>
@@ -463,7 +478,7 @@ <h4>Resources</h4>
                       </ul>
                     </div>
                     <div
-                      class="w-full flex justify-center h-0.5 mt-1"
+                      class="tw-w-full tw-flex tw-justify-center tw-h-0.5 tw-mt-1"
                       style="
                         background: linear-gradient(
                           90deg,
@@ -479,10 +494,10 @@ <h4>Resources</h4>
 
                 <!-- Pricing Button -->
                 <div
-                  class="flex flex-col justify-center w-full items-center space-y-4 pt-4 px-10"
+                  class="tw-flex tw-flex-col tw-justify-center tw-w-full tw-items-center tw-space-y-4 tw-pt-4 tw-px-10"
                 >
                   <a
-                    class="p-3 border border-black rounded-md w-full text-center text-black text-xs hover:bg-gray-100"
+                    class="tw-p-3 tw-border tw-border-black tw-rounded-md tw-w-full tw-text-center tw-text-black tw-text-xs hover:tw-bg-gray-100"
                     href="/pricing/"
                     >Pricing</a
                   >
@@ -505,15 +520,15 @@ <h4>Resources</h4>
 
         if (menuIcon && closeIcon && mobileMenu) {
           menuIcon.addEventListener("click", () => {
-            mobileMenu.classList.remove("hidden");
-            menuIcon.classList.add("hidden");
-            closeIcon.classList.remove("hidden");
+            mobileMenu.classList.remove("tw-hidden");
+            menuIcon.classList.add("tw-hidden");
+            closeIcon.classList.remove("tw-hidden");
           });
 
           closeIcon.addEventListener("click", () => {
-            mobileMenu.classList.add("hidden");
-            menuIcon.classList.remove("hidden");
-            closeIcon.classList.add("hidden");
+            mobileMenu.classList.add("tw-hidden");
+            menuIcon.classList.remove("tw-hidden");
+            closeIcon.classList.add("tw-hidden");
           });
         }
 
@@ -522,20 +537,21 @@ <h4>Resources</h4>
 
         toggleButtons.forEach((btn) => {
           btn.addEventListener("click", function () {
-            const isOpen = this.nextElementSibling.classList.contains("hidden");
+            const isOpen =
+              this.nextElementSibling.classList.contains("tw-hidden");
 
             // Close all submenus
             document
               .querySelectorAll(".submenu")
-              .forEach((menu) => menu.classList.add("hidden"));
+              .forEach((menu) => menu.classList.add("tw-hidden"));
             document
               .querySelectorAll(".arrow")
-              .forEach((icon) => icon.classList.remove("rotate-90"));
+              .forEach((icon) => icon.classList.remove("tw-rotate-90"));
 
             // Open clicked submenu
             if (isOpen) {
-              this.nextElementSibling.classList.remove("hidden");
-              this.querySelector(".arrow").classList.add("rotate-90");
+              this.nextElementSibling.classList.remove("tw-hidden");
+              this.querySelector(".arrow").classList.add("tw-rotate-90");
             }
           });
         });
diff --git a/overrides/partials/navbar.html b/overrides/partials/navbar.html
index 14170fbe..e7b054c3 100644
--- a/overrides/partials/navbar.html
+++ b/overrides/partials/navbar.html
@@ -29,11 +29,11 @@
 <!-- Header -->
 <header class="{{ class }}" data-md-component="header">
   <nav
-    class="md-header__inner items-center lg:justify-between"
+    class="md-header__inner tw-items-center lg:tw-justify-between"
     aria-label="{{ lang.t('header') }}"
   >
     <!-- Left section (Logo + Docs Title) -->
-    <div class="flex items-center flex-shrink-0 flex-1 w-full">
+    <div class="tw-flex tw-items-center tw-flex-shrink-0 tw-flex-1 tw-w-full">
       <!-- Drawer button -->
       <label class="md-header__button md-icon" for="__drawer">
         {% include ".icons/material/menu.svg" %}
@@ -167,7 +167,7 @@
     </div>
 
     <!-- Center section (Search) -->
-    <div class="lg:flex lg:flex-grow">
+    <div class="lg:tw-flex lg:tw-flex-grow">
       {% if "material/search" in config.plugins %}
       <label class="md-header__button md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}
@@ -176,7 +176,7 @@
     </div>
 
     <!-- Right section (Color palette, language selector) -->
-    <div class="flex items-center gap-2 flex-shrink-0">
+    <div class="tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0">
       {% if config.theme.palette %} {% if not config.theme.palette is mapping %}
       <form class="md-header__option" data-md-component="palette">
         {% for option in config.theme.palette %} {% set scheme = option.scheme |
diff --git a/package-lock.json b/package-lock.json
index 4abc3f35..35500245 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,39 +5,36 @@
   "packages": {
     "": {
       "dependencies": {
-        "@tailwindcss/cli": "^4.1.11",
-        "tailwindcss": "^4.1.11"
+        "tailwindcss": "^3.4.15"
       }
     },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
       "license": "ISC",
       "dependencies": {
-        "minipass": "^7.0.4"
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
       },
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=12"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
-      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -46,8 +43,6 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -55,667 +50,360 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
-      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.29",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
-      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
-      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-      "hasInstallScript": true,
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
       "license": "MIT",
       "dependencies": {
-        "detect-libc": "^1.0.3",
-        "is-glob": "^4.0.3",
-        "micromatch": "^4.0.5",
-        "node-addon-api": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
       },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.1",
-        "@parcel/watcher-darwin-arm64": "2.5.1",
-        "@parcel/watcher-darwin-x64": "2.5.1",
-        "@parcel/watcher-freebsd-x64": "2.5.1",
-        "@parcel/watcher-linux-arm-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm-musl": "2.5.1",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm64-musl": "2.5.1",
-        "@parcel/watcher-linux-x64-glibc": "2.5.1",
-        "@parcel/watcher-linux-x64-musl": "2.5.1",
-        "@parcel/watcher-win32-arm64": "2.5.1",
-        "@parcel/watcher-win32-ia32": "2.5.1",
-        "@parcel/watcher-win32-x64": "2.5.1"
-      }
-    },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
-      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">= 8"
       }
     },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
-      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">= 8"
       }
     },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
-      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
-      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">= 8"
       }
     },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
-      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
       "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">=14"
       }
     },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
-      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
+        "node": ">=12"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
-      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/ansi-styles": {
+      "version": "6.2.3",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
+        "node": ">=12"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
-      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "license": "MIT"
     },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
-      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
-      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">= 8"
       }
     },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
-      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "license": "MIT"
     },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
-      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
+        "node": ">=8"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
-      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+      "dependencies": {
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/@tailwindcss/cli": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/cli/-/cli-4.1.11.tgz",
-      "integrity": "sha512-7RAFOrVaXCFz5ooEG36Kbh+sMJiI2j4+Ozp71smgjnLfBRu7DTfoq8DsTvzse2/6nDeo2M3vS/FGaxfDgr3rtQ==",
+    "node_modules/braces": {
+      "version": "3.0.3",
       "license": "MIT",
       "dependencies": {
-        "@parcel/watcher": "^2.5.1",
-        "@tailwindcss/node": "4.1.11",
-        "@tailwindcss/oxide": "4.1.11",
-        "enhanced-resolve": "^5.18.1",
-        "mri": "^1.2.0",
-        "picocolors": "^1.1.1",
-        "tailwindcss": "4.1.11"
+        "fill-range": "^7.1.1"
       },
-      "bin": {
-        "tailwindcss": "dist/index.mjs"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
-      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
       "license": "MIT",
-      "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "enhanced-resolve": "^5.18.1",
-        "jiti": "^2.4.2",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.17",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.11"
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
-      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
-      "hasInstallScript": true,
+    "node_modules/chokidar": {
+      "version": "3.6.0",
       "license": "MIT",
       "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.11",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
-        "@tailwindcss/oxide-darwin-x64": "4.1.11",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
-      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
+        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
-      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 6"
       }
     },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
-      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/color-convert": {
+      "version": "2.0.1",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=7.0.0"
       }
     },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
-      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "license": "MIT"
     },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
-      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/commander": {
+      "version": "4.1.1",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 6"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
-      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 8"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
-      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/cssesc": {
+      "version": "3.0.0",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=4"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
-      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "license": "Apache-2.0"
     },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
-      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "license": "MIT"
     },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
-      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "license": "MIT"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.3",
-        "@emnapi/runtime": "^1.4.3",
-        "@emnapi/wasi-threads": "^1.0.2",
-        "@napi-rs/wasm-runtime": "^0.2.11",
-        "@tybys/wasm-util": "^0.9.0",
-        "tslib": "^2.8.0"
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=8.6.0"
       }
     },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
-      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 6"
       }
     },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
-      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
       }
     },
-    "node_modules/@tailwindcss/oxide/node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
-      "license": "Apache-2.0",
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "license": "MIT",
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "license": "ISC",
       "dependencies": {
-        "fill-range": "^7.1.1"
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/detect-libc": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "license": "Apache-2.0",
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
       "bin": {
-        "detect-libc": "bin/detect-libc.js"
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
       },
       "engines": {
-        "node": ">=0.10"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.18.2",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
-      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+    "node_modules/hasown": {
+      "version": "2.0.2",
       "license": "MIT",
       "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "function-bind": "^1.1.2"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
       "license": "MIT",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "binary-extensions": "^2.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "license": "ISC"
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -726,410 +414,717 @@
     },
     "node_modules/is-number": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
     },
-    "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "license": "ISC"
     },
-    "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
-      "license": "MPL-2.0",
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
+        "@isaacs/cliui": "^8.0.2"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/isaacs"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "license": "MIT",
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=14"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "license": "ISC"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+      "engines": {
+        "node": ">=8.6"
       }
     },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
       ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=8.6"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
       ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
       "engines": {
-        "node": ">= 12.0.0"
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
       }
     },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
       "engines": {
-        "node": ">= 12.0.0"
+        "node": "^12 || ^14 || >= 16"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
       }
     },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
       ],
+      "license": "MIT"
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">= 0.4"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
       ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=12"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lightningcss/node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
-      "license": "Apache-2.0",
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.17",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
-      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
       "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
       "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">=8.6"
+        "node": ">=8"
       }
     },
-    "node_modules/minipass": {
+    "node_modules/strip-ansi": {
       "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
       "license": "MIT",
       "dependencies": {
-        "minipass": "^7.1.2"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">=8"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
       "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
       "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/mri": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
-      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
       "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+    "node_modules/tailwindcss/node_modules/jiti": {
+      "version": "1.21.7",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "license": "Apache-2.0"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
       "license": "MIT"
     },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
+    "node_modules/which": {
+      "version": "2.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
     },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
       "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
       "engines": {
-        "node": ">=8.6"
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "license": "BSD-3-Clause",
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/tailwindcss": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
-      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
-      "license": "MIT"
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/tapable": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
-      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
       "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
-      "license": "ISC",
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "license": "MIT",
       "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
       "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">=8"
       }
     },
-    "node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
-      "license": "BlueOak-1.0.0",
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 14.6"
       }
     }
   }
diff --git a/package.json b/package.json
index 59aeb296..0ddd5bbd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,10 @@
 {
+  "scripts": {
+    "build-css": "tailwindcss -i ./input.css -o ./overrides/css/output.css --watch",
+    "build-css-prod": "tailwindcss -i ./input.css -o ./overrides/css/output.css --minify",
+    "build-css-dev": "tailwindcss -i ./input.css -o ./overrides/css/output.css"
+  },
   "dependencies": {
-    "@tailwindcss/cli": "^4.1.11",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^3.4.15"
   }
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 00000000..d194e47d
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,9 @@
+// tailwind.config.cjs
+module.exports = {
+  content: ["./docs/**/*.{html,md}", "./overrides/**/*.{html,js}"],
+  prefix: "tw-", // 👈 add prefix here
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

From 919556cf9415d0fd5214b0148f79bfd0aa68d5e4 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 18:05:28 +0530
Subject: [PATCH 18/36] fix: remove unused css

---
 input.css | 98 -------------------------------------------------------
 1 file changed, 98 deletions(-)

diff --git a/input.css b/input.css
index 8e8d6ea9..2fe164b6 100644
--- a/input.css
+++ b/input.css
@@ -109,101 +109,3 @@ main {
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
-
-.md-header {
-  position: fixed !important;
-  top: 70px !important;
-}
-
-.md-main__inner {
-  margin-top: 70px !important;
-}
-
-.md-sidebar {
-  top: 75px !important;
-  /* height: calc(100vh - 105px) !important; */
-}
-
-@media (min-width: 640px) and (max-width: 1023px) {
-  .md-sidebar {
-    top: 70px !important;
-  }
-}
-@media (min-width: 1024px) {
-  .md-sidebar {
-    top: 70px !important;
-    height: calc(100vh - 70px) !important;
-  }
-}
-
-/* @media screen and (min-width: 60em) {
-  .md-sidebar--secondary:not([hidden]) {
-    display: none !important;
-  }
-} */
-
-/* @media (min-width: 768px) {
- .md-sidebar__scrollwrap {
-  display: none !important;
- }
-  
-} */
-nav.md-grid {
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1rem; /* default (base) = px-4 */
-  padding-right: 1rem;
-}
-
-@media (min-width: 640px) {
-  nav.md-grid {
-    padding-left: 1.5rem; /* sm:px-6 */
-    padding-right: 1.5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  nav.md-grid {
-    padding-left: 2rem; /* lg:px-8 */
-    padding-right: 2rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  nav.md-grid {
-    padding-left: 2.5rem; /* xl:px-10 */
-    padding-right: 2.5rem;
-  }
-}
-.md-search__inner {
-  width: 20rem;
-}
-@media (max-width: 768px) {
-  .md-search__inner {
-    top: 80px !important;
-  }
-
-  .md-search__input {
-    pointer-events: auto !important;
-    color: black !important;
-  }
-}
-
-.md-header__title {
-  margin-left: 0.1rem;
-  width: 100px;
-}
-
-@media (min-width: 1025px) {
-  .md-header__title {
-    flex-grow: 0;
-    flex-basis: auto;
-    max-width: 400px;
-  }
-  .md-header__inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-}

From ca6acf5ac4d30df7e7cabe97a9fb0fd8fa88e752 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 18:37:19 +0530
Subject: [PATCH 19/36] fix: logo position issue

---
 overrides/css/output.css       | 28 ++++++++++------------------
 overrides/partials/header.html |  2 +-
 tailwind.config.cjs            |  9 +++++++++
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/overrides/css/output.css b/overrides/css/output.css
index 9d0499ac..5d868a97 100644
--- a/overrides/css/output.css
+++ b/overrides/css/output.css
@@ -558,33 +558,33 @@ video {
   width: 100%;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 30rem) {
   .tw-container {
-    max-width: 640px;
+    max-width: 30rem;
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 44rem) {
   .tw-container {
-    max-width: 768px;
+    max-width: 44rem;
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 52rem) {
   .tw-container {
-    max-width: 1024px;
+    max-width: 52rem;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 68rem) {
   .tw-container {
-    max-width: 1280px;
+    max-width: 68rem;
   }
 }
 
-@media (min-width: 1536px) {
+@media (min-width: 86rem) {
   .tw-container {
-    max-width: 1536px;
+    max-width: 86rem;
   }
 }
 
@@ -721,10 +721,6 @@ video {
   height: 0.125rem;
 }
 
-.tw-h-11 {
-  height: 2.75rem;
-}
-
 .tw-h-12 {
   height: 3rem;
 }
@@ -765,10 +761,6 @@ video {
   width: 10rem;
 }
 
-.tw-w-48 {
-  width: 12rem;
-}
-
 .tw-w-5 {
   width: 1.25rem;
 }
diff --git a/overrides/partials/header.html b/overrides/partials/header.html
index 0399c8fb..450785ec 100644
--- a/overrides/partials/header.html
+++ b/overrides/partials/header.html
@@ -10,7 +10,7 @@
           <div
             class="tw-container tw-mx-auto tw-px-4 sm:tw-px-6 lg:tw-px-8 xl:tw-px-10 tw-flex tw-justify-between tw-items-center tw-py-2"
           >
-            <a class="tw-flex tw-items-center tw-h-11 tw-w-48" href="/">
+            <a class="tw-flex tw-items-center tw-w-40 md:tw-50" href="/">
               <img
                 src="/docs/assets/o2-logo-readme.svg"
                 alt="OpenObserve"
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index d194e47d..c0cc90a9 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,6 +4,15 @@ module.exports = {
   prefix: "tw-", // 👈 add prefix here
   theme: {
     extend: {},
+    container: {
+      screens: {
+        sm: "30rem", // 672px (increased from 640px)
+        md: "44rem", // 800px (increased from 768px)
+        lg: "52rem", // 1088px (increased from 1024px)
+        xl: "68rem", // 1360px (increased from 1280px)
+        "2xl": "86rem", // 1600px (increased from 1536px)
+      },
+    },
   },
   plugins: [],
 };

From f92c08dc409eeba737111c7d15fd7744cfc6bd2e Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 18:41:07 +0530
Subject: [PATCH 20/36] fix: resolve path issue of mobile screen logo

---
 overrides/partials/header.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/overrides/partials/header.html b/overrides/partials/header.html
index 450785ec..bab91e6c 100644
--- a/overrides/partials/header.html
+++ b/overrides/partials/header.html
@@ -198,7 +198,7 @@
                 href="/"
               >
                 <img
-                  src="assets/o2-logo-readme.svg"
+                  src="/docs/assets/o2-logo-readme.svg"
                   alt="OpenObserve"
                   class="tw-w-full tw-h-full tw-py-1"
                 />
@@ -230,13 +230,13 @@
                 >
                   <img
                     id="menu-icon"
-                    src="assets/navmenu.svg"
+                    src="/docs/assets/navmenu.svg"
                     alt="Open Menu"
                     class="tw-block"
                   />
                   <img
                     id="close-icon"
-                    src="assets/close.svg"
+                    src="/docs/assets/close.svg"
                     alt="Close Menu"
                     class="tw-hidden"
                   />

From 9d5229e1a1d5a0e9352ea95c646553f9cfd63fb1 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Thu, 11 Sep 2025 19:32:13 +0530
Subject: [PATCH 21/36] fix: resolve sidebar scroll issue

---
 docs/stylesheets/extra.css | 427 +++++++++++++++++++++++++++++++++++++
 1 file changed, 427 insertions(+)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 564ffc5f..c69a2bdc 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -11,6 +11,71 @@
   z-index: 200 !important;
 }
 
+/* STRONG FINAL MOBILE SCROLL FIX (highest priority):
+   Lock the sidebar inner to the viewport and force the scrollwrap to handle
+   vertical scrolling. This is intentionally placed at the end and uses
+   !important to win over earlier rules that made nested lists overflow.
+*/
+@media (max-width: 76.24em) {
+  /* Ensure the sidebar occupies the viewport height while drawer is open */
+  .md-sidebar--primary,
+  input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary,
+  .md-toggle[data-md-toggle="drawer"]:checked
+    ~ .md-container
+    .md-sidebar--primary {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important; /* prevent sidebar itself from scrolling */
+    will-change: auto !important;
+  }
+
+  /* Keep the inner wrapper full height but clipped; scrollwrap will scroll */
+  .md-sidebar--primary .md-sidebar__inner {
+    height: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+    position: relative !important;
+  }
+
+  /* Force scrollwrap to fill available space and handle vertical scrolling */
+  .md-sidebar--primary .md-sidebar__scrollwrap,
+  input[id="__drawer"]:checked
+    ~ .md-container
+    .md-sidebar--primary
+    .md-sidebar__scrollwrap,
+  .md-toggle[data-md-toggle="drawer"]:checked
+    ~ .md-container
+    .md-sidebar--primary
+    .md-sidebar__scrollwrap {
+    height: 100% !important;
+    max-height: 100% !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch !important;
+    position: relative !important;
+  }
+
+  /* Prevent nested navs from using absolute/transform tricks that remove them
+     from the scroll context (keep them in normal flow) */
+  .md-sidebar--primary .md-nav__list,
+  .md-sidebar--primary .md-nav__item,
+  .md-sidebar--primary .md-nav__item > .md-nav__list,
+  .md-sidebar--primary nav[data-md-level] {
+    position: static !important;
+    transform: none !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  /* Make sure scrolling works with touch and pointer events */
+  .md-sidebar--primary .md-sidebar__scrollwrap {
+    touch-action: pan-y !important;
+  }
+}
+
 [data-md-color-scheme="openobserve"] {
   --md-primary-fg-color: #ffffff;
   --md-primary-fg-color--light: #ecb7b7;
@@ -970,3 +1035,365 @@ nav.md-grid {
     flex-grow: 1 !important;
   }
 }
+
+/* MOBILE FIX: Ensure primary sidebar links are tappable on mobile
+   - force the sidebar and its inner containers above the overlay
+   - ensure pointer-events are enabled for sidebar and links
+   - enable smooth touch scrolling inside the scrollwrap
+*/
+@media (max-width: 76.24em) {
+  /* Make sure the sidebar sits above the overlay and other content */
+  .md-sidebar--primary {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    -webkit-overflow-scrolling: touch !important; /* smooth scrolling on iOS */
+  }
+
+  /* Ensure the scroll container accepts touch and clicks */
+  .md-sidebar--primary .md-sidebar__scrollwrap,
+  .md-sidebar--primary .md-sidebar__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    overflow: auto !important; /* allow scrolling and tapping inside */
+  }
+
+  /* Make links fully interactive and on top of any small pseudo-elements */
+  .md-sidebar--primary .md-nav__link {
+    position: relative !important;
+    z-index: 1002 !important;
+    pointer-events: auto !important;
+    display: block !important;
+  }
+
+  /* Prevent any active-indicator pseudo-elements from intercepting taps */
+  .md-sidebar--primary .md-nav__item--active > .md-nav__link::before,
+  .md-sidebar--primary > .o-active-indicator {
+    pointer-events: none !important;
+  }
+
+  /* Keep overlay visually behind sidebar and don't intercept taps when drawer is open */
+  .md-overlay {
+    z-index: 900 !important;
+  }
+}
+
+/* STRONG MOBILE OVERRIDES: fix overlap and non-clickable links */
+@media (max-width: 76.24em) {
+  /* Make sidebar a narrow drawer (avoid full-width that can cover content) */
+  .md-sidebar--primary {
+    position: fixed !important;
+    left: 0 !important;
+    right: auto !important;
+    width: 280px !important;
+    max-width: 90vw !important;
+    transform: translateX(-100%) !important; /* hidden by default */
+    z-index: 1200 !important; /* baseline above header */
+    top: 0 !important;
+    height: 100vh !important;
+    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important;
+    background-clip: padding-box !important;
+  }
+
+  /* When drawer is checked (open), bring sidebar fully into view and above overlay */
+  input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary,
+  .md-toggle[data-md-toggle="drawer"]:checked
+    ~ .md-container
+    .md-sidebar--primary {
+    transform: translateX(0) !important;
+    z-index: 1400 !important; /* ensure it's above overlay and header */
+    pointer-events: auto !important;
+  }
+
+  /* Ensure overlay remains behind the sidebar when open */
+  input[id="__drawer"]:checked ~ .md-overlay,
+  .md-toggle[data-md-toggle="drawer"]:checked ~ .md-container .md-overlay {
+    z-index: 1300 !important; /* below the sidebar but above page */
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+
+  /* Keep header beneath the sidebar so it doesn't capture taps */
+  .md-header {
+    z-index: 1250 !important;
+  }
+
+  /* Scroll container should allow touch scrolling and not intercept taps */
+  .md-sidebar--primary .md-sidebar__scrollwrap,
+  .md-sidebar--primary .md-sidebar__inner {
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+    pointer-events: auto !important;
+    z-index: 1401 !important;
+  }
+
+  /* Links: ensure they receive taps and use touch-action for faster response */
+  .md-sidebar--primary .md-nav__link {
+    pointer-events: auto !important;
+    z-index: 1402 !important;
+    touch-action: manipulation !important;
+  }
+
+  /* Deactivate any decorative element from intercepting touches */
+  .md-sidebar--primary .md-nav__item--active > .md-nav__link::before,
+  .md-sidebar--primary > .o-active-indicator,
+  .md-sidebar--primary:before,
+  .md-sidebar--primary:after {
+    pointer-events: none !important;
+  }
+
+  /* Safety: ensure nothing else is layered above the sidebar when open */
+  input[id="__drawer"]:checked ~ .md-container * {
+    pointer-events: auto !important;
+  }
+}
+
+/* MOBILE ACCORDION: hide nested navs by default and show only when toggled */
+@media (max-width: 76.24em) {
+  /* Hide all nested nav blocks by default to prevent them stacking above parents
+    but keep top-level (data-md-level="0") visible */
+  .md-sidebar--primary .md-nav[data-md-level]:not([data-md-level="0"]) {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
+    position: static !important;
+    transform: none !important;
+  }
+
+  /* When the toggle checkbox is checked, show the corresponding nav below the label */
+  .md-nav__toggle:checked ~ nav[data-md-level],
+  .md-nav__toggle:checked + label + nav[data-md-level] {
+    display: block !important;
+    visibility: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    position: static !important;
+    transform: none !important;
+  }
+
+  /* Ensure child ul lists are visible when their parent nav is shown */
+  .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list,
+  .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list {
+    display: block !important;
+    visibility: visible !important;
+    overflow: visible !important;
+    max-height: none !important;
+  }
+
+  /* Make sure labels remain interactive and in normal flow */
+  .md-sidebar--primary .md-nav__link {
+    display: block !important;
+    position: relative !important;
+  }
+}
+
+/* MOBILE NESTED-LIST FIX: ensure subitems expand below their parent and are readable */
+@media (max-width: 76.24em) {
+  /* Allow the sidebar scrolling container and inner container to show expanded content */
+  .md-sidebar--primary .md-sidebar__scrollwrap,
+  .md-sidebar--primary .md-sidebar__inner {
+    overflow: visible !important;
+    max-height: none !important;
+    position: static !important;
+  }
+
+  /* Ensure nav lists and items flow in document order (not absolutely positioned) */
+  .md-sidebar--primary .md-nav__list,
+  .md-sidebar--primary .md-nav__item,
+  .md-sidebar--primary .md-nav__item > .md-nav__list {
+    position: static !important;
+    overflow: visible !important;
+    max-height: none !important;
+    display: block !important;
+  }
+
+  /* If nested lists were collapsed using transforms or translate, reset them */
+  .md-sidebar--primary .md-nav__item .md-nav__list {
+    transform: none !important;
+  }
+
+  /* Remove clipping on individual link elements so child lists aren't hidden */
+  .md-sidebar--primary .md-nav__link,
+  .md-sidebar--primary .md-nav__title {
+    overflow: visible !important;
+  }
+
+  /* Reduce z-index stacking on nav elements so expanded lists appear in normal flow */
+  .md-sidebar--primary .md-nav__list,
+  .md-sidebar--primary .md-nav__item {
+    z-index: auto !important;
+  }
+}
+
+/* MOBILE: keep label text and arrow on one line; ensure nested navs expand in-flow */
+@media (max-width: 76.24em) {
+  .md-sidebar--primary .md-nav__link {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: 0.5rem !important;
+    white-space: nowrap !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+
+  .md-sidebar--primary .md-nav__icon {
+    margin-left: 0.5rem !important;
+    flex-shrink: 0 !important;
+    order: 2 !important;
+  }
+
+  /* Show nested nav when its toggle checkbox is checked */
+  input[type="checkbox"].md-nav__toggle:checked + label + nav[data-md-level],
+  input[type="checkbox"].md-nav__toggle:checked ~ nav[data-md-level],
+  .md-nav__toggle:checked + label + nav[data-md-level],
+  .md-nav__toggle:checked ~ nav[data-md-level] {
+    display: block !important;
+    visibility: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    position: static !important;
+    transform: none !important;
+  }
+
+  /* Ensure child lists inside shown nav are visible and flow below */
+  input[type="checkbox"].md-nav__toggle:checked
+    + label
+    + nav[data-md-level]
+    .md-nav__list,
+  input[type="checkbox"].md-nav__toggle:checked
+    ~ nav[data-md-level]
+    .md-nav__list,
+  .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list,
+  .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list {
+    display: block !important;
+    visibility: visible !important;
+    overflow: visible !important;
+    max-height: none !important;
+  }
+
+  /* Ensure nested labels stay full-width and don't wrap arrow */
+  .md-sidebar--primary .md-nav__item--nested > .md-nav__link {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    white-space: nowrap !important;
+  }
+}
+
+/* SHOW ACTUAL SUBITEMS: hide duplicate nav titles and force UL visible when open */
+@media (max-width: 76.24em) {
+  /* Hide the internal nav title that repeats the parent label inside the nav block */
+  .md-sidebar--primary nav[data-md-level] > .md-nav__title {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    overflow: hidden !important;
+  }
+
+  /* Show the direct UL (.md-nav__list) when the toggle checkbox is checked or nav reports expanded */
+  input.md-nav__toggle:checked + label + nav[data-md-level] > .md-nav__list,
+  input.md-nav__toggle:checked ~ nav[data-md-level] > .md-nav__list,
+  nav[data-md-level][aria-expanded="true"] > .md-nav__list {
+    display: block !important;
+    visibility: visible !important;
+    max-height: none !important;
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  /* Also ensure the nav container itself is visible when toggled */
+  input.md-nav__toggle:checked + label + nav[data-md-level],
+  input.md-nav__toggle:checked ~ nav[data-md-level],
+  nav[data-md-level][aria-expanded="true"] {
+    display: block !important;
+    visibility: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  /* Make sure nested items are in normal flow */
+  .md-sidebar--primary .md-nav__item--nested {
+    display: block !important;
+  }
+}
+
+/* EXTRA: explicitly show/hide the actual <ul class="md-nav__list"> child
+   when a toggle is checked, with very high specificity to override
+   any framework rules that might still hide the lists. */
+@media (max-width: 76.24em) {
+  /* Hide all nested ul lists by default (safety) */
+  .md-sidebar--primary
+    nav[data-md-level]:not([data-md-level="0"])
+    > .md-nav__list {
+    display: none !important;
+    visibility: hidden !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
+  }
+
+  /* Show the direct child .md-nav__list when the preceding checkbox is checked */
+  input[type="checkbox"].md-nav__toggle:checked
+    + label
+    + nav[data-md-level]
+    > .md-nav__list,
+  input[type="checkbox"].md-nav__toggle:checked
+    ~ nav[data-md-level]
+    > .md-nav__list,
+  .md-nav__toggle:checked + label + nav[data-md-level] > .md-nav__list,
+  .md-nav__toggle:checked ~ nav[data-md-level] > .md-nav__list {
+    display: block !important;
+    visibility: visible !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  /* Also make sure any nested lists deeper inside are visible when parent is open */
+  input[type="checkbox"].md-nav__toggle:checked
+    + label
+    + nav[data-md-level]
+    .md-nav__list,
+  input[type="checkbox"].md-nav__toggle:checked
+    ~ nav[data-md-level]
+    .md-nav__list,
+  .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list,
+  .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list {
+    display: block !important;
+    visibility: visible !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+}
+
+/* FINAL MOBILE SCROLL FIX: force the mobile sidebar scrollwrap to scroll when
+   the menu content is taller than the viewport. Placed last to override
+   earlier overflow:visible rules. */
+@media (max-width: 76.24em) {
+  /* Apply to the scrollwrap generally and when the drawer is open */
+  .md-sidebar--primary .md-sidebar__scrollwrap,
+  input[id="__drawer"]:checked
+    ~ .md-container
+    .md-sidebar--primary
+    .md-sidebar__scrollwrap,
+  .md-toggle[data-md-toggle="drawer"]:checked
+    ~ .md-container
+    .md-sidebar--primary
+    .md-sidebar__scrollwrap {
+    max-height: calc(100vh - 3.5rem) !important; /* leave space for header */
+    height: calc(100vh - 3.5rem) !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch !important;
+    position: relative !important;
+  }
+
+  /* Ensure nested navs don't push content out of the scroll container */
+  .md-sidebar--primary .md-nav__list,
+  .md-sidebar--primary .md-nav__item {
+    box-sizing: border-box !important;
+  }
+}

From 6b13d09d74c24ba2ad611659777488712951f993 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Fri, 12 Sep 2025 12:26:10 +0530
Subject: [PATCH 22/36] fix: remove background from title of secondary sidebar

---
 docs/stylesheets/extra.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index c69a2bdc..65db127d 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -568,6 +568,21 @@ html {
   display: none !important;
 }
 
+/* Prevent theme from adding background or shadow to secondary nav titles */
+@media screen and (min-width: 60em) {
+  .md-nav--secondary .md-nav__title,
+  .md-nav--secondary .md-nav__title:before,
+  .md-nav--secondary .md-nav__title:after,
+  .md-sidebar--secondary .md-nav__title,
+  .md-sidebar--secondary .md-nav__title:before,
+  .md-sidebar--secondary .md-nav__title:after {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+    position: static !important; /* prevent sticky if applied elsewhere */
+    z-index: auto !important;
+  }
+}
 /* Reset any conflicting styles */
 
 /* Reset any conflicting styles */

From 2a8fbadd5a3e92050e643e9682d113e2de912d04 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 16 Sep 2025 12:02:06 +0530
Subject: [PATCH 23/36] fix: make css related changes

---
 docs/stylesheets/extra.css     |  2 +-
 overrides/partials/navbar.html | 38 ++++++++++++++++++----------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 65db127d..bc0c8e61 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -354,7 +354,7 @@ html {
 .md-header__inner {
   min-height: 4rem !important;
   height: auto !important;
-  padding: 0.5rem 1rem !important;
+  /* padding: 0.5rem 1rem !important; */
 }
 
 /* --- FINAL: Sidebar Custom Design --- */
diff --git a/overrides/partials/navbar.html b/overrides/partials/navbar.html
index e7b054c3..c232bad3 100644
--- a/overrides/partials/navbar.html
+++ b/overrides/partials/navbar.html
@@ -29,7 +29,7 @@
 <!-- Header -->
 <header class="{{ class }}" data-md-component="header">
   <nav
-    class="md-header__inner tw-items-center lg:tw-justify-between"
+    class="tw-container tw-mx-auto tw-px-4 sm:tw-px-6 lg:tw-px-8 xl:tw-px-10 md-header__inner tw-items-center lg:tw-justify-between"
     aria-label="{{ lang.t('header') }}"
   >
     <!-- Left section (Logo + Docs Title) -->
@@ -55,22 +55,22 @@
           cursor: pointer;
         "
       >
-      <div
-        style="
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          background-color: rgb(245, 243, 255);
-          border-radius: 8px;
-          padding: 5px 30px;
-          margin: 10px 12px 5px 12px;
-          gap: 6px;
-          flex-shrink: 0;
-          min-width: 0;
-          transition: all 0.2s ease;
-        "
-        class="docs-header-container"
-      >
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: rgb(245, 243, 255);
+            border-radius: 8px;
+            padding: 5px 30px;
+            margin: 10px 12px 5px 12px;
+            gap: 6px;
+            flex-shrink: 0;
+            min-width: 0;
+            transition: all 0.2s ease;
+          "
+          class="docs-header-container"
+        >
           <img
             src="/docs/assets/docs-dark.svg"
             alt="Docs Icon Light"
@@ -83,7 +83,9 @@
             class="docs-icon-dark"
             style="height: 24px; width: 24px; display: none"
           />
-          <div style="display: flex; align-items: center; min-width: 0; flex: 1">
+          <div
+            style="display: flex; align-items: center; min-width: 0; flex: 1"
+          >
             <span
               style="
                 font-weight: bold;

From 6c4c267f018f9dd840055cd9c7d50110d7a50e32 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 16 Sep 2025 12:10:37 +0530
Subject: [PATCH 24/36] fix: change theme moon icon color

---
 docs/assets/moon.svg | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/assets/moon.svg b/docs/assets/moon.svg
index 6bd2db16..4345aa4b 100644
--- a/docs/assets/moon.svg
+++ b/docs/assets/moon.svg
@@ -2,12 +2,12 @@
 <path d="M8.65039 0.753906C9.28931 0.488715 9.72474 0.471633 10.0049 0.522461C10.2824 0.572894 10.4502 0.698265 10.5449 0.792969C10.6314 0.879461 10.7498 1.03961 10.7959 1.30371C10.8422 1.569 10.8235 1.98226 10.5605 2.58594L10.5596 2.58691C9.93145 4.03857 9.625 5.57343 9.625 7.15918V7.16211C9.6391 10.0125 10.7577 12.6469 12.5654 14.6641V14.665C14.6106 16.9607 17.548 18.4508 20.7949 18.5908V18.5918C21.5667 18.6285 22.335 18.5797 23.0898 18.4648L23.4131 18.4111C24.0891 18.2904 24.5118 18.3663 24.7666 18.4727C25.0183 18.5779 25.1434 18.7281 25.2021 18.8271L25.209 18.8389C25.2754 18.9444 25.3561 19.129 25.3398 19.4062C25.3234 19.6863 25.2055 20.1028 24.8027 20.6631C22.2576 24.1208 18.2208 26.1523 13.9121 26.1523C13.7171 26.1523 13.5195 26.1404 13.3037 26.127L13.292 26.126C12.0092 26.0747 10.7645 25.8309 9.58301 25.4199H9.58203C4.63948 23.7079 0.91582 19.1656 0.530273 13.8721H0.53125C0.145962 8.23402 3.39402 2.96541 8.65039 0.753906Z" fill="url(#paint0_linear_986_372)" stroke="url(#paint1_linear_986_372)"/>
 <defs>
 <linearGradient id="paint0_linear_986_372" x1="0" y1="13.3263" x2="25.8417" y2="13.3263" gradientUnits="userSpaceOnUse">
-<stop offset="0.1875" stop-color="#6A76E3"/>
-<stop offset="1" stop-color="#45A4F3"/>
+<stop offset="0.1875" stop-color="#7c3aed"/>
+<stop offset="1" stop-color="#7c3aed"/>
 </linearGradient>
 <linearGradient id="paint1_linear_986_372" x1="0" y1="13.3263" x2="25.8417" y2="13.3263" gradientUnits="userSpaceOnUse">
-<stop offset="0.1875" stop-color="#6A76E3"/>
-<stop offset="1" stop-color="#45A4F3"/>
+<stop offset="0.1875" stop-color="#7c3aed"/>
+<stop offset="1" stop-color="#7c3aed"/>
 </linearGradient>
 </defs>
-</svg>
+</svg>
\ No newline at end of file

From 9e94c59b6d35301914419dc1ec4a7a3e75a8493b Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Tue, 16 Sep 2025 12:26:20 +0530
Subject: [PATCH 25/36] fix: add required css

---
 docs/stylesheets/extra.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index bc0c8e61..445e01e7 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1242,6 +1242,12 @@ nav.md-grid {
   }
 }
 
+/* Ensure main content is always tall enough so sidebar never shifts above navbar */
+.md-main,
+.md-content {
+  min-height: calc(100vh - 4rem); /* 4rem = navbar height, adjust if needed */
+}
+
 /* MOBILE: keep label text and arrow on one line; ensure nested navs expand in-flow */
 @media (max-width: 76.24em) {
   .md-sidebar--primary .md-nav__link {

From f9e7e82269f15646d8f4f4e23de162f19e22c13b Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 09:57:58 +0530
Subject: [PATCH 26/36] fix: make md-content left side with actual font size

---
 docs/stylesheets/extra.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 445e01e7..c52edfd7 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -75,6 +75,12 @@
     touch-action: pan-y !important;
   }
 }
+/* Limit content width to 70 characters per line for main markdown content */
+.md-content__inner.md-typeset {
+  max-width: 70ch;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 [data-md-color-scheme="openobserve"] {
   --md-primary-fg-color: #ffffff;

From 719af85c38f73a4d184a80b478cd4295eada77cb Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 10:20:01 +0530
Subject: [PATCH 27/36] fix: full-width md-content with actual font size

---
 docs/stylesheets/extra.css | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index c52edfd7..46d4cc79 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -75,12 +75,7 @@
     touch-action: pan-y !important;
   }
 }
-/* Limit content width to 70 characters per line for main markdown content */
-.md-content__inner.md-typeset {
-  max-width: 70ch;
-  margin-left: auto;
-  margin-right: auto;
-}
+
 
 [data-md-color-scheme="openobserve"] {
   --md-primary-fg-color: #ffffff;

From f6edb34b3d34a90ea22e0d37fe7493f40a1e6885 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 10:24:00 +0530
Subject: [PATCH 28/36] fix: left side md-content with character limit with
 actual font size

---
 docs/stylesheets/extra.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 46d4cc79..f8ee8f3c 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -75,7 +75,15 @@
     touch-action: pan-y !important;
   }
 }
-
+/* Limit content width to 70 characters per line for main markdown content */
+.md-content__inner.md-typeset {
+  max-width: 70ch;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: justify;  
+  /* display: block; */
+  margin: auto;  
+}
 
 [data-md-color-scheme="openobserve"] {
   --md-primary-fg-color: #ffffff;

From e84f36db6a2384eeb3adeb20d4ce170a4aa7f3c2 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 11:32:13 +0530
Subject: [PATCH 29/36] fix: resolve main page width issue

---
 docs/stylesheets/extra.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index f8ee8f3c..b170bf46 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -76,13 +76,12 @@
   }
 }
 /* Limit content width to 70 characters per line for main markdown content */
-.md-content__inner.md-typeset {
-  max-width: 70ch;
+.md-content__inner:not(.landing-page):not(:has(.landing-page)) {
+  max-width: 70ch; /* optimal line length for prose */
+  width: 100%;
+  box-sizing: content-box; /* keep the ch-based width accurate */
   margin-left: auto;
   margin-right: auto;
-  text-align: justify;  
-  /* display: block; */
-  margin: auto;  
 }
 
 [data-md-color-scheme="openobserve"] {

From ca306df10cb3e28dcc0ba5669d2aed3119a3b7e0 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 11:34:38 +0530
Subject: [PATCH 30/36] fix: make md-content center in screen with actual
 font-size

---
 docs/stylesheets/extra.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index b170bf46..8d7e9a22 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -80,8 +80,9 @@
   max-width: 70ch; /* optimal line length for prose */
   width: 100%;
   box-sizing: content-box; /* keep the ch-based width accurate */
-  margin-left: auto;
-  margin-right: auto;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  display: block !important;  
 }
 
 [data-md-color-scheme="openobserve"] {

From e6eee5e5bcb5f08276ca2edd85bcd4b74f02f17a Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 16:02:58 +0530
Subject: [PATCH 31/36] feat: make search bar for for searching

---
 docs/assets/close-icon.svg      | 14 +++++
 docs/js/search-close-minimal.js | 56 ++++++++++++++++++++
 docs/stylesheets/extra.css      | 91 +++++++++++++++++++++------------
 3 files changed, 128 insertions(+), 33 deletions(-)
 create mode 100644 docs/assets/close-icon.svg

diff --git a/docs/assets/close-icon.svg b/docs/assets/close-icon.svg
new file mode 100644
index 00000000..f6f83d2b
--- /dev/null
+++ b/docs/assets/close-icon.svg
@@ -0,0 +1,14 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9994 14L8 8M8.00064 14L14 8" stroke="url(#paint0_linear_1203_8)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21C16.5228 21 21 16.5228 21 11Z" stroke="url(#paint1_linear_1203_8)" stroke-width="1.5"/>
+<defs>
+<linearGradient id="paint0_linear_1203_8" x1="8" y1="11" x2="14" y2="11" gradientUnits="userSpaceOnUse">
+<stop offset="0.1875" stop-color="#6c75e4"/>
+<stop offset="1" stop-color="#6c75e4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1203_8" x1="1" y1="11" x2="21" y2="11" gradientUnits="userSpaceOnUse">
+<stop offset="0.1875" stop-color="#6c75e4"/>
+<stop offset="1" stop-color="#6c75e4"/>
+</linearGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/docs/js/search-close-minimal.js b/docs/js/search-close-minimal.js
index d5e44bd1..ac659bba 100644
--- a/docs/js/search-close-minimal.js
+++ b/docs/js/search-close-minimal.js
@@ -1,9 +1,65 @@
+// Show/hide close icon based on .md-search-result__meta visibility
+function isElementInViewport(el) {
+  if (!el) return false;
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.top < window.innerHeight &&
+    rect.bottom > 0 &&
+    rect.left < window.innerWidth &&
+    rect.right > 0
+  );
+}
+
+function toggleCloseIconVisibility() {
+  const meta = document.querySelector(".md-search-result__meta");
+  const closeIcon = document.querySelector(".md-search__close");
+  if (closeIcon) {
+    if (isElementInViewport(meta)) {
+      closeIcon.style.display = "flex";
+    } else {
+      closeIcon.style.display = "none";
+    }
+  }
+}
+
+window.addEventListener("scroll", toggleCloseIconVisibility);
+window.addEventListener("resize", toggleCloseIconVisibility);
+document.addEventListener("DOMContentLoaded", toggleCloseIconVisibility);
+// Also run after search results update
+document.addEventListener("input", function (e) {
+  if (e.target.classList.contains("md-search__input")) {
+    setTimeout(toggleCloseIconVisibility, 50);
+  }
+});
 /**
  * Minimal Search Close Functionality
  * Adds click handler to the close icon in the search input
  */
 
 document.addEventListener("DOMContentLoaded", function () {
+  // Inject clear button if not present
+  const searchInput = document.querySelector(".md-search__input");
+  if (searchInput && !document.querySelector(".md-search__clear")) {
+    const clearBtn = document.createElement("button");
+    clearBtn.className = "md-search__clear";
+    clearBtn.type = "button";
+    clearBtn.textContent = "Clear";
+    searchInput.parentNode.insertBefore(clearBtn, searchInput.nextSibling);
+
+    clearBtn.addEventListener("click", function () {
+      searchInput.value = "";
+      searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+      searchInput.focus();
+      clearBtn.style.display = "none";
+    });
+
+    searchInput.addEventListener("input", function () {
+      clearBtn.style.display = searchInput.value ? "inline" : "none";
+    });
+
+    // Initial state
+    clearBtn.style.display = searchInput.value ? "inline" : "none";
+  }
   // Add click handler to search input when close icon area is clicked
   document.addEventListener("click", function (e) {
     const searchInput = document.querySelector(".md-search__input");
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 8d7e9a22..3433aa49 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,3 +1,7 @@
+/* Hide the search close icon by default; JS will show it when needed */
+.md-search__close {
+  display: none !important;
+}
 /* === FINAL SECONDARY SIDEBAR POSITIONING OVERRIDE === */
 .md-sidebar--secondary,
 .md-sidebar--secondary[data-md-component="sidebar"],
@@ -75,15 +79,6 @@
     touch-action: pan-y !important;
   }
 }
-/* Limit content width to 70 characters per line for main markdown content */
-.md-content__inner:not(.landing-page):not(:has(.landing-page)) {
-  max-width: 70ch; /* optimal line length for prose */
-  width: 100%;
-  box-sizing: content-box; /* keep the ch-based width accurate */
-  margin-left: auto !important;
-  margin-right: auto !important;
-  display: block !important;  
-}
 
 [data-md-color-scheme="openobserve"] {
   --md-primary-fg-color: #ffffff;
@@ -224,20 +219,6 @@ html {
   background-color: #1a1a2e !important;
 }
 
-/* Custom search bar styles for MkDocs Material */
-
-.md-search__input {
-  background-color: rgb(245, 243, 254);
-  border: 2px solid #7c3aed !important;
-  border-radius: 8px !important;
-  color: #222 !important;
-  transition: border-color 0.2s;
-  box-shadow: none !important;
-  padding: 0.75em 2.5em 0.75em 1em !important; /* more height and space for icon */
-  font-size: 1.5em !important;
-  min-width: 16em !important;
-}
-
 .md-search__input:focus {
   border-color: #7c3aed !important;
   outline: none;
@@ -281,24 +262,30 @@ html {
 
 /* Direct approach: Add close button to search input */
 .md-search__input {
-  background-color: rgb(245, 243, 254);
-  border: 2px solid #7c3aed !important;
+  background-color: #ede9fe;
+  border: 1px solid #7c3aed !important;
   border-radius: 8px !important;
   color: #222 !important;
   transition: border-color 0.2s;
   box-shadow: none !important;
-  padding: 8px 3.2em 8px 3.2em !important; /* Match docs title padding: 5px vertical */
+  padding: 9px 3.2em 9px 3.2em !important; /* Match docs title padding: 5px vertical */
   font-size: 1.5em !important;
   min-width: 20em !important;
   height: auto !important; /* Let height be determined by padding + content */
-  /* Remove background image for desktop - will be added for mobile only */
+  background-image: url("/docs/assets/close-icon.svg") !important;
+  background-repeat: no-repeat !important;
+  background-position: calc(100% - 1em) center !important;
+  background-size: 1.2em !important;
 }
 .md-search__input::placeholder {
   color: #7c3aed !important;
   opacity: 1 !important;
-  font-size: 1.25em !important;
-  font-weight: 500 !important;
+  font-size: 1.2em !important;
+  font-weight: 400 !important;
   letter-spacing: 0.02em;
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
 }
 
 .md-search__icon {
@@ -336,10 +323,6 @@ html {
 }
 [data-md-color-scheme="slate"] .md-search__input::placeholder {
   color: #fff !important;
-  opacity: 1 !important;
-  font-size: 1.25em !important;
-  font-weight: 500 !important;
-  letter-spacing: 0.02em;
 }
 
 [data-md-color-scheme="slate"] .md-search__icon {
@@ -1427,3 +1410,45 @@ nav.md-grid {
     box-sizing: border-box !important;
   }
 }
+/* === FINAL OVERRIDE: Always hide close icon unless shown by JS === */
+.md-search__close {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+/* Minimal clear button for search input */
+.md-search__clear {
+  display: none;
+  position: absolute;
+  right: 4em;
+  top: 57%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #7c3aed;
+  font-size: 1.25em;
+  cursor: pointer;
+  z-index: 10;
+}
+.md-search__clear:active {
+  color: #4b237a;
+}
+/* Mobile-specific position for .md-search__clear */
+@media (max-width: 1024px) {
+  .md-search__clear {
+    right: 4em;
+    top: 32%;
+    font-size: 1.5em;
+    transform: translateY(-50%);
+  }
+}
+/* Show close icon only on search input focus for desktop screens */
+@media (min-width: 1025px) {
+  .md-search__input {
+    background-image: none !important;
+  }
+  .md-search__input:focus {
+    background-image: url("/docs/assets/close-icon.svg") !important;
+  }
+}

From d17918fe7f507df2a8c1c9ac433365939f3c3286 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 17:05:07 +0530
Subject: [PATCH 32/36] fix: md content left-container

---
 docs/stylesheets/extra.css | 52 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 3433aa49..556c9841 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1452,3 +1452,55 @@ nav.md-grid {
     background-image: url("/docs/assets/close-icon.svg") !important;
   }
 }
+
+.md-main__inner.md-grid {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;   /* px-4 */
+  padding-right: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+/* sm (≥640px) */
+@media (min-width: 640px) {
+  .md-main__inner.md-grid {
+    max-width: 640px;
+    padding-left: 1.5rem;  /* sm:px-6 */
+    padding-right: 1.5rem;
+  }
+}
+
+/* md (≥768px) */
+@media (min-width: 768px) {
+  .md-main__inner.md-grid {
+    max-width: 768px;
+  }
+}
+
+/* lg (≥1024px) */
+@media (min-width: 1024px) {
+  .md-main__inner.md-grid {
+    max-width: 1024px;
+    padding-left: 2rem;   /* lg:px-8 */
+    padding-right: 2rem;
+    justify-content: space-between; /* lg:justify-between */
+  }
+}
+
+/* xl (≥1280px) */
+@media (min-width: 1280px) {
+  .md-main__inner.md-grid {
+    max-width: 1280px;
+    padding-left: 2.5rem;  /* xl:px-10 */
+    padding-right: 2.5rem;
+  }
+}
+
+/* 2xl (≥1536px) */
+@media (min-width: 1536px) {
+  .md-main__inner.md-grid {
+    max-width: 1736px;
+  }
+}

From 80378cb82dd172d85e90795131114700c0e1fb86 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 17:06:59 +0530
Subject: [PATCH 33/36] fix: make css related changes

---
 docs/stylesheets/extra.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 556c9841..8d9e5924 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1492,7 +1492,7 @@ nav.md-grid {
 /* xl (≥1280px) */
 @media (min-width: 1280px) {
   .md-main__inner.md-grid {
-    max-width: 1280px;
+    max-width: 1480px;
     padding-left: 2.5rem;  /* xl:px-10 */
     padding-right: 2.5rem;
   }

From 797c20c9982bccfe6626c59e3bd3fe6826182ce0 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 17:16:49 +0530
Subject: [PATCH 34/36] fix: md-content in center with container view

---
 docs/stylesheets/extra.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 8d9e5924..3dcb346f 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1504,3 +1504,12 @@ nav.md-grid {
     max-width: 1736px;
   }
 }
+
+.md-content__inner:not(.landing-page):not(:has(.landing-page)) {
+  max-width: 70ch; /* optimal line length for prose */
+  width: 100%;
+  box-sizing: content-box; /* keep the ch-based width accurate */
+  margin-left: auto !important;
+  margin-right: auto !important;
+  display: block !important;
+}
\ No newline at end of file

From c48ff3173db051f9b0fa58527e302d32098ae979 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Wed, 17 Sep 2025 17:32:48 +0530
Subject: [PATCH 35/36] fix: md-content left with container view

---
 docs/stylesheets/extra.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 3dcb346f..992722ff 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1507,9 +1507,5 @@ nav.md-grid {
 
 .md-content__inner:not(.landing-page):not(:has(.landing-page)) {
   max-width: 70ch; /* optimal line length for prose */
-  width: 100%;
-  box-sizing: content-box; /* keep the ch-based width accurate */
-  margin-left: auto !important;
-  margin-right: auto !important;
-  display: block !important;
+  width: 100%;    
 }
\ No newline at end of file

From 4e2360f3b28c3237df9969e2b9f108c66e8a28c2 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Mon, 22 Sep 2025 15:09:56 +0530
Subject: [PATCH 36/36] fix: make container view width

---
 docs/stylesheets/extra.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 992722ff..8d9e5924 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1504,8 +1504,3 @@ nav.md-grid {
     max-width: 1736px;
   }
 }
-
-.md-content__inner:not(.landing-page):not(:has(.landing-page)) {
-  max-width: 70ch; /* optimal line length for prose */
-  width: 100%;    
-}
\ No newline at end of file