diff --git a/README.md b/README.md
index c739157..e4b437c 100644
--- a/README.md
+++ b/README.md
@@ -1185,6 +1185,12 @@ These standalone Python project files do not have a browser counterpart yet and
     </td>
   </tr>
   <tr>
+    <td align="center" width="120">
+      <a href="https://github.com/yughpatel">
+        <img src="https://github.com/yughpatel.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="yughpatel" /><br />
+        <sub><b>@yughpatel</b></sub>
+      </a>
+    </td>
     <td align="center" width="120">
       <a href="https://github.com/yuvraj-k-singh">
         <img src="https://github.com/yuvraj-k-singh.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="yuvraj-k-singh" /><br />
@@ -1195,7 +1201,6 @@ These standalone Python project files do not have a browser counterpart yet and
     <td width="120"></td>
     <td width="120"></td>
     <td width="120"></td>
-    <td width="120"></td>
   </tr>
 </table>
 <!-- CONTRIBUTORS_END -->
diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index e3f18e4..c92534e 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -6760,3 +6760,188 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer button {
   border-color: var(--danger);
   color: var(--danger);
 }
+}
+
+/* ============================================
+   FIX: Coordinate to Polar Convert Button - GREEN GLOW
+   ============================================ */
+.coord-actions .btn-primary#convertCoordinateBtn {
+    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
+    color: #ffffff !important;
+    border: none !important;
+    padding: 16px 44px !important;
+    border-radius: 50px !important;
+    cursor: pointer !important;
+    font-size: 1.1rem !important;
+    font-weight: 700 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 0 30px rgba(34, 197, 94, 0.35), 0 4px 20px rgba(34, 197, 94, 0.25) !important;
+    min-width: 180px !important;
+    height: auto !important;
+    line-height: 1.5 !important;
+    letter-spacing: 0.5px !important;
+    text-transform: none !important;
+    font-family: 'Space Grotesk', system-ui, sans-serif !important;
+}
+
+.coord-actions .btn-primary#convertCoordinateBtn:hover {
+    transform: translateY(-4px) !important;
+    box-shadow: 0 0 50px rgba(34, 197, 94, 0.5), 0 8px 35px rgba(34, 197, 94, 0.4) !important;
+    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
+    color: #ffffff !important;
+}
+
+.coord-actions .btn-primary#convertCoordinateBtn:active {
+    transform: scale(0.95) !important;
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
+}
+
+/* ============================================
+   FIX: AP/GP/AGP/HP Recognizer - Recognize Button - GREEN GLOW
+   ============================================ */
+#recognizeProgressionBtn {
+    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
+    color: #ffffff !important;
+    border: none !important;
+    padding: 16px 48px !important;
+    border-radius: 50px !important;
+    cursor: pointer !important;
+    font-size: 1.1rem !important;
+    font-weight: 700 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 0 30px rgba(34, 197, 94, 0.35), 0 4px 20px rgba(34, 197, 94, 0.25) !important;
+    min-width: 200px !important;
+    letter-spacing: 0.5px !important;
+    font-family: 'Space Grotesk', system-ui, sans-serif !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    line-height: 1.5 !important;
+}
+
+#recognizeProgressionBtn:hover {
+    transform: translateY(-4px) !important;
+    box-shadow: 0 0 50px rgba(34, 197, 94, 0.5), 0 8px 35px rgba(34, 197, 94, 0.4) !important;
+    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
+    color: #ffffff !important;
+}
+
+#recognizeProgressionBtn:active {
+    transform: scale(0.95) !important;
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
+}
+
+/* ============================================
+   FIX: Derivative Calculator - All Buttons - GREEN GLOW (Smaller)
+   ============================================ */
+#calcFirstDerivativeBtn,
+#calcNthDerivativeBtn,
+#evalDerivativeBtn {
+    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
+    color: #ffffff !important;
+    border: none !important;
+    padding: 10px 22px !important;
+    border-radius: 50px !important;
+    cursor: pointer !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(34, 197, 94, 0.2) !important;
+    min-width: 120px !important;
+    letter-spacing: 0.3px !important;
+    font-family: 'Space Grotesk', system-ui, sans-serif !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    line-height: 1.5 !important;
+}
+
+#calcFirstDerivativeBtn:hover,
+#calcNthDerivativeBtn:hover,
+#evalDerivativeBtn:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 0 35px rgba(34, 197, 94, 0.5), 0 8px 25px rgba(34, 197, 94, 0.4) !important;
+    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
+    color: #ffffff !important;
+}
+
+#calcFirstDerivativeBtn:active,
+#calcNthDerivativeBtn:active,
+#evalDerivativeBtn:active {
+    transform: scale(0.95) !important;
+    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
+}
+
+/* ============================================
+   FIX: Fibonacci Series - Generate Button - GREEN GLOW (Smaller)
+   ============================================ */
+#generateFib {
+    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
+    color: #ffffff !important;
+    border: none !important;
+    padding: 10px 28px !important;
+    border-radius: 50px !important;
+    cursor: pointer !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(34, 197, 94, 0.2) !important;
+    min-width: 120px !important;
+    letter-spacing: 0.3px !important;
+    font-family: 'Space Grotesk', system-ui, sans-serif !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    line-height: 1.5 !important;
+}
+
+#generateFib:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 0 35px rgba(34, 197, 94, 0.5), 0 8px 25px rgba(34, 197, 94, 0.4) !important;
+    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
+    color: #ffffff !important;
+}
+
+#generateFib:active {
+    transform: scale(0.95) !important;
+    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
+}
+
+/* ============================================
+   FIX: Pascal's Triangle - Generate Button - GREEN GLOW
+   ============================================ */
+#generatePascal {
+    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
+    color: #ffffff !important;
+    border: none !important;
+    padding: 12px 28px !important;
+    border-radius: 50px !important;
+    cursor: pointer !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(34, 197, 94, 0.2) !important;
+    min-width: 120px !important;
+    letter-spacing: 0.3px !important;
+    font-family: 'Space Grotesk', system-ui, sans-serif !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    line-height: 1.5 !important;
+}
+
+#generatePascal:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 0 35px rgba(34, 197, 94, 0.5), 0 8px 25px rgba(34, 197, 94, 0.4) !important;
+    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
+    color: #ffffff !important;
+}
+
+#generatePascal:active {
+    transform: scale(0.95) !important;
+    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
+}
\ No newline at end of file
diff --git a/web-app/js/projects/coordinate-polar-transform.js b/web-app/js/projects/coordinate-polar-transform.js
index c50a364..2de8950 100644
--- a/web-app/js/projects/coordinate-polar-transform.js
+++ b/web-app/js/projects/coordinate-polar-transform.js
@@ -31,7 +31,7 @@ function getCoordinatePolarTransformHTML() {
             </div>
         </div>
 
-        <style>
+         <style>
             .coord-polar-container {
                 text-align: center;
                 padding: 1.5rem;
@@ -79,42 +79,16 @@ function getCoordinatePolarTransformHTML() {
                 color: var(--primary-color);
                 min-height: 1.3rem;
             }
-            #cartesianX{
-                padding:15px;
-                border-radius:30px;
-                outline:none;
-                background-color:var(--bg-color);
-                border:1px solid white;
-                color: var(--text-color);
-            }
-            #cartesianY{
-                padding:15px;
-                border-radius:30px;
-                outline:none;
-                background-color:var(--bg-color);
-                border:1px solid white;
-                color: var(--text-color);
-            }
-            .btn-primary {
-                background: var(--primary-color);
-                color: white;
-                border: none;
-                padding: 12px 28px;
-                border-radius: 30px;
-                cursor: pointer;
-                font-weight: 600;
-                font-size: 1rem;
-                transition: all 0.2s ease;
-            }
 
-            .btn-primary:hover {
-                transform: translateY(-2px);
-                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-                filter: brightness(1.05);
-            }
-
-            .btn-primary:active {
-                transform: translateY(0);
+            #cartesianX,
+            #cartesianY {
+                padding: 15px;
+                border-radius: 30px;
+                outline: none;
+                background-color: var(--bg-color);
+                border: 1px solid white;
+                color: var(--text-color);
+                width: 100%;
             }
         </style>
     `;
diff --git a/web-app/js/projects/derivative-calculator.js b/web-app/js/projects/derivative-calculator.js
index 55b0c80..9937552 100644
--- a/web-app/js/projects/derivative-calculator.js
+++ b/web-app/js/projects/derivative-calculator.js
@@ -45,11 +45,33 @@ function getDerivativeCalculatorHTML() {
                 line-height: 1.6;
             }
 
+            .control-group {
+                display: flex;
+                flex-direction: column;
+                gap: 0.45rem;
+                text-align: left;
+            }
+
+            .control-group label {
+                font-weight: 600;
+                color: var(--text-secondary);
+            }
+
+            .control-group input {
+                padding: 0.7rem;
+                border: 2px solid var(--border-color);
+                border-radius: 10px;
+                background: var(--surface-color);
+                color: var(--text-primary);
+                font-size: 1rem;
+                width: 100%;
+            }
+
             .derivative-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                 gap: 1rem;
-                margin-top: 1rem;
+                margin: 1rem 0;
             }
 
             .derivative-actions {
@@ -70,37 +92,6 @@ function getDerivativeCalculatorHTML() {
                 min-height: 110px;
                 line-height: 1.7;
             }
-            input {
-                padding: 15px;
-                border-radius: 30px;
-                background-color: var(--bg-color);
-                outline: none;
-                border: 1px solid var(--border-color);
-                color: var(--text-color);
-                width: 100%;
-            }
-
-            button {
-                background: var(--primary-color);
-                color: white;
-                border: none;
-                padding: 12px 24px;
-                border-radius: 30px;
-                cursor: pointer;
-                font-weight: 600;
-                font-size: 0.95rem;
-                transition: all 0.2s ease;
-            }
-
-            button:hover {
-                transform: translateY(-2px);
-                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-                filter: brightness(1.05);
-            }
-
-            button:active {
-                transform: translateY(0);
-            }
         </style>
     `;
 }
diff --git a/web-app/js/projects/fibonacci.js b/web-app/js/projects/fibonacci.js
index d3fd760..af01c49 100644
--- a/web-app/js/projects/fibonacci.js
+++ b/web-app/js/projects/fibonacci.js
@@ -17,11 +17,45 @@ function getFibonacciHTML() {
             </div>
         </div>
         
-        <style>
+           <style>
             .fibonacci-container {
                 padding: 2rem;
                 text-align: center;
             }
+
+            .controls {
+                display: flex;
+                gap: 15px;
+                align-items: center;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+
+            .controls label {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 1rem;
+                font-weight: 500;
+                color: var(--text-secondary);
+            }
+
+            #fibTerms {
+                padding: 12px 16px;
+                background-color: var(--bg-color);
+                color: var(--text-color);
+                border: 2px solid var(--border-color);
+                outline: none;
+                border-radius: 30px;
+                width: 80px;
+                text-align: center;
+                font-size: 1rem;
+                transition: border-color 0.3s ease;
+            }
+
+            #fibTerms:focus {
+                border-color: var(--accent);
+            }
             
             .fib-display {
                 display: flex;
@@ -48,45 +82,11 @@ function getFibonacciHTML() {
                 max-width: 100%;
                 height: auto;
             }
-            #fibTerms{
-                padding:13px;
-                background-color:var(--bg-color);
-                color: var(--text-color);
-                border:1px solid var(--text-color);
-                outline:none;
-                border-radius:30px;
-            }
-            .controls{
-                display:flex;
-                gap:15px;
-                align-items:center;
-                justify-content:center;
-            }
-            .fib-error{
-                color:red;
-                font-weight:bold;
-                margin-top:1rem;
-            }
-            .btn-generate {
-                background: var(--primary-color);
-                color: white;
-                border: none;
-                padding: 12px 28px;
-                border-radius: 30px;
-                cursor: pointer;
-                font-weight: 600;
-                font-size: 1rem;
-                transition: all 0.2s ease;
-            }
 
-            .btn-generate:hover {
-                transform: translateY(-2px);
-                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-                filter: brightness(1.05);
-            }
-
-            .btn-generate:active {
-                transform: translateY(0);
+            .fib-error {
+                color: var(--danger-color);
+                font-weight: bold;
+                margin-top: 1rem;
             }
         </style>
     `;
diff --git a/web-app/js/projects/pascal-triangle.js b/web-app/js/projects/pascal-triangle.js
index 943df7b..faf94c8 100644
--- a/web-app/js/projects/pascal-triangle.js
+++ b/web-app/js/projects/pascal-triangle.js
@@ -53,312 +53,272 @@ function getPascalTriangleHTML() {
             </div>
         </div>
         
-        <style>
-            /* Layout & Grid Grid system */
-            .pascal-grid {
-                display: grid;
-                grid-template-columns: 280px 1fr;
-                gap: 1rem;
-                align-items: start;
-                max-width: 950px;
-                margin: 0 auto;
-                padding: 0.25rem;
-            }
-            
-            /* Sidebar Styling */
-            .pascal-sidebar {
-                background: rgba(255, 255, 255, 0.03);
-                backdrop-filter: blur(10px);
-                border: 1px solid rgba(255, 255, 255, 0.06);
-                border-radius: 12px;
-                padding: 1rem;
-                display: flex;
-                flex-direction: column;
-                gap: 0.8rem;
-                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            }
-            
-            .pascal-header h2 {
-                margin: 0 0 0.25rem 0;
-                font-size: 1.15rem;
-                font-weight: 700;
-                color: var(--text);
-            }
-            
-            .pascal-desc {
-                margin: 0;
-                font-size: 0.78rem;
-                color: var(--text-secondary);
-                line-height: 1.3;
-            }
-            
-            .sidebar-section {
-                display: flex;
-                flex-direction: column;
-                gap: 0.4rem;
-                border-top: 1px solid rgba(255, 255, 255, 0.08);
-                padding-top: 0.75rem;
-            }
-            
-            .section-label {
-                font-size: 0.68rem;
-                text-transform: uppercase;
-                letter-spacing: 0.08em;
-                color: var(--text-secondary);
-                opacity: 0.8;
-                font-weight: 700;
-            }
-            
-            .controls-group {
-                display: flex;
-                flex-direction: column;
-                gap: 0.3rem;
-            }
-            
-            .controls-group label {
-                font-size: 0.72rem;
-                color: var(--text-secondary);
-                font-weight: 500;
-            }
-            
-            .input-with-btn {
-                display: flex;
-                gap: 0.4rem;
-            }
-            
-            .input-with-btn input {
-                flex: 1;
-                padding: 0.45rem;
-                font-size: 0.9rem;
-                border: 1.5px solid var(--border);
-                border-radius: 6px;
-                background: var(--surface-light);
-                color: var(--text);
-                text-align: center;
-                outline: none;
-                font-weight: bold;
-                transition: border-color 0.2s;
-            }
-            
-            .input-with-btn input:focus {
-                border-color: var(--accent);
-            }
-            
-            .btn-generate {
-                background: var(--accent);
-                color: white;
-                border: none;
-                padding: 0.45rem 0.85rem;
-                border-radius: 6px;
-                cursor: pointer;
-                font-size: 0.85rem;
-                font-weight: 700;
-                transition: all 0.2s ease;
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-            }
-            
-            .btn-generate:hover {
-                background: var(--accent-hover, #15805d);
-                transform: translateY(-1px);
-            }
-            
-            /* Mode Buttons Vertical */
-            .mode-buttons-vertical {
-                display: flex;
-                flex-direction: column;
-                gap: 0.35rem;
-            }
-            
-            .btn-mode {
-                padding: 8px 10px;
-                border-radius: 6px;
-                border: 1px solid rgba(255, 255, 255, 0.05);
-                background: rgba(255, 255, 255, 0.02);
-                color: var(--text);
-                cursor: pointer;
-                font-size: 0.78rem;
-                font-weight: 600;
-                text-align: left;
-                transition: all 0.2s ease;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-            }
-            
-            .btn-mode:hover {
-                background: rgba(255, 255, 255, 0.07);
-            }
-            
-            .btn-mode.active {
-                background: var(--accent-soft);
-                color: var(--accent);
-                border-color: var(--border-accent);
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            }
-            
-            /* Legend styling */
-            .pascal-legend {
-                display: flex;
-                gap: 0.6rem;
-                flex-wrap: wrap;
-                color: var(--text-secondary);
-            }
-            
-            /* Info Box styling */
-            .pascal-info {
-                font-size: 0.78rem;
-                color: var(--text);
-                line-height: 1.35;
-                font-style: italic;
-                font-weight: 500;
-                min-height: auto;
-            }
-            
-            /* Interactive Display Styling - Extremely Compact */
-            .pascal-display-container {
-                background: rgba(0, 0, 0, 0.2);
-                border: 1px solid rgba(255, 255, 255, 0.04);
-                border-radius: 12px;
-                padding: 2.25rem 0.75rem 0.75rem; /* extra top padding for zoom button */
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                min-height: 320px;
-                overflow: auto;
-                box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
-                position: relative;
-            }
-            
-            .btn-zoom {
-                position: absolute;
-                top: 8px;
-                right: 8px;
-                background: rgba(255, 255, 255, 0.06);
-                border: 1px solid rgba(255, 255, 255, 0.1);
-                color: var(--text-secondary);
-                padding: 5px 10px;
-                border-radius: 6px;
-                font-size: 0.72rem;
-                font-weight: 600;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                gap: 4px;
-                z-index: 20;
-                transition: all 0.2s ease;
-            }
-            
-            .btn-zoom:hover {
-                background: var(--accent-soft);
-                color: var(--accent);
-                border-color: var(--border-accent);
-            }
-            
-            /* Zoom active state */
-            .pascal-grid.zoom-active {
-                grid-template-columns: 1fr;
-            }
-            
-            .pascal-grid.zoom-active .pascal-sidebar {
-                display: none;
-            }
-            
-            .pascal-grid.zoom-active .pascal-display-container {
-                min-height: 480px;
-                height: 65vh;
-            }
-            
-            .pascal-display {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                margin: auto;
-            }
-            
-            .pascal-row {
-                display: flex;
-                gap: 2px;
-                align-items: center;
-            }
-            
-            /* Honeycomb vertical interlocking */
-            .pascal-row + .pascal-row {
-                margin-top: calc(var(--hex-size, 40px) * -0.28);
-            }
-            
-            /* Hexagon Shapes */
-            .hexagon {
-                width: var(--hex-size, 40px);
-                height: calc(var(--hex-size, 40px) * 1.15);
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: z-index 0.2s ease;
-            }
-            
-            .hexagon-inner {
-                width: 100%;
-                height: 100%;
-                position: relative;
-                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-                background: var(--hex-color, #1D9E75);
-                transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-weight: 700;
-                font-family: monospace;
-                color: white;
-                animation: fadeIn 0.4s ease forwards;
-                box-sizing: border-box;
-                padding: 2px;
-            }
-            
-            .hexagon:hover {
-                z-index: 15;
-            }
-            
-            .hexagon:hover .hexagon-inner {
-                transform: scale(1.22);
-                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-                cursor: pointer;
-            }
-            
-            /* Responsive layout break */
-            @media (max-width: 768px) {
-                .pascal-grid {
-                    grid-template-columns: 1fr;
-                    gap: 1rem;
-                }
-                .pascal-display-container {
-                    min-height: 300px;
-                    padding: 0.75rem 0.5rem;
-                }
-            }
-            .btn-generate {
-                background: var(--accent, #22c55e);
-                color: white;
-                border: none;
-                padding: 0.55rem 1rem;
-                border-radius: 6px;
-                cursor: pointer;
-                font-size: 0.85rem;
-                font-weight: 700;
-                transition: all 0.2s ease;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            }
-
-            .btn-generate:hover {
-                background: var(--accent-hover, #16a34a);
-                transform: translateY(-2px);
-                box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3);
-            }
-
-            .btn-generate:active {
-                transform: translateY(0);
-            }
-        </style>
+       <style>
+    /* Layout & Grid Grid system */
+    .pascal-grid {
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 1rem;
+        align-items: start;
+        max-width: 950px;
+        margin: 0 auto;
+        padding: 0.25rem;
+    }
+    
+    /* Sidebar Styling */
+    .pascal-sidebar {
+        background: rgba(255, 255, 255, 0.03);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 12px;
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.8rem;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    }
+    
+    .pascal-header h2 {
+        margin: 0 0 0.25rem 0;
+        font-size: 1.15rem;
+        font-weight: 700;
+        color: var(--text);
+    }
+    
+    .pascal-desc {
+        margin: 0;
+        font-size: 0.78rem;
+        color: var(--text-secondary);
+        line-height: 1.3;
+    }
+    
+    .sidebar-section {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+        padding-top: 0.75rem;
+    }
+    
+    .section-label {
+        font-size: 0.68rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: var(--text-secondary);
+        opacity: 0.8;
+        font-weight: 700;
+    }
+    
+    .controls-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.3rem;
+    }
+    
+    .controls-group label {
+        font-size: 0.72rem;
+        color: var(--text-secondary);
+        font-weight: 500;
+    }
+    
+    .input-with-btn {
+        display: flex;
+        gap: 0.4rem;
+    }
+    
+    .input-with-btn input {
+        flex: 1;
+        padding: 0.45rem;
+        font-size: 0.9rem;
+        border: 1.5px solid var(--border);
+        border-radius: 6px;
+        background: var(--surface-light);
+        color: var(--text);
+        text-align: center;
+        outline: none;
+        font-weight: bold;
+        transition: border-color 0.2s;
+    }
+    
+    .input-with-btn input:focus {
+        border-color: var(--accent);
+    }
+    
+    /* Mode Buttons Vertical */
+    .mode-buttons-vertical {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+    }
+    
+    .btn-mode {
+        padding: 8px 10px;
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        background: rgba(255, 255, 255, 0.02);
+        color: var(--text);
+        cursor: pointer;
+        font-size: 0.78rem;
+        font-weight: 600;
+        text-align: left;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    
+    .btn-mode:hover {
+        background: rgba(255, 255, 255, 0.07);
+    }
+    
+    .btn-mode.active {
+        background: var(--accent-soft);
+        color: var(--accent);
+        border-color: var(--border-accent);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Legend styling */
+    .pascal-legend {
+        display: flex;
+        gap: 0.6rem;
+        flex-wrap: wrap;
+        color: var(--text-secondary);
+    }
+    
+    /* Info Box styling */
+    .pascal-info {
+        font-size: 0.78rem;
+        color: var(--text);
+        line-height: 1.35;
+        font-style: italic;
+        font-weight: 500;
+        min-height: auto;
+    }
+    
+    /* Interactive Display Styling - Extremely Compact */
+    .pascal-display-container {
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.04);
+        border-radius: 12px;
+        padding: 2.25rem 0.75rem 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 320px;
+        overflow: auto;
+        box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
+        position: relative;
+    }
+    
+    .btn-zoom {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: rgba(255, 255, 255, 0.06);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: var(--text-secondary);
+        padding: 5px 10px;
+        border-radius: 6px;
+        font-size: 0.72rem;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        z-index: 20;
+        transition: all 0.2s ease;
+    }
+    
+    .btn-zoom:hover {
+        background: var(--accent-soft);
+        color: var(--accent);
+        border-color: var(--border-accent);
+    }
+    
+    /* Zoom active state */
+    .pascal-grid.zoom-active {
+        grid-template-columns: 1fr;
+    }
+    
+    .pascal-grid.zoom-active .pascal-sidebar {
+        display: none;
+    }
+    
+    .pascal-grid.zoom-active .pascal-display-container {
+        min-height: 480px;
+        height: 65vh;
+    }
+    
+    .pascal-display {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: auto;
+    }
+    
+    .pascal-row {
+        display: flex;
+        gap: 2px;
+        align-items: center;
+    }
+    
+    /* Honeycomb vertical interlocking */
+    .pascal-row + .pascal-row {
+        margin-top: calc(var(--hex-size, 40px) * -0.28);
+    }
+    
+    /* Hexagon Shapes */
+    .hexagon {
+        width: var(--hex-size, 40px);
+        height: calc(var(--hex-size, 40px) * 1.15);
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: z-index 0.2s ease;
+    }
+    
+    .hexagon-inner {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+        background: var(--hex-color, #1D9E75);
+        transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-family: monospace;
+        color: white;
+        animation: fadeIn 0.4s ease forwards;
+        box-sizing: border-box;
+        padding: 2px;
+    }
+    
+    .hexagon:hover {
+        z-index: 15;
+    }
+    
+    .hexagon:hover .hexagon-inner {
+        transform: scale(1.22);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+    }
+    
+    /* Responsive layout break */
+    @media (max-width: 768px) {
+        .pascal-grid {
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }
+        .pascal-display-container {
+            min-height: 300px;
+            padding: 0.75rem 0.5rem;
+        }
+    }
+</style>
     `;
 }
 
diff --git a/web-app/js/projects/progression-recognizer.js b/web-app/js/projects/progression-recognizer.js
index 7c24a3b..afea566 100644
--- a/web-app/js/projects/progression-recognizer.js
+++ b/web-app/js/projects/progression-recognizer.js
@@ -21,7 +21,7 @@ function getProgressionRecognizerHTML() {
             </div>
         </div>
 
-        <style>
+         <style>
             .progression-container {
                 text-align: center;
                 padding: 1.5rem;
@@ -55,10 +55,13 @@ function getProgressionRecognizerHTML() {
                 background: var(--surface-color);
                 color: var(--text-primary);
                 font-size: 1rem;
+                width: 100%;
             }
 
             .progression-actions {
-                margin: 1rem 0;
+                margin: 1.5rem 0;
+                display: flex;
+                justify-content: center;
             }
 
             .progression-output {
@@ -71,10 +74,6 @@ function getProgressionRecognizerHTML() {
                 white-space: pre-line;
                 min-height: 90px;
             }
-            .btn-primary{
-                padding:15px;
-                border-radius:30px;
-            }
         </style>
     `;
 }