Fix Query Engine pipeline: add Query chip, fix Execute cutoff

- Add Query as first step: Query → Parse → Optimize → Execute
- Remove p-opt-group wrapper (was causing Execute to be clipped by
  making the flex item as wide as the hidden plan-expand content)
- Move plan-expand back as sibling of query-pipeline inside arch-card
- Add width: fit-content + margin: 0 auto to plan-ops so ops box is
  centered under pipeline when expanded at step 5
- Reduce chip font-size (0.68→0.63em) and padding to fit 4 chips

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: githajae

_layouts/research-interests.html

@@ -49,23 +49,23 @@ <h1 class="ri-title">AI Database Systems</h1>
         <div class="arch-card light">
           <span class="ac-label">Query Engine</span>
           <div class="query-pipeline">
+            <span class="p-chip">Query</span>
+            <span class="p-sep">→</span>
             <span class="p-chip">Parse</span>
             <span class="p-sep">→</span>
-            <div class="p-opt-group">
-              <span class="p-chip p-plan" id="plan-chip">Optimize</span>
-              <!-- Expands at step 5 to reveal what Optimize breaks down into -->
-              <div class="plan-expand" id="sem-chip">
-                <div class="opt-connector"></div>
-                <div class="plan-ops">
-                  <span class="op-chip sem-op">⚡ Semantic Ops</span>
-                  <span class="op-plus">+</span>
-                  <span class="op-chip trad-op">Traditional Ops</span>
-                </div>
-              </div>
-            </div>
+            <span class="p-chip p-plan" id="plan-chip">Optimize</span>
             <span class="p-sep">→</span>
             <span class="p-chip">Execute</span>
           </div>
+          <!-- Expands at step 5: breakdown of the Optimize step -->
+          <div class="plan-expand" id="sem-chip">
+            <div class="opt-connector"></div>
+            <div class="plan-ops">
+              <span class="op-chip sem-op">⚡ Semantic Ops</span>
+              <span class="op-plus">+</span>
+              <span class="op-chip trad-op">Traditional Ops</span>
+            </div>
+          </div>
         </div>
       </div>
 

_sass/custom/_research-interests.scss

@@ -151,34 +151,27 @@ body.page--research-interests #main {
 /* Query engine pipeline */
 .query-pipeline {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 0.2rem;
   flex-wrap: nowrap;
   margin-top: 0.4rem;
 
   .p-sep {
-    font-size: 0.65em;
+    font-size: 0.6em;
     color: rgba(0, 0, 0, 0.25);
-    margin-top: 0.22rem; // align with chip text center
   }
 
   .p-chip {
-    font-size: 0.68em;
+    font-size: 0.63em;
     font-weight: 600;
-    padding: 0.18rem 0.45rem;
+    padding: 0.16rem 0.38rem;
     border-radius: 7px;
     background: rgba(0, 0, 0, 0.06);
     color: #555;
+    white-space: nowrap;
   }
 }
 
-/* Optimize chip + its expand block grouped in a column */
-.p-opt-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 /* Plan chip — highlighted at step 5 */
 .p-plan {
   transition: background-color 0.3s ease, color 0.3s ease;
@@ -218,6 +211,8 @@ body.page--research-interests #main {
     background: rgba(0, 113, 227, 0.05);
     border: 1px dashed rgba(0, 113, 227, 0.3);
     border-radius: 8px;
+    width: fit-content;
+    margin: 0 auto;
   }
 
   .op-chip {