no hand holding

The line under every nav row, the line under every font select, and the caption
under the preview. Each explained a control to somebody who has already found
it, and the caption was wrong as well — there is no Save to press.

The nav rows are one line now, so they centre.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/LayoutPanel.tsx

@@ -71,10 +71,10 @@ type Layout = {
 
 /** The four roles styles.css declares. A template asks for a role; this decides which face plays it. */
 const ROLES = [
-  { key: 'font_title' as const, label: 'Headings', hint: 'Page and section titles' },
-  { key: 'font_body' as const, label: 'Body', hint: 'Paragraphs and most text' },
-  { key: 'font_sub' as const, label: 'Menu', hint: 'The navigation and small labels' },
-  { key: 'font_display' as const, label: 'Display', hint: 'The largest statements' },
+  { key: 'font_title' as const, label: 'Headings' },
+  { key: 'font_body' as const, label: 'Body' },
+  { key: 'font_sub' as const, label: 'Menu' },
+  { key: 'font_display' as const, label: 'Display' },
 ];
 
 /**
@@ -319,11 +319,9 @@ export const LayoutPanel = () => {
             every select, so the row said four times that a font was chosen and never which. Two columns
             give each one room to be read, which is the only thing this control is for.
 
-            The hint moves into the option list's own space rather than a line under each select, which
-            is where the second row of height was really going.
           */}
           <div className="grid grid-cols-2 gap-3">
-            {ROLES.map(({ key, label, hint }) => (
+            {ROLES.map(({ key, label }) => (
               <div key={key} className="flex flex-col gap-1">
                 <label className="text-xs">{label}</label>
                 <select
@@ -342,7 +340,6 @@ export const LayoutPanel = () => {
                     </option>
                   ))}
                 </select>
-                <span className="truncate text-[10px] text-muted-foreground">{hint}</span>
               </div>
             ))}
           </div>