Improve: stable highlight height, equation display format, responsive font sizes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/routes/+page.svelte

@@ -6,7 +6,7 @@
   import { convertById } from '$lib/convert';
   import { FRACTIONAL_DIGITS } from '$lib/config';
   import { formatBig } from '$lib/format';
-  import type { Big } from 'big.js';
+  import Big from 'big.js';
   import type { Unit, ResultItem } from '$lib/types';
   import ConverterCard from '../components/ConverterCard.svelte';
 
@@ -60,6 +60,8 @@
       : null
   );
 
+  let fromUnit = $derived(units.find(u => u.id === fromUnitId) ?? units[0]);
+
   // ── URL sync: update URL only when serialized params actually change ────────
   $effect(() => {
     if (!browser) return;
@@ -107,16 +109,14 @@
   <title>Humor Units — Converter</title>
 </svelte:head>
 
-<div class="highlighted-result" aria-live="polite">
+<div class="highlighted-result" class:has-highlight={highlightedResult !== null} aria-live="polite">
   {#if highlightedResult !== null}
-    <button
-      class="highlight-dismiss"
-      aria-label="Remove highlight"
-      onclick={() => (highlightedUnitId = null)}
-    >×</button>
-    <span class="highlighted-value">{formatBig(highlightedResult.convertedValue)}</span>
-    <span class="highlighted-label">{highlightedResult.unit.labelPlural}</span>
+    <button class="highlight-dismiss" onclick={() => (highlightedUnitId = null)} aria-label="Remove highlight">×</button>
+    <span class="highlighted-equation-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
+    <span class="highlighted-equation-equals">= {formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
     <span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>
+  {:else}
+    <span class="highlighted-placeholder">Click a result to highlight it</span>
   {/if}
 </div>