From c85a2a72cda2744fa540a63884d207c990630787 Mon Sep 17 00:00:00 2001
From: flexykrn <knpawar6000@gmail.com>
Date: Wed, 17 Jun 2026 17:54:20 +0530
Subject: [PATCH] Docusaurus migration - website-src-css

Part 67 of the Docusaurus migration split.
---
 website/src/css/animations.css |  112 +++
 website/src/css/custom.css     | 1449 ++++++++++++++++++++++++++++++++
 website/src/css/tailwind.css   |   68 ++
 3 files changed, 1629 insertions(+)
 create mode 100644 website/src/css/animations.css
 create mode 100644 website/src/css/custom.css
 create mode 100644 website/src/css/tailwind.css

diff --git a/website/src/css/animations.css b/website/src/css/animations.css
new file mode 100644
index 00000000..82d8be88
--- /dev/null
+++ b/website/src/css/animations.css
@@ -0,0 +1,112 @@
+/* ===== XDC DOCS — Utility Animations ===== */
+/* Principle: subtle, purposeful, restrained. No cheap effects. */
+
+/* ===== Skeleton Shimmer (loading states) ===== */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--ifm-color-emphasis-100) 25%,
+    var(--ifm-color-emphasis-200) 50%,
+    var(--ifm-color-emphasis-100) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 8px;
+}
+
+/* ===== Reveal on scroll (CSS fallback, Framer Motion is primary) ===== */
+.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-delay-1 { transition-delay: 0.1s; }
+.reveal-delay-2 { transition-delay: 0.2s; }
+.reveal-delay-3 { transition-delay: 0.3s; }
+
+/* ===== Toast notification animations ===== */
+@keyframes toast-slide-in {
+  from { opacity: 0; transform: translateX(16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toast-slide-out {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(16px); }
+}
+
+.toast-enter {
+  animation: toast-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.toast-exit {
+  animation: toast-slide-out 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+/* ===== Accordion smooth expand ===== */
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.accordion-content.open {
+  grid-template-rows: 1fr;
+}
+
+.accordion-inner {
+  overflow: hidden;
+}
+
+/* ===== Progress bar ===== */
+.progress-fill {
+  background: var(--ifm-color-primary);
+  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: 9999px;
+}
+
+/* ===== Input focus ring ===== */
+.input-focus {
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input-focus:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.12);
+}
+
+/* ===== Glassmorphism utility ===== */
+.glass {
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(16px) saturate(160%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* ===== Reduced Motion Support ===== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .reveal {
+    opacity: 1;
+    transform: none;
+  }
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
new file mode 100644
index 00000000..3b56d8f2
--- /dev/null
+++ b/website/src/css/custom.css
@@ -0,0 +1,1449 @@
+/**
+ * XDC Network Premium Theme
+ * Inspired by Vercel, Supabase, Stripe, Aptos, Polygon, Clerk, Neon
+ */
+
+/* ===== Fonts ===== */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;600;700&display=swap');
+
+/* ===== Design Tokens ===== */
+:root {
+  /* XDC Brand */
+  --ifm-color-primary: #1e90ff;
+  --ifm-color-primary-dark: #1873cc;
+  --ifm-color-primary-darker: #145fa8;
+  --ifm-color-primary-darkest: #0f4880;
+  --ifm-color-primary-light: #4ba6ff;
+  --ifm-color-primary-lighter: #78bcff;
+  --ifm-color-primary-lightest: #a5d2ff;
+
+  /* Typography */
+  --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --ifm-font-family-monospace: 'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  --ifm-font-size-base: 16px;
+  --ifm-line-height-base: 1.65;
+  --ifm-code-font-size: 90%;
+
+  /* Light mode - Vercel-inspired */
+  --ifm-background-color: #ffffff;
+  --ifm-background-surface-color: #fafafa;
+  --ifm-navbar-background-color: rgba(255, 255, 255, 0.85);
+  --ifm-navbar-link-color: #171717;
+  --ifm-font-color-base: #171717;
+  --ifm-color-emphasis-0: #ffffff;
+  --ifm-color-emphasis-100: #f2f2f2;
+  --ifm-color-emphasis-200: #ebebeb;
+  --ifm-color-emphasis-300: #e6e6e6;
+  --ifm-color-emphasis-400: #eaeaea;
+  --ifm-color-emphasis-500: #c9c9c9;
+  --ifm-color-emphasis-600: #a8a8a8;
+  --ifm-color-emphasis-700: #8f8f8f;
+  --ifm-color-emphasis-800: #7d7d7d;
+  --ifm-color-emphasis-900: #4d4d4d;
+  --ifm-color-emphasis-1000: #171717;
+  --ifm-footer-background-color: #fafafa;
+
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05);
+
+  /* Shadows - Vercel-style hairline borders */
+  --shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.08);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 2px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
+  --shadow-xl: 0 24px 40px -12px rgba(0, 0, 0, 0.12);
+
+  /* Radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* Glass effect tokens */
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(0, 0, 0, 0.08);
+  --glass-blur: blur(16px) saturate(180%);
+}
+
+[data-theme='dark'] {
+  /* Dark mode - Vercel/Supabase inspired near-black */
+  --ifm-background-color: #0a0a0a;
+  --ifm-background-surface-color: #111111;
+  --ifm-navbar-background-color: rgba(10, 10, 10, 0.85);
+  --ifm-navbar-link-color: #ededed;
+  --ifm-font-color-base: #ededed;
+  --ifm-color-emphasis-0: #000000;
+  --ifm-color-emphasis-100: #111111;
+  --ifm-color-emphasis-200: #1a1a1a;
+  --ifm-color-emphasis-300: #222222;
+  --ifm-color-emphasis-400: #2a2a2a;
+  --ifm-color-emphasis-500: #454545;
+  --ifm-color-emphasis-600: #666666;
+  --ifm-color-emphasis-700: #878787;
+  --ifm-color-emphasis-800: #a8a8a8;
+  --ifm-color-emphasis-900: #d4d4d4;
+  --ifm-color-emphasis-1000: #ededed;
+  --ifm-footer-background-color: #0a0a0a;
+
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.08);
+
+  --shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.08);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.35);
+  --shadow-xl: 0 24px 40px -12px rgba(0, 0, 0, 0.5);
+
+  /* Glass effect tokens */
+  --glass-bg: rgba(10, 10, 10, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-blur: blur(16px) saturate(180%);
+}
+
+/* ===== Base ===== */
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-size: 16px;
+}
+
+body {
+  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
+  font-optical-sizing: auto;
+}
+
+/* ===== Typography - Stripe/Vercel scale ===== */
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+  color: var(--ifm-font-color-base);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+h1 { font-size: 2.5rem; letter-spacing: -0.035em; line-height: 1.1; }
+h2 { font-size: 1.875rem; letter-spacing: -0.025em; }
+h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
+h4 { font-size: 1.25rem; letter-spacing: -0.015em; }
+h5 { font-size: 1.1rem; }
+h6 { font-size: 1rem; }
+
+@media (min-width: 640px) {
+  h1 { font-size: 3.5rem; }
+  h2 { font-size: 2.25rem; }
+}
+
+/* Body text: comfortable 1.65 line height, 16px floor on mobile */
+p, li {
+  line-height: 1.65;
+}
+
+@media (max-width: 640px) {
+  p, li {
+    font-size: max(1rem, 16px);
+  }
+}
+
+/* These are now handled above; keep color rules only */
+[data-theme='light'] p,
+[data-theme='light'] li {
+  color: var(--ifm-color-emphasis-800);
+}
+
+[data-theme='dark'] p,
+[data-theme='dark'] li {
+  color: var(--ifm-color-emphasis-700);
+}
+
+/* ===== Selection ===== */
+::selection {
+  background: rgba(30, 144, 255, 0.25);
+  color: inherit;
+}
+
+/* ===== Logo ===== */
+.navbar__logo img {
+  filter: none;
+}
+
+[data-theme='dark'] .navbar__logo img {
+  filter: brightness(1.15);
+}
+
+/* ===== Header/Navbar - Vercel style ===== */
+.topNavbar {
+  background: var(--ifm-navbar-background-color) !important;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.secondaryNavbar {
+  background: var(--ifm-navbar-background-color) !important;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* ===== Buttons - Vercel/Stripe style ===== */
+.button {
+  border-radius: var(--radius-full);
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.button--primary {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  box-shadow: var(--shadow-xs);
+}
+
+.button--primary:hover {
+  background: var(--ifm-color-primary-dark);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.button--secondary {
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  border-color: var(--ifm-color-emphasis-300);
+  box-shadow: var(--shadow-border);
+}
+
+.button--secondary:hover {
+  border-color: var(--ifm-color-emphasis-500);
+  background: var(--ifm-color-emphasis-100);
+}
+
+/* ===== Cards - Vercel/Polygon style ===== */
+.section-body .grid-item,
+.doc-cards a,
+.theme-doc-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border-radius: var(--radius-lg);
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: var(--shadow-border);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  overflow: hidden;
+}
+
+/* Top-edge accent line on hover */
+.section-body .grid-item::after,
+.doc-cards a::after,
+.theme-doc-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--ifm-color-primary), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  pointer-events: none;
+}
+
+.section-body .grid-item:hover::after,
+.doc-cards a:hover::after,
+.theme-doc-card:hover::after {
+  opacity: 1;
+}
+
+.section-body .grid-item:hover,
+.doc-cards a:hover,
+.theme-doc-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0 0 1px rgba(30, 144, 255, 0.2), 0 12px 24px -8px rgba(0, 0, 0, 0.10);
+}
+
+/* Focus visible for keyboard navigation */
+.section-body .grid-item:focus-visible,
+.doc-cards a:focus-visible,
+.theme-doc-card:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+.section-body .grid-item div:first-child,
+.doc-cards a h3,
+.theme-doc-card h2 {
+  font-weight: 600;
+  font-size: 1.05rem;
+  margin: 0;
+  color: var(--ifm-font-color-base);
+}
+
+.section-body .grid-item p,
+.doc-cards a p,
+.theme-doc-card p {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.65;
+  color: var(--ifm-color-emphasis-700);
+}
+
+[data-theme='dark'] .section-body .grid-item,
+[data-theme='dark'] .doc-cards a,
+[data-theme='dark'] .theme-doc-card {
+  background: rgba(255, 255, 255, 0.035);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-theme='dark'] .section-body .grid-item:hover,
+[data-theme='dark'] .doc-cards a:hover,
+[data-theme='dark'] .theme-doc-card:hover {
+  background: rgba(255, 255, 255, 0.055);
+  box-shadow: 0 0 0 1px rgba(30, 144, 255, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.4);
+}
+
+/* ===== Code blocks - Supabase/Aptos style ===== */
+/* Note: Our CodeBlock wrapper renders the container, so we target inner elements */
+.theme-code-block {
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: none;
+  background: var(--ifm-color-emphasis-0);
+  margin: 0;
+}
+
+.theme-code-block pre {
+  border-radius: 0 !important;
+  background: var(--ifm-color-emphasis-0) !important;
+  font-size: 0.85rem;
+  line-height: 1.7;
+  /* Shift top padding right to accommodate language label */
+  padding-top: 2.5rem !important;
+}
+
+[data-theme='dark'] .theme-code-block {
+  background: #0e0e0e;
+  box-shadow: none;
+}
+
+[data-theme='dark'] .theme-code-block pre {
+  background: #0e0e0e !important;
+}
+
+code {
+  background: var(--ifm-color-emphasis-100);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: var(--radius-sm);
+  padding: 0.15rem 0.35rem;
+  font-size: 0.875em;
+  color: var(--ifm-color-emphasis-900);
+}
+
+[data-theme='dark'] code {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: var(--ifm-color-emphasis-900);
+}
+
+/* Hide default Docusaurus copy button — we provide our own */
+.theme-code-block button[aria-label="Copy code to clipboard"],
+.theme-code-block button[aria-label="Copied"],
+.theme-code-block button[class*="copyButton"],
+.theme-code-block button[class*="CopyButton"] {
+  display: none !important;
+}
+
+/* animate-in utility for toast */
+@keyframes slide-in-from-top {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-in {
+  animation-fill-mode: both;
+}
+
+.slide-in-from-top-1 {
+  animation-name: slide-in-from-top;
+}
+
+.duration-200 {
+  animation-duration: 200ms;
+}
+
+/* ===== Sidebar - Aptos/Supabase style ===== */
+.theme-doc-sidebar-container {
+  border-right: 1px solid var(--ifm-color-emphasis-200) !important;
+}
+
+.theme-doc-sidebar-menu {
+  font-size: 0.875rem;
+  padding: 0.75rem;
+}
+
+.theme-doc-sidebar-menu .menu__link {
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  color: var(--ifm-color-emphasis-700);
+  transition: all 0.15s ease;
+  font-weight: 450;
+}
+
+.theme-doc-sidebar-menu .menu__link:hover {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-base);
+}
+
+.theme-doc-sidebar-menu .menu__link--active {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__link {
+  color: var(--ifm-color-emphasis-700);
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__link:hover {
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-font-color-base);
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active {
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-primary);
+}
+
+.theme-doc-sidebar-menu .menu__list-item-collapsible {
+  border-radius: var(--radius-md);
+}
+
+.theme-doc-sidebar-menu .menu__list-item-collapsible:hover {
+  background: var(--ifm-color-emphasis-100);
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__list-item-collapsible:hover {
+  background: var(--ifm-color-emphasis-200);
+}
+
+/* ===== Footer ===== */
+.footer {
+  position: relative;
+  background: var(--ifm-footer-background-color);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  padding: 3.5rem 0 2.25rem;
+}
+
+.footer::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--ifm-color-primary) 50%, transparent);
+  opacity: 0.35;
+}
+
+.footer__title {
+  color: var(--ifm-font-color-base);
+  font-weight: 600;
+  font-size: 0.85rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.footer__link-item {
+  color: var(--ifm-color-emphasis-600);
+  transition: color 0.15s ease, transform 0.15s ease;
+  font-size: 0.9rem;
+}
+
+.footer__link-item:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.footer__bottom {
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.8rem;
+}
+
+[data-theme='dark'] .footer {
+  border-top-color: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='dark'] .footer__bottom {
+  border-top-color: var(--ifm-color-emphasis-200);
+}
+
+/* ===== Breadcrumbs / Doc header ===== */
+.theme-doc-breadcrumbs {
+  margin-bottom: 1.5rem;
+}
+
+.breadcrumbs__item--active .breadcrumbs__link {
+  color: var(--ifm-color-emphasis-700);
+  font-weight: 500;
+}
+
+.breadcrumbs__link {
+  color: var(--ifm-color-primary);
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem;
+}
+
+.breadcrumbs__link:hover {
+  background: var(--ifm-color-emphasis-100);
+  text-decoration: none;
+}
+
+.pagination-nav__link {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-border);
+  border: none;
+  background: var(--ifm-background-color);
+  padding: 1rem 1.25rem;
+  transition: all 0.2s ease;
+}
+
+.pagination-nav__link:hover {
+  box-shadow: var(--shadow-border), var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.pagination-nav__sublabel {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ifm-color-emphasis-600);
+  font-weight: 600;
+}
+
+.pagination-nav__label {
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+}
+
+[data-theme='dark'] .pagination-nav__link {
+  background: var(--ifm-color-emphasis-100);
+}
+
+/* ===== TOC / Right sidebar ===== */
+.pagination-nav__link {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-border);
+  border: none;
+  background: var(--ifm-background-color);
+  transition: all 0.2s ease;
+}
+
+.pagination-nav__link:hover {
+  box-shadow: var(--shadow-border), var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+[data-theme='dark'] .pagination-nav__link {
+  background: var(--ifm-color-emphasis-100);
+}
+
+/* ===== Markdown content links ===== */
+.theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link) {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link):hover {
+  border-bottom-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary-dark);
+}
+
+[data-theme='dark'] .theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link) {
+  color: var(--ifm-color-primary-light);
+}
+
+[data-theme='dark'] .theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link):hover {
+  color: var(--ifm-color-primary-lighter);
+  border-bottom-color: var(--ifm-color-primary-light);
+}
+
+:root {
+  --xdc-navbar-height: 112px;
+  --xdc-navbar-top-height: 64px;
+  --xdc-navbar-secondary-height: 48px;
+}
+
+@media (max-width: 996px) {
+  :root {
+    --xdc-navbar-height: 64px;
+    --xdc-navbar-secondary-height: 0px;
+  }
+}
+
+/* ===== Doc container / max width ===== */
+.theme-doc-main {
+  width: 100%;
+}
+
+.main-wrapper {
+  max-width: 100%;
+  padding-top: var(--xdc-navbar-height);
+}
+
+@media (min-width: 1440px) {
+  .main-wrapper {
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+}
+
+/* ===== Mobile-specific docs polish ===== */
+@media (max-width: 768px) {
+  .theme-doc-markdown h1 {
+    font-size: 1.85rem;
+  }
+
+  .theme-doc-markdown h2 {
+    font-size: 1.35rem;
+  }
+
+  .theme-doc-markdown h3 {
+    font-size: 1.15rem;
+  }
+
+  .theme-doc-markdown {
+    font-size: 1rem;      /* minimum 16px guaranteed */
+    line-height: 1.7;
+  }
+
+  .theme-doc-markdown img {
+    border-radius: var(--radius-md);
+  }
+
+  .theme-doc-markdown blockquote {
+    padding: 1rem;
+    font-size: 0.9375rem;
+  }
+
+  .theme-doc-markdown table {
+    font-size: 0.875rem;
+  }
+
+  .theme-doc-markdown th,
+  .theme-doc-markdown td {
+    padding: 0.6rem 0.75rem;
+  }
+
+  .theme-doc-sidebar-container {
+    width: 100% !important;
+  }
+}
+
+/* ===== Docs content layout ===== */
+.theme-doc-markdown {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--ifm-font-color-base);
+}
+
+.theme-doc-markdown h1,
+.theme-doc-markdown h2,
+.theme-doc-markdown h3,
+.theme-doc-markdown h4 {
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  scroll-margin-top: 120px;
+}
+
+.theme-doc-markdown h1 {
+  font-size: 2.5rem;
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.03em;
+  background: linear-gradient(135deg, var(--ifm-font-color-base) 0%, var(--ifm-color-primary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  position: relative;
+  padding-bottom: 1rem;
+}
+
+.theme-doc-markdown h1::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 80px;
+  height: 3px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(90deg, var(--ifm-color-primary), transparent);
+}
+
+.theme-doc-markdown h2 {
+  font-size: 1.65rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.theme-doc-markdown h2::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-sm);
+  background: var(--ifm-color-primary);
+  flex-shrink: 0;
+}
+
+.theme-doc-markdown h3 {
+  font-size: 1.35rem;
+  color: var(--ifm-color-emphasis-900);
+}
+
+.theme-doc-markdown h4 {
+  font-size: 1.15rem;
+  color: var(--ifm-color-emphasis-800);
+}
+
+.theme-doc-markdown p {
+  margin-bottom: 1.25rem;
+}
+
+.theme-doc-markdown ul,
+.theme-doc-markdown ol {
+  margin-bottom: 1.5rem;
+  padding-left: 1.25rem;
+}
+
+.theme-doc-markdown ul {
+  list-style: none;
+}
+
+.theme-doc-markdown ul li {
+  position: relative;
+  padding-left: 1.25rem;
+  margin-bottom: 0.6rem;
+}
+
+.theme-doc-markdown ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.65rem;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary);
+  opacity: 0.8;
+}
+
+.theme-doc-markdown ol li {
+  margin-bottom: 0.6rem;
+  padding-left: 0.5rem;
+}
+
+.theme-doc-markdown li > p {
+  margin-bottom: 0.5rem;
+}
+
+.theme-doc-markdown img {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.theme-doc-markdown blockquote {
+  border-left: 3px solid var(--ifm-color-primary);
+  background: linear-gradient(90deg, var(--ifm-color-emphasis-100), transparent);
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  padding: 1.25rem 1.5rem;
+  color: var(--ifm-color-emphasis-800);
+  font-size: 0.95rem;
+  box-shadow: var(--shadow-border);
+}
+
+[data-theme='dark'] .theme-doc-markdown blockquote {
+  background: linear-gradient(90deg, rgba(30, 144, 255, 0.1), transparent);
+}
+
+.theme-doc-markdown hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--ifm-color-emphasis-300), transparent);
+  margin: 2.5rem 0;
+}
+
+.theme-doc-markdown kbd {
+  background: var(--ifm-color-emphasis-100);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-md);
+  padding: 0.15rem 0.4rem;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.8em;
+  color: var(--ifm-color-emphasis-800);
+}
+
+/* ===== Markdown content links ===== */
+.theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link):not(.hash-link):not(.tabs__item) {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link):not(.hash-link):not(.tabs__item):hover {
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link):not(.hash-link):not(.tabs__item) {
+  color: var(--ifm-color-primary-light);
+}
+
+[data-theme='dark'] .theme-doc-markdown a:not(.button):not(.card):not(.pagination-nav__link):not(.hash-link):not(.tabs__item):hover {
+  color: var(--ifm-color-primary-lighter);
+  border-bottom-color: var(--ifm-color-primary-light);
+}
+
+/* ===== Tables ===== */
+.theme-doc-markdown table {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-border);
+  overflow: hidden;
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.theme-doc-markdown th,
+.theme-doc-markdown td {
+  border: none;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  padding: 0.75rem 1rem;
+}
+
+.theme-doc-markdown th {
+  background: var(--ifm-color-emphasis-100);
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.theme-doc-markdown tr:last-child td {
+  border-bottom: none;
+}
+
+[data-theme='dark'] .theme-doc-markdown th {
+  background: var(--ifm-color-emphasis-200);
+}
+
+/* ===== Admonitions / Callouts ===== */
+.theme-admonition {
+  position: relative;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-border);
+  border: none;
+  border-left: 3px solid;
+  overflow: hidden;
+}
+
+.theme-admonition::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.05;
+}
+
+.theme-admonition-note { border-left-color: var(--ifm-color-primary); }
+.theme-admonition-note::before { background: var(--ifm-color-primary); }
+
+.theme-admonition-tip { border-left-color: #10b981; }
+.theme-admonition-tip::before { background: #10b981; }
+
+.theme-admonition-info { border-left-color: #06b6d4; }
+.theme-admonition-info::before { background: #06b6d4; }
+
+.theme-admonition-warning { border-left-color: #f59e0b; }
+.theme-admonition-warning::before { background: #f59e0b; }
+
+.theme-admonition-danger { border-left-color: #ef4444; }
+.theme-admonition-danger::before { background: #ef4444; }
+
+[data-theme='dark'] .theme-admonition::before {
+  opacity: 0.1;
+}
+
+/* ===== TOC / Right sidebar ===== */
+.table-of-contents {
+  padding-left: 0;
+  border-left: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.table-of-contents__link {
+  position: relative;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  padding: 0.35rem 0 0.35rem 1rem;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.table-of-contents__link:hover {
+  color: var(--ifm-color-primary);
+  background: var(--ifm-color-emphasis-100);
+  text-decoration: none;
+}
+
+.table-of-contents__link--active {
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+  background: linear-gradient(90deg, rgba(30, 144, 255, 0.08), transparent);
+}
+
+.table-of-contents__link--active::before {
+  content: '';
+  position: absolute;
+  left: -1px;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  background: var(--ifm-color-primary);
+  border-radius: 0 2px 2px 0;
+}
+
+.table-of-contents li {
+  margin: 0.15rem 0;
+}
+
+.table-of-contents ul {
+  padding-left: 0.75rem;
+}
+
+[data-theme='dark'] .table-of-contents__link:hover {
+  background: var(--ifm-color-emphasis-100);
+}
+
+/* ===== Heading anchor links ===== */
+.hash-link {
+  position: absolute;
+  left: -1.25rem;
+  padding-right: 0.5rem;
+  color: var(--ifm-color-emphasis-500);
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  text-decoration: none;
+  font-size: 0.85em;
+}
+
+.hash-link::before {
+  content: '#';
+}
+
+.hash-link:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+h1:hover .hash-link,
+h2:hover .hash-link,
+h3:hover .hash-link,
+h4:hover .hash-link {
+  opacity: 1;
+}
+
+/* ===== Images lightbox hint ===== */
+.theme-doc-markdown img {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  cursor: zoom-in;
+}
+
+.theme-doc-markdown img:hover {
+  transform: scale(1.01);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--ifm-color-primary);
+}
+
+/* ===== Mermaid diagrams ===== */
+.mermaid {
+  display: flex;
+  justify-content: center;
+  background: var(--ifm-background-color);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-border);
+  margin: 1.5rem 0;
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Mermaid node theming */
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon,
+.mermaid .node path {
+  fill: var(--ifm-color-emphasis-100) !important;
+  stroke: var(--ifm-color-primary) !important;
+  stroke-width: 1.5px !important;
+}
+
+.mermaid .node .label {
+  color: var(--ifm-font-color-base) !important;
+  font-family: var(--ifm-font-family-base) !important;
+  font-size: 0.85rem !important;
+}
+
+.mermaid .edgePath .path {
+  stroke: var(--ifm-color-emphasis-500) !important;
+  stroke-width: 2px !important;
+}
+
+.mermaid .arrowheadPath {
+  fill: var(--ifm-color-emphasis-500) !important;
+}
+
+.mermaid .edgeLabel {
+  background-color: var(--ifm-background-color) !important;
+  color: var(--ifm-color-emphasis-700) !important;
+  font-family: var(--ifm-font-family-base) !important;
+  font-size: 0.75rem !important;
+}
+
+/* Journey diagram theming */
+.mermaid .journey-section {
+  font-family: var(--ifm-font-family-base) !important;
+  font-weight: 600 !important;
+  fill: var(--ifm-color-primary) !important;
+}
+
+.mermaid .journey-section-0,
+.mermaid .journey-section-1,
+.mermaid .journey-section-2,
+.mermaid .journey-section-3 {
+  fill: var(--ifm-color-primary) !important;
+}
+
+.mermaid .task {
+  fill: var(--ifm-color-emphasis-100) !important;
+  stroke: var(--ifm-color-primary) !important;
+  stroke-width: 1.5px !important;
+}
+
+.mermaid .task-text {
+  fill: var(--ifm-font-color-base) !important;
+  font-family: var(--ifm-font-family-base) !important;
+  font-size: 0.8rem !important;
+}
+
+.mermaid .task-text-outside {
+  fill: var(--ifm-font-color-base) !important;
+  font-family: var(--ifm-font-family-base) !important;
+}
+
+.mermaid .actor {
+  fill: var(--ifm-color-emphasis-100) !important;
+  stroke: var(--ifm-color-emphasis-500) !important;
+}
+
+.mermaid .actor-line {
+  stroke: var(--ifm-color-emphasis-300) !important;
+}
+
+/* State diagram theming */
+.mermaid .state-start,
+.mermaid .state-end {
+  fill: var(--ifm-color-primary) !important;
+  stroke: var(--ifm-color-primary) !important;
+}
+
+.mermaid .transition {
+  stroke: var(--ifm-color-emphasis-500) !important;
+}
+
+.mermaid .transition-label {
+  fill: var(--ifm-font-color-base) !important;
+  font-family: var(--ifm-font-family-base) !important;
+  font-size: 0.75rem !important;
+}
+
+/* Mindmap theming */
+.mermaid .mindmap-node {
+  fill: var(--ifm-color-emphasis-100) !important;
+  stroke: var(--ifm-color-primary) !important;
+  stroke-width: 1.5px !important;
+}
+
+.mermaid .mindmap-node .nodeLabel,
+.mermaid .mindmap-node .node-label {
+  fill: var(--ifm-font-color-base) !important;
+  font-family: var(--ifm-font-family-base) !important;
+  font-size: 0.85rem !important;
+}
+
+.mermaid .mindmap-edge {
+  stroke: var(--ifm-color-emphasis-500) !important;
+  stroke-width: 2px !important;
+}
+
+/* Sequence diagram theming */
+.mermaid .actor {
+  fill: var(--ifm-color-emphasis-100) !important;
+  stroke: var(--ifm-color-primary) !important;
+  stroke-width: 1.5px !important;
+}
+
+.mermaid .actor-line {
+  stroke: var(--ifm-color-emphasis-300) !important;
+  stroke-width: 1.5px !important;
+}
+
+.mermaid .messageLine0,
+.mermaid .messageLine1 {
+  stroke: var(--ifm-color-emphasis-500) !important;
+  stroke-width: 2px !important;
+}
+
+.mermaid .messageText {
+  fill: var(--ifm-font-color-base) !important;
+  font-family: var(--ifm-font-family-base) !important;
+  font-size: 0.75rem !important;
+}
+
+.mermaid .activation0,
+.mermaid .activation1,
+.mermaid .activation2 {
+  fill: var(--ifm-color-emphasis-200) !important;
+  stroke: var(--ifm-color-emphasis-500) !important;
+}
+
+[data-theme='dark'] .mermaid .task {
+  fill: var(--ifm-color-emphasis-100) !important;
+  stroke: var(--ifm-color-primary-light) !important;
+}
+
+[data-theme='dark'] .mermaid .task-text,
+[data-theme='dark'] .mermaid .task-text-outside,
+[data-theme='dark'] .mermaid .transition-label,
+[data-theme='dark'] .mermaid .messageText {
+  fill: var(--ifm-font-color-base) !important;
+}
+
+[data-theme='dark'] .mermaid .mindmap-node {
+  fill: var(--ifm-color-emphasis-100) !important;
+  stroke: var(--ifm-color-primary-light) !important;
+}
+
+[data-theme='dark'] .mermaid .mindmap-node .nodeLabel,
+[data-theme='dark'] .mermaid .mindmap-node .node-label {
+  fill: var(--ifm-font-color-base) !important;
+}
+
+[data-theme='dark'] .mermaid .state-start,
+[data-theme='dark'] .mermaid .state-end {
+  fill: var(--ifm-color-primary-light) !important;
+  stroke: var(--ifm-color-primary-light) !important;
+}
+
+[data-theme='dark'] .mermaid .activation0,
+[data-theme='dark'] .mermaid .activation1,
+[data-theme='dark'] .mermaid .activation2 {
+  fill: var(--ifm-color-emphasis-200) !important;
+  stroke: var(--ifm-color-emphasis-500) !important;
+}
+
+/* ===== Tabs - Shadcn style ===== */
+.tabs {
+  border-radius: var(--radius-lg);
+}
+
+.tabs-container {
+  box-shadow: var(--shadow-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/* ===== Smooth theme transitions ===== */
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *::before,
+html.theme-transition *::after {
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
+}
+
+/* ===== Reduced motion ===== */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ===== Grid cards (learn/enterprise pages) ===== */
+.grid.cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+@media (min-width: 640px) {
+  .grid.cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.grid.cards > ul {
+  display: contents;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.grid.cards > ul > li {
+  position: relative;
+  padding: 1.5rem;
+  border-radius: var(--radius-lg);
+  background: var(--ifm-background-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: var(--shadow-border);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.grid.cards > ul > li:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-border), var(--shadow-lg);
+  border-color: var(--ifm-color-primary);
+}
+
+.grid.cards > ul > li::before {
+  display: none;
+}
+
+.grid.cards > ul > li > p:first-child {
+  font-weight: 600;
+  font-size: 1.05rem;
+  margin-bottom: 0.75rem;
+  color: var(--ifm-font-color-base);
+}
+
+.grid.cards hr {
+  border: none;
+  height: 1px;
+  background: var(--ifm-color-emphasis-200);
+  margin: 0.75rem 0;
+}
+
+.doc-cards {
+  margin: 1.5rem 0;
+}
+
+.doc-cards a {
+  max-width: 100%;
+}
+
+/* ===== GitHub icon ===== */
+.header-github-link::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+}
+
+[data-theme='dark'] .header-github-link::before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+}
+
+/* ===== Scrollbar ===== */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ifm-color-emphasis-400);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ifm-color-emphasis-600);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ifm-color-emphasis-400) transparent;
+}
+
+/* ===== Image optimization (4.5) ===== */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Prevent layout shift for images with known dimensions */
+img[width][height] {
+  aspect-ratio: attr(width) / attr(height);
+}
+
+/* Responsive images in docs */
+.theme-doc-markdown img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  loading: lazy;
+}
+
+/* ===== Focus-visible global defaults ===== */
+:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+/* ===== Premium utilities ===== */
+
+/* Animated shimmer text */
+.text-gradient-shimmer {
+  background: linear-gradient(90deg, var(--ifm-color-primary) 0%, #4ba6ff 25%, #8ec5ff 50%, #4ba6ff 75%, var(--ifm-color-primary) 100%);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 4s linear infinite;
+}
+
+@keyframes shimmer {
+  to { background-position: 200% center; }
+}
+
+/* Soft glow button */
+.btn-glow {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-glow::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  background: linear-gradient(90deg, var(--ifm-color-primary), #4ba6ff, #8ec5ff, var(--ifm-color-primary));
+  background-size: 300% 100%;
+  border-radius: inherit;
+  z-index: -1;
+  opacity: 0;
+  filter: blur(8px);
+  transition: opacity 0.3s ease;
+  animation: glowRotate 3s linear infinite;
+}
+
+.btn-glow:hover::before {
+  opacity: 0.6;
+}
+
+@keyframes glowRotate {
+  to { background-position: 300% center; }
+}
+
+/* Spotlight grid cards in docs */
+.spotlight-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.spotlight-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(30,144,255,0.1), transparent 40%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.spotlight-card:hover::before {
+  opacity: 1;
+}
+
+/* Subtle float animation */
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* Gradient border */
+.gradient-border {
+  position: relative;
+}
+
+.gradient-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--ifm-color-primary), #4ba6ff, #8ec5ff);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
diff --git a/website/src/css/tailwind.css b/website/src/css/tailwind.css
new file mode 100644
index 00000000..060f6694
--- /dev/null
+++ b/website/src/css/tailwind.css
@@ -0,0 +1,68 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 210 100% 56%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 210 100% 56%;
+    --radius: 0.75rem;
+  }
+
+  [data-theme='dark'] {
+    --background: 0 0% 4%;
+    --foreground: 0 0% 93%;
+    --card: 0 0% 7%;
+    --card-foreground: 0 0% 93%;
+    --popover: 0 0% 7%;
+    --popover-foreground: 0 0% 93%;
+    --primary: 210 100% 64%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 10%;
+    --secondary-foreground: 0 0% 93%;
+    --muted: 0 0% 10%;
+    --muted-foreground: 0 0% 53%;
+    --accent: 0 0% 10%;
+    --accent-foreground: 0 0% 93%;
+    --destructive: 0 62% 55%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 13%;
+    --input: 0 0% 13%;
+    --ring: 210 100% 64%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+  }
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}