progress

.eleventy.js

@@ -1,32 +1,17 @@
 const yaml = require('js-yaml');
 const fs = require('fs');
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
-const sass = require('eleventy-plugin-sass');
 
 module.exports = function(eleventyConfig) {
-  // Plugins
-  eleventyConfig.addPlugin(syntaxHighlight);
-  eleventyConfig.addPlugin(sass, {
-    compileOptions: {
-      permalink: function(contents, inputPath) {
-        return (data) => data.page.filePathStem.replace(/^\/scss\//, "/css/") + ".css";
-      }
-    },
-    sass: {
-      style: "compressed",
-      sourceMap: true
-    }
-  });
-
   // Copy static assets
   eleventyConfig.addPassthroughCopy("src/js");
   eleventyConfig.addPassthroughCopy("src/images");
   eleventyConfig.addPassthroughCopy("src/icons");
+  eleventyConfig.addPassthroughCopy("src/css");
   
   // Watch for changes
-  eleventyConfig.addWatchTarget("src/scss/");
+  eleventyConfig.addWatchTarget("src/css/");
   eleventyConfig.addWatchTarget("src/js/");
-  eleventyConfig.addWatchTarget("src/_data/");
+  eleventyConfig.addWatchTarget("src/data/");
 
   // Custom YAML data loader
   eleventyConfig.addDataExtension("yaml", contents => yaml.load(contents));
@@ -58,27 +43,6 @@ module.exports = function(eleventyConfig) {
     );
   });
 
-  // Collection for tools by domain and phase (for matrix view)
-  eleventyConfig.addCollection("toolMatrix", function(collectionApi) {
-    const tools = collectionApi.getAll()[0].data.tools || [];
-    const domains = ['Filesystem Forensics', 'Network Forensics', 'Memory Forensics', 'Live Forensics', 'Malware Analysis', 'Cryptocurrency'];
-    const phases = ['Data Collection', 'Examination', 'Analysis', 'Reporting'];
-    
-    const matrix = {};
-    domains.forEach(domain => {
-      matrix[domain] = {};
-      phases.forEach(phase => {
-        matrix[domain][phase] = tools.filter(tool => 
-          tool.domains && tool.domains.includes(domain) &&
-          tool.phases && tool.phases.includes(phase) &&
-          tool.type === 'FOSS'
-        );
-      });
-    });
-    
-    return matrix;
-  });
-
   // Global data
   eleventyConfig.addGlobalData("domains", [
     'Filesystem Forensics',
@@ -103,7 +67,7 @@ module.exports = function(eleventyConfig) {
       output: "_site",
       includes: "_includes",
       layouts: "_layouts",
-      data: "_data"
+      data: "data"
     },
     templateFormats: ["md", "njk", "html"],
     markdownTemplateEngine: "njk",

package.json

@@ -12,10 +12,7 @@
   "author": "Your Lab",
   "license": "MIT",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy": "^3.1.2"
-    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "eleventy-plugin-sass": "^2.2.0",
-    "sass": "^1.69.0"
   },
   "dependencies": {
     "js-yaml": "^4.1.0"

src/css/main.css

@@ -0,0 +1,614 @@
+/* CSS Reset and Base Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* CSS Variables for Colors */
+:root {
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --blue-900: #1e3a8a;
+  
+  --green-100: #dcfce7;
+  --green-400: #4ade80;
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-800: #166534;
+  --green-900: #14532d;
+  
+  --purple-100: #f3e8ff;
+  --purple-600: #9333ea;
+  --purple-800: #6b21a8;
+  --purple-900: #581c87;
+  
+  --yellow-100: #fef3c7;
+  --yellow-400: #fbbf24;
+  --yellow-500: #f59e0b;
+  --yellow-600: #d97706;
+  --yellow-800: #92400e;
+  --yellow-900: #78350f;
+  
+  --red-100: #fee2e2;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-800: #991b1b;
+  --red-900: #7f1d1d;
+}
+
+/* Dark Theme Variables */
+.dark {
+  --gray-50: #111827;
+  --gray-100: #1f2937;
+  --gray-200: #374151;
+  --gray-300: #4b5563;
+  --gray-400: #6b7280;
+  --gray-500: #9ca3af;
+  --gray-600: #d1d5db;
+  --gray-700: #e5e7eb;
+  --gray-800: #f3f4f6;
+  --gray-900: #f9fafb;
+}
+
+/* Background Colors */
+.bg-gray-50 { background-color: var(--gray-50); }
+.bg-gray-100 { background-color: var(--gray-100); }
+.bg-gray-600 { background-color: var(--gray-600); }
+.bg-gray-700 { background-color: var(--gray-700); }
+.bg-gray-800 { background-color: var(--gray-800); }
+.bg-gray-900 { background-color: var(--gray-900); }
+.bg-white { background-color: white; }
+.bg-blue-50 { background-color: var(--blue-50); }
+.bg-blue-100 { background-color: var(--blue-100); }
+.bg-blue-500 { background-color: var(--blue-500); }
+.bg-blue-600 { background-color: var(--blue-600); }
+.bg-blue-700 { background-color: var(--blue-700); }
+.bg-blue-800 { background-color: var(--blue-800); }
+.bg-blue-900 { background-color: var(--blue-900); }
+.bg-green-50 { background-color: #dcfce7; }
+.bg-green-100 { background-color: var(--green-100); }
+.bg-green-900 { background-color: var(--green-900); }
+.bg-purple-50 { background-color: #f3e8ff; }
+.bg-purple-100 { background-color: var(--purple-100); }
+.bg-purple-900 { background-color: var(--purple-900); }
+.bg-yellow-50 { background-color: #fef3c7; }
+.bg-yellow-100 { background-color: var(--yellow-100); }
+.bg-yellow-900 { background-color: var(--yellow-900); }
+.bg-red-100 { background-color: var(--red-100); }
+.bg-red-900 { background-color: var(--red-900); }
+
+/* Text Colors */
+.text-gray-100 { color: var(--gray-100); }
+.text-gray-200 { color: var(--gray-200); }
+.text-gray-300 { color: var(--gray-300); }
+.text-gray-400 { color: var(--gray-400); }
+.text-gray-500 { color: var(--gray-500); }
+.text-gray-600 { color: var(--gray-600); }
+.text-gray-700 { color: var(--gray-700); }
+.text-gray-800 { color: var(--gray-800); }
+.text-gray-900 { color: var(--gray-900); }
+.text-white { color: white; }
+.text-blue-400 { color: var(--blue-400); }
+.text-blue-600 { color: var(--blue-600); }
+.text-blue-800 { color: var(--blue-800); }
+.text-blue-900 { color: var(--blue-900); }
+.text-green-400 { color: var(--green-400); }
+.text-green-600 { color: var(--green-600); }
+.text-green-800 { color: var(--green-800); }
+.text-purple-800 { color: var(--purple-800); }
+.text-purple-200 { color: #c4b5fd; }
+.text-yellow-400 { color: var(--yellow-400); }
+.text-yellow-600 { color: var(--yellow-600); }
+.text-yellow-800 { color: var(--yellow-800); }
+.text-red-400 { color: var(--red-400); }
+.text-red-600 { color: var(--red-600); }
+.text-red-800 { color: var(--red-800); }
+
+/* Layout Utilities */
+.min-h-screen { min-height: 100vh; }
+.max-w-md { max-width: 28rem; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-4xl { max-width: 56rem; }
+.max-w-6xl { max-width: 72rem; }
+.max-w-7xl { max-width: 80rem; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Spacing */
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
+.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+.mt-4 { margin-top: 1rem; }
+.pl-10 { padding-left: 2.5rem; }
+.pr-4 { padding-right: 1rem; }
+
+/* Flexbox */
+.flex { display: flex; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.space-x-8 > * + * { margin-left: 2rem; }
+.space-x-4 > * + * { margin-left: 1rem; }
+.space-x-2 > * + * { margin-left: 0.5rem; }
+.space-y-2 > * + * { margin-top: 0.5rem; }
+.space-y-4 > * + * { margin-top: 1rem; }
+.space-y-6 > * + * { margin-top: 1.5rem; }
+.space-y-8 > * + * { margin-top: 2rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+.flex-wrap { flex-wrap: wrap; }
+
+/* Grid */
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+@media (min-width: 768px) {
+  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+@media (min-width: 1024px) {
+  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+/* Typography */
+.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+.text-2xl { font-size: 1.5rem; line-height: 2rem; }
+.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.font-bold { font-weight: 700; }
+.font-semibold { font-weight: 600; }
+.font-medium { font-weight: 500; }
+.leading-relaxed { line-height: 1.625; }
+
+/* Borders and Shadows */
+.border { border-width: 1px; }
+.border-b { border-bottom-width: 1px; }
+.border-gray-200 { border-color: var(--gray-200); }
+.border-gray-300 { border-color: var(--gray-300); }
+.border-gray-600 { border-color: var(--gray-600); }
+.border-gray-700 { border-color: var(--gray-700); }
+.border-blue-200 { border-color: var(--blue-200); }
+.border-blue-700 { border-color: var(--blue-700); }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-md { border-radius: 0.375rem; }
+.rounded { border-radius: 0.25rem; }
+.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+
+/* Positioning */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
+.top-1\/2 { top: 50%; }
+.left-3 { left: 0.75rem; }
+.right-3 { right: 0.75rem; }
+.transform { transform: var(--tw-transform); }
+.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translateY(var(--tw-translate-y)); }
+.z-50 { z-index: 50; }
+
+/* Display */
+.hidden { display: none; }
+.block { display: block; }
+.inline-block { display: inline-block; }
+
+/* Sizing */
+.w-4 { width: 1rem; }
+.w-5 { width: 1.25rem; }
+.w-16 { width: 4rem; }
+.w-full { width: 100%; }
+.h-4 { height: 1rem; }
+.h-5 { height: 1.25rem; }
+.h-16 { height: 4rem; }
+.min-w-48 { min-width: 12rem; }
+.min-w-64 { min-width: 16rem; }
+.max-h-\[90vh\] { max-height: 90vh; }
+
+/* Overflow */
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-auto { overflow-y: auto; }
+
+/* Text Alignment */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+
+/* Cursor */
+.cursor-pointer { cursor: pointer; }
+
+/* Focus and Interaction */
+.hover\:bg-gray-300:hover { background-color: var(--gray-300); }
+.hover\:bg-gray-600:hover { background-color: var(--gray-600); }
+.hover\:bg-gray-700:hover { background-color: var(--gray-700); }
+.hover\:bg-blue-700:hover { background-color: var(--blue-700); }
+.hover\:bg-blue-100:hover { background-color: var(--blue-100); }
+.hover\:bg-blue-800:hover { background-color: var(--blue-800); }
+.hover\:text-gray-900:hover { color: var(--gray-900); }
+.hover\:text-gray-100:hover { color: var(--gray-100); }
+.hover\:text-gray-300:hover { color: var(--gray-300); }
+.hover\:text-blue-600:hover { color: var(--blue-600); }
+.hover\:text-blue-400:hover { color: var(--blue-400); }
+.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
+
+.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--blue-500); }
+.focus\:border-blue-500:focus { border-color: var(--blue-500); }
+
+/* Transitions */
+.transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
+.transition-shadow { transition: box-shadow 0.15s ease-in-out; }
+.duration-200 { transition-duration: 200ms; }
+
+/* Misc */
+.appearance-none { appearance: none; }
+.pointer-events-none { pointer-events: none; }
+.align-top { vertical-align: top; }
+
+/* Custom Component Styles */
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  color: var(--gray-600);
+  text-decoration: none;
+}
+
+.nav-link:hover {
+  color: var(--gray-900);
+}
+
+.dark .nav-link {
+  color: var(--gray-300);
+}
+
+.dark .nav-link:hover {
+  color: var(--gray-100);
+}
+
+.nav-link-active {
+  color: var(--blue-600) !important;
+  background-color: var(--blue-50);
+}
+
+.dark .nav-link-active {
+  color: var(--blue-400) !important;
+  background-color: var(--blue-900);
+}
+
+.view-mode-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  transition: all 0.15s ease-in-out;
+  background-color: var(--gray-200);
+  color: var(--gray-700);
+  border: none;
+  cursor: pointer;
+}
+
+.view-mode-btn:hover {
+  background-color: var(--gray-300);
+}
+
+.dark .view-mode-btn {
+  background-color: var(--gray-700);
+  color: var(--gray-300);
+}
+
+.dark .view-mode-btn:hover {
+  background-color: var(--gray-600);
+}
+
+.view-mode-active {
+  background-color: var(--blue-600) !important;
+  color: white !important;
+}
+
+.view-mode-active:hover {
+  background-color: var(--blue-700) !important;
+}
+
+.theme-btn {
+  color: var(--gray-600);
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  transition: all 0.15s ease-in-out;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.theme-btn:hover {
+  color: var(--gray-900);
+}
+
+.dark .theme-btn {
+  color: var(--gray-400);
+}
+
+.dark .theme-btn:hover {
+  color: var(--gray-200);
+}
+
+.theme-btn.active {
+  background-color: white;
+  color: var(--gray-900);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.dark .theme-btn.active {
+  background-color: var(--gray-600);
+  color: var(--gray-100);
+}
+
+.tool-card {
+  background-color: white;
+  border: 1px solid var(--gray-200);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  transition: box-shadow 0.15s ease-in-out;
+  cursor: pointer;
+}
+
+.tool-card:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.dark .tool-card {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+
+.tag {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  display: inline-block;
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.tag-blue {
+  background-color: var(--blue-100);
+  color: var(--blue-800);
+}
+
+.dark .tag-blue {
+  background-color: var(--blue-900);
+  color: #bfdbfe;
+}
+
+.tag-green {
+  background-color: var(--green-100);
+  color: var(--green-800);
+}
+
+.dark .tag-green {
+  background-color: var(--green-900);
+  color: #86efac;
+}
+
+.tag-purple {
+  background-color: var(--purple-100);
+  color: var(--purple-800);
+}
+
+.dark .tag-purple {
+  background-color: var(--purple-900);
+  color: var(--purple-200);
+}
+
+.tag-gray {
+  background-color: var(--gray-100);
+  color: var(--gray-800);
+}
+
+.dark .tag-gray {
+  background-color: var(--gray-700);
+  color: var(--gray-200);
+}
+
+.matrix-cell-tool {
+  background-color: var(--blue-50);
+  border: 1px solid #bfdbfe;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+  color: var(--blue-900);
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.matrix-cell-tool:hover {
+  background-color: var(--blue-100);
+}
+
+.dark .matrix-cell-tool {
+  background-color: var(--blue-900);
+  border-color: var(--blue-700);
+  color: var(--blue-100);
+}
+
+.dark .matrix-cell-tool:hover {
+  background-color: var(--blue-800);
+}
+
+.status-indicator {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+}
+
+.status-indicator.operational { background-color: var(--green-500); }
+.status-indicator.degraded { background-color: var(--yellow-500); }
+.status-indicator.maintenance { background-color: var(--blue-500); }
+.status-indicator.down { background-color: var(--red-500); }
+
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.status-badge.operational {
+  color: var(--green-600);
+  background-color: var(--green-100);
+}
+
+.dark .status-badge.operational {
+  color: var(--green-400);
+  background-color: var(--green-900);
+}
+
+.status-badge.degraded {
+  color: var(--yellow-600);
+  background-color: var(--yellow-100);
+}
+
+.dark .status-badge.degraded {
+  color: var(--yellow-400);
+  background-color: var(--yellow-900);
+}
+
+.status-badge.maintenance {
+  color: var(--blue-600);
+  background-color: var(--blue-100);
+}
+
+.dark .status-badge.maintenance {
+  color: var(--blue-400);
+  background-color: var(--blue-900);
+}
+
+.status-badge.down {
+  color: var(--red-600);
+  background-color: var(--red-100);
+}
+
+.dark .status-badge.down {
+  color: var(--red-400);
+  background-color: var(--red-900);
+}
+
+/* Form Styles */
+input, select, textarea {
+  background-color: white;
+  color: var(--gray-900);
+}
+
+.dark input,
+.dark select,
+.dark textarea {
+  background-color: var(--gray-700);
+  color: var(--gray-100);
+}
+
+/* Table Styles */
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+/* Prose Styles */
+.prose {
+  max-width: none;
+}
+
+.prose p {
+  margin-bottom: 1rem;
+}
+
+/* View Mode Management */
+.view-mode.hidden {
+  display: none;
+}
+
+.view-mode.view-mode-active {
+  display: block;
+}
+
+/* Animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tool-card {
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Responsive Utilities */
+@media (max-width: 767px) {
+  .space-x-8 > * + * {
+    margin-left: 1rem;
+  }
+  
+  .px-4 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  
+  .overflow-x-auto {
+    -webkit-overflow-scrolling: touch;
+  }
+}

src/scss/main.scss

@@ -1,457 +0,0 @@
-// Variables
-:root {
-  --color-blue-50: #eff6ff;
-  --color-blue-100: #dbeafe;
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-blue-700: #1d4ed8;
-  --color-blue-800: #1e40af;
-  --color-blue-900: #1e3a8a;
-  
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-  
-  --color-green-100: #dcfce7;
-  --color-green-600: #16a34a;
-  --color-green-800: #166534;
-  --color-green-900: #14532d;
-  
-  --color-purple-100: #f3e8ff;
-  --color-purple-600: #9333ea;
-  --color-purple-800: #6b21a8;
-  --color-purple-900: #581c87;
-  
-  --color-yellow-100: #fef3c7;
-  --color-yellow-600: #d97706;
-  --color-yellow-800: #92400e;
-  --color-yellow-900: #78350f;
-  
-  --color-red-100: #fee2e2;
-  --color-red-600: #dc2626;
-  --color-red-800: #991b1b;
-  --color-red-900: #7f1d1d;
-}
-
-// Dark theme overrides
-.dark {
-  --color-gray-50: #111827;
-  --color-gray-100: #1f2937;
-  --color-gray-200: #374151;
-  --color-gray-300: #4b5563;
-  --color-gray-400: #6b7280;
-  --color-gray-500: #9ca3af;
-  --color-gray-600: #d1d5db;
-  --color-gray-700: #e5e7eb;
-  --color-gray-800: #f3f4f6;
-  --color-gray-900: #f9fafb;
-  
-  --color-blue-100: #1e3a8a;
-  --color-blue-400: #60a5fa;
-  --color-blue-500: #3b82f6;
-  
-  --color-green-100: #14532d;
-  --color-green-400: #4ade80;
-  
-  --color-purple-100: #581c87;
-  --color-purple-200: #a855f7;
-  
-  --color-yellow-100: #78350f;
-  --color-yellow-400: #fbbf24;
-  
-  --color-red-100: #7f1d1d;
-  --color-red-400: #f87171;
-}
-
-// Reset and base styles
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// Utility Classes
-.transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
-.transition-shadow { transition: box-shadow 0.15s ease-in-out; }
-.duration-200 { transition-duration: 200ms; }
-
-// Background colors
-.bg-gray-50 { background-color: var(--color-gray-50); }
-.bg-gray-100 { background-color: var(--color-gray-100); }
-.bg-gray-600 { background-color: var(--color-gray-600); }
-.bg-gray-700 { background-color: var(--color-gray-700); }
-.bg-gray-800 { background-color: var(--color-gray-800); }
-.bg-gray-900 { background-color: var(--color-gray-900); }
-.bg-white { background-color: white; }
-.bg-blue-50 { background-color: var(--color-blue-50); }
-.bg-blue-100 { background-color: var(--color-blue-100); }
-.bg-blue-500 { background-color: var(--color-blue-500); }
-.bg-blue-600 { background-color: var(--color-blue-600); }
-.bg-blue-700 { background-color: var(--color-blue-700); }
-.bg-blue-800 { background-color: var(--color-blue-800); }
-.bg-blue-900 { background-color: var(--color-blue-900); }
-
-// Text colors
-.text-gray-100 { color: var(--color-gray-100); }
-.text-gray-300 { color: var(--color-gray-300); }
-.text-gray-400 { color: var(--color-gray-400); }
-.text-gray-500 { color: var(--color-gray-500); }
-.text-gray-600 { color: var(--color-gray-600); }
-.text-gray-700 { color: var(--color-gray-700); }
-.text-gray-900 { color: var(--color-gray-900); }
-.text-white { color: white; }
-.text-blue-600 { color: var(--color-blue-600); }
-.text-blue-800 { color: var(--color-blue-800); }
-.text-blue-900 { color: var(--color-blue-900); }
-.text-green-600 { color: var(--color-green-600); }
-.text-green-800 { color: var(--color-green-800); }
-
-// Dark mode text colors
-.dark .text-gray-100 { color: var(--color-gray-100); }
-.dark .text-gray-300 { color: var(--color-gray-300); }
-.dark .text-gray-400 { color: var(--color-gray-400); }
-.dark .text-gray-500 { color: var(--color-gray-500); }
-.dark .text-blue-400 { color: var(--color-blue-400); }
-.dark .text-green-400 { color: var(--color-green-400); }
-
-// Layout utilities
-.min-h-screen { min-height: 100vh; }
-.max-w-4xl { max-width: 56rem; }
-.max-w-6xl { max-width: 72rem; }
-.max-w-7xl { max-width: 80rem; }
-.max-w-md { max-width: 28rem; }
-.max-w-2xl { max-width: 42rem; }
-.mx-auto { margin-left: auto; margin-right: auto; }
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
-.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
-.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
-.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
-.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
-.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
-.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
-.p-4 { padding: 1rem; }
-.p-6 { padding: 1.5rem; }
-.mb-2 { margin-bottom: 0.5rem; }
-.mb-3 { margin-bottom: 0.75rem; }
-.mb-4 { margin-bottom: 1rem; }
-.mb-6 { margin-bottom: 1.5rem; }
-.mb-8 { margin-bottom: 2rem; }
-.mt-4 { margin-top: 1rem; }
-
-// Flexbox
-.flex { display: flex; }
-.items-center { align-items: center; }
-.items-start { align-items: flex-start; }
-.items-end { align-items: flex-end; }
-.justify-between { justify-content: space-between; }
-.justify-center { justify-content: center; }
-.space-x-8 > * + * { margin-left: 2rem; }
-.space-x-4 > * + * { margin-left: 1rem; }
-.space-x-2 > * + * { margin-left: 0.5rem; }
-.space-y-2 > * + * { margin-top: 0.5rem; }
-.space-y-4 > * + * { margin-top: 1rem; }
-.space-y-6 > * + * { margin-top: 1.5rem; }
-.space-y-8 > * + * { margin-top: 2rem; }
-.gap-2 { gap: 0.5rem; }
-.gap-4 { gap: 1rem; }
-.gap-6 { gap: 1.5rem; }
-.flex-wrap { flex-wrap: wrap; }
-
-// Grid
-.grid { display: grid; }
-.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-
-@media (min-width: 768px) {
-  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-
-@media (min-width: 1024px) {
-  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-
-// Typography
-.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
-.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
-.text-2xl { font-size: 1.5rem; line-height: 2rem; }
-.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
-.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
-.text-xs { font-size: 0.75rem; line-height: 1rem; }
-.font-bold { font-weight: 700; }
-.font-semibold { font-weight: 600; }
-.font-medium { font-weight: 500; }
-.leading-relaxed { line-height: 1.625; }
-
-// Borders and shadows
-.border { border-width: 1px; }
-.border-b { border-bottom-width: 1px; }
-.border-gray-200 { border-color: var(--color-gray-200); }
-.border-gray-300 { border-color: var(--color-gray-300); }
-.border-gray-600 { border-color: var(--color-gray-600); }
-.border-gray-700 { border-color: var(--color-gray-700); }
-.dark .border-gray-700 { border-color: var(--color-gray-700); }
-.dark .border-gray-600 { border-color: var(--color-gray-600); }
-.rounded-lg { border-radius: 0.5rem; }
-.rounded-md { border-radius: 0.375rem; }
-.rounded { border-radius: 0.25rem; }
-.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
-.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
-
-// Positioning
-.relative { position: relative; }
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
-.top-1\/2 { top: 50%; }
-.left-3 { left: 0.75rem; }
-.right-3 { right: 0.75rem; }
-.transform { transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
-.-translate-y-1\/2 { --tw-translate-y: -50%; }
-.z-50 { z-index: 50; }
-
-// Display utilities
-.hidden { display: none; }
-.block { display: block; }
-.inline-block { display: inline-block; }
-
-// Focus styles
-.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--color-blue-500); }
-.focus\:ring-blue-500:focus { --tw-ring-color: var(--color-blue-500); }
-.focus\:border-blue-500:focus { border-color: var(--color-blue-500); }
-
-// Pointer events
-.pointer-events-none { pointer-events: none; }
-
-// Sizing
-.w-4 { width: 1rem; }
-.w-5 { width: 1.25rem; }
-.w-16 { width: 4rem; }
-.w-full { width: 100%; }
-.h-4 { height: 1rem; }
-.h-5 { height: 1.25rem; }
-.h-16 { height: 4rem; }
-.min-w-48 { min-width: 12rem; }
-.min-w-64 { min-width: 16rem; }
-.max-h-\[90vh\] { max-height: 90vh; }
-
-// Overflow
-.overflow-x-auto { overflow-x: auto; }
-.overflow-y-auto { overflow-y: auto; }
-
-// Text alignment
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-
-// Cursor
-.cursor-pointer { cursor: pointer; }
-
-// Component Styles
-.nav-link {
-  @apply flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors;
-  @apply text-gray-600 hover:text-gray-900;
-  
-  .dark & {
-    @apply text-gray-300 hover:text-gray-100;
-  }
-}
-
-.nav-link-active {
-  @apply text-blue-600 bg-blue-50;
-  
-  .dark & {
-    @apply text-blue-400 bg-blue-900;
-  }
-}
-
-.view-mode-btn {
-  @apply flex items-center gap-2 px-4 py-2 rounded-lg transition-colors;
-  @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
-  
-  .dark & {
-    @apply bg-gray-700 text-gray-300 hover:bg-gray-600;
-  }
-}
-
-.view-mode-active {
-  @apply bg-blue-600 text-white;
-  
-  &:hover {
-    @apply bg-blue-700;
-  }
-}
-
-.theme-btn {
-  @apply text-gray-600 hover:text-gray-900;
-  
-  .dark & {
-    @apply text-gray-400 hover:text-gray-200;
-  }
-  
-  &.active {
-    @apply bg-white text-gray-900 shadow-sm;
-    
-    .dark & {
-      @apply bg-gray-600 text-gray-100;
-    }
-  }
-}
-
-.tool-card {
-  @apply bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer;
-  
-  .dark & {
-    @apply bg-gray-800 border-gray-700;
-  }
-}
-
-.tag {
-  @apply text-xs px-2 py-1 rounded;
-}
-
-.tag-blue {
-  @apply bg-blue-100 text-blue-800;
-  
-  .dark & {
-    @apply bg-blue-900 text-blue-200;
-  }
-}
-
-.tag-green {
-  @apply bg-green-100 text-green-800;
-  
-  .dark & {
-    @apply bg-green-900 text-green-200;
-  }
-}
-
-.tag-purple {
-  @apply bg-purple-100 text-purple-800;
-  
-  .dark & {
-    @apply bg-purple-900 text-purple-200;
-  }
-}
-
-.tag-gray {
-  @apply bg-gray-100 text-gray-800;
-  
-  .dark & {
-    @apply bg-gray-700 text-gray-200;
-  }
-}
-
-.status-indicator {
-  @apply w-3 h-3 rounded-full;
-  
-  &.operational { @apply bg-green-500; }
-  &.degraded { @apply bg-yellow-500; }
-  &.maintenance { @apply bg-blue-500; }
-  &.down { @apply bg-red-500; }
-}
-
-.status-badge {
-  @apply px-3 py-1 rounded-full text-sm font-medium;
-  
-  &.operational {
-    @apply text-green-600 bg-green-100;
-    .dark & { @apply text-green-400 bg-green-900; }
-  }
-  
-  &.degraded {
-    @apply text-yellow-600 bg-yellow-100;
-    .dark & { @apply text-yellow-400 bg-yellow-900; }
-  }
-  
-  &.maintenance {
-    @apply text-blue-600 bg-blue-100;
-    .dark & { @apply text-blue-400 bg-blue-900; }
-  }
-  
-  &.down {
-    @apply text-red-600 bg-red-100;
-    .dark & { @apply text-red-400 bg-red-900; }
-  }
-}
-
-// Form styles
-input, select, textarea {
-  @apply bg-white text-gray-900;
-  
-  .dark & {
-    @apply bg-gray-700 text-gray-100;
-  }
-}
-
-// Table styles
-table {
-  border-collapse: collapse;
-}
-
-.matrix-cell-tool {
-  @apply bg-blue-50 border border-blue-200 rounded px-2 py-1 text-sm cursor-pointer hover:bg-blue-100 transition-colors text-blue-900;
-  
-  .dark & {
-    @apply bg-blue-900 border-blue-700 hover:bg-blue-800 text-blue-100;
-  }
-}
-
-// Prose styles for content
-.prose {
-  max-width: none;
-  
-  p {
-    margin-bottom: 1rem;
-  }
-}
-
-// View modes
-.view-mode {
-  &.hidden {
-    display: none;
-  }
-  
-  &.view-mode-active {
-    display: block;
-  }
-}
-
-// Animation for search results
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.tool-card {
-  animation: fadeIn 0.3s ease-out;
-}
-
-// Responsive utilities
-@media (max-width: 767px) {
-  .space-x-8 > * + * { margin-left: 1rem; }
-  .px-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
-  
-  .grid-cols-1 {
-    grid-template-columns: 1fr;
-  }
-  
-  .overflow-x-auto {
-    -webkit-overflow-scrolling: touch;
-  }
-}