@knowcode/doc-builder 1.3.15 → 1.4.0

package/assets/css/style.css

@@ -1,2121 +0,0 @@
-/* Documentation Builder - Modern CSS Design System */
-
-:root {
-  /* Color Palette */
-  --primary-gradient: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
-  --secondary-gradient: linear-gradient(135deg, #718096 0%, #4a5568 100%);
-  --accent: #5b3d98;
-  --accent-hover: #4a3280;
-  --success: #10b981;
-  --warning: #f59e0b;
-  --danger: #ef4444;
-  
-  /* Text Colors */
-  --text-primary: #1a202c;
-  --text-secondary: #4a5568;
-  --text-muted: #718096;
-  --text-inverse: #ffffff;
-  
-  /* Background Colors */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8fafc;
-  --bg-tertiary: #e2e8f0;
-  --bg-dark: #2d3748;
-  
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  
-  /* Spacing */
-  --space-xs: 0.25rem;
-  --space-sm: 0.375rem;
-  --space-md: 0.75rem;
-  --space-lg: 1rem;
-  --space-xl: 1.5rem;
-  --space-2xl: 2rem;
-  --space-3xl: 2.5rem;
-  
-  /* Typography */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-  
-  /* Layout */
-  --sidebar-width: 280px;
-  --content-max-width: 65rem;
-  --header-height: 56px;
-  --breadcrumb-height: 40px;
-  --banner-offset: 0rem;
-  
-  /* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-normal: 250ms ease-in-out;
-  --transition-slow: 350ms ease-in-out;
-}
-
-/* Mermaid Full Screen Viewer */
-.mermaid-container {
-  position: relative;
-  margin: 1.5rem 0;
-  border: 1px solid var(--bg-tertiary);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  background: var(--bg-primary);
-}
-
-.mermaid-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--bg-tertiary);
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-}
-
-.mermaid-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.mermaid-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  border: 1px solid var(--bg-tertiary);
-  border-radius: 0.375rem;
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.mermaid-btn:hover {
-  background: var(--accent);
-  color: var(--text-inverse);
-  border-color: var(--accent);
-}
-
-.mermaid-btn i {
-  font-size: 0.75rem;
-}
-
-.mermaid-wrapper {
-  padding: 1.5rem;
-  overflow: auto;
-  max-height: 600px;
-}
-
-/* Full Screen Modal */
-.mermaid-fullscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.95);
-  display: none;
-  z-index: 10000;
-  backdrop-filter: blur(4px);
-}
-
-.mermaid-fullscreen.active {
-  display: flex;
-  flex-direction: column;
-}
-
-.mermaid-fullscreen-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 2rem;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.mermaid-fullscreen-title {
-  color: white;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.mermaid-fullscreen-controls {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-}
-
-.mermaid-zoom-controls {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.mermaid-zoom-btn {
-  padding: 0.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 0.375rem;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mermaid-zoom-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.5);
-}
-
-.mermaid-zoom-level {
-  color: white;
-  font-size: 0.875rem;
-  min-width: 3rem;
-  text-align: center;
-}
-
-.mermaid-close-btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 0.375rem;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.mermaid-close-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.mermaid-fullscreen-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  overflow: hidden;
-}
-
-.mermaid-fullscreen-wrapper {
-  background: white;
-  border-radius: 0.5rem;
-  padding: 2rem;
-  width: calc(100vw - 2rem);
-  height: calc(100vh - 6rem);
-  overflow: auto;
-  box-shadow: var(--shadow-xl);
-  transform-origin: center center;
-  transition: transform var(--transition-normal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mermaid-fullscreen-diagram {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-  position: relative;
-}
-
-.mermaid-fullscreen-diagram .mermaid {
-  width: 100% !important;
-  height: 100% !important;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  background: transparent !important;
-  border: none !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.mermaid-fullscreen-diagram svg {
-  max-width: 100% !important;
-  max-height: 100% !important;
-  width: auto !important;
-  height: auto !important;
-  display: block !important;
-  margin: 0 auto !important;
-}
-
-/* Zoom functionality */
-.mermaid-fullscreen-wrapper.zoomed {
-  overflow: visible;
-}
-
-/* Mermaid Error Styles */
-.mermaid-error {
-  background: #fee;
-  border: 2px solid #fcc;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 1rem 0;
-  font-family: var(--font-sans);
-}
-
-.mermaid-error .error-title {
-  color: #c53030;
-  font-weight: 600;
-  font-size: 1.125rem;
-  margin-bottom: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.mermaid-error .error-message {
-  color: #742a2a;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  background: #fff5f5;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  margin: 0.5rem 0;
-  word-break: break-word;
-  white-space: pre-wrap;
-}
-
-.mermaid-error .error-help {
-  color: #744210;
-  font-size: 0.875rem;
-  font-style: italic;
-}
-
-.mermaid-error-container {
-  border: 2px solid #fcc;
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  background: #fef2f2;
-}
-
-/* Dark theme error styles */
-[data-theme="dark"] .mermaid-error {
-  background: #2d1b1b;
-  border-color: #553030;
-}
-
-[data-theme="dark"] .mermaid-error .error-title {
-  color: #feb2b2;
-}
-
-[data-theme="dark"] .mermaid-error .error-message {
-  color: #fed7d7;
-  background: #2d1b1b;
-}
-
-[data-theme="dark"] .mermaid-error .error-help {
-  color: #d69e2e;
-}
-
-[data-theme="dark"] .mermaid-error-container {
-  border-color: #553030;
-  background: #2d1b1b;
-}
-
-/* Dark theme adjustments */
-[data-theme="dark"] {
-  --bg-primary: #1a202c;
-  --bg-secondary: #2d3748;
-  --bg-tertiary: #4a5568;
-  --text-primary: #ffffff;
-  --text-secondary: #e2e8f0;
-  --text-muted: #a0aec0;
-}
-
-[data-theme="dark"] .mermaid-container {
-  background: var(--bg-primary);
-  border-color: var(--bg-tertiary);
-}
-
-[data-theme="dark"] .mermaid-toolbar {
-  background: var(--bg-secondary);
-  border-color: var(--bg-tertiary);
-}
-
-[data-theme="dark"] .mermaid-btn {
-  background: var(--bg-primary);
-  border-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-
-[data-theme="dark"] .mermaid-fullscreen-wrapper {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .mermaid-toolbar {
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: flex-start;
-  }
-  
-  .mermaid-actions {
-    width: 100%;
-    justify-content: flex-end;
-  }
-  
-  .mermaid-fullscreen-toolbar {
-    padding: 1rem;
-  }
-  
-  .mermaid-fullscreen-controls {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  
-  .mermaid-fullscreen-content {
-    padding: 1rem;
-  }
-  
-  .mermaid-fullscreen-wrapper {
-    max-width: calc(100vw - 2rem);
-    max-height: calc(100vh - 6rem);
-    padding: 1rem;
-  }
-}
-
-/* Animation for opening fullscreen */
-@keyframes mermaidFadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.mermaid-fullscreen.active .mermaid-fullscreen-wrapper {
-  animation: mermaidFadeIn var(--transition-normal) ease-out;
-}
-
-/* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-base: 250ms ease-in-out;
-  --transition-slow: 350ms ease-in-out;
-  
-  /* Border Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-full: 9999px;
-}
-
-/* Dark Mode Variables */
-[data-theme="dark"] {
-  --text-primary: #f7fafc;
-  --text-secondary: #e2e8f0;
-  --text-muted: #a0aec0;
-  --bg-primary: #1a202c;
-  --bg-secondary: #2d3748;
-  --bg-tertiary: #4a5568;
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-  --primary-gradient: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
-  --secondary-gradient: linear-gradient(135deg, #718096 0%, #4a5568 100%);
-}
-
-/* Base Styles */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-  height: 100%;
-}
-
-body {
-  font-family: var(--font-sans);
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
-  line-height: 1.6;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  transition: background-color var(--transition-base), color var(--transition-base);
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.2;
-  margin-top: 0;
-  margin-bottom: var(--space-md);
-  color: var(--text-primary);
-}
-
-h1 {
-  font-size: 1.75rem;
-  color: var(--text-primary);
-  margin-bottom: var(--space-lg);
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 1.375rem;
-  margin-top: var(--space-xl);
-  margin-bottom: var(--space-md);
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-h3 {
-  font-size: 1.125rem;
-  margin-top: var(--space-lg);
-  margin-bottom: var(--space-sm);
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-h4 {
-  font-size: 1rem;
-  margin-top: var(--space-md);
-  margin-bottom: var(--space-sm);
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-p {
-  margin-bottom: var(--space-md);
-  color: var(--text-primary);
-  line-height: 1.4;
-  font-size: 0.9375rem;
-}
-
-a {
-  color: var(--accent);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
-
-a:hover {
-  color: var(--accent-hover);
-  text-decoration: underline;
-}
-
-strong, b {
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-em, i {
-  font-style: italic;
-  color: var(--text-secondary);
-}
-
-/* Layout Components */
-.container {
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 var(--space-lg);
-}
-
-/* Header */
-.header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: var(--header-height);
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  transition: background-color var(--transition-base);
-}
-
-[data-theme="dark"] .header {
-  background: rgba(26, 32, 44, 0.95);
-  border-bottom-color: rgba(255, 255, 255, 0.1);
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-  padding: 0 var(--space-xl);
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  font-size: 1.5rem;
-  font-weight: 700;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-decoration: none;
-  transition: opacity var(--transition-fast);
-}
-
-.logo:hover {
-  opacity: 0.8;
-  text-decoration: none;
-}
-
-.logo::before {
-  content: '🔷';
-  margin-right: var(--space-sm);
-  -webkit-text-fill-color: initial;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-lg);
-}
-
-.deployment-info {
-  display: flex;
-  align-items: center;
-  margin-right: var(--space-md);
-}
-
-.deployment-date {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  opacity: 0.8;
-  font-weight: 500;
-  white-space: nowrap;
-  user-select: none;
-}
-
-/* Hide deployment info on mobile to save space */
-@media (max-width: 768px) {
-  .deployment-info {
-    display: none;
-  }
-}
-
-.logout-btn {
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  cursor: pointer;
-  color: var(--text-primary);
-  padding: var(--space-sm);
-  border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.7;
-}
-
-.logout-btn:hover {
-  background: var(--bg-tertiary);
-  opacity: 1;
-  color: var(--danger);
-  transform: translateY(-1px);
-}
-
-.search-box {
-  position: relative;
-  width: 300px;
-}
-
-.search-input {
-  width: 100%;
-  padding: var(--space-sm) var(--space-lg);
-  padding-left: 40px;
-  border: 1px solid var(--bg-tertiary);
-  border-radius: var(--radius-full);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 0.875rem;
-  transition: all var(--transition-fast);
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
-}
-
-.search-icon {
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-muted);
-}
-
-.theme-toggle {
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  cursor: pointer;
-  color: var(--text-primary);
-  padding: var(--space-sm);
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-fast);
-}
-
-.theme-toggle:hover {
-  background-color: var(--bg-secondary);
-}
-
-/* Breadcrumbs */
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem var(--space-xl);
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--bg-tertiary);
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  position: fixed;
-  top: calc(var(--header-height) + var(--banner-offset));
-  left: 0;
-  right: 0;
-  height: var(--breadcrumb-height);
-  z-index: 900;
-  transition: background-color var(--transition-base);
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  color: var(--text-muted);
-  text-decoration: none;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-}
-
-.breadcrumb-item:hover:not(.current) {
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-
-.breadcrumb-item.current {
-  color: var(--text-primary);
-  font-weight: 500;
-  cursor: default;
-}
-
-.breadcrumb-separator {
-  margin: 0 0.25rem;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-}
-
-.breadcrumb-item i {
-  font-size: 0.875rem;
-  opacity: 0.8;
-}
-
-.breadcrumb-item.current i {
-  opacity: 1;
-}
-
-/* Adjust breadcrumbs when banner is visible */
-.breadcrumbs.banner-visible {
-  top: calc(var(--header-height) + 3.5rem);
-}
-
-/* Preview Banner */
-.preview-banner {
-  position: fixed;
-  top: var(--header-height);
-  left: 0;
-  right: 0;
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-  color: white;
-  z-index: 1000;
-  box-shadow: var(--shadow-md);
-  transition: transform var(--transition-base), opacity var(--transition-base);
-  /* Default to hidden state to prevent flash */
-  transform: translateY(-100%);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.preview-banner.visible {
-  transform: translateY(0);
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.preview-banner.hidden {
-  transform: translateY(-100%);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.banner-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-md) var(--space-lg);
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-  gap: var(--space-md);
-}
-
-.banner-icon {
-  font-size: 1.1rem;
-  flex-shrink: 0;
-}
-
-.banner-text {
-  font-size: 0.9rem;
-  font-weight: 500;
-  text-align: center;
-  flex: 1;
-}
-
-.banner-dismiss {
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  padding: var(--space-xs);
-  border-radius: var(--radius-sm);
-  transition: background-color var(--transition-fast);
-  font-size: 1rem;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.banner-dismiss:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.banner-dismiss:focus {
-  outline: 2px solid rgba(255, 255, 255, 0.5);
-  outline-offset: 2px;
-}
-
-/* Main Layout */
-.main-wrapper {
-  display: flex;
-  padding-top: calc(var(--header-height) + var(--breadcrumb-height) + var(--banner-offset));
-  min-height: 100vh;
-  transition: padding-top var(--transition-base);
-}
-
-/* Adjust layout when banner is visible */
-.main-wrapper.banner-visible {
-  padding-top: calc(var(--header-height) + var(--breadcrumb-height) + 3.5rem);
-}
-
-/* Sidebar */
-.sidebar {
-  position: fixed;
-  left: 0;
-  top: calc(var(--header-height) + var(--breadcrumb-height) + var(--banner-offset));
-  bottom: 0;
-  width: var(--sidebar-width);
-  background: var(--bg-primary);
-  border-right: 1px solid #e1e5e9;
-  overflow-y: auto;
-  transition: transform var(--transition-base), top var(--transition-base);
-  min-width: 200px;
-  max-width: 500px;
-  user-select: none;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Adjust sidebar when banner is visible */
-.sidebar.banner-visible {
-  top: calc(var(--header-height) + var(--breadcrumb-height) + 3.5rem);
-}
-
-/* Sidebar Header */
-.sidebar-header {
-  padding: var(--space-lg);
-  border-bottom: 1px solid #e1e5e9;
-  background: var(--bg-primary);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.filter-box {
-  position: relative;
-  width: 100%;
-}
-
-.filter-input {
-  width: 100%;
-  padding: var(--space-sm) var(--space-lg) var(--space-sm) 2.5rem;
-  border: 1px solid #e1e5e9;
-  border-radius: var(--radius-md);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 0.875rem;
-  transition: all var(--transition-fast);
-}
-
-.filter-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(91, 61, 152, 0.1);
-}
-
-.filter-input::placeholder {
-  color: var(--text-muted);
-}
-
-.filter-icon {
-  position: absolute;
-  left: var(--space-sm);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-muted);
-  font-size: 0.875rem;
-}
-
-/* Navigation */
-.navigation {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-md) 0;
-}
-
-/* Resize Handle */
-.resize-handle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 8px;
-  background: linear-gradient(90deg, transparent 0%, rgba(160, 174, 192, 0.2) 40%, rgba(160, 174, 192, 0.4) 50%, rgba(160, 174, 192, 0.2) 60%, transparent 100%);
-  cursor: col-resize;
-  transition: background var(--transition-fast);
-  z-index: 10;
-}
-
-.resize-handle:hover {
-  background: linear-gradient(90deg, transparent 0%, rgba(160, 174, 192, 0.4) 40%, rgba(160, 174, 192, 0.6) 50%, rgba(160, 174, 192, 0.4) 60%, transparent 100%);
-}
-
-/* Resize handle dots for visual indication */
-.resize-handle::before {
-  content: '⋮';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(90deg);
-  color: rgba(160, 174, 192, 0.6);
-  font-size: 14px;
-  font-weight: bold;
-  pointer-events: none;
-  transition: color var(--transition-fast);
-}
-
-.resize-handle:hover::before {
-  color: rgba(160, 174, 192, 0.8);
-}
-
-[data-theme="dark"] .sidebar {
-  border-right-color: rgba(255, 255, 255, 0.1);
-  background: var(--bg-secondary);
-}
-
-[data-theme="dark"] .sidebar-header {
-  border-bottom-color: rgba(255, 255, 255, 0.1);
-  background: var(--bg-secondary);
-}
-
-[data-theme="dark"] .filter-input {
-  border-color: rgba(255, 255, 255, 0.1);
-  background: var(--bg-tertiary);
-}
-
-.nav-section {
-  margin-bottom: var(--space-sm);
-}
-
-.nav-section[data-level="0"] {
-  margin-left: 0;
-}
-
-.nav-section[data-level="1"] {
-  margin-left: var(--space-lg);
-  margin-bottom: var(--space-sm);
-}
-
-.nav-section[data-level="2"] {
-  margin-left: var(--space-2xl);
-  margin-bottom: var(--space-sm);
-}
-
-.nav-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: var(--space-xs);
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-lg);
-}
-
-/* Indent nav titles based on their level */
-.nav-section[data-level="1"] .nav-title {
-  padding-left: calc(var(--space-lg) + var(--space-xl));
-}
-
-.nav-section[data-level="2"] .nav-title {
-  padding-left: calc(var(--space-lg) + var(--space-2xl));
-}
-
-.nav-title.collapsible {
-  cursor: pointer;
-  border-radius: 0;
-  transition: all var(--transition-fast);
-}
-
-.nav-title.collapsible:hover {
-  background-color: #f8f9fa;
-  color: var(--text-primary);
-}
-
-[data-theme="dark"] .nav-title.collapsible:hover {
-  background-color: var(--bg-tertiary);
-}
-
-.collapse-icon {
-  transition: transform var(--transition-fast);
-  margin-right: var(--space-xs);
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-.nav-title.expanded .collapse-icon {
-  transform: rotate(90deg);
-}
-
-.nav-content {
-  overflow: hidden;
-  transition: max-height var(--transition-base);
-  max-height: 1000px;
-}
-
-.nav-content.collapsed {
-  max-height: 0;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  padding: var(--space-sm) var(--space-lg);
-  color: var(--text-secondary);
-  border-radius: 0;
-  transition: all var(--transition-fast);
-  margin-bottom: 0;
-  gap: var(--space-sm);
-  font-size: 0.875rem;
-}
-
-/* Indent nav items based on their parent section level */
-.nav-section[data-level="0"] .nav-item {
-  padding-left: calc(var(--space-lg) + var(--space-xl));
-}
-
-.nav-section[data-level="1"] .nav-item {
-  padding-left: calc(var(--space-lg) + var(--space-2xl));
-}
-
-.nav-section[data-level="2"] .nav-item {
-  padding-left: calc(var(--space-lg) + var(--space-3xl));
-}
-
-.nav-item i {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  width: 14px;
-}
-
-.nav-item:hover {
-  background: #f8f9fa;
-  color: var(--text-primary);
-  text-decoration: none;
-}
-
-[data-theme="dark"] .nav-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.nav-item.active {
-  background: #e3f2fd;
-  color: var(--accent);
-  border-right: 3px solid var(--accent);
-}
-
-[data-theme="dark"] .nav-item.active {
-  background: var(--bg-tertiary);
-  color: var(--accent);
-}
-
-/* Content Area */
-.content {
-  flex: 1;
-  margin-left: var(--sidebar-width);
-  padding: var(--space-lg) var(--space-2xl) var(--space-xl);
-  max-width: calc(var(--content-max-width) + var(--space-2xl) * 2);
-  transition: margin-left var(--transition-base);
-}
-
-.content-inner {
-  max-width: var(--content-max-width);
-}
-
-/* Hero Section */
-.hero {
-  background: var(--primary-gradient);
-  color: var(--text-inverse);
-  padding: var(--space-3xl) 0;
-  margin: calc(var(--space-2xl) * -1) calc(var(--space-3xl) * -1) var(--space-3xl);
-  text-align: center;
-}
-
-.hero h1 {
-  color: var(--text-inverse);
-  -webkit-text-fill-color: var(--text-inverse);
-  font-size: 3rem;
-  margin-bottom: var(--space-lg);
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  color: var(--text-inverse);
-  max-width: 600px;
-  margin: 0 auto;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
-  opacity: 1;
-}
-
-.hero-actions {
-  display: flex;
-  gap: var(--space-md);
-  justify-content: center;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--space-sm) var(--space-xl);
-  border-radius: var(--radius-md);
-  font-weight: 500;
-  transition: all var(--transition-fast);
-  cursor: pointer;
-  border: none;
-  font-size: 1rem;
-}
-
-.btn-primary {
-  background: var(--accent);
-  color: var(--text-inverse);
-}
-
-.btn-primary:hover {
-  background: var(--accent-hover);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-
-.btn-secondary {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--text-inverse);
-  backdrop-filter: blur(10px);
-}
-
-.btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-/* Cards */
-.card {
-  background: var(--bg-primary);
-  border-radius: var(--radius-lg);
-  padding: var(--space-xl);
-  box-shadow: var(--shadow-md);
-  transition: all var(--transition-base);
-  margin-bottom: var(--space-lg);
-}
-
-.card:hover {
-  box-shadow: var(--shadow-xl);
-  transform: translateY(-2px);
-}
-
-.card-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: var(--space-md);
-}
-
-/* Code Blocks */
-pre {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  padding: var(--space-md);
-  border-radius: var(--radius-sm);
-  overflow-x: auto;
-  margin: var(--space-md) 0;
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  border: 1px solid var(--bg-tertiary);
-}
-
-code {
-  font-family: var(--font-mono);
-  font-size: 0.8125em;
-  background: #f1f3f4;
-  color: var(--text-primary);
-  padding: 0.0625rem 0.25rem;
-  border-radius: var(--radius-sm);
-  font-weight: 400;
-}
-
-[data-theme="dark"] code {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-pre code {
-  background: none;
-  padding: 0;
-  font-size: 0.8125rem;
-}
-
-/* Tables */
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: var(--space-md);
-  font-size: 0.9375rem;
-}
-
-th, td {
-  text-align: left;
-  padding: var(--space-sm) var(--space-md);
-  border-bottom: 1px solid var(--bg-tertiary);
-  line-height: 1.3;
-}
-
-th {
-  font-weight: 600;
-  background: var(--bg-secondary);
-  font-size: 0.875rem;
-}
-
-tr:hover {
-  background: var(--bg-secondary);
-}
-
-/* Lists */
-ul, ol {
-  margin-bottom: var(--space-md);
-  padding-left: var(--space-lg);
-  color: var(--text-primary);
-  line-height: 1.4;
-}
-
-li {
-  margin-bottom: var(--space-sm);
-  color: var(--text-primary);
-  font-size: 0.9375rem;
-  line-height: 1.4;
-}
-
-ol li {
-  padding-left: var(--space-xs);
-}
-
-ul li::marker {
-  color: var(--text-muted);
-}
-
-ol li::marker {
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-/* Nested lists */
-li ul, li ol {
-  margin-top: var(--space-xs);
-  margin-bottom: var(--space-xs);
-}
-
-/* Blockquotes */
-blockquote {
-  border-left: 4px solid var(--accent);
-  padding-left: var(--space-lg);
-  margin: var(--space-lg) 0;
-  font-style: italic;
-  color: var(--text-secondary);
-}
-
-/* Feature Grid */
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: var(--space-xl);
-  margin: var(--space-3xl) 0;
-}
-
-.feature-card {
-  background: var(--bg-secondary);
-  padding: var(--space-xl);
-  border-radius: var(--radius-lg);
-  transition: all var(--transition-base);
-}
-
-.feature-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
-}
-
-.feature-icon {
-  font-size: 2rem;
-  margin-bottom: var(--space-md);
-}
-
-.feature-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-bottom: var(--space-sm);
-}
-
-/* Timeline */
-.timeline {
-  position: relative;
-  padding-left: var(--space-2xl);
-  margin: var(--space-2xl) 0;
-}
-
-.timeline::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: var(--bg-tertiary);
-}
-
-.timeline-item {
-  position: relative;
-  margin-bottom: var(--space-2xl);
-}
-
-.timeline-item::before {
-  content: '';
-  position: absolute;
-  left: calc(var(--space-2xl) * -1 - 5px);
-  top: 0;
-  width: 12px;
-  height: 12px;
-  background: var(--accent);
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px var(--bg-primary);
-}
-
-.timeline-date {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  font-weight: 600;
-  margin-bottom: var(--space-xs);
-}
-
-/* Metrics */
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--space-lg);
-  margin: var(--space-2xl) 0;
-}
-
-.metric-card {
-  background: var(--bg-secondary);
-  padding: var(--space-lg);
-  border-radius: var(--radius-md);
-  text-align: center;
-}
-
-.metric-value {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--accent);
-  margin-bottom: var(--space-xs);
-}
-
-.metric-label {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-}
-
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .sidebar {
-    transform: translateX(-100%);
-    z-index: 999;
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-  }
-  
-  .sidebar.open {
-    transform: translateX(0);
-  }
-  
-  [data-theme="dark"] .sidebar {
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
-  }
-  
-  .content {
-    margin-left: 0 !important;
-    padding: var(--space-xl);
-    max-width: 100%;
-  }
-  
-  .search-box {
-    display: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .content {
-    margin-left: 0 !important;
-    padding: var(--space-md);
-    max-width: 100%;
-  }
-  
-  h1 {
-    font-size: 2rem;
-  }
-  
-  .hero h1 {
-    font-size: 2.5rem;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-  }
-  
-  .hero-actions {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .feature-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Animations */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.fade-in {
-  animation: fadeIn 0.6s ease-out;
-}
-
-/* Bubble Icon Custom CSS */
-.fa-bubble::before {
-  content: "🫧";
-  font-family: 'Inter', sans-serif;
-  font-style: normal;
-}
-
-/* Mermaid Diagram Styling */
-.mermaid {
-  margin: var(--space-xl) 0;
-  padding: var(--space-lg);
-  background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--bg-tertiary);
-  text-align: center;
-  overflow-x: auto;
-}
-
-[data-theme="dark"] .mermaid {
-  background: var(--bg-tertiary);
-  border-color: var(--text-muted);
-}
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--bg-secondary);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-/* Additional Components */
-
-/* Menu Toggle (Mobile) */
-.menu-toggle {
-  display: none;
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: var(--text-primary);
-  padding: var(--space-sm);
-  margin-left: var(--space-sm);
-  transition: color var(--transition-fast);
-  z-index: 1001;
-}
-
-.menu-toggle:hover {
-  color: var(--accent);
-}
-
-.menu-toggle.active i::before {
-  content: "\f00d"; /* fa-times icon */
-}
-
-@media (max-width: 1024px) {
-  .menu-toggle {
-    display: block;
-  }
-}
-
-/* Mobile Sidebar Overlay */
-.sidebar-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 998;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--transition-base), visibility var(--transition-base);
-  display: none;
-}
-
-@media (max-width: 1024px) {
-  .sidebar-overlay {
-    display: block;
-  }
-}
-
-.sidebar-overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Search Results Dropdown */
-.search-results {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--bg-primary);
-  border: 1px solid var(--bg-tertiary);
-  border-radius: var(--radius-md);
-  margin-top: var(--space-xs);
-  box-shadow: var(--shadow-lg);
-  max-height: 400px;
-  overflow-y: auto;
-  z-index: 100;
-}
-
-.search-result-item {
-  padding: var(--space-md);
-  border-bottom: 1px solid var(--bg-tertiary);
-  transition: background-color var(--transition-fast);
-}
-
-.search-result-item:hover {
-  background: var(--bg-secondary);
-}
-
-/* Code Block Wrapper */
-.code-block-wrapper {
-  position: relative;
-  margin-bottom: var(--space-lg);
-}
-
-.copy-button {
-  position: absolute;
-  top: var(--space-sm);
-  right: var(--space-sm);
-  background: var(--accent);
-  color: var(--text-inverse);
-  border: none;
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.copy-button:hover {
-  background: var(--accent-hover);
-}
-
-/* Table of Contents */
-.toc-container {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  padding: var(--space-xl);
-  margin: var(--space-xl) 0;
-  border: 1px solid var(--bg-tertiary);
-}
-
-.toc-container h2 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--space-lg);
-  padding-bottom: var(--space-sm);
-  border-bottom: 2px solid var(--bg-tertiary);
-}
-
-.toc-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.toc-list ol,
-.toc-list ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.toc-list li {
-  position: relative;
-  margin-bottom: 0;
-  line-height: 1.4;
-}
-
-.toc-list > li {
-  margin-bottom: 0;
-}
-
-.toc-list li::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0.75em;
-  width: 6px;
-  height: 6px;
-  background: var(--text-muted);
-  border-radius: 50%;
-  opacity: 0.5;
-}
-
-.toc-list a {
-  display: block;
-  padding: 0.125rem var(--space-sm);
-  padding-left: var(--space-lg);
-  color: var(--text-secondary);
-  font-size: 0.9375rem;
-  transition: all var(--transition-fast);
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  position: relative;
-}
-
-.toc-list a:hover {
-  color: var(--accent);
-  background: rgba(91, 61, 152, 0.05);
-  transform: translateX(1px);
-}
-
-/* Nested TOC items */
-.toc-list .toc-h2 {
-  font-weight: 500;
-}
-
-.toc-list .toc-h3 {
-  padding-left: calc(var(--space-lg) + var(--space-xl));
-  font-size: 0.875rem;
-  color: var(--text-muted);
-}
-
-.toc-list .toc-h3::before {
-  left: var(--space-xl);
-  width: 4px;
-  height: 4px;
-}
-
-.toc-list .toc-h4 {
-  padding-left: calc(var(--space-lg) + var(--space-2xl));
-  font-size: 0.8125rem;
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-.toc-list .toc-h4::before {
-  left: var(--space-2xl);
-  width: 3px;
-  height: 3px;
-}
-
-/* Active TOC item */
-.toc-list a.active {
-  color: var(--accent);
-  background: rgba(91, 61, 152, 0.1);
-  font-weight: 500;
-}
-
-/* Number styling for ordered lists */
-.toc-list > ol {
-  counter-reset: toc-counter;
-}
-
-.toc-list ol > li {
-  counter-increment: toc-counter;
-}
-
-.toc-list ol > li::before {
-  content: counter(toc-counter);
-  position: absolute;
-  left: 0;
-  top: var(--space-xs);
-  width: 1.5rem;
-  height: 1.5rem;
-  background: var(--accent);
-  color: var(--text-inverse);
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 1;
-}
-
-.toc-list ol > li > a {
-  padding-left: calc(var(--space-lg) + var(--space-md));
-}
-
-/* Dark mode adjustments */
-[data-theme="dark"] .toc-container {
-  background: var(--bg-secondary);
-  border-color: var(--bg-tertiary);
-}
-
-[data-theme="dark"] .toc-container h2 {
-  border-bottom-color: var(--bg-tertiary);
-}
-
-[data-theme="dark"] .toc-list a:hover {
-  background: var(--bg-tertiary);
-}
-
-/* Section Separators */
-section + section {
-  margin-top: var(--space-3xl);
-  padding-top: var(--space-3xl);
-  border-top: 1px solid var(--bg-tertiary);
-}
-
-/* Highlight Box */
-.highlight-box {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
-  border-left: 4px solid var(--accent);
-  padding: var(--space-lg);
-  margin: var(--space-xl) 0;
-  border-radius: var(--radius-md);
-}
-
-/* Badge */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--space-xs) var(--space-sm);
-  background: var(--accent);
-  color: var(--text-inverse);
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: var(--radius-full);
-  margin-left: var(--space-sm);
-}
-
-/* Gradient Text */
-.gradient-text {
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Responsive Styles for Banner */
-@media (max-width: 768px) {
-  .banner-content {
-    padding: var(--space-sm) var(--space-md);
-    gap: var(--space-sm);
-  }
-  
-  .banner-text {
-    font-size: 0.8rem;
-  }
-  
-  .banner-icon {
-    font-size: 1rem;
-  }
-  
-  /* Adjust mobile layout when banner is visible */
-  .main-wrapper.banner-visible {
-    padding-top: calc(var(--header-height) + var(--breadcrumb-height) + 4rem);
-  }
-  
-  .sidebar.banner-visible {
-    top: calc(var(--header-height) + var(--breadcrumb-height) + 4rem);
-  }
-}
-
-/* Tooltip Styles */
-[data-tooltip] {
-  position: relative;
-}
-
-/* Tooltip content */
-[data-tooltip]::after {
-  content: attr(data-tooltip);
-  position: fixed; /* Use fixed positioning to escape overflow containers */
-  left: var(--tooltip-left, 0);
-  top: var(--tooltip-top, 0);
-  transform: translateY(-50%);
-  background: #333;
-  color: white;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 14px;
-  white-space: normal;
-  line-height: 1.4;
-  max-width: 300px;
-  pointer-events: none;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s, visibility 0.3s;
-  z-index: 10000;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
-}
-
-/* Tooltip arrow */
-[data-tooltip]::before {
-  content: '';
-  position: fixed;
-  left: var(--tooltip-left, 0);
-  top: var(--tooltip-top, 0);
-  transform: translateX(-8px) translateY(-50%);
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 6px 8px 6px 0;
-  border-color: transparent #333 transparent transparent;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s, visibility 0.3s;
-  z-index: 10001;
-}
-
-[data-tooltip]:hover::after,
-[data-tooltip]:hover::before {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Ensure nav items have proper stacking context */
-.nav-item[data-tooltip],
-.nav-title[data-tooltip] {
-  position: relative !important;
-  z-index: 1;
-}
-
-.nav-item[data-tooltip]:hover,
-.nav-title[data-tooltip]:hover {
-  z-index: 100000; /* Very high z-index to ensure tooltip appears above everything */
-}
-
-/* Tooltip for nav titles (folders) */
-.nav-title[data-tooltip]::after {
-  max-width: 350px;
-  font-weight: 400;
-}
-
-/* Ensure nav sections don't clip tooltips */
-.nav-section {
-  position: relative;
-  overflow: visible !important;
-}
-
-/* Dark mode tooltip styles */
-[data-theme="dark"] [data-tooltip]::after {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border: 1px solid var(--bg-tertiary);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
-}
-
-[data-theme="dark"] [data-tooltip]::before {
-  border-right-color: var(--bg-secondary);
-}
-
-/* Mobile adjustments */
-@media (max-width: 768px) {
-  /* Disable tooltips on mobile to prevent overlap issues */
-  [data-tooltip]::before,
-  [data-tooltip]::after {
-    display: none;
-  }
-}
-
-/* Print Styles */
-@media print {
-  .header,
-  .sidebar,
-  .theme-toggle,
-  .search-box,
-  .preview-banner,
-  .resize-handle,
-  .copy-button,
-  .menu-toggle {
-    display: none !important;
-  }
-  
-  body {
-    font-size: 12pt;
-    line-height: 1.4;
-    color: black !important;
-    background: white !important;
-  }
-  
-  .content {
-    margin: 0 !important;
-    padding: 20px !important;
-    max-width: none !important;
-  }
-  
-  .main-wrapper {
-    padding-top: 0 !important;
-  }
-  
-  .hero {
-    background: none !important;
-    color: black !important;
-    padding: 20px 0 !important;
-    margin: 0 0 20px 0 !important;
-    page-break-inside: avoid;
-  }
-  
-  .hero h1 {
-    color: black !important;
-    -webkit-text-fill-color: black !important;
-    text-shadow: none !important;
-    font-size: 24pt !important;
-  }
-  
-  .hero-subtitle {
-    color: black !important;
-    text-shadow: none !important;
-    font-size: 14pt !important;
-  }
-  
-  h1, h2, h3, h4, h5, h6 {
-    color: black !important;
-    page-break-after: avoid;
-    margin-top: 15pt;
-    margin-bottom: 10pt;
-  }
-  
-  h1 { font-size: 20pt; }
-  h2 { font-size: 16pt; }
-  h3 { font-size: 14pt; }
-  h4 { font-size: 12pt; }
-  
-  p, li {
-    color: black !important;
-    font-size: 11pt;
-    line-height: 1.4;
-    margin-bottom: 8pt;
-  }
-  
-  /* Feature cards and grids */
-  .feature-grid, .metrics-grid {
-    display: block !important;
-    margin: 15pt 0;
-  }
-  
-  .feature-card, .metric-card {
-    break-inside: avoid;
-    margin-bottom: 10pt;
-    border: 1px solid #ccc;
-    padding: 8pt;
-    background: white !important;
-  }
-  
-  .feature-title, .metric-label {
-    color: black !important;
-    font-weight: bold;
-  }
-  
-  .metric-value {
-    color: black !important;
-    font-size: 18pt;
-    font-weight: bold;
-  }
-  
-  /* Code blocks */
-  pre, code {
-    background: #f5f5f5 !important;
-    border: 1px solid #ddd;
-    color: black !important;
-    font-size: 9pt;
-    padding: 5pt;
-    break-inside: avoid;
-  }
-  
-  /* Tables */
-  table {
-    break-inside: avoid;
-    border-collapse: collapse;
-    width: 100%;
-    margin: 10pt 0;
-  }
-  
-  th, td {
-    border: 1px solid #ccc;
-    padding: 5pt;
-    color: black !important;
-    font-size: 10pt;
-  }
-  
-  th {
-    background: #f0f0f0 !important;
-    font-weight: bold;
-  }
-  
-  /* Timeline */
-  .timeline {
-    display: block !important;
-    margin: 15pt 0;
-  }
-  
-  .timeline-item {
-    break-inside: avoid;
-    margin-bottom: 12pt;
-    padding-left: 0 !important;
-    border-left: 2px solid #ccc;
-    padding-left: 10pt;
-  }
-  
-  .timeline::before,
-  .timeline-item::before {
-    display: none;
-  }
-  
-  .timeline-date {
-    color: black !important;
-    font-weight: bold;
-    font-size: 10pt;
-  }
-  
-  /* Mermaid diagrams */
-  .mermaid {
-    break-inside: avoid;
-    background: white !important;
-    border: 1px solid #ccc;
-    padding: 10pt;
-    margin: 10pt 0;
-  }
-  
-  /* Links */
-  a {
-    color: black !important;
-    text-decoration: underline;
-  }
-  
-  a[href^="http"]:after {
-    content: " (" attr(href) ")";
-    font-size: 9pt;
-    color: #666;
-  }
-  
-  /* Remove gradients and colors */
-  .gradient-text {
-    color: black !important;
-    background: none !important;
-    -webkit-text-fill-color: black !important;
-  }
-  
-  /* Lists */
-  ul, ol {
-    margin: 8pt 0;
-    padding-left: 20pt;
-  }
-  
-  li {
-    margin-bottom: 4pt;
-  }
-  
-  /* Blockquotes */
-  blockquote {
-    border-left: 3px solid #ccc;
-    padding-left: 10pt;
-    margin: 10pt 0;
-    font-style: italic;
-    color: black !important;
-  }
-  
-  /* Page breaks */
-  .page-break {
-    page-break-before: always;
-  }
-  
-  .no-break {
-    page-break-inside: avoid;
-  }
-}