update new ml

ml_complete-all-topics/style.css

@@ -738,892 +738,1230 @@ select.form-control {
 }
 
 /* END PERPLEXITY DESIGN SYSTEM */
-:root {
-  /* Primitive Color Tokens */
-  --color-white: rgba(255, 255, 255, 1);
-  --color-black: rgba(0, 0, 0, 1);
-  --color-cream-50: rgba(252, 252, 249, 1);
-  --color-cream-100: rgba(255, 255, 253, 1);
-  --color-gray-200: rgba(245, 245, 245, 1);
-  --color-gray-300: rgba(167, 169, 169, 1);
-  --color-gray-400: rgba(119, 124, 124, 1);
-  --color-slate-500: rgba(98, 108, 113, 1);
-  --color-brown-600: rgba(94, 82, 64, 1);
-  --color-charcoal-700: rgba(31, 33, 33, 1);
-  --color-charcoal-800: rgba(38, 40, 40, 1);
-  --color-slate-900: rgba(19, 52, 59, 1);
-  --color-teal-300: rgba(50, 184, 198, 1);
-  --color-teal-400: rgba(45, 166, 178, 1);
-  --color-teal-500: rgba(33, 128, 141, 1);
-  --color-teal-600: rgba(29, 116, 128, 1);
-  --color-teal-700: rgba(26, 104, 115, 1);
-  --color-teal-800: rgba(41, 150, 161, 1);
-  --color-red-400: rgba(255, 84, 89, 1);
-  --color-red-500: rgba(192, 21, 47, 1);
-  --color-orange-400: rgba(230, 129, 97, 1);
-  --color-orange-500: rgba(168, 75, 47, 1);
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 
-  /* RGB versions for opacity control */
-  --color-brown-600-rgb: 94, 82, 64;
-  --color-teal-500-rgb: 33, 128, 141;
-  --color-slate-900-rgb: 19, 52, 59;
-  --color-slate-500-rgb: 98, 108, 113;
-  --color-red-500-rgb: 192, 21, 47;
-  --color-red-400-rgb: 255, 84, 89;
-  --color-orange-500-rgb: 168, 75, 47;
-  --color-orange-400-rgb: 230, 129, 97;
+html {
+    scroll-behavior: smooth;
+}
 
-  /* Background color tokens (Light Mode) */
-  --color-bg-1: rgba(59, 130, 246, 0.08);
-  --color-bg-2: rgba(245, 158, 11, 0.08);
-  --color-bg-3: rgba(34, 197, 94, 0.08);
-  --color-bg-4: rgba(239, 68, 68, 0.08);
-  --color-bg-5: rgba(147, 51, 234, 0.08);
-  --color-bg-6: rgba(249, 115, 22, 0.08);
-  --color-bg-7: rgba(236, 72, 153, 0.08);
-  --color-bg-8: rgba(6, 182, 212, 0.08);
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #1a1a2e;
+    color: #e1e1e1;
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+/* Subject Tabs */
+.subject-tabs {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.subject-tab {
+    padding: 0.6rem 1.5rem;
+    background: rgba(74, 144, 226, 0.2);
+    border: 2px solid transparent;
+    border-radius: 8px;
+    color: #a0a0a0;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+}
+
+.subject-tab:hover {
+    background: rgba(74, 144, 226, 0.3);
+    color: #64ffda;
+}
+
+.subject-tab.active {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
+    border-color: #64ffda;
+    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
+}
+
+/* Top Navigation */
+.top-nav {
+    position: sticky;
+    top: 0;
+    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
+    padding: 1rem 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    border-bottom: 2px solid #4a90e2;
+}
+
+.nav-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
 
-  /* Semantic Color Tokens (Light Mode) */
-  --color-background: var(--color-cream-50);
-  --color-surface: var(--color-cream-100);
-  --color-text: var(--color-slate-900);
-  --color-text-secondary: var(--color-slate-500);
-  --color-primary: var(--color-teal-500);
-  --color-primary-hover: var(--color-teal-600);
-  --color-primary-active: var(--color-teal-700);
-  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
-  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
-  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
-  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
-  --color-btn-primary-text: var(--color-cream-50);
-  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
-  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
-  --color-error: var(--color-red-500);
-  --color-success: var(--color-teal-500);
-  --color-warning: var(--color-orange-500);
-  --color-info: var(--color-slate-500);
-  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
-  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
+.course-title {
+    font-size: 1.8rem;
+    color: #64ffda;
+    font-weight: 700;
+    text-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
+}
 
-  /* Typography */
-  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --font-size-xs: 11px;
-  --font-size-sm: 12px;
-  --font-size-base: 14px;
-  --font-size-md: 14px;
-  --font-size-lg: 16px;
-  --font-size-xl: 18px;
-  --font-size-2xl: 20px;
-  --font-size-3xl: 24px;
-  --font-size-4xl: 30px;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 550;
-  --font-weight-bold: 600;
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.5;
-  --letter-spacing-tight: -0.01em;
+.mobile-menu-btn {
+    display: none;
+    flex-direction: column;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+}
 
-  /* Spacing */
-  --space-0: 0;
-  --space-1: 1px;
-  --space-2: 2px;
-  --space-4: 4px;
-  --space-6: 6px;
-  --space-8: 8px;
-  --space-10: 10px;
-  --space-12: 12px;
-  --space-16: 16px;
-  --space-20: 20px;
-  --space-24: 24px;
-  --space-32: 32px;
+.mobile-menu-btn span {
+    width: 25px;
+    height: 3px;
+    background: #64ffda;
+    margin: 3px 0;
+    border-radius: 3px;
+    transition: all 0.3s ease;
+}
 
-  /* Border Radius */
-  --radius-sm: 6px;
-  --radius-base: 8px;
-  --radius-md: 10px;
-  --radius-lg: 12px;
-  --radius-full: 9999px;
+/* Main Container */
+.main-container {
+    display: flex;
+    max-width: 1400px;
+    margin: 0 auto;
+    min-height: calc(100vh - 80px);
+}
 
-  /* Shadows */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
-  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+/* Sidebar */
+.sidebar {
+    width: 280px;
+    background: #16213e;
+    padding: 2rem 1rem;
+    position: sticky;
+    top: 80px;
+    height: calc(100vh - 80px);
+    overflow-y: auto;
+    border-right: 2px solid #0f3460;
+    transition: transform 0.3s ease;
+}
 
-  /* Animation */
-  --duration-fast: 150ms;
-  --duration-normal: 250ms;
-  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+.sidebar-content h3 {
+    color: #64ffda;
+    margin-bottom: 1.5rem;
+    font-size: 1.3rem;
+    text-align: center;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-gray-400-rgb: 119, 124, 124;
-    --color-teal-300-rgb: 50, 184, 198;
-    --color-gray-300-rgb: 167, 169, 169;
-    --color-gray-200-rgb: 245, 245, 245;
+.module {
+    margin-bottom: 2rem;
+}
 
-    --color-bg-1: rgba(29, 78, 216, 0.15);
-    --color-bg-2: rgba(180, 83, 9, 0.15);
-    --color-bg-3: rgba(21, 128, 61, 0.15);
-    --color-bg-4: rgba(185, 28, 28, 0.15);
-    --color-bg-5: rgba(107, 33, 168, 0.15);
-    --color-bg-6: rgba(194, 65, 12, 0.15);
-    --color-bg-7: rgba(190, 24, 93, 0.15);
-    --color-bg-8: rgba(8, 145, 178, 0.15);
+.module-title {
+    color: #4a90e2;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 0.8rem;
+    padding: 0.5rem;
+    background: rgba(74, 144, 226, 0.1);
+    border-radius: 5px;
+    border-left: 3px solid #4a90e2;
+}
 
-    --color-background: var(--color-charcoal-700);
-    --color-surface: var(--color-charcoal-800);
-    --color-text: var(--color-gray-200);
-    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
-    --color-primary: var(--color-teal-300);
-    --color-primary-hover: var(--color-teal-400);
-    --color-primary-active: var(--color-teal-800);
-    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
-    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
-    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
-    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
-    --color-error: var(--color-red-400);
-    --color-success: var(--color-teal-300);
-    --color-warning: var(--color-orange-400);
-    --color-info: var(--color-gray-300);
-    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
-    --color-btn-primary-text: var(--color-slate-900);
-    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
-    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
-    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  }
+.topic-list {
+    list-style: none;
 }
 
-@font-face {
-  font-family: 'FKGroteskNeue';
-  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
+.topic-list li {
+    margin-bottom: 0.5rem;
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+.topic-link {
+    display: block;
+    padding: 0.6rem 0.8rem;
+    color: #a0a0a0;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    border-left: 3px solid transparent;
 }
 
-html, body {
-  height: 100%;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
-  color: var(--color-text);
-  background-color: var(--color-background);
-  -webkit-font-smoothing: antialiased;
+.topic-link:hover {
+    background: rgba(100, 255, 218, 0.1);
+    color: #64ffda;
+    border-left-color: #64ffda;
+    transform: translateX(5px);
 }
 
-.app-container {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
+.topic-link.active {
+    background: rgba(100, 255, 218, 0.15);
+    color: #64ffda;
+    border-left-color: #64ffda;
+    font-weight: 600;
 }
 
-/* Sidebar Navigation */
-.sidebar {
-  width: 260px;
-  background-color: var(--color-surface);
-  border-right: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
+/* Scrollbar Styling */
+.sidebar::-webkit-scrollbar {
+    width: 8px;
 }
 
-.sidebar-header {
-  padding: var(--space-24) var(--space-20);
-  border-bottom: 1px solid var(--color-border);
+.sidebar::-webkit-scrollbar-track {
+    background: #0f3460;
 }
 
-.sidebar-header h1 {
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text);
-  margin-bottom: var(--space-4);
+.sidebar::-webkit-scrollbar-thumb {
+    background: #4a90e2;
+    border-radius: 4px;
 }
 
-.sidebar-header p {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: #64ffda;
 }
 
-.nav-menu {
-  list-style: none;
-  padding: var(--space-12);
+/* Main Content */
+.content {
+    flex: 1;
+    padding: 3rem;
+    background: #1a1a2e;
 }
 
-.nav-item {
-  display: flex;
-  align-items: center;
-  padding: var(--space-12) var(--space-16);
-  margin-bottom: var(--space-4);
-  border-radius: var(--radius-base);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-standard);
-  color: var(--color-text);
+/* Subject-specific styling */
+.topic-section[data-subject="statistics"] .topic-number {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
 }
 
-.nav-item:hover {
-  background-color: var(--color-secondary);
+.topic-section[data-subject="linear-algebra"] .topic-number {
+    background: linear-gradient(135deg, #b47aea, #e66af5);
 }
 
-.nav-item.active {
-  background-color: var(--color-primary);
-  color: var(--color-btn-primary-text);
+.topic-section[data-subject="calculus"] .topic-number {
+    background: linear-gradient(135deg, #ff6b6b, #ffa94d);
 }
 
-/* TOC Category Styles */
-.toc-category {
-  margin-bottom: var(--space-8);
+.topic-section[data-subject="data-science"] .topic-number {
+    background: linear-gradient(135deg, #51cf66, #40c057);
 }
 
-.toc-category-header {
-  display: flex;
-  align-items: center;
-  padding: var(--space-12) var(--space-16);
-  background-color: rgba(var(--color-teal-500-rgb), 0.15);
-  border-radius: var(--radius-base);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-standard);
-  margin-bottom: var(--space-8);
+.topic-section[data-subject="machine-learning"] .topic-number {
+    background: linear-gradient(135deg, #ff6b9d, #c44569);
 }
 
-.toc-category-header:hover {
-  background-color: rgba(var(--color-teal-500-rgb), 0.25);
+/* ML-specific topic number colors by category */
+.topic-number.ml-regression {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
 }
 
-.toc-category-header[data-category="supervised"] {
-  background-color: rgba(106, 169, 255, 0.15);
+.topic-number.ml-classification {
+    background: linear-gradient(135deg, #ff6b9d, #ffa94d);
 }
 
-.toc-category-header[data-category="supervised"]:hover {
-  background-color: rgba(106, 169, 255, 0.25);
+.topic-number.ml-clustering {
+    background: linear-gradient(135deg, #51cf66, #40c057);
 }
 
-.toc-category-header[data-category="unsupervised"] {
-  background-color: rgba(126, 240, 212, 0.15);
+.topic-number.ml-reduction {
+    background: linear-gradient(135deg, #b47aea, #e66af5);
 }
 
-.toc-category-header[data-category="unsupervised"]:hover {
-  background-color: rgba(126, 240, 212, 0.25);
+.topic-number.ml-reinforcement {
+    background: linear-gradient(135deg, #c44569, #ff6b9d);
 }
 
-.toc-category-header[data-category="reinforcement"] {
-  background-color: rgba(255, 140, 106, 0.15);
+.topic-number.ml-advanced {
+    background: linear-gradient(135deg, #ffa94d, #f39c12);
 }
 
-.toc-category-header[data-category="reinforcement"]:hover {
-  background-color: rgba(255, 140, 106, 0.25);
+.topic-section[data-subject="linear-algebra"] .topic-header h2 {
+    color: #b47aea;
 }
 
-.category-icon {
-  font-size: var(--font-size-xl);
-  margin-right: var(--space-8);
+.topic-section[data-subject="calculus"] .topic-header h2 {
+    color: #ff6b6b;
 }
 
-.category-title {
-  flex: 1;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text);
-  letter-spacing: 0.5px;
+.topic-section[data-subject="data-science"] .topic-header h2 {
+    color: #51cf66;
 }
 
-.category-toggle {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  transition: transform var(--duration-normal) var(--ease-standard);
+.topic-section[data-subject="machine-learning"] .topic-header h2 {
+    color: #ff6b9d;
 }
 
-.category-toggle.collapsed {
-  transform: rotate(-90deg);
+/* ML section styling */
+.ml-section {
+    border-left: 4px solid rgba(255, 107, 157, 0.3);
+    padding-left: 20px;
 }
 
-.toc-category-content {
-  padding-left: var(--space-16);
-  max-height: 1000px;
-  overflow: hidden;
-  transition: max-height var(--duration-normal) var(--ease-standard);
+.ml-section .worked-example-section {
+    border: 2px solid rgba(255, 107, 157, 0.2);
 }
 
-.toc-category-content.collapsed {
-  max-height: 0;
+.ml-section .code-block {
+    background: rgba(0, 0, 0, 0.4);
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 4px solid #ff6b9d;
+    font-family: 'Courier New', monospace;
+    overflow-x: auto;
 }
 
-.toc-subcategory {
-  margin-bottom: var(--space-12);
+.ml-section .code-block code {
+    color: #64ffda;
+    font-size: 14px;
+    line-height: 1.8;
 }
 
-.toc-subcategory-title {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8);
+/* Topic Section */
+.topic-section {
+    margin-bottom: 4rem;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.6s ease forwards;
 }
 
-.toc-link.toc-sub {
-  padding: var(--space-8) var(--space-12);
-  font-size: var(--font-size-sm);
-  margin-bottom: var(--space-4);
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.nav-icon {
-  font-size: var(--font-size-xl);
-  margin-right: var(--space-12);
+.topic-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 3px solid #0f3460;
 }
 
-.nav-label {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+.topic-number {
+    display: inline-block;
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
+    padding: 0.3rem 1rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    margin-bottom: 0.8rem;
 }
 
-/* Main Content */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-32);
+.topic-header h2 {
+    font-size: 2.5rem;
+    color: #64ffda;
+    margin-bottom: 0.5rem;
+    text-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
 }
 
-.module {
-  max-width: 1400px;
-  margin: 0 auto;
+.topic-subtitle {
+    color: #a0a0a0;
+    font-size: 1.1rem;
+    font-style: italic;
 }
 
-.module-header {
-  margin-bottom: var(--space-32);
+/* Content Cards */
+.content-card {
+    background: #16213e;
+    padding: 2rem;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 1px solid #0f3460;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.module-header h2 {
-  font-size: var(--font-size-4xl);
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-8);
-  color: var(--color-text);
+.content-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 25px rgba(74, 144, 226, 0.2);
 }
 
-.module-header p {
-  font-size: var(--font-size-lg);
-  color: var(--color-text-secondary);
+.content-card h3 {
+    color: #4a90e2;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
 }
 
-.content-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-  gap: var(--space-24);
+.content-card h4 {
+    margin-top: 1rem;
+    margin-bottom: 0.8rem;
+    font-size: 1.2rem;
 }
 
-.section {
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-card-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-24);
+.content-card p {
+    margin-bottom: 1rem;
+    color: #d0d0d0;
+    line-height: 1.8;
 }
 
-.section h3 {
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-16);
-  color: var(--color-text);
+.content-card ul,
+.content-card ol {
+    margin-left: 2rem;
+    margin-bottom: 1rem;
 }
 
-.section h4 {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-medium);
-  margin-bottom: var(--space-12);
-  color: var(--color-text);
+.content-card li {
+    margin-bottom: 0.5rem;
+    color: #d0d0d0;
 }
 
-.chart-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+/* Callout Boxes */
+.callout-box {
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-bottom: 2rem;
+    border-left: 4px solid;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 
-.chart-section canvas {
-  max-width: 100%;
-  height: auto;
+.callout-header {
+    font-weight: 700;
+    font-size: 1rem;
+    margin-bottom: 0.8rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.full-width {
-  grid-column: 1 / -1;
+.callout-box.insight {
+    background: rgba(100, 255, 218, 0.1);
+    border-left-color: #64ffda;
 }
 
-/* Tables */
-.table-container {
-  overflow-x: auto;
+.callout-box.insight .callout-header {
+    color: #64ffda;
 }
 
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
+.callout-box.warning {
+    background: rgba(255, 107, 107, 0.1);
+    border-left-color: #ff6b6b;
 }
 
-.data-table thead {
-  background-color: var(--color-secondary);
+.callout-box.warning .callout-header {
+    color: #ff6b6b;
 }
 
-.data-table th,
-.data-table td {
-  padding: var(--space-12);
-  text-align: left;
-  border-bottom: 1px solid var(--color-border);
+.callout-box.tip {
+    background: rgba(81, 207, 102, 0.1);
+    border-left-color: #51cf66;
 }
 
-.data-table th {
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-sm);
-  color: var(--color-text);
+.callout-box.tip .callout-header {
+    color: #51cf66;
 }
 
-.data-table td {
-  font-size: var(--font-size-base);
-  color: var(--color-text);
+.callout-box.example {
+    background: rgba(74, 144, 226, 0.1);
+    border-left-color: #4a90e2;
 }
 
-.data-table tbody tr:hover {
-  background-color: var(--color-secondary);
+.callout-box.example .callout-header {
+    color: #4a90e2;
+}
+
+.callout-box p,
+.callout-box ul,
+.callout-box ol {
+    color: #d0d0d0;
+}
+
+/* Formula Cards */
+.formula-card {
+    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
+    padding: 2rem;
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+    border: 2px solid #4a90e2;
+    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.2);
+}
+
+.formula-header {
+    color: #64ffda;
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.formula-main {
+    font-size: 1.8rem;
+    text-align: center;
+    margin: 1.5rem 0;
+    color: #fff;
+    font-family: 'Courier New', monospace;
+}
+
+.formula-symbol {
+    color: #64ffda;
+    font-weight: 700;
+    font-size: 2rem;
+}
+
+.formula-var {
+    color: #64ffda;
+    font-weight: 600;
+}
+
+.formula-fraction {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 0.5rem;
+    vertical-align: middle;
+}
+
+.formula-numerator,
+.formula-denominator {
+    padding: 0.2rem 0.5rem;
+}
+
+.formula-line {
+    width: 100%;
+    height: 2px;
+    background: #fff;
+    margin: 0.2rem 0;
+}
+
+.formula-steps {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.formula-steps p {
+    color: #a0a0a0;
+    margin-bottom: 0.5rem;
+}
+
+.formula-steps ol,
+.formula-steps ul {
+    margin-left: 2rem;
+    color: #d0d0d0;
+}
+
+.formula-steps li {
+    margin-bottom: 0.5rem;
+}
+
+/* Interactive Container */
+.interactive-container {
+    background: #16213e;
+    padding: 2rem;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 2px solid #4a90e2;
+    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.3);
+}
+
+.interactive-container h3 {
+    color: #64ffda;
+    margin-bottom: 1.5rem;
+    text-align: center;
+    font-size: 1.5rem;
+}
+
+.interactive-container canvas {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto 1.5rem;
+    background: #0f3460;
+    border-radius: 8px;
+    border: 1px solid #4a90e2;
 }
 
 /* Controls */
 .controls {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-16);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
 }
 
-.control-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-8);
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    width: 100%;
+    max-width: 600px;
 }
 
-.control-group label {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text);
+.input-group label {
+    color: #64ffda;
+    font-weight: 600;
 }
 
-.control-group input[type="range"] {
-  width: 100%;
-  height: 6px;
-  border-radius: var(--radius-full);
-  background: var(--color-secondary);
-  outline: none;
-  cursor: pointer;
+.form-control {
+    padding: 0.8rem;
+    background: #0f3460;
+    border: 2px solid #4a90e2;
+    border-radius: 8px;
+    color: #e1e1e1;
+    font-size: 1rem;
+    transition: all 0.3s ease;
 }
 
-.control-group input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  cursor: pointer;
+.form-control:focus {
+    outline: none;
+    border-color: #64ffda;
+    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
 }
 
-.control-group input[type="range"]::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  cursor: pointer;
-  border: none;
+.slider-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
 }
 
-.radio-group {
-  display: flex;
-  gap: var(--space-16);
-  flex-wrap: wrap;
+.slider-group label {
+    color: #64ffda;
+    font-weight: 600;
 }
 
-.radio-group label {
-  display: flex;
-  align-items: center;
-  gap: var(--space-6);
-  cursor: pointer;
-  font-size: var(--font-size-base);
+.slider {
+    width: 100%;
+    height: 8px;
+    border-radius: 5px;
+    background: #0f3460;
+    outline: none;
+    -webkit-appearance: none;
 }
 
-.radio-group input[type="radio"] {
-  cursor: pointer;
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #64ffda;
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
+    transition: all 0.3s ease;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    background: #4a90e2;
+    transform: scale(1.2);
+}
+
+.slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #64ffda;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
 }
 
 /* Buttons */
 .btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-10) var(--space-20);
-  border-radius: var(--radius-base);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: all var(--duration-normal) var(--ease-standard);
-  border: none;
-  text-decoration: none;
+    padding: 0.8rem 2rem;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 
-.btn--primary {
-  background: var(--color-primary);
-  color: var(--color-btn-primary-text);
+.btn-primary {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
 }
 
-.btn--primary:hover {
-  background: var(--color-primary-hover);
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
 }
 
-.btn--secondary {
-  background: var(--color-secondary);
-  color: var(--color-text);
+.btn-secondary {
+    background: #0f3460;
+    color: #64ffda;
+    border: 2px solid #4a90e2;
 }
 
-.btn--secondary:hover {
-  background: var(--color-secondary-hover);
+.btn-secondary:hover {
+    background: #16213e;
+    transform: translateY(-2px);
 }
 
-/* Info Cards */
-.info-card {
-  background-color: var(--color-bg-1);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-base);
-  padding: var(--space-16);
-  margin-top: var(--space-16);
+/* Results Display */
+.results {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    width: 100%;
+    margin-top: 1rem;
 }
 
-.info-card h4 {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-8);
+.result-item {
+    background: #0f3460;
+    padding: 1rem;
+    border-radius: 8px;
+    text-align: center;
+    border: 2px solid #4a90e2;
 }
 
-.metric-value {
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-primary);
+.result-label {
+    display: block;
+    color: #64ffda;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
 }
 
-.metric-detail {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-top: var(--space-4);
+.result-item span:last-child {
+    display: block;
+    color: #fff;
+    font-size: 1.5rem;
+    font-weight: 700;
 }
 
-/* Explanation Cards */
-.explanation-card {
-  background-color: var(--color-bg-2);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-base);
-  padding: var(--space-20);
+/* Tables */
+.comparison-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+    background: #0f3460;
+    border-radius: 8px;
+    overflow: hidden;
 }
 
-.explanation-card h4 {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-12);
+.comparison-table thead {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
 }
 
-.explanation-card p {
-  margin-bottom: var(--space-12);
-  line-height: 1.6;
+.comparison-table th,
+.comparison-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid #16213e;
 }
 
-.explanation-card ul {
-  padding-left: var(--space-20);
-  margin-top: var(--space-12);
+.comparison-table th {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    letter-spacing: 1px;
 }
 
-.explanation-card li {
-  margin-bottom: var(--space-8);
-  line-height: 1.6;
+.comparison-table tbody tr {
+    transition: background 0.3s ease;
 }
 
-.formula {
-  font-family: var(--font-family-mono);
-  background-color: var(--color-surface);
-  padding: var(--space-8) var(--space-12);
-  border-radius: var(--radius-sm);
-  display: inline-block;
-  margin: var(--space-8) 0;
-  border: 1px solid var(--color-border);
+.comparison-table tbody tr:hover {
+    background: rgba(74, 144, 226, 0.1);
 }
 
-/* Confusion Matrix */
-.confusion-matrix {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-12);
-  margin-bottom: var(--space-20);
+.comparison-table td {
+    color: #d0d0d0;
 }
 
-.cm-cell {
-  padding: var(--space-20);
-  border-radius: var(--radius-base);
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-8);
+/* Two Column Layout */
+.two-column {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin: 1.5rem 0;
 }
 
-.cm-label {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-secondary);
+.column {
+    background: #0f3460;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 2px solid rgba(74, 144, 226, 0.3);
 }
 
-.cm-value {
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-bold);
+/* Comparison Grid */
+.comparison-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin: 1.5rem 0;
 }
 
-.cm-tn {
-  background-color: var(--color-bg-3);
-  border: 2px solid var(--color-success);
+.comparison-item {
+    background: #0f3460;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border-left: 4px solid #4a90e2;
 }
 
-.cm-tn .cm-value {
-  color: var(--color-success);
+/* Data Tree */
+.data-tree {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    padding: 2rem;
+    margin: 1.5rem 0;
 }
 
-.cm-fp {
-  background-color: var(--color-bg-4);
-  border: 2px solid var(--color-error);
+.tree-level-1,
+.tree-level-2,
+.tree-level-3 {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
-.cm-fp .cm-value {
-  color: var(--color-error);
+.tree-node {
+    padding: 1rem 2rem;
+    background: #0f3460;
+    border: 2px solid #4a90e2;
+    border-radius: 8px;
+    color: #64ffda;
+    font-weight: 600;
+    position: relative;
+    transition: all 0.3s ease;
 }
 
-.cm-fn {
-  background-color: var(--color-bg-4);
-  border: 2px solid var(--color-error);
+.tree-node:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
 }
 
-.cm-fn .cm-value {
-  color: var(--color-error);
+.tree-node.main {
+    font-size: 1.3rem;
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
 }
 
-.cm-tp {
-  background-color: var(--color-bg-3);
-  border: 2px solid var(--color-success);
+.tree-node.categorical {
+    border-color: #64ffda;
 }
 
-.cm-tp .cm-value {
-  color: var(--color-success);
+.tree-node.numerical {
+    border-color: #ff6b6b;
 }
 
-/* Metrics Panel */
-.metrics-panel {
-  display: flex;
-  gap: var(--space-20);
-  flex-wrap: wrap;
-  margin-top: var(--space-16);
+/* Use Case List */
+.use-case-list {
+    list-style: none;
+    margin-left: 0;
 }
 
-.metric-item {
-  flex: 1;
-  min-width: 150px;
-  padding: var(--space-12);
-  background-color: var(--color-secondary);
-  border-radius: var(--radius-base);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
+.use-case-list li {
+    padding: 1rem;
+    margin-bottom: 1rem;
+    background: #0f3460;
+    border-radius: 8px;
+    border-left: 4px solid #4a90e2;
+    transition: all 0.3s ease;
 }
 
-.metric-label {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+.use-case-list li:hover {
+    transform: translateX(5px);
+    border-left-color: #64ffda;
 }
 
-.metric-val {
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text);
+/* Example Solution */
+.example-solution {
+    background: #0f3460;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin-top: 1rem;
+    font-family: 'Courier New', monospace;
 }
 
-/* Three Charts Layout */
-.three-charts {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-20);
-  width: 100%;
+.example-solution p {
+    margin-bottom: 0.8rem;
+    color: #d0d0d0;
 }
 
-.chart-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-12);
+.example-solution strong {
+    color: #64ffda;
 }
 
-.chart-container h4 {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  text-align: center;
+/* Summary Card */
+.summary-card {
+    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
+    padding: 2rem;
+    border-radius: 12px;
+    border: 2px solid #64ffda;
+    box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3);
+    margin-bottom: 2rem;
 }
 
-.chart-desc {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  text-align: center;
-  margin-top: var(--space-8);
+.summary-card h3 {
+    color: #64ffda;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    text-align: center;
 }
 
-/* Calculation Panel */
-.calculation-panel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-12);
+.summary-card ul {
+    list-style: none;
+    margin-left: 0;
 }
 
-.calc-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-12);
-  background-color: var(--color-secondary);
-  border-radius: var(--radius-base);
+.summary-card li {
+    padding: 0.8rem;
+    margin-bottom: 0.8rem;
+    background: rgba(100, 255, 218, 0.05);
+    border-radius: 6px;
+    border-left: 3px solid #64ffda;
+    color: #d0d0d0;
 }
 
-.calc-item strong {
-  font-weight: var(--font-weight-medium);
+.summary-card li::before {
+    content: "✓";
+    color: #64ffda;
+    font-weight: 700;
+    margin-right: 0.8rem;
 }
 
-.calc-item span {
-  font-family: var(--font-family-mono);
-  color: var(--color-primary);
-  font-weight: var(--font-weight-semibold);
+/* Data Examples Table */
+.data-examples-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
 }
 
-/* Responsive adjustments */
-@media (max-width: 1200px) {
-  .content-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .three-charts {
-    grid-template-columns: 1fr;
-  }
+.data-examples-table th,
+.data-examples-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
 }
 
-/* Pipeline Flow */
-.pipeline-flow {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--space-16);
+.data-examples-table th {
+    background: rgba(74, 144, 226, 0.2);
+    color: #64ffda;
+    font-weight: 600;
 }
 
-.pipeline-stage {
-  background: var(--color-bg-1);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-base);
-  padding: var(--space-16);
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .subject-tabs {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    
+    .subject-tab {
+        font-size: 0.8rem;
+        padding: 0.5rem 1rem;
+    }
+    .main-container {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: static;
+        transform: translateX(-100%);
+    }
+
+    .sidebar.active {
+        transform: translateX(0);
+    }
+
+    .mobile-menu-btn {
+        display: flex;
+    }
+
+    .content {
+        padding: 2rem 1.5rem;
+    }
+
+    .topic-header h2 {
+        font-size: 2rem;
+    }
+
+    .two-column {
+        grid-template-columns: 1fr;
+    }
 }
 
-.pipeline-stage h4 {
-  font-size: var(--font-size-base);
-  margin-bottom: var(--space-12);
-  color: var(--color-primary);
+@media (max-width: 768px) {
+    .course-title {
+        font-size: 1.3rem;
+    }
+
+    .content {
+        padding: 1.5rem 1rem;
+    }
+
+    .topic-header h2 {
+        font-size: 1.6rem;
+    }
+
+    .formula-main {
+        font-size: 1.3rem;
+    }
+
+    .comparison-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .results {
+        grid-template-columns: 1fr;
+    }
+
+    .interactive-container canvas {
+        max-width: 100%;
+        height: auto;
+    }
 }
 
-/* Workflow Container */
-.workflow-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--space-16);
-  padding: var(--space-24);
+/* Worked Example Section Styles */
+.worked-example-section {
+    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
+    border-radius: 12px;
+    padding: 30px;
+    margin: 40px 0;
+    border-left: 5px solid #64ffda;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
 }
 
-.workflow-stage {
-  flex: 1;
-  min-width: 140px;
-  background: var(--color-bg-1);
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-20);
-  text-align: center;
-  transition: all var(--duration-normal) var(--ease-standard);
-  cursor: pointer;
+.example-problem {
+    background: rgba(255,255,255,0.08);
+    padding: 25px;
+    border-radius: 10px;
+    margin-bottom: 30px;
+    border: 2px solid #64ffda;
 }
 
-.workflow-stage:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
-  border-color: var(--color-primary);
+.problem-statement {
+    font-size: 19px;
+    font-weight: 600;
+    color: #64ffda;
+    line-height: 1.6;
 }
 
-.workflow-stage.active {
-  background: var(--color-primary);
-  color: var(--color-btn-primary-text);
-  border-color: var(--color-primary);
+.solution-step {
+    display: flex;
+    gap: 20px;
+    margin: 25px 0;
+    padding: 25px;
+    background: rgba(0,0,0,0.3);
+    border-radius: 10px;
+    border-left: 4px solid #4a90e2;
+    transition: all 0.3s ease;
 }
 
-.stage-icon {
-  font-size: 32px;
-  margin-bottom: var(--space-8);
+.solution-step:hover {
+    background: rgba(0,0,0,0.4);
+    border-left-width: 6px;
+    transform: translateX(5px);
 }
 
-.workflow-stage h4 {
-  font-size: var(--font-size-base);
-  margin-bottom: var(--space-8);
+.step-number {
+    font-weight: 700;
+    color: #64ffda;
+    font-size: 20px;
+    min-width: 90px;
+    flex-shrink: 0;
 }
 
-.workflow-stage p {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-12);
+.step-content {
+    flex: 1;
 }
 
-.workflow-stage.active p {
-  color: var(--color-btn-primary-text);
-  opacity: 0.9;
+.step-description {
+    font-size: 16px;
+    font-weight: 600;
+    color: #fff;
+    margin-bottom: 12px;
 }
 
-.workflow-arrow {
-  font-size: 24px;
-  color: var(--color-primary);
-  font-weight: bold;
+.step-work {
+    background: rgba(0,0,0,0.4);
+    padding: 18px;
+    border-radius: 8px;
+    margin: 12px 0;
+    font-family: 'Courier New', monospace;
+    border-left: 3px solid #ff6b6b;
+    overflow-x: auto;
 }
 
-.stage-btn {
-  font-size: var(--font-size-sm);
-  padding: var(--space-6) var(--space-12);
+.step-work code {
+    display: block;
+    color: #e1e1e1;
+    font-size: 14px;
+    line-height: 1.8;
+    margin: 4px 0;
 }
 
-@media (max-width: 1200px) {
-  .workflow-container {
-    flex-direction: column;
-  }
-  
-  .workflow-arrow {
-    transform: rotate(90deg);
-  }
+.step-explanation {
+    font-style: italic;
+    color: #a0a0a0;
+    font-size: 14px;
+    margin-top: 10px;
 }
 
-@media (max-width: 768px) {
-  .sidebar {
-    width: 80px;
-  }
-  
-  .nav-label {
-    display: none;
-  }
-  
-  .sidebar-header h1 {
-    font-size: var(--font-size-lg);
-  }
-  
-  .sidebar-header p {
-    display: none;
-  }
+.calculation-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 15px 0;
+    background: rgba(0,0,0,0.2);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.calculation-table th,
+.calculation-table td {
+    padding: 12px;
+    border: 1px solid rgba(255,255,255,0.1);
+    text-align: center;
+}
+
+.calculation-table th {
+    background: #4a90e2;
+    font-weight: 600;
+    color: #fff;
+}
+
+.calculation-table tbody tr:hover {
+    background: rgba(100, 255, 218, 0.1);
+}
+
+.final-answer {
+    background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
+    padding: 25px;
+    border-radius: 10px;
+    margin-top: 30px;
+    text-align: center;
+    font-size: 18px;
+    box-shadow: 0 4px 12px rgba(81,207,102,0.3);
+}
+
+.answer-highlight {
+    font-weight: 700;
+    font-size: 24px;
+    color: white;
+    display: block;
+    margin-top: 12px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.verification {
+    background: rgba(100, 255, 218, 0.1);
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 4px solid #51cf66;
+    margin-top: 20px;
+}
+
+.verification strong {
+    color: #51cf66;
+    font-size: 16px;
+}
+
+.verification p {
+    color: #d0d0d0;
+    margin-top: 10px;
+    line-height: 1.6;
+}
+
+.practice-problems {
+    background: rgba(74, 144, 226, 0.1);
+    padding: 25px;
+    border-radius: 10px;
+    margin-top: 30px;
+    border: 2px solid #4a90e2;
+}
+
+.practice-problems h4 {
+    color: #64ffda;
+    margin-bottom: 15px;
+    font-size: 18px;
+}
+
+.practice-problems ol {
+    margin: 15px 0 15px 25px;
+    color: #d0d0d0;
+}
+
+.practice-problems li {
+    margin-bottom: 10px;
+    line-height: 1.6;
+}
+
+.show-answers-btn {
+    background: #4a90e2;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 600;
+    margin: 10px 0;
+    transition: all 0.3s ease;
+}
+
+.show-answers-btn:hover {
+    background: #64ffda;
+    color: #1a1a2e;
+    transform: translateY(-2px);
+}
+
+.practice-answers {
+    background: rgba(0,0,0,0.3);
+    padding: 20px;
+    border-radius: 8px;
+    margin-top: 15px;
+    border-left: 4px solid #51cf66;
+}
+
+.practice-answers p strong {
+    color: #51cf66;
+}
+
+.practice-answers ol {
+    margin-left: 25px;
+    color: #e1e1e1;
+}
+
+/* Animations */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.pulse {
+    animation: pulse 2s ease-in-out infinite;
+}
+
+/* Loading State */
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(100, 255, 218, 0.3);
+    border-radius: 50%;
+    border-top-color: #64ffda;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Smooth Transitions */
+* {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }