tokvista 1.0.0

package/dist/styles.css

@@ -0,0 +1,3428 @@
+/**
+ * Tokvista - Production Ready Style
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+:root {
+  --ftd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --ftd-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;
+
+
+  /* Color System */
+  --ftd-bg-page: #ffffff;
+  --ftd-bg-subtle: #f8fafc;
+  --ftd-bg-card: #ffffff;
+  --ftd-bg-hover: #f1f5f9;
+
+  --ftd-border: #e2e8f0;
+  --ftd-border-hover: #cbd5e1;
+
+  --ftd-text-main: #0f172a;
+  --ftd-text-sub: #475569;
+  --ftd-text-muted: #64748b;
+
+  --ftd-primary: #2563eb;
+  --ftd-primary-rgb: 37, 99, 235;
+  --ftd-primary-fade: rgba(37, 99, 235, 0.1);
+
+  --ftd-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
+  --ftd-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
+
+  --ftd-radius: 14px;
+
+  /* Glass effect */
+  --ftd-page-backdrop:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 45%),
+    radial-gradient(1200px 500px at 10% -10%, rgba(59, 130, 246, 0.18), transparent 60%),
+    radial-gradient(900px 500px at 95% 0%, rgba(14, 165, 233, 0.12), transparent 55%),
+    linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f8fafc 100%);
+  --ftd-glass-bg: rgba(255, 255, 255, 0.72);
+  --ftd-glass-bg-strong: rgba(255, 255, 255, 0.86);
+  --ftd-glass-border: rgba(148, 163, 184, 0.35);
+  --ftd-glass-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+  --ftd-glass-blur: 16px;
+
+  /* Premium polish */
+  --ftd-surface-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.78) 100%);
+  --ftd-surface-bg-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.9) 100%);
+  --ftd-panel-bg: rgba(255, 255, 255, 0.68);
+  --ftd-outline-soft: rgba(15, 23, 42, 0.08);
+  --ftd-premium-edge: rgba(255, 255, 255, 0.7);
+  --ftd-premium-shadow: 0 10px 28px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06);
+  --ftd-premium-shadow-hover: 0 14px 36px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08);
+  --ftd-premium-ring: 0 0 0 3px rgba(var(--ftd-primary-rgb), 0.25);
+}
+
+[data-theme="dark"] {
+  --ftd-bg-page: #0f172a;
+  --ftd-bg-subtle: #1e293b;
+  --ftd-bg-card: #1e293b;
+  --ftd-bg-hover: #334155;
+
+  --ftd-border: #334155;
+  --ftd-border-hover: #475569;
+
+  --ftd-text-main: #f8fafc;
+  --ftd-text-sub: #9aa7b8;
+  --ftd-text-muted: #8b97aa;
+
+  --ftd-primary: #60a5fa;
+  --ftd-primary-rgb: 96, 165, 250;
+  --ftd-primary-fade: rgba(96, 165, 250, 0.15);
+
+  --ftd-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
+
+  /* Glass effect (dark) */
+  --ftd-page-backdrop:
+    linear-gradient(180deg, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0) 45%),
+    radial-gradient(1100px 520px at 10% -15%, rgba(59, 130, 246, 0.18), transparent 60%),
+    radial-gradient(900px 460px at 95% -10%, rgba(14, 165, 233, 0.12), transparent 55%),
+    linear-gradient(180deg, #0b1020 0%, #0f172a 45%, #0b1020 100%);
+  --ftd-glass-bg: rgba(15, 23, 42, 0.62);
+  --ftd-glass-bg-strong: rgba(15, 23, 42, 0.78);
+  --ftd-glass-border: rgba(148, 163, 184, 0.18);
+  --ftd-glass-shadow: 0 18px 40px rgba(2, 6, 23, 0.55);
+  --ftd-glass-blur: 18px;
+
+  /* Premium polish (dark) */
+  --ftd-surface-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.8) 100%);
+  --ftd-surface-bg-strong: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.88) 100%);
+  --ftd-panel-bg: rgba(15, 23, 42, 0.58);
+  --ftd-outline-soft: rgba(148, 163, 184, 0.12);
+  --ftd-premium-edge: rgba(255, 255, 255, 0.08);
+  --ftd-premium-shadow: 0 14px 36px rgba(2, 6, 23, 0.45), 0 4px 12px rgba(2, 6, 23, 0.35);
+  --ftd-premium-shadow-hover: 0 18px 46px rgba(2, 6, 23, 0.55), 0 6px 16px rgba(2, 6, 23, 0.4);
+  --ftd-premium-ring: 0 0 0 3px rgba(var(--ftd-primary-rgb), 0.35);
+}
+
+body {
+  margin: 0;
+}
+
+/* --- Layout --- */
+.ftd-container {
+  font-family: var(--ftd-font-sans);
+  background: var(--ftd-page-backdrop);
+  background-attachment: fixed;
+  color: var(--ftd-text-main);
+  padding: 0 40px 0px 40px;
+  /* Added significant bottom padding */
+  min-height: 100vh;
+  position: relative;
+}
+
+.ftd-container-animated {
+  transition: opacity 0.1s ease-in;
+}
+
+/* --- Header --- */
+.ftd-navbar-sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  background: var(--ftd-glass-bg-strong);
+  padding: 0;
+  border-bottom: 1px solid var(--ftd-glass-border);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+}
+
+/* --- Glass Surfaces --- */
+.ftd-glass-surface,
+.ftd-section,
+.ftd-semantic-section,
+.ftd-variant-card,
+.ftd-radius-container,
+.ftd-dimension-group,
+.ftd-color-sidebar,
+.ftd-search-container,
+.ftd-export-container,
+.ftd-playground-toolbar-v2,
+.ftd-playground-sidebar,
+.ftd-playground-code,
+.ftd-token-card,
+.ftd-spacing-item,
+.ftd-dimension-item,
+.ftd-display-card {
+  background: var(--ftd-glass-bg);
+  border-color: var(--ftd-glass-border);
+  box-shadow: var(--ftd-glass-shadow);
+}
+
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .ftd-glass-surface,
+  .ftd-section,
+  .ftd-foundation-section,
+  .ftd-semantic-section,
+  .ftd-variant-card,
+  .ftd-radius-container,
+  .ftd-dimension-group,
+  .ftd-color-sidebar,
+  .ftd-search-container,
+  .ftd-export-container,
+  .ftd-playground-toolbar-v2,
+  .ftd-playground-sidebar,
+  .ftd-playground-code,
+  .ftd-navbar-sticky {
+    backdrop-filter: blur(var(--ftd-glass-blur)) saturate(1.1);
+    -webkit-backdrop-filter: blur(var(--ftd-glass-blur)) saturate(1.1);
+  }
+}
+
+.ftd-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding: 16px 40px;
+}
+
+.ftd-icon {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  flex-shrink: 0;
+}
+
+.ftd-section-icon,
+.ftd-nav-icon,
+.ftd-playground-tab-icon,
+.ftd-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-section-icon .ftd-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.ftd-playground-tab-icon .ftd-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.ftd-empty-icon .ftd-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.ftd-theme-toggle .ftd-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  display: block;
+}
+.ftd-title-wrapper {
+  height: 67px;
+}
+
+.ftd-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.03em;
+}
+
+.ftd-subtitle {
+  color: var(--ftd-text-sub);
+  margin: 0;
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+}
+
+.ftd-text-muted {
+  color: var(--ftd-text-muted);
+}
+
+.ftd-header-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+
+
+
+
+.ftd-theme-toggle {
+  background: var(--ftd-primary-fade);
+  border: 1px solid rgba(var(--ftd-primary-rgb), 0.15);
+  color: var(--ftd-primary);
+  min-width: 100px;
+  height: 40px;
+  padding: 0 20px;
+  border-radius: 99px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+  line-height: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ftd-theme-toggle:hover {
+  background: rgba(var(--ftd-primary-rgb), 0.15);
+  transform: translateY(-1px);
+}
+
+/* --- Tabs --- */
+.ftd-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 0;
+  /* Margin handled by navbar-sticky */
+  overflow-x: auto;
+  padding: 0 40px 16px 40px;
+}
+
+.ftd-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 150px;
+  padding: 8px 16px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--ftd-text-sub);
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.9rem;
+}
+
+.ftd-tab:hover {
+  background: var(--ftd-bg-hover);
+  color: var(--ftd-text-main);
+}
+
+.ftd-playground-copy-btn:hover {
+  background: var(--ftd-bg-hover);
+  color: var(--ftd-primary);
+  border-color: var(--ftd-primary);
+}
+
+/* Syntax Highlighting Base */
+.ftd-sh-punctuation { color: #64748b; }
+.ftd-sh-value { color: #059669; }    /* Emerald Green */
+.ftd-sh-string { color: #059669; }   /* Emerald Green */
+.ftd-sh-comment { color: #94a3b8; font-style: italic; }
+
+/* SCSS Theme (Sublime Sass Style) */
+.ftd-lang-scss .ftd-sh-selector { color: #6366f1; } /* Indigo Selectors */
+.ftd-lang-scss .ftd-sh-property { color: #db2777; } /* Pink Properties */
+.ftd-lang-scss .ftd-sh-value { color: #0d9488; }    /* Teal Values */
+
+/* CSS Theme (Premium Onyx Style) */
+.ftd-lang-css .ftd-sh-selector { color: #8b5cf6; } /* Purple Selectors */
+.ftd-lang-css .ftd-sh-property { color: #3b82f6; } /* Blue Properties */
+.ftd-lang-css .ftd-sh-value { color: #f59e0b; }    /* Amber Values */
+
+/* Tailwind/JSX Theme (Official Tailwind Style) */
+.ftd-lang-tailwind .ftd-sh-tag { color: #db2777; }  /* Pink Tags */
+.ftd-lang-tailwind .ftd-sh-attr { color: #64748b; } /* Slate Attributes */
+.ftd-lang-tailwind .ftd-sh-value { color: #0ea5e9; } /* Blue Utilities */
+
+/* Dark Mode Overrides */
+[data-theme="dark"] .ftd-sh-string { color: #34d399; }
+[data-theme="dark"] .ftd-sh-comment { color: #475569; }
+
+[data-theme="dark"] .ftd-lang-scss .ftd-sh-selector { color: #818cf8; }
+[data-theme="dark"] .ftd-lang-scss .ftd-sh-property { color: #f472b6; }
+[data-theme="dark"] .ftd-lang-scss .ftd-sh-value { color: #2dd4bf; }
+
+[data-theme="dark"] .ftd-lang-css .ftd-sh-selector { color: #a78bfa; }
+[data-theme="dark"] .ftd-lang-css .ftd-sh-property { color: #60a5fa; }
+[data-theme="dark"] .ftd-lang-css .ftd-sh-value { color: #fbbf24; }
+
+[data-theme="dark"] .ftd-lang-tailwind .ftd-sh-tag { color: #f472b6; }
+[data-theme="dark"] .ftd-lang-tailwind .ftd-sh-attr { color: #f8fafc; }
+[data-theme="dark"] .ftd-lang-tailwind .ftd-sh-value { color: #38bdf8; }
+
+/* JS Theme */
+.ftd-lang-js .ftd-sh-keyword { color: #db2777; font-weight: 500; }
+.ftd-lang-js .ftd-sh-property { color: #3b82f6; }
+.ftd-lang-js .ftd-sh-value { color: #059669; }
+.ftd-lang-js .ftd-sh-string { color: #059669; }
+
+/* JS Dark Mode */
+[data-theme="dark"] .ftd-lang-js .ftd-sh-keyword { color: #f472b6; }
+[data-theme="dark"] .ftd-lang-js .ftd-sh-property { color: #60a5fa; }
+[data-theme="dark"] .ftd-lang-js .ftd-sh-value { color: #34d399; }
+[data-theme="dark"] .ftd-lang-js .ftd-sh-string { color: #34d399; }
+
+.ftd-tab.active {
+  background: var(--ftd-primary-fade);
+  color: var(--ftd-primary);
+  border-color: var(--ftd-primary-fade);
+}
+
+/* --- Components Grid --- */
+.ftd-component-section {
+  margin-bottom: 60px;
+}
+
+.ftd-section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.ftd-section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+  text-transform: capitalize;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.015em;
+}
+
+/* Custom Stylish Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  transition: all 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+}
+
+[data-theme="dark"] * {
+  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+}
+
+.ftd-container * {
+  box-sizing: border-box;
+}
+
+.ftd-section-badge {
+  font-size: 0.75rem;
+  background: var(--ftd-bg-hover);
+  padding: 4px 8px;
+  border-radius: 6px;
+  color: var(--ftd-text-sub);
+  font-weight: 600;
+}
+
+.ftd-variants-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+/* --- Variant Card (Refined) --- */
+.ftd-variant-card {
+  width: calc((100% / 3) - 18px);
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: var(--ftd-radius);
+  overflow: hidden;
+  box-shadow: var(--ftd-shadow-card);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.ftd-variant-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ftd-shadow-hover);
+  border-color: var(--ftd-border-hover);
+}
+
+.ftd-variant-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ftd-border);
+  background: var(--ftd-bg-subtle);
+}
+
+.ftd-variant-name {
+  font-weight: 600;
+  text-transform: capitalize;
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+}
+
+.ftd-variant-body {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Preview Area */
+.ftd-variant-preview {
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: repeating-linear-gradient(45deg,
+      rgba(148, 163, 184, 0.08),
+      rgba(148, 163, 184, 0.08) 10px,
+      rgba(148, 163, 184, 0.02) 10px,
+      rgba(148, 163, 184, 0.02) 20px);
+  min-height: 120px;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+.ftd-variant-button {
+  padding: 10px 24px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+/* Spec Table */
+.ftd-variant-table-wrapper {
+  padding: 0;
+  width: 100%;
+}
+
+.ftd-variant-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+  text-align: left;
+}
+
+.ftd-variant-table th {
+  padding: 12px 16px;
+  font-weight: 600;
+  color: var(--ftd-text-sub);
+  background: var(--ftd-bg-page);
+  border-bottom: 1px solid var(--ftd-border);
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.05em;
+}
+
+.ftd-variant-table td {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--ftd-border);
+  vertical-align: middle;
+}
+
+.ftd-variant-table tr:last-child td {
+  border-bottom: none;
+}
+
+.ftd-cell-label {
+  font-weight: 600;
+  color: var(--ftd-text-sub);
+  text-transform: capitalize;
+  width: 70px;
+}
+
+.ftd-cell-empty {
+  color: var(--ftd-text-muted);
+}
+
+/* Table Swatches */
+.ftd-table-swatch-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.ftd-table-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.ftd-table-value-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.ftd-table-hex {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.75rem;
+  color: var(--ftd-text-main);
+}
+
+.ftd-table-ref {
+  font-size: 0.7rem;
+  color: var(--ftd-text-muted);
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ftd-content {
+  padding-top: calc(var(--ftd-sticky-offset, 180px) + 16px);
+  /* Consistent initial gap aligned to sticky header */
+}
+
+/* --- Color Sidebar Layout --- */
+.ftd-color-layout {
+  display: flex;
+  gap: 32px;
+  position: relative;
+}
+
+.ftd-color-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  position: sticky;
+  top: calc(var(--ftd-sticky-offset, 180px) + 8px);
+  /* Adjusted for sticky header + gap */
+  height: fit-content;
+}
+
+.ftd-color-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ftd-color-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: var(--ftd-text-sub);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s;
+  width: 100%;
+}
+
+.ftd-color-nav-link:hover {
+  background: var(--ftd-bg-subtle);
+  color: var(--ftd-text-main);
+}
+
+.ftd-color-nav-link.active {
+  background: rgba(var(--ftd-primary-rgb), 0.1);
+  color: var(--ftd-primary);
+  font-weight: 600;
+}
+
+.ftd-nav-icon {
+  font-size: 1rem;
+}
+
+.ftd-nav-label {
+  flex: 1;
+}
+
+.ftd-nav-count {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.ftd-color-nav-link.active .ftd-nav-count {
+  background: rgba(var(--ftd-primary-rgb), 0.2);
+  opacity: 1;
+}
+
+.ftd-color-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  padding: 16px 0 max(480px, 70vh) 0;
+}
+
+@media (max-width: 1024px) {
+  .ftd-color-layout {
+    flex-direction: column;
+  }
+
+  .ftd-color-sidebar {
+    width: 100%;
+    position: sticky;
+    top: calc(var(--ftd-sticky-offset, 140px) + 8px);
+    background: var(--ftd-bg-page);
+    z-index: 40;
+    padding: 12px 0;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--ftd-border);
+  }
+
+  .ftd-color-nav {
+    flex-direction: row;
+    overflow-x: auto;
+    padding-bottom: 4px;
+  }
+
+  .ftd-color-nav-link {
+    white-space: nowrap;
+    width: auto;
+  }
+}
+
+/* --- Toast --- */
+.ftd-copied-toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  background: rgba(17, 24, 39, 0.92);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  color: #ffffff;
+  padding: 10px 16px;
+  border-radius: 14px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.24);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 1000;
+  animation: ftdToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+}
+
+.ftd-toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: #16a34a;
+  color: white;
+  border-radius: 50%;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.ftd-toast-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ftd-toast-label {
+  opacity: 0.85;
+  font-weight: 500;
+}
+
+.ftd-toast-value {
+  font-family: var(--ftd-font-mono);
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  padding: 3px 8px;
+  border-radius: 8px;
+}
+
+@keyframes ftdToastIn {
+  0% {
+    opacity: 0;
+    transform: translateX(40px) scale(0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* ========================================
+   Color Grid Styles
+   ======================================== */
+.ftd-color-container {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.ftd-section {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: var(--ftd-radius);
+  padding: 24px;
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-section-icon {
+  font-size: 1.25rem;
+}
+
+.ftd-section-count {
+  font-size: 0.75rem;
+  background: var(--ftd-bg-hover);
+  padding: 4px 8px;
+  border-radius: 6px;
+  color: var(--ftd-text-sub);
+  font-weight: 600;
+}
+
+/* Color Family */
+.ftd-color-family-container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(200px, 1fr));
+  gap: 24px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ftd-color-family {
+  margin-bottom: 0;
+  width: 100%;
+}
+
+.ftd-color-family:last-child {
+  margin-bottom: 0;
+}
+
+.ftd-color-family-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.ftd-color-family-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+}
+
+.ftd-color-family-name {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  text-transform: capitalize;
+}
+
+/* Color Shade Scale */
+.ftd-color-scale {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.ftd-color-shade {
+  flex: 1;
+  min-width: 60px;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  position: relative;
+  box-shadow:
+    inset 0 0 0 1px var(--ftd-outline-soft),
+    0 0 0 1px rgba(255, 255, 255, 0.55),
+    0 6px 14px rgba(15, 23, 42, 0.06);
+}
+
+.ftd-color-shade:hover {
+  filter: brightness(0.97);
+  box-shadow:
+    inset 0 0 0 1px var(--ftd-outline-soft),
+    0 0 0 1px rgba(255, 255, 255, 0.7),
+    0 10px 22px rgba(15, 23, 42, 0.1);
+}
+
+[data-theme="dark"] .ftd-color-shade {
+  box-shadow:
+    inset 0 0 0 1px rgba(148, 163, 184, 0.2),
+    0 0 0 1px rgba(148, 163, 184, 0.14),
+    0 10px 24px rgba(2, 6, 23, 0.45);
+}
+
+[data-theme="dark"] .ftd-color-shade:hover {
+  box-shadow:
+    inset 0 0 0 1px rgba(148, 163, 184, 0.22),
+    0 0 0 1px rgba(148, 163, 184, 0.18),
+    0 14px 28px rgba(2, 6, 23, 0.55);
+}
+
+.ftd-color-shade-label {
+  font-size: 0.85rem;
+  font-weight: 700;
+  min-width: 30px;
+}
+
+.ftd-shade-values {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  min-width: 0;
+}
+
+.ftd-shade-css-var,
+.ftd-shade-hex {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: default;
+  background: rgba(0, 0, 0, 0.1);
+  opacity: 0.7;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.ftd-shade-css-var {
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ftd-shade-hex {
+  flex-shrink: 0;
+}
+
+.ftd-color-shade-value {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.6rem;
+  opacity: 0.9;
+}
+
+/* Semantic Color Families (grouped) */
+.ftd-semantic-families {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.ftd-semantic-family {
+  background: var(--ftd-bg-subtle);
+  border: 1px solid var(--ftd-border);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.ftd-semantic-family-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+.ftd-semantic-family-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.ftd-semantic-family-colors .ftd-token-card {
+  flex: 1;
+  min-width: 180px;
+  max-width: 250px;
+}
+
+/* Token Grid */
+.ftd-token-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.ftd-token-card {
+  background: var(--ftd-bg-subtle);
+  border: 1px solid var(--ftd-border);
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ftd-token-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ftd-shadow-hover);
+}
+
+.ftd-token-swatch {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ftd-token-info {
+  padding: 12px;
+  background: var(--ftd-bg-card);
+}
+
+.ftd-token-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin: 0 0 4px;
+  color: var(--ftd-text-main);
+}
+
+.ftd-token-value {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.7rem;
+  color: var(--ftd-text-sub);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ftd-token-values-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.ftd-token-css-var,
+.ftd-token-hex {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.65rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: default;
+  background: var(--ftd-bg-hover);
+  color: var(--ftd-text-sub);
+  word-break: break-all;
+  opacity: 0.8;
+  cursor: pointer;
+}
+
+.ftd-copy-icon {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+
+.ftd-token-card:hover .ftd-copy-icon {
+  opacity: 1;
+}
+
+/* ========================================
+   Spacing Scale Styles
+   ======================================== */
+.ftd-spacing-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ftd-spacing-item {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  padding: 12px 20px;
+  border-radius: 10px;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.ftd-spacing-item:hover {
+  transform: translateX(4px);
+  border-color: var(--ftd-primary);
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-spacing-label {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.85rem;
+  font-weight: 600;
+  min-width: 60px;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-spacing-bar-container {
+  flex: 1;
+  height: 8px;
+  background: var(--ftd-bg-subtle);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.ftd-spacing-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--ftd-primary), #8b5cf6);
+  border-radius: 4px;
+}
+
+.ftd-spacing-value {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ftd-text-main);
+  min-width: 60px;
+  text-align: right;
+}
+
+.ftd-semantic-group {
+  margin-bottom: 32px;
+}
+
+.ftd-semantic-group-name {
+  margin: 8px 0;
+}
+
+/* ========================================
+   Sizes Scale Styles
+   ======================================== */
+.ftd-size-grid {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  padding: 40px;
+  background: var(--ftd-bg-subtle);
+  border-radius: 12px;
+  overflow-x: auto;
+  min-height: 100px;
+  margin-bottom: 32px;
+}
+
+.ftd-size-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.ftd-size-bar {
+  background: linear-gradient(180deg, var(--ftd-primary), #8b5cf6);
+  border-radius: 6px;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  box-shadow: 0 4px 12px rgba(var(--ftd-primary-rgb), 0.2);
+}
+
+.ftd-size-item:hover .ftd-size-bar {
+  transform: scaleY(1.05);
+  filter: brightness(1.1);
+  box-shadow: 0 8px 20px rgba(var(--ftd-primary-rgb), 0.3);
+}
+
+.ftd-size-label {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--ftd-text-sub);
+}
+
+/* ========================================
+   Radius Showcase Styles
+   ======================================== */
+.ftd-radius-container {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: var(--ftd-radius);
+  padding: 24px;
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-radius-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.ftd-radius-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.ftd-radius-count {
+  font-size: 0.75rem;
+  background: var(--ftd-bg-hover);
+  padding: 4px 8px;
+  border-radius: 6px;
+  color: var(--ftd-text-sub);
+  font-weight: 600;
+}
+
+.ftd-token-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 20px;
+}
+
+.ftd-display-card {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 12px;
+  padding: 0;
+  text-align: center;
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.ftd-display-card .ftd-token-card-label {
+  padding: 16px 16px 4px 16px;
+  margin: 0;
+}
+
+.ftd-display-card .ftd-token-values-row {
+  padding: 0 16px 16px 16px;
+}
+
+.ftd-display-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ftd-shadow-hover);
+}
+
+.ftd-token-preview-container {
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0;
+  background: repeating-linear-gradient(45deg,
+      rgba(148, 163, 184, 0.08),
+      rgba(148, 163, 184, 0.08) 8px,
+      rgba(148, 163, 184, 0.02) 8px,
+      rgba(148, 163, 184, 0.02) 16px);
+}
+
+.ftd-token-preview {
+  width: 48px;
+  height: 48px;
+  background: var(--ftd-primary);
+  box-shadow: 0 4px 12px rgba(var(--ftd-primary-rgb), 0.2);
+}
+
+.ftd-token-card-label {
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin: 0 0 4px;
+}
+
+.ftd-radius-value {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.8rem;
+  color: var(--ftd-primary);
+  font-weight: 600;
+  margin: 0;
+}
+
+/* ========================================
+   Foundation Tab Styles
+   ======================================== */
+.ftd-foundation-container {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.ftd-foundation-section {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: var(--ftd-radius);
+  padding: 24px;
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-scroll-target {
+  scroll-margin-top: var(--ftd-sticky-offset, 200px);
+  /* Account for sticky navbar */
+}
+
+/* Typography Display */
+
+
+.ftd-typography-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ftd-shadow-hover);
+  border-color: var(--ftd-primary);
+}
+
+.ftd-typography-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--ftd-text-sub);
+  text-transform: capitalize;
+}
+
+.ftd-typography-value {
+  font-family: var(--ftd-font-mono);
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--ftd-text-main);
+}
+
+/* ========================================
+   Semantic Tab Styles
+   ======================================== */
+.ftd-semantic-container {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.ftd-semantic-section {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: var(--ftd-radius);
+  padding: 24px;
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-semantic-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+/* Responsive */
+@media (max-width: 1360px) {
+  .ftd-color-family-container {
+    grid-template-columns: repeat(3, minmax(200px, 1fr));
+  }
+}
+
+@media (max-width: 960px) {
+  .ftd-color-family-container {
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .ftd-color-family-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .ftd-container {
+    padding: 20px;
+  }
+
+  .ftd-variants-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .ftd-color-scale {
+    flex-wrap: wrap;
+  }
+
+  .ftd-color-shade {
+    min-width: 80px;
+  }
+
+  .ftd-variant-card {
+    width: 100%;
+  }
+
+  .ftd-color-family {
+    width: 100%;
+  }
+}
+
+/* --- Component Dimensions Display --- */
+.ftd-dimensions-display {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.ftd-dimension-group {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.ftd-dimension-title {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0 0 16px 0;
+  color: var(--ftd-text-main);
+  text-transform: capitalize;
+}
+
+.ftd-dimension-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.ftd-dimension-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  background: var(--ftd-bg-subtle);
+  border: 1px solid var(--ftd-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ftd-dimension-item:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ftd-shadow-hover);
+  border-color: var(--ftd-primary);
+}
+
+.ftd-dimension-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--ftd-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.ftd-dimension-value {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.85rem;
+  color: var(--ftd-primary);
+  font-weight: 600;
+}
+
+/* --- Search Modal --- */
+.ftd-search-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 100px 20px;
+  animation: ftd-fade-in 0.2s ease;
+}
+
+@keyframes ftd-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.ftd-search-container {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 12px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  width: 100%;
+  max-width: 640px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  animation: ftd-slide-up 0.2s ease;
+}
+
+@keyframes ftd-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ftd-search-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+.ftd-search-icon {
+  color: var(--ftd-text-sub);
+  flex-shrink: 0;
+}
+
+.ftd-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--ftd-font-sans);
+  font-size: 1rem;
+  color: var(--ftd-text-main);
+}
+
+.ftd-search-input::placeholder {
+  color: var(--ftd-text-muted);
+}
+
+.ftd-search-input:focus-visible {
+  outline: none;
+  border-radius: 6px;
+  box-shadow: 0 0 0 2px var(--ftd-primary-fade);
+}
+
+.ftd-search-kbd {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  background: var(--ftd-bg-subtle);
+  border: 1px solid var(--ftd-border);
+  border-radius: 4px;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-search-results {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.ftd-search-empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-search-empty p {
+  margin: 0 0 12px 0;
+  font-size: 0.95rem;
+}
+
+.ftd-search-tips {
+  font-size: 0.85rem;
+  color: var(--ftd-text-muted);
+}
+
+.ftd-search-group {
+  margin-bottom: 16px;
+}
+
+.ftd-search-category-header {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--ftd-text-sub);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ftd-search-count {
+  background: var(--ftd-bg-hover);
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+}
+
+.ftd-search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ftd-search-result-item:hover,
+.ftd-search-result-selected {
+  background: rgba(59, 130, 246, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(var(--ftd-primary-rgb), 0.18);
+}
+
+.ftd-search-result-preview {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid var(--ftd-border);
+  flex-shrink: 0;
+}
+
+.ftd-search-result-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ftd-search-result-name {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ftd-text-main);
+  margin-bottom: 2px;
+}
+
+.ftd-search-result-name mark {
+  background: var(--ftd-primary-fade);
+  color: var(--ftd-primary);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+.ftd-search-result-meta {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.75rem;
+  color: var(--ftd-text-sub);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ftd-search-result-meta mark {
+  background: var(--ftd-primary-fade);
+  color: var(--ftd-primary);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+.ftd-search-result-separator {
+  color: var(--ftd-text-muted);
+}
+
+.ftd-search-enter-kbd {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  background: var(--ftd-primary);
+  color: white;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.ftd-search-footer {
+  border-top: 1px solid var(--ftd-border);
+  padding: 12px 20px;
+  background: var(--ftd-bg-subtle);
+}
+
+.ftd-search-footer-hint {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.8rem;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-search-footer-hint kbd {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.7rem;
+  padding: 3px 6px;
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 3px;
+}
+
+@media (max-width: 768px) {
+  .ftd-search-modal {
+    padding: 20px 16px;
+  }
+
+  .ftd-search-container {
+    max-height: 80vh;
+  }
+
+  .ftd-search-result-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+
+  .ftd-search-result-separator {
+    display: none;
+  }
+
+  .ftd-export-tabs {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .ftd-export-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ftd-export-tab {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+}
+
+/* --- Search Button in Navbar --- */
+.ftd-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ftd-search-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 40px;
+  padding: 0 16px;
+  background: var(--ftd-primary-fade);
+  border: 1px solid rgba(var(--ftd-primary-rgb), 0.15);
+  border-radius: 12px;
+  color: var(--ftd-primary);
+  font-family: var(--ftd-font-sans);
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  width: 280px;
+  justify-content: flex-start;
+  line-height: 1;
+}
+
+.ftd-search-button:hover {
+  background: rgba(var(--ftd-primary-rgb), 0.15);
+  border-color: rgba(var(--ftd-primary-rgb), 0.3);
+  transform: translateY(-1px);
+}
+
+.ftd-search-button svg {
+  color: var(--ftd-text-sub);
+  display: block;
+}
+
+.ftd-search-shortcut {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.75rem;
+  padding: 3px 8px;
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid rgba(var(--ftd-primary-rgb), 0.1);
+  border-radius: 6px;
+  color: var(--ftd-primary);
+  margin-left: auto;
+  opacity: 0.8;
+}
+
+.dark .ftd-search-shortcut {
+  background: rgba(0, 0, 0, 0.2);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 768px) {
+  .ftd-search-button span {
+    display: none;
+  }
+
+  .ftd-search-shortcut {
+    display: none;
+  }
+}
+
+/* --- Token Highlight Animation --- */
+@keyframes ftd-highlight-glow {
+  0% {
+    background: linear-gradient(135deg,
+        rgba(var(--ftd-primary-rgb), 0.15) 0%,
+        rgba(var(--ftd-primary-rgb), 0.05) 100%);
+    transform: scale(1);
+  }
+
+  50% {
+    background: linear-gradient(135deg,
+        rgba(var(--ftd-primary-rgb), 0.25) 0%,
+        rgba(var(--ftd-primary-rgb), 0.1) 100%);
+    transform: scale(1.01);
+  }
+
+  100% {
+    background: linear-gradient(135deg,
+        rgba(var(--ftd-primary-rgb), 0.15) 0%,
+        rgba(var(--ftd-primary-rgb), 0.05) 100%);
+    transform: scale(1);
+  }
+}
+
+/* Export Modal Styles */
+.ftd-export-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+  padding: 20px;
+  animation: ftd-fade-in 0.2s ease-out;
+}
+
+[data-theme="dark"] .ftd-export-modal {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.ftd-export-container {
+  background: var(--ftd-bg-card);
+  width: 100%;
+  max-width: 800px;
+  max-height: 85vh;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  animation: ftd-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  border: 1px solid var(--ftd-border);
+}
+
+.ftd-export-container.mw-600 {
+  max-width: 600px;
+}
+
+.ftd-export-header {
+  padding: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+.ftd-export-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ftd-text-main);
+}
+
+.ftd-export-subtitle {
+  margin: 4px 0 0 0;
+  font-size: 14px;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-export-close {
+  background: none;
+  border: none;
+  color: var(--ftd-text-sub);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+  border: solid 1px #d5d0dd;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
+}
+
+.ftd-export-close:hover {
+  background: var(--ftd-bg-hover);
+  color: var(--ftd-text-main);
+}
+
+.ftd-export-tabs {
+  display: flex;
+  padding: 12px 24px;
+  background: var(--ftd-bg-subtle);
+  gap: 8px;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+.ftd-export-tab {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ftd-text-sub);
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ftd-export-tab:hover {
+  background: var(--ftd-bg-hover);
+  color: var(--ftd-text-main);
+}
+
+.ftd-export-tab.active {
+  background: var(--ftd-bg-card);
+  color: var(--ftd-primary);
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-export-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.ftd-export-code-wrapper {
+  position: relative;
+  background: var(--ftd-bg-subtle);
+  border-radius: 12px;
+  border: 1px solid var(--ftd-border);
+  display: flex;
+  flex-direction: column;
+}
+
+.ftd-export-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 12px;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+.ftd-export-action-btn {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 8px;
+  color: var(--ftd-text-main);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ftd-export-action-btn:hover {
+  background: var(--ftd-bg-hover);
+  border-color: var(--ftd-border-hover);
+}
+
+.ftd-export-code {
+  margin: 0;
+  padding: 24px;
+  font-family: var(--ftd-font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--ftd-text-main);
+  overflow-x: auto;
+  max-height: 400px;
+}
+
+.ftd-export-footer {
+  padding: 24px;
+  border-top: 1px solid var(--ftd-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--ftd-bg-subtle);
+}
+
+.ftd-export-footer-note {
+  font-size: 13px;
+  color: var(--ftd-text-muted);
+  margin: 0;
+}
+
+.ftd-export-button-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 20px;
+  background: var(--ftd-primary-fade);
+  border: 1px solid rgba(var(--ftd-primary-rgb), 0.15);
+  border-radius: 12px;
+  color: var(--ftd-primary);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  line-height: 1;
+}
+
+.ftd-export-button-nav svg {
+  display: block;
+}
+
+.ftd-export-button-nav:hover {
+  background: rgba(var(--ftd-primary-rgb), 0.15);
+  transform: translateY(-1px);
+}
+
+/* Button Components */
+.ftd-btn-primary {
+  background: var(--ftd-primary);
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ftd-btn-primary:hover {
+  transform: translateY(-1px);
+  opacity: 0.8;
+}
+
+.ftd-btn-secondary {
+  background: transparent;
+  color: var(--ftd-text-main);
+  border: 1px solid var(--ftd-border);
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ftd-btn-secondary:hover {
+  background: var(--ftd-bg-subtle);
+  border-color: var(--ftd-text-muted);
+}
+
+.ftd-btn-primary:active {
+  transform: translateY(0);
+}
+
+.dark .ftd-export-button-nav {
+  background: rgba(var(--ftd-primary-rgb), 0.15);
+  border-color: rgba(var(--ftd-primary-rgb), 0.3);
+}
+
+/* AI Note and Sparkle Styles */
+.ftd-export-ai-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-ai-sparkle {
+  color: #fbbf24;
+  /* Vibrant yellow/gold */
+  flex-shrink: 0;
+  animation: ftd-sparkle-shimmer 2.5s infinite ease-in-out;
+}
+
+@keyframes ftd-sparkle-shimmer {
+
+  0%,
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 0.8;
+  }
+
+  50% {
+    transform: scale(1.1) rotate(5deg);
+    opacity: 1;
+  }
+}
+
+.ftd-export-ai-note strong {
+  color: var(--ftd-text-main);
+  margin-left: 2px;
+}
+
+.dark .ftd-export-ai-note strong {
+  color: #fff;
+}
+
+.dark .ftd-ai-sparkle {
+  color: #fcd34d;
+  /* Slightly lighter yellow for dark mode */
+}
+
+/* --- Standalone Component Styles --- */
+.ftd-standalone {
+  padding: 24px;
+  background: var(--ftd-bg-page);
+  border-radius: var(--ftd-radius);
+  border: 1px solid var(--ftd-border);
+  margin-bottom: 24px;
+}
+
+.ftd-standalone-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: var(--ftd-text-main);
+  letter-spacing: -0.01em;
+}
+
+.ftd-standalone .ftd-section {
+  padding: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* --- Token Highlights --- */
+.ftd-token-highlight {
+  position: relative;
+  z-index: 10;
+  outline: none !important;
+  border-radius: inherit;
+  box-shadow:
+    0 0 0 1.5px var(--ftd-highlight-strong, rgba(var(--ftd-primary-rgb), 0.35)),
+    0 12px 28px var(--ftd-highlight, rgba(var(--ftd-primary-rgb), 0.18));
+}
+
+/* Ensure ColorGrid handles highlights correctly */
+.ftd-color-shade.ftd-token-highlight {
+  border-radius: 10px;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
+    0 0 0 2px var(--ftd-highlight-strong, rgba(var(--ftd-primary-rgb), 0.45)),
+    0 16px 32px var(--ftd-highlight, rgba(var(--ftd-primary-rgb), 0.28)) !important;
+}
+
+.ftd-clickable-card,
+.ftd-clickable-preview {
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+}
+
+.ftd-clickable-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ftd-shadow-hover);
+  border-color: var(--ftd-primary);
+}
+
+.ftd-clickable-preview:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 2px var(--ftd-primary);
+}
+
+/* ========================================
+   Playground Styles
+   ======================================== */
+.ftd-playground-toolbar-v2 {
+  margin-bottom: 24px;
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-playground-toolbar-header {
+  padding: 24px 24px 16px 24px;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+.ftd-playground-toolbar-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--ftd-text-main);
+  letter-spacing: -0.02em;
+}
+
+.ftd-playground-toolbar-subtitle {
+  margin: 4px 0 0 0;
+  font-size: 0.875rem;
+  color: var(--ftd-text-sub);
+}
+
+.ftd-playground-tabs-v2 {
+  display: flex;
+  padding: 8px;
+  gap: 8px;
+  background: var(--ftd-bg-subtle);
+  overflow-x: auto;
+}
+
+.ftd-playground-tab-btn-v2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ftd-text-sub);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+
+.ftd-playground-tab-btn-v2:hover:not(.disabled) {
+  background: var(--ftd-bg-hover);
+  color: var(--ftd-text-main);
+  transform: translateY(-1px);
+}
+
+.ftd-playground-tab-btn-v2.active {
+  background: var(--ftd-bg-card);
+  border-color: var(--ftd-border);
+  color: var(--ftd-primary);
+  box-shadow: var(--ftd-shadow-card), 0 0 0 1px rgba(var(--ftd-primary-rgb), 0.1);
+}
+
+.ftd-playground-tab-btn-v2.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: grayscale(1);
+}
+
+.ftd-playground-tab-icon {
+  font-size: 1.1rem;
+}
+
+.ftd-playground-tab-badge {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  background: var(--ftd-bg-subtle);
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--ftd-text-muted);
+  border: 1px solid var(--ftd-border);
+}
+
+.ftd-playground-container {
+  margin: 0 auto;
+}
+
+.ftd-playground-toolbar {
+  display: none; /* Hide old toolbar */
+}
+
+.ftd-playground-control-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+
+.ftd-playground-control-row {
+  display: flex;
+  gap: 16px;
+}
+
+.ftd-playground-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--ftd-text-main);
+  cursor: pointer;
+  margin-bottom: 16px;
+  user-select: none;
+}
+
+.ftd-playground-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--ftd-bg-subtle);
+  border: 1px solid var(--ftd-border);
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.ftd-playground-checkbox:hover {
+  border-color: var(--ftd-primary);
+  background: var(--ftd-bg-hover);
+}
+
+.ftd-playground-checkbox:checked {
+  background: var(--ftd-primary);
+  border-color: var(--ftd-primary);
+  box-shadow: 0 2px 4px rgba(var(--ftd-primary-rgb), 0.2);
+}
+
+.ftd-playground-checkbox::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 3px;
+  height: 7px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -60%) rotate(45deg) scale(0);
+  transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+
+.ftd-playground-checkbox:checked::after {
+  transform: translate(-50%, -60%) rotate(45deg) scale(1);
+}
+
+.ftd-playground-checkbox:focus-visible {
+  outline: 2px solid var(--ftd-primary-fade);
+  outline-offset: 2px;
+}
+
+.ftd-playground-input {
+  width: auto !important;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--ftd-border);
+  background: var(--ftd-bg-subtle);
+  color: var(--ftd-text-main);
+  font-size: 13px;
+}
+
+.ftd-playground-input:focus-visible {
+  outline: none;
+  border-color: var(--ftd-primary);
+  box-shadow: 0 0 0 2px var(--ftd-primary-fade);
+}
+
+.ftd-playground-section-header {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: var(--ftd-text-main);
+}
+
+.ftd-playground-preview-button-icon {
+  margin-right: 8px;
+}
+
+.ftd-playground-label {
+  font-weight: 400;
+  color: var(--ftd-text-sub);
+  font-size: 12px;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.ftd-playground-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.ftd-playground-tab-btn {
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ftd-text-sub);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.ftd-playground-tab-btn:hover {
+  background: var(--ftd-bg-hover);
+  color: var(--ftd-text-main);
+}
+
+.ftd-playground-tab-btn.active {
+  background: var(--ftd-primary);
+  border-color: var(--ftd-primary);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(var(--ftd-primary-rgb), 0.3);
+}
+
+.ftd-playground-layout {
+  display: flex;
+  gap: 32px;
+  align-items: flex-start;
+}
+
+.ftd-playground-sidebar {
+  width: 380px;
+  height: calc(100vh - 147px - 163px - 62px);
+  overflow-y: auto;
+  flex-shrink: 0;
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 12px;
+  padding: 24px 16px 24px 24px;
+  box-shadow: var(--ftd-shadow-card);
+}
+
+.ftd-playground-title {
+  margin: 0 0 24px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--ftd-text-main);
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--ftd-border);
+}
+
+/* Reset Button */
+.ftd-playground-actions {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--ftd-border);
+}
+
+.ftd-playground-reset-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px;
+  background: transparent;
+  border: 1px solid var(--ftd-border);
+  border-radius: 8px;
+  color: var(--ftd-text-muted);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ftd-playground-reset-btn:hover {
+  border-color: var(--ftd-text-main);
+  color: var(--ftd-text-main);
+  background: var(--ftd-bg-subtle);
+}
+
+.ftd-playground-control {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.ftd-playground-control:last-child {
+  margin-bottom: 0;
+}
+
+.ftd-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* Custom Token Select */
+.ftd-custom-select-container {
+  position: relative;
+  width: 100%;
+}
+
+.ftd-custom-select-trigger {
+  width: auto;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--ftd-border);
+  background: var(--ftd-bg-subtle);
+  color: var(--ftd-text-main);
+  font-size: 0.9rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  transition: all 0.2s;
+}
+
+.ftd-custom-select-trigger:hover {
+  border-color: var(--ftd-text-muted);
+}
+
+.ftd-custom-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--ftd-primary);
+  box-shadow: 0 0 0 2px var(--ftd-primary-fade);
+}
+
+.ftd-custom-select-trigger.is-open {
+  border-color: var(--ftd-primary);
+  box-shadow: 0 0 0 2px var(--ftd-primary-fade);
+}
+
+.ftd-custom-select-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ftd-custom-select-arrow {
+  width: 16px;
+  height: 16px;
+  color: var(--ftd-text-muted);
+  transition: transform 0.2s;
+}
+
+.ftd-custom-select-trigger.is-open .ftd-custom-select-arrow {
+  transform: rotate(180deg);
+}
+
+.ftd-custom-select-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--ftd-bg-page);
+  border: 1px solid var(--ftd-border);
+  border-radius: 8px;
+  margin-top: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  padding: 4px;
+}
+
+.ftd-custom-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: var(--ftd-text-main);
+  transition: background 0.1s;
+}
+
+.ftd-custom-option:hover {
+  background: var(--ftd-bg-subtle);
+}
+
+.ftd-custom-option.is-selected {
+  background: var(--ftd-primary-fade);
+  color: var(--ftd-primary);
+  font-weight: 500;
+}
+
+.ftd-color-swatch-sm {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.ftd-token-value-preview {
+  margin-left: auto;
+  font-size: 0.8rem;
+  color: var(--ftd-text-muted);
+  font-family: monospace;
+  opacity: 0.7;
+}
+
+.ftd-playground-preview-area {
+  width: calc(100% - 380px - 32px);
+  height: calc(100vh - 147px - 163px - 62px);
+  flex: 1;
+  display: flex;
+  gap: 24px;
+}
+
+.ftd-playground-canvas {
+  width: 100%;
+  background: repeating-linear-gradient(45deg,
+      rgba(148, 163, 184, 0.08),
+      rgba(148, 163, 184, 0.08) 12px,
+      rgba(148, 163, 184, 0.02) 12px,
+      rgba(148, 163, 184, 0.02) 24px);
+  border: 1px solid var(--ftd-border);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  position: relative;
+}
+
+.ftd-playground-code {
+  width: 100%;
+  background: var(--ftd-bg-subtle);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--ftd-border);
+  display: flex;
+  flex-direction: column;
+}
+
+.ftd-code-header {
+  padding: 12px 16px;
+  background: var(--ftd-bg-page);
+  color: var(--ftd-text-sub);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--ftd-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ftd-code-header .ftd-playground-tabs {
+  display: flex;
+  gap: 6px;
+  margin: 0;
+}
+
+.ftd-playground-copy-btn {
+  background: var(--ftd-bg-card);
+  border: 1px solid var(--ftd-border);
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--ftd-text-main);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ftd-playground-copy-btn:hover {
+  background: var(--ftd-bg-hover);
+  border-color: var(--ftd-border-hover);
+}
+
+.ftd-playground-code pre {
+  margin: 0;
+  padding: 24px;
+  overflow-x: auto;
+}
+
+.ftd-playground-code code {
+  font-family: var(--ftd-font-mono);
+  font-size: 0.85rem;
+  color: var(--ftd-text-main);
+  line-height: 1.6;
+}
+
+@media (max-width: 1024px) {
+  .ftd-playground-layout {
+    flex-direction: column;
+  }
+}
+
+/* --- Skeleton Loader --- */
+@keyframes ftd-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.ftd-skeleton-pulse {
+  animation: ftd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  background-color: var(--ftd-border);
+  border-radius: 4px;
+}
+
+
+
+.ftd-skeleton-header {
+  padding: 16px 40px;
+  margin-bottom: 24px;
+}
+
+.ftd-skeleton-title {
+  height: 35px;
+  width: 200px;
+  margin-bottom: 12px;
+}
+
+.ftd-skeleton-subtitle {
+  height: 20px;
+  width: 300px;
+}
+
+.ftd-skeleton-tabs {
+  display: flex;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 0 40px 16px; /* Aligns with container padding */
+}
+
+.ftd-skeleton-tab {
+  height: 35px;
+  min-width: 150px;
+  border-radius: 8px; /* Matches tab radius */
+}
+
+/* Skeleton Action Pulse Circles */
+.ftd-skeleton-action-pulse {
+  width: 80px;
+  height: 40px;
+  border-radius: 100px;
+}
+
+.ftd-skeleton-export,
+.ftd-skeleton-search,
+.ftd-skeleton-theme {
+  height: 40px;
+  border-radius: 8px;
+}
+
+.ftd-skeleton-export {
+  width: 112px;
+}
+
+.ftd-skeleton-search {
+  width: 280px;
+}
+
+.ftd-skeleton-theme {
+  width: 100px;
+  border-radius: 99px;
+}
+
+.ftd-skeleton-content {
+  padding: 0 40px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
+}
+
+.ftd-skeleton-card {
+  height: 200px;
+  border-radius: 12px;
+}
+
+/* ========================================
+   Glass Effect Overrides (must be last)
+   ======================================== */
+.ftd-container {
+  background: var(--ftd-page-backdrop);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.ftd-navbar-sticky {
+  background: var(--ftd-surface-bg-strong);
+  border-bottom-color: transparent;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
+}
+
+.ftd-section,
+.ftd-semantic-section,
+.ftd-variant-card,
+.ftd-radius-container,
+.ftd-dimension-group,
+.ftd-color-sidebar,
+.ftd-search-container,
+.ftd-export-container,
+.ftd-playground-toolbar-v2,
+.ftd-playground-sidebar,
+.ftd-playground-code,
+.ftd-token-card,
+.ftd-spacing-item,
+.ftd-dimension-item,
+.ftd-display-card {
+  background: var(--ftd-surface-bg);
+  border-color: transparent;
+  box-shadow: var(--ftd-premium-shadow), inset 0 1px 0 var(--ftd-premium-edge);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+}
+
+/* Stronger surface panels */
+.ftd-color-sidebar,
+.ftd-search-container,
+.ftd-export-container,
+.ftd-playground-toolbar-v2,
+.ftd-playground-sidebar,
+.ftd-playground-code {
+  background: var(--ftd-surface-bg-strong);
+}
+
+.ftd-section::before,
+.ftd-semantic-section::before,
+.ftd-variant-card::before,
+.ftd-radius-container::before,
+.ftd-dimension-group::before,
+.ftd-color-sidebar::before,
+.ftd-search-container::before,
+.ftd-export-container::before,
+.ftd-playground-toolbar-v2::before,
+.ftd-playground-sidebar::before,
+.ftd-playground-code::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 16px;
+  right: 16px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--ftd-premium-edge), transparent);
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+/* Preserve sticky behavior */
+.ftd-color-sidebar {
+  position: sticky;
+}
+
+/* Reduce inner-card depth to avoid double-card feel */
+.ftd-token-card,
+.ftd-spacing-item,
+.ftd-dimension-item,
+.ftd-display-card,
+.ftd-export-code-wrapper,
+.ftd-search-result-item {
+  box-shadow: none;
+  border-color: transparent;
+  background: var(--ftd-panel-bg);
+}
+
+[data-theme="dark"] .ftd-section,
+[data-theme="dark"] .ftd-semantic-section,
+[data-theme="dark"] .ftd-variant-card,
+[data-theme="dark"] .ftd-radius-container,
+[data-theme="dark"] .ftd-dimension-group,
+[data-theme="dark"] .ftd-color-sidebar,
+[data-theme="dark"] .ftd-search-container,
+[data-theme="dark"] .ftd-export-container,
+[data-theme="dark"] .ftd-playground-toolbar-v2,
+[data-theme="dark"] .ftd-playground-sidebar,
+[data-theme="dark"] .ftd-playground-code,
+[data-theme="dark"] .ftd-token-card,
+[data-theme="dark"] .ftd-spacing-item,
+[data-theme="dark"] .ftd-dimension-item,
+[data-theme="dark"] .ftd-display-card {
+  border-color: transparent;
+}
+
+[data-theme="dark"] .ftd-token-card,
+[data-theme="dark"] .ftd-spacing-item,
+[data-theme="dark"] .ftd-dimension-item,
+[data-theme="dark"] .ftd-display-card,
+[data-theme="dark"] .ftd-export-code-wrapper,
+[data-theme="dark"] .ftd-search-result-item {
+  border-color: transparent;
+}
+
+[data-theme="dark"] .ftd-search-result-item:hover,
+[data-theme="dark"] .ftd-search-result-selected {
+  background: rgba(96, 165, 250, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(var(--ftd-primary-rgb), 0.22);
+}
+
+/* Ensure keyboard-selected state wins over base panel background */
+.ftd-search-result-item.ftd-search-result-selected {
+  background: rgba(59, 130, 246, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(var(--ftd-primary-rgb), 0.18);
+}
+
+[data-theme="dark"] .ftd-search-result-item.ftd-search-result-selected {
+  background: rgba(96, 165, 250, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(var(--ftd-primary-rgb), 0.22);
+}
+
+/* --- Highlight Override (always visible) --- */
+.ftd-token-highlight {
+  position: relative;
+  box-shadow:
+    0 0 0 2px var(--ftd-highlight-strong, rgba(var(--ftd-primary-rgb), 0.45)),
+    0 18px 38px var(--ftd-highlight, rgba(var(--ftd-primary-rgb), 0.28)) !important;
+  outline: 1px solid rgba(var(--ftd-primary-rgb), 0.25);
+  outline-offset: 0;
+  animation: ftd-highlight-pulse 1.6s ease-in-out 2;
+}
+
+.ftd-token-highlight::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--ftd-highlight-bg, rgba(var(--ftd-primary-rgb), 0.12));
+  opacity: 0.28;
+  pointer-events: none;
+}
+
+@keyframes ftd-highlight-pulse {
+  0% {
+    box-shadow:
+      0 0 0 2px var(--ftd-highlight-strong, rgba(var(--ftd-primary-rgb), 0.45)),
+      0 18px 38px var(--ftd-highlight, rgba(var(--ftd-primary-rgb), 0.28));
+  }
+  50% {
+    box-shadow:
+      0 0 0 3px var(--ftd-highlight-strong, rgba(var(--ftd-primary-rgb), 0.6)),
+      0 22px 48px var(--ftd-highlight, rgba(var(--ftd-primary-rgb), 0.36));
+  }
+  100% {
+    box-shadow:
+      0 0 0 2px var(--ftd-highlight-strong, rgba(var(--ftd-primary-rgb), 0.45)),
+      0 18px 38px var(--ftd-highlight, rgba(var(--ftd-primary-rgb), 0.28));
+  }
+}
+
+[data-theme="dark"] .ftd-section::before,
+[data-theme="dark"] .ftd-semantic-section::before,
+[data-theme="dark"] .ftd-variant-card::before,
+[data-theme="dark"] .ftd-radius-container::before,
+[data-theme="dark"] .ftd-dimension-group::before,
+[data-theme="dark"] .ftd-color-sidebar::before,
+[data-theme="dark"] .ftd-search-container::before,
+[data-theme="dark"] .ftd-export-container::before,
+[data-theme="dark"] .ftd-playground-toolbar-v2::before,
+[data-theme="dark"] .ftd-playground-sidebar::before,
+[data-theme="dark"] .ftd-playground-code::before {
+  opacity: 0.5;
+}
+
+/* Foundation wrapper should not look like an extra card */
+.ftd-foundation-section {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+}
+
+/* ========================================
+   Modal Premium Polish
+   ======================================== */
+.ftd-export-modal {
+  background: rgba(15, 23, 42, 0.35);
+  backdrop-filter: blur(10px) saturate(1.05);
+  -webkit-backdrop-filter: blur(10px) saturate(1.05);
+}
+
+[data-theme="dark"] .ftd-export-modal {
+  background: rgba(2, 6, 23, 0.65);
+}
+
+.ftd-export-container {
+  position: relative;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 100%);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22), 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+.ftd-export-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 16px;
+  right: 16px;
+  height: 1px;
+  background: var(--ftd-premium-edge);
+  opacity: 0.9;
+}
+
+[data-theme="dark"] .ftd-export-container {
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 100%);
+  border-color: rgba(148, 163, 184, 0.12);
+  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.75), 0 12px 30px rgba(2, 6, 23, 0.6);
+}
+
+.ftd-export-header,
+.ftd-export-footer,
+.ftd-export-tabs {
+  background: transparent;
+  border-color: rgba(148, 163, 184, 0.12);
+}
+
+.ftd-export-tab {
+  border: 1px solid transparent;
+}
+
+.ftd-export-tab.active {
+  background: rgba(var(--ftd-primary-rgb), 0.12);
+  border-color: rgba(var(--ftd-primary-rgb), 0.25);
+  box-shadow: inset 0 1px 0 var(--ftd-premium-edge);
+}
+
+.ftd-export-code-wrapper {
+  background: rgba(255, 255, 255, 0.7);
+  border-color: rgba(148, 163, 184, 0.14);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
+}
+
+[data-theme="dark"] .ftd-export-code-wrapper {
+  background: rgba(15, 23, 42, 0.6);
+  border-color: rgba(148, 163, 184, 0.1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.ftd-export-action-btn {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
+  border-color: rgba(148, 163, 184, 0.22);
+  box-shadow: inset 0 1px 0 var(--ftd-premium-edge);
+}
+
+[data-theme="dark"] .ftd-export-action-btn {
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
+  border-color: rgba(148, 163, 184, 0.16);
+}
+
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .ftd-navbar-sticky,
+  .ftd-section,
+  .ftd-foundation-section,
+  .ftd-semantic-section,
+  .ftd-variant-card,
+  .ftd-radius-container,
+  .ftd-dimension-group,
+  .ftd-color-sidebar,
+  .ftd-search-container,
+  .ftd-export-container,
+  .ftd-playground-toolbar-v2,
+  .ftd-playground-sidebar,
+  .ftd-playground-code {
+    backdrop-filter: blur(var(--ftd-glass-blur)) saturate(1.1);
+    -webkit-backdrop-filter: blur(var(--ftd-glass-blur)) saturate(1.1);
+  }
+}
+
+/* ========================================
+   Premium Feel Overrides (final pass)
+   ======================================== */
+.ftd-variant-card:hover,
+.ftd-display-card:hover,
+.ftd-token-card:hover,
+.ftd-spacing-item:hover,
+.ftd-dimension-item:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--ftd-premium-shadow-hover), inset 0 1px 0 var(--ftd-premium-edge);
+}
+
+.ftd-search-button,
+.ftd-export-button-nav,
+.ftd-theme-toggle {
+  background: linear-gradient(180deg,
+      rgba(var(--ftd-primary-rgb), 0.16),
+      rgba(var(--ftd-primary-rgb), 0.06));
+  border-color: rgba(var(--ftd-primary-rgb), 0.24);
+  box-shadow: inset 0 1px 0 var(--ftd-premium-edge),
+    0 6px 18px rgba(var(--ftd-primary-rgb), 0.16);
+}
+
+.ftd-search-button:hover,
+.ftd-export-button-nav:hover,
+.ftd-theme-toggle:hover {
+  box-shadow: inset 0 1px 0 var(--ftd-premium-edge),
+    0 10px 26px rgba(var(--ftd-primary-rgb), 0.2);
+}
+
+.ftd-tab.active {
+  background: rgba(var(--ftd-primary-rgb), 0.12);
+  border-color: transparent;
+  box-shadow: inset 0 1px 0 var(--ftd-premium-edge);
+}
+
+.ftd-color-nav-link.active {
+  background: rgba(var(--ftd-primary-rgb), 0.08);
+}
+
+/* Component dimensions premium polish */
+.ftd-dimensions-display {
+  gap: 28px;
+}
+
+.ftd-dimension-group {
+  padding: 22px;
+}
+
+.ftd-dimension-title {
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+}
+
+.ftd-dimension-items {
+  gap: 14px;
+}
+
+.ftd-dimension-item {
+  background: var(--ftd-panel-bg);
+  border-color: rgba(148, 163, 184, 0.12);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  padding: 12px 14px;
+}
+
+.ftd-dimension-item:hover {
+  transform: translateY(-1px);
+  border-color: rgba(var(--ftd-primary-rgb), 0.25);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.ftd-dimension-label {
+  color: var(--ftd-text-sub);
+  letter-spacing: 0.06em;
+}
+
+.ftd-dimension-value {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: rgba(148, 163, 184, 0.12);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  color: var(--ftd-text-main);
+}
+
+[data-theme="dark"] .ftd-dimension-item {
+  border-color: rgba(148, 163, 184, 0.18);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+[data-theme="dark"] .ftd-dimension-value {
+  background: rgba(148, 163, 184, 0.12);
+  border-color: rgba(148, 163, 184, 0.2);
+  color: var(--ftd-text-main);
+}
+
+/* Semantic groups premium polish */
+.ftd-semantic-group {
+  margin-bottom: 36px;
+}
+
+.ftd-semantic-group-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 6px 0 14px;
+}
+
+.ftd-semantic-group-name {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--ftd-text-main);
+}
+
+.ftd-semantic-group-count {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--ftd-text-sub);
+  background: rgba(var(--ftd-primary-rgb), 0.08);
+  border: 1px solid rgba(var(--ftd-primary-rgb), 0.2);
+  padding: 4px 8px;
+  border-radius: 999px;
+}
+
+.ftd-color-family-swatch {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
+    0 0 0 1px var(--ftd-outline-soft);
+}
+
+.ftd-token-card {
+  border-radius: 12px;
+}
+
+.ftd-token-swatch {
+  position: relative;
+  border-bottom: 1px solid var(--ftd-outline-soft);
+}
+
+.ftd-token-swatch span {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(4px);
+}
+
+[data-theme="dark"] .ftd-semantic-group-count {
+  background: rgba(var(--ftd-primary-rgb), 0.12);
+  border-color: rgba(var(--ftd-primary-rgb), 0.28);
+}
+
+[data-theme="dark"] .ftd-color-family-swatch {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 0 0 1px rgba(148, 163, 184, 0.18);
+}
+
+.ftd-export-action-btn,
+.ftd-playground-reset-btn,
+.ftd-playground-tab-btn-v2,
+.ftd-playground-tab-btn,
+.ftd-tab,
+.ftd-btn-primary,
+.ftd-btn-secondary {
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.ftd-export-action-btn:focus-visible,
+.ftd-playground-reset-btn:focus-visible,
+.ftd-playground-tab-btn-v2:focus-visible,
+.ftd-playground-tab-btn:focus-visible,
+.ftd-tab:focus-visible,
+.ftd-search-button:focus-visible,
+.ftd-export-button-nav:focus-visible,
+.ftd-theme-toggle:focus-visible,
+.ftd-btn-primary:focus-visible,
+.ftd-btn-secondary:focus-visible {
+  outline: none;
+  box-shadow: var(--ftd-premium-ring);
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ========================================
+   Responsive Layout
+   ======================================== */
+@media (max-width: 1200px) {
+  .ftd-container {
+    padding: 0 24px;
+  }
+
+  .ftd-header {
+    padding: 16px 24px;
+  }
+
+  .ftd-tabs {
+    padding: 0 24px 12px 24px;
+  }
+
+  .ftd-skeleton-header {
+    padding: 16px 24px;
+  }
+
+  .ftd-skeleton-tabs {
+    padding: 0 24px 12px;
+  }
+
+  .ftd-skeleton-content {
+    padding: 0 24px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .ftd-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .ftd-title-wrapper {
+    height: auto;
+  }
+
+  .ftd-header-actions {
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .ftd-search-button {
+    flex: 1 1 260px;
+    width: auto;
+  }
+
+  .ftd-playground-layout {
+    flex-direction: column;
+  }
+
+  .ftd-playground-sidebar {
+    width: 100%;
+    height: auto;
+    max-height: none;
+  }
+
+  .ftd-playground-preview-area {
+    width: 100%;
+    height: auto;
+    flex-direction: column;
+  }
+
+  .ftd-playground-canvas {
+    padding: 28px;
+    min-height: 220px;
+  }
+
+  .ftd-playground-code pre {
+    padding: 18px;
+  }
+}
+
+@media (max-width: 768px) {
+  .ftd-container {
+    padding: 0 16px;
+  }
+
+  .ftd-header {
+    padding: 14px 16px;
+  }
+
+  .ftd-navbar-sticky {
+    background: var(--ftd-bg-page);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-bottom: 1px solid var(--ftd-border);
+  }
+
+  [data-theme="dark"] .ftd-navbar-sticky {
+    background: #0b1220;
+  }
+
+  .ftd-tabs {
+    padding: 0 16px 12px 16px;
+  }
+
+  .ftd-content {
+    padding-top: calc(var(--ftd-sticky-offset, 180px) + 24px);
+  }
+
+  .ftd-title {
+    font-size: 1.6rem;
+  }
+
+  .ftd-subtitle {
+    font-size: 0.9rem;
+  }
+
+  .ftd-search-button {
+    width: 100%;
+    min-width: 0;
+    height: 38px;
+  }
+
+  .ftd-export-button-nav,
+  .ftd-theme-toggle {
+    height: 38px;
+    padding: 0 14px;
+  }
+
+  .ftd-tab {
+    min-width: 120px;
+    font-size: 0.85rem;
+  }
+
+  .ftd-variant-preview {
+    padding: 24px;
+  }
+
+  .ftd-variant-table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .ftd-variant-table {
+    min-width: 520px;
+  }
+
+  .ftd-token-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  }
+
+  .ftd-color-sidebar {
+    top: calc(var(--ftd-sticky-offset, 180px) + 16px);
+  }
+}
+
+@media (max-width: 560px) {
+  .ftd-header-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-areas:
+      "search search"
+      "export theme";
+    gap: 8px;
+  }
+
+  .ftd-search-button {
+    padding: 0 12px;
+    grid-area: search;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .ftd-export-button-nav,
+  .ftd-theme-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .ftd-export-button-nav {
+    grid-area: export;
+  }
+
+  .ftd-theme-toggle {
+    grid-area: theme;
+  }
+
+  .ftd-tab {
+    min-width: 110px;
+    padding: 8px 12px;
+  }
+
+  .ftd-token-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+
+  .ftd-color-shade {
+    min-width: 72px;
+  }
+}