## Demo: captcha-styling

### CaptchaStyling.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import StylingDemo from './StylingDemo.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';
  import { themes, defaultsSample, rule, markup } from './themes.ts';
  import { highlightCode } from '../../lib/highlight.server';
  import type { MintedCaptcha } from 'mochi-framework';

  let { captchas }: { captchas: MintedCaptcha[] } = $props();

  // Highlighted here rather than in the island: Shiki is server-only.
  const css = {
    defaults: await highlightCode(defaultsSample, 'css'),
    themed: await highlightCode(rule('.themed', themes.themed.css), 'css'),
    candy: await highlightCode(rule('.candy', themes.candy.css), 'css'),
    terminal: await highlightCode(rule('.terminal', themes.terminal.css), 'css'),
  };

  const svelte = {
    defaults: await highlightCode('<MochiCaptcha {...captcha} />', 'svelte'),
    themed: await highlightCode(markup(themes.themed), 'svelte'),
    candy: await highlightCode(markup(themes.candy), 'svelte'),
    terminal: await highlightCode(markup(themes.terminal), 'svelte'),
  };

  const sources = await loadSources(files);
</script>

<DemoPage
  title="Captcha Styling"
  description="The same MochiCaptcha four times over. Every colour is a CSS custom property with a built-in fallback, so styling it is CSS — no props, no theme object, no wrapper component."
  {sources}
>
  <p>
    Set the <code>--mochi-captcha-*</code> vars on any ancestor and they inherit down into the widget. The <code>emoji</code> and <code>label</code> props cover the rest. Each one below
    is live — slide any of them.
  </p>

  <StylingDemo mochi:hydrate {captchas} {css} {svelte} />
</DemoPage>

<style>
  p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  code {
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
  }
</style>
```

### StylingDemo.svelte
```svelte
<script lang="ts">
  import { MochiCaptcha } from 'mochi-framework/components';
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import { themes } from './themes.ts';
  import type { ThemeName } from './themes.ts';
  import type { MintedCaptcha } from 'mochi-framework';

  type Snippets = Record<ThemeName | 'defaults', string>;

  let { captchas, css, svelte }: { captchas: MintedCaptcha[]; css: Snippets; svelte: Snippets } = $props();
</script>

<div class="variants">
  <section>
    <h4>Defaults</h4>
    <p>No CSS at all. The widget ships light-mode defaults in each <code>var()</code> fallback, so it looks finished out of the box.</p>
    <MochiCaptcha {...captchas[0]} />
    <CodeSnippet html={svelte.defaults} />
    <CodeSnippet html={css.defaults} />
  </section>

  <section>
    <h4>Themed</h4>
    <p>Map the vars onto your palette. These point at this site's tokens, so this one follows the light/dark toggle.</p>
    <div style={themes.themed.css}>
      <MochiCaptcha
        {...captchas[1]}
        emoji={themes.themed.emoji}
        label={themes.themed.label}
        verifyingLabel={themes.themed.verifyingLabel}
        verifiedLabel={themes.themed.verifiedLabel}
      />
    </div>
    <CodeSnippet html={svelte.themed} />
    <CodeSnippet html={css.themed} />
  </section>

  <section>
    <h4>Candy</h4>
    <p>The vars are just colours — hand them anything, including gradients.</p>
    <div style={themes.candy.css}>
      <MochiCaptcha
        {...captchas[2]}
        emoji={themes.candy.emoji}
        label={themes.candy.label}
        verifyingLabel={themes.candy.verifyingLabel}
        verifiedLabel={themes.candy.verifiedLabel}
      />
    </div>
    <CodeSnippet html={svelte.candy} />
    <CodeSnippet html={css.candy} />
  </section>

  <section>
    <h4>Terminal</h4>
    <p>Square off the corners with <code>--mochi-captcha-radius</code> for a different silhouette.</p>
    <div style={themes.terminal.css}>
      <MochiCaptcha
        {...captchas[3]}
        emoji={themes.terminal.emoji}
        label={themes.terminal.label}
        verifyingLabel={themes.terminal.verifyingLabel}
        verifiedLabel={themes.terminal.verifiedLabel}
      />
    </div>
    <CodeSnippet html={svelte.terminal} />
    <CodeSnippet html={css.terminal} />
  </section>
</div>

<style>
  .variants {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 30rem;
    margin-top: 1rem;
  }

  h4 {
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
    font-weight: 600;
  }

  p {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--text-subtle);
  }

  code {
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
  }
</style>
```

### themes.ts
```ts
// Each theme's emoji/labels/declarations feed both the live widget and the code
// samples rendered beside it, so what the page shows can't drift from what it does.
export const themes = {
  themed: {
    emoji: '🍡',
    label: 'Slide the mochi to the right',
    verifyingLabel: 'Steaming…',
    verifiedLabel: 'Freshly made — thanks!',
    css: `--mochi-captcha-accent: var(--accent);
--mochi-captcha-accent-soft: var(--accent-soft);
--mochi-captcha-accent-soft-text: var(--accent-soft-text);
--mochi-captcha-border: var(--border);
--mochi-captcha-track-bg: var(--surface-muted);
--mochi-captcha-handle-bg: var(--surface);
--mochi-captcha-hint-text: var(--text-subtle);`,
  },

  candy: {
    emoji: '🍭',
    label: 'Slide for a tasty treat',
    verifyingLabel: 'Unwrapping…',
    verifiedLabel: 'Enjoy your sweet!',
    css: `--mochi-captcha-accent: #d6336c;
--mochi-captcha-accent-soft: linear-gradient(90deg, #ffd6e7, #ffa8cd);
--mochi-captcha-accent-soft-text: #a61e4d;
--mochi-captcha-border: #ffa8cd;
--mochi-captcha-track-bg: #fff0f6;
--mochi-captcha-handle-bg: #fff;
--mochi-captcha-hint-text: #c2255c;`,
  },

  terminal: {
    emoji: '▶',
    label: 'SLIDE TO PROVE HUMANITY',
    verifyingLabel: 'VERIFYING…',
    verifiedLabel: 'ACCESS GRANTED',
    css: `--mochi-captcha-radius: 0;
--mochi-captcha-accent: #33ff77;
--mochi-captcha-accent-soft: #04301a;
--mochi-captcha-accent-soft-text: #33ff77;
--mochi-captcha-border: #33ff77;
--mochi-captcha-track-bg: #04150c;
--mochi-captcha-handle-bg: #04301a;
--mochi-captcha-hint-text: #2bbd5a;
font-family: var(--font-mono);`,
  },
} as const;

export type ThemeName = keyof typeof themes;

// The values baked into each var()'s fallback in MochiCaptcha.svelte. Shown as
// the "Defaults" sample; deliberately not applied to anything.
export const defaultsSample = `/* Each var's built-in fallback. */
:root {
  --mochi-captcha-accent: #4a7c59;
  --mochi-captcha-accent-soft: #e0ebe1;
  --mochi-captcha-accent-soft-text: #2f5b3f;
  --mochi-captcha-border: #e8e4d8;
  --mochi-captcha-track-bg: #faf8f1;
  --mochi-captcha-handle-bg: #fffdf8;
  --mochi-captcha-handle-text: var(--mochi-captcha-accent);
  --mochi-captcha-hint-text: #6e756d;
  --mochi-captcha-radius: 999px;
}`;

export const rule = (selector: string, declarations: string): string => `${selector} {\n${declarations.replace(/^/gm, '  ')}\n}`;

export const markup = (theme: (typeof themes)[ThemeName]): string =>
  `<MochiCaptcha\n  {...captcha}\n  emoji="${theme.emoji}"\n  label="${theme.label}"\n  verifyingLabel="${theme.verifyingLabel}"\n  verifiedLabel="${theme.verifiedLabel}"\n/>`;
```

### routes.ts
```ts
import { Mochi, mintCaptcha } from 'mochi-framework';
import type { MochiRouteValue } from 'mochi-framework';

export const routes: Record<string, MochiRouteValue> = {
  '/demos/captcha-styling': Mochi.page('./src/demos/captcha-styling/CaptchaStyling.svelte', {
    // One token per variant so each can be solved independently.
    serverProps: () => ({ captchas: [mintCaptcha(), mintCaptcha(), mintCaptcha(), mintCaptcha()] }),
  }),
};
```

### index.ts
```ts
import { Mochi, logger } from 'mochi-framework';
import { routes } from './routes';

await Mochi.serve({
  port: 3333,
  development: process.env.MODE === 'development',
  routes,
});

logger.info('Server running at http://localhost:3333');
```