"Generate a complete, single HTML file for a single-page application infographic titled 'The Threads of Wisdom: Exploring Buddhist Sutras'.

The infographic must effectively present the nature, origin, structure, types, and significance of Buddhist Sutras through distinct, interactive sections, rendered entirely using HTML Canvas (Chart.js) and structured HTML/CSS with Tailwind CSS. Avoid SVG and Mermaid JS. Use the vibrant color palette: #005f73 (Primary Dark Blue-Green), #0a9396 (Secondary Teal), #94d2bd (Accent Pale Green), #e9d8a6 (Highlight Gold), #001219 (Text/Dark Background), #f8f9fa (Light Background), #e9ecef (Light Gray).

Infographic Narrative & Sections:

Header Section:

A prominent header with the main title 'The Threads of Wisdom: Exploring Buddhist Sutras' and a subtitle like 'Illuminating the Path Through Sacred Texts'. Styling: Primary Dark Blue-Green background, white text, bold typography. Introduction Section:

Content: Brief introductory text explaining what Sutras are (the 'threads' of Buddha's teachings) and highlighting their importance as foundational scriptures, as described in your provided text. Styling: A clean card-like container with ample padding. Section 1: The Journey of the Teachings (Oral to Written)

Goal: Show the process and change over time of how Sutras were preserved. Visualization: A horizontal flow chart built entirely with structured HTML/CSS and Tailwind utility classes. Elements: Use distinct, rounded 'card' elements for each stage, connected by simple directional indicators (e.g., Unicode arrows ➔ or Tailwind borders styled as arrows). Stages (as text on cards): "Oral Teachings (Buddha's Discourses)" "Memorization & Recitation (Ananda's Role)" "First Buddhist Councils (Compilation & Verification)" "Early Written Canons (1st C. BCE Onwards)" "Global Translations & Study (Modern Era)" Styling: Cards should use a light background color (#e9ecef or white) with bold text. Arrows should use an accent color (#0a9396). Provide a concise text explanation for this flow below the visual. Section 2: Anatomy of a Sutra (The Standard Structure)

Goal: Inform about the typical internal structure of a Sutra. Visualization: A Segmented Vertical Bar Chart (Chart.js). Each segment represents a traditional part of a Sutra. Data (Fictional, for illustration of typical proportions): Labels (apply 16-character wrapping logic): ["Thus Have I Heard (Intro)", "Setting & Audience Details", "Main Teaching/Discourse", "Conclusion & Merit/Rejoicing"]. Data values (percentages): [5, 15, 60, 20]. Styling: Use a gradient or mix of Primary Dark Blue-Green, Secondary Teal, and Accent Pale Green colors for the segments. Ensure Chart.js maintainAspectRatio: false and the required tooltip.callbacks.title configuration. Provide text context from your provided content about each part of a Sutra. Section 3: Canons & Key Collections (Types of Sutras)

Goal: Organize and describe the different major collections/types of Buddhist Sutras. Visualization: A structured HTML/CSS layout using Tailwind cards and lists, not a chart. Elements: Create three main card sections, one for each major canon/tradition: Card 1: Pali Canon (Theravada Tradition) Brief description. Bullet points for: "Sutta Pitaka" (mention Nikayas), "Vinaya Pitaka", "Abhidhamma Pitaka". Card 2: Mahayana Sutras Brief description (mention new concepts). Bullet points for famous examples: "Heart Sutra", "Diamond Sutra", "Lotus Sutra", "Vimalakirti Sutra". Card 3: Vajrayana/Tibetan Buddhist Sutras Brief description (mention tantric texts). Bullet points for: "Kangyur (Buddha's Words)", "Tengyur (Commentaries)". Styling: Use distinct background colors for each card (e.g., different shades from the palette like #94d2bd, #e9d8a6, white). Use bold text for titles and clear list formatting. Provide an overarching introductory paragraph for this section. Section 4: The Profound Impact (Significance & Benefits)

Goal: Inform about the benefits and significance of engaging with Sutras. Visualization: A Bubble Chart (Chart.js) where the size of each bubble represents the perceived impact/importance of that benefit. Data (Fictional positions for layout, radius based on impact): Labels (apply 16-character wrapping logic): ["Doctrinal Foundation", "Ethical Guidance", "Meditation Instructions", "Study & Reflection", "Recitation & Chanting", "Preservation of Dharma"]. Data (as {x, y, r, value} objects): {x: 20, y: 30, r: 25, value: 90} (Doctrinal Foundation) {x: 70, y: 60, r: 20, value: 80} (Ethical Guidance) {x: 40, y: 70, r: 18, value: 75} (Meditation Instructions) {x: 80, y: 20, r: 22, value: 88} (Study & Reflection) {x: 10, y: 80, r: 15, value: 65} (Recitation & Chanting) {x: 90, y: 85, r: 12, value: 70} (Preservation of Dharma) (Note: x, y are percentages of canvas width/height, r is radius. Value is for tooltip data). Styling: Use a single, vibrant color for all bubbles (e.g., #005f73). Ensure maintainAspectRatio: false and the required tooltip.callbacks.title configuration. Provide text context for this section's focus. General Technical & Design Requirements:

Use Tailwind CSS for all layout, spacing, typography, and responsive design. Apply Material Design principles (cards with shadows, clear typography hierarchy). All Chart.js charts must be wrapped in div containers with appropriate Tailwind classes for responsive sizing and positioning (e.g., w-full h-96 max-h-[400px] mx-auto). Implement Chart.js label wrapping logic: if a string label is longer than 16 characters, process it into an array of strings by splitting words to create lines not significantly exceeding 16 characters. All Chart.js instances MUST include the specified plugins.tooltip.callbacks.title configuration for correct multi-line tooltip display. Ensure all content is on a single, scrollable HTML page. Conclude with a brief summary reinforcing the Sutras' timeless value and a standard footer. CRITICAL: Do NOT output any HTML comments, CSS comments or JavaScript comments."