fix(demos): CountUp visible + grouped with Text effects; themed stage for all text demos

- CountUp WAS shipped (as a service component, filed under Utilities) but the
  user looked for it among the text animations and the number rendered
  invisibly. Two fixes:
  - Group it under a "Text effects" nav group with the other five (all 6 of
    the seed text/ collection together), and match the page eyebrow. It stays
    a FormatNumber sibling in the design doc; the nav groups for discovery.
  - The bare number inherited the eidos text color while the demo stage used
    the docs-chrome (light) surface → invisible. Give every text/service demo
    stage an eidos surface + text color (both from the same theme → contrast
    in any mode), the same fix as the ambient stage.
- Verified in real Chrome: CountUp counts 0→1.234.567,89 (es-ES separators)
  and is clearly visible; the "Text effects" sidebar group lists all six.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/routes/uix/+layout@.svelte

@@ -299,8 +299,7 @@
 				{ slug: '/uix/components/trans', label: 'Trans' },
 				{ slug: '/uix/components/format-number', label: 'FormatNumber' },
 				{ slug: '/uix/components/format-date', label: 'FormatDate' },
-				{ slug: '/uix/components/relative-time', label: 'RelativeTime' },
-				{ slug: '/uix/components/count-up', label: 'CountUp' }
+				{ slug: '/uix/components/relative-time', label: 'RelativeTime' }
 			]
 		},
 		{
@@ -344,6 +343,7 @@
 			kind: 'group',
 			heading: 'Text effects',
 			items: [
+				{ slug: '/uix/components/count-up', label: 'CountUp' },
 				{ slug: '/uix/components/text-gradient', label: 'TextGradient' },
 				{ slug: '/uix/components/text-circular', label: 'TextCircular' },
 				{ slug: '/uix/components/text-blur', label: 'TextBlur' },

web/routes/uix/components/count-up/+page.svelte

@@ -51,7 +51,7 @@
 
 <div data-uix-canvas-inner>
 	<header>
-		<div data-uix-eyebrow>Services · CountUp</div>
+		<div data-uix-eyebrow>Text effects · CountUp</div>
 		<h1 data-uix-page-title>CountUp</h1>
 		<p data-uix-page-lede>
 			Service component que anima un número de <code>from</code> → <code>to</code> con un settle de
@@ -72,7 +72,7 @@
 
 	<!-- Live preview always rendered -->
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-3xl); font-weight: 700;">
+		<div data-uix-stage-area style="font-size: var(--font-size-3xl); font-weight: 700; background: var(--color-surface-default); color: var(--color-neutral-text);">
 			{#key `${runId}|${to}|${from}|${direction}|${delay}|${duration}|${useGrouping}|${demoLocale}`}
 				<CountUp {to} {from} {direction} {delay} {duration} {useGrouping} locale={demoLocale} />
 			{/key}

web/routes/uix/components/text-blur/+page.svelte

@@ -60,7 +60,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-2xl); font-weight: 600;">
+		<div data-uix-stage-area style="font-size: var(--font-size-2xl); font-weight: 600; background: var(--color-surface-default); color: var(--color-neutral-text);">
 			{#key `${runId}|${text}|${delay}|${animateBy}|${direction}|${stepDuration}`}
 				<TextBlur {text} {delay} {animateBy} {direction} {stepDuration} />
 			{/key}

web/routes/uix/components/text-circular/+page.svelte

@@ -62,7 +62,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area>
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextCircular {text} {spinDuration} {onHover} style={`--text-circular-size: ${size}rem`} />
 		</div>
 		<div data-uix-stage-trace>

web/routes/uix/components/text-focus/+page.svelte

@@ -65,7 +65,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area>
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextFocus
 				{sentence}
 				{manualMode}

web/routes/uix/components/text-gradient/+page.svelte

@@ -68,7 +68,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-3xl);">
+		<div data-uix-stage-area style="font-size: var(--font-size-3xl); background: var(--color-surface-default);">
 			<TextGradient {colors} {animationSpeed} {showBorder} {direction} {pauseOnHover} {yoyo}>
 				{sample}
 			</TextGradient>

web/routes/uix/components/text-scramble/+page.svelte

@@ -57,7 +57,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="max-inline-size: 36rem;">
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextScramble {text} {radius} {duration} {speed} {scrambleChars} />
 		</div>
 		<div data-uix-stage-trace>