diff --git a/.gitignore b/.gitignore
index 8bbf8e72f5..61594e6e47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@ dist
 .docs-review
 
 # Internal process artifacts (superpowers / brainstorming specs)
-docs/superpowers/
\ No newline at end of file
+docs/superpowers/
+.superpowers/
\ No newline at end of file
diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index fef88d3c57..eb46767aa6 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
-import type { CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type { Catalog, Manifest, VoiceRow } from "./types";
 import { Skeleton } from "../skeleton/index";
 
@@ -28,6 +28,52 @@ const MOBILE_QUERY = "(max-width: 640px)";
 // Multiples of the max column count (4) so every page fills complete rows; 4 = a single row.
 const PAGE_SIZE_OPTIONS = [4, 8, 12, 24, 48, 96];
 
+// ── Display-time data cleanup ────────────────────────────────────────────────────────────────
+// These three helpers normalize the raw catalog values for display only — the underlying data,
+// the copy payload, and the tooltips keep the originals. They are an INTERIM UI fix: the canonical
+// home for this cleanup is the generation pipeline (temp/voice_widget/providers/{elevenlabs,
+// cartesia}.py via make_voice()), so re-running the pipeline and re-uploading the CDN bundle is a
+// clean lift-and-shift that retires these. The model string is shown verbatim (no remapping).
+
+// Clean display name: ElevenLabs/Cartesia bake a marketing sentence into the name
+// ("Austin Knox V3 - Good ol' Texas boy…"); split on the first SPACE-BOUNDED dash (" -"/" –"/" —")
+// and keep the leading segment. Verified against the full catalog: fires only on ElevenLabs (70) +
+// Cartesia (535), 0 false positives — Google/Polly/Azure names use spaceless hyphens
+// ("ar-XA-Chirp3-HD-Achernar", "Joanna-Neural") and are never touched. The full original stays in
+// title=/the icon tooltip. Pipeline home: providers/{elevenlabs,cartesia}.py make_voice().
+function cleanName(displayName: string): string {
+  const m = displayName.match(/\s[-–—]\s/);
+  if (!m || m.index === undefined) return displayName;
+  const lead = displayName.slice(0, m.index).trim();
+  // Guard against degenerate leads (too short/long to be a real name) — fall back to the original.
+  return lead.length >= 2 && lead.length <= 28 ? lead : displayName;
+}
+
+// Friendly language: turn a BCP-47 code ("af-ZA", "el") into an English name via Intl.DisplayNames
+// (resolves ~99% of real codes); fall back to the raw code on any miss/throw.
+function friendlyLanguage(code: string): string {
+  if (!code) return code;
+  try {
+    return new Intl.DisplayNames(["en"], { type: "language" }).of(code) || code;
+  } catch {
+    return code;
+  }
+}
+
+// Normalize gender: the catalog mixes "feminine"/"masculine" with "male"/"female"; map to the
+// display forms and HIDE "unknown" (599 voices) rather than render "Unknown". Returns "" to hide.
+function normalizeGender(gender: string): string {
+  switch (gender) {
+    case "feminine": case "female": return "Female";
+    case "masculine": case "male": return "Male";
+    case "neutral": return "Neutral";
+    case "non-binary": return "Non-binary";
+    case "unknown": case "": return "";
+    default: return gender.charAt(0).toUpperCase() + gender.slice(1);
+  }
+}
+
+
 type FilterKey = "search" | "provider" | "language" | "gender" | "group" | "pageSize";
 
 // Client-side row: a catalog voice joined with its clip, plus two precomputed fields — `_search`,
@@ -109,8 +155,10 @@ export interface VoiceWidgetProps {
   /** Cards rendered per page (page-size limit). Default: 48. Keeps the DOM small and the catalog fast. */
   pageSize?: number;
   /**
-   * Fixed number of grid columns. Default: 3. Collapses to 1 column on phones regardless. Pass 0
-   * for a responsive auto-fill grid (≈240px min per card) instead of a fixed count.
+   * Fixed number of grid columns. Default: 0 (a responsive equal-width auto-fill grid — 2-up in the
+   * docs prose column, 3-up only when the container is genuinely wide, every card a fixed ≥320px so
+   * none is squished). Pass a positive N to force exactly N equal columns. Collapses to 1 column on
+   * phones regardless.
    */
   columns?: number;
   /**
@@ -129,7 +177,8 @@ export interface VoiceWidgetProps {
   /**
    * Toggle the filter/search controls. `true` or unset shows all; `false` hides all (just the
    * title + grid). An object toggles individual controls — `search`, `provider`, `language`,
-   * `gender`, `group`, `pageSize` — each defaulting on unless set `false`. The provider control is
+   * `gender`, `group`, `pageSize` — each defaulting on unless set `false`. The search control
+   * defaults to `false` (hidden) unless explicitly set to `true`. The provider control is
    * always hidden when the `provider` lock prop is set.
    */
   filters?: boolean | Partial<Record<FilterKey, boolean>>;
@@ -142,7 +191,7 @@ export function VoiceWidget({
   audioBaseUrl = AUDIO_BASE,
   groupBy: initialGroup = "provider",
   pageSize = DEFAULT_PAGE_SIZE,
-  columns = 3,
+  columns = 0,
   provider: lockedProvider,
   voiceIds,
   filters,
@@ -183,16 +232,19 @@ export function VoiceWidget({
   // single column is an excessive scroll on a phone.
   const isMobile = useIsMobile();
   const effectivePageSize = isMobile ? Math.min(pageSizeChoice, MOBILE_PAGE_SIZE) : pageSizeChoice;
-  const pageSizeOpts = [...new Set([...PAGE_SIZE_OPTIONS, pageSize])].sort((a, b) => a - b);
+  const pageSizeOpts = [...new Set([...PAGE_SIZE_OPTIONS, pageSize])].sort((a, b) => a - b)
+    .filter((n) => !columns || columns <= 0 || n % columns === 0);
 
   // Resolve which filter/search controls are visible. `filters` is a boolean (all on/off) or a
-  // per-control object; each control defaults on unless explicitly false.
+  // per-control object; each control defaults on unless explicitly false. The `search` control
+  // defaults to off (must be opted in) — all others default on.
   const showFilter = (key: FilterKey) =>
     filters === false ? false
-    : filters && typeof filters === "object" ? filters[key] !== false
-    : true;
+    : filters && typeof filters === "object"
+      ? key === "search" ? filters[key] === true : filters[key] !== false
+    : key === "search" ? false : true;
   const showProvider = !lock && showFilter("provider");
-  const showGroup = group !== "none" && showFilter("group");
+  const showGroup = group !== "none" && showFilter("group") && !lock;
 
   useEffect(() => {
     let alive = true;
@@ -206,10 +258,15 @@ export function VoiceWidget({
   // them once here instead of re-checking the full catalog inside the per-keystroke filter below.
   // Everything downstream — dropdown options, search, grouping, pagination — then works over only
   // the voices this embed can ever show (12 on the index, one provider's voices on a provider page).
+  // Also drops no-preview voices (missing/errored clip) here so every visible card is auditionable —
+  // no dimmed "no sample" cards. Defensive: the current bundle has 0 such voices (the catalog/
+  // manifest delta is duplicate-key Rime rows sharing a clip). Caveat: if a provider's synthesis
+  // ever fails wholesale its voices silently drop from the widget — the pipeline's --diff flag
+  // catches that, and it beats showing broken cards.
   const baseRows = useMemo(() => {
     if (!allRows) return null;
-    if (!idAllowlist && !lock) return allRows;
     return allRows.filter((r) =>
+      r.clip?.status === "ok" &&
       (!idAllowlist ||
         idAllowlist.has(r.voice_id.toLowerCase()) ||
         idAllowlist.has(r.key.toLowerCase()) ||
@@ -324,23 +381,36 @@ export function VoiceWidget({
   }, []);
 
   if (error) return <div className="vw vw-error">Failed to load voices: {error}</div>;
-  if (!baseRows) return <VoiceWidgetSkeleton gridStyle={gridStyle} />;
+  if (!baseRows) return <VoiceWidgetSkeleton gridStyle={gridStyle} pills={[showProvider, showFilter("language"), showFilter("gender")].filter(Boolean).length} />;
 
   // Step from safePage, not the raw page state: `page` can be stale-high after effectivePageSize
   // grows (a mobile→desktop resize isn't in filterSig), and stepping from it makes Prev appear
   // dead until the raw value catches back up with the clamped one.
   const pager = pageCount > 1 ? (
     <nav className="vw-pager" aria-label="Voice pages">
-      <button className="vw-pager-btn" onClick={() => setPage(Math.max(0, safePage - 1))} disabled={safePage <= 0}>
+      <button className="vw-page vw-page-nav" onClick={() => setPage(Math.max(0, safePage - 1))} disabled={safePage <= 0}>
         ‹ Prev
       </button>
-      <span className="vw-pager-info">
-        {ordered.length ? `${start + 1}–${end} of ${ordered.length}` : "0 of 0"}
-        <span className="vw-pager-page"> · page {safePage + 1}/{pageCount}</span>
-      </span>
-      <button className="vw-pager-btn" onClick={() => setPage(Math.min(pageCount - 1, safePage + 1))} disabled={safePage >= pageCount - 1}>
+      {pageNumbers(safePage, pageCount).map((p, i) =>
+        p === null ? (
+          <span key={`gap-${i}`} className="vw-page-gap" aria-hidden="true">…</span>
+        ) : (
+          <button key={p} className={`vw-page${p === safePage ? " vw-page-on" : ""}`}
+                  aria-current={p === safePage ? "page" : undefined}
+                  onClick={() => setPage(p)}>
+            {p + 1}
+          </button>
+        ))}
+      <button className="vw-page vw-page-nav" onClick={() => setPage(Math.min(pageCount - 1, safePage + 1))} disabled={safePage >= pageCount - 1}>
         Next ›
       </button>
+      {showFilter("pageSize") && (
+        <label className="vw-perpage">
+          <select aria-label="Voices per page" value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
+            {pageSizeOpts.map((n) => <option key={n} value={n}>{n} / page</option>)}
+          </select>
+        </label>
+      )}
     </nav>
   ) : null;
 
@@ -348,14 +418,16 @@ export function VoiceWidget({
     <div className="vw">
       <audio ref={audioRef} onEnded={() => setPlayingKey(null)} preload="none" />
       <header className="vw-head">
-        <div className="vw-title">TTS Voices <span className="vw-count">{filtered.length}</span></div>
-        {showFilter("search") && (
-          <input className="vw-search" placeholder="Search voices…" value={q}
-                 onChange={(e) => setQ(e.target.value)} />
-        )}
+        <div className="vw-title">
+          {lock && baseRows[0] ? `${baseRows[0].provider} voices` : "TTS Voices"}
+          <span className="vw-count">
+            {baseRows.length.toLocaleString()} {baseRows.length === 1 ? "voice" : "voices"}
+            {filtered.length !== baseRows.length && <> · {filtered.length.toLocaleString()} matching</>}
+          </span>
+        </div>
       </header>
 
-      {(showProvider || showFilter("language") || showFilter("gender") || showFilter("pageSize") || showGroup) && (
+      {(showFilter("search") || showProvider || showFilter("language") || showFilter("gender") || showGroup) && (
         <div className="vw-filters">
           {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} />}
           {showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
@@ -363,36 +435,32 @@ export function VoiceWidget({
             <Select label="Gender" value={gender} onChange={setGender}
                     opts={["male", "female", "neutral", "unknown"]} />
           )}
-          {showFilter("pageSize") && (
-            <label className="vw-select">
-              <span>Per page</span>
-              <select value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
-                {pageSizeOpts.map((n) => <option key={n} value={n}>{n}</option>)}
-              </select>
-            </label>
+          {showFilter("search") && (
+            <input className="vw-search" placeholder="Search voices…" value={q}
+                   onChange={(e) => setQ(e.target.value)} />
           )}
           {showGroup && (
-            <div className="vw-group">
-              <button className={group === "provider" ? "on" : ""} onClick={() => setGroup("provider")}>by provider</button>
-              <button className={group === "language" ? "on" : ""} onClick={() => setGroup("language")}>by language</button>
+            <div className="vw-group" role="group" aria-label="Group voices">
+              <button className={group === "provider" ? "on" : ""} aria-pressed={group === "provider"}
+                      onClick={() => setGroup("provider")}>By provider</button>
+              <button className={group === "language" ? "on" : ""} aria-pressed={group === "language"}
+                      onClick={() => setGroup("language")}>By language</button>
             </div>
           )}
         </div>
       )}
 
-      {pager}
-
       {pageSections.length === 0 ? (
         <p className="vw-empty">No voices match your filters.</p>
       ) : (
         pageSections.map((sec, i) => (
           <section key={`${sec.name}-${i}`} className="vw-section">
             {sec.name && <h3 className="vw-section-title">{sec.name} <span>{groupTotals.get(sec.name)}</span></h3>}
-            <div className="vw-grid" style={gridStyle}>
+            <FadeGrid style={gridStyle}>
               {sec.items.map((r) => (
                 <Card key={r._uid} r={r} playing={playingKey === r._uid} onPlay={play} onCopy={copyConfig} />
               ))}
-            </div>
+            </FadeGrid>
           </section>
         ))
       )}
@@ -402,12 +470,59 @@ export function VoiceWidget({
   );
 }
 
+// The loaded grid, fading/rising into the slots the skeleton held (no hard swap; reduced-motion-
+// gated in CSS). The `vw-fadein` animation (opacity + translateY) makes the grid a stacking context
+// for its duration AND — because of animation-fill-mode — permanently afterward. That would trap a
+// first-row card's sample-text popover *below* the sticky toolbar (z-index:2): the card's hover/
+// focus z-index can't escape the grid's stacking context. So drop the class once the animation ends,
+// returning the grid to a plain (z-index:auto) element whose hovered card can rise above the toolbar.
+function FadeGrid({ style, children }: { style?: CSSProperties; children: ReactNode }) {
+  const [animating, setAnimating] = useState(true);
+  return (
+    <div className={`vw-grid${animating ? " vw-fadein" : ""}`} style={style}
+         onAnimationEnd={() => setAnimating(false)}>
+      {children}
+    </div>
+  );
+}
+
+// Inline SVG icons with a shared `vw-` styling hook. Fern's <Icon>/<Tooltip> are global MDX-only
+// components — there is no @fern-* package to import them from (the components bundler only resolves
+// React + this folder), and FontAwesome ships only as Fern component props (icon="fa-…"), not a
+// global stylesheet that would style raw <i class="fa-…"> we emit here — so neither is usable from
+// this custom TSX. Self-contained SVGs (matching the design mockups) are the only path that's
+// guaranteed to render. Decorative ones are marked aria-hidden where rendered.
+const IconGlobe = () => (
+  <span className="vw-ic" aria-hidden="true">
+    <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.3" /><ellipse cx="8" cy="8" rx="2.6" ry="6.2" stroke="currentColor" strokeWidth="1.3" /><path d="M2 8h12" stroke="currentColor" strokeWidth="1.3" /></svg>
+  </span>
+);
+const IconPerson = () => (
+  <span className="vw-ic" aria-hidden="true">
+    <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="2.6" stroke="currentColor" strokeWidth="1.3" /><path d="M3.5 13c0-2.4 2-4 4.5-4s4.5 1.6 4.5 4" stroke="currentColor" strokeWidth="1.3" /></svg>
+  </span>
+);
+const IconInfo = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.4" /><path d="M8 7v4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /><circle cx="8" cy="5" r="0.8" fill="currentColor" /></svg>
+);
+const IconCopy = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4" /><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2H4a1.5 1.5 0 0 0-1.5 1.5V11A1.5 1.5 0 0 0 4 12.5" stroke="currentColor" strokeWidth="1.4" /></svg>
+);
+// Play/stop as inline SVG (not the "▶"/"■" chars, which are emoji-capable and render as an OS color
+// emoji on some platforms). Filled with currentColor so they follow the button's rest/hover/playing
+// color. The triangle is nudged right of viewBox-center so it reads optically centered in the circle.
+const IconPlay = () => (
+  <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.5v9l7-4.5z" fill="currentColor" /></svg>
+);
+const IconStop = () => (
+  <svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4.5" y="4.5" width="7" height="7" rx="1" fill="currentColor" /></svg>
+);
+
 // Memoized so that playing/pausing a voice (which re-renders the widget) only re-renders the two
 // cards whose `playing` flag actually changed — not all ~60 cards on the page.
 const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
   r: Row; playing: boolean; onPlay: (r: Row) => void; onCopy: (r: VoiceRow) => Promise<boolean> | void;
 }) {
-  const disabled = !r.clip || r.clip.status !== "ok";
   const [copied, setCopied] = useState(false);
   const copyTimer = useRef<ReturnType<typeof setTimeout>>();
   useEffect(() => () => clearTimeout(copyTimer.current), []);
@@ -421,55 +536,108 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
     });
   };
 
+  // Display-time cleanup (originals stay in the catalog, the copy payload, and the title/tooltip).
+  const name = cleanName(r.display_name);
+  const language = friendlyLanguage(r.primary_language);
+  const gender = normalizeGender(r.gender);
+  const model = r.model || null;
+  const tipId = `vw-tip-${r._uid}`;
+
   return (
-    <article className={`vw-card${r.clip?.status === "error" || !r.clip ? " vw-disabled" : ""}`}>
-      <span className="vw-badge">{r.provider}</span>
+    // Per-card accessible name so screen-reader users navigate the grid as a list of named voices.
+    <article className="vw-card" aria-label={name}>
       <div className="vw-card-top">
-        <button className="vw-play" disabled={disabled} onClick={() => onPlay(r)}
-                aria-label={`Play ${r.display_name}`}>{playing ? "❚❚" : "▶"}</button>
-        <div className="vw-name" title={r.display_name}>{r.display_name}</div>
+        <button className={`vw-play${playing ? " vw-playing" : ""}`} onClick={() => onPlay(r)}
+                aria-label={playing ? `Stop ${name}` : `Play ${name}`}>
+          {playing ? (
+            <>
+              {/* Two glyphs for the playing state: animated bars normally, a static stop square when
+                  the user prefers reduced motion (CSS swaps their display). */}
+              <span className="vw-eq" aria-hidden="true"><i /><i /><i /></span>
+              <span className="vw-stop" aria-hidden="true"><IconStop /></span>
+            </>
+          ) : <IconPlay />}
+        </button>
+        {/* Cleaned name; the full original stays in title= (and the tooltip below). lang tags the
+            native script for screen-reader pronunciation and language-appropriate glyph forms. */}
+        <div className="vw-name" lang={r.primary_language || undefined} title={r.display_name}>{name}</div>
+        {r.clip?.sample_text && (
+          // Icon-anchored sample-text popover. Focusable trigger + aria-describedby so the sample is
+          // announced (not just shown on hover); reveal is hover/focus-within (see CSS).
+          <span className="vw-tooltip-wrap" tabIndex={0} aria-describedby={tipId}>
+            <span className="vw-tooltip-icon"><IconInfo /></span>
+            <span className="vw-tooltip" id={tipId} role="tooltip" lang={r.primary_language || undefined}>“{r.clip.sample_text}”</span>
+          </span>
+        )}
       </div>
+      {/* Meta — language · gender, each with a decorative type icon. "unknown" gender is hidden. */}
       <div className="vw-meta">
-        <span className="vw-lang">{r.primary_language}</span>
-        <span className={`vw-gender vw-${r.gender}`}>{r.gender}</span>
-        {r.model && <span className="vw-model">{r.model}</span>}
+        <span className="vw-it"><IconGlobe />{language}</span>
+        {gender && <span className="vw-it"><IconPerson /><span className="vw-gender">{gender}</span></span>}
+      </div>
+      {/* Footer — PROVIDER · model (neutral inline-code) left, copy right. The left group is shrink-
+          safe (min-width:0 + model ellipsis) so it never forces the grid column wider. */}
+      <div className="vw-foot">
+        <span className="vw-foot-l">
+          <span className="vw-prov" title={r.provider}>{r.provider}</span>
+          {model && <>
+            <span className="vw-foot-mid" aria-hidden="true">·</span>
+            <code className="vw-model">{model}</code>
+          </>}
+        </span>
+        {/* Both copy variants stay in the DOM; the container query (CSS) shows the labeled button at
+            ≤2 columns and the icon-only one at 3+. Payload is identical (display_name) for both. */}
+        <button className={`vw-copy-t${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
+          <IconCopy />{copied ? "✓ Copied" : "Copy config"}
+        </button>
+        <button className={`vw-copy-i${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite"
+                aria-label={copied ? "Copied" : "Copy config"} title="Copy config">
+          {copied ? "✓" : <IconCopy />}
+        </button>
       </div>
-      {r.clip?.sample_text && <p className="vw-sample">“{r.clip.sample_text}”</p>}
-      {(!r.clip || r.clip.status === "error") &&
-        <p className="vw-note">{r.clip?.error ?? "no sample (provider key missing)"}</p>}
-      {/* Both labels are always in the DOM and grid-stacked (see CSS) so the button keeps the width
-          of the wider one — no layout shift when it swaps to the copied state. */}
-      <button className={`vw-copy${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
-        <span className="vw-copy-default">copy config</span>
-        <span className="vw-copy-done">✓ copied</span>
-      </button>
     </article>
   );
 });
 
-// Loading state: skeleton placeholders that mirror the real header + card grid, so the layout
-// doesn't jump when the data arrives. Built from the shared <Skeleton> primitive.
-function VoiceWidgetSkeleton({ gridStyle }: { gridStyle?: CSSProperties }) {
+// Loading state: skeleton placeholders that mirror the NEW card on the same grid at MATCHING height,
+// so the layout doesn't jump when the data arrives (the core requirement). Built from the shared
+// <Skeleton> shimmer primitive. The footer is the height trap — the real footer is ~34px (copy
+// button + icon) — so the meta/footer placeholders carry the same min-heights as the real card
+// (.vw-sk-meta / .vw-sk-foot). `pills` is the number of toolbar pill placeholders — pass the count
+// of controls that will actually render so filters-off embeds get no phantom toolbar.
+function VoiceWidgetSkeleton({ gridStyle, pills = 3 }: { gridStyle?: CSSProperties; pills?: number }) {
   return (
     <div className="vw" aria-busy="true" aria-label="Loading voices">
       <header className="vw-head">
-        <Skeleton width={150} height={22} />
-        <Skeleton width={220} height={36} radius={10} style={{ marginLeft: "auto" }} />
+        <Skeleton width={120} height={22} />
+        <Skeleton width={90} height={13} />
       </header>
+      {pills > 0 && (
+        <div className="vw-filters">
+          {Array.from({ length: pills }).map((_, i) => (
+            <Skeleton key={i} width={112} height={33} radius={9} />
+          ))}
+        </div>
+      )}
       <div className="vw-grid" style={gridStyle}>
         {Array.from({ length: 8 }).map((_, i) => (
           <article key={i} className="vw-card">
             <div className="vw-card-top">
-              <Skeleton width={32} height={32} radius="50%" />
-              <Skeleton width="55%" height={14} />
+              <Skeleton width={42} height={42} radius="50%" />
+              <Skeleton width="55%" height={15} />
+            </div>
+            {/* Meta: two (icon-dot + text-bar) pairs — language, gender. */}
+            <div className="vw-meta vw-sk-meta">
+              <Skeleton width={13} height={13} radius="50%" />
+              <Skeleton width={54} height={11} />
+              <Skeleton width={13} height={13} radius="50%" />
+              <Skeleton width={42} height={11} />
             </div>
-            <div className="vw-meta">
-              <Skeleton width={48} height={16} radius={6} />
-              <Skeleton width={42} height={16} radius={6} />
+            {/* Footer: provider bar + copy bar, pinned at the real footer height. */}
+            <div className="vw-foot vw-sk-foot">
+              <Skeleton width={74} height={11} />
+              <Skeleton width={86} height={13} />
             </div>
-            <Skeleton width="90%" height={11} />
-            <Skeleton width="70%" height={11} />
-            <Skeleton width={84} height={26} radius={6} />
           </article>
         ))}
       </div>
@@ -494,6 +662,25 @@ function uniq(xs?: string[]): string[] {
   return [...new Set((xs ?? []).filter(Boolean))].sort();
 }
 
+// Windowed page list for the numbered pager: first page, last page, and current ±1, with `null`
+// marking each collapsed gap (rendered as an ellipsis). A gap of exactly one page emits that page
+// number instead — an ellipsis standing in for a single page reads worse than just showing it.
+// Pages are 0-based here, 1-based in the UI.
+function pageNumbers(current: number, count: number): (number | null)[] {
+  const wanted = [...new Set([0, count - 1, current - 1, current, current + 1])]
+    .filter((p) => p >= 0 && p < count)
+    .sort((a, b) => a - b);
+  const out: (number | null)[] = [];
+  for (let i = 0; i < wanted.length; i++) {
+    if (i && wanted[i] - wanted[i - 1] > 1) {
+      if (wanted[i] - wanted[i - 1] === 2) out.push(wanted[i] - 1);
+      else out.push(null);
+    }
+    out.push(wanted[i]);
+  }
+  return out;
+}
+
 // Model-qualified catalog key (<engine>/<voice_id>[:<model>]) — the documented matching form for
 // the voiceIds allowlist. NOT unique in the wild: a few rime voices repeat key+model (once per
 // language, plus literal duplicate rows), so row identity uses Row._uid — this plus a collision
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 0e811f975e..a59fa609c5 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -1,90 +1,269 @@
+/* Non-Latin voice-name fallback. The catalog carries ~190 names across ~24 scripts (Arabic, CJK,
+   Devanagari, Ethiopic, Hangul, …) and the docs body font (Lexend, Latin-only subset) can't render
+   them — Firefox then walks the SYSTEM font list and tofu's on any script the OS lacks (Chrome
+   hardcodes per-script fonts so it hid the bug). Fix: serve Noto via the Google Fonts CSS API, which
+   returns one @font-face per script EACH WITH ITS OWN unicode-range, so the browser downloads only
+   the slices whose glyphs actually appear (CJK is the only heavy one and is itself range-sliced).
+   This needs no build-time knowledge of the glyph set — right for a runtime CDN catalog. The families
+   are wired into --vw-i18n-font below and used per-character after the body font (Latin still Lexend).
+   If a CSP ever blocks fonts.googleapis.com/gstatic.com, self-host range-subsetted Noto instead. */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&family=Noto+Sans+Bengali:wght@400;700&family=Noto+Sans+Tamil:wght@400;700&family=Noto+Sans+Telugu:wght@400;700&family=Noto+Sans+Kannada:wght@400;700&family=Noto+Sans+Malayalam:wght@400;700&family=Noto+Sans+Gujarati:wght@400;700&family=Noto+Sans+Gurmukhi:wght@400;700&family=Noto+Sans+Oriya:wght@400;700&family=Noto+Sans+Sinhala:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans+Lao:wght@400;700&family=Noto+Sans+Khmer:wght@400;700&family=Noto+Sans+Myanmar:wght@400;700&family=Noto+Sans+Ethiopic:wght@400;700&family=Noto+Sans+Armenian:wght@400;700&family=Noto+Sans+Georgian:wght@400;700&family=Noto+Sans+Canadian+Aboriginal:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');
+
 /* Voice widget styles, scoped under .vw so it can be dropped into the docs without clobbering host
-   styles. The palette maps onto the docs' theme-aware brand tokens so the widget follows light/dark
-   mode automatically. */
+   styles. The palette maps onto the docs' theme-aware brand tokens (fern/brand-tokens.css) so the
+   widget follows light/dark mode automatically — no hardcoded colors. The card/grid/meta/footer/
+   model/copy/skeleton rules are ported from the design mockups in
+   docs/superpowers/specs/2026-06-14-voice-widget-card-assets/, with their hardcoded hex values
+   mapped to these tokens:
+     --page  → --bg-page            --card → --bg-surface-raised   --ink  → --fg-default
+     --ink2  → --fg-secondary       --muted → --fg-muted           --line → --border-default
+     --line2 → --grayscale-a4 (lighter hairline)                   --accent → --accent
+     --codebg → --code-bg           --good → --status-success      card lift → --card-shadow/--card-inset
+   The model code is deliberately NEUTRAL (--fg-secondary), NOT --code-fg: the docs inline-<code>
+   --code-fg equals --accent in both themes (blue/turquoise), so a default <code> would render the
+   model the same color as the Copy link and read as clickable. */
 .vw {
   --vw-bg: var(--bg-page);
   --vw-card: var(--bg-surface-raised);
   --vw-line: var(--border-default);
+  /* Lighter than the card border — used only for the footer hairline. Grayscale alpha so it stays
+     subtle on both the light (#E8EAF0) and dark (#222436) card surfaces. */
+  --vw-line2: var(--grayscale-a4);
   --vw-fg: var(--fg-default);
+  --vw-fg2: var(--fg-secondary);
   --vw-muted: var(--fg-muted);
   --vw-accent: var(--accent);
-  --vw-radius: 10px;
-  color: var(--vw-fg); font: 14px/1.45 system-ui, sans-serif;
+  --vw-radius: 12px;
+  /* i18n name stack: the docs body font FIRST (Latin names stay Lexend), then the Noto script
+     families (loaded by the @import above) for per-character fallback on non-Latin glyphs. Applied
+     only to the elements that render catalog text (.vw-name, .vw-tooltip) — provider/model/meta are
+     always Latin. CJK order is SC→JP→KR: the catalog's Han names are mostly Chinese (zh/wuu/yue),
+     so SC first gives the majority correct glyph shapes; Japanese kanji names render with SC Han
+     forms (legible, a hair off — Han unification), Korean Hangul resolves to KR regardless. */
+  --vw-i18n-font: var(--typography-body-font-family), "Noto Sans", "Noto Sans Arabic",
+    "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil",
+    "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati",
+    "Noto Sans Gurmukhi", "Noto Sans Oriya", "Noto Sans Sinhala", "Noto Sans Thai", "Noto Sans Lao",
+    "Noto Sans Khmer", "Noto Sans Myanmar", "Noto Sans Ethiopic", "Noto Sans Armenian",
+    "Noto Sans Georgian", "Noto Sans Canadian Aboriginal", "Noto Sans SC", "Noto Sans JP",
+    "Noto Sans KR", sans-serif;
+  /* Size/line-height only — DON'T override font-family here: inherit the docs body font (Lexend) for
+     the chrome; the non-Latin fallback is scoped to .vw-name/.vw-tooltip via --vw-i18n-font. The
+     earlier `system-ui` override tofu'd non-Latin names on Firefox (system fallback misses scripts). */
+  color: var(--vw-fg); font-size: 14px; line-height: 1.45;
+  /* The widget root is the query container for the responsive Copy switch (see .vw-copy-* below). */
+  container-type: inline-size;
 }
-.vw-loading, .vw-error { padding: 2rem; color: var(--vw-muted); }
-.vw-error { color: var(--error-text); }
-
-.vw-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
-.vw-title { font-size: 1.15rem; font-weight: 700; }
-.vw-count { color: var(--vw-muted); font-weight: 400; margin-left: .35rem; }
-.vw-search { margin-left: auto; padding: .5rem .75rem; min-width: 220px;
-  background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius); color: inherit; }
-
-.vw-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem;
-  position: sticky; top: 0; background: var(--vw-bg); padding: .5rem 0; z-index: 2; }
-.vw-select { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--vw-muted); }
-.vw-select select { padding: .4rem .5rem; background: var(--vw-card); color: var(--vw-fg);
-  border: 1px solid var(--vw-line); border-radius: 8px; }
-.vw-group { display: flex; gap: .25rem; margin-left: auto; }
-.vw-group button { padding: .4rem .6rem; background: var(--vw-card); color: var(--vw-muted);
-  border: 1px solid var(--vw-line); border-radius: 8px; cursor: pointer; }
-.vw-group button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-a3); }
+.vw-error { padding: 2rem; color: var(--error-text); }
+
+.vw-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
+.vw-title { font-size: 1.1rem; font-weight: 700; }
+/* --fg-secondary (not --fg-muted): the count is 10.5–12.5px small text and --fg-muted (#737371)
+   is only ~3.95:1 on the light card — below the AA 4.5:1 floor. */
+.vw-count { color: var(--vw-fg2); font-weight: 400; font-size: .82rem; margin-left: .4rem; }
+
+/* Toolbar: one row of pill controls; sticks below the fixed docs header while the grid scrolls
+   (--header-height is set on :root by the Fern platform; 0 fallback for safety). */
+.vw-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
+  position: sticky; top: var(--header-height, 0px); background: var(--vw-bg); padding: .5rem 0; z-index: 2; }
+.vw-select { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--vw-muted);
+  background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: 9px; padding: .4rem .7rem; }
+.vw-select select { border: none; background: transparent; color: var(--vw-fg); font-weight: 600;
+  font-size: .8rem; padding: 0; cursor: pointer; }
+/* Chromium derives the option popup's colors from the select's computed background — transparent
+   would yield a white popup with near-white text in dark mode, so pin both explicitly. */
+.vw-select option { background: var(--vw-card); color: var(--vw-fg); }
+.vw-search { padding: .4rem .7rem; min-width: 200px; background: var(--vw-card);
+  border: 1px solid var(--vw-line); border-radius: 9px; color: inherit; font-size: .8rem; }
+
+/* Group toggle as a segmented control: gray track, raised active segment. */
+.vw-group { display: flex; margin-left: auto; background: var(--grayscale-a3); border-radius: 9px; padding: 2px; }
+.vw-group button { padding: .35rem .7rem; background: transparent; color: var(--vw-muted); border: none;
+  border-radius: 7px; cursor: pointer; font-size: .78rem; }
+.vw-group button.on { background: var(--vw-card); color: var(--vw-fg); font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
 
 .vw-section { margin-bottom: 1.5rem; }
-.vw-section-title { font-size: .95rem; margin: .5rem 0; text-transform: capitalize; }
-.vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .35rem; }
+.vw-section-title { font-size: .85rem; font-weight: 650; margin: .5rem 0 .6rem; text-transform: capitalize; }
+.vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .3rem; }
 
-/* Column count is driven by --vw-cols (set inline by the `columns` prop; falls back to responsive
-   auto-fill). Defining the template here lets the mobile media query override it regardless. */
+/* Equal-width responsive grid. The column minimum is a FIXED width (set via --vw-col-min), not
+   `auto`: a bare 1fr track is minmax(auto, 1fr) whose minimum is the content's min-content width,
+   so a card with a longer nowrap footer would force its column wider and others narrower (the
+   unequal-width bug). Flooring the minimum guarantees every column — and every card — is exactly
+   equal. `auto-fill` (not auto-fit) keeps a partial last row's cards the same size, left-aligned
+   with trailing space, instead of stretching them to a different width.
+   The 300px floor is tuned to the docs prose column (Fern's w-content-width = 640px): 2×300 + the
+   12px gap = 612 ≤ 640, so the prose column reliably shows 2-up (cards ~314px — comfortably not
+   squished); a genuinely wide container goes 3-up at ≥924px (3×300 + gaps), where the copy switch
+   below also flips. The `columns` prop overrides --vw-cols to a fixed N with --vw-col-min:0 →
+   repeat(N, minmax(0,1fr)); defining the template here (not inline) lets the mobile media query
+   collapse to one column regardless. */
 .vw-grid { display: grid; gap: .75rem;
-  grid-template-columns: repeat(var(--vw-cols, auto-fill), minmax(var(--vw-col-min, 240px), 1fr)); }
+  grid-template-columns: repeat(var(--vw-cols, auto-fill), minmax(var(--vw-col-min, 300px), 1fr)); }
+
+/* Card: uniform shell. overflow:visible so the sample-text popover can escape the card; the grid's
+   default align-items:stretch sizes every card in a row to the tallest, and the footer's
+   margin-top:auto (below) pins it to the bottom so footers line up across the row. The light card
+   (#E8EAF0) is slightly darker than the page, so the lift comes from the border + --card-shadow;
+   --card-inset adds a top highlight in dark mode where the card (#222436) is already lighter. */
 .vw-card { background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius);
-  padding: .75rem; display: flex; flex-direction: column; gap: .5rem; overflow: hidden; }
-.vw-card.vw-disabled { opacity: .55; }
-.vw-card-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
-.vw-play { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
-  background: var(--vw-accent); color: var(--accent-contrast); border: none; font-size: .8rem; }
-.vw-play:disabled { background: var(--grayscale-a4); color: var(--vw-muted); cursor: not-allowed; }
-.vw-name { font-weight: 600; flex: 1 1 auto;
-  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* Provider badge sits in the card's top-right corner, on its own line above the title, tucked into
-   the corner so it can't overlap the title or meta chips and adds no tall empty strip. */
-.vw-badge { font-size: .68rem; padding: .15rem .4rem; border: 1px solid var(--vw-line);
-  border-radius: 999px; color: var(--vw-muted); white-space: nowrap;
-  align-self: flex-end; width: fit-content; max-width: 100%;
-  overflow: hidden; text-overflow: ellipsis; margin: -0.15rem -0.15rem -0.7rem 0; }
-.vw-meta { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .7rem; color: var(--vw-muted); }
-.vw-meta span { padding: .12rem .4rem; background: var(--grayscale-a3); border-radius: 6px; }
-.vw-gender.vw-male { color: #3b82f6; } .vw-gender.vw-female { color: #d6409f; }
-.vw-sample { margin: 0; font-size: .82rem; color: var(--fg-secondary); font-style: italic; }
-.vw-note { margin: 0; font-size: .72rem; color: var(--warning-text); }
-/* margin-top:auto pins copy to the bottom so it aligns across a row regardless of sample length.
-   The two labels are grid-stacked in one cell so the button always sizes to the wider label
-   ("copy config") — swapping to the copied state causes no width change / layout shift. */
-.vw-copy { align-self: flex-start; margin-top: auto; font-size: .72rem; background: transparent;
-  color: var(--vw-accent); border: 1px solid var(--vw-line); border-radius: 6px; padding: .25rem .5rem;
-  cursor: pointer; display: inline-grid; text-align: center; transition: border-color .15s ease; }
-.vw-copy:hover:not(.vw-copied) { border-color: var(--accent); }
-.vw-copy > span { grid-area: 1 / 1; }
-.vw-copy .vw-copy-done { visibility: hidden; }            /* reserves space but hidden until copied */
-.vw-copy.vw-copied .vw-copy-default { visibility: hidden; }
-.vw-copy.vw-copied .vw-copy-done { visibility: visible; }
-.vw-copy.vw-copied { color: #16a34a; border-color: #16a34a; }  /* green check, readable on light + dark */
-
-/* Pagination controls + empty state. */
-.vw-pager { display: flex; align-items: center; justify-content: center; gap: .75rem;
-  margin: 1rem 0; flex-wrap: wrap; }
-.vw-pager-btn { padding: .4rem .8rem; background: var(--grayscale-2); color: var(--fg-default);
-  border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; font-size: .82rem; }
-.vw-pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
-.vw-pager-btn:disabled { opacity: .45; cursor: not-allowed; }
-.vw-pager-info { font-size: .8rem; color: var(--fg-muted); }
-.vw-pager-page { color: var(--fg-muted); }
-.vw-empty { padding: 2rem 0; color: var(--fg-muted); font-size: .9rem; }
+  padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 12px; overflow: visible;
+  position: relative; box-shadow: var(--card-shadow), var(--card-inset);
+  transition: border-color .15s ease, box-shadow .15s ease; }
+.vw-card:hover { box-shadow: var(--card-hover-shadow), var(--card-inset-hover); border-color: var(--card-hover-border); }
+/* The card deliberately does NOT take a z-index on hover. Doing so made the whole card a stacking
+   context above the sticky toolbar (z-index:2), so a card scrolled partly under the toolbar painted
+   OVER it on hover. The card stays at z-index:auto (below the toolbar); only the sample-text popover
+   (z-index:30) needs to escape, and it does so on its own via the .vw query-container stacking
+   context — so the popover paints above the toolbar while the card body never does. */
+.vw-card-top { display: flex; align-items: center; gap: 12px; }
+
+/* Ghost play button: 42px outline circle at rest, fills with the accent while its clip plays. */
+.vw-play { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
+  background: transparent; color: var(--vw-fg); border: 1.5px solid var(--vw-line); font-size: 12px;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background .15s ease, border-color .15s ease, color .15s ease; }
+.vw-play:hover:not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
+.vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
+/* Play (rest) + stop (reduced-motion) SVG glyphs, sized to the old "▶"/"■" footprint. */
+.vw-play svg { width: 14px; height: 14px; display: block; }
+
+/* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below).
+   Mirrors the mockup's @keyframes vw-eqb (staggered scaleY bars). */
+.vw-eq { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 13px; }
+.vw-eq i { width: 2.5px; background: currentColor; border-radius: 1px; transform-origin: 50% 100%;
+  animation: vw-eqb 1s ease-in-out infinite; }
+.vw-eq i:nth-child(1) { height: 60%; }
+.vw-eq i:nth-child(2) { height: 100%; animation-delay: .2s; }
+.vw-eq i:nth-child(3) { height: 45%; animation-delay: .4s; }
+@keyframes vw-eqb { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
+.vw-stop { display: none; }
+
+/* Name is the copyable identity, so it's never ellipsized mid-name: cleaned community names sit on
+   one line, only the longest untouched technical names (cmn-CN-Chirp3-HD-Zubenelgenubi) take a
+   graceful 2nd line at their hyphens. The full original name lives in title=/the icon tooltip. */
+.vw-name { flex: 1; min-width: 0; font-family: var(--vw-i18n-font); font-weight: 650;
+  font-size: 15.5px; letter-spacing: -.012em;
+  line-height: 1.25; overflow: hidden; word-break: break-word;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+
+/* Meta line — perceptual identity: language · gender, each with a small type icon. */
+.vw-meta { display: flex; align-items: center; gap: 13px; font-size: 12.5px; color: var(--vw-fg2);
+  min-height: 15px; }
+.vw-meta .vw-it { display: inline-flex; align-items: center; gap: 5px; }
+.vw-gender { text-transform: capitalize; }
+/* Small decorative type icons (globe/person) — muted, sized 13px. aria-hidden in the markup. */
+.vw-ic { display: inline-flex; align-items: center; color: var(--vw-muted); flex: 0 0 auto; }
+.vw-ic svg { width: 13px; height: 13px; }
+
+/* Sample-text popover: a fixed-width (210px), icon-anchored disclosure clamped to the card edge —
+   consistent at any column count and independent of name length (it positions on the icon, not the
+   card width). Revealed on hover/focus-within; the trigger carries aria-describedby → .vw-tooltip. */
+.vw-tooltip-wrap { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center;
+  color: var(--vw-muted); cursor: help; transition: color .15s ease; }
+.vw-tooltip-wrap:hover, .vw-tooltip-wrap:focus-within { color: var(--vw-accent); }
+.vw-tooltip-icon { display: inline-flex; }
+.vw-tooltip-icon svg { width: 15px; height: 15px; }
+.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); right: -5px; width: 210px;
+  background: var(--vw-card); color: var(--vw-fg2);
+  border: 1px solid var(--vw-line); border-radius: 9px; padding: 8px 11px;
+  font-family: var(--vw-i18n-font); font-size: 11.5px; font-style: italic; line-height: 1.45;
+  box-shadow: var(--card-hover-shadow); z-index: 30; pointer-events: none; }
+.vw-tooltip::after { content: ""; position: absolute; top: 100%; right: 14px;
+  border: 6px solid transparent; border-top-color: var(--vw-card); }
+.vw-tooltip-wrap:hover .vw-tooltip,
+.vw-tooltip-wrap:focus-within .vw-tooltip { display: block; }
+
+/* Footer — config identity. Hairline top border; provider · inline-code model on the left, copy on
+   the right. margin-top:auto pins it to the card bottom so footers align across a row. */
+.vw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--vw-line2); }
+/* Shrink-safe left group: min-width:0 + the model ellipsis below let it shrink instead of forcing
+   the grid column wider (the unequal-width fix). */
+.vw-foot-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.vw-foot-mid { color: var(--vw-muted); opacity: .5; flex: 0 0 auto; }
+/* --fg-secondary (not --fg-muted): 10.5px provider label needs AA ≥4.5:1 on the light card. */
+.vw-prov { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
+  color: var(--vw-fg2); white-space: nowrap; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
+/* Model: the real (normalized) model as NEUTRAL inline-code — mono + --code-bg + --fg-secondary fg
+   (NOT --code-fg, which equals --accent and would read as clickable). Single-line, ellipsizes at the
+   tail if unusually long; the raw model stays in title=/copy. */
+.vw-model { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vw-fg2);
+  background: var(--code-bg); border-radius: 5px; padding: 1px 6px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+
+/* Responsive copy. The trigger is column count, not card width (cards are ~314px+ at every density),
+   so a container query on the widget root toggles which variant shows: labeled "Copy config" at
+   ≤2 columns (container < 924px, incl. the docs prose column), icon-only clipboard at 3+ columns
+   (≥ 924px = 3 × 300px + gaps — the same width the grid flips to 3-up). Both stay in the DOM; the
+   container query toggles display. The copied state greens via --status-success (theme-aware). */
+.vw-copy-t { font-size: 12.5px; color: var(--vw-accent); background: none; border: none; font-weight: 550;
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: 0 0 auto;
+  padding: 0; white-space: nowrap; }
+.vw-copy-t svg { width: 13px; height: 13px; }
+.vw-copy-i { display: none; flex: 0 0 auto; width: 28px; height: 28px; margin: -4px -4px -4px 0;
+  border: none; background: none; color: var(--vw-accent); border-radius: 7px;
+  align-items: center; justify-content: center; cursor: pointer; }
+.vw-copy-i svg { width: 15px; height: 15px; }
+.vw-copy-t.vw-copied, .vw-copy-i.vw-copied { color: var(--status-success); }
+@container (min-width: 924px) {
+  .vw-copy-t { display: none; }
+  .vw-copy-i { display: inline-flex; }
+}
+
+/* Smooth resolve: the loaded grid fades/rises into the slots the skeleton held, instead of a hard
+   swap. Gated behind reduced-motion below. */
+.vw-fadein { animation: vw-in .45s cubic-bezier(.2,.7,.2,1) both; }
+@keyframes vw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+/* Skeleton: the loading card mirrors the real one on the same grid at MATCHING height (zero layout
+   shift). The footer is the height trap — these min-heights pin the meta/footer sections to the real
+   card's values (~15px meta, ~34px footer) so the skeleton card height equals the loaded one. */
+.vw-sk-meta { min-height: 15px; }
+.vw-sk-foot { min-height: 34px; }
+
+/* Reduced motion: static stop glyph instead of animated bars, no transitions, no fade-in.
+   (The shimmer primitive disables its own animation in components/skeleton/styles.css.) */
+@media (prefers-reduced-motion: reduce) {
+  .vw-eq { display: none; }
+  .vw-stop { display: inline; }
+  .vw-card, .vw-play, .vw-tooltip-wrap { transition: none; }
+  .vw-fadein { animation: none; }
+}
+
+/* Visible focus rings on every interactive control, both themes (2px accent outline + offset). */
+.vw-play:focus-visible, .vw-copy-t:focus-visible, .vw-copy-i:focus-visible,
+.vw-tooltip-wrap:focus-visible, .vw-page:focus-visible,
+.vw-select select:focus-visible, .vw-search:focus-visible,
+.vw-group button:focus-visible, .vw-perpage select:focus-visible {
+  outline: 2px solid var(--vw-accent); outline-offset: 2px; border-radius: 8px;
+}
+.vw-play:focus-visible { border-radius: 50%; }
+
+/* Numbered pager: ghost number buttons, inverted current page, bordered Prev/Next. */
+.vw-pager { display: flex; align-items: center; justify-content: center; gap: .3rem;
+  margin: 1.1rem 0 .25rem; flex-wrap: wrap; }
+.vw-page { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 .35rem; border-radius: 8px; font-size: .8rem; color: var(--vw-fg); background: transparent;
+  border: 1px solid transparent; cursor: pointer; }
+.vw-page:hover:not(:disabled):not(.vw-page-on) { border-color: var(--vw-line); }
+.vw-page-on { background: var(--vw-fg); color: var(--vw-bg); font-weight: 600; }
+.vw-page-nav { border-color: var(--vw-line); background: var(--vw-card); padding: 0 .65rem; }
+.vw-page-nav:hover:not(:disabled) { border-color: var(--vw-accent); color: var(--vw-accent); }
+.vw-page-nav:disabled { opacity: .45; cursor: not-allowed; }
+.vw-page-gap { color: var(--vw-muted); padding: 0 .2rem; }
+.vw-perpage { margin-left: .6rem; }
+.vw-perpage select { font-size: .75rem; color: var(--vw-muted); background: transparent;
+  border: none; cursor: pointer; }
+.vw-perpage option { background: var(--vw-card); color: var(--vw-fg); }
+.vw-empty { padding: 2rem 0; color: var(--vw-fg2); font-size: .9rem; }
 
 /* On phones, collapse to a single column no matter what `columns` was set to. */
 @media (max-width: 640px) {
   .vw-grid { grid-template-columns: 1fr; }
-  .vw-filters { gap: .5rem; }
-  .vw-search { min-width: 0; }
+  .vw-filters { gap: .4rem; }
+  .vw-search { min-width: 0; flex: 1; }
+  .vw-group { margin-left: 0; }
+  .vw-perpage { margin-left: 0; }
 }
diff --git a/fern/products/platform/pages/calling/voice/TTS/index.mdx b/fern/products/platform/pages/calling/voice/TTS/index.mdx
index 27243370c4..096d236109 100644
--- a/fern/products/platform/pages/calling/voice/TTS/index.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/index.mdx
@@ -33,28 +33,11 @@ Refer to each provider's documentation for up-to-date model details and service
 
 ## Browse and audition voices
 
-Press play to audition one sample voice from each supported provider, and use **copy config** to
+Choose a provider to browse and audition its full voice catalog. Press play to audition a voice, and use **copy config** to
 grab the engine and voice values for your SWML or SDK code. Each provider's complete voice list
 lives on its reference page, linked in the table below.
 
-<VoiceWidget
-  groupBy="none"
-  voiceIds={[
-    "polly/Nicole",
-    "azure/en-AU-AnnetteNeural",
-    "cartesia/3264ada2-4a79-4666-badc-49e2267be692",
-    "deepgram/aura-2-amalthea-en",
-    "elevenlabs/NNl6r8mD7vthiJatiJt1",
-    "gcloud/en-AU-News-E",
-    "openai/alloy",
-    "rime/abbie:mist",
-    "inworld/Abby",
-    "minimax/Spanish_Arnold",
-    "playai-turbo/austin",
-    "grok/ara",
-  ]}
-  filters={false}
-/>
+<VoiceWidget groupBy="none" />
 
 ## Compare providers and models