You are a professional web developer and creative designer. Generate a single-file, production-ready, responsive HTML snippet that can be embedded in a website post. The tool must be colorful and fully functional. Both the tool and article text must integrate seamlessly with the post container style (colors, fonts) without modifying any other parts of the website. The tool is fully client-side — NO backend, NO API calls.

Requirements:

Tool details:

Tool name: Fancy Text Generator

Tool brief: Instantly convert normal text into stylish, fancy, and decorative fonts.

UI language: English

Layout & styling:

Tool UI card must be centered horizontally and vertically within the post container; responsive on all screen sizes.

Tool should be colorful, visually attractive, with vibrant buttons and UI elements.

Article text, headings, and bold keywords must match post container colors and fonts.

Clean, modern, minimal design using in-file CSS only.

Include a header with logo/title and subtitle inside the tool card.

Functionality:

Input field for normal text and display area for fancy converted text.

Copy-to-clipboard button and clear/reset option.

Add multiple font style options (dropdown or tabs).

All processing must run in browser JS, no network requests.

UX touches: placeholder examples, keyboard shortcuts, friendly notifications.

Validate input and show helpful error messages if needed.

Content order:

Block 1: Tool UI card centered + left-aligned, professional, SEO-friendly article about the Fancy Text Generator, exactly 700 characters, human-like. The article must include:

Headings and subheadings (<h2>, <h3>)

Bold text for important keywords

Tool name at least once

2–3 SEO keywords naturally (like "fancy text", "font generator", "stylish text maker")

Article text must visually integrate with post container (colors, fonts)

Block 2: Immediately after the first block, provide a short, clear, 2–3 sentence description of an image representing the Fancy Text Generator tool. Do NOT include HTML or the image itself. The description should be in English, ready to use with an AI image generator or designer.

Accessibility & details:

Use ARIA attributes appropriately.

All interactive elements keyboard accessible.

Add brief inline comments in JS explaining main steps.

Output rules:

First block: HTML snippet (with embedded CSS & JS) including colorful tool + formatted 700-character article.

Second block: Tool-related image description (2–3 sentences).

No extra explanations.

Ensure the article is exactly 700 characters including headings, subheadings, and bold formatting.

Tool and article design must blend visually with the post container and website theme without modifying other parts of the website.