highlight: inline equation layout with responsive stacked fallback

- From and result now on one line: '1.00 Units = 0.09 OtherUnits'
- Same font size and color for both sides (pico-color, 600 weight)
- Container query switches to over-under at <420px with '= ' prefix on result line
- Separator '=' shown inline; muted color/normal weight to visually anchor the equation
- Removed old two-tier font sizing (small grey from, large blue result)

src/app.css

@@ -95,25 +95,56 @@
   overflow: hidden;
   transition: border-color 0.2s ease;
   text-align: center;
+  container-type: inline-size;
 }
 
 .highlighted-result.has-highlight {
   border-color: var(--pico-primary);
 }
 
-.highlighted-equation-from {
+/* Equation row: inline on wide screens, over-under on narrow */
-  font-size: clamp(0.85rem, 2vw, 1.1rem);
+.highlighted-equation {
-  color: var(--color-text-muted, #888880);
+  display: flex;
-  font-variant-numeric: tabular-nums;
+  flex-direction: row;
-}
+  align-items: center;
-
+  justify-content: center;
-.highlighted-equation-equals {
+  flex-wrap: nowrap;
-  font-size: clamp(1.2rem, 3.5vw, 2rem);
+  gap: 0.4em;
-  font-weight: 700;
+  font-size: clamp(1rem, 2.5cqi, 1.5rem);
-  color: var(--pico-primary);
+  font-weight: 600;
   font-variant-numeric: tabular-nums;
+  color: var(--pico-color);
   word-break: break-all;
   text-align: center;
+  max-width: 100%;
+}
+
+/* Switch to stacked layout when the container gets tight */
+@container (max-width: 420px) {
+  .highlighted-equation {
+    flex-direction: column;
+    gap: 0.15em;
+  }
+
+  .highlighted-eq-sep {
+    display: none;
+  }
+
+  .highlighted-eq-to::before {
+    content: '= ';
+    color: var(--pico-muted-color, #888880);
+    font-weight: 400;
+  }
+}
+
+.highlighted-eq-from,
+.highlighted-eq-to {
+  /* same size, same color — both use the container-relative font above */
+}
+
+.highlighted-eq-sep {
+  color: var(--pico-muted-color, #888880);
+  font-weight: 400;
 }
 
 .highlighted-symbol {

src/routes/+page.svelte

@@ -112,8 +112,11 @@
 <div class="highlighted-result" class:has-highlight={highlightedResult !== null} aria-live="polite">
   {#if highlightedResult !== null}
     <button class="highlight-dismiss" onclick={() => (highlightedUnitId = null)} aria-label="Remove highlight">×</button>
-    <span class="highlighted-equation-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
+    <div class="highlighted-equation">
-    <span class="highlighted-equation-equals">= {formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
+      <span class="highlighted-eq-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
+      <span class="highlighted-eq-sep">=</span>
+      <span class="highlighted-eq-to">{formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
+    </div>
     <span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>
   {:else}
     <span class="highlighted-placeholder">Click a result to highlight it</span>