diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index 37edf4b3..470d6176 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -77,7 +77,7 @@
           {#if domain === "colors"}
             <ColorsPanel {tokens} {overrides} {onSet} {onReset} {onBulkChange} {onSelectDomain} />
           {:else if domain === "typography"}
-            <TypographyPanel {tokens} {overrides} {onSet} {onReset} {onBulkChange} />
+            <TypographyPanel {overrides} {onSet} {onReset} {onBulkChange} />
           {:else if domain === "spacing"}
             <SpacingPanel {tokens} {overrides} {onSet} {onReset} />
           {:else if domain === "layout"}
diff --git a/configurator/src/components/inputs/PowerKnobRow.svelte b/configurator/src/components/inputs/PowerKnobRow.svelte
index 6d156ca4..5ade0e70 100644
--- a/configurator/src/components/inputs/PowerKnobRow.svelte
+++ b/configurator/src/components/inputs/PowerKnobRow.svelte
@@ -36,7 +36,7 @@
     {#if isOverridden}
       <button
         onclick={handleReset}
-        class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
+        class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer "
       >
         reset
       </button>
diff --git a/configurator/src/components/inputs/SliderRow.svelte b/configurator/src/components/inputs/SliderRow.svelte
index b4207b11..7f656181 100644
--- a/configurator/src/components/inputs/SliderRow.svelte
+++ b/configurator/src/components/inputs/SliderRow.svelte
@@ -116,14 +116,14 @@
           class={`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${
             showRawText
               ? 'text-indigo-600 dark:text-indigo-400'
-              : 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400'
+              : 'text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400'
           }`}
         >&lt;/&gt;</button>
       {/if}
       {#if overridden}
         <button
           onclick={() => { manualView = 'none'; onReset(); }}
-          class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors"
+          class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer transition-colors"
         >reset</button>
       {/if}
     </div>
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index 70691ee5..a5ec5a7b 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -46,81 +46,83 @@
   let swatchColor = $derived(type === "color" ? paintSwatch(displayValue) : "");
 </script>
 
-<div class={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-black/4 dark:hover:bg-white/4"}`}>
-  <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-indigo-500" : "bg-transparent"}`}></div>
-
-  {#if type === "color"}
-    <div
-      class="w-4 h-4 rounded-sm border border-black/10 dark:border-white/10 shrink-0"
-      style:background={swatchColor}
-    ></div>
-  {:else}
-    <div class="w-4 h-4 shrink-0"></div>
-  {/if}
-
-  <div class="flex-1 min-w-0">
-    <div class="text-[10px] font-mono text-slate-600 dark:text-slate-400 truncate" title={token.name}>
+<!-- Stacked layout — name, description, then a full-width value control, so
+     long values (clamp()/var() expressions) are never clipped by a narrow
+     right-aligned field. -->
+<div class={`px-3 py-2 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-black/4 dark:hover:bg-white/4"}`}>
+  <div class="flex items-center gap-2">
+    <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-indigo-500" : "bg-black/15 dark:bg-white/15"}`}></div>
+    {#if type === "color"}
+      <div
+        class="w-4 h-4 rounded-sm border border-black/10 dark:border-white/10 shrink-0"
+        style:background={swatchColor}
+      ></div>
+    {/if}
+    <div class="text-[10px] font-mono text-slate-700 dark:text-slate-300 truncate flex-1" title={token.name}>
       {shortName}
     </div>
-    {#if token.description}
-      <div class="text-[9px] text-slate-400 dark:text-slate-600 truncate">{token.description}</div>
+    {#if isOverridden}
+      <button
+        onclick={onReset}
+        aria-label={`Reset ${shortName}`}
+        class="text-[9px] text-slate-400 dark:text-slate-600 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer shrink-0"
+      >
+        reset
+      </button>
     {/if}
   </div>
 
-  {#if showScalePicker && scaleOpts}
-    <select
-      value={displayValue}
-      aria-label={`${shortName} value`}
-      onchange={(e) => {
-        const v = (e.target as HTMLSelectElement).value;
-        if (v === CUSTOM) { expanded = true; return; }
-        if (v === token.value) onReset(); else onSet(v);
-      }}
-      class="w-32 shrink-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
-    >
-      {#if !scaleOpts.some((o) => o.value === token.value)}
-        <option value={token.value}>{token.value} (default)</option>
-      {/if}
-      {#each scaleOpts as o (o.value)}
-        <option value={o.value}>{o.label}</option>
-      {/each}
-      <option value={CUSTOM}>Custom…</option>
-    </select>
-  {:else if expanded}
-    <input
-      value={displayValue}
-      onblur={(e) => {
-        const v = (e.target as HTMLInputElement).value.trim();
-        if (v && v !== token.value) onSet(v);
-        else if (!v || v === token.value) onReset();
-        expanded = false;
-      }}
-      onkeydown={(e) => {
-        if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
-        if (e.key === "Escape") { expanded = false; }
-      }}
-      class="w-28 bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none text-right"
-    />
-  {:else}
-    <button
-      onclick={() => { expanded = true; }}
-      class="text-[10px] font-mono text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"
-      title={displayValue}
-    >
-      {#if isOverridden}
-        <span class="text-indigo-700 dark:text-indigo-300">{displayValue}</span>
-      {:else}
-        {displayValue}
-      {/if}
-    </button>
+  {#if token.description}
+    <div class="text-[9px] text-slate-400 dark:text-slate-600 leading-snug mt-0.5 pl-3.5">{token.description}</div>
   {/if}
 
-  {#if isOverridden}
-    <button
-      onclick={onReset}
-      class="text-[9px] text-slate-400 dark:text-slate-600 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0"
-    >
-      ✕
-    </button>
-  {/if}
+  <div class="mt-1 pl-3.5">
+    {#if showScalePicker && scaleOpts}
+      <select
+        value={displayValue}
+        aria-label={`${shortName} value`}
+        onchange={(e) => {
+          const v = (e.target as HTMLSelectElement).value;
+          if (v === CUSTOM) { expanded = true; return; }
+          if (v === token.value) onReset(); else onSet(v);
+        }}
+        class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[10px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+      >
+        {#if !scaleOpts.some((o) => o.value === token.value)}
+          <option value={token.value}>{token.value} (default)</option>
+        {/if}
+        {#each scaleOpts as o (o.value)}
+          <option value={o.value}>{o.label}</option>
+        {/each}
+        <option value={CUSTOM}>Custom…</option>
+      </select>
+    {:else if expanded}
+      <input
+        value={displayValue}
+        onblur={(e) => {
+          const v = (e.target as HTMLInputElement).value.trim();
+          if (v && v !== token.value) onSet(v);
+          else if (!v || v === token.value) onReset();
+          expanded = false;
+        }}
+        onkeydown={(e) => {
+          if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
+          if (e.key === "Escape") { expanded = false; }
+        }}
+        class="w-full bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-1 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none"
+      />
+    {:else}
+      <button
+        onclick={() => { expanded = true; }}
+        class="w-full text-left text-[10px] font-mono text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 truncate cursor-pointer transition-colors"
+        title={displayValue}
+      >
+        {#if isOverridden}
+          <span class="text-indigo-700 dark:text-indigo-300">{displayValue}</span>
+        {:else}
+          {displayValue}
+        {/if}
+      </button>
+    {/if}
+  </div>
 </div>
diff --git a/configurator/src/components/inputs/TypeSpecimenRow.svelte b/configurator/src/components/inputs/TypeSpecimenRow.svelte
new file mode 100644
index 00000000..a1554f01
--- /dev/null
+++ b/configurator/src/components/inputs/TypeSpecimenRow.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  /**
+   * TypeSpecimenRow — one row of the typographic scale preview. The "Aa"
+   * renders at the token's real, live font-size (`var(--sf-…)` resolved in
+   * this document, which loads the framework tokens plus live overrides), and
+   * the label reports the actually rendered size measured from the DOM — the
+   * preview can never disagree with reality.
+   */
+  let { label, varName, family = "--sf-font-body" }: {
+    label: string;
+    varName: string;
+    family?: string;
+  } = $props();
+
+  let el = $state<HTMLElement | null>(null);
+  let px = $state(0);
+  let rootPx = $state(16);
+
+  $effect(() => {
+    if (!el) return;
+    const node = el;
+    const measure = () => {
+      px = parseFloat(getComputedStyle(node).fontSize) || 0;
+      rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    };
+    measure();
+    // A font-size change resizes the span, so ResizeObserver re-measures on
+    // every token/override change and on viewport-driven fluid changes alike.
+    const ro = new ResizeObserver(measure);
+    ro.observe(node);
+    return () => ro.disconnect();
+  });
+</script>
+
+<div class="flex items-baseline gap-2">
+  <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
+  <span
+    bind:this={el}
+    class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
+    style={`font-size: var(${varName}); font-family: var(${family})`}
+  >Aa</span>
+  <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{px ? `${(px / rootPx).toFixed(2)}rem` : ""}</span>
+</div>
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index acb20af2..0c1e54b7 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -14,7 +14,6 @@
 
   const BORDER_STYLES = ["solid", "dashed", "dotted"];
   const RADIUS_STEPS = ["xs", "s", "m", "l", "xl", "2xl", "full"];
-  const BASE_RADII: Record<string, number> = { xs: 2, s: 4, m: 8, l: 12, xl: 16, "2xl": 24, full: 9999 };
 
   const RADIUS_FINE: Array<{ step: string; name: string; default: number; max: number; step_size: number; rawDefault: string }> = [
     { step: "xs",  name: "--sf-radius-xs",  default: 2,  max: 16, step_size: 0.5, rawDefault: "calc(2px * var(--sf-radius-scale))"  },
@@ -50,7 +49,6 @@
     return isNaN(v) ? fallback : v;
   }
 
-  let radiusScale  = $derived(parseNum(overrides["--sf-radius-scale"], 1));
   let borderScale  = $derived(parseNum(overrides["--sf-border-scale"], 1));
   let focusWidth   = $derived(parseNum(overrides["--sf-focus-ring-width"], 2, "px"));
   let focusOffset  = $derived(parseNum(overrides["--sf-focus-ring-offset"], 2, "px"));
@@ -130,14 +128,11 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
         {#each [1, 2, 3, 4] as base (base)}
           <div class="flex items-center gap-3">
-            <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-10">{base}px →</span>
+            <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-14">width-{base}</span>
             <div
               class="flex-1 bg-indigo-400/50 rounded"
-              style={`height: ${Math.max(base * borderScale, 0.5)}px`}
+              style={`height: max(var(--sf-border-width-${base}, ${base}px), 0.5px)`}
             ></div>
-            <span class="text-[9px] font-mono text-slate-500 w-10 text-right">
-              {(base * borderScale).toFixed(1)}px
-            </span>
           </div>
         {/each}
       </div>
@@ -178,11 +173,11 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center gap-3">
         <div
           class="px-4 py-2 rounded-lg text-[11px] text-slate-700 dark:text-slate-300 bg-black/4 dark:bg-white/4"
-          style={`border: ${Math.max(borderScale, 0.5)}px ${borderStyle} ${borderColor || "var(--sf-color-border, #64748b)"}`}
+          style={`border: var(--sf-border-width-1, 1px) ${borderStyle} ${borderColor || "var(--sf-color-border, #64748b)"}`}
         >
           Border sample
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600">{(1 * borderScale).toFixed(1)}px · {borderStyle}</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600">width-1 · {borderStyle}</span>
       </div>
   </Section>
 
@@ -258,7 +253,7 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
         <div
           class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-800 dark:text-indigo-200"
-          style={`outline: ${focusWidth}px solid ${focusRingColor || "oklch(0.7 0.2 235)"}; outline-offset: ${focusOffset}px`}
+          style={`outline: var(--sf-focus-ring-width, 2px) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color, oklch(0.7 0.2 235)); outline-offset: var(--sf-focus-ring-offset, 2px)`}
         >
           Focus preview
         </div>
@@ -316,12 +311,10 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4">
         <div class="flex gap-3 flex-wrap">
           {#each RADIUS_STEPS as step (step)}
-            {@const base = BASE_RADII[step] ?? 6}
-            {@const computed = step === "full" ? 9999 : base * radiusScale}
             <div class="flex flex-col items-center gap-1">
               <div
                 class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30"
-                style={`border-radius: ${Math.min(computed, 9999)}px`}
+                style={`border-radius: var(--sf-radius-${step})`}
               ></div>
               <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">{step}</span>
             </div>
@@ -345,7 +338,7 @@
         overridden={"--sf-media-radius" in overrides}
         onChange={(v) => onSet("--sf-media-radius", `${v}rem`)}
         onReset={() => onReset("--sf-media-radius")}
-        rawDefault="var(--sf-radius-m)"
+        rawDefault="0"
         variableOptions={RADIUS_SCALE}
         currentRaw={overrides["--sf-media-radius"]}
         onRawSet={(v) => onSet("--sf-media-radius", v)}
@@ -353,7 +346,7 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
         <div
           class="w-16 h-16 bg-indigo-500/40 border border-indigo-500/30"
-          style={`border-radius: ${mediaRadius}rem`}
+          style={`border-radius: var(--sf-media-radius, 0)`}
         ></div>
       </div>
   </Section>
diff --git a/configurator/src/components/panels/EffectsPanel.svelte b/configurator/src/components/panels/EffectsPanel.svelte
index 27d19086..58d5487c 100644
--- a/configurator/src/components/panels/EffectsPanel.svelte
+++ b/configurator/src/components/panels/EffectsPanel.svelte
@@ -59,7 +59,7 @@
         </div>
         <div
           class="relative z-10 w-20 h-12 rounded-lg border border-black/20 dark:border-white/20 bg-black/10 dark:bg-white/10 flex items-center justify-center"
-          style={`backdrop-filter: blur(${blur}px)`}
+          style={`backdrop-filter: blur(var(--sf-blur, 12px))`}
         >
           <span class="text-[9px] font-mono text-slate-900/70 dark:text-white/70">{blur}px</span>
         </div>
@@ -94,13 +94,13 @@
       <!-- Opacity preview -->
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
         {#each [
-          { label: "muted", val: opacityMuted },
-          { label: "disabled", val: opacityDisabled },
-          { label: "pending", val: pendingOpacity },
+          { label: "muted", token: "--sf-opacity-muted", val: opacityMuted },
+          { label: "disabled", token: "--sf-opacity-disabled", val: opacityDisabled },
+          { label: "pending", token: "--sf-state-pending-opacity", val: pendingOpacity },
         ] as row (row.label)}
           <div class="flex items-center gap-3">
             <span class="text-[9px] text-slate-400 dark:text-slate-600 w-14">{row.label}</span>
-            <div class="flex-1 h-4 bg-indigo-400 rounded" style={`opacity: ${row.val}`}></div>
+            <div class="flex-1 h-4 bg-indigo-400 rounded" style={`opacity: var(${row.token}, ${row.val})`}></div>
             <span class="text-[9px] font-mono text-slate-500 w-8">{row.val}</span>
           </div>
         {/each}
@@ -129,8 +129,8 @@
       {/each}
       <!-- Scrollbar strip preview -->
       <div class="flex items-center gap-2 p-2 rounded-lg bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8">
-        <div class="w-16 h-3 rounded-full" style:background={scrollbarTrack || "rgba(255,255,255,0.08)"}>
-          <div class="w-6 h-3 rounded-full" style:background={scrollbarThumb || "oklch(0.52 0.025 260)"}></div>
+        <div class="w-16 h-3 rounded-full" style:background={"var(--sf-scrollbar-track, rgba(255,255,255,0.08))"}>
+          <div class="w-6 h-3 rounded-full" style:background={"var(--sf-scrollbar-thumb, oklch(0.52 0.025 260))"}></div>
         </div>
         <span class="text-[9px] text-slate-400 dark:text-slate-600">Scrollbar preview</span>
       </div>
diff --git a/configurator/src/components/panels/MacrosPanel.svelte b/configurator/src/components/panels/MacrosPanel.svelte
index aa7134fa..122aeb61 100644
--- a/configurator/src/components/panels/MacrosPanel.svelte
+++ b/configurator/src/components/panels/MacrosPanel.svelte
@@ -131,7 +131,7 @@
         currentRaw={overrides["--sf-flow-space"]}
         onRawSet={(v) => onSet("--sf-flow-space", v)}
       />
-      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3" style={`display:flex;flex-direction:column;gap:${flowSpace}rem`}>
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3" style={`display:flex;flex-direction:column;gap:var(--sf-flow-space, 0.5rem)`}>
         {#each [0, 1, 2] as i (i)}
           <div class="h-2.5 rounded bg-indigo-500/40" style={`width:${90 - i * 12}%`}></div>
         {/each}
@@ -228,7 +228,7 @@
       </div>
       <div class="relative h-24 rounded-xl border border-black/8 dark:border-white/8 overflow-hidden flex items-end p-2"
         style="background:repeating-linear-gradient(45deg,#475569,#475569 8px,#334155 8px,#334155 16px)">
-        <div class="absolute inset-0" style={`background:linear-gradient(${scrimDir}, ${scrimColor}, transparent)`}></div>
+        <div class="absolute inset-0" style={`background:linear-gradient(var(--sf-scrim-direction, to top), var(--sf-scrim-color, oklch(0 0 0 / 0.55)), transparent)`}></div>
         <span class="relative text-[11px] font-bold text-white">Caption over scrim</span>
       </div>
       <RawTokenRow
@@ -366,7 +366,7 @@
 
       <div
         class="h-24 rounded-xl border border-black/8 dark:border-white/8 overflow-hidden flex items-end p-2"
-        style={`background-color:${surfaceBgColor};background-image:${surfaceBgOverlay}, ${surfaceBgImage};background-size:${surfaceBgSize};background-position:${surfaceBgPosition};background-repeat:${surfaceBgRepeat};background-attachment:${surfaceBgAttachment};animation:${surfaceBgAnimation}`}
+        style={`background-color:var(--sf-surface-bg-color, transparent);background-image:var(--sf-surface-bg-overlay, none), var(--sf-surface-bg-image, none);background-size:var(--sf-surface-bg-size, cover);background-position:var(--sf-surface-bg-position, center);background-repeat:var(--sf-surface-bg-repeat, no-repeat);background-attachment:var(--sf-surface-bg-attachment, scroll);animation:var(--sf-surface-bg-animation, none)`}
       >
         <span class="text-[11px] font-bold text-white mix-blend-difference">.sf-surface-bg preview</span>
       </div>
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index 424f14d1..b09bc1f8 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -88,10 +88,8 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex items-center gap-3">
         <div
           class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-600/70 dark:text-indigo-400/70 shrink-0"
-          style={`width: ${touchTarget}px; height: ${touchTarget}px`}
-        >
-          {touchTarget}px
-        </div>
+          style={`width: var(--sf-touch-target, 2.75rem); height: var(--sf-touch-target, 2.75rem)`}
+        ></div>
         <p class="text-[9px] text-slate-400 dark:text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p>
       </div>
   </Section>
@@ -240,7 +238,7 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
         <div
           class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-800 dark:text-indigo-200"
-          style={`outline: 2px ${focusRingStyle} ${overrides["--sf-focus-ring-color"] || "oklch(0.7 0.2 235)"}; outline-offset: 2px`}
+          style={`outline: var(--sf-focus-ring-width, 2px) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color, oklch(0.7 0.2 235)); outline-offset: var(--sf-focus-ring-offset, 2px)`}
         >
           Focus ring · {focusRingStyle}
         </div>
@@ -308,7 +306,7 @@
         <div class="flex items-center justify-between mb-1.5">
           <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Underline thickness</span>
           {#if "--sf-link-underline-thickness" in overrides}
-            <button onclick={() => onReset("--sf-link-underline-thickness")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+            <button onclick={() => onReset("--sf-link-underline-thickness")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer ">reset</button>
           {/if}
         </div>
         <div class="flex gap-1">
diff --git a/configurator/src/components/panels/MotionPanel.svelte b/configurator/src/components/panels/MotionPanel.svelte
index f61cb56f..65e5ca74 100644
--- a/configurator/src/components/panels/MotionPanel.svelte
+++ b/configurator/src/components/panels/MotionPanel.svelte
@@ -258,7 +258,7 @@
         <div class="flex items-center justify-between mb-1.5">
           <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Stagger base</span>
           {#if STAGGER_TOKENS.some(t => t in overrides)}
-            <button onclick={resetStagger} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+            <button onclick={resetStagger} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer ">reset</button>
           {/if}
         </div>
         <SliderRow
diff --git a/configurator/src/components/panels/ThemesPanel.svelte b/configurator/src/components/panels/ThemesPanel.svelte
index 21556b8b..3c26d0ba 100644
--- a/configurator/src/components/panels/ThemesPanel.svelte
+++ b/configurator/src/components/panels/ThemesPanel.svelte
@@ -104,7 +104,7 @@
               <button
                 aria-label="Delete theme"
                 onclick={() => handleDelete(theme.id)}
-                class="p-1.5 rounded-lg border border-black/8 dark:border-white/8 text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
+                class="p-1.5 rounded-lg border border-black/8 dark:border-white/8 text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer "
               ><Trash2 class="w-3.5 h-3.5" /></button>
             </div>
           </div>
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index c47741be..55db8ddf 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { SlashedToken } from '../../types';
   import { KNOBS_BY_DOMAIN } from '../../lib/powerKnobs';
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
   import RangeWithNumber from '../inputs/RangeWithNumber.svelte';
   import ClampField from '../inputs/ClampField.svelte';
   import Section from '../inputs/Section.svelte';
+  import TypeSpecimenRow from '../inputs/TypeSpecimenRow.svelte';
   import { themeState } from '../../lib/theme.svelte';
 
   // <option> only reliably accepts a background via inline style (no dark:
@@ -13,7 +13,6 @@
   let optionBg = $derived(themeState.value === 'dark' ? '#16161e' : '#ffffff');
 
   let { overrides, onSet, onReset, onBulkChange }: {
-    tokens: SlashedToken[];
     overrides: Record<string, string>;
     onSet: (name: string, value: string) => void;
     onReset: (name: string) => void;
@@ -80,17 +79,7 @@
     "--sf-font-weight-interactive": "600",
   };
 
-  const TEXT_STEPS = [
-    { label: "2xs", factor: 0.64 },
-    { label: "xs",  factor: 0.75 },
-    { label: "s",   factor: 0.875 },
-    { label: "m",   factor: 1 },
-    { label: "l",   factor: 1.125 },
-    { label: "xl",  factor: 1.25 },
-    { label: "2xl", factor: 1.5 },
-    { label: "3xl", factor: 1.875 },
-    { label: "4xl", factor: 2.25 },
-  ];
+  const TEXT_STEPS = ["2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"];
 
   const TRACKING_TOKENS = [
     { label: "Tight",   token: "--sf-tracking-tight",   default: -0.025 },
@@ -107,28 +96,38 @@
     { label: "Relaxed", token: "--sf-leading-relaxed", default: 1.625 },
   ];
 
-  // ---- Per-type (body + h1–h6) editor data ------------------------------
+  const DISPLAY_LEADING = [
+    { label: "Display S", token: "--sf-display-s-line-height", def: 1.1 },
+    { label: "Display M", token: "--sf-display-m-line-height", def: 1.05 },
+    { label: "Display L", token: "--sf-display-l-line-height", def: 1 },
+  ];
+
+  // ---- Per-element (body + h1–h6) editor data ---------------------------
   // Size options map to the modular scale steps + display sizes (the framework
   // defaults reference these var()s, so editing stays semantic).
   const SIZE_OPTIONS = [
-    { label: "2xs", value: "var(--sf-text-2xs)", approx: 0.64 },
-    { label: "xs",  value: "var(--sf-text-xs)",  approx: 0.75 },
-    { label: "s",   value: "var(--sf-text-s)",   approx: 0.875 },
-    { label: "m",   value: "var(--sf-text-m)",   approx: 1 },
-    { label: "l",   value: "var(--sf-text-l)",   approx: 1.125 },
-    { label: "xl",  value: "var(--sf-text-xl)",  approx: 1.25 },
-    { label: "2xl", value: "var(--sf-text-2xl)", approx: 1.5 },
-    { label: "3xl", value: "var(--sf-text-3xl)", approx: 1.875 },
-    { label: "4xl", value: "var(--sf-text-4xl)", approx: 2.25 },
-    { label: "display-s", value: "var(--sf-text-display-s)", approx: 2.6 },
-    { label: "display-m", value: "var(--sf-text-display-m)", approx: 3.2 },
-    { label: "display-l", value: "var(--sf-text-display-l)", approx: 3.8 },
+    { label: "2xs", value: "var(--sf-text-2xs)" },
+    { label: "xs",  value: "var(--sf-text-xs)" },
+    { label: "s",   value: "var(--sf-text-s)" },
+    { label: "m",   value: "var(--sf-text-m)" },
+    { label: "l",   value: "var(--sf-text-l)" },
+    { label: "xl",  value: "var(--sf-text-xl)" },
+    { label: "2xl", value: "var(--sf-text-2xl)" },
+    { label: "3xl", value: "var(--sf-text-3xl)" },
+    { label: "4xl", value: "var(--sf-text-4xl)" },
+    { label: "display-s", value: "var(--sf-text-display-s)" },
+    { label: "display-m", value: "var(--sf-text-display-m)" },
+    { label: "display-l", value: "var(--sf-text-display-l)" },
   ];
   const LEADING_OPTIONS = LEADING_TOKENS.map((t) => ({ label: t.label, value: `var(${t.token})`, num: t.default }));
   const TRACKING_OPTIONS = TRACKING_TOKENS.map((t) => ({ label: t.label, value: `var(${t.token})`, em: t.default }));
 
   // level → { tokens + framework defaults }
-  const TYPE_LEVELS = [
+  type TypeLevel = {
+    id: string; label: string; size: string; lh: string; wt: string; ls: string | null;
+    dSize: string; dLh: string; dWt: string; dLs: string;
+  };
+  const TYPE_LEVELS: TypeLevel[] = [
     { id: "body", label: "Body", size: "--sf-body-font-size", lh: "--sf-body-line-height", wt: "--sf-body-font-weight", ls: null,
       dSize: "var(--sf-text-m)", dLh: "var(--sf-leading-normal)", dWt: "400", dLs: "" },
     { id: "h1", label: "H1", size: "--sf-h1-size", lh: "--sf-h1-line-height", wt: "--sf-h1-font-weight", ls: "--sf-h1-letter-spacing",
@@ -143,10 +142,11 @@
       dSize: "var(--sf-text-l)", dLh: "var(--sf-leading-normal)", dWt: "600", dLs: "var(--sf-tracking-normal)" },
     { id: "h6", label: "H6", size: "--sf-h6-size", lh: "--sf-h6-line-height", wt: "--sf-h6-font-weight", ls: "--sf-h6-letter-spacing",
       dSize: "var(--sf-text-m)", dLh: "var(--sf-leading-normal)", dWt: "600", dLs: "var(--sf-tracking-wide)" },
-  ] as const;
+  ];
 
   let activeLevelId = $state<string>("h1");
   let activeLevel = $derived(TYPE_LEVELS.find((l) => l.id === activeLevelId)!);
+  let activeMw = $derived(levelMaxWidthToken(activeLevelId));
 
   const knobs = KNOBS_BY_DOMAIN["typography"] ?? [];
 
@@ -161,23 +161,23 @@
   let baseMax   = $derived(num("--sf-text-base-max", 1.25));
   let dispMin   = $derived(num("--sf-text-display-base-min", 2.4));
   let dispMax   = $derived(num("--sf-text-display-base-max", 3));
-  let taper        = $derived(num("--sf-leading-taper", 0));
+  let taper     = $derived(num("--sf-leading-taper", 0));
   let textScale    = $derived(num("--sf-text-scale", 1));
   let displayScale = $derived(num("--sf-text-display-scale", 1));
   // Shared fluid viewport endpoints (rem, unitless). Min = mobile, max = desktop.
   let vwMin     = $derived(num("--sf-fluid-min-vw", 22.5));
   let vwMax     = $derived(num("--sf-fluid-max-vw", 90));
 
-  let showFontFamilies  = $state(false);
-  let showPerType       = $state(false);
-  let showBodyText      = $state(false);
-  let showDisplayType   = $state(false);
-  let showModularScale  = $state(false);
+  // Sorted section toggles — fonts → scale → rhythm → tracking → weights →
+  // elements → measures. Every control lives in exactly one of these.
+  let showFonts       = $state(false);
+  let showScale       = $state(false);
+  let showLineHeights = $state(false);
+  let showTracking    = $state(false);
+  let showWeights     = $state(false);
+  let showElements    = $state(false);
+  let showLineLengths = $state(false);
   let showScaleAdvanced = $state(false);
-  let showScalePreview  = $state(false);
-  let showAdvancedType  = $state(false);
-  let showLineLengths   = $state(false);
-  let showFontWeights   = $state(false);
 
   let currentBodyFont    = $derived(overrides["--sf-font-body"] ?? "");
   let currentHeadingFont = $derived(overrides["--sf-font-heading"] ?? "");
@@ -215,7 +215,7 @@
     onSet(token, `'${fontName}', sans-serif`);
   }
 
-  // Per-type helpers
+  // Per-element helpers
   function levelVal(token: string | null, dflt: string): string {
     if (!token) return dflt;
     return overrides[token] ?? dflt;
@@ -224,45 +224,23 @@
     if (!token) return;
     if (value === dflt) onReset(token); else onSet(token, value);
   }
-  // Approximate sample size (rem) for the active level's current size.
-  let sampleSize = $derived.by(() => {
-    const v = levelVal(activeLevel.size, activeLevel.dSize);
-    const opt = SIZE_OPTIONS.find((o) => o.value === v);
-    const mid = (baseMin + baseMax) / 2;
-    return Math.min((opt?.approx ?? 1) * mid * textScale, 2.4);
-  });
-  let sampleWeight = $derived.by(() => {
-    const v = levelVal(activeLevel.wt, activeLevel.dWt);
-    const n = parseInt(v);
-    return isNaN(n) ? 600 : n;
-  });
-  let sampleTracking = $derived.by(() => {
-    if (!activeLevel.ls) return 0;
-    const v = levelVal(activeLevel.ls, activeLevel.dLs);
-    const opt = TRACKING_OPTIONS.find((o) => o.value === v);
-    if (opt) return opt.em;
-    const parsed = parseFloat(v.replace("em", ""));
-    return isNaN(parsed) ? 0 : parsed;
-  });
-  let sampleLeading = $derived.by(() => {
-    const v = levelVal(activeLevel.lh, activeLevel.dLh);
-    const opt = LEADING_OPTIONS.find((o) => o.value === v);
-    if (opt) return opt.num;
-    const parsed = parseFloat(v);
-    return isNaN(parsed) ? 1.3 : parsed;
-  });
+  // Heading levels also own a --sf-h{n}-max-width token; the tab dot and the
+  // bulk reset must track it alongside size/lh/weight/tracking.
+  function levelMaxWidthToken(id: string): string | null {
+    return id.startsWith("h") ? `--sf-${id}-max-width` : null;
+  }
 </script>
 
-<!-- Shared weight button-grid — one markup for every role-weight token
-     (body-strong, interactive, display, heading). Clicking the default resets. -->
+<!-- Shared weight button-grid — one markup for every weight token (base scale
+     steps and role weights alike). Clicking the default resets. -->
 {#snippet weightGrid(label: string, tokenName: string, defaultVal: string)}
   {@const current = overrides[tokenName] ?? defaultVal}
   {@const isOverridden = tokenName in overrides}
   <div class="group">
     <div class="flex items-center justify-between mb-1.5">
-      <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label} weight</span>
+      <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label}</span>
       {#if isOverridden}
-        <button onclick={() => onReset(tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
+        <button onclick={() => onReset(tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer transition-colors">reset</button>
       {/if}
     </div>
     <div class="flex gap-1">
@@ -283,8 +261,8 @@
 
 <div class="p-4 space-y-6">
 
-  <!-- FONT FAMILIES (compact dropdowns) -->
-  <Section title="Font families" bind:open={showFontFamilies}>
+  <!-- ═══ 1. FONTS — families, loader, OpenType ═══ -->
+  <Section title="Fonts" spacing="space-y-4" bind:open={showFonts}>
     {#each [
       { label: "Body", token: "--sf-font-body", current: currentBodyFont, opts: BODY_STACKS },
       { label: "Heading", token: "--sf-font-heading", current: currentHeadingFont, opts: HEADING_STACKS },
@@ -341,6 +319,7 @@
       </div>
       <input
         type="text"
+        aria-label="Google font name"
         placeholder="…or type any Google font name"
         oninput={(e) => { googleFontChoice = (e.target as HTMLInputElement).value; }}
         value={googleFontChoice}
@@ -353,17 +332,288 @@
         Load &amp; apply to {customFontTarget}
       </button>
     </div>
+
+    <!-- OpenType / variable-font axes -->
+    <div class="pt-1 space-y-3">
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">OpenType</div>
+      <div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Numeric figures</div>
+        <div class="flex gap-1">
+          {#each [["tabular-nums", "tabular-nums (default)"], ["proportional-nums", "proportional-nums"], ["normal", "normal"]] as [val, label] (val)}
+            {@const cur = overrides["--sf-font-numeric"] ?? "tabular-nums"}
+            <button
+              onclick={() => val === "tabular-nums" ? onReset("--sf-font-numeric") : onSet("--sf-font-numeric", val)}
+              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${
+                cur === val
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+              }`}
+            >{label}</button>
+          {/each}
+        </div>
+      </div>
+      <div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Optical sizing</div>
+        <div class="flex gap-1">
+          {#each [["auto", "auto (default)"], ["none", "none"]] as [val, label] (val)}
+            {@const cur = overrides["--sf-optical-sizing"] ?? "auto"}
+            <button
+              onclick={() => val === "auto" ? onReset("--sf-optical-sizing") : onSet("--sf-optical-sizing", val)}
+              class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
+                cur === val
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+              }`}
+            >{label}</button>
+          {/each}
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Font features</span>
+        <input
+          type="text"
+          value={overrides["--sf-font-features"] ?? ""}
+          aria-label="Font features"
+          placeholder="normal"
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value.trim();
+            v ? onSet("--sf-font-features", v) : onReset("--sf-font-features");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-font-features" in overrides}
+          <button onclick={() => onReset("--sf-font-features")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Variation</span>
+        <input
+          type="text"
+          value={overrides["--sf-font-variation"] ?? ""}
+          aria-label="Font variation settings"
+          placeholder="normal"
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value.trim();
+            v ? onSet("--sf-font-variation", v) : onReset("--sf-font-variation");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-font-variation" in overrides}
+          <button onclick={() => onReset("--sf-font-variation")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
+      </div>
+    </div>
   </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- PER-TYPE (body + h1–h6) -->
-  <Section title="Per-type styles" bind:open={showPerType}>
+  <!-- ═══ 2. FLUID SCALE — text & display, identical generators ═══ -->
+  <Section title="Fluid scale (Mobile → Desktop)" spacing="space-y-4" bind:open={showScale}>
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
+      Utopia-style fluid scale. The viewport range and the modular ratio are shared;
+      text and display each have their own base size and multiplier.
+    </p>
+
+    <!-- Shared viewport endpoints (also used by the space scale) -->
+    <ClampField
+      title="Viewport range (shared)"
+      minValue={vwMin} maxValue={vwMax}
+      min={15} max={120} step={0.5} unit="rem"
+      minLabel="Mobile" maxLabel="Desktop"
+      overridden={"--sf-fluid-min-vw" in overrides || "--sf-fluid-max-vw" in overrides}
+      onReset={() => { onReset("--sf-fluid-min-vw"); onReset("--sf-fluid-max-vw"); }}
+      onMinChange={(v) => onSet("--sf-fluid-min-vw", String(v))}
+      onMaxChange={(v) => onSet("--sf-fluid-max-vw", String(v))}
+    />
+
+    <!-- TEXT generator -->
+    <ClampField
+      title="Text base size &amp; ratio"
+      minValue={baseMin} maxValue={baseMax}
+      min={0.7} max={2} step={0.01} unit="rem"
+      minLabel="Mobile" maxLabel="Desktop"
+      previewKind="type"
+      overridden={"--sf-text-base-min" in overrides || "--sf-text-base-max" in overrides}
+      onReset={() => { onReset("--sf-text-base-min"); onReset("--sf-text-base-max"); }}
+      onMinChange={(v) => onSet("--sf-text-base-min", String(v))}
+      onMaxChange={(v) => onSet("--sf-text-base-max", String(v))}
+      ratioPresets={RATIO_PRESETS}
+      ratioMin={ratioMin} ratioMax={ratioMax}
+      ratioMin_bound={1.05} ratioMax_bound={1.8}
+      onRatioMinChange={(v) => onSet("--sf-text-ratio-min", String(v))}
+      onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
+    />
+    <SliderRow
+      label="Text scale multiplier" value={textScale} min={0.75} max={1.5} step={0.01}
+      help="--sf-text-scale — multiplies every text size at once."
+      overridden={"--sf-text-scale" in overrides}
+      onChange={(v) => onSet("--sf-text-scale", String(v))}
+      onReset={() => onReset("--sf-text-scale")}
+    />
+
+    <!-- DISPLAY generator — identical controls; the ratio block edits the SAME
+         shared --sf-text-ratio-* tokens (the framework derives display sizes
+         from the text ratio), so the two generators stay in lockstep. -->
+    <ClampField
+      title="Display base size &amp; ratio"
+      minValue={dispMin} maxValue={dispMax}
+      min={1.5} max={6} step={0.05} unit="rem"
+      minLabel="Mobile" maxLabel="Desktop"
+      previewKind="type"
+      overridden={"--sf-text-display-base-min" in overrides || "--sf-text-display-base-max" in overrides}
+      onReset={() => { onReset("--sf-text-display-base-min"); onReset("--sf-text-display-base-max"); }}
+      onMinChange={(v) => onSet("--sf-text-display-base-min", String(v))}
+      onMaxChange={(v) => onSet("--sf-text-display-base-max", String(v))}
+      ratioPresets={RATIO_PRESETS}
+      ratioMin={ratioMin} ratioMax={ratioMax}
+      ratioMin_bound={1.05} ratioMax_bound={1.8}
+      onRatioMinChange={(v) => onSet("--sf-text-ratio-min", String(v))}
+      onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
+    />
+    <SliderRow
+      label="Display scale multiplier" value={displayScale} min={0.75} max={1.5} step={0.01}
+      help="--sf-text-display-scale — multiplies every display size at once."
+      overridden={"--sf-text-display-scale" in overrides}
+      onChange={(v) => onSet("--sf-text-display-scale", String(v))}
+      onReset={() => onReset("--sf-text-display-scale")}
+    />
+
+    <!-- Live ramp — every "Aa" renders at its token's real size (var() against
+         the framework CSS + live overrides); labels are DOM-measured. -->
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 max-h-96 overflow-y-auto">
+      <div class="text-[9px] font-semibold text-slate-500 mb-1">Text</div>
+      {#each [...TEXT_STEPS].reverse() as label (label)}
+        <TypeSpecimenRow {label} varName={`--sf-text-${label}`} family="--sf-font-body" />
+      {/each}
+      <div class="text-[9px] font-semibold text-slate-500 mt-3 mb-1">Display</div>
+      {#each ["l", "m", "s"] as label (label)}
+        <TypeSpecimenRow {label} varName={`--sf-text-display-${label}`} family="--sf-font-heading" />
+      {/each}
+    </div>
+
+    <!-- Advanced power knobs — de-emphasised, at end of the scale group -->
+    <div class="pt-1">
+      <button
+        onclick={() => { showScaleAdvanced = !showScaleAdvanced; }}
+        aria-expanded={showScaleAdvanced}
+        class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
+      >
+        <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
+        <span class="text-[10px]">{showScaleAdvanced ? "▲" : "▼"}</span>
+      </button>
+      {#if showScaleAdvanced}
+        <div class="mt-3 space-y-4">
+          {#each knobs as k (k.name)}
+            <PowerKnobRow
+              knob={k}
+              {overrides}
+              onChange={(name, val) => val === null ? onReset(name) : onSet(name, val)}
+            />
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 3. LINE HEIGHTS — leading scale, taper, display leadings ═══ -->
+  <Section title="Line heights" spacing="space-y-4" bind:open={showLineHeights}>
+    <div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Leading scale</div>
+      <div class="space-y-2">
+        {#each LEADING_TOKENS as t (t.token)}
+          <SliderRow
+            label={t.label} value={getLeadingVal(t)} min={1.0} max={2.2} step={0.05}
+            help={`${t.token} — ${t.label.toLowerCase()} line height`}
+            overridden={t.token in overrides}
+            onChange={(v) => onSet(t.token, String(v))}
+            onReset={() => onReset(t.token)}
+          />
+        {/each}
+      </div>
+    </div>
+
+    <SliderRow
+      label="Leading taper" value={taper} min={0} max={0.5} step={0.01}
+      help="--sf-leading-taper — how aggressively large sizes shrink their line-height."
+      overridden={"--sf-leading-taper" in overrides}
+      onChange={(v) => onSet("--sf-leading-taper", String(v))}
+      onReset={() => onReset("--sf-leading-taper")}
+    />
+
+    <div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Display line heights</div>
+      <div class="space-y-2">
+        {#each DISPLAY_LEADING as row (row.token)}
+          <SliderRow
+            label={row.label} value={num(row.token, row.def)} min={0.8} max={1.5} step={0.025}
+            help={`${row.token}`}
+            overridden={row.token in overrides}
+            onChange={(v) => onSet(row.token, String(v))}
+            onReset={() => onReset(row.token)}
+          />
+        {/each}
+      </div>
+    </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 4. LETTER SPACING — tracking scale ═══ -->
+  <Section title="Letter spacing" bind:open={showTracking}>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 mb-2">
+        Overriding these propagates to heading sizes that reference them.
+      </p>
+      <div class="space-y-2">
+        {#each TRACKING_TOKENS as t (t.token)}
+          <div class="group">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{t.label}</span>
+              {#if t.token in overrides}
+                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer ">reset</button>
+              {/if}
+            </div>
+            <RangeWithNumber
+              value={getTrackingVal(t)}
+              min={-0.1} max={0.2} step={0.005} unit="em"
+              onChange={(v) => onSet(t.token, `${v}em`)}
+            />
+          </div>
+        {/each}
+      </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 5. FONT WEIGHTS — base scale + role weights ═══ -->
+  <Section title="Font weights" spacing="space-y-4" bind:open={showWeights}>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Weight scale</div>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed -mt-2">Named weight tokens. Override if your font uses non-standard axis values.</p>
+      {@render weightGrid("Light", "--sf-font-weight-light", "300")}
+      {@render weightGrid("Normal", "--sf-font-weight-normal", "400")}
+      {@render weightGrid("Medium", "--sf-font-weight-medium", "500")}
+      {@render weightGrid("Semibold", "--sf-font-weight-semibold", "600")}
+      {@render weightGrid("Bold", "--sf-font-weight-bold", "700")}
+
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 pt-2">Role weights</div>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed -mt-2">Semantic defaults the elements build on — reweight the whole site from here.</p>
+      {@render weightGrid("Heading", "--sf-font-weight-heading", WEIGHT_DEFAULTS["--sf-font-weight-heading"] ?? "600")}
+      {@render weightGrid("Display", "--sf-font-weight-display", WEIGHT_DEFAULTS["--sf-font-weight-display"] ?? "700")}
+      {@render weightGrid("Body strong", "--sf-font-weight-strong", "700")}
+      {@render weightGrid("Interactive", "--sf-font-weight-interactive", WEIGHT_DEFAULTS["--sf-font-weight-interactive"] ?? "600")}
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 6. ELEMENTS — body + h1–h6 per-element styles & body details ═══ -->
+  <Section title="Elements (body, h1–h6)" bind:open={showElements}>
 
     <!-- Level selector -->
     <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
       {#each TYPE_LEVELS as lvl (lvl.id)}
-        {@const isOv = (lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides)}
+        {@const lvlMw = levelMaxWidthToken(lvl.id)}
+        {@const isOv = (lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides) || (!!lvlMw && lvlMw in overrides)}
         <button
           onclick={() => { activeLevelId = lvl.id; }}
           class={`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${
@@ -376,11 +626,13 @@
       {/each}
     </div>
 
-    <!-- Live sample -->
+    <!-- Live sample — renders with the level's real tokens (var() resolved
+         against the framework CSS + live overrides loaded in this document),
+         so it can never disagree with what actually ships. -->
     <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 px-3 py-3 overflow-hidden">
       <div
         class="text-slate-900/85 dark:text-white/85 truncate"
-        style={`font-size:${sampleSize}rem; font-weight:${sampleWeight}; letter-spacing:${sampleTracking}em; line-height:${sampleLeading}; font-family:${activeLevel.id === "body" ? (currentBodyFont || "inherit") : (currentHeadingFont || currentBodyFont || "inherit")}`}
+        style={`font-size:var(${activeLevel.size}, ${activeLevel.dSize}); font-weight:var(${activeLevel.wt}, ${activeLevel.dWt}); letter-spacing:${activeLevel.ls ? `var(${activeLevel.ls}, normal)` : "normal"}; line-height:var(${activeLevel.lh}, ${activeLevel.dLh}); font-family:var(${activeLevel.id === "body" ? "--sf-font-body" : "--sf-font-heading"})`}
       >The quick brown fox
       </div>
     </div>
@@ -456,13 +708,14 @@
     {/if}
 
     <!-- Max width (heading levels only) -->
-    {#if activeLevel.id !== "body"}
+    {#if activeLevel.id.startsWith("h")}
       {@const maxWidthToken = `--sf-${activeLevel.id}-max-width`}
       <div class="flex items-center gap-2">
         <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Max width</span>
         <input
           type="text"
           value={overrides[maxWidthToken] ?? ""}
+          aria-label={`${activeLevel.label} max width`}
           placeholder="none"
           oninput={(e) => {
             const v = (e.target as HTMLInputElement).value.trim();
@@ -477,381 +730,116 @@
     {/if}
 
     <div class="flex justify-end">
-      {#if (activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides)}
+      {#if (activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides) || (!!activeMw && activeMw in overrides)}
         <button
           onclick={() => {
             const patch: Record<string, null> = { [activeLevel.size]: null, [activeLevel.lh]: null, [activeLevel.wt]: null };
             if (activeLevel.ls) patch[activeLevel.ls] = null;
+            if (activeMw) patch[activeMw] = null;
             onBulkChange(patch);
           }}
           class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer"
         >reset {activeLevel.label}</button>
       {/if}
     </div>
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- BODY TEXT -->
-  <Section title="Body text" spacing="space-y-4" bind:open={showBodyText}>
 
-    <!-- Font weights -->
-    {@render weightGrid("Body strong", "--sf-font-weight-strong", WEIGHT_DEFAULTS["--sf-font-weight-strong"] ?? "600")}
-    {@render weightGrid("Interactive", "--sf-font-weight-interactive", WEIGHT_DEFAULTS["--sf-font-weight-interactive"] ?? "600")}
+    <!-- Body & prose details -->
+    <div class="pt-2 space-y-4 border-t border-black/6 dark:border-white/6">
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Body &amp; prose details</div>
 
-    <!-- Em style toggle -->
-    <div>
-      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Emphasis style</div>
-      <div class="flex gap-1">
-        {#each [["Italic", "italic"], ["Normal", "normal"]] as [label, val] (val)}
-          {@const current = overrides["--sf-body-em-style"] ?? "italic"}
-          <button
-            onclick={() => val === "italic" ? onReset("--sf-body-em-style") : onSet("--sf-body-em-style", val)}
-            class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
-              current === val
-                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-            }`}
-          ><span style={`font-style: ${val}`}>{label}</span></button>
-        {/each}
-      </div>
-    </div>
-
-    <!-- Code font size -->
-    <SliderRow
-      label="Code font size" value={num("--sf-code-font-size", 0.875)} min={0.7} max={1.1} step={0.005} unit="em"
-      help="--sf-code-font-size — size of inline code relative to surrounding text"
-      overridden={"--sf-code-font-size" in overrides}
-      onChange={(v) => onSet("--sf-code-font-size", `${v}em`)}
-      onReset={() => onReset("--sf-code-font-size")}
-    />
-
-    <!-- Text wrap -->
-    {#each [
-      { label: "Heading wrap", token: "--sf-heading-text-wrap", defaultVal: "balance" },
-      { label: "Body wrap",    token: "--sf-body-text-wrap",    defaultVal: "pretty" },
-    ] as row (row.token)}
-      {@const current = overrides[row.token] ?? row.defaultVal}
+      <!-- Em style toggle -->
       <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">{row.label}</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Emphasis style</div>
         <div class="flex gap-1">
-          {#each WRAP_OPTIONS as o (o.value)}
+          {#each [["Italic", "italic"], ["Normal", "normal"]] as [label, val] (val)}
+            {@const current = overrides["--sf-body-em-style"] ?? "italic"}
             <button
-              onclick={() => o.value === row.defaultVal && !(row.token in overrides) ? undefined : (o.value === row.defaultVal ? onReset(row.token) : onSet(row.token, o.value))}
-              class={`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${
-                current === o.value
+              onclick={() => val === "italic" ? onReset("--sf-body-em-style") : onSet("--sf-body-em-style", val)}
+              class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
+                current === val
                   ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
                   : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
-            >{o.label}</button>
+            ><span style={`font-style: ${val}`}>{label}</span></button>
           {/each}
         </div>
       </div>
-    {/each}
 
-    <!-- Link external marker -->
-    <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External marker</span>
-      <input
-        type="text"
-        value={overrides["--sf-link-external-marker"] ?? ""}
-        placeholder={'" ↗"'}
-        oninput={(e) => {
-          const v = (e.target as HTMLInputElement).value;
-          v ? onSet("--sf-link-external-marker", v) : onReset("--sf-link-external-marker");
-        }}
-        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-      />
-      {#if "--sf-link-external-marker" in overrides}
-        <button onclick={() => onReset("--sf-link-external-marker")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-      {/if}
-    </div>
-
-    <!-- Link external label (screen-reader text for the marker glyph) -->
-    <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External label</span>
-      <input
-        type="text"
-        value={overrides["--sf-link-external-label"] ?? ""}
-        placeholder={'"opens in a new window or external site"'}
-        oninput={(e) => {
-          const v = (e.target as HTMLInputElement).value;
-          v ? onSet("--sf-link-external-label", v) : onReset("--sf-link-external-label");
-        }}
-        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+      <!-- Code font size -->
+      <SliderRow
+        label="Code font size" value={num("--sf-code-font-size", 0.875)} min={0.7} max={1.1} step={0.005} unit="em"
+        help="--sf-code-font-size — size of inline code relative to surrounding text"
+        overridden={"--sf-code-font-size" in overrides}
+        onChange={(v) => onSet("--sf-code-font-size", `${v}em`)}
+        onReset={() => onReset("--sf-code-font-size")}
       />
-      {#if "--sf-link-external-label" in overrides}
-        <button onclick={() => onReset("--sf-link-external-label")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-      {/if}
-    </div>
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- FONT WEIGHT SCALE -->
-  <Section title="Font weight scale" bind:open={showFontWeights}>
-      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p>
+      <!-- Text wrap -->
       {#each [
-        { label: "Light",    token: "--sf-font-weight-light",    def: 300 },
-        { label: "Normal",   token: "--sf-font-weight-normal",   def: 400 },
-        { label: "Medium",   token: "--sf-font-weight-medium",   def: 500 },
-        { label: "Semibold", token: "--sf-font-weight-semibold", def: 600 },
-        { label: "Bold",     token: "--sf-font-weight-bold",     def: 700 },
+        { label: "Heading wrap", token: "--sf-heading-text-wrap", defaultVal: "balance" },
+        { label: "Body wrap",    token: "--sf-body-text-wrap",    defaultVal: "pretty" },
       ] as row (row.token)}
-        <div class="group">
-          <div class="flex items-center justify-between mb-1">
-            <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{row.label}</span>
-            {#if row.token in overrides}
-              <button onclick={() => onReset(row.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
-            {/if}
-          </div>
+        {@const current = overrides[row.token] ?? row.defaultVal}
+        <div>
+          <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">{row.label}</div>
           <div class="flex gap-1">
-            {#each WEIGHT_OPTIONS as w (w)}
-              {@const cur = overrides[row.token] ?? String(row.def)}
+            {#each WRAP_OPTIONS as o (o.value)}
               <button
-                onclick={() => w === String(row.def) && !(row.token in overrides) ? undefined : (w === String(row.def) ? onReset(row.token) : onSet(row.token, w))}
-                style={`font-weight:${parseInt(w)}`}
-                class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
-                  cur === w
+                onclick={() => o.value === row.defaultVal && !(row.token in overrides) ? undefined : (o.value === row.defaultVal ? onReset(row.token) : onSet(row.token, o.value))}
+                class={`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${
+                  current === o.value
                     ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
                     : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
                 }`}
-              >{w}</button>
+              >{o.label}</button>
             {/each}
           </div>
         </div>
       {/each}
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- DISPLAY TYPE -->
-  <Section title="Display type" spacing="space-y-4" bind:open={showDisplayType}>
-
-    <ClampField
-      title="Display base size"
-      minValue={dispMin} maxValue={dispMax}
-      min={1.5} max={6} step={0.05} unit="rem"
-      previewKind="type"
-      overridden={"--sf-text-display-base-min" in overrides || "--sf-text-display-base-max" in overrides}
-      onReset={() => { onReset("--sf-text-display-base-min"); onReset("--sf-text-display-base-max"); }}
-      onMinChange={(v) => onSet("--sf-text-display-base-min", String(v))}
-      onMaxChange={(v) => onSet("--sf-text-display-base-max", String(v))}
-    />
-
-    <!-- Display scale multiplier — mirrors the text scale's "Scale multiplier"
-         so both fluid scales expose the same set of adjustments. -->
-    <SliderRow
-      label="Scale multiplier" value={displayScale} min={0.75} max={1.5} step={0.01}
-      help="--sf-text-display-scale — multiplies every display size at once."
-      overridden={"--sf-text-display-scale" in overrides}
-      onChange={(v) => onSet("--sf-text-display-scale", String(v))}
-      onReset={() => onReset("--sf-text-display-scale")}
-    />
-
-    <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
-      Modular ratio is shared with the text scale (Mobile {ratioMin} → Desktop {ratioMax}) — edit it under “Modular scale”.
-    </p>
-
-    <!-- Display line heights (s / m / l) -->
-    <div class="grid grid-cols-3 gap-3">
-      {#each [
-        { label: "Display S", token: "--sf-display-s-line-height", def: 1.1 },
-        { label: "Display M", token: "--sf-display-m-line-height", def: 1.05 },
-        { label: "Display L", token: "--sf-display-l-line-height", def: 1 },
-      ] as row (row.token)}
-        <div>
-          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">{row.label} line-height</div>
-          <SliderRow
-            label="" value={num(row.token, row.def)} min={0.8} max={1.5} step={0.025}
-            overridden={row.token in overrides}
-            onChange={(v) => onSet(row.token, String(v))}
-            onReset={() => onReset(row.token)}
-          />
-        </div>
-      {/each}
-    </div>
-
-    <!-- Display weight -->
-    {@render weightGrid("Display", "--sf-font-weight-display", WEIGHT_DEFAULTS["--sf-font-weight-display"] ?? "700")}
-    {@render weightGrid("Heading", "--sf-font-weight-heading", WEIGHT_DEFAULTS["--sf-font-weight-heading"] ?? "700")}
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- FINE-TUNE (type ramp clamp + rhythm + tracking) -->
-  <Section title="Modular scale (Mobile → Desktop)" spacing="space-y-4" bind:open={showModularScale}>
-    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
-      Utopia-style fluid scale. Each endpoint has three values — viewport width,
-      base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.
-    </p>
-
-    <!-- Viewport endpoints (shared by the type + space scales) -->
-    <ClampField
-      title="Viewport range"
-      minValue={vwMin} maxValue={vwMax}
-      min={15} max={120} step={0.5} unit="rem"
-      minLabel="Mobile" maxLabel="Desktop"
-      overridden={"--sf-fluid-min-vw" in overrides || "--sf-fluid-max-vw" in overrides}
-      onReset={() => { onReset("--sf-fluid-min-vw"); onReset("--sf-fluid-max-vw"); }}
-      onMinChange={(v) => onSet("--sf-fluid-min-vw", String(v))}
-      onMaxChange={(v) => onSet("--sf-fluid-max-vw", String(v))}
-    />
 
-    <ClampField
-      title="Base size &amp; ratio"
-      minValue={baseMin} maxValue={baseMax}
-      min={0.7} max={2} step={0.01} unit="rem"
-      minLabel="Mobile" maxLabel="Desktop"
-      previewKind="type"
-      overridden={"--sf-text-base-min" in overrides || "--sf-text-base-max" in overrides}
-      onReset={() => { onReset("--sf-text-base-min"); onReset("--sf-text-base-max"); }}
-      onMinChange={(v) => onSet("--sf-text-base-min", String(v))}
-      onMaxChange={(v) => onSet("--sf-text-base-max", String(v))}
-      ratioPresets={RATIO_PRESETS}
-      ratioMin={ratioMin} ratioMax={ratioMax}
-      ratioMin_bound={1.05} ratioMax_bound={1.8}
-      onRatioMinChange={(v) => onSet("--sf-text-ratio-min", String(v))}
-      onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
-    />
-
-    <!-- Text scale multiplier — mirrors the display scale's "Scale multiplier". -->
-    <SliderRow
-      label="Scale multiplier" value={textScale} min={0.75} max={1.5} step={0.01}
-      help="--sf-text-scale — multiplies every text size at once."
-      overridden={"--sf-text-scale" in overrides}
-      onChange={(v) => onSet("--sf-text-scale", String(v))}
-      onReset={() => onReset("--sf-text-scale")}
-    />
-
-    <!-- Line height scale -->
-    <div>
-      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Line height scale</div>
-      <div class="space-y-2">
-        {#each LEADING_TOKENS as t (t.token)}
-          <SliderRow
-            label={t.label} value={getLeadingVal(t)} min={1.0} max={2.2} step={0.05}
-            help={`${t.token} — ${t.label.toLowerCase()} line height`}
-            overridden={t.token in overrides}
-            onChange={(v) => onSet(t.token, String(v))}
-            onReset={() => onReset(t.token)}
-          />
-        {/each}
+      <!-- Link external marker -->
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External marker</span>
+        <input
+          type="text"
+          value={overrides["--sf-link-external-marker"] ?? ""}
+          aria-label="External link marker"
+          placeholder={'" ↗"'}
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value;
+            v ? onSet("--sf-link-external-marker", v) : onReset("--sf-link-external-marker");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-link-external-marker" in overrides}
+          <button onclick={() => onReset("--sf-link-external-marker")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
       </div>
-    </div>
 
-    <SliderRow
-      label="Leading taper" value={taper} min={0} max={0.5} step={0.01}
-      help="How aggressively large display sizes shrink their line-height."
-      overridden={"--sf-leading-taper" in overrides}
-      onChange={(v) => onSet("--sf-leading-taper", String(v))}
-      onReset={() => onReset("--sf-leading-taper")}
-    />
-
-    <!-- Letter-spacing scale -->
-    <div>
-      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Letter-spacing scale</div>
-      <p class="text-[9px] text-slate-400 dark:text-slate-600 mb-2">
-        Overriding these propagates to heading sizes that reference them.
-      </p>
-      <div class="space-y-2">
-        {#each TRACKING_TOKENS as t (t.token)}
-          <div class="group">
-            <div class="flex items-center justify-between mb-1">
-              <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{t.label}</span>
-              {#if t.token in overrides}
-                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
-              {/if}
-            </div>
-            <RangeWithNumber
-              value={getTrackingVal(t)}
-              min={-0.1} max={0.2} step={0.005} unit="em"
-              onChange={(v) => onSet(t.token, `${v}em`)}
-            />
-          </div>
-        {/each}
+      <!-- Link external label (screen-reader text for the marker glyph) -->
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External label</span>
+        <input
+          type="text"
+          value={overrides["--sf-link-external-label"] ?? ""}
+          aria-label="External link label"
+          placeholder={'"opens in a new window or external site"'}
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value;
+            v ? onSet("--sf-link-external-label", v) : onReset("--sf-link-external-label");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-link-external-label" in overrides}
+          <button onclick={() => onReset("--sf-link-external-label")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
       </div>
     </div>
-
-    <!-- Advanced power knobs — de-emphasised, at end of the scale group -->
-    <div class="pt-1">
-      <button
-        onclick={() => { showScaleAdvanced = !showScaleAdvanced; }}
-        aria-expanded={showScaleAdvanced}
-        class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
-      >
-        <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
-        <span class="text-[10px]">{showScaleAdvanced ? "▲" : "▼"}</span>
-      </button>
-      {#if showScaleAdvanced}
-        <div class="mt-3 space-y-4">
-          {#each knobs as k (k.name)}
-            <PowerKnobRow
-              knob={k}
-              {overrides}
-              onChange={(name, val) => val === null ? onReset(name) : onSet(name, val)}
-            />
-          {/each}
-        </div>
-      {/if}
-    </div>
   </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- SCALE PREVIEW -->
-  <section>
-    <button
-      onclick={() => { showScalePreview = !showScalePreview; }}
-      aria-expanded={showScalePreview}
-      class="w-full flex items-center justify-between cursor-pointer mb-3"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scale preview</div>
-      <span class="text-[10px] text-slate-500">{showScalePreview ? "▲" : "▼"}</span>
-    </button>
-    {#if showScalePreview}
-    {@const midBase = (baseMin + baseMax) / 2}
-    {@const midDisp = (dispMin + dispMax) / 2}
-    {@const midRatio = (ratioMin + ratioMax) / 2}
-    <!-- Each "Aa" renders at its real midpoint rem size — no cap. The box
-         scrolls if the largest steps are tall so nothing is distorted. -->
-    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 max-h-96 overflow-y-auto">
-      <div class="text-[9px] font-semibold text-slate-500 mb-1">Text</div>
-      {#each [...TEXT_STEPS].reverse() as { label, factor } (label)}
-        {@const size = midBase * factor * textScale}
-        <div class="flex items-baseline gap-2">
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
-          <span
-            class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
-            style={`font-size: ${size.toFixed(3)}rem; font-family: ${currentBodyFont || "inherit"}`}
-          >Aa</span>
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
-        </div>
-      {/each}
-
-      <div class="text-[9px] font-semibold text-slate-500 mt-3 mb-1">Display</div>
-      {#each [
-        { label: "l", factor: midRatio * midRatio },
-        { label: "m", factor: midRatio },
-        { label: "s", factor: 1 },
-      ] as { label, factor } (label)}
-        {@const size = midDisp * factor * displayScale}
-        <div class="flex items-baseline gap-2">
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
-          <span
-            class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
-            style={`font-size: ${size.toFixed(3)}rem; font-family: ${currentHeadingFont || currentBodyFont || "inherit"}`}
-          >Aa</span>
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
-        </div>
-      {/each}
-    </div>
-    {/if}
-  </section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- LINE LENGTHS -->
+  <!-- ═══ 7. LINE LENGTHS — per-step max-widths ═══ -->
   <Section title="Line lengths (max-width)" bind:open={showLineLengths}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Per-text-size max-width caps on <span class="font-mono text-slate-600 dark:text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-600 dark:text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-600 dark:text-slate-400">ch</span> units for character-based measures.
@@ -873,6 +861,7 @@
             <input
               type="text"
               value={overrides[row.token] ?? ""}
+              aria-label={`${row.label} max width`}
               placeholder={row.def}
               oninput={(e) => {
                 const v = (e.target as HTMLInputElement).value.trim();
@@ -887,83 +876,4 @@
         {/each}
       </div>
   </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- ADVANCED TYPOGRAPHY -->
-  <Section title="Advanced typography" bind:open={showAdvancedType}>
-      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-600 dark:text-slate-400">normal</span> unless your font supports these features.</p>
-
-      <!-- font-numeric -->
-      <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Numeric figures</div>
-        <div class="flex gap-1">
-          {#each [["tabular-nums", "tabular-nums (default)"], ["proportional-nums", "proportional-nums"], ["normal", "normal"]] as [val, label] (val)}
-            {@const cur = overrides["--sf-font-numeric"] ?? "tabular-nums"}
-            <button
-              onclick={() => val === "tabular-nums" ? onReset("--sf-font-numeric") : onSet("--sf-font-numeric", val)}
-              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${
-                cur === val
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >{label}</button>
-          {/each}
-        </div>
-      </div>
-
-      <!-- optical-sizing -->
-      <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Optical sizing</div>
-        <div class="flex gap-1">
-          {#each [["auto", "auto (default)"], ["none", "none"]] as [val, label] (val)}
-            {@const cur = overrides["--sf-optical-sizing"] ?? "auto"}
-            <button
-              onclick={() => val === "auto" ? onReset("--sf-optical-sizing") : onSet("--sf-optical-sizing", val)}
-              class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
-                cur === val
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >{label}</button>
-          {/each}
-        </div>
-      </div>
-
-      <!-- font-features -->
-      <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Font features</span>
-        <input
-          type="text"
-          value={overrides["--sf-font-features"] ?? ""}
-          placeholder="normal"
-          oninput={(e) => {
-            const v = (e.target as HTMLInputElement).value.trim();
-            v ? onSet("--sf-font-features", v) : onReset("--sf-font-features");
-          }}
-          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-        />
-        {#if "--sf-font-features" in overrides}
-          <button onclick={() => onReset("--sf-font-features")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-        {/if}
-      </div>
-
-      <!-- font-variation -->
-      <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Variation</span>
-        <input
-          type="text"
-          value={overrides["--sf-font-variation"] ?? ""}
-          placeholder="normal"
-          oninput={(e) => {
-            const v = (e.target as HTMLInputElement).value.trim();
-            v ? onSet("--sf-font-variation", v) : onReset("--sf-font-variation");
-          }}
-          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-        />
-        {#if "--sf-font-variation" in overrides}
-          <button onclick={() => onReset("--sf-font-variation")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-        {/if}
-      </div>
-  </Section>
 </div>
diff --git a/configurator/tests-components/token-editing.test.js b/configurator/tests-components/token-editing.test.js
index 714e3f76..b8db28ce 100644
--- a/configurator/tests-components/token-editing.test.js
+++ b/configurator/tests-components/token-editing.test.js
@@ -106,13 +106,13 @@ describe('TokenRow', () => {
     render(TokenRow, { props: { token, onSet: () => {}, onReset: () => {} } });
     expect(screen.getByText('space-m')).toBeTruthy();
     expect(screen.getByText('1rem')).toBeTruthy();
-    expect(screen.queryByText('✕')).toBeNull();
+    expect(screen.queryByText('reset')).toBeNull();
   });
 
   test('bind: renders the override value and reset affordance when overridden', () => {
     render(TokenRow, { props: { token, overrideValue: '2rem', onSet: () => {}, onReset: () => {} } });
     expect(screen.getByText('2rem')).toBeTruthy();
-    expect(screen.getByText('✕')).toBeTruthy();
+    expect(screen.getByText('reset')).toBeTruthy();
   });
 
   test('override-set: editing the value and blurring with a new value calls onSet', async () => {
@@ -143,10 +143,10 @@ describe('TokenRow', () => {
     expect(onSet).not.toHaveBeenCalled();
   });
 
-  test('reset: clicking the ✕ button calls onReset directly', async () => {
+  test('reset: clicking the reset button calls onReset directly', async () => {
     const onReset = vi.fn();
     render(TokenRow, { props: { token, overrideValue: '2rem', onSet: () => {}, onReset } });
-    await fireEvent.click(screen.getByText('✕'));
+    await fireEvent.click(screen.getByText('reset'));
     expect(onReset).toHaveBeenCalledOnce();
   });
 });