Upd UI

assets/app.js

@@ -54,18 +54,18 @@ document.querySelectorAll('.tab').forEach(btn => {
     const targetDiagram = document.querySelector(target);
     
     if (targetDiagram) {
-      // Hide all diagrams with fade out and update ARIA
+      // Hide all diagrams completely and update ARIA
       document.querySelectorAll('.diagram').forEach(d => {
         d.style.opacity = '0';
         d.style.transform = 'translateY(20px)';
+        d.style.display = 'none';
         d.setAttribute('aria-hidden', 'true');
-        setTimeout(() => {
-          d.classList.remove('visible');
-        }, 150);
+        d.classList.remove('visible');
       });
       
       // Show target diagram with fade in and update ARIA
       setTimeout(() => {
+        targetDiagram.style.display = 'flex';
         targetDiagram.classList.add('visible');
         targetDiagram.style.opacity = '1';
         targetDiagram.style.transform = 'translateY(0)';
@@ -80,6 +80,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const firstTab = document.querySelector('.tab.active');
   const firstDiagram = document.querySelector('.diagram.visible');
   if (firstTab && firstDiagram) {
+    firstDiagram.style.display = 'flex';
     firstDiagram.style.opacity = '1';
     firstDiagram.style.transform = 'translateY(0)';
   }

assets/styles.css

@@ -63,6 +63,21 @@ h2:not(.section-header h2) {
   margin: 0 0 1rem 0;
 }
 
+/* Override any conflicting h2 styles for section headers */
+.section-header h2 {
+  font-size: 3rem !important;
+  font-weight: 800 !important;
+  line-height: 1.2 !important;
+  margin: 0 0 1rem 0 !important;
+  text-align: center !important;
+}
+
+@media (min-width: 1024px) {
+  .section-header h2 {
+    font-size: 4rem !important;
+  }
+}
+
 section {
   padding: 4rem 0;
 }
@@ -374,8 +389,18 @@ section {
   border-radius: 2px;
   animation: pulseGlow 2s ease-in-out infinite;
 }
-.diagram { @apply hidden; }
-.diagram.visible { @apply block; }
+.diagram { 
+  display: none;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.3s ease;
+}
+
+.diagram.visible { 
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
+}
 pre.mermaid { 
   @apply rounded-2xl bg-slate-900/70 border border-white/10 p-4 overflow-auto; 
   text-align: center;