diff --git a/app/globals.css b/app/globals.css
index 6d06a312..52ad1a0e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,8 +1,86 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
 @import '../node_modules/tailwindcss';
 
-/* Required to have tailwinds "dark:" work with nextra dark mode*/
+/* Required to have tailwinds "dark:" work with nextra dark mode */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* ========================================================================
+   SEI DESIGN SYSTEM — Figma-aligned documentation theme
+   Font families: Lateral Variable → Inter (fallback), ABC Repro Mono → JetBrains Mono (fallback)
+   ======================================================================== */
+
+/* ========================================================================
+   CSS CUSTOM PROPERTIES — Sei Design Tokens
+   ======================================================================== */
+
+:root {
+	/* Core palette */
+	--sei-black: #000000;
+	--sei-white: #ffffff;
+	--sei-cream: #e6d4c3;
+
+	/* Neutral greys */
+	--sei-grey-25: #f5f5f7;
+	--sei-grey-50: #cccccc;
+	--sei-grey-75: #999999;
+	--sei-grey-100: #999999;
+	--sei-grey-200: #666666;
+	--sei-grey-300: #333333;
+	--sei-grey-400: #333333;
+	--sei-grey-600: #131313;
+
+	/* Maroon accent */
+	--sei-maroon-25: #b99ba1;
+	--sei-maroon-50: #b05c6c;
+	--sei-maroon-100: #600014;
+	--sei-maroon-200: #34050d;
+
+	/* Gold accent */
+	--sei-gold-25: #d6c9ac;
+	--sei-gold-100: #966f22;
+	--sei-gold-200: #5d4a22;
+
+	/* Semantic */
+	--sei-live: #38df00;
+	--sei-error: #fa0c00;
+
+	/* Font stacks */
+	--font-display: 'Inter', system-ui, -apple-system, sans-serif;
+	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
+	--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+
+	/* Radii */
+	--radius-sm: 2px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-button: 64px;
+
+	/* Search */
+	--search-highlight-text: rgba(96, 0, 20, 0.2);
+}
+
+.dark {
+	--search-highlight-text: rgba(185, 155, 161, 0.35);
+}
+
+/* ========================================================================
+   BASE STYLES
+   ======================================================================== */
+
+html {
+	font-family: var(--font-body);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	font-family: var(--font-body);
+}
+
+/* ========================================================================
+   RADIX UI OVERRIDES
+   ======================================================================== */
+
 .radix-themes {
 	--cursor-button: pointer !important;
 	--cursor-checkbox: pointer;
@@ -15,54 +93,127 @@
 	--cursor-switch: pointer;
 }
 
+/* ========================================================================
+   GLOBAL BACKGROUNDS — Sei dark theme base
+   ======================================================================== */
+
+aside,
+.nextra-nav,
+.nextra-nav-container {
+	background-color: var(--sei-grey-25) !important;
+}
+
+.dark aside,
+.dark .nextra-nav,
+.dark .nextra-nav-container {
+	background-color: var(--sei-black) !important;
+}
+
+/* ========================================================================
+   TYPOGRAPHY — Matching Figma type scale
+   ======================================================================== */
+
+/* Headings use tight tracking and heavy weight like Lateral Variable Condensed Bold */
+h1,
+.nx-text-4xl {
+	font-family: var(--font-display) !important;
+	font-weight: 800 !important;
+	letter-spacing: -0.03em !important;
+	line-height: 0.95 !important;
+	text-transform: none;
+}
+
+h2,
+.nx-text-3xl {
+	font-family: var(--font-display) !important;
+	font-weight: 700 !important;
+	letter-spacing: -0.02em !important;
+	line-height: 0.95 !important;
+}
+
+h3,
+.nx-text-2xl {
+	font-family: var(--font-display) !important;
+	font-weight: 700 !important;
+	letter-spacing: -0.02em !important;
+	line-height: 1 !important;
+}
+
+h4,
+.nx-text-xl {
+	font-family: var(--font-display) !important;
+	font-weight: 600 !important;
+	letter-spacing: -0.01em !important;
+	line-height: 1.1 !important;
+}
+
+/* Body text */
+p,
+li,
+td,
+th,
+dd,
+dt {
+	font-family: var(--font-body);
+	line-height: 1.6;
+}
+
+/* Inline code */
+:not(pre) > code {
+	font-family: var(--font-mono) !important;
+	font-size: 0.85em !important;
+	padding: 0.15em 0.4em !important;
+	border-radius: 4px !important;
+	background-color: rgba(0, 0, 0, 0.06) !important;
+	border: 1px solid rgba(0, 0, 0, 0.08) !important;
+}
+
+.dark :not(pre) > code {
+	background-color: rgba(255, 255, 255, 0.08) !important;
+	border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* ========================================================================
+   CODE BLOCKS — Shiki syntax highlighting
+   ======================================================================== */
+
 .shiki {
-	padding: 20px;
-	border-radius: 12px;
-	border: 1px solid var(--color-neutral-300);
+	font-family: var(--font-mono) !important;
+	font-size: 13px !important;
+	line-height: 1.65 !important;
+	padding: 20px 24px !important;
+	border-radius: var(--radius-lg) !important;
+	border: 1px solid rgba(0, 0, 0, 0.1) !important;
 	overflow: auto;
 }
 
 pre code {
 	white-space: pre-wrap;
 	word-break: break-word;
+	font-family: var(--font-mono) !important;
 }
 
 .light .shiki,
 .light .shiki span {
-	background-color: var(--color-neutral-100) !important;
+	background-color: var(--sei-grey-25) !important;
+}
+
+.dark .shiki {
+	border: 1px solid var(--sei-grey-300) !important;
 }
 
 .dark .shiki,
 .dark .shiki span {
-	background-color: var(--color-neutral-900) !important;
+	background-color: var(--sei-grey-600) !important;
 	color: var(--shiki-dark) !important;
 	font-style: var(--shiki-dark-font-style) !important;
 	font-weight: var(--shiki-dark-font-weight) !important;
 	text-decoration: var(--shiki-dark-text-decoration) !important;
 }
 
-aside,
-.nextra-nav,
-.nextra-nav-container {
-	background-color: var(--color-neutral-100) !important;
-}
-
-.dark aside,
-.dark .nextra-nav,
-.dark .nextra-nav-container {
-	background-color: var(--color-neutral-900) !important;
-}
-
-.dark .shiki {
-	border: 1px solid var(--color-neutral-700);
-}
-
-:root {
-	--search-highlight-text: rgba(158, 31, 25, 0.2);
-}
-.dark {
-	--search-highlight-text: rgba(158, 31, 25, 0.4);
-}
+/* ========================================================================
+   SEARCH
+   ======================================================================== */
 
 .nextra-search-results mark {
 	background-color: var(--search-highlight-text);
@@ -73,57 +224,70 @@ aside,
 
 .nextra-search input,
 .nextra-search-input {
-	background-color: var(--color-neutral-100);
-	border: 1px solid var(--color-neutral-300);
+	font-family: var(--font-mono) !important;
+	font-size: 12px !important;
+	text-transform: uppercase !important;
+	letter-spacing: 0.02em !important;
+	background-color: var(--sei-grey-25) !important;
+	border: 1px solid rgba(0, 0, 0, 0.12) !important;
+	border-radius: var(--radius-sm) !important;
 }
 
 .dark .nextra-search input,
 .dark .nextra-search-input {
-	background-color: var(--color-neutral-800);
-	border: 1px solid var(--color-neutral-700);
+	background-color: var(--sei-grey-600) !important;
+	border-color: var(--sei-grey-300) !important;
+	color: var(--sei-white) !important;
 }
 
 .nextra-search-results {
-	background-color: rgba(255, 255, 255, 0.75);
-	border: 1px solid var(--color-neutral-300);
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
+	font-family: var(--font-body) !important;
+	background-color: rgba(255, 255, 255, 0.92) !important;
+	border: 1px solid rgba(0, 0, 0, 0.1) !important;
+	backdrop-filter: blur(20px) !important;
+	-webkit-backdrop-filter: blur(20px) !important;
+	border-radius: var(--radius-md) !important;
 }
 
 .dark .nextra-search-results {
-	background-color: rgba(0, 0, 0, 0.75);
-	border-color: var(--color-neutral-700);
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
+	background-color: rgba(19, 19, 19, 0.92) !important;
+	border-color: var(--sei-grey-300) !important;
 }
 
 .nextra-search-results a,
 .nextra-search-results a * {
-	color: var(--color-neutral-700) !important;
+	color: var(--sei-grey-200) !important;
 }
 
 .dark .nextra-search-results a,
 .dark .nextra-search-results a * {
-	color: var(--color-neutral-300) !important;
+	color: var(--sei-grey-75) !important;
 }
 
 .nextra-search-results a:hover,
 .nextra-search-results a:hover * {
-	color: var(--color-black) !important;
+	color: var(--sei-black) !important;
 }
 
 .dark .nextra-search-results a:hover,
 .dark .nextra-search-results a:hover * {
-	color: var(--color-white) !important;
+	color: var(--sei-white) !important;
 }
 
-/* Contain layout/paint for heavy components to reduce reflow impact */
+/* ========================================================================
+   LAYOUT CONTAINMENT
+   ======================================================================== */
+
 .nextra-mobile-nav,
 .nextra-sidebar,
 .nextra-scrollbar {
 	contain: layout style paint;
 }
 
+/* ========================================================================
+   COLOR PALETTE — Radix UI red theme overrides (Sei maroon)
+   ======================================================================== */
+
 :root,
 .light,
 .light-theme {
@@ -135,10 +299,10 @@ aside,
 	--red-6: #f5c2ba;
 	--red-7: #ebafa6;
 	--red-8: #e0978c;
-	--red-9: #9e1f19;
-	--red-10: #8c0205;
-	--red-11: #c04237;
-	--red-12: #5e211b;
+	--red-9: #600014;
+	--red-10: #34050d;
+	--red-11: #b05c6c;
+	--red-12: #34050d;
 
 	--red-a1: #ff000003;
 	--red-a2: #e0200008;
@@ -148,15 +312,15 @@ aside,
 	--red-a6: #db1e0045;
 	--red-a7: #c61a0059;
 	--red-a8: #bb190073;
-	--red-a9: #940700e6;
-	--red-a10: #8b0003fd;
-	--red-a11: #af0e00c8;
-	--red-a12: #4b0700e4;
+	--red-a9: #600014e6;
+	--red-a10: #34050dfd;
+	--red-a11: #b05c6cc8;
+	--red-a12: #34050de4;
 
 	--red-contrast: #fff;
 	--red-surface: #fef6f5cc;
-	--red-indicator: #9e1f19;
-	--red-track: #9e1f19;
+	--red-indicator: #600014;
+	--red-track: #600014;
 }
 
 @supports (color: color(display-p3 1 1 1)) {
@@ -172,10 +336,10 @@ aside,
 			--red-6: oklch(85.7% 0.0596 28.46);
 			--red-7: oklch(80.8% 0.0715 28.46);
 			--red-8: oklch(74.6% 0.0906 28.46);
-			--red-9: oklch(45.6% 0.1636 28.46);
-			--red-10: oklch(40.2% 0.1636 28.46);
-			--red-11: oklch(55.5% 0.1636 28.46);
-			--red-12: oklch(34% 0.0904 28.46);
+			--red-9: oklch(30% 0.12 10);
+			--red-10: oklch(22% 0.09 10);
+			--red-11: oklch(55% 0.1 10);
+			--red-12: oklch(22% 0.09 10);
 
 			--red-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
 			--red-a2: color(display-p3 0.7569 0.1451 0.0196 / 0.032);
@@ -185,33 +349,33 @@ aside,
 			--red-a6: color(display-p3 0.7333 0.1216 0.0039 / 0.263);
 			--red-a7: color(display-p3 0.6706 0.1059 0.0039 / 0.342);
 			--red-a8: color(display-p3 0.6275 0.102 0.0039 / 0.44);
-			--red-a9: color(display-p3 0.502 0.0392 0 / 0.867);
-			--red-a10: color(display-p3 0.4627 0.0235 0 / 0.93);
-			--red-a11: color(display-p3 0.6 0.0667 0 / 0.757);
-			--red-a12: color(display-p3 0.2549 0.0314 0 / 0.883);
+			--red-a9: color(display-p3 0.376 0 0.08 / 0.9);
+			--red-a10: color(display-p3 0.204 0.02 0.05 / 0.95);
+			--red-a11: color(display-p3 0.69 0.36 0.42 / 0.78);
+			--red-a12: color(display-p3 0.204 0.02 0.05 / 0.89);
 
 			--red-contrast: #fff;
 			--red-surface: color(display-p3 0.9922 0.9647 0.9608 / 0.8);
-			--red-indicator: oklch(45.6% 0.1636 28.46);
-			--red-track: oklch(45.6% 0.1636 28.46);
+			--red-indicator: oklch(30% 0.12 10);
+			--red-track: oklch(30% 0.12 10);
 		}
 	}
 }
 
 .dark,
 .dark-theme {
-	--red-1: #180e0d;
-	--red-2: #22110f;
-	--red-3: #420906;
-	--red-4: #5b0000;
-	--red-5: #6e0000;
-	--red-6: #810807;
-	--red-7: #9c1d17;
-	--red-8: #ca2720;
-	--red-9: #9e1f19;
-	--red-10: #87130f;
-	--red-11: #ff9081;
-	--red-12: #ffcec4;
+	--red-1: #0f0a09;
+	--red-2: #1a0e0c;
+	--red-3: #320609;
+	--red-4: #480003;
+	--red-5: #5a0008;
+	--red-6: #6b050a;
+	--red-7: #7d1520;
+	--red-8: #a0202c;
+	--red-9: #600014;
+	--red-10: #4a000f;
+	--red-11: #b99ba1;
+	--red-12: #e6d4c3;
 
 	--red-a1: #f1000008;
 	--red-a2: #f6110013;
@@ -221,33 +385,33 @@ aside,
 	--red-a6: #ff000078;
 	--red-a7: #ff261c95;
 	--red-a8: #fe2d24c7;
-	--red-a9: #fe291f98;
-	--red-a10: #fd150d7f;
-	--red-a11: #ca2720;
-	--red-a12: #ffcec4;
+	--red-a9: #60001498;
+	--red-a10: #4a000f7f;
+	--red-a11: #b99ba1;
+	--red-a12: #e6d4c3;
 
 	--red-contrast: #fff;
-	--red-surface: #33110e80;
-	--red-indicator: #9e1f19;
-	--red-track: #9e1f19;
+	--red-surface: #2a0e0c80;
+	--red-indicator: #600014;
+	--red-track: #600014;
 }
 
 @supports (color: color(display-p3 1 1 1)) {
 	@media (color-gamut: p3) {
 		.dark,
 		.dark-theme {
-			--red-1: oklch(17.8% 0.0181 28.46);
-			--red-2: oklch(20.3% 0.0292 28.46);
-			--red-3: oklch(25% 0.0872 28.46);
-			--red-4: oklch(28.8% 0.13 28.46);
-			--red-5: oklch(33.1% 0.1446 28.46);
-			--red-6: oklch(38.2% 0.151 28.46);
-			--red-7: oklch(45% 0.1636 28.46);
-			--red-8: oklch(54.4% 0.1987 28.46);
-			--red-9: oklch(45.6% 0.1636 28.46);
-			--red-10: oklch(40.2% 0.151 28.46);
-			--red-11: oklch(78.4% 0.1987 28.46);
-			--red-12: oklch(90.2% 0.0717 28.46);
+			--red-1: oklch(14% 0.02 10);
+			--red-2: oklch(17% 0.03 10);
+			--red-3: oklch(22% 0.08 10);
+			--red-4: oklch(26% 0.11 10);
+			--red-5: oklch(30% 0.12 10);
+			--red-6: oklch(34% 0.12 10);
+			--red-7: oklch(40% 0.12 10);
+			--red-8: oklch(50% 0.15 10);
+			--red-9: oklch(30% 0.12 10);
+			--red-10: oklch(24% 0.1 10);
+			--red-11: oklch(72% 0.04 10);
+			--red-12: oklch(88% 0.04 60);
 
 			--red-a1: color(display-p3 0.9608 0 0 / 0.022);
 			--red-a2: color(display-p3 0.9882 0.1294 0.0078 / 0.064);
@@ -257,45 +421,72 @@ aside,
 			--red-a6: color(display-p3 1 0.1412 0.0745 / 0.425);
 			--red-a7: color(display-p3 1 0.2549 0.1804 / 0.53);
 			--red-a8: color(display-p3 1 0.2824 0.2157 / 0.711);
-			--red-a9: color(display-p3 1 0.2549 0.1922 / 0.538);
-			--red-a10: color(display-p3 1 0.2 0.1294 / 0.45);
-			--red-a11: color(display-p3 1 0.2824 0.2157 / 0.711);
-			--red-a12: color(display-p3 0.9961 0.8392 0.8 / 0.967);
+			--red-a9: color(display-p3 0.376 0 0.08 / 0.6);
+			--red-a10: color(display-p3 0.29 0 0.06 / 0.5);
+			--red-a11: color(display-p3 0.72 0.6 0.63 / 0.9);
+			--red-a12: color(display-p3 0.9 0.83 0.76 / 0.97);
 
 			--red-contrast: #fff;
-			--red-surface: color(display-p3 0.1804 0.0706 0.0588 / 0.5);
-			--red-indicator: oklch(45.6% 0.1636 28.46);
-			--red-track: oklch(45.6% 0.1636 28.46);
+			--red-surface: color(display-p3 0.16 0.06 0.05 / 0.5);
+			--red-indicator: oklch(30% 0.12 10);
+			--red-track: oklch(30% 0.12 10);
 		}
 	}
 }
 
-/* Override Nextra navbar logo anchor margin to eliminate excessive gap next to the logo */
+/* ========================================================================
+   NAVBAR — Figma nav style (mono, uppercase, minimal)
+   ======================================================================== */
+
+.sei-nav {
+	font-family: var(--font-mono) !important;
+	font-size: 12px !important;
+	letter-spacing: 0 !important;
+	text-transform: uppercase !important;
+}
+
+.sei-nav.nextra-nav,
+.sei-nav .nextra-nav {
+	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
+}
+
+.dark .sei-nav.nextra-nav,
+.dark .sei-nav .nextra-nav {
+	border-bottom-color: var(--sei-grey-300) !important;
+}
+
 .nextra-nav a.nx-me-auto,
 .nextra-nav-container a.nx-me-auto {
 	margin-inline-end: 0 !important;
 }
 
-/* Callout component overrides - targeting Nextra's actual structure */
+/* ========================================================================
+   CALLOUT COMPONENTS — Refined to match Sei design language
+   ======================================================================== */
+
 .nextra-callout {
-	margin: 1.75rem 0 !important;
+	margin: 1.5rem 0 !important;
 	padding: 16px 20px !important;
-	border-radius: 12px !important;
-	border-width: 1.5px !important;
-	box-shadow:
-		0 20px 44px -26px rgba(15, 23, 42, 0.16),
-		0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
+	border-radius: 0 !important;
+	border-width: 1px !important;
+	border-left-width: 3px !important;
+	font-family: var(--font-body) !important;
+	font-size: 14px !important;
+	line-height: 1.5 !important;
+}
+
+.light .nextra-callout {
+	background-color: #f5f5f7 !important;
 }
 
 .dark .nextra-callout {
-	box-shadow:
-		0 24px 54px -28px rgba(3, 7, 18, 0.6),
-		0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
+	background-color: rgba(25, 25, 25, 0.8) !important;
+	border-color: var(--sei-grey-300) !important;
 }
 
 .nextra-callout :where(p, ul, ol) {
 	margin-top: 0 !important;
-	margin-bottom: 0.75rem !important;
+	margin-bottom: 0.5rem !important;
 }
 
 .nextra-callout :where(p:last-child, ul:last-child, ol:last-child) {
@@ -304,102 +495,149 @@ aside,
 
 .nextra-callout code {
 	background: var(--callout-code-bg) !important;
-	border-radius: 6px !important;
-	padding: 0.16rem 0.48rem !important;
+	border-radius: 2px !important;
+	padding: 0.15em 0.4em !important;
 	font-size: 0.84em !important;
+	font-family: var(--font-mono) !important;
 	border: 1px solid rgba(255, 255, 255, 0.06) !important;
 }
 
 /* Info callout (blue) */
 .nextra-callout[class*='border-blue'] {
-	--callout-code-bg: rgba(59, 130, 246, 0.1);
-	border-color: rgba(59, 130, 246, 0.35) !important;
+	--callout-code-bg: rgba(59, 130, 246, 0.08);
+	background-color: rgba(59, 130, 246, 0.06) !important;
+	border-color: rgba(59, 130, 246, 0.15) !important;
+	border-left-color: rgba(59, 130, 246, 0.6) !important;
 	color: rgba(30, 58, 138, 0.88) !important;
 }
 
 .dark .nextra-callout[class*='border-blue'] {
-	--callout-code-bg: rgba(147, 197, 253, 0.12);
-	border-color: rgba(147, 197, 253, 0.5) !important;
-	color: rgba(224, 242, 254, 0.96) !important;
+	--callout-code-bg: rgba(147, 197, 253, 0.1);
+	background-color: rgba(59, 130, 246, 0.08) !important;
+	border-color: rgba(147, 197, 253, 0.15) !important;
+	border-left-color: rgba(147, 197, 253, 0.5) !important;
+	color: rgba(224, 242, 254, 0.92) !important;
 }
 
 .dark .nextra-callout[class*='border-blue'] svg {
-	color: rgba(147, 197, 253, 0.92) !important;
+	color: rgba(147, 197, 253, 0.85) !important;
 }
 
 /* Warning callout (yellow) */
 .nextra-callout[class*='border-yellow'] {
-	--callout-code-bg: rgba(234, 179, 8, 0.1);
-	border-color: rgba(234, 179, 8, 0.42) !important;
+	--callout-code-bg: rgba(234, 179, 8, 0.08);
+	background-color: rgba(234, 179, 8, 0.06) !important;
+	border-color: rgba(234, 179, 8, 0.15) !important;
+	border-left-color: rgba(234, 179, 8, 0.6) !important;
 	color: rgba(113, 63, 18, 0.85) !important;
 }
 
 .dark .nextra-callout[class*='border-yellow'] {
-	--callout-code-bg: rgba(253, 224, 71, 0.12);
-	border-color: rgba(253, 224, 71, 0.55) !important;
-	color: rgba(254, 249, 195, 0.96) !important;
+	--callout-code-bg: rgba(253, 224, 71, 0.1);
+	background-color: rgba(234, 179, 8, 0.08) !important;
+	border-color: rgba(253, 224, 71, 0.15) !important;
+	border-left-color: rgba(253, 224, 71, 0.5) !important;
+	color: rgba(254, 249, 195, 0.92) !important;
 }
 
 .dark .nextra-callout[class*='border-yellow'] svg {
-	color: rgba(253, 224, 71, 0.92) !important;
+	color: rgba(253, 224, 71, 0.85) !important;
 }
 
-/* Error callout (red) */
+/* Error callout (red/maroon) */
 .nextra-callout[class*='border-red'] {
-	--callout-code-bg: rgba(239, 68, 68, 0.1);
-	border-color: rgba(239, 68, 68, 0.35) !important;
-	color: rgba(127, 29, 29, 0.88) !important;
+	--callout-code-bg: rgba(96, 0, 20, 0.06);
+	background-color: rgba(96, 0, 20, 0.05) !important;
+	border-color: rgba(96, 0, 20, 0.15) !important;
+	border-left-color: rgba(96, 0, 20, 0.6) !important;
+	color: rgba(52, 5, 13, 0.88) !important;
 }
 
 .dark .nextra-callout[class*='border-red'] {
-	--callout-code-bg: rgba(252, 165, 165, 0.12);
-	border-color: rgba(252, 165, 165, 0.5) !important;
-	color: rgba(254, 226, 226, 0.96) !important;
+	--callout-code-bg: rgba(185, 155, 161, 0.1);
+	background-color: rgba(96, 0, 20, 0.08) !important;
+	border-color: rgba(185, 155, 161, 0.15) !important;
+	border-left-color: rgba(185, 155, 161, 0.5) !important;
+	color: rgba(230, 212, 195, 0.92) !important;
 }
 
 .dark .nextra-callout[class*='border-red'] svg {
-	color: rgba(252, 165, 165, 0.92) !important;
+	color: rgba(185, 155, 161, 0.85) !important;
 }
 
 /* Default/orange callout */
 .nextra-callout[class*='border-orange'] {
-	--callout-code-bg: rgba(234, 88, 12, 0.1);
-	border-color: rgba(234, 88, 12, 0.35) !important;
+	--callout-code-bg: rgba(234, 88, 12, 0.08);
+	background-color: rgba(234, 88, 12, 0.05) !important;
+	border-color: rgba(234, 88, 12, 0.15) !important;
+	border-left-color: rgba(234, 88, 12, 0.6) !important;
 	color: rgba(124, 45, 18, 0.85) !important;
 }
 
 .dark .nextra-callout[class*='border-orange'] {
-	--callout-code-bg: rgba(253, 186, 116, 0.12);
-	border-color: rgba(253, 186, 116, 0.45) !important;
-	color: rgba(254, 237, 213, 0.96) !important;
+	--callout-code-bg: rgba(253, 186, 116, 0.1);
+	background-color: rgba(234, 88, 12, 0.08) !important;
+	border-color: rgba(253, 186, 116, 0.15) !important;
+	border-left-color: rgba(253, 186, 116, 0.5) !important;
+	color: rgba(254, 237, 213, 0.92) !important;
 }
 
 .dark .nextra-callout[class*='border-orange'] svg {
-	color: rgba(253, 186, 116, 0.92) !important;
+	color: rgba(253, 186, 116, 0.85) !important;
 }
 
-/* Sidebar Compactness Overrides */
+/* ========================================================================
+   SIDEBAR — Compact, Sei-styled
+   ======================================================================== */
 
-/* Reduce vertical padding for sidebar links */
+/* Sidebar links: mono font, uppercase style for categories */
 .nextra-sidebar ul li a,
 .nextra-sidebar ul li button,
 .nextra-mobile-nav ul li a,
 .nextra-mobile-nav ul li button {
-	padding-top: 0.1rem !important;
-	padding-bottom: 0.1rem !important;
-	padding-left: 0.45rem !important;
-	padding-right: 0.2rem !important;
+	padding-top: 0.2rem !important;
+	padding-bottom: 0.2rem !important;
+	padding-left: 0.5rem !important;
+	padding-right: 0.25rem !important;
+	font-size: 13px !important;
+	letter-spacing: -0.01em !important;
+	border-radius: var(--radius-sm) !important;
+	transition:
+		background-color 0.15s ease,
+		color 0.15s ease !important;
+}
+
+.nextra-sidebar ul li a:hover,
+.nextra-sidebar ul li button:hover {
+	background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+.dark .nextra-sidebar ul li a:hover,
+.dark .nextra-sidebar ul li button:hover {
+	background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Active sidebar item */
+.nextra-sidebar ul li a[aria-current='page'],
+.nextra-sidebar ul li a.active {
+	background-color: rgba(96, 0, 20, 0.08) !important;
+	color: var(--sei-maroon-100) !important;
+	font-weight: 500 !important;
+}
+
+.dark .nextra-sidebar ul li a[aria-current='page'],
+.dark .nextra-sidebar ul li a.active {
+	background-color: rgba(96, 0, 20, 0.2) !important;
+	color: var(--sei-maroon-25) !important;
 }
 
-/* Reduce vertical spacing for section separators/headers */
 .nextra-sidebar-separator {
 	margin-top: 1rem !important;
 	margin-bottom: 0.5rem !important;
 }
 
-/* Reduce general spacing in the sidebar */
 .nextra-sidebar ul {
-	gap: 0.25rem;
+	gap: 0.15rem;
 }
 
 .nextra-sidebar .nextra-scrollbar,
@@ -410,10 +648,15 @@ aside,
 
 @media (min-width: 768px) {
 	.nextra-sidebar[class*='x:w-64'] {
-		width: var(--sei-docs-sidebar-width, 13rem) !important;
-		min-width: var(--sei-docs-sidebar-width, 13rem) !important;
-		max-width: var(--sei-docs-sidebar-width, 13rem) !important;
-		flex-basis: var(--sei-docs-sidebar-width, 13rem) !important;
+		width: var(--sei-docs-sidebar-width, 14rem) !important;
+		min-width: var(--sei-docs-sidebar-width, 14rem) !important;
+		max-width: var(--sei-docs-sidebar-width, 14rem) !important;
+		flex-basis: var(--sei-docs-sidebar-width, 14rem) !important;
+		border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
+	}
+
+	.dark .nextra-sidebar[class*='x:w-64'] {
+		border-right-color: var(--sei-grey-300) !important;
 	}
 
 	.nextra-sidebar[class*='x:w-20'] {
@@ -424,8 +667,8 @@ aside,
 	}
 
 	.nextra-sidebar ~ article {
-		padding-left: 1.5rem !important;
-		padding-right: 1.5rem !important;
+		padding-left: 2rem !important;
+		padding-right: 2rem !important;
 	}
 }
 
@@ -435,9 +678,189 @@ aside,
 		width: var(--sei-docs-mobile-nav-width, min(86vw, 20rem)) !important;
 		max-width: 20rem !important;
 		border-right: 1px solid rgba(0, 0, 0, 0.08);
+		background-color: var(--sei-grey-25) !important;
 	}
 
 	.dark .nextra-mobile-nav {
-		border-right-color: rgba(255, 255, 255, 0.08);
+		border-right-color: var(--sei-grey-300);
+		background-color: var(--sei-black) !important;
 	}
 }
+
+/* ========================================================================
+   TABLES — Clean, minimal, Sei-aligned
+   ======================================================================== */
+
+table {
+	font-family: var(--font-body) !important;
+	font-size: 14px !important;
+	border-collapse: collapse !important;
+}
+
+th {
+	font-family: var(--font-mono) !important;
+	font-size: 11px !important;
+	text-transform: uppercase !important;
+	letter-spacing: 0.05em !important;
+	color: var(--sei-grey-200) !important;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
+	padding: 8px 12px !important;
+	font-weight: 400 !important;
+}
+
+.dark th {
+	color: var(--sei-grey-75) !important;
+	border-bottom-color: var(--sei-grey-300) !important;
+}
+
+td {
+	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
+	padding: 10px 12px !important;
+}
+
+.dark td {
+	border-bottom-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* ========================================================================
+   LINKS — Sei maroon accent
+   ======================================================================== */
+
+article a:not([class]) {
+	color: var(--sei-maroon-100) !important;
+	text-decoration: none !important;
+	border-bottom: 1px solid transparent !important;
+	transition: border-color 0.15s ease !important;
+}
+
+article a:not([class]):hover {
+	border-bottom-color: var(--sei-maroon-100) !important;
+}
+
+.dark article a:not([class]) {
+	color: var(--sei-maroon-25) !important;
+}
+
+.dark article a:not([class]):hover {
+	border-bottom-color: var(--sei-maroon-25) !important;
+}
+
+/* ========================================================================
+   HORIZONTAL RULES / DIVIDERS
+   ======================================================================== */
+
+hr {
+	border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.dark hr {
+	border-color: var(--sei-grey-300) !important;
+}
+
+/* ========================================================================
+   BLOCKQUOTES — Sei quote style
+   ======================================================================== */
+
+blockquote {
+	font-family: var(--font-display) !important;
+	font-size: 1.25rem !important;
+	font-weight: 300 !important;
+	letter-spacing: -0.02em !important;
+	line-height: 1.4 !important;
+	border-left: 2px solid var(--sei-grey-300) !important;
+	padding-left: 1.5rem !important;
+	color: var(--sei-grey-200) !important;
+}
+
+.dark blockquote {
+	border-left-color: var(--sei-grey-300) !important;
+	color: var(--sei-grey-75) !important;
+}
+
+/* ========================================================================
+   SCROLLBAR — Minimal dark scrollbar
+   ======================================================================== */
+
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: rgba(0, 0, 0, 0.15);
+	border-radius: 3px;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+	background-color: rgba(255, 255, 255, 0.12);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(0, 0, 0, 0.25);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ========================================================================
+   BREADCRUMBS & PAGE NAV — Mono text style
+   ======================================================================== */
+
+nav[aria-label='breadcrumb'],
+.nextra-breadcrumb {
+	font-family: var(--font-mono) !important;
+	font-size: 11px !important;
+	text-transform: uppercase !important;
+	letter-spacing: 0.02em !important;
+}
+
+/* TOC (table of contents) sidebar */
+.nextra-toc {
+	font-size: 13px !important;
+}
+
+.nextra-toc a {
+	transition: color 0.15s ease !important;
+}
+
+/* ========================================================================
+   SELECTION
+   ======================================================================== */
+
+::selection {
+	background: rgba(96, 0, 20, 0.2);
+	color: inherit;
+}
+
+.dark ::selection {
+	background: rgba(185, 155, 161, 0.25);
+}
+
+/* ========================================================================
+   FOCUS STYLES
+   ======================================================================== */
+
+:focus-visible {
+	outline: 2px solid var(--sei-maroon-100) !important;
+	outline-offset: 2px !important;
+}
+
+.dark :focus-visible {
+	outline-color: var(--sei-maroon-25) !important;
+}
+
+/* ========================================================================
+   TRANSITIONS — Smooth theme switching
+   ======================================================================== */
+
+html.transitioning,
+html.transitioning *,
+html.transitioning *::before,
+html.transitioning *::after {
+	transition-duration: 0s !important;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 766a7002..bab353d6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,7 +22,6 @@ export const metadata: Metadata = {
 		'Documentation for Sei. Providing comprehensive guides, tutorials, and resources for developers building on Sei. Learn about the EVM, smart contracts, tokenization standards (ERC20, ERC721, ERC1155), and advanced features of the Sei ecosystem to accelerate your blockchain development journey.',
 	category: 'technology',
 	openGraph: {
-		// Make sure not to specify `title` or description` as they are automatically generated from the main description and title template
 		url: 'https://docs.sei.io',
 		siteName: 'Sei Docs',
 		locale: 'en_US',
@@ -35,7 +34,6 @@ export const metadata: Metadata = {
 		type: 'article'
 	},
 	twitter: {
-		// Make sure not to specify `title` or description` as they are automatically generated from the main description and title template
 		card: 'summary_large_image',
 		creator: '@SeiNetwork',
 		images: ['https://docs.sei.io/assets/docs-banner.png']
@@ -70,10 +68,16 @@ export const metadata: Metadata = {
 
 export default async function RootLayout({ children }) {
 	return (
-		<html lang='en' dir='ltr' suppressHydrationWarning style={{ width: '100%', height: '100%' }}>
+		<html lang='en' dir='ltr' suppressHydrationWarning className='dark' style={{ width: '100%', height: '100%' }}>
 			<head>
 				<meta name='color-scheme' content='dark light' />
-				{/* Performance: avoid early preconnects to heavy third-parties */}
+				{/* Google Fonts: Inter + JetBrains Mono to match Sei design system */}
+				<link rel='preconnect' href='https://fonts.googleapis.com' />
+				<link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin='anonymous' />
+				<link
+					href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap'
+					rel='stylesheet'
+				/>
 				<script
 					type='application/ld+json'
 					dangerouslySetInnerHTML={{
@@ -104,7 +108,7 @@ export default async function RootLayout({ children }) {
 					}}
 				/>
 			</head>
-			<body style={{ width: '100%', height: '100%' }}>
+			<body style={{ width: '100%', height: '100%', fontFamily: "'Inter', system-ui, -apple-system, sans-serif" }}>
 				<Toaster position='bottom-left' />
 				<DocsProviders pageMap={await getPageMap()}>{children}</DocsProviders>
 			</body>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 1cfa9af4..58e4cebc 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -17,7 +17,7 @@ export default function Custom404() {
 
 				<Link
 					href='/'
-					className='px-6 py-3 mt-6 rounded-md font-medium transition-colors bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200'>
+					className='px-6 py-3 mt-6 rounded-sm font-medium transition-colors bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200'>
 					Go to Home
 				</Link>
 			</div>
diff --git a/content/evm/ai-tooling/cambrian-agent-kit.mdx b/content/evm/ai-tooling/cambrian-agent-kit.mdx
index f4ad9118..acc04fd6 100644
--- a/content/evm/ai-tooling/cambrian-agent-kit.mdx
+++ b/content/evm/ai-tooling/cambrian-agent-kit.mdx
@@ -468,27 +468,27 @@ async function monitorTransaction(txHash: string) {
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">"Insufficient funds"</td>
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">"Insufficient funds"</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Low SEI balance</td>
         <td className="px-4 py-3 text-sm text-green-600 dark:text-green-400 whitespace-nowrap">Add more SEI to your wallet</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">"Transaction failed"</td>
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">"Transaction failed"</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Gas estimation error</td>
         <td className="px-4 py-3 text-sm text-green-600 dark:text-green-400 whitespace-nowrap">Reduce transaction amount</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">"Network error"</td>
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">"Network error"</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">RPC connection issue</td>
         <td className="px-4 py-3 text-sm text-green-600 dark:text-green-400 whitespace-nowrap">Check RPC URL in .env</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">"Slippage too high"</td>
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">"Slippage too high"</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Price moved during swap</td>
         <td className="px-4 py-3 text-sm text-green-600 dark:text-green-400 whitespace-nowrap">Increase slippage tolerance</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">"Invalid private key"</td>
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">"Invalid private key"</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Incorrect key format</td>
         <td className="px-4 py-3 text-sm text-green-600 dark:text-green-400 whitespace-nowrap">Verify private key format</td>
       </tr>
diff --git a/content/evm/ai-tooling/mcp-server.mdx b/content/evm/ai-tooling/mcp-server.mdx
index fa412c41..b7e49b68 100644
--- a/content/evm/ai-tooling/mcp-server.mdx
+++ b/content/evm/ai-tooling/mcp-server.mdx
@@ -380,19 +380,19 @@ The Sei MCP Server enables your AI assistant to:
 Pre-configured prompts for common tasks:
 
 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
-  <div className="bg-white dark:bg-neutral-800/50 rounded-lg p-4 border border-neutral-200 dark:border-neutral-700">
+  <div className="bg-white dark:bg-neutral-800/50 rounded-sm p-4 border border-neutral-200 dark:border-neutral-700">
     <h4 className="font-medium text-purple-600 dark:text-purple-400 mb-1">my_wallet_address</h4>
     <p className="text-sm text-neutral-600 dark:text-neutral-400">Get your wallet address</p>
   </div>
-  <div className="bg-white dark:bg-neutral-800/50 rounded-lg p-4 border border-neutral-200 dark:border-neutral-700">
+  <div className="bg-white dark:bg-neutral-800/50 rounded-sm p-4 border border-neutral-200 dark:border-neutral-700">
     <h4 className="font-medium text-purple-600 dark:text-purple-400 mb-1">explore_block</h4>
     <p className="text-sm text-neutral-600 dark:text-neutral-400">Analyze block data</p>
   </div>
-  <div className="bg-white dark:bg-neutral-800/50 rounded-lg p-4 border border-neutral-200 dark:border-neutral-700">
+  <div className="bg-white dark:bg-neutral-800/50 rounded-sm p-4 border border-neutral-200 dark:border-neutral-700">
     <h4 className="font-medium text-purple-600 dark:text-purple-400 mb-1">analyze_transaction</h4>
     <p className="text-sm text-neutral-600 dark:text-neutral-400">Transaction details</p>
   </div>
-  <div className="bg-white dark:bg-neutral-800/50 rounded-lg p-4 border border-neutral-200 dark:border-neutral-700">
+  <div className="bg-white dark:bg-neutral-800/50 rounded-sm p-4 border border-neutral-200 dark:border-neutral-700">
     <h4 className="font-medium text-purple-600 dark:text-purple-400 mb-1">analyze_address</h4>
     <p className="text-sm text-neutral-600 dark:text-neutral-400">Address analysis</p>
   </div>
@@ -401,19 +401,19 @@ Pre-configured prompts for common tasks:
 ## Usage Examples
 
 <div className="space-y-4 my-6">
-  <div className="bg-white dark:bg-neutral-800/50 rounded-lg p-4 border-l-4 border-purple-500">
+  <div className="bg-white dark:bg-neutral-800/50 rounded-sm p-4 border-l-4 border-purple-500">
     <p className="text-sm font-medium text-purple-600 dark:text-purple-400 mb-1">Query Balance</p>
     <p className="text-neutral-700 dark:text-neutral-300">"What's my SEI balance?"</p>
     <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-2">→ Returns wallet balance and address</p>
   </div>
 
-<div className="bg-white dark:bg-neutral-800/50 rounded-lg p-4 border-l-4 border-purple-500">
+<div className="bg-white dark:bg-neutral-800/50 rounded-sm p-4 border-l-4 border-purple-500">
   <p className="text-sm font-medium text-purple-600 dark:text-purple-400 mb-1">Send Transaction</p>
   <p className="text-neutral-700 dark:text-neutral-300">"Send 1 SEI to 0x742d35Cc6634C0532925a3b8D4C1C4e3153DC"</p>
   <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-2">→ Executes transfer and returns transaction hash</p>
 </div>
 
-  <div className="bg-white dark:bg-neutral-800/50 rounded-lg p-4 border-l-4 border-purple-500">
+  <div className="bg-white dark:bg-neutral-800/50 rounded-sm p-4 border-l-4 border-purple-500">
     <p className="text-sm font-medium text-purple-600 dark:text-purple-400 mb-1">Contract Analysis</p>
     <p className="text-neutral-700 dark:text-neutral-300">"Is 0x3894085ef7ff0f0aedf52e2a2704928d1ec074f1 a contract?"</p>
     <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-2">→ Identifies contract type and metadata</p>
diff --git a/content/evm/in-app-swaps.mdx b/content/evm/in-app-swaps.mdx
index 85d72121..021f2f9a 100644
--- a/content/evm/in-app-swaps.mdx
+++ b/content/evm/in-app-swaps.mdx
@@ -117,7 +117,7 @@ export default function SwapPage() {
 return (
 
 <div className="max-w-md mx-auto">
-  <iframe src={`https://symph.ag/embed?${params.toString()}`} className="w-full min-h-[650px] border-0 rounded-xl" title="Symphony Swap" />
+  <iframe src={`https://symph.ag/embed?${params.toString()}`} className="w-full min-h-[650px] border-0 rounded-sm" title="Symphony Swap" />
 </div>
 ); }
 
@@ -153,7 +153,7 @@ return (
 import dynamic from 'next/dynamic';
 
 const SwapWidget = dynamic(() => import('./SwapWidget'), {
-  loading: () => <div className="animate-pulse h-[650px] bg-gray-800 rounded-xl" />,
+  loading: () => <div className="animate-pulse h-[650px] bg-gray-800 rounded-sm" />,
   ssr: false
 });
 ````
@@ -193,7 +193,7 @@ function SwapWidgetWithFallback() {
 
   if (error) {
     return (
-      <div className="p-6 bg-red-900/20 rounded-xl text-center">
+      <div className="p-6 bg-[#34050d]/20 rounded-sm text-center">
         <p>Swap widget failed to load.</p>
         <a href="https://symph.ag" target="_blank" rel="noopener noreferrer" className="text-blue-400 underline">
           Open Symphony directly →
diff --git a/content/evm/index.mdx b/content/evm/index.mdx
index 7d544138..c889fe14 100644
--- a/content/evm/index.mdx
+++ b/content/evm/index.mdx
@@ -17,20 +17,25 @@ import { LinkCard } from '../../src/components/LinkCard';
 import { Callout } from 'nextra/components';
 import { RpcSelector, AddSeiInlineButton } from '../../src/components';
 
-<div className="flex flex-col gap-8">
+<div className="flex flex-col">
   <div className="flex flex-col">
      <div className="mb-6">
       <div className="flex items-center gap-4">
         <h1 className="text-4xl font-bold">Sei EVM</h1>
-        <div className="inline-flex items-center bg-gradient-to-r from-red-500/10 to-transparent px-3 py-1 rounded-full">
-          <IconRocket className="h-4 w-4 text-red-500 mr-2" />
-          <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">100x Faster EVM</span>
+        <div className="inline-flex items-center border border-neutral-200 dark:border-[#333] px-3 py-1" style={{ borderRadius: '2px' }}>
+          <IconRocket className="h-4 w-4 text-[#600014] dark:text-[#b99ba1] mr-2" />
+          <span className="text-neutral-700 dark:text-neutral-300" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>100x Faster EVM</span>
         </div>
       </div>
     </div>
 
-    <div className="mb-8">
-      <h2 className="text-2xl font-bold mb-6">Why Choose Sei EVM?</h2>
+    <div className="py-8 border-t border-neutral-200 dark:border-[#333]">
+      <div className="flex items-center gap-2 mb-6">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
+          <IconChartBar className="h-3 w-3 text-white" />
+        </div>
+        <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Why Choose Sei EVM?</h2>
+      </div>
 
       <div className="overflow-auto">
         <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
@@ -53,7 +58,7 @@ import { RpcSelector, AddSeiInlineButton } from '../../src/components';
               <td className="px-4 py-3 text-sm text-neutral-900 dark:text-neutral-100 whitespace-nowrap font-medium">Transaction Throughput</td>
               <td className="px-4 py-3 text-sm text-green-600 dark:text-green-400 whitespace-nowrap font-medium">100 MGas/s</td>
               <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">3 MGas/s</td>
-              <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">< 50 MGas/s</td>
+              <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">&lt; 50 MGas/s</td>
             </tr>
             <tr>
               <td className="px-4 py-3 text-sm text-neutral-900 dark:text-neutral-100 whitespace-nowrap font-medium">Parallelized Execution</td>
@@ -77,29 +82,34 @@ import { RpcSelector, AddSeiInlineButton } from '../../src/components';
         </table>
       </div>
       <div className="mt-4 flex justify-end">
-        <a href="/evm/differences-with-ethereum" className="text-sm flex items-center text-neutral-700 hover:text-red-500 dark:text-neutral-300 dark:hover:text-red-400 transition-colors">
+        <a href="/evm/differences-with-ethereum" className="text-sm flex items-center text-neutral-700 hover:text-[#600014] dark:text-neutral-300 dark:hover:text-[#b99ba1] transition-colors">
           <span>View detailed Ethereum comparison</span>
           <IconArrowRight className="h-3.5 w-3.5 ml-1" />
         </a>
       </div>
     </div>
 
-    <div className="mb-8">
-      <h2 className="text-2xl font-bold mb-6">Quick Start</h2>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50">
+    <div className="py-8 border-t border-neutral-200 dark:border-[#333]">
+      <div className="flex items-center gap-2 mb-6">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
+          <IconRocket className="h-3 w-3 text-white" />
+        </div>
+        <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Quick Start</h2>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+        <div className="p-5 bg-white dark:bg-black">
           <div className="mb-4 flex items-center">
-            <div className="h-8 w-8 rounded-full bg-green-500/10 flex items-center justify-center mr-3">
-              <span className="text-green-600 dark:text-green-400 font-bold">1</span>
+            <div className="h-6 w-6 bg-[#600014] flex items-center justify-center mr-3" style={{ borderRadius: '2px' }}>
+              <span className="text-white text-xs font-bold">1</span>
             </div>
             <h3 className="text-base font-bold text-neutral-800 dark:text-neutral-200">Add Sei to existing Wallet</h3>
           </div>
           <div className="flex flex-col gap-2">
-            <a href="/evm/sei-global-wallet" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors">
+            <a href="/evm/sei-global-wallet" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors">
               <IconChevronRight className="h-3 w-3 mr-1" />
               <span>Install Sei Global Wallet</span>
             </a>
-            <a href="/evm/networks" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors">
+            <a href="/evm/networks" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors">
               <IconChevronRight className="h-3 w-3 mr-1" />
               <span> Sei EVM Network Information</span>
             </a>
@@ -107,39 +117,39 @@ import { RpcSelector, AddSeiInlineButton } from '../../src/components';
           </div>
         </div>
 
-        <div className="rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50">
+        <div className="p-5 bg-white dark:bg-black">
           <div className="mb-4 flex items-center">
-            <div className="h-8 w-8 rounded-full bg-green-500/10 flex items-center justify-center mr-3">
-              <span className="text-green-600 dark:text-green-400 font-bold">2</span>
+            <div className="h-6 w-6 bg-[#600014] flex items-center justify-center mr-3" style={{ borderRadius: '2px' }}>
+              <span className="text-white text-xs font-bold">2</span>
             </div>
             <h3 className="text-base font-bold text-neutral-800 dark:text-neutral-200">Get Test Tokens</h3>
           </div>
           <div className="flex flex-col gap-2">
-            <a href="/learn/faucet" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors">
+            <a href="/learn/faucet" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors">
               <IconChevronRight className="h-3 w-3 mr-1" />
               <span>Visit Sei Faucet</span>
             </a>
-            <a href="/evm/tokens" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors">
+            <a href="/evm/tokens" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors">
               <IconChevronRight className="h-3 w-3 mr-1" />
               <span>View Token Information</span>
             </a>
           </div>
         </div>
 
-        <div className="rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50">
+        <div className="p-5 bg-white dark:bg-black">
           <div className="mb-4 flex items-center">
-            <div className="h-8 w-8 rounded-full bg-green-500/10 flex items-center justify-center mr-3">
-              <span className="text-green-600 dark:text-green-400 font-bold">3</span>
+            <div className="h-6 w-6 bg-[#600014] flex items-center justify-center mr-3" style={{ borderRadius: '2px' }}>
+              <span className="text-white text-xs font-bold">3</span>
             </div>
             <h3 className="text-base font-bold text-neutral-800 dark:text-neutral-200">Start Building</h3>
           </div>
           <div className="flex flex-col gap-2">
-            <a href="/evm/evm-general" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors">
+            <a href="/evm/evm-general" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors">
               <IconChevronRight className="h-3 w-3 mr-1" />
               <span>EVM General Guide</span>
             </a>
 
-            <a href="https://github.com/sei-protocol/sei-chain/tree/main/example" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors">
+            <a href="https://github.com/sei-protocol/sei-chain/tree/main/example" className="flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors">
               <IconChevronRight className="h-3 w-3 mr-1" />
               <span>Project Templates</span>
             </a>
@@ -150,28 +160,33 @@ import { RpcSelector, AddSeiInlineButton } from '../../src/components';
 
   </div>
 
-  <div>
-    <h2 className="text-2xl font-bold mb-6">Ready-to-Deploy Examples</h2>
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <a href="/evm/evm-wizard" className="group flex flex-col rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
-        <div className="w-10 h-10 rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-red-500/10 transition-colors">
-          <IconWand className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 transition-colors" />
+  <div className="py-8 border-t border-neutral-200 dark:border-[#333]">
+    <div className="flex items-center gap-2 mb-6">
+      <div className="w-5 h-5 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
+        <IconCode className="h-3 w-3 text-white" />
+      </div>
+      <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Ready-to-Deploy Examples</h2>
+    </div>
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+      <a href="/evm/evm-wizard" className="group flex flex-col p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors h-full">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mb-4" style={{ borderRadius: '2px' }}>
+          <IconWand className="h-3 w-3 text-white" />
         </div>
         <h3 className="text-base font-bold mb-2 text-neutral-800 dark:text-neutral-200">EVM Contract Wizard</h3>
         <span className="text-sm text-neutral-600 dark:text-neutral-400 mb-2 block">Generate secure ERC-20, ERC-721, and more contract in minutes with the Contract Wizard. Configure the features, copy the Solidity code, deploy.</span>
       </a>
 
-      <a href="/evm/building-a-frontend" className="group flex flex-col rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
-        <div className="w-10 h-10 rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-red-500/10 transition-colors">
-          <IconLayoutDashboard className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 transition-colors" />
+      <a href="/evm/building-a-frontend" className="group flex flex-col p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors h-full">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mb-4" style={{ borderRadius: '2px' }}>
+          <IconLayoutDashboard className="h-3 w-3 text-white" />
         </div>
         <h3 className="text-base font-bold mb-2 text-neutral-800 dark:text-neutral-200">Frontend Integration</h3>
         <span className="text-sm text-neutral-600 dark:text-neutral-400 mb-2 block">Connect various frontend interfaces such as ethers.js, viem, wagmi to your Sei EVM smart contracts.</span>
       </a>
 
-      <a href="/evm/solidity-resources" className="group flex flex-col rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
-        <div className="w-10 h-10 rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-red-500/10 transition-colors">
-          <IconTools className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 transition-colors" />
+      <a href="/evm/solidity-resources" className="group flex flex-col p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors h-full">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mb-4" style={{ borderRadius: '2px' }}>
+          <IconTools className="h-3 w-3 text-white" />
         </div>
         <h3 className="text-base font-bold mb-2 text-neutral-800 dark:text-neutral-200">Solidity Resources</h3>
         <span className="text-sm text-neutral-600 dark:text-neutral-400 mb-2 block">Tools and best practices for Solidity development on Sei.</span>
@@ -180,36 +195,41 @@ import { RpcSelector, AddSeiInlineButton } from '../../src/components';
 
   </div>
   
-  <div>
-    <h2 className="text-2xl font-bold mb-6">Development Tools</h2>
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <a href="/evm/evm-hardhat" className="group flex flex-col justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all">
+  <div className="py-8 border-t border-neutral-200 dark:border-[#333]">
+    <div className="flex items-center gap-2 mb-6">
+      <div className="w-5 h-5 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
+        <IconTools className="h-3 w-3 text-white" />
+      </div>
+      <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Development Tools</h2>
+    </div>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+      <a href="/evm/evm-hardhat" className="group flex flex-col justify-between p-6 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors">
         <div>
-          <div className="w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center mb-4">
-            <IconTerminal2 className="h-6 w-6 text-red-500" />
+          <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mb-4" style={{ borderRadius: '2px' }}>
+            <IconTerminal2 className="h-3 w-3 text-white" />
           </div>
           <h3 className="text-xl font-bold mb-2">Deploy with Hardhat</h3>
           <span className="text-neutral-600 dark:text-neutral-400 mb-4 block">
             Deploy smart contracts on Sei EVM using Hardhat. Simple setup, fast results.
           </span>
         </div>
-        <div className="flex items-center text-red-500 font-medium">
+        <div className="flex items-center text-[#600014] dark:text-[#b99ba1] font-medium">
           <span>Start tutorial</span>
           <IconArrowRight className="h-4 w-4 ml-1 group-hover:ml-2 transition-all" />
         </div>
       </a>
 
-      <a href="/evm/evm-foundry" className="group flex flex-col justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all">
+      <a href="/evm/evm-foundry" className="group flex flex-col justify-between p-6 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors">
         <div>
-          <div className="w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center mb-4">
-            <IconPackage className="h-6 w-6 text-red-500" />
+          <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mb-4" style={{ borderRadius: '2px' }}>
+            <IconPackage className="h-3 w-3 text-white" />
           </div>
           <h3 className="text-xl font-bold mb-2">Deploy with Foundry</h3>
           <span className="text-neutral-600 dark:text-neutral-400 mb-4 block">
             Use Foundry to build and deploy on Sei EVM. Fast testing, simple deployment.
           </span>
         </div>
-        <div className="flex items-center text-red-500 font-medium">
+        <div className="flex items-center text-[#600014] dark:text-[#b99ba1] font-medium">
           <span>Start tutorial</span>
           <IconArrowRight className="h-4 w-4 ml-1 group-hover:ml-2 transition-all" />
         </div>
@@ -218,49 +238,55 @@ import { RpcSelector, AddSeiInlineButton } from '../../src/components';
 
   </div>
 
-<div>
-  <h2 className="text-2xl font-bold mb-6">Use Cases</h2>
-  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-    <a href="/evm/x402" className="group flex flex-col justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all">
+<div className="py-8 border-t border-neutral-200 dark:border-[#333]">
+  <div className="flex items-center gap-2 mb-6">
+    <div className="w-5 h-5 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
+      <IconBolt className="h-3 w-3 text-white" />
+    </div>
+    <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Use Cases</h2>
+  </div>
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+    <a href="/evm/x402" className="group flex flex-col justify-between p-6 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors">
       <div>
-        <div className="w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center mb-4">
-          <IconCreditCard className="h-6 w-6 text-red-500" />
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mb-4" style={{ borderRadius: '2px' }}>
+          <IconCreditCard className="h-3 w-3 text-white" />
         </div>
         <h3 className="text-xl font-bold mb-2">x402 Payments</h3>
         <span className="text-neutral-600 dark:text-neutral-400 mb-4 block">Implement HTTP 402 Payment Required for API monetization and premium content.</span>
       </div>
-      <div className="flex items-center text-red-500 font-medium">
+      <div className="flex items-center text-[#600014] dark:text-[#b99ba1] font-medium">
         <span>Explore protocol</span>
         <IconArrowRight className="h-4 w-4 ml-1 group-hover:ml-2 transition-all" />
       </div>
     </a>
 
-    <a href="/evm/usdc-on-sei" className="group flex flex-col justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all">
+    <a href="/evm/usdc-on-sei" className="group flex flex-col justify-between p-6 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors">
       <div>
-        <div className="w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center mb-4">
-          <IconArrowsExchange className="h-6 w-6 text-red-500" />
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mb-4" style={{ borderRadius: '2px' }}>
+          <IconArrowsExchange className="h-3 w-3 text-white" />
         </div>
         <h3 className="text-xl font-bold mb-2">USDC on Sei</h3>
         <span className="text-neutral-600 dark:text-neutral-400 mb-4 block">Native USDC integration guide for seamless stablecoin transactions.</span>
       </div>
-      <div className="flex items-center text-red-500 font-medium">
+      <div className="flex items-center text-[#600014] dark:text-[#b99ba1] font-medium">
         <span>View guide</span>
         <IconArrowRight className="h-4 w-4 ml-1 group-hover:ml-2 transition-all" />
       </div>
     </a>
+
   </div>
 </div>
 
-  <div className="p-6 rounded-xl bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50">
-    <div className="flex items-center mb-4">
-      <div className="mr-3 w-6 h-6 bg-gradient-to-br from-red-400/20 to-red-500/20 rounded-md shadow-sm flex items-center justify-center">
-        <IconServer className="w-4 h-4 text-red-500" />
+  <div className="py-8 border-t border-neutral-200 dark:border-[#333]">
+    <div className="flex items-center gap-2 mb-4">
+      <div className="w-5 h-5 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
+        <IconServer className="h-3 w-3 text-white" />
       </div>
-      <h2 className="text-xl font-medium text-neutral-800 dark:text-white">RPC Endpoints</h2>
+      <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>RPC Endpoints</h2>
     </div>
     
     <div className="text-neutral-700 dark:text-neutral-300 mb-4">
-      Choose from official Sei Foundation endpoints or community-maintained alternatives. All endpoints support standard EVM JSON-RPC methods. Public endpoints have rate limits—for production apps, consider using a dedicated RPC provider or <a href="/node" className="text-red-500 hover:text-red-600 dark:hover:text-red-400">running your own node</a>.
+      Choose from official Sei Foundation endpoints or community-maintained alternatives. All endpoints support standard EVM JSON-RPC methods. Public endpoints have rate limits—for production apps, consider using a dedicated RPC provider or <a href="/node" className="text-[#600014] dark:text-[#b99ba1] hover:text-[#600014] dark:hover:text-[#b99ba1]">running your own node</a>.
     </div>
     
     <RpcSelector />
diff --git a/content/evm/indexer-providers/dune-sim.mdx b/content/evm/indexer-providers/dune-sim.mdx
index a429197d..08d7bf9f 100644
--- a/content/evm/indexer-providers/dune-sim.mdx
+++ b/content/evm/indexer-providers/dune-sim.mdx
@@ -581,7 +581,7 @@ class RateLimitedClient {
 
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>Invalid API key</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -593,7 +593,7 @@ class RateLimitedClient {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>Rate limit exceeded</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -605,7 +605,7 @@ class RateLimitedClient {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>Chain not supported</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -617,7 +617,7 @@ class RateLimitedClient {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>Invalid address format</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -629,7 +629,7 @@ class RateLimitedClient {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>Request timeout</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -641,7 +641,7 @@ class RateLimitedClient {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>Insufficient data</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/content/evm/indexer-providers/goldrush.mdx b/content/evm/indexer-providers/goldrush.mdx
index 57d734d4..2ec63b0f 100644
--- a/content/evm/indexer-providers/goldrush.mdx
+++ b/content/evm/indexer-providers/goldrush.mdx
@@ -23,7 +23,7 @@ our Sei Data APIs provide fast, accurate, and developer-friendly access to the e
 
 ## Mainnet
 
-<div className="rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 p-4">
+<div className="rounded-sm border border-neutral-200/50 dark:border-neutral-800/50 p-4">
   <div style={{ width: '100%', margin: '-16px', padding: '0' }}>
     <table style={{ width: '100%', margin: '0', borderCollapse: 'collapse' }}>
       <thead style={{ width: '100%' }}>
diff --git a/content/evm/installing-seid-cli.mdx b/content/evm/installing-seid-cli.mdx
index 87736753..cf19999b 100644
--- a/content/evm/installing-seid-cli.mdx
+++ b/content/evm/installing-seid-cli.mdx
@@ -22,7 +22,7 @@ The `seid` CLI is the command-line tool for interacting with the Sei blockchain.
 To install seid, locate the version you wish to use [here](https://github.com/sei-protocol/sei-chain/releases). A list of the currently used versions on mainnet and testnet are displayed right below.
 
 <div id="binary-versions" className="w-full mt-4 mb-6 px-1">
-  <div className="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
+  <div className="overflow-hidden rounded-sm border border-neutral-200 dark:border-neutral-800">
     <VersionTable showGenesis={false} />
   </div>
 </div>
diff --git a/content/evm/precompiles/cosmwasm-precompiles/addr.mdx b/content/evm/precompiles/cosmwasm-precompiles/addr.mdx
index f0a843b1..3f938558 100644
--- a/content/evm/precompiles/cosmwasm-precompiles/addr.mdx
+++ b/content/evm/precompiles/cosmwasm-precompiles/addr.mdx
@@ -755,35 +755,35 @@ const pubKeyTx = await addr.associatePubKey(pubKeyHex, {
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid signature</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Malformed v, r, s components</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Verify signature parsing and format</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>already associated</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Address already has association</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check existing association instead</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>not found</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">No association exists</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Create association first</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid public key</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Malformed public key format</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use compressed format without 0x prefix</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid address format</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Wrong address format</td>
diff --git a/content/evm/precompiles/cosmwasm-precompiles/bank.mdx b/content/evm/precompiles/cosmwasm-precompiles/bank.mdx
index 9a772da8..b9df1fba 100644
--- a/content/evm/precompiles/cosmwasm-precompiles/bank.mdx
+++ b/content/evm/precompiles/cosmwasm-precompiles/bank.mdx
@@ -1179,35 +1179,35 @@ async function safeGetBalance(address: string, denom: string) {
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>insufficient funds</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Not enough balance for transfer</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check balance before transfer</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid address</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Malformed address format</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use proper EVM (0x...) or Sei (sei1...) format</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>unknown denomination</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Token denom doesn't exist</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Verify token denomination format</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>amount overflow</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Amount exceeds uint256 limits</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use appropriate amount ranges</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>metadata not found</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Token metadata not available</td>
diff --git a/content/evm/precompiles/cosmwasm-precompiles/cosmwasm.mdx b/content/evm/precompiles/cosmwasm-precompiles/cosmwasm.mdx
index 34631915..f46b9987 100644
--- a/content/evm/precompiles/cosmwasm-precompiles/cosmwasm.mdx
+++ b/content/evm/precompiles/cosmwasm-precompiles/cosmwasm.mdx
@@ -967,49 +967,49 @@ const incorrectMsg = ethers.toUtf8Bytes('invalid json');
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid json</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Malformed JSON message</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Validate JSON before encoding</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>contract not found</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Invalid contract address</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Verify contract address format</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>insufficient funds</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Not enough tokens for operation</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check balance and reduce amount</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>execution failed</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Contract execution error</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check contract state and parameters</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>code id not found</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Invalid code ID for instantiation</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use valid stored code ID</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>unauthorized</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Insufficient permissions</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check admin/owner permissions</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>query parsing failed</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Invalid query message format</td>
diff --git a/content/evm/precompiles/cosmwasm-precompiles/pointer.mdx b/content/evm/precompiles/cosmwasm-precompiles/pointer.mdx
index c2af0ae5..ddcb9807 100644
--- a/content/evm/precompiles/cosmwasm-precompiles/pointer.mdx
+++ b/content/evm/precompiles/cosmwasm-precompiles/pointer.mdx
@@ -681,49 +681,49 @@ async function estimatePointerGas(type, asset) {
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>pointer already exists</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Pointer for this asset was already created</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Query existing pointer address instead</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid token denom</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Invalid or non-existent native token denomination</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Verify token denomination exists on chain</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>contract does not exist</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">CosmWasm contract not found at address</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Verify contract address and ensure it's deployed</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>not a CW20 contract</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Contract exists but doesn't implement CW20 standard</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use correct contract address for CW20 token</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>not a CW721 contract</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Contract exists but doesn't implement CW721 standard</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use correct contract address for CW721 NFT</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>not a CW1155 contract</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Contract exists but doesn't implement CW1155 standard</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use correct contract address for the CW1155 contract</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>insufficient gas</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Gas limit too low for pointer creation</td>
diff --git a/content/evm/precompiles/cosmwasm-precompiles/pointerview.mdx b/content/evm/precompiles/cosmwasm-precompiles/pointerview.mdx
index b5a2c464..36cd41b7 100644
--- a/content/evm/precompiles/cosmwasm-precompiles/pointerview.mdx
+++ b/content/evm/precompiles/cosmwasm-precompiles/pointerview.mdx
@@ -1003,35 +1003,35 @@ function validateAssetFormat(assetType, asset) {
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>network error</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">RPC endpoint unavailable</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check network connection and RPC endpoint</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid parameter</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Malformed asset identifier</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Validate asset format before querying</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>call reverted</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Precompile call failed</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check precompile address and ABI</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>timeout</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Query took too long</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Implement retry logic with backoff</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>rate limit exceeded</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Too many requests to RPC</td>
diff --git a/content/evm/precompiles/governance.mdx b/content/evm/precompiles/governance.mdx
index ccf6b5cb..d7223121 100644
--- a/content/evm/precompiles/governance.mdx
+++ b/content/evm/precompiles/governance.mdx
@@ -227,7 +227,7 @@ The governance system uses the following vote options:
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           No
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -1183,7 +1183,7 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>proposal does not exist</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -1195,7 +1195,7 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>inactive proposal</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -1207,7 +1207,7 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>insufficient deposit</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -1219,7 +1219,7 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid vote option</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -1231,7 +1231,7 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>already voted</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -1242,8 +1242,8 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
         </td>
       </tr>
 
-      <tr className="bg-red-50 dark:bg-red-900/20">
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-300 whitespace-nowrap font-bold">
+      <tr className="bg-[#f5f5f7] dark:bg-[#600014]/20">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-bold">
           <code>weights must sum to&nbsp;1</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-700 dark:text-neutral-300 font-semibold">
@@ -1255,7 +1255,7 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>insufficient voting power</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -1267,7 +1267,7 @@ function validateWeightedVoteComprehensive(options: Array<{ option: number; weig
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>deposit period ended</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/content/evm/precompiles/json.mdx b/content/evm/precompiles/json.mdx
index ebaf6a4b..29dece0d 100644
--- a/content/evm/precompiles/json.mdx
+++ b/content/evm/precompiles/json.mdx
@@ -750,7 +750,7 @@ async function handleMissingKeys(jsonPrecompile: ethers.Contract, data: any) {
 
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>key not found</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -762,7 +762,7 @@ async function handleMissingKeys(jsonPrecompile: ethers.Contract, data: any) {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid JSON format</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -774,7 +774,7 @@ async function handleMissingKeys(jsonPrecompile: ethers.Contract, data: any) {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>execution reverted</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -786,7 +786,7 @@ async function handleMissingKeys(jsonPrecompile: ethers.Contract, data: any) {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid integer</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
@@ -798,7 +798,7 @@ async function handleMissingKeys(jsonPrecompile: ethers.Contract, data: any) {
       </tr>
 
       <tr>
-        <td className="px-4 py-3 text-sm text-red-500 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>out of gas</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/content/evm/precompiles/staking.mdx b/content/evm/precompiles/staking.mdx
index ac69109c..3c7a6beb 100644
--- a/content/evm/precompiles/staking.mdx
+++ b/content/evm/precompiles/staking.mdx
@@ -1461,49 +1461,49 @@ const delegateTx = await staking.delegate(validatorAddress, {
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>insufficient funds</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Not enough SEI for operation</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check balance and reduce amount</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>validator does not exist</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Invalid validator address</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Verify validator address format</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>invalid delegation amount</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Amount formatting issue</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Use correct decimal precision</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>commission rate too high</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Commission above max rate</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Lower commission rate</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>commission change too frequent</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Changing commission within 24h</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Wait 24 hours between changes</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>self delegation too low</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Below minimum self-delegation</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Increase self-delegation amount</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">
           <code>too many redelegations</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Exceeded 7 redelegation limit</td>
diff --git a/content/evm/transactions.mdx b/content/evm/transactions.mdx
index 35be1d37..70a7c293 100644
--- a/content/evm/transactions.mdx
+++ b/content/evm/transactions.mdx
@@ -460,25 +460,25 @@ sendTransaction().catch(console.error);
 ## Additional Resources
 
 <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
-  <a href="/evm/reference" className="group flex flex-col rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
-    <div className="w-10 h-10 rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-red-500/10 transition-colors">
-      <IconInfoCircle className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 transition-colors" />
+  <a href="/evm/reference" className="group flex flex-col rounded-sm p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
+    <div className="w-10 h-10 rounded-sm bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-[#600014]/10 transition-colors">
+      <IconInfoCircle className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] transition-colors" />
     </div>
     <h3 className="text-base font-bold mb-2 text-neutral-800 dark:text-neutral-200">RPC Reference</h3>
     <p className="text-sm text-neutral-600 dark:text-neutral-400">Complete documentation of Sei's EVM RPC endpoints for transaction creation and monitoring</p>
   </a>
 
-<a href="/learn/dev-gas" className="group flex flex-col rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
-  <div className="w-10 h-10 rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-red-500/10 transition-colors">
-    <IconCoins className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 transition-colors" />
+<a href="/learn/dev-gas" className="group flex flex-col rounded-sm p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
+  <div className="w-10 h-10 rounded-sm bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-[#600014]/10 transition-colors">
+    <IconCoins className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] transition-colors" />
   </div>
   <h3 className="text-base font-bold mb-2 text-neutral-800 dark:text-neutral-200">Gas & Fees</h3>
   <p className="text-sm text-neutral-600 dark:text-neutral-400">Learn more about gas calculation, fee estimation, and cost optimization on Sei</p>
 </a>
 
-  <a href="/learn/accounts" className="group flex flex-col rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
-    <div className="w-10 h-10 rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-red-500/10 transition-colors">
-      <IconUserCircle className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 transition-colors" />
+  <a href="/learn/accounts" className="group flex flex-col rounded-sm p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all h-full">
+    <div className="w-10 h-10 rounded-sm bg-neutral-900/10 dark:bg-neutral-800/30 flex items-center justify-center mb-4 group-hover:bg-[#600014]/10 transition-colors">
+      <IconUserCircle className="h-5 w-5 text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] transition-colors" />
     </div>
     <h3 className="text-base font-bold mb-2 text-neutral-800 dark:text-neutral-200">Accounts</h3>
     <p className="text-sm text-neutral-600 dark:text-neutral-400">Understanding Externally Owned Accounts and Contract Accounts on Sei</p>
diff --git a/content/evm/wallet-integrations/particle.mdx b/content/evm/wallet-integrations/particle.mdx
index e37e7520..f7fdfbea 100644
--- a/content/evm/wallet-integrations/particle.mdx
+++ b/content/evm/wallet-integrations/particle.mdx
@@ -374,7 +374,7 @@ export default function Home() {
       </div>
       {isConnected && (
         <>
-          <div className="border border-purple-500 p-6 rounded-lg w-full">
+          <div className="border border-purple-500 p-6 rounded-sm w-full">
             <h2 className="text-lg font-semibold mb-2 text-white">
               Address: <code>{userAddress || 'Loading...'}</code>
             </h2>
diff --git a/content/evm/wallet-integrations/thirdweb-7702.mdx b/content/evm/wallet-integrations/thirdweb-7702.mdx
index 48c8f366..4295b1c2 100644
--- a/content/evm/wallet-integrations/thirdweb-7702.mdx
+++ b/content/evm/wallet-integrations/thirdweb-7702.mdx
@@ -320,7 +320,7 @@ function App() {
         </div>
 
         {/* Connection Section */}
-        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <div className="bg-white rounded-sm shadow-lg p-6 mb-6">
           <h2 className="text-2xl font-semibold mb-4 text-gray-800">
             Connect Your Smart Account
           </h2>
@@ -335,13 +335,13 @@ function App() {
             connectButton={{
               label: "Connect with EIP-7702 Smart Account",
               className:
-                "!bg-indigo-600 !hover:bg-indigo-700 !text-white !py-3 !px-6 !rounded-lg !font-medium",
+                "!bg-indigo-600 !hover:bg-indigo-700 !text-white !py-3 !px-6 !rounded-sm !font-medium",
             }}
           />
 
           {/* Display account info */}
           {account && (
-            <div className="mt-4 p-4 bg-green-50 rounded-lg">
+            <div className="mt-4 p-4 bg-green-50 rounded-sm">
               <h3 className="font-semibold text-green-800 mb-2">
                 ✅ Smart Account Connected
               </h3>
@@ -359,9 +359,9 @@ function App() {
         {account && (
           <>
             {/* Contract Information */}
-            <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+            <div className="bg-white rounded-sm shadow-lg p-6 mb-6">
               <div className="flex items-center justify-center gap-4">
-                <div className="text-center p-4 bg-blue-50 rounded-lg">
+                <div className="text-center p-4 bg-blue-50 rounded-sm">
                   <p className="text-sm text-gray-600 mb-1">Current Stored Value</p>
                   <p className="text-2xl font-bold text-purple-600">
                     {storeValue?.toString() || "0"}
@@ -371,7 +371,7 @@ function App() {
             </div>
 
             {/* Transaction Section */}
-            <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+            <div className="bg-white rounded-sm shadow-lg p-6 mb-6">
               <div className="space-y-6">
                 <div className="border-l-4 border-blue-500 pl-4">
                   <h4 className="font-semibold text-gray-800 mb-2">Store</h4>
@@ -412,7 +412,7 @@ function App() {
             </div>
 
             {/* Custom Store Button */}
-            <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+            <div className="bg-white rounded-sm shadow-lg p-6 mb-6">
               <div className="border-l-4 border-green-500 pl-4">
                 <h4 className="font-semibold text-gray-800 mb-2">
                   Custom Implementation
@@ -425,7 +425,7 @@ function App() {
                       handleCustomStore(num);
                     }
                   }}
-                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-sm font-medium transition-colors"
                 >
                   Store Custom Number
                 </button>
@@ -434,7 +434,7 @@ function App() {
 
             {/* Status Display */}
             {transactionStatus && (
-              <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+              <div className="bg-white rounded-sm shadow-lg p-6 mb-6">
                 <h4 className="font-semibold mb-2">Transaction Status</h4>
                 <p className="text-sm text-gray-700 font-mono bg-gray-100 p-3 rounded">
                   {transactionStatus}
diff --git a/content/evm/wallet-integrations/thirdweb.mdx b/content/evm/wallet-integrations/thirdweb.mdx
index 99053345..284c6817 100644
--- a/content/evm/wallet-integrations/thirdweb.mdx
+++ b/content/evm/wallet-integrations/thirdweb.mdx
@@ -232,7 +232,7 @@ function App() {
           Sei x thirdweb Account Abstraction
         </h1>
 
-        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div className="bg-white rounded-sm shadow-md p-6 mb-6">
           <h2 className="text-xl font-semibold mb-4">Connect Wallet</h2>
           <ConnectButton
             client={client}
@@ -248,7 +248,7 @@ function App() {
         </div>
 
         {account && (
-          <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="bg-white rounded-sm shadow-md p-6">
             <h3 className="text-xl font-semibold mb-4">
               Storage Contract Interactions
             </h3>
@@ -440,7 +440,7 @@ You've successfully integrated thirdweb's Account Abstraction SDK with Sei! User
     </thead>
     <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] font-medium">
           <code>Client ID not found</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Environment variable not loading</td>
@@ -449,7 +449,7 @@ You've successfully integrated thirdweb's Account Abstraction SDK with Sei! User
         </td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] font-medium">
           <code>Sponsored transactions failing</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">No active subscription</td>
@@ -461,7 +461,7 @@ You've successfully integrated thirdweb's Account Abstraction SDK with Sei! User
         </td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] font-medium">
           <code>Transaction reverted</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Invalid contract address</td>
@@ -473,14 +473,14 @@ You've successfully integrated thirdweb's Account Abstraction SDK with Sei! User
         </td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] font-medium">
           <code>Cannot connect wallet</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Network configuration issue</td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Check Client ID and RPC URL format</td>
       </tr>
       <tr>
-        <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 font-medium">
+        <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] font-medium">
           <code>Gas estimation failed</code>
         </td>
         <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">Contract method issue</td>
diff --git a/content/index.mdx b/content/index.mdx
index ec29967b..dcb5da0d 100644
--- a/content/index.mdx
+++ b/content/index.mdx
@@ -7,274 +7,292 @@ date: 2024-01-01
 updated: 2025-10-06
 ---
 
-import { IconBolt, IconCode, IconClipboardText, IconLock, IconWallet, IconBook, IconTerminal2, IconServer, IconDeviceDesktop, IconExternalLink, IconChevronRight, IconRocket, IconCoins, IconRobot, IconCreditCard, IconCpu, IconDatabase, IconClock, IconReceipt } from '@tabler/icons-react';
+import { IconBolt, IconCode, IconClipboardText, IconLock, IconWallet, IconBook, IconTerminal2, IconServer, IconDeviceDesktop, IconExternalLink, IconChevronRight, IconRocket, IconCoins, IconRobot, IconCreditCard, IconCpu, IconDatabase, IconClock, IconReceipt, IconArrowRight } from '@tabler/icons-react';
 import { OfficeHoursCard, NetworkTabs } from '../src/components';
-import HeaderIcon from '../public/assets/header.svg';
-import Image from 'next/image';
 
-<div className="flex flex-col items-center w-full">
-  <div className="flex flex-col items-center mb-6">
-    <Image priority src={HeaderIcon} alt="Sei Network" className="max-w-[400px] bg-transparent mb-5" fetchPriority="high" />
-    <h1 className="text-4xl font-bold text-center mb-4">Sei Documentation</h1>
+<div className="flex flex-col items-center w-full pt-8 pb-4">
+  <div className="flex items-center gap-4 mb-4">
+    <svg width="48" height="48" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M35.9686 72.3048C46.6812 72.3048 56.3056 67.6454 62.9256 60.2426C59.8461 57.5662 55.2053 57.4036 51.9268 60.049L51.3005 60.5544C45.2978 65.398 36.5511 64.6827 31.4151 58.9282C28.6139 55.7896 23.8166 55.4692 20.6228 58.2073L13.4015 64.3981C19.5865 69.3461 27.432 72.3048 35.9686 72.3048ZM47.6902 54.7986C53.4077 50.185 61.4441 50.3505 66.943 54.8064C70.2299 49.3604 72.1209 42.9773 72.1209 36.1523C72.1209 28.5688 69.7861 21.5307 65.7958 15.7176C63.2235 15.1698 60.4353 15.8096 58.3188 17.6852L57.7164 18.219C51.9436 23.3346 43.1733 23.0237 37.7772 17.5123C34.8341 14.5064 30.0271 14.4077 26.9631 17.2903L18.5597 25.1961L13.9368 20.2824L22.3403 12.3765C28.0798 6.97678 37.0847 7.16168 42.5978 12.7925C45.4784 15.7347 50.1603 15.9006 53.242 13.1697L53.8443 12.6359C55.7149 10.9782 57.8793 9.86071 60.1453 9.27296C53.7404 3.50827 45.2642 0 35.9686 0C17.6162 0 2.45783 13.6749 0.126961 31.3908C5.7013 28.7159 12.5772 29.7452 17.1223 34.3996C19.9916 37.3379 24.6117 37.648 27.848 35.1196L32.5466 31.4489C38.4514 26.8357 46.7988 27.059 52.4486 31.9815L61.5961 39.9511L57.1643 45.0378L48.0169 37.0681C44.8042 34.2692 40.0578 34.1421 36.6999 36.7654L32.0015 40.436C26.0555 45.0813 17.5671 44.5115 12.2955 39.113C9.23 35.9739 4.21638 35.8643 1.01675 38.8667L0 39.8207C0.760911 47.3717 3.84539 54.2368 8.52757 59.6903L16.2317 53.0854C22.2144 47.9563 31.2011 48.5566 36.4485 54.4359C39.1903 57.5079 43.8594 57.8897 47.0639 55.304L47.6902 54.7986Z"
+        fill="currentColor"
+      />
+    </svg>
+    <h1 className="text-5xl font-extrabold text-center mb-0 tracking-tight" style={{ letterSpacing: '-0.03em', lineHeight: '0.95' }}>
+      Sei Documentation
+    </h1>
   </div>
-  <p className="text-lg text-neutral-600 dark:text-neutral-400 text-center max-w-2xl mb-6">
+  <p className="text-base text-neutral-500 dark:text-neutral-400 text-center max-w-xl mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
     The first parallelized EVM blockchain delivering unmatched scalability and speed.
   </p>
-
 </div>
 
-<div className="mb-10">
-  <div className="flex items-center mb-5">
-    <div className="mr-3 w-5 h-5 bg-gradient-to-br from-red-700/70 to-red-900/70 dark:from-red-700/70 dark:to-red-800/70 rounded-sm shadow-sm flex items-center justify-center">
+{/* ── Sei EVM ── */}
+
+<div className="mb-12 pt-8 border-t border-neutral-200 dark:border-[#333]">
+  <div className="flex items-center gap-3 mb-6">
+    <div className="w-5 h-5 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
       <IconRocket className="w-3 h-3 text-white" />
     </div>
-    <h2 className="text-xl font-medium">Sei EVM</h2>
+    <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Sei EVM</h2>
   </div>
 
-  <div className="grid grid-cols-1 gap-4">
-    <a href="/evm" className="group flex items-start justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all relative overflow-hidden">
-      <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-500/10 to-transparent pointer-events-none"></div>
-      <div className="flex items-start gap-5 z-10">
-        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-red-500/60 to-red-700/70 flex items-center justify-center shadow-md">
-          <IconRocket className="h-5 w-5 text-white" />
-        </div>
-        <div className="max-w-2xl">
-          <h3 className="text-lg md:text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2">High-Performance EVM Compatibility</h3>
-          <p className="text-neutral-300 mb-4 text-neutral-800 dark:text-neutral-200 text-sm md:text-base">Explore Sei's revolutionary EVM implementation with unprecedented 400 ms block times, 100 MGas/s throughput, and seamless EVM tooling compatibility.</p>
-          <div className="flex flex-wrap gap-3">
-            <a href="/evm/evm-hardhat" className="px-3 py-1.5 text-neutral-800 dark:text-neutral-200 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 rounded-lg backdrop-blur-sm transition-all flex items-center">
-              <div className="w-1.5 h-1.5 rounded-full bg-red-500/70 mr-2"></div>
-              <span className="text-sm font-medium">Sei EVM with Hardhat</span>
-              <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 ml-1.5" />
-            </a>
-            <a href="/evm/evm-foundry" className="px-3 py-1.5 text-neutral-800 dark:text-neutral-200 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 rounded-lg backdrop-blur-sm transition-all flex items-center">
-              <div className="w-1.5 h-1.5 rounded-full bg-red-500/70 mr-2"></div>
-              <span className="text-sm font-medium">Sei EVM with Foundry</span>
-              <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 ml-1.5" />
-            </a>
-            <a href="/evm/tracing" className="px-3 py-1.5 text-neutral-800 dark:text-neutral-200 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 rounded-lg backdrop-blur-sm transition-all flex items-center">
-              <div className="w-1.5 h-1.5 rounded-full bg-red-500/70 mr-2"></div>
-              <span className="text-sm font-medium">Debug Tracing</span>
-              <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 ml-1.5" />
-            </a>
-          </div>
-        </div>
+  <a href="/evm" className="group flex items-start justify-between p-6 border border-neutral-200 dark:border-[#333] hover:border-neutral-400 dark:hover:border-[#666] transition-colors" style={{ borderRadius: '2px' }}>
+    <div className="flex items-start gap-5">
+      <div className="flex-shrink-0 w-10 h-10 bg-[#600014] flex items-center justify-center" style={{ borderRadius: '2px' }}>
+        <IconRocket className="h-5 w-5 text-white" />
       </div>
-        <div className="flex items-center justify-center w-8 h-8 rounded-full bg-neutral-800/50 dark:bg-neutral-800/70 backdrop-blur-sm group-hover:bg-neutral-700/80 transition-colors duration-300">
-          <IconChevronRight className="h-4 w-4 text-white" />
+      <div className="max-w-2xl">
+        <h3 className="text-lg font-bold text-neutral-800 dark:text-neutral-100 mb-2" style={{ letterSpacing: '-0.02em' }}>High-Performance EVM Compatibility</h3>
+        <p className="text-neutral-500 dark:text-neutral-400 mb-4 text-sm">Explore Sei's revolutionary EVM implementation with unprecedented 400 ms block times, 100 MGas/s throughput, and seamless EVM tooling compatibility.</p>
+        <div className="flex flex-wrap gap-3">
+          <a href="/evm/evm-hardhat" className="px-3 py-1.5 text-neutral-700 dark:text-neutral-300 border border-neutral-200 dark:border-[#333] hover:border-neutral-400 dark:hover:border-[#666] transition-colors flex items-center" style={{ borderRadius: '2px', fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', textTransform: 'uppercase' }}>
+            <div className="w-1.5 h-1.5 bg-[#600014] mr-2" style={{ borderRadius: '1px' }}></div>
+            <span>Sei EVM with Hardhat</span>
+            <IconChevronRight className="h-3 w-3 text-neutral-400 ml-1.5" />
+          </a>
+          <a href="/evm/evm-foundry" className="px-3 py-1.5 text-neutral-700 dark:text-neutral-300 border border-neutral-200 dark:border-[#333] hover:border-neutral-400 dark:hover:border-[#666] transition-colors flex items-center" style={{ borderRadius: '2px', fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', textTransform: 'uppercase' }}>
+            <div className="w-1.5 h-1.5 bg-[#600014] mr-2" style={{ borderRadius: '1px' }}></div>
+            <span>Sei EVM with Foundry</span>
+            <IconChevronRight className="h-3 w-3 text-neutral-400 ml-1.5" />
+          </a>
+          <a href="/evm/tracing" className="px-3 py-1.5 text-neutral-700 dark:text-neutral-300 border border-neutral-200 dark:border-[#333] hover:border-neutral-400 dark:hover:border-[#666] transition-colors flex items-center" style={{ borderRadius: '2px', fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', textTransform: 'uppercase' }}>
+            <div className="w-1.5 h-1.5 bg-[#600014] mr-2" style={{ borderRadius: '1px' }}></div>
+            <span>Debug Tracing</span>
+            <IconChevronRight className="h-3 w-3 text-neutral-400 ml-1.5" />
+          </a>
+        </div>
       </div>
-    </a>
-  </div>
+    </div>
+    <div className="flex items-center justify-center w-8 h-8 border border-neutral-200 dark:border-[#333] group-hover:border-neutral-400 dark:group-hover:border-[#666] transition-colors" style={{ borderRadius: '2px' }}>
+      <IconChevronRight className="h-4 w-4 text-neutral-400" />
+    </div>
+  </a>
 </div>
 
-<div className="mb-10">
-  <div className="flex items-center mb-5">
-    <div className="mr-3 w-5 h-5 bg-gradient-to-br from-neutral-800 to-neutral-900 dark:from-neutral-700 dark:to-neutral-800 rounded-sm shadow-sm flex items-center justify-center">
-      <IconCode className="w-3 h-3 text-white" />
+{/* ── Development ── */}
+
+<div className="mb-12 pt-8 border-t border-neutral-200 dark:border-[#333]">
+  <div className="flex items-center gap-3 mb-6">
+    <div className="w-5 h-5 bg-neutral-800 dark:bg-neutral-200 flex items-center justify-center" style={{ borderRadius: '2px' }}>
+      <IconCode className="w-3 h-3 text-white dark:text-black" />
     </div>
-    <h2 className="text-xl font-medium">Development</h2>
+    <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Development</h2>
   </div>
 
-  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <a href="/evm/evm-general" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+    <a href="/evm/evm-general" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconCode className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconCode className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Deploy a smart contract</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Deploy EVM contracts with 100x better performance than standard Ethereum.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100" style={{ letterSpacing: '-0.01em' }}>Deploy a smart contract</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Deploy EVM contracts with 100x better performance.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/evm/building-a-frontend" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/evm/building-a-frontend" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconBolt className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconBolt className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Build a frontend</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Create powerful dApps with Sei's fast finality and high throughput.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100" style={{ letterSpacing: '-0.01em' }}>Build a frontend</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Create powerful dApps with Sei's fast finality.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
   </div>
 </div>
 
-<div className="mb-10">
-  <div className="flex items-center mb-5">
-    <div className="mr-3 w-5 h-5 bg-gradient-to-br from-neutral-800 to-neutral-900 dark:from-neutral-700 dark:to-neutral-800 rounded-sm shadow-sm flex items-center justify-center">
-      <IconDeviceDesktop className="w-3 h-3 text-white" />
+{/* ── Use Cases ── */}
+
+<div className="mb-12 pt-8 border-t border-neutral-200 dark:border-[#333]">
+  <div className="flex items-center gap-3 mb-6">
+    <div className="w-5 h-5 bg-neutral-800 dark:bg-neutral-200 flex items-center justify-center" style={{ borderRadius: '2px' }}>
+      <IconDeviceDesktop className="w-3 h-3 text-white dark:text-black" />
     </div>
-    <h2 className="text-xl font-medium">Use Cases</h2>
+    <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Use Cases</h2>
   </div>
 
-  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <a href="/evm/tokens" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+    <a href="/evm/tokens" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconCoins className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconCoins className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Tokens</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">View and manage SEI and ERC‑20/721 in wallets like MetaMask.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Tokens</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">View and manage SEI and ERC-20/721 in wallets.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/evm/ai-tooling/cambrian-agent-kit" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/evm/ai-tooling/cambrian-agent-kit" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconRobot className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconRobot className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">AI Tooling</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Deploy AI tooling that reads onchain data and execute smart contract actions.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">AI Tooling</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Deploy AI agents that execute smart contract actions.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/evm/usdc-on-sei" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/evm/usdc-on-sei" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconCreditCard className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconCreditCard className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Payments</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Integrate fast, low-fee crypto payments with immediate finality.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Payments</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Fast, low-fee crypto payments with immediate finality.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/evm/x402" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/evm/x402" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconReceipt className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconReceipt className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">x402 Micropayments</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Monetize APIs and digital services with HTTP-native payments.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">x402 Micropayments</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Monetize APIs with HTTP-native payments.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/learn/user-quickstart" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/learn/user-quickstart" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors md:col-span-2">
       <div className="flex items-center gap-4">
-        <IconWallet className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconWallet className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Onboarding</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Help users set up a wallet and start using Sei in minutes.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Onboarding</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Help users set up a wallet and start using Sei in minutes.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
   </div>
 </div>
 
-<div className="mb-10">
-  <div className="flex items-center mb-5">
-    <div className="mr-3 w-5 h-5 bg-gradient-to-br from-neutral-800 to-neutral-900 dark:from-neutral-700 dark:to-neutral-800 rounded-sm shadow-sm flex items-center justify-center">
-      <IconBook className="w-3 h-3 text-white" />
+{/* ── Learn ── */}
+
+<div className="mb-12 pt-8 border-t border-neutral-200 dark:border-[#333]">
+  <div className="flex items-center gap-3 mb-6">
+    <div className="w-5 h-5 bg-neutral-800 dark:bg-neutral-200 flex items-center justify-center" style={{ borderRadius: '2px' }}>
+      <IconBook className="w-3 h-3 text-white dark:text-black" />
     </div>
-    <h2 className="text-xl font-medium">Learn</h2>
+    <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Learn</h2>
   </div>
 
-  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <a href="/learn/sei-giga" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+    <a href="/learn/sei-giga" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconBolt className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconBolt className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Sei Giga Architecture</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Next‑gen design enabling giga gas execution bandwidth</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Sei Giga Architecture</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Next-gen design enabling giga gas execution bandwidth.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/learn/twin-turbo-consensus" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/learn/twin-turbo-consensus" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconClock className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconClock className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Twin Turbo Consensus</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Sub‑second finality and fast block production.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Twin Turbo Consensus</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Sub-second finality and fast block production.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/learn/parallelization-engine" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/learn/parallelization-engine" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconCpu className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconCpu className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Parallelization Engine</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Optimistic, multi‑core transaction execution.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Parallelization Engine</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Optimistic, multi-core transaction execution.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/learn/seidb" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/learn/seidb" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-center gap-4">
-        <IconDatabase className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+        <IconDatabase className="h-5 w-5 text-neutral-500" />
         <div>
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">SeiDB</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">State access optimized for high throughput.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">SeiDB</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">State access optimized for high throughput.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
   </div>
 </div>
 
-<div className="mb-10">
-  <div className="flex items-center mb-5">
-    <div className="mr-3 w-5 h-5 bg-gradient-to-br from-neutral-800 to-neutral-900 dark:from-neutral-700 dark:to-neutral-800 rounded-sm shadow-sm flex items-center justify-center">
-      <IconServer className="w-3 h-3 text-white" />
+{/* ── Infrastructure & Tools ── */}
+
+<div className="mb-12 pt-8 border-t border-neutral-200 dark:border-[#333]">
+  <div className="flex items-center gap-3 mb-6">
+    <div className="w-5 h-5 bg-neutral-800 dark:bg-neutral-200 flex items-center justify-center" style={{ borderRadius: '2px' }}>
+      <IconServer className="w-3 h-3 text-white dark:text-black" />
     </div>
-    <h2 className="text-xl font-medium">Infrastructure & Tools</h2>
+    <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>Infrastructure & Tools</h2>
   </div>
 
-  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <a href="/node" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+    <a href="/node" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-start gap-4">
-        <IconLock className="h-6 w-6 text-neutral-800 dark:text-neutral-300 flex-shrink-0 mt-1" />
+        <IconLock className="h-5 w-5 text-neutral-500 flex-shrink-0 mt-0.5" />
         <div className="flex-1">
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Run a node</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-3">Participate in the Sei network by running:</p>
-          <div className="space-y-2">
-            <a href="/node/node-operators" className="text-xs flex items-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors">
-              <IconServer className="h-3.5 w-3.5 mr-1.5 flex-shrink-0" />
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Run a node</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 mb-2">Participate in the Sei network.</p>
+          <div className="flex flex-col gap-1">
+            <a href="/node/node-operators" className="flex items-center text-xs text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>
+              <IconServer className="h-3 w-3 mr-1.5 flex-shrink-0" />
               <span>Full Node</span>
             </a>
-            <a href="/node/validators" className="text-xs flex items-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors">
-              <IconLock className="h-3.5 w-3.5 mr-1.5 flex-shrink-0" />
+            <a href="/node/validators" className="flex items-center text-xs text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>
+              <IconLock className="h-3 w-3 mr-1.5 flex-shrink-0" />
               <span>Validator Node</span>
             </a>
           </div>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
-    <a href="/evm/solidity-resources" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
+    <a href="/evm/solidity-resources" className="group flex items-center justify-between p-5 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-[#131313] transition-colors">
       <div className="flex items-start gap-4">
-        <IconClipboardText className="h-6 w-6 text-neutral-800 dark:text-neutral-300 flex-shrink-0 mt-1" />
+        <IconClipboardText className="h-5 w-5 text-neutral-500 flex-shrink-0 mt-0.5" />
         <div className="flex-1">
-          <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Tools & Integrations</h3>
-          <p className="text-sm text-neutral-600 dark:text-neutral-400">Discover the ecosystem of tools and integrations.</p>
+          <h3 className="text-sm font-bold text-neutral-800 dark:text-neutral-100">Tools & Integrations</h3>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">Discover the ecosystem of tools and integrations.</p>
         </div>
       </div>
-      <IconChevronRight className="h-4 w-4 text-neutral-500" />
+      <IconChevronRight className="h-3.5 w-3.5 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
     </a>
 
   </div>
 </div>
 
-<div className="p-6 mb-10 rounded-xl bg-neutral-900/5 dark:bg-neutral-900/95 border border-neutral-200/50 dark:border-neutral-800 shadow-sm">
-  <div className="flex items-center mb-6">
-    <div className="mr-3 w-5 h-5 bg-gradient-to-br from-neutral-300 to-neutral-400 dark:from-neutral-800 dark:to-neutral-900 rounded-sm shadow-sm flex items-center justify-center">
-      <IconTerminal2 className="w-3 h-3 text-neutral-600 dark:text-white" />
+{/* ── Network Information ── */}
+
+<div className="pt-8 pb-4 border-t border-neutral-200 dark:border-[#333]">
+  <div className="p-6 border border-neutral-200 dark:border-[#333]" style={{ borderRadius: '2px' }}>
+    <div className="flex items-center gap-3 mb-6">
+      <div className="w-5 h-5 bg-neutral-800 dark:bg-neutral-200 flex items-center justify-center" style={{ borderRadius: '2px' }}>
+        <IconTerminal2 className="w-3 h-3 text-white dark:text-black" />
+      </div>
+      <h2 className="text-lg font-bold tracking-tight" style={{ letterSpacing: '-0.02em' }}>
+        Network Information
+      </h2>
     </div>
-    <h2 className="text-xl font-medium text-neutral-800 dark:text-white">Network Information</h2>
+    <NetworkTabs />
   </div>
-
-  <NetworkTabs />
 </div>
diff --git a/content/learn/accounts.mdx b/content/learn/accounts.mdx
index 0ce1c379..113f1027 100644
--- a/content/learn/accounts.mdx
+++ b/content/learn/accounts.mdx
@@ -80,7 +80,7 @@ Certain actions are **not possible** before wallets are associated:
         </tr>
         <tr>
           <td className="px-4 py-3 text-sm text-neutral-900 dark:text-neutral-100 whitespace-nowrap font-medium">2. Direct Private Key</td>
-          <td className="px-4 py-3 text-sm text-red-600 dark:text-red-400 whitespace-nowrap font-medium">High</td>
+          <td className="px-4 py-3 text-sm text-[#600014] dark:text-[#b99ba1] whitespace-nowrap font-medium">High</td>
           <td className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 whitespace-nowrap">Provide private key directly</td>
         </tr>
         <tr>
diff --git a/content/learn/general-governance.mdx b/content/learn/general-governance.mdx
index 96e9b5dc..3f5108c4 100644
--- a/content/learn/general-governance.mdx
+++ b/content/learn/general-governance.mdx
@@ -9,12 +9,12 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 <div className="flex flex-col gap-8">
 
 <div className="flex flex-col md:flex-row items-start gap-5">
-  <div className="w-16 h-16 rounded-lg bg-red-500/10 flex items-center justify-center shrink-0">
-    <IconGavel className="h-8 w-8 text-red-500" />
+  <div className="w-16 h-16 rounded-sm bg-[#600014]/10 flex items-center justify-center shrink-0">
+    <IconGavel className="h-8 w-8 text-[#600014]" />
   </div>
   <div>
     <h1 className="text-4xl font-bold text-neutral-800 dark:text-neutral-100 mb-1">Network Governance</h1>
-    <p className="text-red-700 dark:text-red-400 font-medium text-base">Decentralized Decision Making</p>
+    <p className="text-[#600014] dark:text-[#b99ba1] font-medium text-base">Decentralized Decision Making</p>
     <p className="mt-3 text-neutral-600 dark:text-neutral-300 text-base max-w-3xl">Sei employs an on-chain governance system that enables SEI holders to participate in the decision-making process for the network. This system is built on the Cosmos SDK governance module with several enhancements specific to Sei's architecture.</p>
   </div>
 </div>
@@ -23,7 +23,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 
   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
     
-    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-lg">
+    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-sm">
       <div className="flex items-center gap-3 mb-3">
         <span className="text-sm font-bold text-neutral-600 dark:text-neutral-400">1</span>
         <IconCoins className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
@@ -32,7 +32,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
       <p className="text-xs text-neutral-600 dark:text-neutral-300">Anyone can submit a governance proposal with an initial deposit</p>
     </div>
 
-    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-lg">
+    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-sm">
       <div className="flex items-center gap-3 mb-3">
         <span className="text-sm font-bold text-neutral-600 dark:text-neutral-400">2</span>
         <IconUsers className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
@@ -41,7 +41,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
       <p className="text-xs text-neutral-600 dark:text-neutral-300">Community members can contribute to the proposal deposit</p>
     </div>
 
-    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-lg">
+    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-sm">
       <div className="flex items-center gap-3 mb-3">
         <span className="text-sm font-bold text-neutral-600 dark:text-neutral-400">3</span>
         <IconNote className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
@@ -50,7 +50,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
       <p className="text-xs text-neutral-600 dark:text-neutral-300">Once minimum deposit is reached, voting begins</p>
     </div>
 
-    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-lg">
+    <div className="p-5 border border-neutral-200 dark:border-neutral-800 rounded-sm">
       <div className="flex items-center gap-3 mb-3">
         <span className="text-sm font-bold text-neutral-600 dark:text-neutral-400">4</span>
         <IconSettings className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
@@ -63,7 +63,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 
 ### Governance Logic
 
-  <div className="rounded-lg p-6 bg-neutral-50/50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800/40 shadow-sm mb-8">
+  <div className="rounded-sm p-6 bg-neutral-50/50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800/40 shadow-sm mb-8">
     <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
       
       <div className="flex flex-col gap-3">
@@ -100,7 +100,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 
     <div className="flex flex-col gap-6">
       <div className="flex flex-col md:flex-row items-start gap-4">
-        <div className="w-12 h-12 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
+        <div className="w-12 h-12 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
           <IconNetwork className="h-6 w-6 text-neutral-600 dark:text-neutral-400" />
         </div>
         <div>
@@ -110,7 +110,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
       </div>
 
       <div className="overflow-x-auto">
-        <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-lg">
+        <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-sm">
           <thead className="bg-neutral-50 dark:bg-neutral-900">
             <tr>
               <th className="text-left py-3 px-4 font-semibold text-neutral-800 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-800">Parameter</th>
@@ -176,7 +176,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 
     <div className="flex flex-col gap-6">
       <div className="flex flex-col md:flex-row items-start gap-4">
-        <div className="w-12 h-12 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
+        <div className="w-12 h-12 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
           <IconSettings className="h-6 w-6 text-neutral-600 dark:text-neutral-400" />
         </div>
         <div>
@@ -186,7 +186,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
       </div>
 
       <div className="overflow-x-auto">
-        <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-lg">
+        <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-sm">
           <thead className="bg-neutral-50 dark:bg-neutral-900">
             <tr>
               <th className="text-left py-3 px-4 font-semibold text-neutral-800 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-800">Parameter</th>
@@ -226,7 +226,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 
   <div className="mb-8">
     <div className="flex flex-col md:flex-row items-start gap-4 mb-6">
-      <div className="w-12 h-12 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
+      <div className="w-12 h-12 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
         <IconNote className="h-6 w-6 text-neutral-600 dark:text-neutral-400" />
       </div>
       <div>
@@ -249,7 +249,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
         <div className="flex items-start gap-3">
           <span className="text-sm font-bold text-neutral-600 dark:text-neutral-400 mt-1">2</span>
           <div>
-            <h4 className="font-semibold text-red-600 dark:text-red-600 mb-1">No</h4>
+            <h4 className="font-semibold text-[#600014] dark:text-[#600014] mb-1">No</h4>
             <p className="text-sm text-neutral-600 dark:text-neutral-300">Oppose the proposal. Counts against approval threshold.</p>
           </div>
         </div>
@@ -280,18 +280,18 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 ## Weighted Voting
 
 <div className="mb-8">
-  <div className="p-6 border border-neutral-200 dark:border-neutral-800 rounded-lg">
+  <div className="p-6 border border-neutral-200 dark:border-neutral-800 rounded-sm">
     <div className="flex items-center gap-3 mb-4">
       <IconDatabase className="h-5 w-5 text-neutral-500 dark:text-neutral-400" />
       <h3 className="text-lg font-semibold text-neutral-800 dark:text-neutral-200">Advanced Voting</h3>
     </div>
     <p className="text-sm text-neutral-600 dark:text-neutral-300 mb-4">Validators and delegators can split their voting power across multiple options using weighted voting.</p>
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <div className="p-4 border border-neutral-200 dark:border-neutral-800 rounded-lg">
+      <div className="p-4 border border-neutral-200 dark:border-neutral-800 rounded-sm">
         <h4 className="font-semibold text-neutral-800 dark:text-neutral-200 mb-2">Flexibility</h4>
         <p className="text-sm text-neutral-600 dark:text-neutral-300">Distribute voting power across different options based on preference strength.</p>
       </div>
-      <div className="p-4 border border-neutral-200 dark:border-neutral-800 rounded-lg">
+      <div className="p-4 border border-neutral-200 dark:border-neutral-800 rounded-sm">
         <h4 className="font-semibold text-neutral-800 dark:text-neutral-200 mb-2">Precision</h4>
         <p className="text-sm text-neutral-600 dark:text-neutral-300">Express nuanced positions on complex proposals with percentage allocations.</p>
       </div>
@@ -302,7 +302,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 ## Proposal Outcomes
 
 <div className="overflow-x-auto mb-8">
-  <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-lg">
+  <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-sm">
     <thead className="bg-neutral-50 dark:bg-neutral-900">
       <tr>
         <th className="text-left py-3 px-4 font-semibold text-neutral-800 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-800">Outcome</th>
@@ -321,7 +321,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
         </td>
       </tr>
       <tr className="border-b border-neutral-100 dark:border-neutral-800/50">
-        <td className="py-3 px-4 font-medium text-red-600 dark:text-red-600">Rejected</td>
+        <td className="py-3 px-4 font-medium text-[#600014] dark:text-[#600014]">Rejected</td>
         <td className="py-3 px-4 text-sm text-neutral-600 dark:text-neutral-300">
           <ul className="space-y-1">
             <li>• Quorum met but approval threshold not met</li>
@@ -330,7 +330,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
         </td>
       </tr>
       <tr className="border-b border-neutral-100 dark:border-neutral-800/50">
-        <td className="py-3 px-4 font-medium text-red-600 dark:text-red-600">Failed (No Quorum)</td>
+        <td className="py-3 px-4 font-medium text-[#600014] dark:text-[#600014]">Failed (No Quorum)</td>
         <td className="py-3 px-4 text-sm text-neutral-600 dark:text-neutral-300">
           <ul className="space-y-1">
             <li>• Less than 33.4% of bonded tokens participated</li>
@@ -355,7 +355,7 @@ import { IconGavel, IconUsers, IconClock, IconShield, IconTarget, IconChartLine,
 
   <div className="mb-8">
     <div className="flex flex-col md:flex-row items-start gap-4 mb-6">
-      <div className="w-12 h-12 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
+      <div className="w-12 h-12 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
         <IconUsers className="h-6 w-6 text-neutral-600 dark:text-neutral-400" />
       </div>
       <div>
diff --git a/content/learn/index.mdx b/content/learn/index.mdx
index 56cc0f21..8b39f3ab 100644
--- a/content/learn/index.mdx
+++ b/content/learn/index.mdx
@@ -9,85 +9,101 @@ updated: 2025-10-06
 
 import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, IconArrowRight, IconCoins, IconGasStation, IconUsersGroup, IconKey, IconGavel, IconClock, IconNetwork, IconWorldWww, IconServer, IconCpu, IconDatabase, IconChartLine, IconDeviceMobile, IconUsers } from '@tabler/icons-react';
 
-<div className="flex flex-col gap-12">
+<div className="flex flex-col">
 
-  <div className="flex flex-col gap-8 pt-8 border-t border-neutral-200 dark:border-neutral-800/50 px-1 md:px-0">
+  <div className="flex flex-col gap-8 pt-8 border-t border-neutral-200 dark:border-[#333] px-1 md:px-0">
     <div className="flex flex-col md:flex-row items-start gap-5">
-      <div className="w-16 h-16 rounded-lg bg-red-500/10 dark:bg-red-900/20 flex items-center justify-center shrink-0">
-         <IconServer className="h-8 w-8 text-red-500" />
+      <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-1" style={{ borderRadius: '2px' }}>
+         <IconServer className="h-3 w-3 text-white" />
       </div>
       <div>
-        <h1 className="text-4xl font-bold text-neutral-800 dark:text-neutral-100 mb-1">About Sei</h1>
-        <p className="text-red-700 dark:text-red-400 font-medium text-base">Performance-Optimized Ethereum Compatibility</p>
+        <h1 className="text-4xl font-bold text-neutral-800 dark:text-neutral-100 mb-1" style={{ letterSpacing: '-0.02em' }}>About Sei</h1>
+        <p className="text-[#600014] dark:text-[#b99ba1] font-medium text-base">Performance-Optimized Ethereum Compatibility</p>
         <p className="mt-3 text-neutral-600 dark:text-neutral-300 text-base max-w-3xl">
           Sei's EVM implementation addresses traditional performance constraints through three key subsystems that work together to deliver unparalleled speed while maintaining full compatibility with the Ethereum ecosystem.
         </p>
       </div>
     </div>
-    
-    <div className="rounded-lg p-6 bg-neutral-50/50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800/40 shadow-sm">
-      <h2 className="text-2xl font-bold mb-6 text-neutral-800 dark:text-neutral-100">Understand the Sei Ecosystem</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-8">
 
-        <div className="flex flex-col gap-5">
-          <h3 className="text-xl font-semibold pb-1 text-neutral-700 dark:text-neutral-300">Fundamentals</h3>
+    <div className="border-t border-neutral-200 dark:border-[#333] pt-8">
+      <h2 className="text-lg font-bold tracking-tight text-neutral-800 dark:text-neutral-100 mb-6" style={{ letterSpacing: '-0.02em' }}>Understand the Sei Ecosystem</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]">
+
+        <div className="flex flex-col gap-5 bg-white dark:bg-black p-6">
+          <h3 className="text-neutral-500 dark:text-neutral-400" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>Fundamentals</h3>
           <a href="/learn/accounts" className="flex items-start gap-3 group">
-             <IconKey className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconKey className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Account System</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Account System</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Understand native & EVM addresses, keys, and account abstraction.</p>
              </div>
            </a>
            <a href="/learn/dev-token-standards" className="flex items-start gap-3 group">
-             <IconCoins className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconCoins className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Token Standards</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Token Standards</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Discover ERC20, ERC721, and native Sei token capabilities.</p>
              </div>
            </a>
            <a href="/learn/dev-gas" className="flex items-start gap-3 group">
-             <IconGasStation className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconGasStation className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Gas & Fees</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Gas & Fees</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Learn how transaction costs are calculated and paid on Sei.</p>
              </div>
            </a>
            <a href="/learn/wallets" className="flex items-start gap-3 group">
-             <IconWallet className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconWallet className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Wallets</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Wallets</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Explore supported wallets and integration options for Sei.</p>
              </div>
            </a>
         </div>
 
-         <div className="flex flex-col gap-5">
-          <h3 className="text-xl font-semibold pb-1 text-neutral-700 dark:text-neutral-300">Network</h3>
+         <div className="flex flex-col gap-5 bg-white dark:bg-black p-6">
+          <h3 className="text-neutral-500 dark:text-neutral-400" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>Network</h3>
           <a href="/learn/general-staking" className="flex items-start gap-3 group">
-             <IconUsersGroup className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconUsersGroup className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Staking & Delegation</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Staking & Delegation</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Secure the network and earn rewards by participating in staking.</p>
              </div>
            </a>
             <a href="/learn/general-governance" className="flex items-start gap-3 group">
-             <IconGavel className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconGavel className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Network Governance</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Network Governance</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Understand the on-chain proposal and voting process for upgrades.</p>
              </div>
            </a>
            <a href="/learn/dev-chains" className="flex items-start gap-3 group">
-             <IconNetwork className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconNetwork className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Chains</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Chains</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Connect to Sei mainnet, testnet, and development environments.</p>
              </div>
            </a>
            <a href="/learn/explorers" className="flex items-start gap-3 group">
-             <IconWorldWww className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+               <IconWorldWww className="h-3 w-3 text-white" />
+             </div>
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Block Explorers</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Block Explorers</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Track transactions, blocks, and contract activity on Sei.</p>
              </div>
            </a>
@@ -96,99 +112,109 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
       </div>
     </div>
 
-    <div className="my-8 p-6 md:p-8 rounded-2xl bg-gradient-to-br from-purple-500/5 via-blue-500/5 to-red-500/5 dark:from-purple-900/20 dark:via-blue-900/10 dark:to-red-900/20 border border-purple-200/30 dark:border-purple-800/30 relative overflow-hidden">
-      <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-purple-500/10 to-blue-500/10 rounded-full blur-3xl transform translate-x-32 -translate-y-32"></div>
-      <div className="relative">
-        <div className="flex flex-col md:flex-row items-start gap-5 mb-6">
-          <div className="w-16 h-16 rounded-lg bg-gradient-to-br from-purple-500/20 to-blue-500/20 flex items-center justify-center shrink-0">
-            <IconRocket className="h-8 w-8 text-purple-600 dark:text-purple-400" />
-          </div>
-          <div className="flex-1">
-            <div className="flex items-center gap-3 mb-2">
-              <h2 className="text-2xl font-bold text-neutral-800 dark:text-neutral-100">MCP Server: AI-Powered Blockchain</h2>
-            </div>
-            <p className="text-purple-700 dark:text-purple-400 font-medium text-base mb-3">Enable AI assistants to interact with Sei through natural language</p>
-            <p className="text-neutral-600 dark:text-neutral-300 text-base max-w-3xl">
-              The Sei Model Context Protocol (MCP) Server brings blockchain functionality directly to AI assistants like Claude, ChatGPT,  and Cursor. Execute transactions, query data, and build on Sei using conversational AI.
-            </p>
+    <div className="border-t border-neutral-200 dark:border-[#333] pt-8">
+      <div className="flex flex-col gap-5 mb-6">
+        <div className="flex items-center gap-3">
+          <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+            <IconRocket className="h-3 w-3 text-white" />
           </div>
+          <h2 className="text-lg font-bold tracking-tight text-neutral-800 dark:text-neutral-100" style={{ letterSpacing: '-0.02em' }}>MCP Server: AI-Powered Blockchain</h2>
         </div>
+        <p className="text-[#600014] dark:text-[#b99ba1] font-medium text-base">Enable AI assistants to interact with Sei through natural language</p>
+        <p className="text-neutral-600 dark:text-neutral-300 text-base max-w-3xl">
+          The Sei Model Context Protocol (MCP) Server brings blockchain functionality directly to AI assistants like Claude, ChatGPT, and Cursor. Execute transactions, query data, and build on Sei using conversational AI.
+        </p>
+      </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-          <div className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg p-4 border border-purple-200/50 dark:border-purple-700/30">
-            <div className="flex items-center gap-3 mb-2">
-              <IconWallet className="h-5 w-5 text-purple-500" />
-              <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Wallet Integration</h4>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333] mb-6">
+        <div className="bg-white dark:bg-black p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+              <IconWallet className="h-3 w-3 text-white" />
             </div>
-            <p className="text-sm text-neutral-600 dark:text-neutral-400">Check balances, transfer tokens, and manage accounts through AI</p>
+            <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Wallet Integration</h4>
           </div>
+          <p className="text-sm text-neutral-600 dark:text-neutral-400">Check balances, transfer tokens, and manage accounts through AI</p>
+        </div>
 
-          <div className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg p-4 border border-purple-200/50 dark:border-purple-700/30">
-            <div className="flex items-center gap-3 mb-2">
-              <IconHexagons className="h-5 w-5 text-purple-500" />
-              <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Smart Contracts</h4>
+        <div className="bg-white dark:bg-black p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+              <IconHexagons className="h-3 w-3 text-white" />
             </div>
-            <p className="text-sm text-neutral-600 dark:text-neutral-400">Read and write contract state with natural language commands</p>
+            <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Smart Contracts</h4>
           </div>
+          <p className="text-sm text-neutral-600 dark:text-neutral-400">Read and write contract state with natural language commands</p>
+        </div>
 
-          <div className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg p-4 border border-purple-200/50 dark:border-purple-700/30">
-            <div className="flex items-center gap-3 mb-2">
-              <IconDatabase className="h-5 w-5 text-purple-500" />
-              <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Blockchain Data</h4>
+        <div className="bg-white dark:bg-black p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+              <IconDatabase className="h-3 w-3 text-white" />
             </div>
-            <p className="text-sm text-neutral-600 dark:text-neutral-400">Query blocks, transactions, and network state instantly</p>
+            <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Blockchain Data</h4>
           </div>
+          <p className="text-sm text-neutral-600 dark:text-neutral-400">Query blocks, transactions, and network state instantly</p>
+        </div>
 
-          <div className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg p-4 border border-purple-200/50 dark:border-purple-700/30">
-            <div className="flex items-center gap-3 mb-2">
-              <IconCoins className="h-5 w-5 text-purple-500" />
-              <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Token Operations</h4>
+        <div className="bg-white dark:bg-black p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+              <IconCoins className="h-3 w-3 text-white" />
             </div>
-            <p className="text-sm text-neutral-600 dark:text-neutral-400">Transfer SEI, ERC20, NFTs, and multi-tokens seamlessly</p>
+            <h4 className="font-semibold text-neutral-800 dark:text-neutral-200">Token Operations</h4>
           </div>
+          <p className="text-sm text-neutral-600 dark:text-neutral-400">Transfer SEI, ERC20, NFTs, and multi-tokens seamlessly</p>
         </div>
+      </div>
 
-        <div className="flex flex-col sm:flex-row gap-4">
-          <a href="evm/ai-tooling/mcp-server" className="inline-flex items-center justify-center px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors">
-            <span>Get Started with MCP</span>
-            <IconArrowRight className="h-4 w-4 ml-2" />
-          </a>
-          <a href="https://github.com/sei-protocol/sei-mcp-server" className="inline-flex items-center justify-center px-6 py-3 bg-white/80 dark:bg-neutral-800/80 hover:bg-white dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 font-medium rounded-lg border border-neutral-300 dark:border-neutral-700 transition-colors">
-            <svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-            </svg>
-            <span>View on GitHub</span>
-          </a>
-        </div>
+      <div className="flex flex-col sm:flex-row gap-4">
+        <a href="evm/ai-tooling/mcp-server" className="inline-flex items-center justify-center px-6 py-3 bg-[#600014] hover:bg-[#4a0010] text-white font-medium transition-colors" style={{ borderRadius: '2px' }}>
+          <span>Get Started with MCP</span>
+          <IconArrowRight className="h-4 w-4 ml-2" />
+        </a>
+        <a href="https://github.com/sei-protocol/sei-mcp-server" className="inline-flex items-center justify-center px-6 py-3 bg-white dark:bg-black hover:bg-neutral-50 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-300 font-medium border border-neutral-200 dark:border-[#333] transition-colors" style={{ borderRadius: '2px' }}>
+          <svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          <span>View on GitHub</span>
+        </a>
       </div>
     </div>
 
-    <h2 className="text-2xl font-bold text-neutral-800 dark:text-neutral-100 pt-8 border-t border-neutral-200 dark:border-neutral-800/50">Sei EVM Platform Details</h2>
+    <div className="border-t border-neutral-200 dark:border-[#333] pt-8">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+          <IconServer className="h-3 w-3 text-white" />
+        </div>
+        <h2 className="text-lg font-bold tracking-tight text-neutral-800 dark:text-neutral-100" style={{ letterSpacing: '-0.02em' }}>Sei EVM Platform Details</h2>
+      </div>
+    </div>
 
-    <div className="pt-6">
-      <h3 className="text-xl font-semibold text-red-700 dark:text-red-400 mb-4 px-1">Traditional EVM Constraints Solved by Sei</h3>
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5 px-1">
-        <div className="flex items-start gap-3 p-1">
-          <div className="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center mr-1 flex-shrink-0 mt-0.5">
-            <IconClock className="h-4 w-4 text-red-500" />
+    <div>
+      <h3 className="text-neutral-500 dark:text-neutral-400 mb-4 px-1" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>Traditional EVM Constraints Solved by Sei</h3>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]">
+        <div className="flex items-start gap-3 p-4 bg-white dark:bg-black">
+          <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+            <IconClock className="h-3 w-3 text-white" />
           </div>
           <div>
             <h4 className="text-base font-semibold text-neutral-800 dark:text-neutral-100 mb-1">Block Time Limitations</h4>
             <p className="text-sm text-neutral-600 dark:text-neutral-400">Replaces ~15s block times with sub-second finality.</p>
           </div>
         </div>
-        <div className="flex items-start gap-3 p-1">
-          <div className="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center mr-1 flex-shrink-0 mt-0.5">
-            <IconCpu className="h-4 w-4 text-red-500" />
+        <div className="flex items-start gap-3 p-4 bg-white dark:bg-black">
+          <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+            <IconCpu className="h-3 w-3 text-white" />
           </div>
           <div>
             <h4 className="text-base font-semibold text-neutral-800 dark:text-neutral-100 mb-1">Sequential Processing</h4>
             <p className="text-sm text-neutral-600 dark:text-neutral-400">Eliminates single-threaded bottlenecks via parallelization.</p>
           </div>
         </div>
-        <div className="flex items-start gap-3 p-1">
-          <div className="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center mr-1 flex-shrink-0 mt-0.5">
-            <IconDatabase className="h-4 w-4 text-red-500" />
+        <div className="flex items-start gap-3 p-4 bg-white dark:bg-black">
+          <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+            <IconDatabase className="h-3 w-3 text-white" />
           </div>
           <div>
             <h4 className="text-base font-semibold text-neutral-800 dark:text-neutral-100 mb-1">Inefficient State Access</h4>
@@ -198,19 +224,18 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
       </div>
     </div>
 
-    <div className="w-full border border-neutral-200 dark:border-neutral-800/50 rounded-xl bg-gradient-to-br from-neutral-50/70 via-white to-neutral-50/70 dark:from-neutral-900/70 dark:via-neutral-900/30 dark:to-neutral-900/70 p-8 my-8">
-      <div className="text-center font-bold mb-6 text-neutral-900 dark:text-neutral-100 text-2xl">Core System Architecture</div>
+    <div className="border-t border-neutral-200 dark:border-[#333] pt-8">
+      <div className="text-center font-bold mb-6 text-neutral-900 dark:text-neutral-100 text-lg tracking-tight" style={{ letterSpacing: '-0.02em' }}>Core System Architecture</div>
 
       <div className="max-w-4xl mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
-          <a href="/learn/twin-turbo-consensus" className="border-2 border-neutral-200/80 dark:border-neutral-700/50 rounded-xl bg-neutral-50 dark:bg-neutral-900/70 shadow-md hover:shadow-lg hover:border-red-300/60 dark:hover:border-red-700/30 transition-all group no-underline overflow-hidden transform hover:-translate-y-1">
-            <div className="bg-gradient-to-r from-neutral-800 via-neutral-700 to-neutral-800 dark:from-neutral-800 dark:via-neutral-700 dark:to-neutral-800 p-4 border-b border-neutral-200/50 dark:border-neutral-700/40 relative overflow-hidden">
-              <div className="absolute inset-0 bg-gradient-to-r from-red-500/25 to-red-600/25 dark:from-red-800/25 dark:to-red-900/25 opacity-90 group-hover:opacity-100 transition-opacity"></div>
-              <div className="relative flex items-center">
-                <div className="w-10 h-10 rounded-full bg-red-100/30 dark:bg-red-900/30 flex items-center justify-center mr-3 shrink-0">
-                  <IconClock className="h-5 w-5 text-red-50 dark:text-red-50" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333] mb-12">
+          <a href="/learn/twin-turbo-consensus" className="bg-white dark:bg-black group no-underline overflow-hidden transition-colors">
+            <div className="bg-black p-4">
+              <div className="flex items-center">
+                <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mr-3 shrink-0" style={{ borderRadius: '2px' }}>
+                  <IconClock className="h-3 w-3 text-white" />
                 </div>
-                <h4 className="font-bold text-white text-base">TWIN TURBO CONSENSUS</h4>
+                <h4 className="font-bold text-white text-sm" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>Twin Turbo Consensus</h4>
                 <IconArrowRight className="h-4 w-4 ml-auto text-white/70 opacity-0 group-hover:opacity-100 transition-opacity" />
               </div>
             </div>
@@ -220,14 +245,13 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
             </div>
           </a>
 
-          <a href="/learn/parallelization-engine" className="border-2 border-neutral-200/80 dark:border-neutral-700/50 rounded-xl bg-neutral-50 dark:bg-neutral-900/70 shadow-md hover:shadow-lg hover:border-red-300/60 dark:hover:border-red-700/30 transition-all group no-underline overflow-hidden transform hover:-translate-y-1">
-            <div className="bg-gradient-to-r from-neutral-800 via-neutral-700 to-neutral-800 dark:from-neutral-800 dark:via-neutral-700 dark:to-neutral-800 p-4 border-b border-neutral-200/50 dark:border-neutral-700/40 relative overflow-hidden">
-              <div className="absolute inset-0 bg-gradient-to-r from-red-500/25 to-red-600/25 dark:from-red-800/25 dark:to-red-900/25 opacity-90 group-hover:opacity-100 transition-opacity"></div>
-              <div className="relative flex items-center">
-                <div className="w-10 h-10 rounded-full bg-red-100/30 dark:bg-red-900/30 flex items-center justify-center mr-3 shrink-0">
-                  <IconCpu className="h-5 w-5 text-red-50 dark:text-red-50" />
+          <a href="/learn/parallelization-engine" className="bg-white dark:bg-black group no-underline overflow-hidden transition-colors">
+            <div className="bg-black p-4">
+              <div className="flex items-center">
+                <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mr-3 shrink-0" style={{ borderRadius: '2px' }}>
+                  <IconCpu className="h-3 w-3 text-white" />
                 </div>
-                <h4 className="font-bold text-white text-base">PARALLELIZATION ENGINE</h4>
+                <h4 className="font-bold text-white text-sm" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>Parallelization Engine</h4>
                 <IconArrowRight className="h-4 w-4 ml-auto text-white/70 opacity-0 group-hover:opacity-100 transition-opacity" />
               </div>
             </div>
@@ -237,14 +261,13 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
             </div>
           </a>
 
-          <a href="/learn/seidb" className="border-2 border-neutral-200/80 dark:border-neutral-700/50 rounded-xl bg-neutral-50 dark:bg-neutral-900/70 shadow-md hover:shadow-lg hover:border-red-300/60 dark:hover:border-red-700/30 transition-all group no-underline overflow-hidden transform hover:-translate-y-1">
-            <div className="bg-gradient-to-r from-neutral-800 via-neutral-700 to-neutral-800 dark:from-neutral-800 dark:via-neutral-700 dark:to-neutral-800 p-4 border-b border-neutral-200/50 dark:border-neutral-700/40 relative overflow-hidden">
-              <div className="absolute inset-0 bg-gradient-to-r from-red-500/25 to-red-600/25 dark:from-red-800/25 dark:to-red-900/25 opacity-90 group-hover:opacity-100 transition-opacity"></div>
-              <div className="relative flex items-center">
-                <div className="w-10 h-10 rounded-full bg-red-100/30 dark:bg-red-900/30 flex items-center justify-center mr-3 shrink-0">
-                  <IconDatabase className="h-5 w-5 text-red-50 dark:text-red-50" />
+          <a href="/learn/seidb" className="bg-white dark:bg-black group no-underline overflow-hidden transition-colors">
+            <div className="bg-black p-4">
+              <div className="flex items-center">
+                <div className="w-5 h-5 bg-[#600014] flex items-center justify-center mr-3 shrink-0" style={{ borderRadius: '2px' }}>
+                  <IconDatabase className="h-3 w-3 text-white" />
                 </div>
-                <h4 className="font-bold text-white text-base">SeiDB</h4>
+                <h4 className="font-bold text-white text-sm" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>SeiDB</h4>
                 <IconArrowRight className="h-4 w-4 ml-auto text-white/70 opacity-0 group-hover:opacity-100 transition-opacity" />
               </div>
             </div>
@@ -256,23 +279,23 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
         </div>
 
         <div className="relative mb-8">
-          <div className="absolute left-0 right-0 top-1/2 transform -translate-y-1/2 h-px bg-gradient-to-r from-transparent via-neutral-300 dark:via-neutral-700 to-transparent"></div>
+          <div className="absolute left-0 right-0 top-1/2 transform -translate-y-1/2 h-px bg-neutral-300 dark:bg-[#333]"></div>
           <div className="flex justify-center">
-            <div className="bg-neutral-50 dark:!bg-neutral-900/70 px-8 py-2 rounded-full border border-neutral-200 dark:border-neutral-700 text-sm font-semibold text-neutral-700 dark:text-neutral-300 z-10 shadow-sm">
+            <div className="bg-white dark:bg-black px-8 py-2 border border-neutral-200 dark:border-[#333] text-neutral-700 dark:text-neutral-300 z-10" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px', borderRadius: '2px' }}>
               Performance Advantages
             </div>
           </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div className="bg-neutral-50 dark:bg-neutral-900/70 border border-neutral-200 dark:border-neutral-800 rounded-xl p-5 shadow-md">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]">
+          <div className="bg-white dark:bg-black p-5">
             <div className="flex items-center mb-4 gap-3">
-              <div className="w-8 h-8 rounded-full bg-red-100/80 dark:bg-red-900/20 flex items-center justify-center shrink-0">
-                <svg className="w-4 h-4 text-red-500 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+                <svg className="w-3 h-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                 </svg>
               </div>
-              <h5 className="font-bold text-neutral-800 dark:text-neutral-200 text-sm">HIGH THROUGHPUT</h5>
+              <h5 className="font-bold text-neutral-800 dark:text-neutral-200" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>High Throughput</h5>
             </div>
             <ul className="text-xs text-neutral-600 dark:text-neutral-400 pl-6 list-disc space-y-1.5">
               <li>100 MGas/s capacity</li>
@@ -281,14 +304,14 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
             </ul>
           </div>
 
-          <div className="bg-neutral-50 dark:bg-neutral-900/70 border border-neutral-200 dark:border-neutral-800 rounded-xl p-5 shadow-md">
+          <div className="bg-white dark:bg-black p-5">
             <div className="flex items-center mb-4 gap-3">
-              <div className="w-8 h-8 rounded-full bg-red-100/80 dark:bg-red-900/20 flex items-center justify-center shrink-0">
-                <svg className="w-4 h-4 text-red-500 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+                <svg className="w-3 h-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                 </svg>
               </div>
-              <h5 className="font-bold text-neutral-800 dark:text-neutral-200 text-sm">LINEAR SCALING</h5>
+              <h5 className="font-bold text-neutral-800 dark:text-neutral-200" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>Linear Scaling</h5>
             </div>
             <ul className="text-xs text-neutral-600 dark:text-neutral-400 pl-6 list-disc space-y-1.5">
               <li>Multi-core utilization</li>
@@ -297,14 +320,14 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
             </ul>
           </div>
 
-          <div className="bg-neutral-50 dark:bg-neutral-900/70 border border-neutral-200 dark:border-neutral-800 rounded-xl p-5 shadow-md">
+          <div className="bg-white dark:bg-black p-5">
             <div className="flex items-center mb-4 gap-3">
-              <div className="w-8 h-8 rounded-full bg-red-100/80 dark:bg-red-900/20 flex items-center justify-center shrink-0">
-                <svg className="w-4 h-4 text-red-500 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+                <svg className="w-3 h-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                 </svg>
               </div>
-              <h5 className="font-bold text-neutral-800 dark:text-neutral-200 text-sm">EVM COMPATIBILITY</h5>
+              <h5 className="font-bold text-neutral-800 dark:text-neutral-200" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>EVM Compatibility</h5>
             </div>
             <ul className="text-xs text-neutral-600 dark:text-neutral-400 pl-6 list-disc space-y-1.5">
               <li>100% Ethereum-compatible</li>
@@ -318,69 +341,83 @@ import { IconHexagons, IconArrowsShuffle, IconBolt, IconWallet, IconRocket, Icon
 
   </div>
 
-<div className="flex flex-col gap-6 pt-8 border-t border-neutral-200 dark:border-neutral-800/50 px-1 md:px-0">
-  <div className="p-6 md:p-8 bg-gradient-to-br from-red-500/5 via-neutral-500/5 to-neutral-900/5 dark:from-red-900/20 dark:via-neutral-900/10 dark:to-neutral-900/20 border-y border-red-200/30 dark:border-red-800/30 flex flex-col gap-6">
+<div className="flex flex-col gap-6 pt-8 border-t border-neutral-200 dark:border-[#333] px-1 md:px-0">
+  <div className="flex flex-col gap-6">
     <div className="flex flex-col md:flex-row items-start md:items-center gap-5">
-      <div className="w-16 h-16 rounded-lg bg-red-500/10 dark:bg-red-900/20 flex items-center justify-center mr-4 shrink-0">
-        <IconHexagons className="h-8 w-8 text-red-500" />
+      <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0" style={{ borderRadius: '2px' }}>
+        <IconHexagons className="h-3 w-3 text-white" />
       </div>
       <div>
-        <h2 className="text-2xl font-bold text-neutral-800 dark:text-neutral-100 mb-1">Sei Giga: Next-Generation Architecture</h2>
-        <p className="text-red-700 dark:text-red-400 font-medium text-base">Engineered for Maximum Throughput & Efficiency</p>
+        <h2 className="text-lg font-bold tracking-tight text-neutral-800 dark:text-neutral-100 mb-1" style={{ letterSpacing: '-0.02em' }}>
+          Sei Giga: Next-Generation Architecture
+        </h2>
+        <p className="text-[#600014] dark:text-[#b99ba1] font-medium text-base">Engineered for Maximum Throughput & Efficiency</p>
       </div>
     </div>
     <p className="text-neutral-600 dark:text-neutral-300 text-base max-w-3xl">Sei Giga represents a leap forward in blockchain performance. It combines cutting-edge consensus with novel execution strategies to deliver sub-second finality and massive scalability.</p>
-    <div className="grid grid-cols-1 sm:grid-cols-3 gap-x-6 gap-y-6 pt-6 border-t border-neutral-200/80 dark:border-neutral-800/50">
-      <div className="flex items-start gap-3">
-        <IconBolt className="h-5 w-5 text-red-500 mt-0.5 shrink-0" />
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]">
+      <div className="flex items-start gap-3 bg-white dark:bg-black p-4">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+          <IconBolt className="h-3 w-3 text-white" />
+        </div>
         <div>
           <h4 className="font-semibold text-base text-neutral-800 dark:text-neutral-200 mb-0.5">Autobahn Consensus</h4>
           <p className="text-sm text-neutral-500 dark:text-neutral-400">High-speed BFT consensus for sub-second finality.</p>
         </div>
       </div>
-      <div className="flex items-start gap-3">
-        <IconClock className="h-5 w-5 text-red-500 mt-0.5 shrink-0" />
+      <div className="flex items-start gap-3 bg-white dark:bg-black p-4">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+          <IconClock className="h-3 w-3 text-white" />
+        </div>
         <div>
           <h4 className="font-semibold text-base text-neutral-800 dark:text-neutral-200 mb-0.5">Async Execution</h4>
           <p className="text-sm text-neutral-500 dark:text-neutral-400">Decouples execution to unblock consensus.</p>
         </div>
       </div>
-      <div className="flex items-start gap-3">
-        <IconArrowsShuffle className="h-5 w-5 text-red-500 mt-0.5 shrink-0" />
+      <div className="flex items-start gap-3 bg-white dark:bg-black p-4">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+          <IconArrowsShuffle className="h-3 w-3 text-white" />
+        </div>
         <div>
           <h4 className="font-semibold text-base text-neutral-800 dark:text-neutral-200 mb-0.5">Parallel Processing</h4>
           <p className="text-sm text-neutral-500 dark:text-neutral-400">Optimistic concurrency for max throughput.</p>
         </div>
       </div>
     </div>
-    <a href="/learn/sei-giga" className="inline-flex items-center text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 font-medium transition-colors mt-2 w-fit">
+    <a href="/learn/sei-giga" className="inline-flex items-center text-[#600014] dark:text-[#b99ba1] hover:text-[#4a0010] dark:hover:text-white font-medium transition-colors mt-2 w-fit">
       <span>Deep Dive into Sei Giga</span>
       <IconArrowRight className="h-4 w-4 ml-1.5" />
     </a>
   </div>
 </div>
 
-  <div className="mt-4 pt-6 border-t border-neutral-200 dark:border-neutral-800/50">
-    <h3 className="text-xl font-semibold text-neutral-800 dark:text-neutral-100 mb-4 px-1">Key Use Cases</h3>
-    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 px-1">
-      <div className="flex items-start gap-3">
-        <IconChartLine className="h-5 w-5 text-red-500 mt-0.5 shrink-0" />
+  <div className="pt-8 border-t border-neutral-200 dark:border-[#333]">
+    <h3 className="text-neutral-500 dark:text-neutral-400 mb-4 px-1" style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', fontSize: '10px' }}>Key Use Cases</h3>
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-neutral-200 dark:bg-[#333] border border-neutral-200 dark:border-[#333]">
+      <div className="flex items-start gap-3 bg-white dark:bg-black p-4">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+          <IconChartLine className="h-3 w-3 text-white" />
+        </div>
         <div>
-          <h4 className="font-semibold text-red-700 dark:text-red-400 mb-1">High-Frequency Trading</h4>
+          <h4 className="font-semibold text-[#600014] dark:text-[#b99ba1] mb-1">High-Frequency Trading</h4>
           <p className="text-neutral-600 dark:text-neutral-400 text-sm">Fast settlement, low-latency, and on-chain order books.</p>
         </div>
       </div>
-      <div className="flex items-start gap-3">
-        <IconDeviceMobile className="h-5 w-5 text-red-500 mt-0.5 shrink-0" />
+      <div className="flex items-start gap-3 bg-white dark:bg-black p-4">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+          <IconDeviceMobile className="h-3 w-3 text-white" />
+        </div>
         <div>
-          <h4 className="font-semibold text-red-700 dark:text-red-400 mb-1">Interactive Applications</h4>
+          <h4 className="font-semibold text-[#600014] dark:text-[#b99ba1] mb-1">Interactive Applications</h4>
           <p className="text-neutral-600 dark:text-neutral-400 text-sm">Responsive interfaces with reduced confirmation times.</p>
         </div>
       </div>
-      <div className="flex items-start gap-3">
-        <IconUsers className="h-5 w-5 text-red-500 mt-0.5 shrink-0" />
+      <div className="flex items-start gap-3 bg-white dark:bg-black p-4">
+        <div className="w-5 h-5 bg-[#600014] flex items-center justify-center shrink-0 mt-0.5" style={{ borderRadius: '2px' }}>
+          <IconUsers className="h-3 w-3 text-white" />
+        </div>
         <div>
-          <h4 className="font-semibold text-red-700 dark:text-red-400 mb-1">Content & Social Platforms</h4>
+          <h4 className="font-semibold text-[#600014] dark:text-[#b99ba1] mb-1">Content & Social Platforms</h4>
           <p className="text-neutral-600 dark:text-neutral-400 text-sm">Efficient interaction for high-volume applications.</p>
         </div>
       </div>
diff --git a/content/learn/indexers.mdx b/content/learn/indexers.mdx
index e1c1f89d..61bb1e42 100644
--- a/content/learn/indexers.mdx
+++ b/content/learn/indexers.mdx
@@ -16,12 +16,12 @@ import { IconDatabase, IconBolt, IconInfoCircle, IconRocket } from '@tabler/icon
 
   <div className="flex flex-col gap-8 pt-8 border-t border-neutral-200 dark:border-neutral-800/50 px-1 md:px-0">
     <div className="flex flex-col md:flex-row items-start gap-5">
-      <div className="w-16 h-16 rounded-lg bg-red-500/10 flex items-center justify-center shrink-0">
-         <IconDatabase className="h-8 w-8 text-red-500" />
+      <div className="w-16 h-16 rounded-sm bg-[#600014]/10 flex items-center justify-center shrink-0">
+         <IconDatabase className="h-8 w-8 text-[#600014]" />
       </div>
       <div>
         <h1 className="text-4xl font-bold text-neutral-800 dark:text-neutral-100 mb-1">Blockchain Indexers</h1>
-        <p className="text-red-700 dark:text-red-400 font-medium text-base">Query Sei Data at Scale</p>
+        <p className="text-[#600014] dark:text-[#b99ba1] font-medium text-base">Query Sei Data at Scale</p>
         <div className="mt-3 text-neutral-600 dark:text-neutral-300 text-base max-w-3xl">
           Indexers collect and organize blockchain data, making it easily queryable for applications. They provide structured APIs, real-time updates, and significantly better performance than querying nodes directly.
         </div>
@@ -31,9 +31,9 @@ import { IconDatabase, IconBolt, IconInfoCircle, IconRocket } from '@tabler/icon
     <div className="my-12">
       <h2 className="text-2xl font-bold mb-8 text-neutral-800 dark:text-neutral-100">Why Use Indexers?</h2>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        
+
         <div className="flex flex-col items-start gap-4">
-          <div className="w-12 h-12 rounded-xl bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+          <div className="w-12 h-12 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
             <IconBolt className="h-6 w-6 text-neutral-500 dark:text-neutral-400" />
           </div>
           <div>
@@ -43,7 +43,7 @@ import { IconDatabase, IconBolt, IconInfoCircle, IconRocket } from '@tabler/icon
         </div>
 
         <div className="flex flex-col items-start gap-4">
-          <div className="w-12 h-12 rounded-xl bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+          <div className="w-12 h-12 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
             <IconDatabase className="h-6 w-6 text-neutral-500 dark:text-neutral-400" />
           </div>
           <div>
@@ -53,7 +53,7 @@ import { IconDatabase, IconBolt, IconInfoCircle, IconRocket } from '@tabler/icon
         </div>
 
         <div className="flex flex-col items-start gap-4">
-          <div className="w-12 h-12 rounded-xl bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+          <div className="w-12 h-12 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
             <IconRocket className="h-6 w-6 text-neutral-500 dark:text-neutral-400" />
           </div>
           <div>
@@ -68,7 +68,7 @@ import { IconDatabase, IconBolt, IconInfoCircle, IconRocket } from '@tabler/icon
     <div className="my-16">
       <div className="flex flex-col lg:flex-row items-start gap-8 mb-12">
         <div className="flex-shrink-0">
-          <div className="w-20 h-20 rounded-2xl bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+          <div className="w-20 h-20 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
             <IconDatabase className="h-10 w-10 text-neutral-500 dark:text-neutral-400" />
           </div>
         </div>
@@ -102,15 +102,15 @@ import { IconDatabase, IconBolt, IconInfoCircle, IconRocket } from '@tabler/icon
         </div>
         <div className="mt-6 max-w-2xl mx-auto text-center">
           <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
-            Projects listed here are developed by the Sei community. Inclusion on this site does not constitute endorsement. 
+            Projects listed here are developed by the Sei community. Inclusion on this site does not constitute endorsement.
             For questions related to each, please contact the project directly.
           </p>
         </div>
       </div>
-      
+
       <div className="grid md:grid-cols-2 gap-6 mt-10">
         <div className="flex items-start gap-4">
-          <div className="w-10 h-10 rounded-xl bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+          <div className="w-10 h-10 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
             <IconBolt className="h-5 w-5 text-neutral-500 dark:text-neutral-400" />
           </div>
           <div>
@@ -120,9 +120,9 @@ import { IconDatabase, IconBolt, IconInfoCircle, IconRocket } from '@tabler/icon
             </p>
           </div>
         </div>
-        
+
         <div className="flex items-start gap-4">
-          <div className="w-10 h-10 rounded-xl bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+          <div className="w-10 h-10 rounded-sm bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
             <IconInfoCircle className="h-5 w-5 text-neutral-500 dark:text-neutral-400" />
           </div>
           <div>
diff --git a/content/learn/parallelization-engine.mdx b/content/learn/parallelization-engine.mdx
index 87071b4f..2390fa15 100644
--- a/content/learn/parallelization-engine.mdx
+++ b/content/learn/parallelization-engine.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Sei Parallelization Engine: Multi-core Blockchain Execution"
+title: 'Sei Parallelization Engine: Multi-core Blockchain Execution'
 description: "Learn how Sei's Parallelization Engine enables simultaneous transaction processing across multiple CPU cores, delivering higher throughput while maintaining safety and consistency guarantees."
-keywords: ["parallelization engine", "multi-core processing", "blockchain concurrency", "transaction throughput", "optimistic execution", "dai algorithm"]
+keywords: ['parallelization engine', 'multi-core processing', 'blockchain concurrency', 'transaction throughput', 'optimistic execution', 'dai algorithm']
 ---
 
 import { Callout } from 'nextra/components';
@@ -23,13 +23,13 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
 
 ## System Architecture
 
-<div className="p-6 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-black shadow-sm my-8">
+<div className="p-6 border border-neutral-200 dark:border-neutral-800 rounded-sm bg-black shadow-sm my-8">
   <div className="text-center font-bold mb-6 text-white text-xl">Sei Parallelization Engine</div>
 
   <div className="grid grid-cols-3 gap-8 mb-8">
     <div className="relative">
-      <div className="border-2 border-red-700/30 dark:border-red-800/40 rounded-lg p-4">
-        <div className="text-center font-semibold mb-3 text-red-400">Transaction Preprocessing</div>
+      <div className="border-2 border-[#600014]/30 dark:border-[#600014]/40 rounded-sm p-4">
+        <div className="text-center font-semibold mb-3 text-[#600014]">Transaction Preprocessing</div>
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Classifier</div>
         </div>
@@ -38,7 +38,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
     </div>
 
     <div className="relative">
-      <div className="border-2 border-amber-700/30 dark:border-amber-800/40 rounded-lg p-4">
+      <div className="border-2 border-amber-700/30 dark:border-amber-800/40 rounded-sm p-4">
         <div className="text-center font-semibold mb-3 text-amber-400">Dependency Analysis</div>
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Access Analysis</div>
@@ -48,7 +48,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
     </div>
 
     <div>
-      <div className="border-2 border-blue-700/30 dark:border-blue-800/40 rounded-lg p-4">
+      <div className="border-2 border-blue-700/30 dark:border-blue-800/40 rounded-sm p-4">
         <div className="text-center font-semibold mb-3 text-blue-400">Parallel Execution</div>
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Worker Pool</div>
@@ -60,7 +60,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
 
   <div className="grid grid-cols-3 gap-8 mb-8">
     <div className="relative">
-      <div className="border-2 border-red-700/30 dark:border-red-800/40 rounded-lg p-4">
+      <div className="border-2 border-[#600014]/30 dark:border-[#600014]/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Batch Formation</div>
         </div>
@@ -69,7 +69,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
     </div>
 
     <div className="relative">
-      <div className="border-2 border-amber-700/30 dark:border-amber-800/40 rounded-lg p-4">
+      <div className="border-2 border-amber-700/30 dark:border-amber-800/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Dependency Mapping</div>
         </div>
@@ -78,7 +78,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
     </div>
 
     <div>
-      <div className="border-2 border-blue-700/30 dark:border-blue-800/40 rounded-lg p-4">
+      <div className="border-2 border-blue-700/30 dark:border-blue-800/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">State Transitions</div>
         </div>
@@ -89,7 +89,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
 
   <div className="grid grid-cols-3 gap-8 mb-8">
     <div className="relative">
-      <div className="border-2 border-red-700/30 dark:border-red-800/40 rounded-lg p-4">
+      <div className="border-2 border-[#600014]/30 dark:border-[#600014]/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Gas Estimation</div>
         </div>
@@ -98,7 +98,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
     </div>
 
     <div className="relative">
-      <div className="border-2 border-amber-700/30 dark:border-amber-800/40 rounded-lg p-4">
+      <div className="border-2 border-amber-700/30 dark:border-amber-800/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Contract Interaction</div>
         </div>
@@ -107,7 +107,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
     </div>
 
     <div>
-      <div className="border-2 border-blue-700/30 dark:border-blue-800/40 rounded-lg p-4">
+      <div className="border-2 border-blue-700/30 dark:border-blue-800/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Speculative Execution</div>
         </div>
@@ -127,7 +127,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
 </div>
 
 <div className="grid grid-cols-2 gap-24 mb-8 relative">
-  <div className="border-2 border-purple-700/30 dark:border-purple-800/40 rounded-lg p-4 bg-black">
+  <div className="border-2 border-purple-700/30 dark:border-purple-800/40 rounded-sm p-4 bg-black">
     <div className="text-center font-semibold mb-3 text-purple-400">Conflict Resolution</div>
 
     <div className="bg-neutral-900 rounded p-3 mb-4">
@@ -140,7 +140,7 @@ At its heart, the Parallelization Engine utilizes an **Optimistic Concurrency Co
 
   </div>
 
-  <div className="border-2 border-green-700/30 dark:border-green-800/40 rounded-lg p-4 bg-black">
+  <div className="border-2 border-green-700/30 dark:border-green-800/40 rounded-sm p-4 bg-black">
     <div className="text-center font-semibold mb-3 text-green-400">SeiDB & Consensus</div>
 
     <div className="bg-neutral-900 rounded p-3 mb-4">
diff --git a/content/learn/proposals.mdx b/content/learn/proposals.mdx
index cfc61795..86b77544 100644
--- a/content/learn/proposals.mdx
+++ b/content/learn/proposals.mdx
@@ -10,7 +10,7 @@ import { IconGavel, IconFileText, IconSettings, IconCoins, IconArrowRight, IconC
 <div className="flex flex-col gap-2">
 
 <div className="flex flex-col md:flex-row items-start gap-5">
-  <div className="w-16 h-16 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center shrink-0">
+  <div className="w-16 h-16 rounded-sm bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center shrink-0">
     <IconGavel className="h-8 w-8 text-emerald-600" />
   </div>
   <div>
@@ -25,7 +25,7 @@ import { IconGavel, IconFileText, IconSettings, IconCoins, IconArrowRight, IconC
 
 ### Text Proposals
 
-<div className="border border-neutral-200 dark:border-neutral-800 rounded-lg mb-6 overflow-hidden">
+<div className="border border-neutral-200 dark:border-neutral-800 rounded-sm mb-6 overflow-hidden">
   <div className="bg-neutral-50 dark:bg-neutral-900/50 px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
     <div className="flex items-center gap-3 mb-3">
       <IconFileText className="h-5 w-5 text-emerald-600" />
@@ -69,7 +69,7 @@ seid tx gov submit-proposal \
 
 ### Parameter Change Proposals
 
-<div className="border border-neutral-200 dark:border-neutral-800 rounded-lg mb-6 overflow-hidden">
+<div className="border border-neutral-200 dark:border-neutral-800 rounded-sm mb-6 overflow-hidden">
   <div className="bg-neutral-50 dark:bg-neutral-900/50 px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
     <div className="flex items-center gap-3 mb-3">
       <IconSettings className="h-5 w-5 text-emerald-600" />
@@ -127,7 +127,7 @@ seid tx gov submit-proposal param-change proposal.json \
 
 ### Software Upgrade Proposals
 
-<div className="border border-neutral-200 dark:border-neutral-800 rounded-lg mb-6 overflow-hidden">
+<div className="border border-neutral-200 dark:border-neutral-800 rounded-sm mb-6 overflow-hidden">
   <div className="bg-neutral-50 dark:bg-neutral-900/50 px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
     <div className="flex items-center gap-3 mb-3">
       <IconArrowRight className="h-5 w-5 text-emerald-600" />
@@ -173,7 +173,7 @@ seid tx gov submit-proposal software-upgrade v2.1.0 \
 
 ## Expedited Proposals
 
-<div className="border border-neutral-200 dark:border-neutral-800 rounded-lg mb-6 overflow-hidden">
+<div className="border border-neutral-200 dark:border-neutral-800 rounded-sm mb-6 overflow-hidden">
   <div className="bg-emerald-50 dark:bg-emerald-900/20 px-6 py-4 border-b border-emerald-200 dark:border-emerald-800">
     <div className="flex items-center gap-3">
       <IconClock className="h-5 w-5 text-emerald-600" />
@@ -208,7 +208,7 @@ seid tx gov submit-proposal software-upgrade emergency-patch \
 ### Query & Monitor
 
 <div className="overflow-x-auto mb-8">
-  <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-lg">
+  <table className="min-w-full border border-neutral-200 dark:border-neutral-800 rounded-sm">
     <thead className="bg-neutral-50 dark:bg-neutral-900">
       <tr>
         <th className="text-left py-3 px-4 font-semibold text-neutral-800 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-800">Command</th>
diff --git a/content/learn/sei-giga-specs.mdx b/content/learn/sei-giga-specs.mdx
index 9981045f..143971f1 100644
--- a/content/learn/sei-giga-specs.mdx
+++ b/content/learn/sei-giga-specs.mdx
@@ -15,7 +15,7 @@ This document provides comprehensive technical specifications for Sei Giga, cove
 The specifications are organized to clearly distinguish between what is currently deployed and what is planned for future releases.
 
 <div className="grid grid-cols-2 gap-6 my-8">
-  <div className="border-2 border-green-700/40 rounded-xl p-6 bg-green-50 dark:bg-green-900/10">
+  <div className="border-2 border-green-700/40 rounded-sm p-6 bg-green-50 dark:bg-green-900/10">
     <div className="flex items-center mb-4">
       <div className="w-3 h-3 bg-green-500 dark:bg-green-400 rounded-full mr-3"></div>
       <div className="text-green-700 dark:text-green-400 font-semibold">Current Implementation</div>
@@ -23,7 +23,7 @@ The specifications are organized to clearly distinguish between what is currentl
     <div className="text-sm text-gray-600 dark:text-neutral-300">Features and specifications that are live on the Sei network today</div>
   </div>
 
-  <div className="border-2 border-purple-700/40 rounded-xl p-6 bg-purple-50 dark:bg-purple-900/10">
+  <div className="border-2 border-purple-700/40 rounded-sm p-6 bg-purple-50 dark:bg-purple-900/10">
     <div className="flex items-center mb-4">
       <div className="w-3 h-3 bg-purple-500 dark:bg-purple-400 rounded-full mr-3"></div>
       <div className="text-purple-700 dark:text-purple-400 font-semibold">Upcoming Features</div>
@@ -36,7 +36,7 @@ The specifications are organized to clearly distinguish between what is currentl
 
 ### Current: Twin Turbo Consensus
 
-<div className="border-2 border-green-700/40 rounded-xl p-6 bg-green-50 dark:bg-green-900/10 my-6">
+<div className="border-2 border-green-700/40 rounded-sm p-6 bg-green-50 dark:bg-green-900/10 my-6">
   <div className="flex items-center mb-4">
     <div className="w-3 h-3 bg-green-500 dark:bg-green-400 rounded-full mr-3"></div>
     <div className="text-green-700 dark:text-green-400 font-semibold text-lg">Live Implementation</div>
@@ -96,7 +96,7 @@ The specifications are organized to clearly distinguish between what is currentl
 
 ### Upcoming: Autobahn Consensus
 
-<div className="border-2 border-purple-700/40 rounded-xl p-6 bg-purple-50 dark:bg-purple-900/10 my-6">
+<div className="border-2 border-purple-700/40 rounded-sm p-6 bg-purple-50 dark:bg-purple-900/10 my-6">
   <div className="flex items-center mb-4">
     <div className="w-3 h-3 bg-purple-500 dark:bg-purple-400 rounded-full mr-3"></div>
     <div className="text-purple-700 dark:text-purple-400 font-semibold text-lg">In Development</div>
@@ -154,7 +154,7 @@ The specifications are organized to clearly distinguish between what is currentl
 
 ### Current: Parallel EVM Execution
 
-<div className="border-2 border-green-700/40 rounded-xl p-6 bg-green-50 dark:bg-green-900/10 my-6">
+<div className="border-2 border-green-700/40 rounded-sm p-6 bg-green-50 dark:bg-green-900/10 my-6">
   <div className="flex items-center mb-4">
     <div className="w-3 h-3 bg-green-500 dark:bg-green-400 rounded-full mr-3"></div>
     <div className="text-green-700 dark:text-green-400 font-semibold text-lg">Live Implementation</div>
@@ -162,23 +162,23 @@ The specifications are organized to clearly distinguish between what is currentl
 
   <div className="space-y-4">
     <div className="grid grid-cols-3 gap-4">
-      <div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-4">
+      <div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-4">
         <div className="text-gray-900 dark:text-white font-semibold mb-2">EVM Compatibility</div>
         <div className="text-sm text-gray-600 dark:text-neutral-300">Full Ethereum Virtual Machine compatibility with standard opcodes and gas metering</div>
       </div>
 
-      <div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-4">
+      <div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-4">
         <div className="text-gray-900 dark:text-white font-semibold mb-2">OCC Parallel Execution</div>
         <div className="text-sm text-gray-600 dark:text-neutral-300">Optimistic Concurrency Control with multi-worker transaction processing and conflict resolution</div>
       </div>
 
-      <div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-4">
+      <div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-4">
         <div className="text-gray-900 dark:text-white font-semibold mb-2">State Management</div>
         <div className="text-sm text-gray-600 dark:text-neutral-300">Optimized state access patterns with SeiDB storage backend</div>
       </div>
     </div>
 
-    <div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-4">
+    <div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-4">
       <div className="text-gray-900 dark:text-white font-semibold mb-3">Execution Specifications</div>
       <div className="grid grid-cols-2 gap-6">
         <div className="space-y-2 text-sm">
@@ -219,7 +219,7 @@ The specifications are organized to clearly distinguish between what is currentl
 
 ### Current: SeiDB
 
-<div className="border-2 border-green-700/40 rounded-xl p-6 bg-green-50 dark:bg-green-900/10 my-6">
+<div className="border-2 border-green-700/40 rounded-sm p-6 bg-green-50 dark:bg-green-900/10 my-6">
   <div className="flex items-center mb-4">
     <div className="w-3 h-3 bg-green-500 dark:bg-green-400 rounded-full mr-3"></div>
     <div className="text-green-700 dark:text-green-400 font-semibold text-lg">Live Implementation</div>
@@ -277,7 +277,7 @@ The specifications are organized to clearly distinguish between what is currentl
 
 ### Protocol Parameters
 
-<div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-6 my-6">
+<div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-6 my-6">
   <div className="text-gray-900 dark:text-white font-semibold mb-4">Network Configuration</div>
 
   <div className="grid grid-cols-2 gap-8">
@@ -334,26 +334,26 @@ The specifications are organized to clearly distinguish between what is currentl
 
 ### Upcoming: Target Performance Specifications
 
-<div className="border-2 border-purple-700/40 rounded-xl p-6 bg-purple-50 dark:bg-purple-900/10 my-6">
+<div className="border-2 border-purple-700/40 rounded-sm p-6 bg-purple-50 dark:bg-purple-900/10 my-6">
   <div className="flex items-center mb-4">
     <div className="w-3 h-3 bg-purple-500 dark:bg-purple-400 rounded-full mr-3"></div>
     <div className="text-purple-700 dark:text-purple-400 font-semibold text-lg">Performance Targets</div>
   </div>
 
   <div className="grid grid-cols-3 gap-4">
-    <div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-4 text-center">
+    <div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-4 text-center">
       <div className="text-3xl font-bold text-purple-700 dark:text-purple-400 mb-2">5B</div>
       <div className="text-sm text-gray-900 dark:text-white mb-1">Gas per Second</div>
       <div className="text-xs text-gray-500 dark:text-neutral-400">Peak throughput target</div>
     </div>
 
-    <div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-4 text-center">
+    <div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-4 text-center">
       <div className="text-3xl font-bold text-purple-700 dark:text-purple-400 mb-2">&lt;1s</div>
       <div className="text-sm text-gray-900 dark:text-white mb-1">Finality</div>
       <div className="text-xs text-gray-500 dark:text-neutral-400">Transaction confirmation</div>
     </div>
 
-    <div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-4 text-center">
+    <div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-4 text-center">
       <div className="text-3xl font-bold text-purple-700 dark:text-purple-400 mb-2">200K+</div>
       <div className="text-sm text-gray-900 dark:text-white mb-1">TPS</div>
       <div className="text-xs text-gray-500 dark:text-neutral-400">Simple transfers</div>
@@ -366,7 +366,7 @@ The specifications are organized to clearly distinguish between what is currentl
 
 ### JSON-RPC Compatibility
 
-<div className="bg-gray-50 dark:bg-neutral-900 rounded-lg p-6 my-6">
+<div className="bg-gray-50 dark:bg-neutral-900 rounded-sm p-6 my-6">
   <div className="text-gray-900 dark:text-white font-semibold mb-4">Ethereum JSON-RPC Support</div>
 
   <div className="grid grid-cols-2 gap-6">
@@ -420,7 +420,7 @@ The specifications are organized to clearly distinguish between what is currentl
 ## Related Resources
 
 <div className="grid grid-cols-3 gap-4 my-8">
-  <div className="border border-gray-200 dark:border-neutral-700 rounded-lg p-4 hover:border-gray-300 dark:hover:border-neutral-600 transition-colors">
+  <div className="border border-gray-200 dark:border-neutral-700 rounded-sm p-4 hover:border-gray-300 dark:hover:border-neutral-600 transition-colors">
     <div className="text-gray-900 dark:text-white font-semibold mb-2">Overview</div>
     <div className="text-sm text-gray-600 dark:text-neutral-300 mb-3">
       High-level introduction to Sei Giga architecture and features
@@ -430,7 +430,7 @@ The specifications are organized to clearly distinguish between what is currentl
     </a>
   </div>
   
-  <div className="border border-gray-200 dark:border-neutral-700 rounded-lg p-4 hover:border-gray-300 dark:hover:border-neutral-600 transition-colors">
+  <div className="border border-gray-200 dark:border-neutral-700 rounded-sm p-4 hover:border-gray-300 dark:hover:border-neutral-600 transition-colors">
     <div className="text-gray-900 dark:text-white font-semibold mb-2">Developer Guide</div>
     <div className="text-sm text-gray-600 dark:text-neutral-300 mb-3">
       Complete guide for building applications on Sei Giga
diff --git a/content/learn/sei-giga.mdx b/content/learn/sei-giga.mdx
index e2e0a21e..664bd520 100644
--- a/content/learn/sei-giga.mdx
+++ b/content/learn/sei-giga.mdx
@@ -61,11 +61,11 @@ The next evolution of Sei Giga will introduce three key innovations designed to
 
 A planned architectural enhancement will implement complete separation of consensus and execution. Unlike traditional blockchains where these processes are tightly coupled, the upcoming Sei Giga architecture will reach consensus solely on the ordering of transactions within a block, not the resulting state change.
 
-<div className="p-8 border border-neutral-700 rounded-lg bg-black shadow-md my-8">
+<div className="p-8 border border-neutral-700 rounded-sm bg-black shadow-md my-8">
   <div className="text-center font-bold mb-8 text-white text-xl">Asynchronous Execution Architecture</div>
 
   <div className="grid grid-cols-2 gap-8 mb-8">
-    <div className="border-2 border-blue-700/40 rounded-xl p-6">
+    <div className="border-2 border-blue-700/40 rounded-sm p-6">
       <div className="text-center font-semibold mb-6 text-blue-400">Traditional Blockchain</div>
 
       <div className="space-y-4">
@@ -86,10 +86,10 @@ A planned architectural enhancement will implement complete separation of consen
         </div>
       </div>
 
-      <div className="mt-6 text-center text-red-400">⚠️ Execution delays consensus</div>
+      <div className="mt-6 text-center text-[#600014]">⚠️ Execution delays consensus</div>
     </div>
 
-    <div className="border-2 border-green-700/40 rounded-xl p-6">
+    <div className="border-2 border-green-700/40 rounded-sm p-6">
       <div className="text-center font-semibold mb-6 text-green-400">Sei Giga Model</div>
 
       <div className="grid grid-cols-2 gap-4">
@@ -141,10 +141,10 @@ Key benefits of this model:
 
 The upcoming Sei Giga will employ Autobahn, a Byzantine Fault Tolerant (BFT) consensus protocol designed for high performance blockchain networks. Unlike traditional single-proposer systems, Autobahn will enable multiple validators to propose blocks simultaneously, targeting significant throughput improvements while maintaining security guarantees.
 
-<div className="p-8 border border-neutral-700 rounded-lg bg-black shadow-md my-8">
+<div className="p-8 border border-neutral-700 rounded-sm bg-black shadow-md my-8">
   <div className="text-center font-bold mb-8 text-white text-xl">Autobahn Consensus Architecture</div>
 
-  <div className="border-2 border-purple-700/40 rounded-xl p-8">
+  <div className="border-2 border-purple-700/40 rounded-sm p-8">
     <div className="grid grid-cols-2 gap-8 mb-8">
       <div>
         <div className="text-center font-semibold mb-6 text-purple-400">Data Dissemination Layer (Lanes)</div>
@@ -286,10 +286,10 @@ The protocol operates through two complementary layers:
 
 The parallel execution architecture extends beyond current OCC capabilities to include:
 
-<div className="p-8 border border-neutral-700 rounded-lg bg-black shadow-md my-8">
+<div className="p-8 border border-neutral-700 rounded-sm bg-black shadow-md my-8">
   <div className="text-center font-bold mb-8 text-white text-xl">Parallel Execution Pipeline</div>
 
-  <div className="border-2 border-green-700/40 rounded-xl p-8">
+  <div className="border-2 border-green-700/40 rounded-sm p-8">
     <div className="grid grid-cols-4 gap-4 mb-8">
       <div className="bg-neutral-900 rounded p-4 border border-neutral-700">
         <div className="text-green-400 text-center font-semibold mb-2">Stage 1</div>
@@ -356,11 +356,11 @@ Key innovations in the execution model:
 
 Beyond the current SeiDB capabilities, the Sei Giga architecture includes advanced storage innovations:
 
-<div className="p-8 border border-neutral-700 rounded-lg bg-black shadow-md my-8">
+<div className="p-8 border border-neutral-700 rounded-sm bg-black shadow-md my-8">
   <div className="text-center font-bold mb-8 text-white text-xl">Hybrid Storage Architecture</div>
 
   <div className="grid grid-cols-3 gap-6">
-    <div className="border-2 border-blue-700/40 rounded-xl p-6">
+    <div className="border-2 border-blue-700/40 rounded-sm p-6">
       <div className="text-center font-semibold mb-4 text-blue-400">Hot Storage Tier</div>
 
       <div className="space-y-3">
@@ -381,7 +381,7 @@ Beyond the current SeiDB capabilities, the Sei Giga architecture includes advanc
       </div>
     </div>
 
-    <div className="border-2 border-teal-700/40 rounded-xl p-6">
+    <div className="border-2 border-teal-700/40 rounded-sm p-6">
       <div className="text-center font-semibold mb-4 text-teal-400">Warm Storage Tier</div>
 
       <div className="space-y-3">
@@ -402,7 +402,7 @@ Beyond the current SeiDB capabilities, the Sei Giga architecture includes advanc
       </div>
     </div>
 
-    <div className="border-2 border-purple-700/40 rounded-xl p-6">
+    <div className="border-2 border-purple-700/40 rounded-sm p-6">
       <div className="text-center font-semibold mb-4 text-purple-400">Cold Storage Tier</div>
 
       <div className="space-y-3">
@@ -425,7 +425,7 @@ Beyond the current SeiDB capabilities, the Sei Giga architecture includes advanc
 
   </div>
 
-  <div className="mt-8 border-2 border-yellow-700/40 rounded-xl p-6">
+  <div className="mt-8 border-2 border-yellow-700/40 rounded-sm p-6">
     <div className="text-center font-semibold mb-4 text-yellow-400">Cryptographic Layer</div>
 
     <div className="grid grid-cols-3 gap-4">
@@ -466,11 +466,11 @@ Sei operates with a native SEI token that serves multiple functions within the e
 
 ### Staking Mechanics
 
-<div className="p-6 border border-neutral-700 rounded-lg bg-black shadow-md my-8">
+<div className="p-6 border border-neutral-700 rounded-sm bg-black shadow-md my-8">
   <div className="text-center font-bold mb-6 text-white text-xl">Staking & Validation</div>
 
   <div className="grid grid-cols-2 gap-6">
-    <div className="border-2 border-blue-700/40 rounded-xl p-6">
+    <div className="border-2 border-blue-700/40 rounded-sm p-6">
       <div className="text-center font-semibold mb-4 text-blue-400">Validators</div>
       <div className="space-y-3">
         <div className="bg-neutral-900 rounded p-3">
@@ -488,7 +488,7 @@ Sei operates with a native SEI token that serves multiple functions within the e
       </div>
     </div>
 
-    <div className="border-2 border-green-700/40 rounded-xl p-6">
+    <div className="border-2 border-green-700/40 rounded-sm p-6">
       <div className="text-center font-semibold mb-4 text-green-400">Delegators</div>
       <div className="space-y-3">
         <div className="bg-neutral-900 rounded p-3">
@@ -508,8 +508,8 @@ Sei operates with a native SEI token that serves multiple functions within the e
 
   </div>
 
-  <div className="mt-6 border-2 border-red-700/40 rounded-xl p-6">
-    <div className="text-center font-semibold mb-4 text-red-400">Slashing Conditions</div>
+  <div className="mt-6 border-2 border-[#600014]/40 rounded-sm p-6">
+    <div className="text-center font-semibold mb-4 text-[#600014]">Slashing Conditions</div>
     <div className="grid grid-cols-2 gap-4">
       <div className="bg-neutral-900 rounded p-3">
         <div className="text-white text-sm">Liveness Failures</div>
@@ -543,11 +543,11 @@ Sei maintains full EVM compatibility while providing enhanced capabilities:
 
 ## Implementation Status
 
-<div className="p-8 border border-neutral-700 rounded-lg bg-black shadow-md my-8">
+<div className="p-8 border border-neutral-700 rounded-sm bg-black shadow-md my-8">
   <div className="text-center font-bold mb-8 text-white text-xl">Current & Upcoming Features</div>
 
   <div className="space-y-6">
-    <div className="border-2 border-green-700/40 rounded-xl p-6">
+    <div className="border-2 border-green-700/40 rounded-sm p-6">
       <div className="flex items-center justify-between mb-4">
         <div className="text-green-400 font-semibold">Current Implementation</div>
         <div className="text-xs text-neutral-400">Live on Mainnet</div>
@@ -568,7 +568,7 @@ Sei maintains full EVM compatibility while providing enhanced capabilities:
       </div>
     </div>
 
-    <div className="border-2 border-purple-700/40 rounded-xl p-6">
+    <div className="border-2 border-purple-700/40 rounded-sm p-6">
       <div className="flex items-center justify-between mb-4">
         <div className="text-purple-400 font-semibold">Upcoming Features</div>
         <div className="text-xs text-neutral-400">In Development</div>
diff --git a/content/learn/seidb.mdx b/content/learn/seidb.mdx
index 6b559416..262fccf3 100644
--- a/content/learn/seidb.mdx
+++ b/content/learn/seidb.mdx
@@ -1,7 +1,7 @@
 ---
-title: "SeiDB: Performance-Optimized Blockchain Database"
+title: 'SeiDB: Performance-Optimized Blockchain Database'
 description: "Learn how SeiDB's specialized storage architecture accelerates blockchain operations through multi-level caching, optimized state access, and concurrency control designed specifically for EVM workloads."
-keywords: ["seidb", "blockchain database", "state storage", "ethereum optimization", "blockchain performance", "concurrency control"]
+keywords: ['seidb', 'blockchain database', 'state storage', 'ethereum optimization', 'blockchain performance', 'concurrency control']
 ---
 
 import { Callout } from 'nextra/components';
@@ -28,12 +28,12 @@ Key design goals include:
 
 SeiDB implements a multi-layered architecture optimized for EVM state management:
 
-<div className="p-6 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-black shadow-sm my-8">
+<div className="p-6 border border-neutral-200 dark:border-neutral-800 rounded-sm bg-black shadow-sm my-8">
   <div className="text-center font-bold mb-6 text-white text-xl">SeiDB Core</div>
 
   <div className="grid grid-cols-3 gap-8 mb-8">
     <div className="relative">
-      <div className="border-2 border-blue-700/30 dark:border-blue-900/40 rounded-lg p-4">
+      <div className="border-2 border-blue-700/30 dark:border-blue-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">EVM Cache System</div>
         </div>
@@ -42,7 +42,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
     </div>
 
     <div className="relative">
-      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-lg p-4">
+      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Query Processor</div>
         </div>
@@ -51,7 +51,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
     </div>
 
     <div>
-      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-lg p-4">
+      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Storage Engine</div>
         </div>
@@ -62,7 +62,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
 
   <div className="grid grid-cols-3 gap-8 mb-8">
     <div className="relative">
-      <div className="border-2 border-blue-700/30 dark:border-blue-900/40 rounded-lg p-4">
+      <div className="border-2 border-blue-700/30 dark:border-blue-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Merkle Trie Optimizer</div>
         </div>
@@ -71,7 +71,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
     </div>
 
     <div className="relative">
-      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-lg p-4">
+      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Storage Indexer</div>
         </div>
@@ -80,7 +80,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
     </div>
 
     <div>
-      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-lg p-4">
+      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">LSM-Tree Manager</div>
         </div>
@@ -91,7 +91,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
 
   <div className="grid grid-cols-3 gap-8 mb-8">
     <div className="relative">
-      <div className="border-2 border-blue-700/30 dark:border-blue-900/40 rounded-lg p-4">
+      <div className="border-2 border-blue-700/30 dark:border-blue-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Concurrency Control</div>
         </div>
@@ -100,7 +100,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
     </div>
 
     <div className="relative">
-      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-lg p-4">
+      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">Version Manager</div>
         </div>
@@ -109,7 +109,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
     </div>
 
     <div>
-      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-lg p-4">
+      <div className="border-2 border-teal-700/30 dark:border-teal-900/40 rounded-sm p-4">
         <div className="bg-neutral-900 rounded p-3">
           <div className="text-center text-white">I/O Scheduler</div>
         </div>
@@ -118,7 +118,7 @@ SeiDB implements a multi-layered architecture optimized for EVM state management
 
   </div>
 
-  <div className="border-2 border-indigo-900/40 bg-indigo-950/30 rounded-lg p-6">
+  <div className="border-2 border-indigo-900/40 bg-indigo-950/30 rounded-sm p-6">
     <div className="text-center text-indigo-400">Ethereum Compatibility Layer</div>
   </div>
 </div>
diff --git a/content/learn/twin-turbo-consensus.mdx b/content/learn/twin-turbo-consensus.mdx
index 0a72fc72..b21ea2a4 100644
--- a/content/learn/twin-turbo-consensus.mdx
+++ b/content/learn/twin-turbo-consensus.mdx
@@ -1,7 +1,7 @@
 ---
 title: "Twin Turbo Consensus: Sei's High-Speed Blockchain Consensus"
 description: "Explore how Sei's Twin Turbo consensus mechanism achieves higher transaction throughput by separating block building from consensus, with detailed explanations of the protocol's design and benefits."
-keywords: ["twin turbo consensus", "high-speed blockchain", "transaction throughput", "blockchain performance", "validator coordination", "consensus mechanism"]
+keywords: ['twin turbo consensus', 'high-speed blockchain', 'transaction throughput', 'blockchain performance', 'validator coordination', 'consensus mechanism']
 ---
 
 # Twin Turbo Consensus
@@ -24,10 +24,10 @@ This optimized flow involves several key enhancements:
     - Simultaneously, the validator participates in the standard BFT prevote and precommit voting rounds for the proposed block `H`.
 4.  **Rapid Finalization and Commit:** Because transaction execution overlaps significantly with the consensus voting process, the time delta between achieving 2/3+ precommits for block `H` and having the resulting state changes ready for commitment is drastically reduced. Once consensus is reached, the validated state changes buffered during parallel execution are efficiently committed to the underlying SeiDB storage layer, leveraging its high I/O capabilities.
 
-<div className="p-8 border border-neutral-700 rounded-lg bg-black shadow-md my-8">
+<div className="p-8 border border-neutral-700 rounded-sm bg-black shadow-md my-8">
   <div className="text-center font-bold mb-8 text-white text-xl">Optimized & Pipelined Consensus</div>
 
-  <div className="border-2 border-neutral-600 rounded-xl p-8 mb-10 relative">
+  <div className="border-2 border-neutral-600 rounded-sm p-8 mb-10 relative">
     <div className="grid grid-cols-2 gap-0 divide-x divide-dashed divide-neutral-600">
       <div className="pr-8">
         <div className="text-center font-semibold mb-8 text-blue-400">
@@ -104,7 +104,7 @@ This optimized flow involves several key enhancements:
         <div className="text-white text-3xl mb-8">↓</div>
 
         <div className="max-w-md w-full">
-          <div className="border-2 border-purple-700/40 rounded-xl p-4 bg-black">
+          <div className="border-2 border-purple-700/40 rounded-sm p-4 bg-black">
             <div className="bg-neutral-900 rounded p-4 border border-neutral-700">
               <div className="text-white text-center">
                 Finalize State &<br />
diff --git a/content/learn/wallets.mdx b/content/learn/wallets.mdx
index e62f9dd6..672c76da 100644
--- a/content/learn/wallets.mdx
+++ b/content/learn/wallets.mdx
@@ -315,7 +315,7 @@ well as deriving wallet addresses properly, please refer to the
           Hardware
         </td>
         <td className="px-4 py-3 text-sm whitespace-nowrap font-medium">
-          <span className="text-red-600 dark:text-red-400">❌</span>
+          <span className="text-[#600014] dark:text-[#b99ba1]">❌</span>
         </td>
         <td className="px-4 py-3 text-sm whitespace-nowrap">
           <a
diff --git a/content/node/index.mdx b/content/node/index.mdx
index 99ae50b7..414723c1 100644
--- a/content/node/index.mdx
+++ b/content/node/index.mdx
@@ -14,12 +14,12 @@ import Link from 'next/link';
 
   <div className="flex flex-col gap-8 pt-8 border-t border-neutral-200 dark:border-neutral-800/50 px-1 md:px-0">
     <div className="flex flex-col md:flex-row items-start gap-5">
-      <div className="w-16 h-16 rounded-lg bg-red-500/10 dark:bg-red-900/20 flex items-center justify-center shrink-0">
-         <IconServer className="h-8 w-8 text-red-500" />
+      <div className="w-16 h-16 rounded-sm bg-[#600014]/10 dark:bg-[#600014]/20 flex items-center justify-center shrink-0">
+         <IconServer className="h-8 w-8 text-[#600014]" />
       </div>
       <div>
         <h1 className="text-4xl font-bold text-neutral-800 dark:text-neutral-100 mb-1">Node Operations</h1>
-        <p className="text-red-700 dark:text-red-400 font-medium text-base">Power the Sei Network Infrastructure</p>
+        <p className="text-[#600014] dark:text-[#b99ba1] font-medium text-base">Power the Sei Network Infrastructure</p>
         <p className="mt-3 text-neutral-600 dark:text-neutral-300 text-base max-w-3xl">
           This section provides comprehensive guides for running, maintaining, and optimizing Sei network nodes. Whether you're setting up a validator, an RPC node, or a relayer, you'll find detailed instructions and best practices to ensure optimal performance and security.
         </p>
@@ -29,19 +29,19 @@ import Link from 'next/link';
             <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-2">Node Types:</p>
             <div className="flex flex-wrap gap-3">
              <div className="flex items-center gap-1.5">
-                <IconNetwork className="h-3.5 w-3.5 text-red-500" />
+                <IconNetwork className="h-3.5 w-3.5 text-[#600014]" />
                 <span className="text-sm text-neutral-700 dark:text-neutral-300">RPC/API Nodes</span>
               </div>
               <div className="flex items-center gap-1.5">
-                <IconShield className="h-3.5 w-3.5 text-red-500" />
+                <IconShield className="h-3.5 w-3.5 text-[#600014]" />
                 <span className="text-sm text-neutral-700 dark:text-neutral-300">Validator Nodes</span>
               </div>
               <div className="flex items-center gap-1.5">
-                <IconArrowsShuffle2 className="h-3.5 w-3.5 text-red-500" />
+                <IconArrowsShuffle2 className="h-3.5 w-3.5 text-[#600014]" />
                 <span className="text-sm text-neutral-700 dark:text-neutral-300">Statesync Nodes</span>
               </div>
               <div className="flex items-center gap-1.5">
-                <IconDatabase className="h-3.5 w-3.5 text-red-500" />
+                <IconDatabase className="h-3.5 w-3.5 text-[#600014]" />
                 <span className="text-sm text-neutral-700 dark:text-neutral-300">Archive Nodes</span>
               </div>
             </div>
@@ -52,7 +52,7 @@ import Link from 'next/link';
  
     <div id="binary-versions" className="w-full">
       <h2 className="text-2xl font-bold text-neutral-800 dark:text-neutral-100 mb-4">Network Versions</h2>
-      <div className="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
+      <div className="overflow-hidden rounded-sm border border-neutral-200 dark:border-neutral-800">
         <VersionTable showGenesis={true} />
       </div>
     </div>
@@ -60,7 +60,7 @@ import Link from 'next/link';
     <div className="mt-6 space-y-3 [&_.nextra-callout]:!my-2 mb-0">
       <h2 className="text-2xl font-bold text-neutral-800 dark:text-neutral-100 !mb-2">Hardware Requirements</h2>
 
-      <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800 border border-neutral-200 dark:border-neutral-800 rounded-lg overflow-hidden">
+      <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800 border border-neutral-200 dark:border-neutral-800 rounded-sm overflow-hidden">
         <thead className="bg-neutral-50 dark:bg-neutral-900/50">
           <tr>
             <th className="px-4 py-3 text-left text-sm font-medium text-neutral-900 dark:text-neutral-100">Component</th>
@@ -94,24 +94,24 @@ import Link from 'next/link';
           <TabsList>
             <TabsTrigger value="environment">
             <div className="flex items-center gap-2">
-              <div className="h-8 w-8 rounded-full bg-red-500/10 dark:bg-red-900/20 flex items-center justify-center mr-2">
-                <span className="text-red-600 dark:text-red-400 font-bold">1</span>
+              <div className="h-8 w-8 rounded-full bg-[#600014]/10 dark:bg-[#600014]/20 flex items-center justify-center mr-2">
+                <span className="text-[#600014] dark:text-[#b99ba1] font-bold">1</span>
                 </div>
                 <span>Environment Setup</span>
               </div>
             </TabsTrigger>
             <TabsTrigger value="install">
               <div className="flex items-center gap-2">
-                <div className="h-8 w-8 rounded-full bg-red-500/10 dark:bg-red-900/20 flex items-center justify-center mr-2">
-                  <span className="text-red-600 dark:text-red-400 font-bold">2</span>
+                <div className="h-8 w-8 rounded-full bg-[#600014]/10 dark:bg-[#600014]/20 flex items-center justify-center mr-2">
+                  <span className="text-[#600014] dark:text-[#b99ba1] font-bold">2</span>
                 </div>
                 <span>Install Sei</span>
               </div>
             </TabsTrigger>
             <TabsTrigger value="run">
               <div className="flex items-center gap-2">
-                <div className="h-8 w-8 rounded-full bg-red-500/10 dark:bg-red-900/20 flex items-center justify-center mr-2">
-                  <span className="text-red-600 dark:text-red-400 font-bold">3</span>
+                <div className="h-8 w-8 rounded-full bg-[#600014]/10 dark:bg-[#600014]/20 flex items-center justify-center mr-2">
+                  <span className="text-[#600014] dark:text-[#b99ba1] font-bold">3</span>
                 </div>
                 <span>Run Node</span>
               </div>
@@ -203,12 +203,12 @@ seid version
 ```
 
                 <p className="text-sm text-neutral-600 dark:text-neutral-400">
-                  See <Link href="#binary-versions" className="text-red-500 hover:text-red-600 dark:hover:text-red-400">Network Versions</Link> table above for current recommended version.
+                  See <Link href="#binary-versions" className="text-[#600014] hover:text-[#600014] dark:hover:text-[#b99ba1]">Network Versions</Link> table above for current recommended version.
                 </p>
               </div>
 
               <div className="mb-5">
-                <details className="group border border-neutral-200 dark:border-neutral-800 rounded-lg">
+                <details className="group border border-neutral-200 dark:border-neutral-800 rounded-sm">
                   <summary className="flex items-center justify-between cursor-pointer p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-t-lg">
                     <div className="flex items-center gap-2">
                       <span className="text-base font-medium text-neutral-800 dark:text-neutral-200">Alternative: Docker Image</span>
@@ -216,7 +216,7 @@ seid version
                   </summary>
                   <div className="p-5 pt-4 border-t border-neutral-200 dark:border-neutral-800">
                     <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-3">
-                      Official Docker images are available at <a href="https://github.com/sei-protocol/sei-chain/pkgs/container/sei" target="_blank" rel="noopener noreferrer" className="text-red-500 hover:text-red-600 dark:hover:text-red-400">GitHub Container Registry</a>.
+                      Official Docker images are available at <a href="https://github.com/sei-protocol/sei-chain/pkgs/container/sei" target="_blank" rel="noopener noreferrer" className="text-[#600014] hover:text-[#600014] dark:hover:text-[#b99ba1]">GitHub Container Registry</a>.
                     </p>
 
 ```bash copy
@@ -317,16 +317,16 @@ sed -i -e "s/^occ-enabled *=.*/occ-enabled = true/" $HOME/.sei/config/app.toml
               </div>
 
               <div className="mt-6">
-                <details className="group border border-neutral-200 dark:border-neutral-800 rounded-lg">
+                <details className="group border border-neutral-200 dark:border-neutral-800 rounded-sm">
                   <summary className="flex items-center justify-between cursor-pointer p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-t-lg">
                     <div className="flex items-center gap-2">
-                      <IconDatabase className="h-5 w-5 text-red-500" />
+                      <IconDatabase className="h-5 w-5 text-[#600014]" />
                       <span className="text-lg font-semibold text-neutral-800 dark:text-neutral-200">Advanced Configuration</span>
                     </div>
                   </summary>
 
                   <div className="p-5 pt-4 border-t border-neutral-200 dark:border-neutral-800">
-                    <div className="mb-5 bg-neutral-50 dark:bg-neutral-900/50 p-5 rounded-lg border border-neutral-200 dark:border-neutral-800">
+                    <div className="mb-5 bg-neutral-50 dark:bg-neutral-900/50 p-5 rounded-sm border border-neutral-200 dark:border-neutral-800">
                       <div className="flex items-center gap-2 mb-3">
                         <IconDatabase className="h-5 w-5 text-neutral-500" />
                         <h6 className="text-base font-medium text-neutral-800 dark:text-neutral-200">Archive Node Setup</h6>
@@ -337,7 +337,7 @@ sed -i -e "s/^occ-enabled *=.*/occ-enabled = true/" $HOME/.sei/config/app.toml
                         "snapshot".
                       </p>
 
-                      <div className="mb-5 bg-neutral-800/5 dark:bg-neutral-700/10 p-4 rounded-lg">
+                      <div className="mb-5 bg-neutral-800/5 dark:bg-neutral-700/10 p-4 rounded-sm">
                         <h6 className="text-sm font-medium text-neutral-800 dark:text-neutral-200 mb-2">1. Disable State Sync</h6>
                         <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
                           In <code className="bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded text-xs">$HOME/.sei/config/config.toml</code>, modify the <code className="bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded text-xs">[statesync]</code> section:
@@ -351,7 +351,7 @@ enable = false
 
                       </div>
 
-                      <div className="mb-5 bg-neutral-800/5 dark:bg-neutral-700/10 p-4 rounded-lg">
+                      <div className="mb-5 bg-neutral-800/5 dark:bg-neutral-700/10 p-4 rounded-sm">
                         <h6 className="text-sm font-medium text-neutral-800 dark:text-neutral-200 mb-2">2. Configure Archive Node Peers</h6>
                         <p className="text-sm text-neutral-600 dark:text-neutral-400">
                           To sync from the height your snapshot was created at, you need peers retaining
@@ -361,7 +361,7 @@ enable = false
                       </div>
                     </div>
 
-                    <div className="mb-4 bg-neutral-50 dark:bg-neutral-900/50 p-5 rounded-lg border border-neutral-200 dark:border-neutral-800">
+                    <div className="mb-4 bg-neutral-50 dark:bg-neutral-900/50 p-5 rounded-sm border border-neutral-200 dark:border-neutral-800">
                       <div className="flex items-center gap-2 mb-3">
                         <IconSettings className="h-5 w-5 text-neutral-500" />
                         <h6 className="text-base font-medium text-neutral-800 dark:text-neutral-200">Mempool Configuration</h6>
@@ -484,7 +484,7 @@ seid query staking validator $(seid keys show <your_key> --bech val -a)
                   <h5 className="text-lg font-medium text-neutral-800 dark:text-neutral-200 mb-3">Common Issues & Solutions</h5>
 
                   <div className="grid grid-cols-1 gap-4 mb-3">
-                    <div className="border border-neutral-200 dark:border-neutral-700 rounded-lg p-3">
+                    <div className="border border-neutral-200 dark:border-neutral-700 rounded-sm p-3">
                       <h6 className="font-medium text-neutral-800 dark:text-neutral-200 mb-1">Sync Issues</h6>
                       <ul className="list-disc list-inside text-xs text-neutral-600 dark:text-neutral-400 space-y-1">
                         <li>Verify sufficient disk space</li>
@@ -494,7 +494,7 @@ seid query staking validator $(seid keys show <your_key> --bech val -a)
                       </ul>
                     </div>
 
-                    <div className="border border-neutral-200 dark:border-neutral-700 rounded-lg p-3">
+                    <div className="border border-neutral-200 dark:border-neutral-700 rounded-sm p-3">
                       <h6 className="font-medium text-neutral-800 dark:text-neutral-200 mb-1">Performance Problems</h6>
                       <ul className="list-disc list-inside text-xs text-neutral-600 dark:text-neutral-400 space-y-1">
                         <li>Monitor system resources (CPU, RAM, I/O)</li>
@@ -513,30 +513,30 @@ seid query staking validator $(seid keys show <your_key> --bech val -a)
       <div className="flex justify-center">
         <Link
           href="/node/node-operators"
-          className="flex items-center text-red-600 hover:text-red-800 dark:text-red-300 dark:hover:text-red-200 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-3 py-1.5 rounded font-medium transition-colors">
+          className="flex items-center text-[#600014] hover:text-[#34050d] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] bg-[#f5f5f7] hover:bg-[#ececee] dark:bg-[#600014]/20 dark:hover:bg-[#34050d]/30 px-3 py-1.5 rounded font-medium transition-colors">
           <span>View Complete Node Setup Guide</span>
           <IconArrowRight className="h-4 w-4 ml-1 group-hover:ml-2 transition-all" />
         </Link>
       </div>
     </div>
 
-    <div className="rounded-lg p-6 bg-neutral-50/50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800/40 shadow-sm mt-6">
+    <div className="rounded-sm p-6 bg-neutral-50/50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800/40 shadow-sm mt-6">
       <h2 className="text-2xl font-bold mb-6 text-neutral-800 dark:text-neutral-100">Node Resources</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-8">
 
         <div className="flex flex-col gap-5">
           <h3 className="text-xl font-semibold pb-1 text-neutral-700 dark:text-neutral-300">Node Setup</h3>
           <Link href="/node/node-operators" className="flex items-start gap-3 group">
-             <IconServer className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <IconServer className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-[#600014] transition-colors mt-0.5" />
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Node Operations Guide</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Node Operations Guide</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Complete guide to setting up and running a Sei node with hardware requirements and configuration steps.</p>
              </div>
            </Link>
            <Link href="/node/validators" className="flex items-start gap-3 group">
-             <IconShield className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <IconShield className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-[#600014] transition-colors mt-0.5" />
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Validator Operations Guide</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Validator Operations Guide</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Specialized instructions for validators, including staking, commission settings, and security best practices.</p>
              </div>
            </Link>
@@ -545,16 +545,16 @@ seid query staking validator $(seid keys show <your_key> --bech val -a)
         <div className="flex flex-col gap-5">
           <h3 className="text-xl font-semibold pb-1 text-neutral-700 dark:text-neutral-300">Advanced Operations</h3>
           <Link href="/node/advanced-config-monitoring" className="flex items-start gap-3 group">
-             <IconSettings className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <IconSettings className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-[#600014] transition-colors mt-0.5" />
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Configuration & Monitoring</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Configuration & Monitoring</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Optimize your node's performance with advanced settings and monitoring tools.</p>
              </div>
            </Link>
            <Link href="/node/technical-reference" className="flex items-start gap-3 group">
-             <IconTerminal2 className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-red-500 transition-colors mt-0.5" />
+             <IconTerminal2 className="h-5 w-5 text-neutral-500 dark:text-neutral-400 shrink-0 group-hover:text-[#600014] transition-colors mt-0.5" />
              <div>
-               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-red-500 dark:group-hover:text-red-400 transition-colors mb-0.5">Technical Reference</h4>
+               <h4 className="font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors mb-0.5">Technical Reference</h4>
                <p className="text-sm text-neutral-500 dark:text-neutral-500">Detailed technical specifications, API endpoints, and commands for node operators.</p>
              </div>
            </Link>
diff --git a/public/vendor/bytebellai/index.js b/public/vendor/bytebellai/index.js
index b24e642f..6141f652 100644
--- a/public/vendor/bytebellai/index.js
+++ b/public/vendor/bytebellai/index.js
@@ -10033,7 +10033,7 @@ const LB = { verifyOrigin: async ({ data: e }) => (await Cu.post(pp.verifyOrigin
 			};
 		return E.jsx(Ka.Provider, { value: te, children: e });
 	},
-	BB = `/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@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-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--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-divide-y-reverse:0;--tw-border-style:solid;--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%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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-content:""}}}@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-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-900:oklch(39.6% .141 25.723);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-800:oklch(47% .157 37.304);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-50:oklch(98.2% .018 155.826);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-cyan-500:oklch(71.5% .143 215.221);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-500:oklch(58.5% .233 277.117);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-400:oklch(71.2% .194 13.428);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-zinc-800:oklch(27.4% .006 286.033);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-xs:4px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:hsl(var(--background));--color-foreground:hsl(var(--foreground));--color-popover:hsl(var(--popover));--color-popover-foreground:hsl(var(--popover-foreground));--color-primary:#469a4c;--color-secondary:#edf6ee;--color-muted:hsl(var(--muted));--color-muted-foreground:hsl(var(--muted-foreground));--color-accent:hsl(var(--accent));--color-accent-foreground:hsl(var(--accent-foreground));--color-destructive:hsl(var(--destructive));--color-destructive-foreground:hsl(var(--destructive-foreground));--color-border:hsl(var(--border));--color-input:hsl(var(--input));--color-ring:hsl(var(--ring));--animate-accordion-down:accordion-down .2s ease-out;--animate-accordion-up:accordion-up .2s ease-out}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;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{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.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{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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)){::placeholder{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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before,::backdrop{border-color:var(--color-gray-200,currentcolor)}::file-selector-button{border-color:var(--color-gray-200,currentcolor)}:root{--background:0 0% 100%;--foreground:0 0% 3.9%;--card:0 0% 100%;--card-foreground:0 0% 3.9%;--popover:0 0% 100%;--popover-foreground:0 0% 3.9%;--primary:0 0% 9%;--primary-foreground:0 0% 98%;--secondary:0 0% 96.1%;--secondary-foreground:0 0% 9%;--muted:0 0% 96.1%;--muted-foreground:0 0% 45.1%;--accent:0 0% 96.1%;--accent-foreground:0 0% 9%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:0 0% 89.8%;--input:0 0% 89.8%;--ring:0 0% 3.9%;--chart-1:12 76% 61%;--chart-2:173 58% 39%;--chart-3:197 37% 24%;--chart-4:43 74% 66%;--chart-5:27 87% 67%;--radius:.5rem;--text-primary:#0d0d0d;--text-secondary:#5d5d5d;--text-tertiary:#8f8f8f;--text-inverted:#fff;--text-inverted-static:#fff;--text-accent:#66b5ff;--text-status-warning:#e25507;--text-status-error:#e02e2a;--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--serif:"Lora","Playfair Display","Crimson Text","Georgia",Cambria,"Times New Roman",Times,serif;--mono:"JetBrains Mono","Fira Code","Source Code Pro","Roboto Mono","Ubuntu Mono","Droid Sans Mono","Courier New",Courier,monospace}.dark{--background:0 0% 3.9%;--foreground:0 0% 98%;--card:0 0% 3.9%;--card-foreground:0 0% 98%;--popover:0 0% 3.9%;--popover-foreground:0 0% 98%;--primary:0 0% 98%;--primary-foreground:0 0% 9%;--secondary:0 0% 14.9%;--secondary-foreground:0 0% 98%;--muted:0 0% 14.9%;--muted-foreground:0 0% 63.9%;--accent:0 0% 14.9%;--accent-foreground:0 0% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:0 0% 98%;--border:0 0% 14.9%;--input:0 0% 14.9%;--ring:0 0% 83.1%;--chart-1:220 70% 50%;--chart-2:160 60% 45%;--chart-3:30 80% 55%;--chart-4:280 65% 60%;--chart-5:340 75% 55%;--text-primary:#fff;--text-secondary:#f3f3f3;--text-tertiary:#afafaf;--text-inverted:#0d0d0d;--text-inverted-static:#fff;--text-accent:#66b5ff;--text-status-warning:#ff9e6c;--text-status-error:#ff8583}*{border-color:var(--color-border);outline-color:color-mix(in srgb,hsl(var(--ring))50%,transparent)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--color-ring)50%,transparent)}}body{background-color:var(--color-background);color:var(--color-foreground)}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.inset-x-0{inset-inline:calc(var(--spacing)*0)}.-top-2{top:calc(var(--spacing)*-2)}.top-0{top:calc(var(--spacing)*0)}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\\[50\\%\\]{top:50%}.-right-2{right:calc(var(--spacing)*-2)}.right-1\\/2{right:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-2{bottom:calc(var(--spacing)*2)}.bottom-4{bottom:calc(var(--spacing)*4)}.bottom-24{bottom:calc(var(--spacing)*24)}.bottom-36{bottom:calc(var(--spacing)*36)}.left-0{left:calc(var(--spacing)*0)}.left-1\\/2{left:50%}.left-2{left:calc(var(--spacing)*2)}.left-\\[50\\%\\]{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-100{z-index:100}.z-\\[60\\]{z-index:60}.z-\\[10002\\]{z-index:10002}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.\\!m-0{margin:calc(var(--spacing)*0)!important}.m-0{margin:calc(var(--spacing)*0)}.-mx-1{margin-inline:calc(var(--spacing)*-1)}.mx-0\\.5{margin-inline:calc(var(--spacing)*.5)}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-4{margin-inline:calc(var(--spacing)*4)}.mx-auto{margin-inline:auto}.my-0\\.5{margin-block:calc(var(--spacing)*.5)}.my-1{margin-block:calc(var(--spacing)*1)}.my-3{margin-block:calc(var(--spacing)*3)}.my-4{margin-block:calc(var(--spacing)*4)}.my-6{margin-block:calc(var(--spacing)*6)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.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-8{margin-bottom:calc(var(--spacing)*8)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.mb-\\[5px\\]{margin-bottom:5px}.ml-0{margin-left:calc(var(--spacing)*0)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.ml-14{margin-left:calc(var(--spacing)*14)}.ml-auto{margin-left:auto}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\\!flex{display:flex!important}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.size-1{width:calc(var(--spacing)*1);height:calc(var(--spacing)*1)}.size-2\\.5{width:calc(var(--spacing)*2.5);height:calc(var(--spacing)*2.5)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.h-1{height:calc(var(--spacing)*1)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-3\\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.h-40{height:calc(var(--spacing)*40)}.h-48{height:calc(var(--spacing)*48)}.h-\\[30px\\]{height:30px}.h-\\[44px\\]{height:44px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-48{max-height:calc(var(--spacing)*48)}.max-h-96{max-height:calc(var(--spacing)*96)}.max-h-\\[80vh\\]{max-height:80vh}.max-h-\\[90vh\\]{max-height:90vh}.max-h-\\[300px\\]{max-height:300px}.max-h-\\[400px\\]{max-height:400px}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\\[40px\\]{min-height:40px}.min-h-\\[44px\\]{min-height:44px}.min-h-full{min-height:100%}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-20{width:calc(var(--spacing)*20)}.w-64{width:calc(var(--spacing)*64)}.w-72{width:calc(var(--spacing)*72)}.w-\\[45\\%\\]{width:45%}.w-\\[85\\%\\]{width:85%}.w-\\[90\\%\\]{width:90%}.w-\\[95\\%\\]{width:95%}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-64{max-width:calc(var(--spacing)*64)}.max-w-\\[70\\%\\]{max-width:70%}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-32{min-width:calc(var(--spacing)*32)}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-auto{flex-basis:auto}.-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-1\\/2{--tw-translate-x: 50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-\\[-50\\%\\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-75{--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-\\[80\\%\\]{scale:80%}.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,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.\\!cursor-col-resize{cursor:col-resize!important}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize{resize:both}.resize-none{resize:none}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.\\!items-center{align-items:center!important}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.\\!justify-center{justify-content:center!important}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-evenly{justify-content:space-evenly}.justify-start{justify-content:flex-start}.\\!gap-3\\.5{gap:calc(var(--spacing)*3.5)!important}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>: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)))}:where(.space-y-1\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>: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)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>: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)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*12)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*12)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>: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)))}:where(.space-x-2>: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)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-scroll{overflow-y:scroll}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-none\\!{--tw-border-style:none!important;border-style:none!important}.border-black{border-color:var(--color-black)}.border-blue-200{border-color:var(--color-blue-200)}.border-border{border-color:var(--color-border)}.border-border\\/10{border-color:color-mix(in srgb,hsl(var(--border))10%,transparent)}@supports (color:color-mix(in lab,red,red)){.border-border\\/10{border-color:color-mix(in oklab,var(--color-border)10%,transparent)}}.border-destructive{border-color:var(--color-destructive)}.border-gray-50{border-color:var(--color-gray-50)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-900{border-color:var(--color-gray-900)}.border-green-200{border-color:var(--color-green-200)}.border-input{border-color:var(--color-input)}.border-muted{border-color:var(--color-muted)}.border-orange-200{border-color:var(--color-orange-200)}.border-red-200{border-color:var(--color-red-200)}.border-transparent{border-color:#0000}.border-t-black{border-top-color:var(--color-black)}.bg-\\[\\#e3e3e3\\]{background-color:#e3e3e3}.bg-\\[\\#e9e9e980\\]{background-color:#e9e9e980}.bg-\\[\\#f4f4f4\\]{background-color:#f4f4f4}.bg-\\[\\#f5f5f5\\]{background-color:#f5f5f5}.bg-\\[\\#f6f8fa\\]{background-color:#f6f8fa}.bg-\\[\\#f9f9f9\\]{background-color:#f9f9f9}.bg-\\[\\#ffffff\\]{background-color:#fff}.bg-background{background-color:var(--color-background)}.bg-background\\/80{background-color:color-mix(in srgb,hsl(var(--background))80%,transparent)}@supports (color:color-mix(in lab,red,red)){.bg-background\\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.bg-black\\/80{background-color:color-mix(in oklab,var(--color-black)80%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-200{background-color:var(--color-blue-200)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-border{background-color:var(--color-border)}.bg-destructive{background-color:var(--color-destructive)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-green-50{background-color:var(--color-green-50)}.bg-muted{background-color:var(--color-muted)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-popover{background-color:var(--color-popover)}.bg-primary{background-color:var(--color-primary)}.bg-red-50{background-color:var(--color-red-50)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from:var(--color-blue-400);--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))}.from-gray-300{--tw-gradient-from:var(--color-gray-300);--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))}.from-gray-400{--tw-gradient-from:var(--color-gray-400);--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))}.from-green-400{--tw-gradient-from:var(--color-green-400);--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))}.from-indigo-500{--tw-gradient-from:var(--color-indigo-500);--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))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--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))}.from-purple-400{--tw-gradient-from:var(--color-purple-400);--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))}.from-red-200{--tw-gradient-from:var(--color-red-200);--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))}.from-red-500{--tw-gradient-from:var(--color-red-500);--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))}.via-blue-500{--tw-gradient-via:var(--color-blue-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-gray-500{--tw-gradient-via:var(--color-gray-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-orange-500{--tw-gradient-via:var(--color-orange-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-red-500{--tw-gradient-via:var(--color-red-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-rose-400{--tw-gradient-via:var(--color-rose-400);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-blue-600{--tw-gradient-to:var(--color-blue-600);--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))}.to-cyan-500{--tw-gradient-to:var(--color-cyan-500);--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))}.to-gray-600{--tw-gradient-to:var(--color-gray-600);--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))}.to-gray-700{--tw-gradient-to:var(--color-gray-700);--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))}.to-green-600{--tw-gradient-to:var(--color-green-600);--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))}.to-orange-500{--tw-gradient-to:var(--color-orange-500);--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))}.to-pink-600{--tw-gradient-to:var(--color-pink-600);--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))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--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))}.to-yellow-500{--tw-gradient-to:var(--color-yellow-500);--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))}.fill-\\[\\#0B0D32\\]{fill:#0b0d32}.fill-black{fill:var(--color-black)}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.p-1{padding:calc(var(--spacing)*1)}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-3\\.5{padding:calc(var(--spacing)*3.5)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-\\[0\\.1rem\\]{padding:.1rem}.p-\\[2px\\]{padding:2px}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0{padding-block:calc(var(--spacing)*0)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.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-2\\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-\\[10px\\]{padding-block:10px}.pt-0{padding-top:calc(var(--spacing)*0)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-6{padding-top:calc(var(--spacing)*6)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-8{padding-right:calc(var(--spacing)*8)}.pb-0\\.5{padding-bottom:calc(var(--spacing)*.5)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.pl-1{padding-left:calc(var(--spacing)*1)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-4{padding-left:calc(var(--spacing)*4)}.pl-5{padding-left:calc(var(--spacing)*5)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.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-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.leading-\\[1\\.65rem\\]{--tw-leading:1.65rem;line-height:1.65rem}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.-tracking-\\[0\\.015em\\]{--tw-tracking: -.015em ;letter-spacing:-.015em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-wrap{text-wrap:wrap}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\\[\\#24292e\\]{color:#24292e}.text-\\[\\#cbcbcb\\]{color:#cbcbcb}.text-black\\/60{color:#0009}@supports (color:color-mix(in lab,red,red)){.text-black\\/60{color:color-mix(in oklab,var(--color-black)60%,transparent)}}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-current{color:currentColor}.text-destructive{color:var(--color-destructive)}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-foreground{color:var(--color-foreground)}.text-foreground\\/50{color:color-mix(in srgb,hsl(var(--foreground))50%,transparent)}@supports (color:color-mix(in lab,red,red)){.text-foreground\\/50{color:color-mix(in oklab,var(--color-foreground)50%,transparent)}}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-500{color:var(--color-green-500)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-orange-800{color:var(--color-orange-800)}.text-popover-foreground{color:var(--color-popover-foreground)}.text-primary{color:var(--color-primary)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + 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)}.ring-0\\!{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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-xs{--tw-backdrop-blur:blur(var(--blur-xs));-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-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;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-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.animate-in{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.outline-solid{--tw-outline-style:solid;outline-style:solid}.select-none{-webkit-user-select:none;user-select:none}.duration-150{animation-duration:.15s}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.duration-500{animation-duration:.5s}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.fade-in-0{--tw-enter-opacity:0}.running{animation-play-state:running}.zoom-in-95{--tw-enter-scale:.95}.not-last\\:border-b-\\[1\\.5px\\]:not(:last-child){border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}@media (hover:hover){.group-hover\\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.group-hover\\:text-black:is(:where(.group):hover *){color:var(--color-black)}.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-\\[\\.destructive\\]\\:border-muted\\/40:is(:where(.group).destructive *){border-color:color-mix(in srgb,hsl(var(--muted))40%,transparent)}@supports (color:color-mix(in lab,red,red)){.group-\\[\\.destructive\\]\\:border-muted\\/40:is(:where(.group).destructive *){border-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.group-\\[\\.destructive\\]\\:text-red-300:is(:where(.group).destructive *){color:var(--color-red-300)}.peer-disabled\\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.placeholder\\:text-gray-500::placeholder{color:var(--color-gray-500)}.placeholder\\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--spacing)*0)}.after\\:left-1\\/2:after{content:var(--tw-content);left:50%}.after\\:w-1:after{content:var(--tw-content);width:calc(var(--spacing)*1)}.after\\:-translate-x-1\\/2:after{content:var(--tw-content);--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:bg-\\[\\#dbdbdb\\]:hover{background-color:#dbdbdb}.hover\\:bg-\\[\\#e3e3e3\\]\\/50:hover{background-color:#e3e3e380}.hover\\:bg-accent:hover{background-color:var(--color-accent)}.hover\\:bg-black:hover{background-color:var(--color-black)}.hover\\:bg-destructive\\/80:hover{background-color:color-mix(in srgb,hsl(var(--destructive))80%,transparent)}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-destructive\\/80:hover{background-color:color-mix(in oklab,var(--color-destructive)80%,transparent)}}.hover\\:bg-destructive\\/90:hover{background-color:color-mix(in srgb,hsl(var(--destructive))90%,transparent)}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-destructive\\/90:hover{background-color:color-mix(in oklab,var(--color-destructive)90%,transparent)}}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\\:bg-gray-700\\/50:hover{background-color:#36415380}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-gray-700\\/50:hover{background-color:color-mix(in oklab,var(--color-gray-700)50%,transparent)}}.hover\\:bg-primary\\/90:hover{background-color:#469a4ce6}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-primary\\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\\:bg-secondary:hover{background-color:var(--color-secondary)}.hover\\:bg-secondary\\/80:hover{background-color:#edf6eecc}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-secondary\\/80:hover{background-color:color-mix(in oklab,var(--color-secondary)80%,transparent)}}.hover\\:bg-transparent:hover{background-color:#0000}.hover\\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\\:text-black:hover{color:var(--color-black)}.hover\\:text-blue-600:hover{color:var(--color-blue-600)}.hover\\:text-foreground:hover{color:var(--color-foreground)}.hover\\:text-gray-700:hover{color:var(--color-gray-700)}.hover\\:text-gray-900:hover{color:var(--color-gray-900)}.hover\\:no-underline:hover{text-decoration-line:none}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:opacity-100:hover{opacity:1}.hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\\:shadow-sm:hover{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\\:group-\\[\\.destructive\\]\\:border-destructive\\/30:hover:is(:where(.group).destructive *){border-color:color-mix(in srgb,hsl(var(--destructive))30%,transparent)}@supports (color:color-mix(in lab,red,red)){.hover\\:group-\\[\\.destructive\\]\\:border-destructive\\/30:hover:is(:where(.group).destructive *){border-color:color-mix(in oklab,var(--color-destructive)30%,transparent)}}.hover\\:group-\\[\\.destructive\\]\\:bg-destructive:hover:is(:where(.group).destructive *){background-color:var(--color-destructive)}.hover\\:group-\\[\\.destructive\\]\\:text-destructive-foreground:hover:is(:where(.group).destructive *){color:var(--color-destructive-foreground)}.hover\\:group-\\[\\.destructive\\]\\:text-red-50:hover:is(:where(.group).destructive *){color:var(--color-red-50)}}.focus\\:bg-accent:focus{background-color:var(--color-accent)}.focus\\:text-accent-foreground:focus{color:var(--color-accent-foreground)}.focus\\:text-red-600:focus{color:var(--color-red-600)}.focus\\:opacity-100:focus{opacity:1}.focus\\:ring-2:focus{--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\\:ring-ring:focus{--tw-ring-color:var(--color-ring)}.focus\\:ring-offset-2:focus{--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\\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus\\:group-\\[\\.destructive\\]\\:ring-destructive:focus:is(:where(.group).destructive *){--tw-ring-color:var(--color-destructive)}.focus\\:group-\\[\\.destructive\\]\\:ring-red-400:focus:is(:where(.group).destructive *){--tw-ring-color:var(--color-red-400)}.focus\\:group-\\[\\.destructive\\]\\:ring-offset-red-600:focus:is(:where(.group).destructive *){--tw-ring-offset-color:var(--color-red-600)}.focus-visible\\:ring-1:focus-visible{--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)}.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-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.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\\:ring-offset-background:focus-visible{--tw-ring-offset-color:var(--color-background)}.focus-visible\\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus-visible\\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.data-disabled\\:pointer-events-none[data-disabled]{pointer-events:none}.data-disabled\\:opacity-50[data-disabled]{opacity:.5}.data-\\[disabled\\=true\\]\\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\\[disabled\\=true\\]\\:opacity-50[data-disabled=true]{opacity:.5}.data-\\[panel-group-direction\\=vertical\\]\\:h-px[data-panel-group-direction=vertical]{height:1px}.data-\\[panel-group-direction\\=vertical\\]\\:w-full[data-panel-group-direction=vertical]{width:100%}.data-\\[panel-group-direction\\=vertical\\]\\:flex-col[data-panel-group-direction=vertical]{flex-direction:column}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:left-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);left:calc(var(--spacing)*0)}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:h-1[data-panel-group-direction=vertical]:after{content:var(--tw-content);height:calc(var(--spacing)*1)}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:w-full[data-panel-group-direction=vertical]:after{content:var(--tw-content);width:100%}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:translate-x-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:-translate-y-1\\/2[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[selected\\=\\'true\\'\\]\\:bg-accent[data-selected=true]{background-color:var(--color-accent)}.data-\\[selected\\=true\\]\\:text-accent-foreground[data-selected=true]{color:var(--color-accent-foreground)}.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:-.5rem}.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:.5rem}.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:-.5rem}.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:.5rem}.data-\\[state\\=checked\\]\\:translate-x-4[data-state=checked]{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[state\\=checked\\]\\:bg-black[data-state=checked]{background-color:var(--color-black)}.data-\\[state\\=checked\\]\\:text-white[data-state=checked]{color:var(--color-white)}.data-\\[state\\=closed\\]\\:animate-accordion-up[data-state=closed]{animation:var(--animate-accordion-up)}.data-\\[state\\=closed\\]\\:animate-out[data-state=closed]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\\[state\\=closed\\]\\:fade-out-80[data-state=closed]{--tw-exit-opacity:.8}.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=closed]{--tw-exit-translate-x:-50%}.data-\\[state\\=closed\\]\\:slide-out-to-right-full[data-state=closed]{--tw-exit-translate-x:100%}.data-\\[state\\=closed\\]\\:slide-out-to-top-\\[48\\%\\][data-state=closed]{--tw-exit-translate-y:-48%}.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\\[state\\=open\\]\\:animate-accordion-down[data-state=open]{animation:var(--animate-accordion-down)}.data-\\[state\\=open\\]\\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\\[state\\=open\\]\\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}.data-\\[state\\=open\\]\\:animate-in[data-state=open]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.data-\\[state\\=open\\]\\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=open]{--tw-enter-translate-x:-50%}.data-\\[state\\=open\\]\\:slide-in-from-top-\\[48\\%\\][data-state=open]{--tw-enter-translate-y:-48%}.data-\\[state\\=open\\]\\:slide-in-from-top-full[data-state=open]{--tw-enter-translate-y:-100%}.data-\\[state\\=open\\]\\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[state\\=unchecked\\]\\:bg-gray-300[data-state=unchecked]{background-color:var(--color-gray-300)}.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked]{background-color:var(--color-input)}.data-\\[swipe\\=cancel\\]\\:translate-x-0[data-swipe=cancel]{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[swipe\\=end\\]\\:translate-x-\\(--radix-toast-swipe-end-x\\)[data-swipe=end]{--tw-translate-x:var(--radix-toast-swipe-end-x);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[swipe\\=end\\]\\:animate-out[data-swipe=end]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\\[swipe\\=move\\]\\:translate-x-\\(--radix-toast-swipe-move-x\\)[data-swipe=move]{--tw-translate-x:var(--radix-toast-swipe-move-x);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[swipe\\=move\\]\\:transition-none[data-swipe=move]{transition-property:none}@media not all and (min-width:48rem){.max-md\\:hidden{display:none}}@media (min-width:690px){.min-\\[690px\\]\\:z-20{z-index:20}.min-\\[690px\\]\\:ml-64{margin-left:calc(var(--spacing)*64)}.min-\\[690px\\]\\:hidden{display:none}.min-\\[690px\\]\\:w-\\[calc\\(100\\%-16rem\\)\\]{width:calc(100% - 16rem)}}@media (min-width:1800px){.min-\\[1800px\\]\\:block{display:block}}@media (min-width:40rem){.sm\\:top-auto{top:auto}.sm\\:right-0{right:calc(var(--spacing)*0)}.sm\\:bottom-0{bottom:calc(var(--spacing)*0)}.sm\\:mx-0{margin-inline:calc(var(--spacing)*0)}.sm\\:block{display:block}.sm\\:hidden{display:none}.sm\\:inline{display:inline}.sm\\:h-4{height:calc(var(--spacing)*4)}.sm\\:h-7{height:calc(var(--spacing)*7)}.sm\\:h-8{height:calc(var(--spacing)*8)}.sm\\:h-16{height:calc(var(--spacing)*16)}.sm\\:w-4{width:calc(var(--spacing)*4)}.sm\\:w-8{width:calc(var(--spacing)*8)}.sm\\:w-16{width:calc(var(--spacing)*16)}.sm\\:w-96{width:calc(var(--spacing)*96)}.sm\\:w-\\[min\\(600px\\)\\]{width:600px}.sm\\:w-auto{width:auto}.sm\\:max-w-\\[90vw\\]{max-width:90vw}.sm\\:max-w-\\[600px\\]{max-width:600px}.sm\\:flex-col{flex-direction:column}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:justify-end{justify-content:flex-end}:where(.sm\\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}:where(.sm\\:space-y-1>: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)))}:where(.sm\\:space-x-2>: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)))}:where(.sm\\:space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.sm\\:rounded-3xl{border-radius:var(--radius-3xl)}.sm\\:rounded-lg{border-radius:var(--radius-lg)}.sm\\:p-1\\.5{padding:calc(var(--spacing)*1.5)}.sm\\:p-3{padding:calc(var(--spacing)*3)}.sm\\:p-4{padding:calc(var(--spacing)*4)}.sm\\:px-4{padding-inline:calc(var(--spacing)*4)}.sm\\:py-3{padding-block:calc(var(--spacing)*3)}.sm\\:text-left{text-align:left}.sm\\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\\:data-\\[state\\=open\\]\\:slide-in-from-bottom-full[data-state=open]{--tw-enter-translate-y:100%}}@media (min-width:48rem){.md\\:mt-0{margin-top:calc(var(--spacing)*0)}.md\\:block{display:block}.md\\:hidden{display:none}.md\\:inline{display:inline}.md\\:h-8{height:calc(var(--spacing)*8)}.md\\:max-w-\\[420px\\]{max-width:420px}.md\\:px-11{padding-inline:calc(var(--spacing)*11)}.md\\:pt-6{padding-top:calc(var(--spacing)*6)}}@media (min-width:64rem){.lg\\:block{display:block}.lg\\:hidden{display:none}.lg\\:max-w-3xl{max-width:var(--container-3xl)}}@media (min-width:80rem){.xl\\:block{display:block}.xl\\:hidden{display:none}}@media (min-width:96rem){.\\32xl\\:hidden{display:none}.\\32xl\\:max-w-4xl{max-width:var(--container-4xl)}@media not all and (min-width:1800px){.\\32xl\\:max-\\[1800px\\]\\:block\\!{display:block!important}}}.dark\\:block:is(.dark *){display:block}.dark\\:hidden:is(.dark *){display:none}.dark\\:border-border\\/80:is(.dark *){border-color:color-mix(in srgb,hsl(var(--border))80%,transparent)}@supports (color:color-mix(in lab,red,red)){.dark\\:border-border\\/80:is(.dark *){border-color:color-mix(in oklab,var(--color-border)80%,transparent)}}.dark\\:border-gray-100:is(.dark *){border-color:var(--color-gray-100)}.dark\\:border-gray-500:is(.dark *){border-color:var(--color-gray-500)}.dark\\:border-gray-600:is(.dark *){border-color:var(--color-gray-600)}.dark\\:border-gray-700:is(.dark *){border-color:var(--color-gray-700)}.dark\\:border-white:is(.dark *){border-color:var(--color-white)}.dark\\:border-t-white:is(.dark *){border-top-color:var(--color-white)}.dark\\:bg-\\[\\#0d1117\\]:is(.dark *){background-color:#0d1117}.dark\\:bg-\\[\\#2f2f2f\\]:is(.dark *){background-color:#2f2f2f}.dark\\:bg-\\[\\#3d3d3d\\]:is(.dark *){background-color:#3d3d3d}.dark\\:bg-\\[\\#171717\\]:is(.dark *){background-color:#171717}.dark\\:bg-\\[\\#212121\\]:is(.dark *){background-color:#212121}.dark\\:bg-background:is(.dark *){background-color:var(--color-background)}.dark\\:bg-black:is(.dark *){background-color:var(--color-black)}.dark\\:bg-blue-900\\/50:is(.dark *){background-color:#1c398e80}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-blue-900\\/50:is(.dark *){background-color:color-mix(in oklab,var(--color-blue-900)50%,transparent)}}.dark\\:bg-gray-500:is(.dark *){background-color:var(--color-gray-500)}.dark\\:bg-gray-700:is(.dark *){background-color:var(--color-gray-700)}.dark\\:bg-gray-800:is(.dark *){background-color:var(--color-gray-800)}.dark\\:bg-gray-800\\/50:is(.dark *){background-color:#1e293980}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-gray-800\\/50:is(.dark *){background-color:color-mix(in oklab,var(--color-gray-800)50%,transparent)}}.dark\\:bg-gray-900:is(.dark *){background-color:var(--color-gray-900)}.dark\\:bg-gray-900\\/50:is(.dark *){background-color:#10182880}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-gray-900\\/50:is(.dark *){background-color:color-mix(in oklab,var(--color-gray-900)50%,transparent)}}.dark\\:bg-red-900\\/20:is(.dark *){background-color:#82181a33}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-red-900\\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-red-900)20%,transparent)}}.dark\\:bg-white:is(.dark *){background-color:var(--color-white)}.dark\\:bg-zinc-800:is(.dark *){background-color:var(--color-zinc-800)}.dark\\:from-gray-800:is(.dark *){--tw-gradient-from:var(--color-gray-800);--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))}.dark\\:fill-\\[\\#DFFE00\\]:is(.dark *){fill:#dffe00}.dark\\:fill-\\[\\#F7F7F8\\]:is(.dark *){fill:#f7f7f8}.dark\\:fill-white:is(.dark *){fill:var(--color-white)}.dark\\:text-\\[\\#c9d1d9\\]:is(.dark *){color:#c9d1d9}.dark\\:text-black:is(.dark *){color:var(--color-black)}.dark\\:text-blue-300:is(.dark *){color:var(--color-blue-300)}.dark\\:text-gray-100:is(.dark *){color:var(--color-gray-100)}.dark\\:text-gray-300:is(.dark *){color:var(--color-gray-300)}.dark\\:text-gray-400:is(.dark *){color:var(--color-gray-400)}.dark\\:text-gray-500:is(.dark *){color:var(--color-gray-500)}.dark\\:text-gray-600:is(.dark *){color:var(--color-gray-600)}.dark\\:text-red-500:is(.dark *){color:var(--color-red-500)}.dark\\:text-white:is(.dark *){color:var(--color-white)}.dark\\:text-white\\/60:is(.dark *){color:#fff9}@supports (color:color-mix(in lab,red,red)){.dark\\:text-white\\/60:is(.dark *){color:color-mix(in oklab,var(--color-white)60%,transparent)}}@media (hover:hover){.dark\\:dark\\:group-hover\\:text-white:is(.dark *):is(.dark *):is(:where(.group):hover *){color:var(--color-white)}}.dark\\:placeholder\\:text-gray-400:is(.dark *)::placeholder{color:var(--color-gray-400)}@media (hover:hover){.dark\\:hover\\:bg-\\[\\#2a2a2a\\]:is(.dark *):hover{background-color:#2a2a2a}.dark\\:hover\\:bg-gray-800:is(.dark *):hover{background-color:var(--color-gray-800)}.dark\\:hover\\:bg-gray-900:is(.dark *):hover{background-color:var(--color-gray-900)}.dark\\:hover\\:bg-white:is(.dark *):hover{background-color:var(--color-white)}.dark\\:hover\\:bg-zinc-800\\/50:is(.dark *):hover{background-color:#27272a80}@supports (color:color-mix(in lab,red,red)){.dark\\:hover\\:bg-zinc-800\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--color-zinc-800)50%,transparent)}}.dark\\:hover\\:text-gray-100:is(.dark *):hover{color:var(--color-gray-100)}.dark\\:hover\\:text-gray-300:is(.dark *):hover{color:var(--color-gray-300)}.dark\\:hover\\:text-white:is(.dark *):hover{color:var(--color-white)}}.dark\\:data-\\[state\\=checked\\]\\:bg-white:is(.dark *)[data-state=checked]{background-color:var(--color-white)}.dark\\:data-\\[state\\=checked\\]\\:text-black:is(.dark *)[data-state=checked]{color:var(--color-black)}.dark\\:data-\\[state\\=unchecked\\]\\:bg-gray-600:is(.dark *)[data-state=unchecked]{background-color:var(--color-gray-600)}.\\[\\&_\\>_\\*\\]\\:min-w-0>*{min-width:calc(var(--spacing)*0)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 [cmdk-group-heading]{padding-inline:calc(var(--spacing)*2)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 [cmdk-group-heading]{padding-block:calc(var(--spacing)*1.5)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs [cmdk-group-heading]{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium [cmdk-group-heading]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground [cmdk-group-heading]{color:var(--color-muted-foreground)}.\\[\\&_\\[cmdk-group\\]\\]\\:px-2 [cmdk-group]{padding-inline:calc(var(--spacing)*2)}.\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group]{padding-top:calc(var(--spacing)*0)}.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 [cmdk-input-wrapper] svg{height:calc(var(--spacing)*5)}.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 [cmdk-input-wrapper] svg{width:calc(var(--spacing)*5)}.\\[\\&_\\[cmdk-input\\]\\]\\:h-12 [cmdk-input]{height:calc(var(--spacing)*12)}.\\[\\&_\\[cmdk-item\\]\\]\\:px-2 [cmdk-item]{padding-inline:calc(var(--spacing)*2)}.\\[\\&_\\[cmdk-item\\]\\]\\:py-3 [cmdk-item]{padding-block:calc(var(--spacing)*3)}.\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 [cmdk-item] svg{height:calc(var(--spacing)*5)}.\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 [cmdk-item] svg{width:calc(var(--spacing)*5)}.\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.\\[\\&\\[data-panel-group-direction\\=vertical\\]\\>div\\]\\:rotate-90[data-panel-group-direction=vertical]>div{rotate:90deg}.\\[\\&\\[data-state\\=open\\]_svg\\]\\:rotate-180[data-state=open] svg{rotate:180deg}html{height:100%}body{height:100%;font-family:var(--sans)}.frame-root,.frame-content,#root{height:100%}}.code-block{font-family:var(--mono)}h1,h2,h3{font-family:var(--sans)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0))}}@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-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-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-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@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%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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:0}@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-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}`;
+	BB = `/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@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-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--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-divide-y-reverse:0;--tw-border-style:solid;--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%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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-content:""}}}@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-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-900:oklch(39.6% .141 25.723);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-800:oklch(47% .157 37.304);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-50:oklch(98.2% .018 155.826);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-cyan-500:oklch(71.5% .143 215.221);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-500:oklch(58.5% .233 277.117);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-400:oklch(71.2% .194 13.428);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-zinc-800:oklch(27.4% .006 286.033);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-xs:4px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:hsl(var(--background));--color-foreground:hsl(var(--foreground));--color-popover:hsl(var(--popover));--color-popover-foreground:hsl(var(--popover-foreground));--color-primary:#469a4c;--color-secondary:#edf6ee;--color-muted:hsl(var(--muted));--color-muted-foreground:hsl(var(--muted-foreground));--color-accent:hsl(var(--accent));--color-accent-foreground:hsl(var(--accent-foreground));--color-destructive:hsl(var(--destructive));--color-destructive-foreground:hsl(var(--destructive-foreground));--color-border:hsl(var(--border));--color-input:hsl(var(--input));--color-ring:hsl(var(--ring));--animate-accordion-down:accordion-down .2s ease-out;--animate-accordion-up:accordion-up .2s ease-out}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;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{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.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{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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)){::placeholder{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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before,::backdrop{border-color:var(--color-gray-200,currentcolor)}::file-selector-button{border-color:var(--color-gray-200,currentcolor)}:root{--background:0 0% 100%;--foreground:0 0% 3.9%;--card:0 0% 100%;--card-foreground:0 0% 3.9%;--popover:0 0% 100%;--popover-foreground:0 0% 3.9%;--primary:0 0% 9%;--primary-foreground:0 0% 98%;--secondary:0 0% 96.1%;--secondary-foreground:0 0% 9%;--muted:0 0% 96.1%;--muted-foreground:0 0% 45.1%;--accent:0 0% 96.1%;--accent-foreground:0 0% 9%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:0 0% 89.8%;--input:0 0% 89.8%;--ring:0 0% 3.9%;--chart-1:12 76% 61%;--chart-2:173 58% 39%;--chart-3:197 37% 24%;--chart-4:43 74% 66%;--chart-5:27 87% 67%;--radius:.5rem;--text-primary:#0d0d0d;--text-secondary:#5d5d5d;--text-tertiary:#8f8f8f;--text-inverted:#fff;--text-inverted-static:#fff;--text-accent:#66b5ff;--text-status-warning:#e25507;--text-status-error:#e02e2a;--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--serif:"Lora","Playfair Display","Crimson Text","Georgia",Cambria,"Times New Roman",Times,serif;--mono:"JetBrains Mono","Fira Code","Source Code Pro","Roboto Mono","Ubuntu Mono","Droid Sans Mono","Courier New",Courier,monospace}.dark{--background:0 0% 3.9%;--foreground:0 0% 98%;--card:0 0% 3.9%;--card-foreground:0 0% 98%;--popover:0 0% 3.9%;--popover-foreground:0 0% 98%;--primary:0 0% 98%;--primary-foreground:0 0% 9%;--secondary:0 0% 14.9%;--secondary-foreground:0 0% 98%;--muted:0 0% 14.9%;--muted-foreground:0 0% 63.9%;--accent:0 0% 14.9%;--accent-foreground:0 0% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:0 0% 98%;--border:0 0% 14.9%;--input:0 0% 14.9%;--ring:0 0% 83.1%;--chart-1:220 70% 50%;--chart-2:160 60% 45%;--chart-3:30 80% 55%;--chart-4:280 65% 60%;--chart-5:340 75% 55%;--text-primary:#fff;--text-secondary:#f3f3f3;--text-tertiary:#afafaf;--text-inverted:#0d0d0d;--text-inverted-static:#fff;--text-accent:#66b5ff;--text-status-warning:#ff9e6c;--text-status-error:#ff8583}*{border-color:var(--color-border);outline-color:color-mix(in srgb,hsl(var(--ring))50%,transparent)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--color-ring)50%,transparent)}}body{background-color:var(--color-background);color:var(--color-foreground)}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.inset-x-0{inset-inline:calc(var(--spacing)*0)}.-top-2{top:calc(var(--spacing)*-2)}.top-0{top:calc(var(--spacing)*0)}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\\[50\\%\\]{top:50%}.-right-2{right:calc(var(--spacing)*-2)}.right-1\\/2{right:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-2{bottom:calc(var(--spacing)*2)}.bottom-4{bottom:calc(var(--spacing)*4)}.bottom-24{bottom:calc(var(--spacing)*24)}.bottom-36{bottom:calc(var(--spacing)*36)}.left-0{left:calc(var(--spacing)*0)}.left-1\\/2{left:50%}.left-2{left:calc(var(--spacing)*2)}.left-\\[50\\%\\]{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-100{z-index:100}.z-\\[60\\]{z-index:60}.z-\\[10002\\]{z-index:10002}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.\\!m-0{margin:calc(var(--spacing)*0)!important}.m-0{margin:calc(var(--spacing)*0)}.-mx-1{margin-inline:calc(var(--spacing)*-1)}.mx-0\\.5{margin-inline:calc(var(--spacing)*.5)}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-4{margin-inline:calc(var(--spacing)*4)}.mx-auto{margin-inline:auto}.my-0\\.5{margin-block:calc(var(--spacing)*.5)}.my-1{margin-block:calc(var(--spacing)*1)}.my-3{margin-block:calc(var(--spacing)*3)}.my-4{margin-block:calc(var(--spacing)*4)}.my-6{margin-block:calc(var(--spacing)*6)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.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-8{margin-bottom:calc(var(--spacing)*8)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.mb-\\[5px\\]{margin-bottom:5px}.ml-0{margin-left:calc(var(--spacing)*0)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.ml-14{margin-left:calc(var(--spacing)*14)}.ml-auto{margin-left:auto}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\\!flex{display:flex!important}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.size-1{width:calc(var(--spacing)*1);height:calc(var(--spacing)*1)}.size-2\\.5{width:calc(var(--spacing)*2.5);height:calc(var(--spacing)*2.5)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.h-1{height:calc(var(--spacing)*1)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-3\\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.h-40{height:calc(var(--spacing)*40)}.h-48{height:calc(var(--spacing)*48)}.h-\\[30px\\]{height:30px}.h-\\[44px\\]{height:44px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-48{max-height:calc(var(--spacing)*48)}.max-h-96{max-height:calc(var(--spacing)*96)}.max-h-\\[80vh\\]{max-height:80vh}.max-h-\\[90vh\\]{max-height:90vh}.max-h-\\[300px\\]{max-height:300px}.max-h-\\[400px\\]{max-height:400px}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\\[40px\\]{min-height:40px}.min-h-\\[44px\\]{min-height:44px}.min-h-full{min-height:100%}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-20{width:calc(var(--spacing)*20)}.w-64{width:calc(var(--spacing)*64)}.w-72{width:calc(var(--spacing)*72)}.w-\\[45\\%\\]{width:45%}.w-\\[85\\%\\]{width:85%}.w-\\[90\\%\\]{width:90%}.w-\\[95\\%\\]{width:95%}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-64{max-width:calc(var(--spacing)*64)}.max-w-\\[70\\%\\]{max-width:70%}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-32{min-width:calc(var(--spacing)*32)}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-auto{flex-basis:auto}.-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-1\\/2{--tw-translate-x: 50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-\\[-50\\%\\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-75{--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-\\[80\\%\\]{scale:80%}.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,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.\\!cursor-col-resize{cursor:col-resize!important}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize{resize:both}.resize-none{resize:none}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.\\!items-center{align-items:center!important}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.\\!justify-center{justify-content:center!important}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-evenly{justify-content:space-evenly}.justify-start{justify-content:flex-start}.\\!gap-3\\.5{gap:calc(var(--spacing)*3.5)!important}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>: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)))}:where(.space-y-1\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>: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)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>: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)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*12)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*12)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>: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)))}:where(.space-x-2>: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)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-scroll{overflow-y:scroll}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-none\\!{--tw-border-style:none!important;border-style:none!important}.border-black{border-color:var(--color-black)}.border-blue-200{border-color:var(--color-blue-200)}.border-border{border-color:var(--color-border)}.border-border\\/10{border-color:color-mix(in srgb,hsl(var(--border))10%,transparent)}@supports (color:color-mix(in lab,red,red)){.border-border\\/10{border-color:color-mix(in oklab,var(--color-border)10%,transparent)}}.border-destructive{border-color:var(--color-destructive)}.border-gray-50{border-color:var(--color-gray-50)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-900{border-color:var(--color-gray-900)}.border-green-200{border-color:var(--color-green-200)}.border-input{border-color:var(--color-input)}.border-muted{border-color:var(--color-muted)}.border-orange-200{border-color:var(--color-orange-200)}.border-red-200{border-color:var(--color-red-200)}.border-transparent{border-color:#0000}.border-t-black{border-top-color:var(--color-black)}.bg-\\[\\#e3e3e3\\]{background-color:#e3e3e3}.bg-\\[\\#e9e9e980\\]{background-color:#e9e9e980}.bg-\\[\\#f4f4f4\\]{background-color:#f4f4f4}.bg-\\[\\#f5f5f5\\]{background-color:#f5f5f5}.bg-\\[\\#f6f8fa\\]{background-color:#f6f8fa}.bg-\\[\\#f9f9f9\\]{background-color:#f9f9f9}.bg-\\[\\#ffffff\\]{background-color:#fff}.bg-background{background-color:var(--color-background)}.bg-background\\/80{background-color:color-mix(in srgb,hsl(var(--background))80%,transparent)}@supports (color:color-mix(in lab,red,red)){.bg-background\\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.bg-black\\/80{background-color:color-mix(in oklab,var(--color-black)80%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-200{background-color:var(--color-blue-200)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-border{background-color:var(--color-border)}.bg-destructive{background-color:var(--color-destructive)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-green-50{background-color:var(--color-green-50)}.bg-muted{background-color:var(--color-muted)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-popover{background-color:var(--color-popover)}.bg-primary{background-color:var(--color-primary)}.bg-red-50{background-color:var(--color-red-50)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from:var(--color-blue-400);--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))}.from-gray-300{--tw-gradient-from:var(--color-gray-300);--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))}.from-gray-400{--tw-gradient-from:var(--color-gray-400);--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))}.from-green-400{--tw-gradient-from:var(--color-green-400);--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))}.from-indigo-500{--tw-gradient-from:var(--color-indigo-500);--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))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--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))}.from-purple-400{--tw-gradient-from:var(--color-purple-400);--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))}.from-red-200{--tw-gradient-from:var(--color-red-200);--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))}.from-red-500{--tw-gradient-from:var(--color-red-500);--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))}.via-blue-500{--tw-gradient-via:var(--color-blue-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-gray-500{--tw-gradient-via:var(--color-gray-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-orange-500{--tw-gradient-via:var(--color-orange-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-red-500{--tw-gradient-via:var(--color-red-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-rose-400{--tw-gradient-via:var(--color-rose-400);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-blue-600{--tw-gradient-to:var(--color-blue-600);--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))}.to-cyan-500{--tw-gradient-to:var(--color-cyan-500);--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))}.to-gray-600{--tw-gradient-to:var(--color-gray-600);--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))}.to-gray-700{--tw-gradient-to:var(--color-gray-700);--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))}.to-green-600{--tw-gradient-to:var(--color-green-600);--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))}.to-orange-500{--tw-gradient-to:var(--color-orange-500);--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))}.to-pink-600{--tw-gradient-to:var(--color-pink-600);--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))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--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))}.to-yellow-500{--tw-gradient-to:var(--color-yellow-500);--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))}.fill-\\[\\#0B0D32\\]{fill:#0b0d32}.fill-black{fill:var(--color-black)}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.p-1{padding:calc(var(--spacing)*1)}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-3\\.5{padding:calc(var(--spacing)*3.5)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-\\[0\\.1rem\\]{padding:.1rem}.p-\\[2px\\]{padding:2px}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0{padding-block:calc(var(--spacing)*0)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.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-2\\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-\\[10px\\]{padding-block:10px}.pt-0{padding-top:calc(var(--spacing)*0)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-6{padding-top:calc(var(--spacing)*6)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-8{padding-right:calc(var(--spacing)*8)}.pb-0\\.5{padding-bottom:calc(var(--spacing)*.5)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.pl-1{padding-left:calc(var(--spacing)*1)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-4{padding-left:calc(var(--spacing)*4)}.pl-5{padding-left:calc(var(--spacing)*5)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.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-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.leading-\\[1\\.65rem\\]{--tw-leading:1.65rem;line-height:1.65rem}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.-tracking-\\[0\\.015em\\]{--tw-tracking: -.015em ;letter-spacing:-.015em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-wrap{text-wrap:wrap}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\\[\\#24292e\\]{color:#24292e}.text-\\[\\#cbcbcb\\]{color:#cbcbcb}.text-black\\/60{color:#0009}@supports (color:color-mix(in lab,red,red)){.text-black\\/60{color:color-mix(in oklab,var(--color-black)60%,transparent)}}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-current{color:currentColor}.text-destructive{color:var(--color-destructive)}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-foreground{color:var(--color-foreground)}.text-foreground\\/50{color:color-mix(in srgb,hsl(var(--foreground))50%,transparent)}@supports (color:color-mix(in lab,red,red)){.text-foreground\\/50{color:color-mix(in oklab,var(--color-foreground)50%,transparent)}}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-500{color:var(--color-green-500)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-orange-800{color:var(--color-orange-800)}.text-popover-foreground{color:var(--color-popover-foreground)}.text-primary{color:var(--color-primary)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + 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)}.ring-0\\!{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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-xs{--tw-backdrop-blur:blur(var(--blur-xs));-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-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;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-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.animate-in{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.outline-solid{--tw-outline-style:solid;outline-style:solid}.select-none{-webkit-user-select:none;user-select:none}.duration-150{animation-duration:.15s}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.duration-500{animation-duration:.5s}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.fade-in-0{--tw-enter-opacity:0}.running{animation-play-state:running}.zoom-in-95{--tw-enter-scale:.95}.not-last\\:border-b-\\[1\\.5px\\]:not(:last-child){border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}@media (hover:hover){.group-hover\\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.group-hover\\:text-black:is(:where(.group):hover *){color:var(--color-black)}.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-\\[\\.destructive\\]\\:border-muted\\/40:is(:where(.group).destructive *){border-color:color-mix(in srgb,hsl(var(--muted))40%,transparent)}@supports (color:color-mix(in lab,red,red)){.group-\\[\\.destructive\\]\\:border-muted\\/40:is(:where(.group).destructive *){border-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.group-\\[\\.destructive\\]\\:text-red-300:is(:where(.group).destructive *){color:var(--color-red-300)}.peer-disabled\\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.placeholder\\:text-gray-500::placeholder{color:var(--color-gray-500)}.placeholder\\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--spacing)*0)}.after\\:left-1\\/2:after{content:var(--tw-content);left:50%}.after\\:w-1:after{content:var(--tw-content);width:calc(var(--spacing)*1)}.after\\:-translate-x-1\\/2:after{content:var(--tw-content);--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:bg-\\[\\#dbdbdb\\]:hover{background-color:#dbdbdb}.hover\\:bg-\\[\\#e3e3e3\\]\\/50:hover{background-color:#e3e3e380}.hover\\:bg-accent:hover{background-color:var(--color-accent)}.hover\\:bg-black:hover{background-color:var(--color-black)}.hover\\:bg-destructive\\/80:hover{background-color:color-mix(in srgb,hsl(var(--destructive))80%,transparent)}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-destructive\\/80:hover{background-color:color-mix(in oklab,var(--color-destructive)80%,transparent)}}.hover\\:bg-destructive\\/90:hover{background-color:color-mix(in srgb,hsl(var(--destructive))90%,transparent)}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-destructive\\/90:hover{background-color:color-mix(in oklab,var(--color-destructive)90%,transparent)}}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\\:bg-gray-700\\/50:hover{background-color:#36415380}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-gray-700\\/50:hover{background-color:color-mix(in oklab,var(--color-gray-700)50%,transparent)}}.hover\\:bg-primary\\/90:hover{background-color:#469a4ce6}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-primary\\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\\:bg-secondary:hover{background-color:var(--color-secondary)}.hover\\:bg-secondary\\/80:hover{background-color:#edf6eecc}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-secondary\\/80:hover{background-color:color-mix(in oklab,var(--color-secondary)80%,transparent)}}.hover\\:bg-transparent:hover{background-color:#0000}.hover\\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\\:text-black:hover{color:var(--color-black)}.hover\\:text-blue-600:hover{color:var(--color-blue-600)}.hover\\:text-foreground:hover{color:var(--color-foreground)}.hover\\:text-gray-700:hover{color:var(--color-gray-700)}.hover\\:text-gray-900:hover{color:var(--color-gray-900)}.hover\\:no-underline:hover{text-decoration-line:none}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:opacity-100:hover{opacity:1}.hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\\:shadow-sm:hover{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\\:group-\\[\\.destructive\\]\\:border-destructive\\/30:hover:is(:where(.group).destructive *){border-color:color-mix(in srgb,hsl(var(--destructive))30%,transparent)}@supports (color:color-mix(in lab,red,red)){.hover\\:group-\\[\\.destructive\\]\\:border-destructive\\/30:hover:is(:where(.group).destructive *){border-color:color-mix(in oklab,var(--color-destructive)30%,transparent)}}.hover\\:group-\\[\\.destructive\\]\\:bg-destructive:hover:is(:where(.group).destructive *){background-color:var(--color-destructive)}.hover\\:group-\\[\\.destructive\\]\\:text-destructive-foreground:hover:is(:where(.group).destructive *){color:var(--color-destructive-foreground)}.hover\\:group-\\[\\.destructive\\]\\:text-red-50:hover:is(:where(.group).destructive *){color:var(--color-red-50)}}.focus\\:bg-accent:focus{background-color:var(--color-accent)}.focus\\:text-accent-foreground:focus{color:var(--color-accent-foreground)}.focus\\:text-red-600:focus{color:var(--color-red-600)}.focus\\:opacity-100:focus{opacity:1}.focus\\:ring-2:focus{--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\\:ring-ring:focus{--tw-ring-color:var(--color-ring)}.focus\\:ring-offset-2:focus{--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\\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus\\:group-\\[\\.destructive\\]\\:ring-destructive:focus:is(:where(.group).destructive *){--tw-ring-color:var(--color-destructive)}.focus\\:group-\\[\\.destructive\\]\\:ring-red-400:focus:is(:where(.group).destructive *){--tw-ring-color:var(--color-red-400)}.focus\\:group-\\[\\.destructive\\]\\:ring-offset-red-600:focus:is(:where(.group).destructive *){--tw-ring-offset-color:var(--color-red-600)}.focus-visible\\:ring-1:focus-visible{--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)}.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-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.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\\:ring-offset-background:focus-visible{--tw-ring-offset-color:var(--color-background)}.focus-visible\\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus-visible\\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.data-disabled\\:pointer-events-none[data-disabled]{pointer-events:none}.data-disabled\\:opacity-50[data-disabled]{opacity:.5}.data-\\[disabled\\=true\\]\\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\\[disabled\\=true\\]\\:opacity-50[data-disabled=true]{opacity:.5}.data-\\[panel-group-direction\\=vertical\\]\\:h-px[data-panel-group-direction=vertical]{height:1px}.data-\\[panel-group-direction\\=vertical\\]\\:w-full[data-panel-group-direction=vertical]{width:100%}.data-\\[panel-group-direction\\=vertical\\]\\:flex-col[data-panel-group-direction=vertical]{flex-direction:column}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:left-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);left:calc(var(--spacing)*0)}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:h-1[data-panel-group-direction=vertical]:after{content:var(--tw-content);height:calc(var(--spacing)*1)}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:w-full[data-panel-group-direction=vertical]:after{content:var(--tw-content);width:100%}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:translate-x-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[panel-group-direction\\=vertical\\]\\:after\\:-translate-y-1\\/2[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[selected\\=\\'true\\'\\]\\:bg-accent[data-selected=true]{background-color:var(--color-accent)}.data-\\[selected\\=true\\]\\:text-accent-foreground[data-selected=true]{color:var(--color-accent-foreground)}.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:-.5rem}.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:.5rem}.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:-.5rem}.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:.5rem}.data-\\[state\\=checked\\]\\:translate-x-4[data-state=checked]{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[state\\=checked\\]\\:bg-black[data-state=checked]{background-color:var(--color-black)}.data-\\[state\\=checked\\]\\:text-white[data-state=checked]{color:var(--color-white)}.data-\\[state\\=closed\\]\\:animate-accordion-up[data-state=closed]{animation:var(--animate-accordion-up)}.data-\\[state\\=closed\\]\\:animate-out[data-state=closed]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\\[state\\=closed\\]\\:fade-out-80[data-state=closed]{--tw-exit-opacity:.8}.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=closed]{--tw-exit-translate-x:-50%}.data-\\[state\\=closed\\]\\:slide-out-to-right-full[data-state=closed]{--tw-exit-translate-x:100%}.data-\\[state\\=closed\\]\\:slide-out-to-top-\\[48\\%\\][data-state=closed]{--tw-exit-translate-y:-48%}.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\\[state\\=open\\]\\:animate-accordion-down[data-state=open]{animation:var(--animate-accordion-down)}.data-\\[state\\=open\\]\\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\\[state\\=open\\]\\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}.data-\\[state\\=open\\]\\:animate-in[data-state=open]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.data-\\[state\\=open\\]\\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=open]{--tw-enter-translate-x:-50%}.data-\\[state\\=open\\]\\:slide-in-from-top-\\[48\\%\\][data-state=open]{--tw-enter-translate-y:-48%}.data-\\[state\\=open\\]\\:slide-in-from-top-full[data-state=open]{--tw-enter-translate-y:-100%}.data-\\[state\\=open\\]\\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[state\\=unchecked\\]\\:bg-gray-300[data-state=unchecked]{background-color:var(--color-gray-300)}.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked]{background-color:var(--color-input)}.data-\\[swipe\\=cancel\\]\\:translate-x-0[data-swipe=cancel]{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[swipe\\=end\\]\\:translate-x-\\(--radix-toast-swipe-end-x\\)[data-swipe=end]{--tw-translate-x:var(--radix-toast-swipe-end-x);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[swipe\\=end\\]\\:animate-out[data-swipe=end]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\\[swipe\\=move\\]\\:translate-x-\\(--radix-toast-swipe-move-x\\)[data-swipe=move]{--tw-translate-x:var(--radix-toast-swipe-move-x);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[swipe\\=move\\]\\:transition-none[data-swipe=move]{transition-property:none}@media not all and (min-width:48rem){.max-md\\:hidden{display:none}}@media (min-width:690px){.min-\\[690px\\]\\:z-20{z-index:20}.min-\\[690px\\]\\:ml-64{margin-left:calc(var(--spacing)*64)}.min-\\[690px\\]\\:hidden{display:none}.min-\\[690px\\]\\:w-\\[calc\\(100\\%-16rem\\)\\]{width:calc(100% - 16rem)}}@media (min-width:1800px){.min-\\[1800px\\]\\:block{display:block}}@media (min-width:40rem){.sm\\:top-auto{top:auto}.sm\\:right-0{right:calc(var(--spacing)*0)}.sm\\:bottom-0{bottom:calc(var(--spacing)*0)}.sm\\:mx-0{margin-inline:calc(var(--spacing)*0)}.sm\\:block{display:block}.sm\\:hidden{display:none}.sm\\:inline{display:inline}.sm\\:h-4{height:calc(var(--spacing)*4)}.sm\\:h-7{height:calc(var(--spacing)*7)}.sm\\:h-8{height:calc(var(--spacing)*8)}.sm\\:h-16{height:calc(var(--spacing)*16)}.sm\\:w-4{width:calc(var(--spacing)*4)}.sm\\:w-8{width:calc(var(--spacing)*8)}.sm\\:w-16{width:calc(var(--spacing)*16)}.sm\\:w-96{width:calc(var(--spacing)*96)}.sm\\:w-\\[min\\(600px\\)\\]{width:600px}.sm\\:w-auto{width:auto}.sm\\:max-w-\\[90vw\\]{max-width:90vw}.sm\\:max-w-\\[600px\\]{max-width:600px}.sm\\:flex-col{flex-direction:column}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:justify-end{justify-content:flex-end}:where(.sm\\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}:where(.sm\\:space-y-1>: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)))}:where(.sm\\:space-x-2>: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)))}:where(.sm\\:space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.sm\\:rounded-3xl{border-radius:var(--radius-3xl)}.sm\\:rounded-sm{border-radius:var(--radius-lg)}.sm\\:p-1\\.5{padding:calc(var(--spacing)*1.5)}.sm\\:p-3{padding:calc(var(--spacing)*3)}.sm\\:p-4{padding:calc(var(--spacing)*4)}.sm\\:px-4{padding-inline:calc(var(--spacing)*4)}.sm\\:py-3{padding-block:calc(var(--spacing)*3)}.sm\\:text-left{text-align:left}.sm\\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\\:data-\\[state\\=open\\]\\:slide-in-from-bottom-full[data-state=open]{--tw-enter-translate-y:100%}}@media (min-width:48rem){.md\\:mt-0{margin-top:calc(var(--spacing)*0)}.md\\:block{display:block}.md\\:hidden{display:none}.md\\:inline{display:inline}.md\\:h-8{height:calc(var(--spacing)*8)}.md\\:max-w-\\[420px\\]{max-width:420px}.md\\:px-11{padding-inline:calc(var(--spacing)*11)}.md\\:pt-6{padding-top:calc(var(--spacing)*6)}}@media (min-width:64rem){.lg\\:block{display:block}.lg\\:hidden{display:none}.lg\\:max-w-3xl{max-width:var(--container-3xl)}}@media (min-width:80rem){.xl\\:block{display:block}.xl\\:hidden{display:none}}@media (min-width:96rem){.\\32xl\\:hidden{display:none}.\\32xl\\:max-w-4xl{max-width:var(--container-4xl)}@media not all and (min-width:1800px){.\\32xl\\:max-\\[1800px\\]\\:block\\!{display:block!important}}}.dark\\:block:is(.dark *){display:block}.dark\\:hidden:is(.dark *){display:none}.dark\\:border-border\\/80:is(.dark *){border-color:color-mix(in srgb,hsl(var(--border))80%,transparent)}@supports (color:color-mix(in lab,red,red)){.dark\\:border-border\\/80:is(.dark *){border-color:color-mix(in oklab,var(--color-border)80%,transparent)}}.dark\\:border-gray-100:is(.dark *){border-color:var(--color-gray-100)}.dark\\:border-gray-500:is(.dark *){border-color:var(--color-gray-500)}.dark\\:border-gray-600:is(.dark *){border-color:var(--color-gray-600)}.dark\\:border-gray-700:is(.dark *){border-color:var(--color-gray-700)}.dark\\:border-white:is(.dark *){border-color:var(--color-white)}.dark\\:border-t-white:is(.dark *){border-top-color:var(--color-white)}.dark\\:bg-\\[\\#0d1117\\]:is(.dark *){background-color:#0d1117}.dark\\:bg-\\[\\#2f2f2f\\]:is(.dark *){background-color:#2f2f2f}.dark\\:bg-\\[\\#3d3d3d\\]:is(.dark *){background-color:#3d3d3d}.dark\\:bg-\\[\\#171717\\]:is(.dark *){background-color:#171717}.dark\\:bg-\\[\\#212121\\]:is(.dark *){background-color:#212121}.dark\\:bg-background:is(.dark *){background-color:var(--color-background)}.dark\\:bg-black:is(.dark *){background-color:var(--color-black)}.dark\\:bg-blue-900\\/50:is(.dark *){background-color:#1c398e80}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-blue-900\\/50:is(.dark *){background-color:color-mix(in oklab,var(--color-blue-900)50%,transparent)}}.dark\\:bg-gray-500:is(.dark *){background-color:var(--color-gray-500)}.dark\\:bg-gray-700:is(.dark *){background-color:var(--color-gray-700)}.dark\\:bg-gray-800:is(.dark *){background-color:var(--color-gray-800)}.dark\\:bg-gray-800\\/50:is(.dark *){background-color:#1e293980}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-gray-800\\/50:is(.dark *){background-color:color-mix(in oklab,var(--color-gray-800)50%,transparent)}}.dark\\:bg-gray-900:is(.dark *){background-color:var(--color-gray-900)}.dark\\:bg-gray-900\\/50:is(.dark *){background-color:#10182880}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-gray-900\\/50:is(.dark *){background-color:color-mix(in oklab,var(--color-gray-900)50%,transparent)}}.dark\\:bg-red-900\\/20:is(.dark *){background-color:#82181a33}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-red-900\\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-red-900)20%,transparent)}}.dark\\:bg-white:is(.dark *){background-color:var(--color-white)}.dark\\:bg-zinc-800:is(.dark *){background-color:var(--color-zinc-800)}.dark\\:from-gray-800:is(.dark *){--tw-gradient-from:var(--color-gray-800);--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))}.dark\\:fill-\\[\\#DFFE00\\]:is(.dark *){fill:#dffe00}.dark\\:fill-\\[\\#F7F7F8\\]:is(.dark *){fill:#f7f7f8}.dark\\:fill-white:is(.dark *){fill:var(--color-white)}.dark\\:text-\\[\\#c9d1d9\\]:is(.dark *){color:#c9d1d9}.dark\\:text-black:is(.dark *){color:var(--color-black)}.dark\\:text-blue-300:is(.dark *){color:var(--color-blue-300)}.dark\\:text-gray-100:is(.dark *){color:var(--color-gray-100)}.dark\\:text-gray-300:is(.dark *){color:var(--color-gray-300)}.dark\\:text-gray-400:is(.dark *){color:var(--color-gray-400)}.dark\\:text-gray-500:is(.dark *){color:var(--color-gray-500)}.dark\\:text-gray-600:is(.dark *){color:var(--color-gray-600)}.dark\\:text-red-500:is(.dark *){color:var(--color-red-500)}.dark\\:text-white:is(.dark *){color:var(--color-white)}.dark\\:text-white\\/60:is(.dark *){color:#fff9}@supports (color:color-mix(in lab,red,red)){.dark\\:text-white\\/60:is(.dark *){color:color-mix(in oklab,var(--color-white)60%,transparent)}}@media (hover:hover){.dark\\:dark\\:group-hover\\:text-white:is(.dark *):is(.dark *):is(:where(.group):hover *){color:var(--color-white)}}.dark\\:placeholder\\:text-gray-400:is(.dark *)::placeholder{color:var(--color-gray-400)}@media (hover:hover){.dark\\:hover\\:bg-\\[\\#2a2a2a\\]:is(.dark *):hover{background-color:#2a2a2a}.dark\\:hover\\:bg-gray-800:is(.dark *):hover{background-color:var(--color-gray-800)}.dark\\:hover\\:bg-gray-900:is(.dark *):hover{background-color:var(--color-gray-900)}.dark\\:hover\\:bg-white:is(.dark *):hover{background-color:var(--color-white)}.dark\\:hover\\:bg-zinc-800\\/50:is(.dark *):hover{background-color:#27272a80}@supports (color:color-mix(in lab,red,red)){.dark\\:hover\\:bg-zinc-800\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--color-zinc-800)50%,transparent)}}.dark\\:hover\\:text-gray-100:is(.dark *):hover{color:var(--color-gray-100)}.dark\\:hover\\:text-gray-300:is(.dark *):hover{color:var(--color-gray-300)}.dark\\:hover\\:text-white:is(.dark *):hover{color:var(--color-white)}}.dark\\:data-\\[state\\=checked\\]\\:bg-white:is(.dark *)[data-state=checked]{background-color:var(--color-white)}.dark\\:data-\\[state\\=checked\\]\\:text-black:is(.dark *)[data-state=checked]{color:var(--color-black)}.dark\\:data-\\[state\\=unchecked\\]\\:bg-gray-600:is(.dark *)[data-state=unchecked]{background-color:var(--color-gray-600)}.\\[\\&_\\>_\\*\\]\\:min-w-0>*{min-width:calc(var(--spacing)*0)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 [cmdk-group-heading]{padding-inline:calc(var(--spacing)*2)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 [cmdk-group-heading]{padding-block:calc(var(--spacing)*1.5)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs [cmdk-group-heading]{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium [cmdk-group-heading]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground [cmdk-group-heading]{color:var(--color-muted-foreground)}.\\[\\&_\\[cmdk-group\\]\\]\\:px-2 [cmdk-group]{padding-inline:calc(var(--spacing)*2)}.\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group]{padding-top:calc(var(--spacing)*0)}.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 [cmdk-input-wrapper] svg{height:calc(var(--spacing)*5)}.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 [cmdk-input-wrapper] svg{width:calc(var(--spacing)*5)}.\\[\\&_\\[cmdk-input\\]\\]\\:h-12 [cmdk-input]{height:calc(var(--spacing)*12)}.\\[\\&_\\[cmdk-item\\]\\]\\:px-2 [cmdk-item]{padding-inline:calc(var(--spacing)*2)}.\\[\\&_\\[cmdk-item\\]\\]\\:py-3 [cmdk-item]{padding-block:calc(var(--spacing)*3)}.\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 [cmdk-item] svg{height:calc(var(--spacing)*5)}.\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 [cmdk-item] svg{width:calc(var(--spacing)*5)}.\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.\\[\\&\\[data-panel-group-direction\\=vertical\\]\\>div\\]\\:rotate-90[data-panel-group-direction=vertical]>div{rotate:90deg}.\\[\\&\\[data-state\\=open\\]_svg\\]\\:rotate-180[data-state=open] svg{rotate:180deg}html{height:100%}body{height:100%;font-family:var(--sans)}.frame-root,.frame-content,#root{height:100%}}.code-block{font-family:var(--mono)}h1,h2,h3{font-family:var(--sans)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0))}}@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-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-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-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@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%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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:0}@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-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}`;
 function UB(e) {
 	return Kt({
 		attr: { viewBox: '0 0 448 512' },
@@ -15146,7 +15146,7 @@ const v_ = S.forwardRef(({ className: e, children: t, ...r }, n) =>
 			E.jsxs(c_, {
 				ref: n,
 				className: It(
-					'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+					'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-sm',
 					e
 				),
 				...r,
@@ -18979,7 +18979,7 @@ const Y3 = [
 																			E.jsxs('div', {
 																				className: 'flex items-center gap-3 flex-1 min-w-0',
 																				children: [
-																					E.jsx('div', { className: `p-2 rounded-lg bg-gradient-to-r ${aW(p.type)} flex-shrink-0`, children: iW(p.type) }),
+																					E.jsx('div', { className: `p-2 rounded-sm bg-gradient-to-r ${aW(p.type)} flex-shrink-0`, children: iW(p.type) }),
 																					E.jsx('div', {
 																						className: 'flex flex-col min-w-0 flex-1',
 																						children: E.jsx('span', { className: 'truncate font-medium', children: p.title })
@@ -19225,7 +19225,7 @@ const Zh = () => window.innerWidth <= 768,
 								]
 							}),
 						E.jsxs('div', {
-							className: It('relative bg-[#f4f4f4] dark:bg-[#2f2f2f] rounded-lg px-2.5 py-1 border flex items-center', a),
+							className: It('relative bg-[#f4f4f4] dark:bg-[#2f2f2f] rounded-sm px-2.5 py-1 border flex items-center', a),
 							onClick: L,
 							children: [
 								E.jsx('div', {
@@ -19270,7 +19270,7 @@ const Zh = () => window.innerWidth <= 768,
 										E.jsx('button', {
 											onClick: n ? r : A,
 											disabled: !n && (!i.trim() || t),
-											className: `p-2 rounded-lg flex items-center justify-center ${!n && (!i.trim() || t) ? 'bg-gray-300 dark:bg-gray-700 text-gray-400 cursor-not-allowed' : 'text-white'}`,
+											className: `p-2 rounded-sm flex items-center justify-center ${!n && (!i.trim() || t) ? 'bg-gray-300 dark:bg-gray-700 text-gray-400 cursor-not-allowed' : 'text-white'}`,
 											style: !n && (!i.trim() || t) ? {} : { backgroundColor: '#007a5a' },
 											children: n ? E.jsx(Xj, { className: 'w-5 h-5' }) : E.jsx(Zj, { className: 'w-5 h-5' })
 										})
@@ -42421,7 +42421,7 @@ const EL = S.createContext({ handleMessage: (e, t) => Promise.resolve() }),
 		return r || !e
 			? null
 			: E.jsxs('div', {
-					className: 'my-4 overflow-hidden border border-gray-200 rounded-lg dark:border-gray-700',
+					className: 'my-4 overflow-hidden border border-gray-200 rounded-sm dark:border-gray-700',
 					children: [
 						E.jsx('img', { src: e, alt: t || 'Image', className: 'object-contain w-full max-h-96', loading: 'lazy', onError: () => n(!0), onLoad: () => n(!1) }),
 						E.jsxs('div', {
@@ -53490,22 +53490,22 @@ const Gce = ({ content: e, hideActions: t, parseContent: r = !1, customComponent
 		switch (e) {
 			case Tt.CODE:
 				return E.jsx('div', {
-					className: 'w-8 h-8 rounded-lg bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center',
+					className: 'w-8 h-8 rounded-sm bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center',
 					children: E.jsx(bH, { className: 'w-4 h-4 text-white' })
 				});
 			case Tt.DOCUMENT:
 				return E.jsx('div', {
-					className: 'w-8 h-8 rounded-lg bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center',
+					className: 'w-8 h-8 rounded-sm bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center',
 					children: E.jsx(m_, { className: 'w-4 h-4 text-white' })
 				});
 			case Tt.IMAGE:
 				return E.jsx('div', {
-					className: 'w-8 h-8 rounded-lg bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center',
+					className: 'w-8 h-8 rounded-sm bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center',
 					children: E.jsx(AH, { className: 'w-4 h-4 text-white' })
 				});
 			default:
 				return E.jsx('div', {
-					className: 'w-8 h-8 rounded-lg bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center',
+					className: 'w-8 h-8 rounded-sm bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center',
 					children: E.jsx(SH, { className: 'w-4 h-4 text-white' })
 				});
 		}
@@ -53556,7 +53556,7 @@ const RD = ({ artifact: e }) => {
 			};
 		return E.jsxs('div', {
 			className:
-				'artifact-card relative overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg p-3 mt-2 mb-2 bg-gradient-to-br dark:from-gray-800 dark:to-gray-850 dark:hover:bg-gray-800  hover:bg-gray-50  hover:shadow-lg cursor-pointer w-full group',
+				'artifact-card relative overflow-hidden border border-gray-200 dark:border-gray-700 rounded-sm p-3 mt-2 mb-2 bg-gradient-to-br dark:from-gray-800 dark:to-gray-850 dark:hover:bg-gray-800  hover:bg-gray-50  hover:shadow-lg cursor-pointer w-full group',
 			onClick: r,
 			children: [
 				E.jsx('div', {
@@ -56733,7 +56733,7 @@ const V8 = ({ children: e }) => {
 			return E.jsx('div', {
 				className: 'flex items-center justify-center h-screen bg-background',
 				children: E.jsxs('div', {
-					className: 'max-w-md p-6 text-center border rounded-lg shadow-xs bg-background border-border',
+					className: 'max-w-md p-6 text-center border rounded-sm shadow-xs bg-background border-border',
 					children: [
 						E.jsx('h2', { className: 'mb-2 text-lg font-semibold text-foreground', children: 'Configuration Error' }),
 						E.jsx('button', {
diff --git a/src/components/AppCard/AppCard.v2.tsx b/src/components/AppCard/AppCard.v2.tsx
index b4a63940..915118b7 100644
--- a/src/components/AppCard/AppCard.v2.tsx
+++ b/src/components/AppCard/AppCard.v2.tsx
@@ -43,14 +43,14 @@ export default function AppCardV2({ app, title, description, href, icon, logoUrl
 	const isExternalLink = finalIntegrationLink && !finalIntegrationLink.startsWith('/');
 
 	return (
-		<div className='group relative overflow-hidden transition-all duration-300 ease-out transform-gpu will-change-transform hover:scale-[1.02] hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/30 rounded-xl border backdrop-blur-sm bg-neutral-50/80 dark:bg-neutral-900/80 border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 p-5 h-full flex flex-col'>
-			<div className='absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/10 via-transparent to-transparent dark:from-white/5 dark:via-transparent dark:to-transparent pointer-events-none rounded-xl' />
+		<div className='group relative overflow-hidden transition-all duration-300 ease-out transform-gpu will-change-transform hover:scale-[1.02] hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/30 rounded-sm border backdrop-blur-sm bg-neutral-50/80 dark:bg-neutral-900/80 border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 p-5 h-full flex flex-col'>
+			<div className='absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/10 via-transparent to-transparent dark:from-white/5 dark:via-transparent dark:to-transparent pointer-events-none rounded-sm' />
 
-			<div className='absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-700 bg-gradient-to-r from-red-900/15 via-red-800/10 to-red-900/15 dark:from-red-800/20 dark:via-red-700/15 dark:to-red-800/20 blur-sm -z-10 transform scale-105' />
+			<div className='absolute inset-0 rounded-sm opacity-0 group-hover:opacity-100 transition-all duration-700 bg-gradient-to-r from-[#34050d]/15 via-[#34050d]/10 to-[#34050d]/15 dark:from-[#600014]/20 dark:via-[#600014]/15 dark:to-[#600014]/20 blur-sm -z-10 transform scale-105' />
 
 			<div className='flex flex-col gap-4 relative z-10'>
 				<div className='flex items-start justify-between'>
-					<figure className='w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 bg-neutral-200/50 dark:bg-neutral-800/50 group-hover:bg-red-900/10 dark:group-hover:bg-red-800/20 transition-all duration-300 group-hover:scale-110 group-hover:rotate-3 flex items-center justify-center'>
+					<figure className='w-12 h-12 rounded-sm overflow-hidden flex-shrink-0 bg-neutral-200/50 dark:bg-neutral-800/50 group-hover:bg-[#34050d]/10 dark:group-hover:bg-[#600014]/20 transition-all duration-300 group-hover:scale-110 group-hover:rotate-3 flex items-center justify-center'>
 						{logoUrl ? (
 							<Image
 								src={logoUrl}
@@ -60,13 +60,13 @@ export default function AppCardV2({ app, title, description, href, icon, logoUrl
 								className='object-cover w-full h-full transform transition-all duration-300 group-hover:scale-110'
 							/>
 						) : (
-							icon || <IconWorld className='text-neutral-500 group-hover:text-red-600 transition-colors duration-300' size={24} />
+							icon || <IconWorld className='text-neutral-500 group-hover:text-[#600014] transition-colors duration-300' size={24} />
 						)}
 					</figure>
 				</div>
 
 				<div className='flex flex-col gap-2 flex-grow'>
-					<h3 className='text-base font-bold text-neutral-800 dark:text-neutral-200 group-hover:text-red-800 dark:group-hover:text-red-300 transition-colors duration-300 leading-tight'>
+					<h3 className='text-base font-bold text-neutral-800 dark:text-neutral-200 group-hover:text-[#34050d] dark:group-hover:text-[#b99ba1] transition-colors duration-300 leading-tight'>
 						{name}
 					</h3>
 					{desc && <p className='text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed line-clamp-2 flex-grow'>{desc}</p>}
@@ -78,14 +78,14 @@ export default function AppCardV2({ app, title, description, href, icon, logoUrl
 							href={finalIntegrationLink}
 							target={isExternalLink ? '_blank' : '_self'}
 							rel={isExternalLink ? 'noopener noreferrer' : undefined}
-							className='inline-flex items-center gap-1.5 text-sm font-medium text-red-800 dark:text-red-300 hover:text-red-900 dark:hover:text-red-200 transition-colors duration-200 group/link'>
+							className='inline-flex items-center gap-1.5 text-sm font-medium text-[#34050d] dark:text-[#b99ba1] hover:text-[#34050d] dark:hover:text-[#e6d4c3] transition-colors duration-200 group/link'>
 							<span>{linkText}</span>
 							<IconExternalLink size={14} className='transition-all duration-300 group-hover/link:ml-1 group-hover/link:scale-110' />
 						</a>
 					</div>
 				)}
 
-				<div className='w-full h-0.5 bg-gradient-to-r from-transparent via-red-800/20 dark:via-red-300/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300' />
+				<div className='w-full h-0.5 bg-gradient-to-r from-transparent via-[#34050d]/20 dark:via-[#b99ba1]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300' />
 			</div>
 		</div>
 	);
diff --git a/src/components/AppCard/EcosystemSkeleton.tsx b/src/components/AppCard/EcosystemSkeleton.tsx
index ec79d510..5199d4e0 100644
--- a/src/components/AppCard/EcosystemSkeleton.tsx
+++ b/src/components/AppCard/EcosystemSkeleton.tsx
@@ -1,10 +1,10 @@
 export function EcosystemSkeleton() {
 	return (
 		<div className='flex flex-col gap-6 pt-8'>
-			<div className='w-1/3 h-8 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse' />
+			<div className='w-1/3 h-8 bg-neutral-200 dark:bg-neutral-800 rounded-sm animate-pulse' />
 			<div className='flex gap-4 overflow-x-auto'>
 				{Array.from({ length: 3 }).map((_, i) => (
-					<div key={i} className='w-50 h-50 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse flex-shrink-0' />
+					<div key={i} className='w-50 h-50 bg-neutral-200 dark:bg-neutral-800 rounded-sm animate-pulse flex-shrink-0' />
 				))}
 			</div>
 		</div>
diff --git a/src/components/BrandKitGallery/DownloadButton.tsx b/src/components/BrandKitGallery/DownloadButton.tsx
index 4350551f..177d022b 100644
--- a/src/components/BrandKitGallery/DownloadButton.tsx
+++ b/src/components/BrandKitGallery/DownloadButton.tsx
@@ -15,7 +15,7 @@ const DownloadButton = ({ url, fileName, children }) => {
 
 	return (
 		<button
-			className='inline-flex items-center px-4 py-1.5 font-semibold bg-black text-white rounded-lg hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200 transition-all duration-200 active:translate-y-px'
+			className='inline-flex items-center px-4 py-1.5 font-semibold bg-black text-white rounded-sm hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200 transition-all duration-200 active:translate-y-px'
 			onClick={handleDownload}>
 			{children} <IconDownload className='w-4 h-4 ml-2' />
 		</button>
diff --git a/src/components/ChainInformation/index.tsx b/src/components/ChainInformation/index.tsx
index abe492f2..6b9f216d 100644
--- a/src/components/ChainInformation/index.tsx
+++ b/src/components/ChainInformation/index.tsx
@@ -66,13 +66,13 @@ export const ChainInformation = ({ networkType }: { networkType: NetworkType })
 				<Table.RowHeaderCell />
 				<Table.Cell>
 					<Flex direction='column' className='gap-2'>
-						<Link href='/learn/rpc-providers' className='text-[#9e1f19]'>
+						<Link href='/learn/rpc-providers' className='text-[#600014] dark:text-[#b99ba1]'>
 							View more RPC providers
 						</Link>
 					</Flex>
 				</Table.Cell>
 				<Table.Cell>
-					<Link href='/learn/explorers' className='text-[#9e1f19]'>
+					<Link href='/learn/explorers' className='text-[#600014] dark:text-[#b99ba1]'>
 						See more explorers
 					</Link>
 				</Table.Cell>
@@ -97,7 +97,7 @@ export const AddSeiInlineButton = (chainParams: any) => {
 			href='#'
 			onClick={onClick}
 			className='flex items-center text-sm text-neutral-700 dark:text-neutral-300
-				   hover:text-red-500 dark:hover:text-red-400 transition-colors'>
+				   hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors'>
 			<IconChevronRight className='h-3 w-3 mr-1' />
 			<span>{'Add Sei to Metamask'}</span>
 		</a>
@@ -118,7 +118,8 @@ export function AddSeiButton({ chainParams, label }: { chainParams: any; label:
 	return (
 		<button
 			onClick={onClick}
-			className='inline-flex items-center gap-1 rounded-xl bg-red-800 px-2 py-1 text-xs font-medium text-white transition-colors min-w-[160px]'>
+			className='inline-flex items-center gap-1 rounded-sm bg-[#600014] hover:bg-[#34050d] px-3 py-1.5 text-xs text-white transition-colors min-w-[160px]'
+			style={{ fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', letterSpacing: '-0.01em', fontSize: '10px' }}>
 			{label}
 		</button>
 	);
diff --git a/src/components/Changelog/index.tsx b/src/components/Changelog/index.tsx
index d550ec81..c39cb0f2 100644
--- a/src/components/Changelog/index.tsx
+++ b/src/components/Changelog/index.tsx
@@ -97,7 +97,7 @@ export async function RemoteChangelog() {
 								href={part}
 								target='_blank'
 								rel='noopener noreferrer'
-								className='text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100 dark:text-red-300 dark:hover:text-red-200 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-0.5 rounded font-mono text-sm font-medium transition-colors no-underline ml-1'>
+								className='text-[#600014] hover:text-[#34050d] bg-[#f5f5f7] hover:bg-[#ececee] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-0.5 rounded-sm font-mono text-sm font-medium transition-colors no-underline ml-1'>
 								{linkText}
 							</a>
 						);
@@ -124,7 +124,7 @@ export async function RemoteChangelog() {
 									href={compareUrl}
 									target='_blank'
 									rel='noopener noreferrer'
-									className='text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100 dark:text-red-300 dark:hover:text-red-200 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-0.5 rounded font-mono text-sm font-medium transition-colors no-underline ml-1'>
+									className='text-[#600014] hover:text-[#34050d] bg-[#f5f5f7] hover:bg-[#ececee] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-0.5 rounded-sm font-mono text-sm font-medium transition-colors no-underline ml-1'>
 									{displayText}
 								</a>
 							</span>
@@ -155,7 +155,7 @@ export async function RemoteChangelog() {
 											href={`https://github.com/${repoPath}/pull/${num}`}
 											target='_blank'
 											rel='noopener noreferrer'
-											className='text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100 dark:text-red-300 dark:hover:text-red-200 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-0.5 rounded font-mono text-sm font-medium transition-colors no-underline ml-1'>
+											className='text-[#600014] hover:text-[#34050d] bg-[#f5f5f7] hover:bg-[#ececee] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-0.5 rounded-sm font-mono text-sm font-medium transition-colors no-underline ml-1'>
 											#{num}
 										</a>
 									);
@@ -189,7 +189,7 @@ export async function RemoteChangelog() {
 												href={`https://github.com/${repoPath}/pull/${num}`}
 												target='_blank'
 												rel='noopener noreferrer'
-												className='text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100 dark:text-red-300 dark:hover:text-red-200 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-0.5 rounded font-mono text-sm font-medium transition-colors no-underline mr-1'>
+												className='text-[#600014] hover:text-[#34050d] bg-[#f5f5f7] hover:bg-[#ececee] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-0.5 rounded-sm font-mono text-sm font-medium transition-colors no-underline mr-1'>
 												#{num}
 											</a>
 										);
@@ -255,8 +255,8 @@ export async function RemoteChangelog() {
 					{sectionComponents.map((comp, i) => (
 						<div key={i}>
 							<div className='flex items-center gap-2 mb-3'>
-								<div className='flex items-center gap-2 bg-gray-100 px-3 py-1.5 rounded-md'>
-									<div className='w-2 h-2 bg-red-500 rounded-full'></div>
+								<div className='flex items-center gap-2 bg-gray-100 px-3 py-1.5 rounded-sm'>
+									<div className='w-2 h-2 bg-[#600014] rounded-full'></div>
 									<span className='font-medium text-gray-700 dark:text-white text-sm'>{comp.name}</span>
 								</div>
 							</div>
@@ -332,8 +332,8 @@ export async function RemoteChangelog() {
 					{components.map((comp, i) => (
 						<div key={i}>
 							<div className='flex items-center gap-2 mb-3'>
-								<div className='flex items-center gap-2 bg-slate-100 px-3 py-1.5 rounded-md'>
-									<div className='w-2 h-2 bg-red-500 rounded-full'></div>
+								<div className='flex items-center gap-2 bg-slate-100 px-3 py-1.5 rounded-sm'>
+									<div className='w-2 h-2 bg-[#600014] rounded-full'></div>
 									<span className='font-medium text-slate-700 text-sm'>{comp.name}</span>
 								</div>
 							</div>
@@ -394,7 +394,7 @@ export async function RemoteChangelog() {
 					href='https://github.com/sei-protocol/sei-chain/blob/main/CHANGELOG.md'
 					target='_blank'
 					rel='noopener noreferrer'
-					className='inline-flex items-center gap-2 text-sm text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-md transition-colors font-medium no-underline'>
+					className='inline-flex items-center gap-2 text-sm text-[#600014] hover:text-[#34050d] bg-[#f5f5f7] hover:bg-[#ececee] px-3 py-1.5 rounded-sm transition-colors font-medium no-underline'>
 					<svg className='w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
 						<path
 							fillRule='evenodd'
diff --git a/src/components/CopyButton/index.tsx b/src/components/CopyButton/index.tsx
index eda89cea..1aa4306c 100644
--- a/src/components/CopyButton/index.tsx
+++ b/src/components/CopyButton/index.tsx
@@ -19,7 +19,7 @@ export const CopyButton = ({ textToCopy }: CopyButtonProps) => {
 	return (
 		<button
 			onClick={handleCopy}
-			className='p-1 rounded-md text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
+			className='p-1 rounded-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
 			title='Copy to clipboard'
 			aria-label='Copy to clipboard'>
 			{copied ? <IconCheck className='h-4 w-4 text-green-500' /> : <IconCopy className='h-4 w-4' />}
diff --git a/src/components/CopyText/index.tsx b/src/components/CopyText/index.tsx
index 85cae90a..51620567 100644
--- a/src/components/CopyText/index.tsx
+++ b/src/components/CopyText/index.tsx
@@ -24,7 +24,7 @@ export const CopyButton = ({ value, copyDisabled = false }: { value: string; cop
 				{!copyDisabled ? (
 					<button
 						onClick={copyToClipboard}
-						className='p-1 rounded-md text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
+						className='p-1 rounded-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
 						title='Copy to clipboard'
 						aria-label='Copy to clipboard'>
 						{copied ? <IconCheck className='h-4 w-4 text-green-500' /> : <IconCopy className='h-4 w-4' />}
diff --git a/src/components/EcosystemContracts/TabsView.tsx b/src/components/EcosystemContracts/TabsView.tsx
index d8f7b63e..66392550 100644
--- a/src/components/EcosystemContracts/TabsView.tsx
+++ b/src/components/EcosystemContracts/TabsView.tsx
@@ -73,11 +73,11 @@ export function EcosystemContractsTabs({ groupedData, nameKey, addressKey }: Eco
 					placeholder='Search by contract name or address'
 					aria-label='Search by contract name or address'
 					autoComplete='off'
-					className='w-full px-3 py-2 rounded border border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:!bg-neutral-900 text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/25 dark:focus:ring-red-500/20 focus:border-red-500 dark:focus:border-red-500 transition-colors'
+					className='w-full px-3 py-2 rounded border border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:!bg-neutral-900 text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-[#600014]/25 dark:focus:ring-[#600014]/20 focus:border-[#600014] dark:focus:border-[#600014] transition-colors'
 				/>
 				<button
 					type='submit'
-					className='px-3 py-2 rounded bg-red-600 text-white text-sm hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500/30 dark:focus:ring-red-500/20'>
+					className='px-3 py-2 rounded-sm bg-[#600014] text-white text-sm hover:bg-[#34050d] transition-colors focus:outline-none focus:ring-2 focus:ring-[#600014]/30 dark:focus:ring-[#600014]/20'>
 					Search
 				</button>
 			</form>
@@ -87,7 +87,7 @@ export function EcosystemContractsTabs({ groupedData, nameKey, addressKey }: Eco
 					const isOpen = !!openSections[group.projectName];
 					const sectionId = `section-${slugify(group.projectName)}`;
 					return (
-						<div key={group.projectName} className='border border-neutral-200 dark:border-neutral-800 rounded-lg overflow-hidden'>
+						<div key={group.projectName} className='border border-neutral-200 dark:border-neutral-800 rounded-sm overflow-hidden'>
 							<button
 								type='button'
 								onClick={() => toggleSection(group.projectName)}
@@ -111,7 +111,7 @@ export function EcosystemContractsTabs({ groupedData, nameKey, addressKey }: Eco
 								<div className='p-4 space-y-4'>
 									{/* Desktop table view */}
 									<div className='hidden sm:block overflow-x-auto'>
-										<table className='w-full border-collapse border border-gray-200 dark:border-gray-700 rounded-lg'>
+										<table className='w-full border-collapse border border-gray-200 dark:border-gray-700 rounded-sm'>
 											<thead>
 												<tr className='bg-gray-50 dark:bg-gray-800'>
 													<th className='border border-gray-200 dark:border-gray-700 px-4 py-3 text-left text-sm font-semibold text-gray-900 dark:text-white'>
@@ -138,7 +138,7 @@ export function EcosystemContractsTabs({ groupedData, nameKey, addressKey }: Eco
 																		href={`https://seiscan.io/address/${contract[addressKey]}`}
 																		target='_blank'
 																		rel='noopener noreferrer'
-																		className='text-red-600 hover:text-red-800 dark:text-red-300 dark:hover:text-red-200 text-xs bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-1 rounded transition-colors no-underline'>
+																		className='text-[#600014] hover:text-[#34050d] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] text-xs bg-[#f5f5f7] hover:bg-[#ececee] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-1 rounded-sm transition-colors no-underline'>
 																		SeiScan ↗
 																	</a>
 																</div>
@@ -156,7 +156,7 @@ export function EcosystemContractsTabs({ groupedData, nameKey, addressKey }: Eco
 											const addr = String(contract[addressKey] || '').toLowerCase();
 											const id = `contract-${slugify(group.projectName)}-${addr}`;
 											return (
-												<div key={contractIndex} id={id} className='border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800'>
+												<div key={contractIndex} id={id} className='border border-gray-200 dark:border-gray-700 rounded-sm p-4 bg-white dark:bg-gray-800'>
 													<div className='space-y-2'>
 														<div>
 															<span className='text-xs text-gray-500 dark:text-gray-400 block mb-1'>Contract Name</span>
@@ -170,7 +170,7 @@ export function EcosystemContractsTabs({ groupedData, nameKey, addressKey }: Eco
 																	href={`https://seiscan.io/address/${contract[addressKey]}`}
 																	target='_blank'
 																	rel='noopener noreferrer'
-																	className='text-red-600 hover:text-red-800 dark:text-red-300 dark:hover:text-red-200 text-xs bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-1 rounded transition-colors no-underline'>
+																	className='text-[#600014] hover:text-[#34050d] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] text-xs bg-[#f5f5f7] hover:bg-[#ececee] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-1 rounded-sm transition-colors no-underline'>
 																	SeiScan ↗
 																</a>
 															</div>
diff --git a/src/components/FaucetRequest/index.tsx b/src/components/FaucetRequest/index.tsx
index e8c2bb72..1f3ebae6 100644
--- a/src/components/FaucetRequest/index.tsx
+++ b/src/components/FaucetRequest/index.tsx
@@ -107,7 +107,7 @@ const RequestFaucetCard = () => {
 				</div>
 			</Flex>
 
-			<div className='w-full flex items-center border border-neutral-300 dark:border-neutral-600 rounded-md p-2 focus-within:ring-2 focus-within:ring-neutral-400 dark:focus-within:ring-neutral-500'>
+			<div className='w-full flex items-center border border-neutral-300 dark:border-neutral-600 rounded-sm p-2 focus-within:ring-2 focus-within:ring-neutral-400 dark:focus-within:ring-neutral-500'>
 				<input
 					className='w-full text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 px-4 py-3 text-lg outline-none'
 					placeholder='Sei EVM address...'
@@ -115,17 +115,17 @@ const RequestFaucetCard = () => {
 					onChange={handleAddressChange}
 				/>
 				<Select.Root value={selectedChain} onValueChange={setSelectedChain}>
-					<Select.Trigger className='bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 px-4 py-2 text-lg rounded-md cursor-pointer focus:ring-2 focus:ring-neutral-400 dark:focus-within:ring-neutral-500'>
+					<Select.Trigger className='bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 px-4 py-2 text-lg rounded-sm cursor-pointer focus:ring-2 focus:ring-neutral-400 dark:focus-within:ring-neutral-500'>
 						{selectedChain === 'atlantic-2' ? 'Testnet' : 'Devnet'}
 					</Select.Trigger>
-					<Select.Content className='bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 text-lg rounded-md shadow-lg'>
+					<Select.Content className='bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 text-lg rounded-sm shadow-lg'>
 						<Select.Item value='atlantic-2'>Testnet (atlantic-2)</Select.Item>
 					</Select.Content>
 				</Select.Root>
 			</div>
 
 			{nextUseTime && (
-				<div className='flex items-center gap-3 p-4 border-l-4 border-red-500 bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-200 rounded w-full'>
+				<div className='flex items-center gap-3 p-4 border-l-4 border-[#600014] bg-[#ececee] dark:bg-[#600014]/20 text-[#34050d] dark:text-[#e6d4c3] rounded w-full'>
 					<IconHourglass className='w-6 h-6' />
 					<p className='text-lg font-medium'>You can request SEI testnet tokens again after {nextUseTime}.</p>
 				</div>
@@ -133,7 +133,7 @@ const RequestFaucetCard = () => {
 
 			<Flex direction='column' className='w-full gap-5'>
 				<Button
-					className={`w-full flex items-center gap-3 justify-center !p-6 !rounded-2xl ${
+					className={`w-full flex items-center gap-3 justify-center !p-6 !rounded-sm ${
 						captchaToken
 							? 'bg-neutral-700 hover:bg-neutral-800 dark:bg-neutral-300 dark:hover:bg-neutral-400 text-white dark:text-black'
 							: 'bg-neutral-400 cursor-not-allowed'
@@ -144,7 +144,7 @@ const RequestFaucetCard = () => {
 				</Button>
 
 				<Button
-					className={`w-full flex items-center gap-3 justify-center !p-6 !rounded-2xl ${
+					className={`w-full flex items-center gap-3 justify-center !p-6 !rounded-sm ${
 						isSubmitDisabled
 							? 'bg-neutral-500 cursor-not-allowed'
 							: 'bg-neutral-800 hover:bg-neutral-900 dark:bg-neutral-300 dark:hover:bg-neutral-400 text-white dark:text-black'
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 2526c56d..d1a8f7df 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,151 +1,174 @@
 import React from 'react';
-import { AddSeiButton } from '../ChainInformation';
-import { networks } from '../ChainInformation/config';
+
+const footerLinkGroups = [
+	{
+		heading: 'Sei Network',
+		links: [
+			{ label: 'Create Wallet', href: 'https://app.sei.io/' },
+			{ label: 'Bridge', href: 'https://app.sei.io/bridge' },
+			{ label: 'Ecosystem', href: 'https://www.sei.io/ecosystem' },
+			{ label: 'Token', href: 'https://www.sei.io/token' }
+		]
+	},
+	{
+		heading: 'Developers',
+		links: [
+			{ label: 'Documentation', href: '/' },
+			{ label: 'Developer Hub', href: 'https://www.sei.io/developers' },
+			{ label: 'GitHub', href: 'https://github.com/sei-protocol' },
+			{ label: "Builder's Chat", href: 'https://t.me/+KZdhZ1eE-G01NmZk' },
+			{ label: 'Whitepaper', href: 'https://docs.sei.io/learn' }
+		]
+	},
+	{
+		heading: 'Resources',
+		links: [
+			{ label: 'Insights', href: 'https://blog.sei.io/' },
+			{ label: 'Media Kit', href: '/learn/general-brand-kit' },
+			{ label: 'Block Explorer', href: 'https://seitrace.com/' },
+			{ label: 'Network Data', href: 'https://seiscan.io/' },
+			{ label: 'Stake', href: 'https://app.sei.io/stake' }
+		]
+	}
+];
+
+const socialLinks = [
+	{ label: 'X', href: 'https://x.com/SeiNetwork' },
+	{ label: 'Telegram', href: 'https://t.me/seinetwork' },
+	{ label: 'Discord', href: 'https://discord.com/invite/sei' },
+	{ label: 'LinkedIn', href: 'https://www.linkedin.com/company/sei-network/' }
+];
+
+const bottomLinks = [
+	{ label: 'Terms and Conditions', href: 'https://www.sei.io/terms' },
+	{ label: 'Privacy Policy', href: 'https://www.sei.io/privacy' },
+	{ label: 'Security', href: 'https://www.sei.io/security' }
+];
 
 export function Footer() {
 	return (
-		<footer
-			style={{
-				backgroundColor: '#161616',
-				color: '#f1f1f1',
-				padding: '1.5rem 1rem'
-			}}>
-			<div
-				style={{
-					maxWidth: '1200px',
-					margin: '0 auto',
-					display: 'flex',
-					flexWrap: 'wrap',
-					justifyContent: 'space-between'
-				}}>
-				<div style={{ flex: '1 0 160px', marginRight: '1rem', marginBottom: '1rem' }}>
-					<h4
-						style={{
-							fontSize: '0.875rem',
-							marginBottom: '0.5rem',
-							fontWeight: 600
-						}}>
-						Developers
-					</h4>
-					<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-						<li>
-							<a href='https://www.sei.io/developers' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Developer Hub
-							</a>
-						</li>
-						<li>
-							<a
-								href='https://sei-foundation.notion.site/Sei-Ecosystem-Builders-Toolkit-836deaebca204452909d0bf9365d8116'
-								style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Developer Toolkit
-							</a>
-						</li>
-						<li>
-							<a href='https://github.com/sei-protocol' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								GitHub
-							</a>
-						</li>
-						<li>
-							<a href='https://t.me/+KZdhZ1eE-G01NmZk' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Sei Builder's Chat
-							</a>
-						</li>
-					</ul>
-					<AddSeiButton chainParams={networks[0].chainParams} label={`Add Sei Mainnet to your wallet`} />
-				</div>
+		<footer style={{ backgroundColor: '#000000', color: '#ffffff', fontFamily: "'Inter', system-ui, sans-serif" }}>
+			{/* Main links section */}
+			<div style={{ maxWidth: '1440px', margin: '0 auto', padding: '40px 40px 0' }}>
+				<div style={{ display: 'flex', gap: '60px', alignItems: 'flex-start' }}>
+					{/* Logo column */}
+					<div style={{ flexShrink: 0, paddingTop: '4px' }}>
+						<svg width='30' height='30' viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'>
+							<path
+								fillRule='evenodd'
+								clipRule='evenodd'
+								d='M35.9686 72.3048C46.6812 72.3048 56.3056 67.6454 62.9256 60.2426C59.8461 57.5662 55.2053 57.4036 51.9268 60.049L51.3005 60.5544C45.2978 65.398 36.5511 64.6827 31.4151 58.9282C28.6139 55.7896 23.8166 55.4692 20.6228 58.2073L13.4015 64.3981C19.5865 69.3461 27.432 72.3048 35.9686 72.3048ZM47.6902 54.7986C53.4077 50.185 61.4441 50.3505 66.943 54.8064C70.2299 49.3604 72.1209 42.9773 72.1209 36.1523C72.1209 28.5688 69.7861 21.5307 65.7958 15.7176C63.2235 15.1698 60.4353 15.8096 58.3188 17.6852L57.7164 18.219C51.9436 23.3346 43.1733 23.0237 37.7772 17.5123C34.8341 14.5064 30.0271 14.4077 26.9631 17.2903L18.5597 25.1961L13.9368 20.2824L22.3403 12.3765C28.0798 6.97678 37.0847 7.16168 42.5978 12.7925C45.4784 15.7347 50.1603 15.9006 53.242 13.1697L53.8443 12.6359C55.7149 10.9782 57.8793 9.86071 60.1453 9.27296C53.7404 3.50827 45.2642 0 35.9686 0C17.6162 0 2.45783 13.6749 0.126961 31.3908C5.7013 28.7159 12.5772 29.7452 17.1223 34.3996C19.9916 37.3379 24.6117 37.648 27.848 35.1196L32.5466 31.4489C38.4514 26.8357 46.7988 27.059 52.4486 31.9815L61.5961 39.9511L57.1643 45.0378L48.0169 37.0681C44.8042 34.2692 40.0578 34.1421 36.6999 36.7654L32.0015 40.436C26.0555 45.0813 17.5671 44.5115 12.2955 39.113C9.23 35.9739 4.21638 35.8643 1.01675 38.8667L0 39.8207C0.760911 47.3717 3.84539 54.2368 8.52757 59.6903L16.2317 53.0854C22.2144 47.9563 31.2011 48.5566 36.4485 54.4359C39.1903 57.5079 43.8594 57.8897 47.0639 55.304L47.6902 54.7986Z'
+								fill='#ffffff'
+							/>
+						</svg>
+					</div>
 
-				<div style={{ flex: '1 0 160px', marginRight: '1rem', marginBottom: '1rem' }}>
-					<h4
-						style={{
-							fontSize: '0.875rem',
-							marginBottom: '0.5rem',
-							fontWeight: 600
-						}}>
-						Ecosystem
-					</h4>
-					<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-						<li>
-							<a href='https://www.sei.io/ecosystem' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Ecosystem Hub
-							</a>
-						</li>
-						<li>
-							<a
-								href='https://sei-forms.typeform.com/join-ecosystem?typeform-source=p12rt1ecint.typeform.com'
-								style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Join the Eco
-							</a>
-						</li>
-						<li>
-							<a href='https://app.sei.io/bridge' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Bridge
-							</a>
-						</li>
-						<li>
-							<a href='https://seitrace.com/' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Explorer (SeiTrace)
-							</a>
-						</li>
-						<li>
-							<a href='https://seiscan.io/' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Explorer (Seiscan)
-							</a>
-						</li>
-						<li>
-							<a href='https://app.sei.io/stake' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Stake
-							</a>
-						</li>
-					</ul>
+					{/* Link groups */}
+					<div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '36px', fontSize: '12px', lineHeight: '1.2' }}>
+						<div style={{ display: 'flex', gap: '80px', borderTop: '1px solid #333', paddingTop: '20px' }}>
+							{footerLinkGroups.map((group) => (
+								<div key={group.heading} style={{ flex: 1, display: 'flex', gap: '20px' }}>
+									<span style={{ flex: 1, fontFamily: "'Inter', sans-serif", fontWeight: 400 }}>{group.heading}</span>
+									<div
+										style={{
+											flex: 1,
+											display: 'flex',
+											flexDirection: 'column',
+											gap: '16px',
+											fontFamily: "'JetBrains Mono', monospace",
+											textTransform: 'uppercase'
+										}}>
+										{group.links.map((link) => (
+											<a
+												key={link.label}
+												href={link.href}
+												style={{ color: 'inherit', textDecoration: 'none', opacity: 0.5, transition: 'opacity 0.15s' }}
+												onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
+												onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.5')}>
+												{link.label}
+											</a>
+										))}
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
 				</div>
+			</div>
 
-				<div style={{ flex: '1 0 160px', marginRight: '1rem', marginBottom: '1rem' }}>
-					<h4
-						style={{
-							fontSize: '0.875rem',
-							marginBottom: '0.5rem',
-							fontWeight: 600
-						}}>
-						Community
-					</h4>
-					<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-						<li>
-							<a href='https://x.com/SeiNetwork' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								X
-							</a>
-						</li>
-						<li>
-							<a href='https://discord.com/invite/sei' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Discord
-							</a>
-						</li>
-						<li>
-							<a href='https://t.me/seinetwork' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Telegram
-							</a>
-						</li>
-						<li>
-							<a href='https://blog.sei.io/' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Blog
-							</a>
-						</li>
-						<li>
-							<a href='/learn/general-brand-kit' style={{ textDecoration: 'none', color: 'inherit', fontSize: '0.8125rem' }}>
-								Brand Kit
-							</a>
-						</li>
-					</ul>
+			{/* Decorative divider */}
+			<div style={{ maxWidth: '1440px', margin: '0 auto', padding: '60px 0 0' }}>
+				<div
+					style={{
+						width: '100%',
+						height: '1px',
+						background: 'linear-gradient(90deg, transparent 0%, #333 20%, #333 80%, transparent 100%)'
+					}}
+				/>
+			</div>
+
+			{/* Social row */}
+			<div style={{ maxWidth: '1440px', margin: '0 auto', padding: '24px 40px 0' }}>
+				<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: '20px', fontSize: '12px', lineHeight: '1.2' }}>
+					<span style={{ fontFamily: "'Inter', sans-serif" }}>Social</span>
+					{socialLinks.map((link) => (
+						<a
+							key={link.label}
+							href={link.href}
+							target='_blank'
+							rel='noopener noreferrer'
+							style={{
+								color: 'inherit',
+								textDecoration: 'none',
+								opacity: 0.5,
+								fontFamily: "'JetBrains Mono', monospace",
+								textTransform: 'uppercase',
+								transition: 'opacity 0.15s'
+							}}
+							onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
+							onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.5')}>
+							{link.label}
+						</a>
+					))}
 				</div>
+			</div>
 
+			{/* Bottom bar */}
+			<div style={{ maxWidth: '1440px', margin: '0 auto', padding: '24px 40px 40px' }}>
 				<div
 					style={{
-						width: '100%',
-						textAlign: 'center',
-						marginTop: '1rem',
-						fontSize: '0.75rem',
-						opacity: 0.8
+						borderTop: '1px solid #333',
+						paddingTop: '24px',
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+						fontSize: '9px',
+						fontFamily: "'JetBrains Mono', monospace",
+						letterSpacing: '0.18px',
+						lineHeight: '1.3',
+						textTransform: 'uppercase'
 					}}>
-					Sei Docs © 2025
+					<span style={{ fontFeatureSettings: "'calt' 0" }}>Copyright {new Date().getFullYear()}. All rights reserved.</span>
+					<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+						{bottomLinks.map((link) => (
+							<a
+								key={link.label}
+								href={link.href}
+								target='_blank'
+								rel='noopener noreferrer'
+								style={{
+									color: 'inherit',
+									textDecoration: 'none',
+									opacity: 0.7,
+									fontFeatureSettings: "'calt' 0",
+									transition: 'opacity 0.15s'
+								}}
+								onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
+								onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.7')}>
+								{link.label}
+							</a>
+						))}
+					</div>
 				</div>
 			</div>
 		</footer>
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 6e5aabd5..074f4b8c 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -7,7 +7,7 @@ export function Logo() {
 				fillRule='evenodd'
 				clipRule='evenodd'
 				d='M35.9686 72.3048C46.6812 72.3048 56.3056 67.6454 62.9256 60.2426C59.8461 57.5662 55.2053 57.4036 51.9268 60.049L51.3005 60.5544C45.2978 65.398 36.5511 64.6827 31.4151 58.9282C28.6139 55.7896 23.8166 55.4692 20.6228 58.2073L13.4015 64.3981C19.5865 69.3461 27.432 72.3048 35.9686 72.3048ZM47.6902 54.7986C53.4077 50.185 61.4441 50.3505 66.943 54.8064C70.2299 49.3604 72.1209 42.9773 72.1209 36.1523C72.1209 28.5688 69.7861 21.5307 65.7958 15.7176C63.2235 15.1698 60.4353 15.8096 58.3188 17.6852L57.7164 18.219C51.9436 23.3346 43.1733 23.0237 37.7772 17.5123C34.8341 14.5064 30.0271 14.4077 26.9631 17.2903L18.5597 25.1961L13.9368 20.2824L22.3403 12.3765C28.0798 6.97678 37.0847 7.16168 42.5978 12.7925C45.4784 15.7347 50.1603 15.9006 53.242 13.1697L53.8443 12.6359C55.7149 10.9782 57.8793 9.86071 60.1453 9.27296C53.7404 3.50827 45.2642 0 35.9686 0C17.6162 0 2.45783 13.6749 0.126961 31.3908C5.7013 28.7159 12.5772 29.7452 17.1223 34.3996C19.9916 37.3379 24.6117 37.648 27.848 35.1196L32.5466 31.4489C38.4514 26.8357 46.7988 27.059 52.4486 31.9815L61.5961 39.9511L57.1643 45.0378L48.0169 37.0681C44.8042 34.2692 40.0578 34.1421 36.6999 36.7654L32.0015 40.436C26.0555 45.0813 17.5671 44.5115 12.2955 39.113C9.23 35.9739 4.21638 35.8643 1.01675 38.8667L0 39.8207C0.760911 47.3717 3.84539 54.2368 8.52757 59.6903L16.2317 53.0854C22.2144 47.9563 31.2011 48.5566 36.4485 54.4359C39.1903 57.5079 43.8594 57.8897 47.0639 55.304L47.6902 54.7986Z'
-				fill='#9E1F19'
+				fill='currentColor'
 			/>
 			<path
 				d='M98.1612 47.7472C98.1612 55.3118 104.099 60.2736 113.453 60.2736C122.889 60.2736 129.396 55.4745 129.396 47.9098C129.396 41.9719 126.061 38.881 119.31 37.2542L112.315 35.546C108.41 34.5699 106.458 32.7804 106.458 30.0962C106.458 26.4358 109.142 24.321 113.941 24.321C118.578 24.321 121.262 26.8425 121.425 30.8283H128.746C128.583 23.2635 122.889 18.3831 114.185 18.3831C105.401 18.3831 99.2187 23.0194 99.2187 30.3401C99.2187 36.1967 102.554 39.6944 109.63 41.4025L116.626 43.0294C120.774 44.0868 122.076 45.7136 122.076 48.3979C122.076 52.0582 118.985 54.2544 113.616 54.2544C108.573 54.2544 105.482 51.8142 105.482 47.7472H98.1612Z'
@@ -21,15 +21,13 @@ export function Logo() {
 				d='M188.957 10.0863C191.722 10.0863 194 7.80873 194 5.04314C194 2.19621 191.722 0 188.957 0C186.191 0 183.913 2.19621 183.913 5.04314C183.913 7.80873 186.191 10.0863 188.957 10.0863ZM185.215 59.2975H192.861V19.5218H185.215V59.2975Z'
 				fill='currentColor'
 			/>
-			{/* Christmas Hat */}
 			{ENABLE_CHRISTMAS_THEME && (
 				<g transform='translate(30 0) rotate(-15) scale(1.5) translate(-36 0)'>
-					<path d='M20 -2 Q 36 -35 60 5 L 20 -2 Z' fill='#9E1F19' />
+					<path d='M20 -2 Q 36 -35 60 5 L 20 -2 Z' fill='currentColor' />
 					<circle cx='60' cy='5' r='5' fill='white' />
 					<rect x='18' y='-4' width='36' height='8' rx='4' fill='white' />
 				</g>
 			)}
-			{/* New Year Hat */}
 			{ENABLE_NEW_YEAR_THEME && (
 				<g transform='translate(15 5) rotate(-30) scale(1.2) translate(-36 0)'>
 					<path d='M25 5 L 55 5 L 40 -35 Z' fill='#FFD700' />
@@ -44,22 +42,20 @@ export function Logo() {
 
 export function LogoMobile() {
 	return (
-		<svg width='32' height='32' viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ overflow: 'visible' }}>
-			{/* Christmas Hat */}
+		<svg width='28' height='28' viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ overflow: 'visible' }}>
 			<path
 				fillRule='evenodd'
 				clipRule='evenodd'
 				d='M35.9686 72.3048C46.6812 72.3048 56.3056 67.6454 62.9256 60.2426C59.8461 57.5662 55.2053 57.4036 51.9268 60.049L51.3005 60.5544C45.2978 65.398 36.5511 64.6827 31.4151 58.9282C28.6139 55.7896 23.8166 55.4692 20.6228 58.2073L13.4015 64.3981C19.5865 69.3461 27.432 72.3048 35.9686 72.3048ZM47.6902 54.7986C53.4077 50.185 61.4441 50.3505 66.943 54.8064C70.2299 49.3604 72.1209 42.9773 72.1209 36.1523C72.1209 28.5688 69.7861 21.5307 65.7958 15.7176C63.2235 15.1698 60.4353 15.8096 58.3188 17.6852L57.7164 18.219C51.9436 23.3346 43.1733 23.0237 37.7772 17.5123C34.8341 14.5064 30.0271 14.4077 26.9631 17.2903L18.5597 25.1961L13.9368 20.2824L22.3403 12.3765C28.0798 6.97678 37.0847 7.16168 42.5978 12.7925C45.4784 15.7347 50.1603 15.9006 53.242 13.1697L53.8443 12.6359C55.7149 10.9782 57.8793 9.86071 60.1453 9.27296C53.7404 3.50827 45.2642 0 35.9686 0C17.6162 0 2.45783 13.6749 0.126961 31.3908C5.7013 28.7159 12.5772 29.7452 17.1223 34.3996C19.9916 37.3379 24.6117 37.648 27.848 35.1196L32.5466 31.4489C38.4514 26.8357 46.7988 27.059 52.4486 31.9815L61.5961 39.9511L57.1643 45.0378L48.0169 37.0681C44.8042 34.2692 40.0578 34.1421 36.6999 36.7654L32.0015 40.436C26.0555 45.0813 17.5671 44.5115 12.2955 39.113C9.23 35.9739 4.21638 35.8643 1.01675 38.8667L0 39.8207C0.760911 47.3717 3.84539 54.2368 8.52757 59.6903L16.2317 53.0854C22.2144 47.9563 31.2011 48.5566 36.4485 54.4359C39.1903 57.5079 43.8594 57.8897 47.0639 55.304L47.6902 54.7986Z'
-				fill='#9E1F19'
+				fill='currentColor'
 			/>
 			{ENABLE_CHRISTMAS_THEME && (
 				<g transform='translate(30 0) rotate(-15) scale(1.5) translate(-36 0)'>
-					<path d='M20 -2 Q 36 -35 60 5 L 20 -2 Z' fill='#9E1F19' />
+					<path d='M20 -2 Q 36 -35 60 5 L 20 -2 Z' fill='currentColor' />
 					<circle cx='60' cy='5' r='5' fill='white' />
 					<rect x='18' y='-4' width='36' height='8' rx='4' fill='white' />
 				</g>
 			)}
-			{/* New Year Hat */}
 			{ENABLE_NEW_YEAR_THEME && (
 				<g transform='translate(15 5) rotate(-30) scale(1.2) translate(-36 0)'>
 					<path d='M25 5 L 55 5 L 40 -35 Z' fill='#FFD700' />
diff --git a/src/components/MCPDemo/MCPDemo.tsx b/src/components/MCPDemo/MCPDemo.tsx
index 3d34469d..1e1559c9 100644
--- a/src/components/MCPDemo/MCPDemo.tsx
+++ b/src/components/MCPDemo/MCPDemo.tsx
@@ -4,204 +4,198 @@ import React, { useState } from 'react';
 import { IconSend, IconRobot, IconUser, IconLoader2, IconSparkles, IconTerminal2 } from '@tabler/icons-react';
 
 interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-  timestamp: Date;
+	role: 'user' | 'assistant';
+	content: string;
+	timestamp: Date;
 }
 
 const exampleResponses: Record<string, string> = {
-  'balance': 'Let me check your SEI balance...\n\nYour address `0x742d35Cc6634C0532925a3b844e3e28170Dc71a9` has a balance of **42.5 SEI** on mainnet.',
-  'send': 'I\'ll send 1 SEI to that address.\n\n✅ Transaction submitted!\n- **Hash**: `0xabc123def456...`\n- **Block**: 12,345,678\n- **Gas Used**: 21,000\n- **Status**: Confirmed',
-  'contract': 'Let me analyze this address...\n\n✅ This is a **smart contract**\n- **Type**: ERC20 Token\n- **Name**: USD Coin\n- **Symbol**: USDC\n- **Decimals**: 6\n- **Total Supply**: 1,000,000 USDC',
-  'nft': 'Checking NFT ownership...\n\n🎨 **NFT Details**:\n- **Collection**: Sei Punks\n- **Token ID**: #1234\n- **Owner**: `0x742d35Cc6634...`\n- **Attributes**: Rare background, Gold chain\n- **Last Sale**: 100 SEI',
-  'block': 'Analyzing the latest block...\n\n📦 **Block #15,234,567**\n- **Timestamp**: 2 seconds ago\n- **Transactions**: 142\n- **Gas Used**: 12.5M / 30M\n- **Validator**: SeiValidator1',
+	balance: 'Let me check your SEI balance...\n\nYour address `0x742d35Cc6634C0532925a3b844e3e28170Dc71a9` has a balance of **42.5 SEI** on mainnet.',
+	send: "I'll send 1 SEI to that address.\n\n✅ Transaction submitted!\n- **Hash**: `0xabc123def456...`\n- **Block**: 12,345,678\n- **Gas Used**: 21,000\n- **Status**: Confirmed",
+	contract:
+		'Let me analyze this address...\n\n✅ This is a **smart contract**\n- **Type**: ERC20 Token\n- **Name**: USD Coin\n- **Symbol**: USDC\n- **Decimals**: 6\n- **Total Supply**: 1,000,000 USDC',
+	nft: 'Checking NFT ownership...\n\n🎨 **NFT Details**:\n- **Collection**: Sei Punks\n- **Token ID**: #1234\n- **Owner**: `0x742d35Cc6634...`\n- **Attributes**: Rare background, Gold chain\n- **Last Sale**: 100 SEI',
+	block:
+		'Analyzing the latest block...\n\n📦 **Block #15,234,567**\n- **Timestamp**: 2 seconds ago\n- **Transactions**: 142\n- **Gas Used**: 12.5M / 30M\n- **Validator**: SeiValidator1'
 };
 
 export function MCPDemo() {
-  const [messages, setMessages] = useState<Message[]>([
-    {
-      role: 'assistant',
-      content: 'Hi! I\'m your AI assistant powered by Sei MCP Server. Try asking me to:\n\n• Check your balance\n• Send SEI to an address\n• Analyze a contract\n• Get NFT info\n• Explore the latest block',
-      timestamp: new Date(),
-    },
-  ]);
-  const [input, setInput] = useState('');
-  const [isTyping, setIsTyping] = useState(false);
-
-  const handleSend = () => {
-    if (!input.trim()) return;
-
-    const userMessage: Message = {
-      role: 'user',
-      content: input,
-      timestamp: new Date(),
-    };
-
-    setMessages((prev) => [...prev, userMessage]);
-    setInput('');
-    setIsTyping(true);
-
-    // Simulate AI response
-    setTimeout(() => {
-      let response = 'I can help you with that! In a real implementation, I would use the MCP Server to execute this request.';
-      
-      // Check for keywords and provide appropriate response
-      const lowerInput = input.toLowerCase();
-      if (lowerInput.includes('balance')) {
-        response = exampleResponses.balance;
-      } else if (lowerInput.includes('send') && lowerInput.includes('sei')) {
-        response = exampleResponses.send;
-      } else if (lowerInput.includes('contract') || lowerInput.includes('0x3894085ef7ff0f0aedf52e2a2704928d1ec074f1')) {
-        response = exampleResponses.contract;
-      } else if (lowerInput.includes('nft')) {
-        response = exampleResponses.nft;
-      } else if (lowerInput.includes('block')) {
-        response = exampleResponses.block;
-      }
-
-      const assistantMessage: Message = {
-        role: 'assistant',
-        content: response,
-        timestamp: new Date(),
-      };
-
-      setMessages((prev) => [...prev, assistantMessage]);
-      setIsTyping(false);
-    }, 1500);
-  };
-
-  return (
-    <div className="w-full max-w-5xl mx-auto my-12">
-      <div className="rounded-2xl overflow-hidden border border-neutral-200/50 dark:border-neutral-800/50 bg-gradient-to-br from-purple-500/5 via-blue-500/5 to-red-500/5 dark:from-purple-900/20 dark:via-blue-900/10 dark:to-red-900/20 shadow-xl">
-        {/* Header */}
-        <div className="bg-gradient-to-r from-purple-600 via-purple-600 to-blue-600 p-6">
-          <div className="flex items-center gap-4">
-            <div className="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
-              <IconTerminal2 className="h-6 w-6 text-white" />
-            </div>
-            <div>
-              <h3 className="text-white font-semibold text-lg flex items-center gap-2">
-                MCP Server Interactive Demo
-                <IconSparkles className="h-5 w-5 text-yellow-300" />
-              </h3>
-              <p className="text-white/80 text-sm mt-0.5">Experience AI-powered blockchain interactions</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Notice Bar */}
-        <div className="bg-white/50 dark:bg-neutral-900/30 border-b border-neutral-200/50 dark:border-neutral-800/30 px-6 py-3">
-          <p className="text-sm text-neutral-700 dark:text-neutral-300 flex items-center gap-2">
-            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
-              Demo Mode
-            </span>
-            <span>This is a simulation. To use real blockchain operations, configure MCP in your AI assistant.</span>
-          </p>
-        </div>
-
-        {/* Chat Area */}
-        <div className="h-[500px] overflow-y-auto p-6 space-y-6 scroll-smooth bg-white/30 dark:bg-neutral-950/30" style={{ scrollbarWidth: 'thin' }}>
-          {messages.map((message, index) => (
-            <div
-              key={index}
-              className={`flex gap-4 ${
-                message.role === 'user' ? 'justify-end' : 'justify-start'
-              } animate-in fade-in slide-in-from-bottom-2 duration-300`}
-            >
-              {message.role === 'assistant' && (
-                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shrink-0 shadow-lg">
-                  <IconRobot className="h-5 w-5 text-white" />
-                </div>
-              )}
-              
-              <div className={`max-w-[75%] ${message.role === 'user' ? 'order-1' : ''}`}>
-                <div
-                  className={`rounded-2xl px-5 py-3 ${
-                    message.role === 'user'
-                      ? 'bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg'
-                      : 'bg-white dark:bg-neutral-800/80 backdrop-blur-sm border border-neutral-200 dark:border-neutral-700 shadow-md'
-                  }`}
-                >
-                  <div className={`text-sm leading-relaxed whitespace-pre-wrap ${
-                    message.role === 'assistant' ? 'prose prose-sm dark:prose-invert max-w-none' : ''
-                  }`}>
-                    {message.content.split(/(`[^`]+`|\*\*[^*]+\*\*)/g).map((part, i) => {
-                      if (part.startsWith('`') && part.endsWith('`')) {
-                        return (
-                          <code key={i} className={`px-1.5 py-0.5 rounded ${
-                            message.role === 'user' 
-                              ? 'bg-white/20 text-white' 
-                              : 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
-                          } font-mono text-xs`}>
-                            {part.slice(1, -1)}
-                          </code>
-                        );
-                      } else if (part.startsWith('**') && part.endsWith('**')) {
-                        return <strong key={i}>{part.slice(2, -2)}</strong>;
-                      }
-                      return part;
-                    })}
-                  </div>
-                </div>
-                <div
-                  className={`text-xs mt-2 ${
-                    message.role === 'user'
-                      ? 'text-right text-neutral-500 dark:text-neutral-400'
-                      : 'text-neutral-500 dark:text-neutral-400'
-                  }`}
-                >
-                  {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                </div>
-              </div>
-
-              {message.role === 'user' && (
-                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center shrink-0 shadow-lg order-2">
-                  <IconUser className="h-5 w-5 text-white" />
-                </div>
-              )}
-            </div>
-          ))}
-          
-          {isTyping && (
-            <div className="flex gap-4 justify-start animate-in fade-in slide-in-from-bottom-2 duration-300">
-              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shrink-0 shadow-lg">
-                <IconRobot className="h-5 w-5 text-white" />
-              </div>
-              <div className="bg-white dark:bg-neutral-800/80 backdrop-blur-sm border border-neutral-200 dark:border-neutral-700 rounded-2xl px-5 py-3 shadow-md">
-                <div className="flex items-center gap-2">
-                  <IconLoader2 className="h-4 w-4 animate-spin text-purple-600" />
-                  <span className="text-sm text-neutral-600 dark:text-neutral-400">AI is thinking...</span>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Input Area */}
-        <div className="border-t border-neutral-200/50 dark:border-neutral-800/30 bg-white/50 dark:bg-neutral-900/30 p-6">
-          <div className="flex gap-3">
-            <input
-              type="text"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSend()}
-              placeholder="Try: 'Check my balance' or 'Is 0x3894085ef7ff0f0aedf52e2a2704928d1ec074f1 a contract?'"
-              className="flex-1 px-4 py-3 bg-white/80 dark:bg-neutral-800/50 backdrop-blur-sm border border-neutral-300/50 dark:border-neutral-600/50 rounded-xl text-sm placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-purple-500/50 dark:focus:ring-purple-400/50 focus:border-transparent transition-all"
-            />
-            <button
-              onClick={handleSend}
-              disabled={!input.trim() || isTyping}
-              className="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 disabled:from-neutral-400 disabled:to-neutral-500 text-white rounded-xl transition-all flex items-center gap-2 font-medium shadow-lg hover:shadow-xl disabled:shadow-none"
-            >
-              <IconSend className="h-4 w-4" />
-              Send
-            </button>
-          </div>
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-3 text-center">
-            This demo simulates MCP interactions. Configure MCP in Cursor, Windsurf, or Claude for real blockchain operations.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-} 
\ No newline at end of file
+	const [messages, setMessages] = useState<Message[]>([
+		{
+			role: 'assistant',
+			content:
+				"Hi! I'm your AI assistant powered by Sei MCP Server. Try asking me to:\n\n• Check your balance\n• Send SEI to an address\n• Analyze a contract\n• Get NFT info\n• Explore the latest block",
+			timestamp: new Date()
+		}
+	]);
+	const [input, setInput] = useState('');
+	const [isTyping, setIsTyping] = useState(false);
+
+	const handleSend = () => {
+		if (!input.trim()) return;
+
+		const userMessage: Message = {
+			role: 'user',
+			content: input,
+			timestamp: new Date()
+		};
+
+		setMessages((prev) => [...prev, userMessage]);
+		setInput('');
+		setIsTyping(true);
+
+		// Simulate AI response
+		setTimeout(() => {
+			let response = 'I can help you with that! In a real implementation, I would use the MCP Server to execute this request.';
+
+			// Check for keywords and provide appropriate response
+			const lowerInput = input.toLowerCase();
+			if (lowerInput.includes('balance')) {
+				response = exampleResponses.balance;
+			} else if (lowerInput.includes('send') && lowerInput.includes('sei')) {
+				response = exampleResponses.send;
+			} else if (lowerInput.includes('contract') || lowerInput.includes('0x3894085ef7ff0f0aedf52e2a2704928d1ec074f1')) {
+				response = exampleResponses.contract;
+			} else if (lowerInput.includes('nft')) {
+				response = exampleResponses.nft;
+			} else if (lowerInput.includes('block')) {
+				response = exampleResponses.block;
+			}
+
+			const assistantMessage: Message = {
+				role: 'assistant',
+				content: response,
+				timestamp: new Date()
+			};
+
+			setMessages((prev) => [...prev, assistantMessage]);
+			setIsTyping(false);
+		}, 1500);
+	};
+
+	return (
+		<div className='w-full max-w-5xl mx-auto my-12'>
+			<div className='rounded-sm overflow-hidden border border-neutral-200/50 dark:border-neutral-800/50 bg-gradient-to-br from-purple-500/5 via-blue-500/5 to-red-500/5 dark:from-purple-900/20 dark:via-blue-900/10 dark:to-red-900/20 shadow-xl'>
+				{/* Header */}
+				<div className='bg-gradient-to-r from-purple-600 via-purple-600 to-blue-600 p-6'>
+					<div className='flex items-center gap-4'>
+						<div className='w-12 h-12 rounded-sm bg-white/20 backdrop-blur-sm flex items-center justify-center'>
+							<IconTerminal2 className='h-6 w-6 text-white' />
+						</div>
+						<div>
+							<h3 className='text-white font-semibold text-lg flex items-center gap-2'>
+								MCP Server Interactive Demo
+								<IconSparkles className='h-5 w-5 text-yellow-300' />
+							</h3>
+							<p className='text-white/80 text-sm mt-0.5'>Experience AI-powered blockchain interactions</p>
+						</div>
+					</div>
+				</div>
+
+				{/* Notice Bar */}
+				<div className='bg-white/50 dark:bg-neutral-900/30 border-b border-neutral-200/50 dark:border-neutral-800/30 px-6 py-3'>
+					<p className='text-sm text-neutral-700 dark:text-neutral-300 flex items-center gap-2'>
+						<span className='inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'>
+							Demo Mode
+						</span>
+						<span>This is a simulation. To use real blockchain operations, configure MCP in your AI assistant.</span>
+					</p>
+				</div>
+
+				{/* Chat Area */}
+				<div className='h-[500px] overflow-y-auto p-6 space-y-6 scroll-smooth bg-white/30 dark:bg-neutral-950/30' style={{ scrollbarWidth: 'thin' }}>
+					{messages.map((message, index) => (
+						<div
+							key={index}
+							className={`flex gap-4 ${message.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-2 duration-300`}>
+							{message.role === 'assistant' && (
+								<div className='w-10 h-10 rounded-sm bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shrink-0 shadow-lg'>
+									<IconRobot className='h-5 w-5 text-white' />
+								</div>
+							)}
+
+							<div className={`max-w-[75%] ${message.role === 'user' ? 'order-1' : ''}`}>
+								<div
+									className={`rounded-sm px-5 py-3 ${
+										message.role === 'user'
+											? 'bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg'
+											: 'bg-white dark:bg-neutral-800/80 backdrop-blur-sm border border-neutral-200 dark:border-neutral-700 shadow-md'
+									}`}>
+									<div
+										className={`text-sm leading-relaxed whitespace-pre-wrap ${message.role === 'assistant' ? 'prose prose-sm dark:prose-invert max-w-none' : ''}`}>
+										{message.content.split(/(`[^`]+`|\*\*[^*]+\*\*)/g).map((part, i) => {
+											if (part.startsWith('`') && part.endsWith('`')) {
+												return (
+													<code
+														key={i}
+														className={`px-1.5 py-0.5 rounded ${
+															message.role === 'user' ? 'bg-white/20 text-white' : 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
+														} font-mono text-xs`}>
+														{part.slice(1, -1)}
+													</code>
+												);
+											} else if (part.startsWith('**') && part.endsWith('**')) {
+												return <strong key={i}>{part.slice(2, -2)}</strong>;
+											}
+											return part;
+										})}
+									</div>
+								</div>
+								<div
+									className={`text-xs mt-2 ${
+										message.role === 'user' ? 'text-right text-neutral-500 dark:text-neutral-400' : 'text-neutral-500 dark:text-neutral-400'
+									}`}>
+									{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+								</div>
+							</div>
+
+							{message.role === 'user' && (
+								<div className='w-10 h-10 rounded-sm bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center shrink-0 shadow-lg order-2'>
+									<IconUser className='h-5 w-5 text-white' />
+								</div>
+							)}
+						</div>
+					))}
+
+					{isTyping && (
+						<div className='flex gap-4 justify-start animate-in fade-in slide-in-from-bottom-2 duration-300'>
+							<div className='w-10 h-10 rounded-sm bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shrink-0 shadow-lg'>
+								<IconRobot className='h-5 w-5 text-white' />
+							</div>
+							<div className='bg-white dark:bg-neutral-800/80 backdrop-blur-sm border border-neutral-200 dark:border-neutral-700 rounded-sm px-5 py-3 shadow-md'>
+								<div className='flex items-center gap-2'>
+									<IconLoader2 className='h-4 w-4 animate-spin text-purple-600' />
+									<span className='text-sm text-neutral-600 dark:text-neutral-400'>AI is thinking...</span>
+								</div>
+							</div>
+						</div>
+					)}
+				</div>
+
+				{/* Input Area */}
+				<div className='border-t border-neutral-200/50 dark:border-neutral-800/30 bg-white/50 dark:bg-neutral-900/30 p-6'>
+					<div className='flex gap-3'>
+						<input
+							type='text'
+							value={input}
+							onChange={(e) => setInput(e.target.value)}
+							onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSend()}
+							placeholder="Try: 'Check my balance' or 'Is 0x3894085ef7ff0f0aedf52e2a2704928d1ec074f1 a contract?'"
+							className='flex-1 px-4 py-3 bg-white/80 dark:bg-neutral-800/50 backdrop-blur-sm border border-neutral-300/50 dark:border-neutral-600/50 rounded-sm text-sm placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-purple-500/50 dark:focus:ring-purple-400/50 focus:border-transparent transition-all'
+						/>
+						<button
+							onClick={handleSend}
+							disabled={!input.trim() || isTyping}
+							className='px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 disabled:from-neutral-400 disabled:to-neutral-500 text-white rounded-sm transition-all flex items-center gap-2 font-medium shadow-lg hover:shadow-xl disabled:shadow-none'>
+							<IconSend className='h-4 w-4' />
+							Send
+						</button>
+					</div>
+					<p className='text-xs text-neutral-500 dark:text-neutral-400 mt-3 text-center'>
+						This demo simulates MCP interactions. Configure MCP in Cursor, Windsurf, or Claude for real blockchain operations.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/NetworkTabs/index.tsx b/src/components/NetworkTabs/index.tsx
index 32d089a0..92319c9d 100644
--- a/src/components/NetworkTabs/index.tsx
+++ b/src/components/NetworkTabs/index.tsx
@@ -29,7 +29,7 @@ export function NetworkTabs({}: NetworkTabsProps) {
 	}, []);
 
 	const tabButtonClass = (tab: TabType): string =>
-		`px-3 py-1.5 text-sm rounded-md transition-colors ${
+		`px-3 py-1.5 text-sm rounded-sm transition-colors ${
 			activeTab === tab
 				? 'bg-neutral-200 dark:bg-neutral-800/80 text-neutral-900 dark:text-white border border-neutral-300 dark:border-neutral-700'
 				: 'bg-neutral-100 dark:bg-neutral-800/50 text-neutral-600 dark:text-neutral-400 border border-neutral-200 dark:border-neutral-700/50 hover:bg-neutral-200 dark:hover:bg-neutral-700/70 hover:text-neutral-900 dark:hover:text-white'
diff --git a/src/components/OfficeHoursCard/index.tsx b/src/components/OfficeHoursCard/index.tsx
index c49a529f..3ab6344a 100644
--- a/src/components/OfficeHoursCard/index.tsx
+++ b/src/components/OfficeHoursCard/index.tsx
@@ -24,15 +24,15 @@ export const OfficeHoursCard = () => {
 			href='https://discord.gg/sei'
 			target='_blank'
 			rel='noopener noreferrer'
-			className='my-6 block border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 rounded-xl shadow-sm transition-all duration-200 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md group'>
+			className='my-6 block border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 rounded-sm shadow-sm transition-all duration-200 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md group'>
 			<div className='flex items-center gap-4 p-4'>
-				<div className='bg-red-3 dark:bg-neutral-800 p-3 rounded-full flex-shrink-0 transition-all duration-200 group-hover:bg-red-4 dark:group-hover:bg-neutral-700'>
-					<IconClock className='w-5 h-5 text-red-9 dark:text-red-7' />
+				<div className='bg-[#f5f5f7] dark:bg-neutral-800 p-3 rounded-full flex-shrink-0 transition-all duration-200 group-hover:bg-[#ececee] dark:group-hover:bg-neutral-700'>
+					<IconClock className='w-5 h-5 text-[#600014] dark:text-[#b99ba1]' />
 				</div>
 				<div>
 					<h3 className='text-base font-medium text-neutral-900 dark:text-neutral-100 flex items-center'>
 						<span>Developer Office Hours</span>
-						<span className='ml-2 px-2 py-0.5 text-xs bg-red-3 dark:bg-neutral-800 rounded-full text-red-9 dark:text-red-7 border border-red-4 dark:border-neutral-700'>
+						<span className='ml-2 px-2 py-0.5 text-xs bg-[#f5f5f7] dark:bg-neutral-800 rounded-full text-[#600014] dark:text-[#b99ba1] border border-[#ececee] dark:border-neutral-700'>
 							Weekly
 						</span>
 					</h3>
diff --git a/src/components/QuickStartCard/index.tsx b/src/components/QuickStartCard/index.tsx
index d0a16fb4..fa99054b 100644
--- a/src/components/QuickStartCard/index.tsx
+++ b/src/components/QuickStartCard/index.tsx
@@ -17,30 +17,30 @@ export function QuickStartCard({ title, href, icon, description }: QuickStartCar
 	const CardContent = () => (
 		<div className='p-4 h-full relative overflow-hidden'>
 			<div className='absolute inset-0 bg-white/60 dark:bg-neutral-900/60 opacity-80'></div>
-			<div className='absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-red-7/30 via-red-7/10 to-transparent'></div>
+			<div className='absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-[#600014]/30 via-[#600014]/10 to-transparent'></div>
 			<div className='relative flex items-start'>
 				{icon && (
 					<div className='flex-shrink-0 mr-3'>
-						<div className='w-9 h-9 rounded-full bg-neutral-100/80 dark:bg-neutral-800/80 flex items-center justify-center transform group-hover:bg-red-7/10 dark:group-hover:bg-red-7/20 transition-colors duration-300'>
+						<div className='w-9 h-9 rounded-full bg-neutral-100/80 dark:bg-neutral-800/80 flex items-center justify-center transform group-hover:bg-[#600014]/10 dark:group-hover:bg-[#600014]/20 transition-colors duration-300'>
 							{icon}
 						</div>
 					</div>
 				)}
 				<div className='flex-grow'>
-					<h3 className='text-sm font-medium mb-1 text-neutral-800 dark:text-neutral-200 group-hover:text-red-9 dark:group-hover:text-red-7 transition-colors duration-300'>
+					<h3 className='text-sm font-medium mb-1 text-neutral-800 dark:text-neutral-200 group-hover:text-[#600014] dark:group-hover:text-[#b99ba1] transition-colors duration-300'>
 						{title}
 					</h3>
 					{description && <p className='text-xs text-neutral-500 dark:text-neutral-400 line-clamp-2'>{description}</p>}
 				</div>
 			</div>
 			<div className='absolute bottom-3 right-3 opacity-50 group-hover:opacity-100 transition-opacity duration-300'>
-				<IconArrowRight className='w-3 h-3 text-red-9 dark:text-red-7 group-hover:text-red-9 dark:group-hover:text-red-7' />
+				<IconArrowRight className='w-3 h-3 text-[#600014] dark:text-[#b99ba1] group-hover:text-[#600014] dark:group-hover:text-[#b99ba1]' />
 			</div>
 		</div>
 	);
 
 	const cardClasses =
-		'block w-full h-full backdrop-blur-sm bg-white/70 dark:bg-neutral-900/60 border border-neutral-200/40 dark:border-neutral-800/40 rounded-lg shadow-sm hover:shadow transition-all duration-300 group hover:border-red-9/20 dark:hover:border-red-7/20 relative overflow-hidden hover:-translate-y-[1px] animate-fadeIn odd:animate-fadeIn-400 even:animate-fadeIn-500 [&:nth-child(3n)]:animate-fadeIn-600';
+		'block w-full h-full backdrop-blur-sm bg-white/70 dark:bg-neutral-900/60 border border-neutral-200/40 dark:border-neutral-800/40 rounded-sm shadow-sm hover:shadow transition-all duration-300 group hover:border-[#600014]/20 dark:hover:border-[#600014]/20 relative overflow-hidden hover:-translate-y-[1px] animate-fadeIn odd:animate-fadeIn-400 even:animate-fadeIn-500 [&:nth-child(3n)]:animate-fadeIn-600';
 
 	if (isExternalLink) {
 		return (
diff --git a/src/components/RpcSelector/index.tsx b/src/components/RpcSelector/index.tsx
index eba9d803..a967b50b 100644
--- a/src/components/RpcSelector/index.tsx
+++ b/src/components/RpcSelector/index.tsx
@@ -229,14 +229,14 @@ export function RpcSelector() {
 	return (
 		<div className='flex flex-col'>
 			<div className='flex justify-end mb-6'>
-				<a href='/evm/reference' className='text-sm text-red-500 hover:text-red-600 dark:hover:text-red-400 flex items-center transition-colors'>
+				<a href='/evm/reference' className='text-sm text-[#600014] hover:text-[#600014] dark:hover:text-[#b99ba1] flex items-center transition-colors'>
 					View full RPC reference
 					<IconArrowRight className='h-4 w-4 ml-1' />
 				</a>
 			</div>
 
 			<div className='flex flex-col sm:flex-row gap-4 mb-6'>
-				<div className='flex items-center bg-neutral-50 dark:bg-neutral-800/60 rounded-lg border border-neutral-200 dark:border-neutral-700 px-3 py-1.5 w-full sm:max-w-md'>
+				<div className='flex items-center bg-neutral-50 dark:bg-neutral-800/60 rounded-sm border border-neutral-200 dark:border-neutral-700 px-3 py-1.5 w-full sm:max-w-md'>
 					<IconSearch className='h-4 w-4 text-neutral-400 mr-2' />
 					<input
 						type='text'
@@ -253,7 +253,7 @@ export function RpcSelector() {
 							setSelectedNetwork('mainnet');
 							setShowAllEndpoints(false);
 						}}
-						className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+						className={`px-3 py-1.5 text-sm rounded-sm transition-colors ${
 							selectedNetwork === 'mainnet'
 								? 'bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-white'
 								: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
@@ -265,7 +265,7 @@ export function RpcSelector() {
 							setSelectedNetwork('testnet');
 							setShowAllEndpoints(false);
 						}}
-						className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+						className={`px-3 py-1.5 text-sm rounded-sm transition-colors ${
 							selectedNetwork === 'testnet'
 								? 'bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-white'
 								: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
@@ -275,7 +275,7 @@ export function RpcSelector() {
 				</div>
 			</div>
 
-			<div className='bg-neutral-50 dark:bg-neutral-900/40 rounded-xl border border-neutral-200 dark:border-neutral-800 overflow-hidden'>
+			<div className='bg-neutral-50 dark:bg-neutral-900/40 rounded-sm border border-neutral-200 dark:border-neutral-800 overflow-hidden'>
 				<div className='px-4 py-3 bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-800 grid grid-cols-12 text-sm font-medium text-neutral-500 dark:text-neutral-400'>
 					<div className='col-span-6 sm:col-span-5'>Endpoint URL</div>
 					<div className='col-span-4 sm:col-span-3'>Provider</div>
@@ -309,13 +309,13 @@ export function RpcSelector() {
 											<div className='flex space-x-2'>
 												<button
 													onClick={() => handleCopy(endpoint.url)}
-													className='p-1 rounded-md text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
+													className='p-1 rounded-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
 													title='Copy to clipboard'>
 													{copiedUrl === endpoint.url ? <IconCheck className='h-4 w-4 text-green-500' /> : <IconCopy className='h-4 w-4' />}
 												</button>
 												<button
 													onClick={() => toggleEndpointDetails(endpoint.url)}
-													className='p-1 rounded-md text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
+													className='p-1 rounded-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors'
 													title='Show details'>
 													<IconChevronDown className={`h-4 w-4 transform transition-transform ${expandedEndpoint === endpoint.url ? 'rotate-180' : ''}`} />
 												</button>
@@ -361,7 +361,7 @@ export function RpcSelector() {
 													)}
 												</div>
 												{baseHeights[endpoint.url]?.baseHeight && (
-													<div className='flex items-start bg-orange-50 dark:bg-orange-900/10 border border-orange-200 dark:border-orange-800 rounded-md p-2'>
+													<div className='flex items-start bg-orange-50 dark:bg-orange-900/10 border border-orange-200 dark:border-orange-800 rounded-sm p-2'>
 														<IconAlertCircle className='h-4 w-4 text-orange-500 mr-2 mt-0.5 flex-shrink-0' />
 														<span className='text-xs text-orange-800 dark:text-orange-300'>
 															Historical blocks before {baseHeights[endpoint.url]?.baseHeight?.toLocaleString()} are not available on this endpoint.
@@ -383,7 +383,7 @@ export function RpcSelector() {
 								<div className='px-4 py-3 flex justify-center'>
 									<button
 										onClick={() => setShowAllEndpoints(true)}
-										className='flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors font-medium'>
+										className='flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors font-medium'>
 										<span>Show more</span>
 										<IconChevronDown className='h-4 w-4 ml-1' />
 									</button>
@@ -393,7 +393,7 @@ export function RpcSelector() {
 								<div className='px-4 py-3 flex justify-center'>
 									<button
 										onClick={() => setShowAllEndpoints(false)}
-										className='flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-red-500 dark:hover:text-red-400 transition-colors font-medium'>
+										className='flex items-center text-sm text-neutral-700 dark:text-neutral-300 hover:text-[#600014] dark:hover:text-[#b99ba1] transition-colors font-medium'>
 										<span>Show fewer RPC endpoints</span>
 										<IconChevronUp className='h-4 w-4 ml-1' />
 									</button>
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index a37db4a0..60f6e46b 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -38,7 +38,7 @@ Tabs.displayName = 'Tabs';
 export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(({ className, children }, ref) => (
 	<TabsPrimitive.List
 		ref={ref}
-		className={className || 'flex w-full border border-neutral-200 dark:border-neutral-800 rounded-lg overflow-x-auto overflow-y-hidden flex-nowrap mb-4'}>
+		className={className || 'flex w-full border border-neutral-200 dark:border-neutral-800 rounded-sm overflow-x-auto overflow-y-hidden flex-nowrap mb-4'}>
 		{children}
 	</TabsPrimitive.List>
 ));
@@ -55,7 +55,7 @@ export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>
 				data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-800
 				border-r border-neutral-200 dark:border-neutral-800 last:border-r-0
 				transition-colors duration-200
-				focus:outline-none focus:ring-2 focus:ring-red-500/20 dark:focus:ring-red-500/10
+				focus:outline-none focus:ring-2 focus:ring-[#600014]/20 dark:focus:ring-[#600014]/10
 				font-medium text-neutral-700 dark:text-neutral-300
 				data-[state=active]:text-neutral-900 dark:data-[state=active]:text-white`
 		}>
@@ -75,7 +75,7 @@ export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(({
 				className={
 					className ||
 					`mt-0 p-6 
-						border border-neutral-200 dark:border-neutral-800 rounded-lg 
+						border border-neutral-200 dark:border-neutral-800 rounded-sm 
 						bg-neutral-50 dark:bg-neutral-900/30
 						animate-in fade-in-0 zoom-in-95 duration-200`
 				}>
diff --git a/src/components/VersionFetcher/VersionTable.tsx b/src/components/VersionFetcher/VersionTable.tsx
index 40523a80..72bc4a1d 100644
--- a/src/components/VersionFetcher/VersionTable.tsx
+++ b/src/components/VersionFetcher/VersionTable.tsx
@@ -40,7 +40,7 @@ const VersionTable: React.FC<VersionTableProps> = ({ showGenesis = true }) => {
 								<div className='inline-flex items-center space-x-2'>
 									<a
 										href='https://raw.githubusercontent.com/sei-protocol/testnet/refs/heads/main/pacific-1/genesis.json'
-										className='text-red-600 hover:text-red-800 dark:text-red-300 dark:hover:text-red-200 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-0.5 rounded'>
+										className='text-[#600014] hover:text-[#34050d] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] bg-[#f5f5f7] hover:bg-[#ececee] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-0.5 rounded-sm'>
 										Genesis
 									</a>
 									<CopyButton textToCopy='https://raw.githubusercontent.com/sei-protocol/testnet/refs/heads/main/pacific-1/genesis.json' />
@@ -58,7 +58,7 @@ const VersionTable: React.FC<VersionTableProps> = ({ showGenesis = true }) => {
 								<div className='inline-flex items-center space-x-2'>
 									<a
 										href='https://raw.githubusercontent.com/sei-protocol/testnet/refs/heads/main/atlantic-2/genesis.json'
-										className='text-red-600 hover:text-red-800 dark:text-red-300 dark:hover:text-red-200 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 px-2 py-0.5 rounded'>
+										className='text-[#600014] hover:text-[#34050d] dark:text-[#b99ba1] dark:hover:text-[#e6d4c3] bg-[#f5f5f7] hover:bg-[#ececee] dark:bg-[#600014]/20 dark:hover:bg-[#600014]/30 px-2 py-0.5 rounded-sm'>
 										Genesis
 									</a>
 									<CopyButton textToCopy='https://raw.githubusercontent.com/sei-protocol/testnet/refs/heads/main/atlantic-2/genesis.json' />
diff --git a/src/providers/DocsProviders.tsx b/src/providers/DocsProviders.tsx
index 884af740..374cc2de 100644
--- a/src/providers/DocsProviders.tsx
+++ b/src/providers/DocsProviders.tsx
@@ -11,7 +11,6 @@ import { ThemeSwitch } from 'nextra-theme-docs';
 import { usePathname } from 'next/navigation';
 import { Snowflakes, Confetti } from '../components/SeasonalEffects';
 
-// Defer Nextra Search until user clicks the trigger (client-only wrapper)
 const SearchDynamic = dynamic(() => import('../components/NextraSearch/NextraSearch'), { ssr: false, loading: () => <div /> });
 
 export default function DocsProviders({ children, pageMap }) {
@@ -25,45 +24,40 @@ export default function DocsProviders({ children, pageMap }) {
 		const onChange = (e) => {
 			setIsMobile((prev) => (prev !== e.matches ? e.matches : prev));
 		};
-		// Sync once on mount without forcing extra renders if unchanged
 		setIsMobile((prev) => (prev !== mql.matches ? mql.matches : prev));
 		mql.addEventListener('change', onChange);
 		return () => mql.removeEventListener('change', onChange);
 	}, []);
 
-	if (!pageMap) return <div className='bg-neutral-950 h-full w-full' />;
+	if (!pageMap) return <div className='bg-black h-full w-full' />;
 
 	const ConditionalNavbar = () => {
 		const pathname = usePathname();
 		const isHomepage = pathname === '/' || pathname === '/index';
 
 		return isMobile ? (
-			<>
-				<Navbar
-					logo={<LogoMobile />}
-					logoLink='/'
-					className='flex items-center w-full dark:bg-neutral-900 bg-neutral-100'
-					children={
-						<>
-							<div className='flex items-center gap-2'>
-								<AskAIAssistant />
-								<SearchDynamic placeholder='Search docs...' />
-							</div>
-						</>
-					}
-				/>
-			</>
+			<Navbar
+				logo={<LogoMobile />}
+				logoLink='/'
+				className='sei-nav flex items-center w-full'
+				children={
+					<div className='flex items-center gap-2'>
+						<AskAIAssistant />
+						<SearchDynamic placeholder='Search...' />
+					</div>
+				}
+			/>
 		) : (
 			<Navbar
 				logo={<Logo />}
 				logoLink='/'
-				className='flex items-center justify-between w-full dark:bg-neutral-900 bg-neutral-100 px-2 lg:px-4'
+				className='sei-nav flex items-center justify-between w-full px-4 lg:px-8'
 				children={
-					<div className='flex items-center justify-between gap-4'>
+					<div className='sei-nav flex items-center justify-between gap-6'>
 						<div className='flex-grow flex justify-start'>
 							<AskAIAssistant />
 						</div>
-						<SearchDynamic placeholder='Search docs...' />
+						<SearchDynamic placeholder='Search...' />
 						{isHomepage && <ThemeSwitch />}
 					</div>
 				}
@@ -81,7 +75,7 @@ export default function DocsProviders({ children, pageMap }) {
 				footer={<Footer />}
 				darkMode={true}
 				search={null}
-				nextThemes={{ attribute: 'class', defaultTheme: 'system' }}
+				nextThemes={{ attribute: 'class', defaultTheme: 'dark' }}
 				pageMap={pageMap}>
 				{isMobile && <ConditionalNavbar />}
 				<Theme accentColor='red' grayColor='gray' scaling='100%'>
diff --git a/src/styles/LinkCard.module.css b/src/styles/LinkCard.module.css
index eb684b50..431840cd 100644
--- a/src/styles/LinkCard.module.css
+++ b/src/styles/LinkCard.module.css
@@ -1,3 +1,5 @@
+/* LinkCard — Sei Design System aligned */
+
 .cardContainer {
 	position: relative;
 	height: 100%;
@@ -7,24 +9,29 @@
 	display: block;
 	height: 100%;
 	overflow: hidden;
-	border-radius: 0.75rem;
-	background-color: #f9d2d2;
+	border-radius: 8px;
+	background-color: #f5f5f7;
 	color: #000;
-	transition: all 0.3s ease;
+	border: 1px solid rgba(0, 0, 0, 0.08);
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease;
 }
 
 .cardLink:hover {
-	background-color: #e5a8a8;
+	background-color: #ececee;
+	border-color: rgba(0, 0, 0, 0.15);
 }
 
-/* Dark mode background/text */
 :global(.dark) .cardLink {
-	background-color: #8b1f1f;
+	background-color: #131313;
 	color: #fff;
+	border-color: #333;
 }
 
 :global(.dark) .cardLink:hover {
-	background-color: #9b2f2f;
+	background-color: #1a1a1a;
+	border-color: #444;
 }
 
 .cardContent {
@@ -34,18 +41,20 @@
 }
 
 .icon {
-	color: rgba(0, 0, 0, 0.9);
+	color: rgba(0, 0, 0, 0.75);
 }
 
 :global(.dark) .icon {
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(255, 255, 255, 0.75);
 }
 
 .title {
-	margin-top: 1rem;
+	margin-top: 0.75rem;
 	margin-bottom: 0;
-	font-size: 1.25rem;
+	font-size: 1.125rem;
 	font-weight: 600;
+	font-family: 'Inter', system-ui, sans-serif;
+	letter-spacing: -0.02em;
 	color: #000;
 }
 
@@ -54,89 +63,101 @@
 }
 
 .description {
-	margin-top: 0.5rem;
-	font-size: 0.9375rem;
+	margin-top: 0.375rem;
+	font-size: 0.875rem;
 	line-height: 1.5;
-	color: rgba(0, 0, 0, 0.8);
+	color: #666;
+	font-family: 'Inter', system-ui, sans-serif;
 }
 
 :global(.dark) .description {
-	color: rgba(255, 255, 255, 0.8);
+	color: #999;
 }
 
 .overviewButton {
 	display: flex;
 	align-items: center;
 	gap: 0.25rem;
-	border-radius: 9999px;
-	font-size: 0.75rem;
+	border-radius: 2px;
+	font-size: 11px;
+	font-family: 'JetBrains Mono', monospace;
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
 	background-color: rgba(0, 0, 0, 0.05);
-	color: rgba(0, 0, 0, 0.6);
-	padding: 0.25rem 0.625rem;
-	transition: all 0.2s;
+	color: rgba(0, 0, 0, 0.5);
+	padding: 0.25rem 0.5rem;
+	transition: all 0.15s ease;
+	border: none;
+	cursor: pointer;
 }
 
 .overviewButton:hover {
 	background-color: rgba(0, 0, 0, 0.1);
-	color: rgba(0, 0, 0, 0.9);
+	color: rgba(0, 0, 0, 0.8);
 }
 
 :global(.dark) .overviewButton {
-	background-color: rgba(255, 255, 255, 0.05);
-	color: rgba(255, 255, 255, 0.6);
+	background-color: rgba(255, 255, 255, 0.06);
+	color: rgba(255, 255, 255, 0.5);
 }
 
 :global(.dark) .overviewButton:hover {
 	background-color: rgba(255, 255, 255, 0.1);
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .previewOverlay {
 	position: absolute;
 	inset: 0;
-	border-radius: 0.75rem;
-	background-color: #f1f1f1;
-	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+	border-radius: 8px;
+	background-color: #f5f5f7;
+	border: 1px solid rgba(0, 0, 0, 0.08);
 	display: flex;
 	flex-direction: column;
 }
 
 :global(.dark) .previewOverlay {
-	background-color: #1a1a1a;
+	background-color: #131313;
+	border-color: #333;
 }
 
 .closeButtonContainer {
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
-	padding: 1rem;
+	padding: 0.75rem 1rem;
 }
 
 .closeButton {
 	display: flex;
 	align-items: center;
 	gap: 0.375rem;
-	border-radius: 9999px;
-	font-size: 0.75rem;
+	border-radius: 2px;
+	font-size: 11px;
+	font-family: 'JetBrains Mono', monospace;
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
 	background-color: rgba(0, 0, 0, 0.05);
-	color: rgba(0, 0, 0, 0.6);
-	padding: 0.25rem 0.625rem;
-	transition: all 0.2s;
+	color: rgba(0, 0, 0, 0.5);
+	padding: 0.25rem 0.5rem;
+	transition: all 0.15s ease;
+	border: none;
+	cursor: pointer;
 }
 
 .closeButton:hover {
 	background-color: rgba(0, 0, 0, 0.1);
-	color: rgba(0, 0, 0, 0.9);
+	color: rgba(0, 0, 0, 0.8);
 }
 
 :global(.dark) .closeButton {
-	background-color: rgba(255, 255, 255, 0.05);
-	color: rgba(255, 255, 255, 0.6);
+	background-color: rgba(255, 255, 255, 0.06);
+	color: rgba(255, 255, 255, 0.5);
 }
 
 :global(.dark) .closeButton:hover {
 	background-color: rgba(255, 255, 255, 0.1);
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .previewContent {
@@ -146,47 +167,54 @@
 }
 
 .overlayText {
-	font-size: 0.9375rem;
-	line-height: 1.5;
-	color: rgba(0, 0, 0, 0.8);
+	font-size: 0.875rem;
+	line-height: 1.6;
+	color: rgba(0, 0, 0, 0.7);
+	font-family: 'Inter', system-ui, sans-serif;
 }
 
 :global(.dark) .overlayText {
-	color: rgba(255, 255, 255, 0.8);
+	color: rgba(255, 255, 255, 0.7);
 }
 
 .highlightItem {
 	display: flex;
 	gap: 0.75rem;
 	align-items: flex-start;
-	font-size: 0.875rem;
+	font-size: 0.8125rem;
 	line-height: 1.5;
-	color: rgba(0, 0, 0, 0.7);
+	color: rgba(0, 0, 0, 0.6);
+	font-family: 'Inter', system-ui, sans-serif;
 }
 
 :global(.dark) .highlightItem {
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(255, 255, 255, 0.6);
 }
 
 .highlightBullet {
 	margin-top: 0.5rem;
-	height: 4px;
-	width: 4px;
+	height: 3px;
+	width: 3px;
 	border-radius: 9999px;
-	background-color: #f9d2d2;
+	background-color: #600014;
+	flex-shrink: 0;
 }
 
 :global(.dark) .highlightBullet {
-	background-color: #8b1f1f;
+	background-color: #b99ba1;
 }
 
 .customScrollbar {
 	scrollbar-width: thin;
+	scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+}
+
+:global(.dark) .customScrollbar {
 	scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
 }
 
 .customScrollbar::-webkit-scrollbar {
-	width: 2px;
+	width: 3px;
 }
 
 .customScrollbar::-webkit-scrollbar-track {
@@ -194,6 +222,10 @@
 }
 
 .customScrollbar::-webkit-scrollbar-thumb {
+	background-color: rgba(0, 0, 0, 0.1);
+	border-radius: 2px;
+}
+
+:global(.dark) .customScrollbar::-webkit-scrollbar-thumb {
 	background-color: rgba(255, 255, 255, 0.1);
-	border-radius: 1px;
 }
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 2f1b7a0f..49c996fc 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -1,89 +1,107 @@
-/* styles/custom.css */
+/* styles/custom.css — Sei Design System */
+
 .callout.custom-green {
-    background-color: rgba(0, 255, 0, 0.1); /* Light transparent green background */
-    border: 1px solid rgba(0, 255, 0, 0.3); /* Light green border */
-    padding: 8px 12px; /* Smaller padding */
-    margin: 16px 0;
-    border-radius: 8px; /* Slightly rounded corners */
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-    color: #00FF00; /* Green text color */
-    display: flex;
-    align-items: center;
-    font-size: 14px; /* Smaller font size */
+	background-color: rgba(56, 223, 0, 0.06);
+	border: 1px solid rgba(56, 223, 0, 0.2);
+	padding: 12px 16px;
+	margin: 16px 0;
+	border-radius: 8px;
+	color: #1a5c00;
+	display: flex;
+	align-items: center;
+	font-size: 14px;
+	font-family: 'Inter', system-ui, sans-serif;
+}
+
+.dark .callout.custom-green {
+	background-color: rgba(56, 223, 0, 0.08);
+	border-color: rgba(56, 223, 0, 0.25);
+	color: #7adf55;
 }
 
 .callout.custom-green::before {
-    content: "✅";
-    margin-right: 8px;
-    font-size: 16px; /* Smaller icon size */
+	content: '✓';
+	margin-right: 10px;
+	font-size: 14px;
+	font-weight: 600;
+	color: #38df00;
 }
 
 .downloadButton {
-    background: #001B2A; /* Dark color */
-    border: none;
-    color: #ECDEDE; /* Light color */
-    padding: 0.5rem 1rem;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: color 0.3s, background 0.3s;
-    display: inline-block;
-    margin-top: 1rem;
-    margin-right: 0.5rem;
-    border-radius: 25px; /* Rounded corners */
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    font-family: Inter, sans-serif;
+	background: #000;
+	border: 1px solid #333;
+	color: #fff;
+	padding: 8px 20px;
+	font-size: 12px;
+	font-family: 'JetBrains Mono', monospace;
+	text-transform: uppercase;
+	letter-spacing: -0.01em;
+	cursor: pointer;
+	transition:
+		background-color 0.15s ease,
+		border-color 0.15s ease;
+	display: inline-block;
+	margin-top: 1rem;
+	margin-right: 0.5rem;
+	border-radius: 2px;
+	text-align: center;
 }
 
 .downloadButton:hover {
-    color: #001B2A; /* Dark color */
-    background: #ECDEDE; /* Light color */
+	background: #131313;
+	border-color: #666;
 }
 
 .imageWrapper {
-    margin: 2rem 0;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
+	margin: 2rem 0;
+	text-align: center;
+	cursor: pointer;
+	position: relative;
 }
 
 .imageWrapper:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease;
+	opacity: 0.9;
+	transition: opacity 0.2s ease;
 }
 
 .imageContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .image {
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	border-radius: 8px;
+	border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.dark .image {
+	border-color: #333;
 }
 
 .modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.85);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
 }
 
 .modalContent {
-    position: relative;
-    width: 80%;
-    height: 80%;
+	position: relative;
+	width: 80%;
+	height: 80%;
 }
 
 .modalContent img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
 }
diff --git a/src/styles/custom.module.css b/src/styles/custom.module.css
index 65bab442..348a098e 100644
--- a/src/styles/custom.module.css
+++ b/src/styles/custom.module.css
@@ -1,90 +1,118 @@
-/* styles/custom.module.css */
+/* styles/custom.module.css — Sei Design System */
+
 .callout.custom-green {
-background-color: rgba(0, 255, 0, 0.1); /* Light transparent green background */
-border: 1px solid rgba(0, 255, 0, 0.3); /* Light green border */
-padding: 8px 12px; /* Smaller padding */
-margin: 16px 0;
-border-radius: 8px; /* Slightly rounded corners */
-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-color: #00FF00; /* Green text color */
-display: flex;
-align-items: center;
-font-size: 14px; /* Smaller font size */
+	background-color: rgba(56, 223, 0, 0.06);
+	border: 1px solid rgba(56, 223, 0, 0.2);
+	padding: 12px 16px;
+	margin: 16px 0;
+	border-radius: 8px;
+	color: #1a5c00;
+	display: flex;
+	align-items: center;
+	font-size: 14px;
+	font-family: 'Inter', system-ui, sans-serif;
+}
+
+:global(.dark) .callout.custom-green {
+	background-color: rgba(56, 223, 0, 0.08);
+	border-color: rgba(56, 223, 0, 0.25);
+	color: #7adf55;
 }
 
 .callout.custom-green::before {
-content: "✅";
-margin-right: 8px;
-font-size: 16px; /* Smaller icon size */
+	content: '✓';
+	margin-right: 10px;
+	font-size: 14px;
+	font-weight: 600;
+	color: #38df00;
 }
 
 .downloadButton {
-    background: black; /* Dark color */
-    border: white solid 1px;
-    color: white; /* Light color */
-    padding: 0.5rem 1rem;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: color 0.3s, background 0.3s;
-    display: inline-block;
-    margin-top: 1rem;
-    margin-right: 0.5rem;
-    border-radius: 25px; /* Rounded corners */
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    font-family: Inter, sans-serif;
+	background: #000;
+	border: 1px solid #333;
+	color: #fff;
+	padding: 8px 20px;
+	font-size: 12px;
+	font-family: 'JetBrains Mono', monospace;
+	text-transform: uppercase;
+	letter-spacing: -0.01em;
+	cursor: pointer;
+	transition:
+		background-color 0.15s ease,
+		border-color 0.15s ease;
+	display: inline-block;
+	margin-top: 1rem;
+	margin-right: 0.5rem;
+	border-radius: 2px;
+	text-align: center;
 }
 
 .downloadButton:hover {
-    color: black; /* Dark color */
-    background: white; /* Light color */
-    border: black solid 1px;
+	background: #131313;
+	border-color: #666;
+}
+
+:global(.light) .downloadButton {
+	background: #f5f5f7;
+	border-color: rgba(0, 0, 0, 0.12);
+	color: #000;
+}
+
+:global(.light) .downloadButton:hover {
+	background: #ececee;
+	border-color: rgba(0, 0, 0, 0.2);
 }
 
 .imageWrapper {
-margin: 2rem 0;
-text-align: center;
-cursor: pointer;
-position: relative;
+	margin: 2rem 0;
+	text-align: center;
+	cursor: pointer;
+	position: relative;
 }
 
 .imageWrapper:hover {
-transform: scale(1.05);
-transition: transform 0.3s ease;
+	opacity: 0.9;
+	transition: opacity 0.2s ease;
 }
 
 .imageContainer {
-display: flex;
-justify-content: center;
-align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .image {
-border-radius: 8px;
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	border-radius: 8px;
+	border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+:global(.dark) .image {
+	border-color: #333;
 }
 
 .modal {
-position: fixed;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-background: rgba(0, 0, 0, 0.8);
-display: flex;
-justify-content: center;
-align-items: center;
-z-index: 1000;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.85);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
 }
 
 .modalContent {
-position: relative;
-width: 80%;
-height: 80%;
+	position: relative;
+	width: 80%;
+	height: 80%;
 }
 
 .modalContent img {
-max-width: 100%;
-max-height: 100%;
-object-fit: contain;
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c95..4af8e131 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,23 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Sei Design System base overrides via Tailwind layer */
+@layer base {
+	html {
+		font-family:
+			'Inter',
+			system-ui,
+			-apple-system,
+			sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	code,
+	pre,
+	kbd,
+	samp {
+		font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+	}
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2d754a00..9c743483 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,67 @@ const config: Config = {
 	darkMode: 'class',
 	content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}', './content/**/*.{js,ts,jsx,tsx,mdx}'],
 	theme: {
-		extend: {}
+		extend: {
+			colors: {
+				sei: {
+					black: '#000000',
+					white: '#ffffff',
+					cream: '#e6d4c3',
+					live: '#38df00',
+					error: '#fa0c00',
+					grey: {
+						25: '#f5f5f7',
+						50: '#cccccc',
+						75: '#999999',
+						100: '#999999',
+						200: '#666666',
+						300: '#333333',
+						400: '#333333',
+						600: '#131313'
+					},
+					maroon: {
+						25: '#b99ba1',
+						50: '#b05c6c',
+						100: '#600014',
+						200: '#34050d'
+					},
+					gold: {
+						25: '#d6c9ac',
+						100: '#966f22',
+						200: '#5d4a22',
+						400: '#3e3115',
+						600: '#1f180a'
+					}
+				}
+			},
+			fontFamily: {
+				display: ['"Inter"', 'system-ui', '-apple-system', 'sans-serif'],
+				body: ['"Inter"', 'system-ui', '-apple-system', 'sans-serif'],
+				mono: ['"JetBrains Mono"', '"SF Mono"', '"Fira Code"', '"Cascadia Code"', 'monospace']
+			},
+			fontSize: {
+				d1: ['95px', { lineHeight: '0.9', letterSpacing: '-3px', fontWeight: '685' }],
+				d2: ['70px', { lineHeight: '0.9', letterSpacing: '-2px', fontWeight: '685' }],
+				h1: ['60px', { lineHeight: '0.95', letterSpacing: '-1px', fontWeight: '685' }],
+				h2: ['56px', { lineHeight: '0.95', letterSpacing: '-1px', fontWeight: '685' }],
+				h3: ['45px', { lineHeight: '0.9', letterSpacing: '-1px', fontWeight: '685' }],
+				'subtitle-lg': ['24px', { lineHeight: '1', letterSpacing: '-2px', fontWeight: '400' }],
+				'subtitle-sm': ['20px', { lineHeight: '1.1', letterSpacing: '0', fontWeight: '685' }],
+				'body-lg': ['40px', { lineHeight: '1', letterSpacing: '-2px', fontWeight: '400' }],
+				'body-md': ['20px', { lineHeight: '1.1', letterSpacing: '-1.9px', fontWeight: '350' }],
+				'body-sm': ['16px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '350' }],
+				'body-xs': ['14px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '400' }],
+				button: ['12px', { lineHeight: '1.2', letterSpacing: '-1px', fontWeight: '400' }],
+				'button-sm': ['10px', { lineHeight: '1.2', letterSpacing: '-1px', fontWeight: '400' }],
+				nav: ['12px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '400' }],
+				meta: ['12px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '400' }],
+				supporting: ['12px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '400' }],
+				'supporting-sm': ['9px', { lineHeight: '1.3', letterSpacing: '2px', fontWeight: '400' }]
+			},
+			borderRadius: {
+				button: '64px'
+			}
+		}
 	},
 	plugins: []
 };