[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-copilotkit-master-agent-playbook":3,"mdc--gms4ro-key":49,"related-repo-copilotkit-master-agent-playbook":7480,"related-org-copilotkit-master-agent-playbook":7525},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":44,"sourceUrl":47,"mdContent":48},"master-agent-playbook","Master Agent Playbook","apply CopilotKit agent design principles","Philosophy, decision-making framework, and technical skills for delivering visual, interactive, and educational AI responses.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},"copilotkit","CopilotKit","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcopilotkit.png",[13,15,18,21],{"name":10,"slug":9,"type":14},"tag",{"name":16,"slug":17,"type":14},"Education","education",{"name":19,"slug":20,"type":14},"Agents","agents",{"name":22,"slug":23,"type":14},"Design","design",1440,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI","2026-07-12T08:06:39.416086",null,192,[30,31,32,20,33,34,35,36,37,38,39,40,41,42,43],"agent-native","agentic-ai","agentic-visualization","ai-agents","ai-copilot","ai-visualization","assistant-chat-bots","copilot","generative-ui","javascript","llm","open-source","typescript","visualization",{"repoUrl":25,"stars":24,"forks":28,"topics":45,"description":46},[30,31,32,20,33,34,35,36,37,38,39,40,41,42,43],"Open-Source Generative UI Framework","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Ftree\u002FHEAD\u002Fapps\u002Fagent\u002Fskills\u002Fmaster-playbook","---\nname: \"Master Agent Playbook\"\ndescription: \"Philosophy, decision-making framework, and technical skills for delivering visual, interactive, and educational AI responses.\"\nallowed-tools: []\n---\n\n# Master Agent Playbook: Making AI Responses Extraordinary\n\nThis playbook teaches an AI coding agent how to go beyond plain text and deliver\nresponses that are visual, interactive, and deeply educational. It covers the\nphilosophy, decision-making, and technical skills needed.\n\n---\n\n## Part 1: The Core Philosophy\n\n### Think Like a Teacher, Not a Search Engine\n\nBad: \"A load path is the route that forces take through a structure to the ground.\"\nGood: [draws an interactive building cross-section with loads flowing downward]\n\nThe principle: **Show, don't just tell.** Before writing any response, ask:\n- Would a diagram make this click faster than a paragraph?\n- Would an interactive widget let the user explore the concept themselves?\n- Would a worked example teach better than a definition?\n\n### The Response Decision Tree\n\n```\nUser asks a question\n  |\n  +- Is it a quick factual answer? -> Answer in 1-2 sentences.\n  |\n  +- Is it conceptual \u002F \"how does X work\"?\n  |   +- Is it spatial or visual? -> SVG illustrative diagram\n  |   +- Is it a process\u002Fflow? -> SVG flowchart or HTML stepper\n  |   +- Is it data-driven? -> Interactive chart (Chart.js \u002F Recharts)\n  |   +- Is it abstract but explorable? -> Interactive HTML widget with controls\n  |\n  +- Is it \"build me X\"? -> Working code artifact, fully functional\n  |\n  +- Is it a comparison? -> Side-by-side table or comparative visual\n  |\n  +- Is it emotional\u002Fpersonal? -> Warm text response. No visuals needed.\n```\n\n### The 3-Layer Response Pattern\n\nGreat responses layer information:\n\n1. **Hook** (1-2 sentences): Validate the question, set context.\n2. **Visual** (diagram\u002Fwidget): The core explanation, rendered visually.\n3. **Narration** (2-4 paragraphs): Walk through the visual, add nuance,\n   connect to what the user already knows. Offer to go deeper.\n\nNever dump a visual without narration. Never narrate without visuals\nwhen visuals would help.\n\nThis maps directly onto the mandatory tool sequence: **Acknowledge** in text,\ncall `plan_visualization`, **Build** with `generateSandboxedUi`, then **Narrate**.\n\n---\n\n## The Tool Contract: generateSandboxedUi\n\nEvery visual in this playbook ships through the `generateSandboxedUi` tool. The\nUI streams to the user as you generate it, so emit the parameters in this EXACT\norder:\n\n1. `initialHeight` — estimated height of the finished UI in px.\n2. `placeholderMessages` — 2-4 short, playful progress messages shown while the UI builds.\n3. `css` — ALL styles, up front. The user sees a placeholder until css is complete,\n   so keep it lean and put every style here for the css-first reveal.\n4. `html` — clean body markup, streamed in live as you write it. No `\u003Cstyle>`\n   blocks (the css parameter owns all styles), no monolithic inline `\u003Cscript>` blocks.\n5. `jsFunctions` — named function declarations: your reusable toolbox of behavior.\n6. `jsExpressions` — an array of small statements that invoke those functions,\n   applied one-by-one so the user watches each take effect.\n\nWrite parameterized generators in `jsFunctions` (`drawWing(color)`, not\n`drawRedWing()`). When the user asks for a refinement — \"make the wings red\" —\na well-parameterized toolbox lets a later turn append ONE new expression instead\nof regenerating the whole document.\n\n### Sandbox Environment\n\nThe UI runs in a sandboxed iframe WITHOUT same-origin access:\n\n- NO localStorage, sessionStorage, cookies, IndexedDB, or same-origin fetch.\n- Host bridge: `await Websandbox.connection.remote.sendPrompt({ text })` sends a\n  chat message on the user's behalf; `await Websandbox.connection.remote.openLink({ url })`\n  opens an https link in a new tab.\n- The design system is pre-injected: CSS variables, pre-styled form elements, and\n  `.c-*` SVG color-ramp classes. The css parameter holds widget-specific styles only.\n- An importmap is pre-injected for `three`, `gsap`, `d3`, and `chart.js` (served via\n  esm.sh). jsFunctions\u002FjsExpressions run with classic-script semantics — top-level await\n  is a SyntaxError there. Prefer dynamic `await import(...)` inside an async function\n  declared in jsFunctions (keep jsExpressions synchronous invocations);\n  `\u003Cscript type=\"module\">` with bare specifiers also works in html when a module script\n  genuinely belongs there.\n\n---\n\n## Part 2: Skill — Interactive HTML Widgets\n\nFor concepts that benefit from user exploration. More powerful than\nstatic SVGs — users can manipulate parameters and see results.\n\n### When to Use\n- The concept has a variable the user could tweak (temperature, rate, count)\n- The system has states the user could toggle (on\u002Foff, mode A\u002FB)\n- The explanation benefits from stepping through stages\n- Data exploration or filtering is involved\n\n### Template: Interactive Widget with Controls\n\ncss parameter:\n```css\n.controls {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin: 12px 0;\n  font-size: 13px;\n  color: var(--color-text-secondary, #666);\n}\n.controls label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\ninput[type=\"range\"] { flex: 1; }\n```\n\nhtml parameter:\n```html\n\u003C!-- Inline SVG drawing that responds to controls -->\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 400\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003C!-- Dynamic elements with IDs for JS manipulation -->\n  \u003Crect id=\"dynamic-element\" x=\"100\" y=\"100\" width=\"200\" height=\"50\"\n        fill=\"#E6F1FB\" stroke=\"#185FA5\" stroke-width=\"0.5\" rx=\"8\"\u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Controls below the visual -->\n\u003Cdiv class=\"controls\">\n  \u003Clabel>\n    \u003Cspan>Parameter\u003C\u002Fspan>\n    \u003Cinput type=\"range\" id=\"param-slider\" min=\"0\" max=\"100\" value=\"50\"\n           oninput=\"updateParam(this.value)\">\n    \u003Cspan id=\"param-label\">50\u003C\u002Fspan>\n  \u003C\u002Flabel>\n\u003C\u002Fdiv>\n```\n\njsFunctions parameter:\n```js\nfunction updateParam(value) {\n  document.getElementById('param-label').textContent = value;\n  \u002F\u002F Modify SVG elements based on value\n  const el = document.getElementById('dynamic-element');\n  el.setAttribute('width', 100 + value * 2);\n}\n```\n\njsExpressions parameter:\n```js\nupdateParam(50);\n```\n\n### Template: Step-Through Explainer\n\nFor cyclic or staged processes (event loops, biological cycles, pipelines).\n\ncss parameter:\n```css\n.step-nav {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 12px 0;\n  font-size: 13px;\n}\n.step-nav button {\n  padding: 6px 16px;\n  border: 1px solid var(--color-border-tertiary, #ddd);\n  border-radius: 8px;\n  background: var(--color-background-secondary, #f5f5f5);\n  color: var(--color-text-primary, #333);\n  cursor: pointer;\n  font-size: 13px;\n}\n.step-nav button:hover {\n  background: var(--color-background-tertiary, #eee);\n}\n.dot { width: 8px; height: 8px; border-radius: 50%;\n       background: var(--color-border-tertiary, #ccc);\n       transition: background 0.2s; }\n.dot.active { background: var(--color-text-info, #185FA5); }\n.step-content { min-height: 300px; }\n#dots { display: flex; gap: 6px; }\n#step-label { margin-left: auto; color: var(--color-text-secondary, #888); }\n```\n\nhtml parameter:\n```html\n\u003Cdiv class=\"step-content\" id=\"step-display\">\n  \u003C!-- SVG or HTML content per step, swapped by JS -->\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"step-nav\">\n  \u003Cbutton onclick=\"prevStep()\">Previous\u003C\u002Fbutton>\n  \u003Cdiv id=\"dots\">\u003C\u002Fdiv>\n  \u003Cbutton onclick=\"nextStep()\">Next\u003C\u002Fbutton>\n  \u003Cspan id=\"step-label\">Step 1 of 4\u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\njsFunctions parameter:\n```js\nfunction initSteps(steps) {\n  window.steps = steps;\n  window.current = 0;\n  const dotsEl = document.getElementById('dots');\n  steps.forEach(() => {\n    const d = document.createElement('div');\n    d.className = 'dot';\n    dotsEl.appendChild(d);\n  });\n  renderStep();\n}\n\nfunction renderStep() {\n  const { steps, current } = window;\n  document.getElementById('step-display').innerHTML = steps[current].svg;\n  document.getElementById('step-label').textContent =\n    `Step ${current + 1} of ${steps.length}`;\n  document.querySelectorAll('.dot').forEach((d, i) =>\n    d.classList.toggle('active', i === current));\n}\n\nfunction nextStep() {\n  window.current = (window.current + 1) % window.steps.length;\n  renderStep();\n}\n\nfunction prevStep() {\n  window.current = (window.current - 1 + window.steps.length) % window.steps.length;\n  renderStep();\n}\n```\n\njsExpressions parameter:\n```js\ninitSteps([\n  { title: \"Step 1\", svg: `\u003Csvg>...\u003C\u002Fsvg>`, desc: \"What happens first\" },\n  { title: \"Step 2\", svg: `\u003Csvg>...\u003C\u002Fsvg>`, desc: \"Then this\" },\n]);\n```\n\n### CSS Animation Patterns (for live diagrams)\n\nThese belong in the css parameter alongside the rest of your styles:\n\n```css\n\u002F* Flowing particles along a path *\u002F\n@keyframes flow {\n  to { stroke-dashoffset: -20; }\n}\n.flowing {\n  stroke-dasharray: 5 5;\n  animation: flow 1.6s linear infinite;\n}\n\n\u002F* Pulsing glow for active elements *\u002F\n@keyframes pulse {\n  0%, 100% { opacity: 0.3; }\n  50% { opacity: 0.7; }\n}\n.pulsing { animation: pulse 2s ease-in-out infinite; }\n\n\u002F* Flickering (for flames, sparks) *\u002F\n@keyframes flicker {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.8; }\n}\n\n\u002F* Always respect reduced motion preferences *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n  }\n}\n```\n\n---\n\n## Part 3: Skill — Data Visualization\n\n### When to Use\n- Comparing quantities\n- Showing trends over time\n- Displaying distributions or proportions\n- Making data explorable\n\n### Approach: Inline SVG Charts (No Dependencies)\n\nFor simple charts, hand-draw in SVG. No library needed.\n\n```svg\n\u003C!-- Simple bar chart -->\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 300\">\n  \u003C!-- Y axis -->\n  \u003Cline x1=\"80\" y1=\"40\" x2=\"80\" y2=\"250\" stroke=\"currentColor\"\n        stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n  \u003C!-- X axis -->\n  \u003Cline x1=\"80\" y1=\"250\" x2=\"620\" y2=\"250\" stroke=\"currentColor\"\n        stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n\n  \u003C!-- Bars -->\n  \u003Crect x=\"120\" y=\"100\" width=\"60\" height=\"150\" rx=\"4\"\n        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"150\" y=\"270\" text-anchor=\"middle\" font-size=\"12\"\n        fill=\"currentColor\" opacity=\"0.7\">Q1\u003C\u002Ftext>\n  \u003Ctext x=\"150\" y=\"92\" text-anchor=\"middle\" font-size=\"12\"\n        fill=\"#3C3489\">$42k\u003C\u002Ftext>\n  \u003C!-- ... more bars -->\n\u003C\u002Fsvg>\n```\n\n### Approach: Chart.js (For Complex\u002FInteractive Charts)\n\nWhen you need tooltips, responsive legends, animations. `chart.js` is in the\npre-injected importmap — load it with a dynamic import inside a jsFunction:\n\nhtml parameter:\n```html\n\u003Cdiv style=\"position:relative;width:100%;height:300px\">\n  \u003Ccanvas id=\"myChart\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>\n```\n\njsFunctions parameter:\n```js\nasync function renderRevenueChart() {\n  const { default: Chart } = await import('chart.js\u002Fauto');\n  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n  const textColor = isDark ? '#c2c0b6' : '#3d3d3a';\n  const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';\n\n  new Chart(document.getElementById('myChart'), {\n    type: 'line',\n    data: {\n      labels: ['Jan', 'Feb', 'Mar', 'Apr'],\n      datasets: [{\n        label: 'Revenue',\n        data: [30, 45, 28, 62],\n        borderColor: '#534AB7',\n        backgroundColor: 'rgba(83,74,183,0.1)',\n        fill: true,\n        tension: 0.3\n      }]\n    },\n    options: {\n      responsive: true,\n      maintainAspectRatio: false,\n      plugins: {\n        legend: { labels: { color: textColor } }\n      },\n      scales: {\n        x: { ticks: { color: textColor }, grid: { color: gridColor } },\n        y: { ticks: { color: textColor }, grid: { color: gridColor } }\n      }\n    }\n  });\n}\n```\n\njsExpressions parameter:\n```js\nrenderRevenueChart();\n```\n\n---\n\n## Part 4: Skill — Mermaid Diagrams\n\nFor relationship diagrams (ERDs, class diagrams, sequence diagrams) where\nprecise layout math isn't worth doing by hand.\n\nMermaid is not in the importmap — load it by URL in a module script placed in\nthe html parameter (CDN script tags still work there):\n\n```html\n\u003Cdiv id=\"diagram\">\u003C\u002Fdiv>\n\u003Cscript type=\"module\">\nimport mermaid from 'https:\u002F\u002Fesm.sh\u002Fmermaid@11\u002Fdist\u002Fmermaid.esm.min.mjs';\nconst dark = matchMedia('(prefers-color-scheme: dark)').matches;\nmermaid.initialize({\n  startOnLoad: false,\n  theme: 'base',\n  themeVariables: {\n    darkMode: dark,\n    fontSize: '13px',\n    lineColor: dark ? '#9c9a92' : '#73726c',\n    textColor: dark ? '#c2c0b6' : '#3d3d3a',\n  },\n});\nconst { svg } = await mermaid.render('d', `\n  erDiagram\n    USERS ||--o{ POSTS : writes\n    POSTS ||--o{ COMMENTS : has\n`);\ndocument.getElementById('diagram').innerHTML = svg;\n\u003C\u002Fscript>\n```\n\nUse Mermaid for: ERDs, class diagrams, sequence diagrams, Gantt charts.\nUse hand-drawn SVG for: everything else (flowcharts, architecture,\nillustrative diagrams) — you get much better control.\n\n---\n\n## Part 5: Skill — Explanatory Writing Between Visuals\n\n### Narration Patterns\n\n**The Walk-Through**: Point at parts of the visual and explain them.\n> \"Starting at the top, the roof deck collects distributed loads across\n> its surface. These get channeled into the rafters below, which act\n> like one-way bridges...\"\n\n**The \"Why It Matters\"**: Connect the visual to real consequences.\n> \"This is why lower columns are always larger — they're carrying the\n> accumulated weight of every floor above.\"\n\n**The \"Common Mistake\"**: Anticipate misconceptions.\n> \"One thing that trips people up: removing a single column doesn't just\n> lose that member — it breaks the entire load chain.\"\n\n**The \"Go Deeper\" Offer**: End with expansion paths.\n> \"Want me to show how lateral loads (wind, seismic) take a completely\n> different path?\"\n\n### Tone Rules\n- Warm and direct. Not academic, not dumbed-down.\n- Use \"you\" and \"we\" freely.\n- Analogies and metaphors are powerful. Use them.\n- Short paragraphs (2-4 sentences). No walls of text.\n- Bold key terms on first introduction, then don't re-bold.\n- Never use bullet points for explanations. Prose only.\n- Ask at most one question per response.\n\n---\n\n## Part 6: Skill — Knowing What NOT to Visualize\n\nNot everything needs a diagram. Skip visuals when:\n\n- The answer is a single fact or number\n- The user is venting or emotional (empathy, not charts)\n- The topic is purely textual (writing, editing, drafting)\n- A code snippet is the answer (just show the code)\n- The user explicitly asked for brief\u002Fconcise\n\n### The \"Would They Screenshot This?\" Test\n\nIf the user would likely screenshot or save the visual to reference\nlater, it was worth making. If not, just use text.\n\n---\n\n## Part 7: Putting It All Together\n\n### Example Response Structure (Complex Technical Question)\n\n```\n[1-2 sentence hook validating the question]\n\n[Visual: SVG diagram or interactive widget]\n\n[Walk-through narration: 3-4 paragraphs explaining the visual,\n pointing at specific parts, noting key insights]\n\n[One \"go deeper\" offer with 2-3 specific directions]\n```\n\n### Example Response Structure (Simple Question with Visual Aid)\n\n```\n[Direct answer in 1-2 sentences]\n\n[Small supporting visual if it adds value]\n\n[One additional insight or context sentence]\n```\n\n### Quality Checklist Before Responding\n\n- [ ] Did I pick the right format? (text vs SVG vs interactive vs chart)\n- [ ] Are all styles in the css parameter and behavior split into\n      jsFunctions (toolbox) + jsExpressions (invocations)?\n- [ ] Is the visual self-explanatory even without the narration?\n- [ ] Does the narration add value beyond what the visual shows?\n- [ ] Are colors meaningful, not decorative?\n- [ ] Does it work in dark mode?\n- [ ] Is the response concise? (Cut anything that doesn't teach)\n- [ ] Did I offer a clear next step?\n\n---\n\n## Appendix: Quick Reference\n\n| Concept Type            | Best Format                  |\n|-------------------------|------------------------------|\n| How X works (physical)  | Illustrative SVG diagram     |\n| How X works (abstract)  | Interactive HTML + SVG       |\n| Process \u002F workflow      | SVG flowchart                |\n| Architecture            | SVG structural diagram       |\n| Data relationships      | Mermaid ERD                  |\n| Trends \u002F comparisons    | Chart.js or SVG bar chart    |\n| Cyclic process          | HTML step-through widget     |\n| System states           | Interactive widget + toggles |\n| Quick answer            | Plain text                   |\n| Code solution           | Code block \u002F artifact        |\n| Emotional support       | Warm text only               |\n",{"data":50,"body":52},{"name":5,"description":7,"allowed-tools":51},[],{"type":53,"children":54},"root",[55,64,70,74,81,88,99,112,132,138,151,157,162,196,201,243,246,252,264,349,377,383,388,481,484,490,495,501,524,530,535,905,910,1608,1613,1851,1856,1886,1892,1897,1901,2738,2742,3098,3102,4136,4140,4343,4349,4354,4938,4941,4947,4952,4975,4981,4986,5136,5142,5154,5158,5262,5266,6310,6314,6337,6340,6346,6351,6356,6980,6985,6988,6994,7000,7010,7019,7029,7037,7047,7055,7065,7073,7079,7117,7120,7126,7131,7159,7165,7170,7173,7179,7185,7194,7200,7209,7215,7294,7297,7303,7474],{"type":56,"tag":57,"props":58,"children":60},"element","h1",{"id":59},"master-agent-playbook-making-ai-responses-extraordinary",[61],{"type":62,"value":63},"text","Master Agent Playbook: Making AI Responses Extraordinary",{"type":56,"tag":65,"props":66,"children":67},"p",{},[68],{"type":62,"value":69},"This playbook teaches an AI coding agent how to go beyond plain text and deliver\nresponses that are visual, interactive, and deeply educational. It covers the\nphilosophy, decision-making, and technical skills needed.",{"type":56,"tag":71,"props":72,"children":73},"hr",{},[],{"type":56,"tag":75,"props":76,"children":78},"h2",{"id":77},"part-1-the-core-philosophy",[79],{"type":62,"value":80},"Part 1: The Core Philosophy",{"type":56,"tag":82,"props":83,"children":85},"h3",{"id":84},"think-like-a-teacher-not-a-search-engine",[86],{"type":62,"value":87},"Think Like a Teacher, Not a Search Engine",{"type":56,"tag":65,"props":89,"children":90},{},[91,93],{"type":62,"value":92},"Bad: \"A load path is the route that forces take through a structure to the ground.\"\nGood: ",{"type":56,"tag":94,"props":95,"children":96},"span",{},[97],{"type":62,"value":98},"draws an interactive building cross-section with loads flowing downward",{"type":56,"tag":65,"props":100,"children":101},{},[102,104,110],{"type":62,"value":103},"The principle: ",{"type":56,"tag":105,"props":106,"children":107},"strong",{},[108],{"type":62,"value":109},"Show, don't just tell.",{"type":62,"value":111}," Before writing any response, ask:",{"type":56,"tag":113,"props":114,"children":115},"ul",{},[116,122,127],{"type":56,"tag":117,"props":118,"children":119},"li",{},[120],{"type":62,"value":121},"Would a diagram make this click faster than a paragraph?",{"type":56,"tag":117,"props":123,"children":124},{},[125],{"type":62,"value":126},"Would an interactive widget let the user explore the concept themselves?",{"type":56,"tag":117,"props":128,"children":129},{},[130],{"type":62,"value":131},"Would a worked example teach better than a definition?",{"type":56,"tag":82,"props":133,"children":135},{"id":134},"the-response-decision-tree",[136],{"type":62,"value":137},"The Response Decision Tree",{"type":56,"tag":139,"props":140,"children":144},"pre",{"className":141,"code":143,"language":62},[142],"language-text","User asks a question\n  |\n  +- Is it a quick factual answer? -> Answer in 1-2 sentences.\n  |\n  +- Is it conceptual \u002F \"how does X work\"?\n  |   +- Is it spatial or visual? -> SVG illustrative diagram\n  |   +- Is it a process\u002Fflow? -> SVG flowchart or HTML stepper\n  |   +- Is it data-driven? -> Interactive chart (Chart.js \u002F Recharts)\n  |   +- Is it abstract but explorable? -> Interactive HTML widget with controls\n  |\n  +- Is it \"build me X\"? -> Working code artifact, fully functional\n  |\n  +- Is it a comparison? -> Side-by-side table or comparative visual\n  |\n  +- Is it emotional\u002Fpersonal? -> Warm text response. No visuals needed.\n",[145],{"type":56,"tag":146,"props":147,"children":149},"code",{"__ignoreMap":148},"",[150],{"type":62,"value":143},{"type":56,"tag":82,"props":152,"children":154},{"id":153},"the-3-layer-response-pattern",[155],{"type":62,"value":156},"The 3-Layer Response Pattern",{"type":56,"tag":65,"props":158,"children":159},{},[160],{"type":62,"value":161},"Great responses layer information:",{"type":56,"tag":163,"props":164,"children":165},"ol",{},[166,176,186],{"type":56,"tag":117,"props":167,"children":168},{},[169,174],{"type":56,"tag":105,"props":170,"children":171},{},[172],{"type":62,"value":173},"Hook",{"type":62,"value":175}," (1-2 sentences): Validate the question, set context.",{"type":56,"tag":117,"props":177,"children":178},{},[179,184],{"type":56,"tag":105,"props":180,"children":181},{},[182],{"type":62,"value":183},"Visual",{"type":62,"value":185}," (diagram\u002Fwidget): The core explanation, rendered visually.",{"type":56,"tag":117,"props":187,"children":188},{},[189,194],{"type":56,"tag":105,"props":190,"children":191},{},[192],{"type":62,"value":193},"Narration",{"type":62,"value":195}," (2-4 paragraphs): Walk through the visual, add nuance,\nconnect to what the user already knows. Offer to go deeper.",{"type":56,"tag":65,"props":197,"children":198},{},[199],{"type":62,"value":200},"Never dump a visual without narration. Never narrate without visuals\nwhen visuals would help.",{"type":56,"tag":65,"props":202,"children":203},{},[204,206,211,213,219,221,226,228,234,236,241],{"type":62,"value":205},"This maps directly onto the mandatory tool sequence: ",{"type":56,"tag":105,"props":207,"children":208},{},[209],{"type":62,"value":210},"Acknowledge",{"type":62,"value":212}," in text,\ncall ",{"type":56,"tag":146,"props":214,"children":216},{"className":215},[],[217],{"type":62,"value":218},"plan_visualization",{"type":62,"value":220},", ",{"type":56,"tag":105,"props":222,"children":223},{},[224],{"type":62,"value":225},"Build",{"type":62,"value":227}," with ",{"type":56,"tag":146,"props":229,"children":231},{"className":230},[],[232],{"type":62,"value":233},"generateSandboxedUi",{"type":62,"value":235},", then ",{"type":56,"tag":105,"props":237,"children":238},{},[239],{"type":62,"value":240},"Narrate",{"type":62,"value":242},".",{"type":56,"tag":71,"props":244,"children":245},{},[],{"type":56,"tag":75,"props":247,"children":249},{"id":248},"the-tool-contract-generatesandboxedui",[250],{"type":62,"value":251},"The Tool Contract: generateSandboxedUi",{"type":56,"tag":65,"props":253,"children":254},{},[255,257,262],{"type":62,"value":256},"Every visual in this playbook ships through the ",{"type":56,"tag":146,"props":258,"children":260},{"className":259},[],[261],{"type":62,"value":233},{"type":62,"value":263}," tool. The\nUI streams to the user as you generate it, so emit the parameters in this EXACT\norder:",{"type":56,"tag":163,"props":265,"children":266},{},[267,278,289,300,327,338],{"type":56,"tag":117,"props":268,"children":269},{},[270,276],{"type":56,"tag":146,"props":271,"children":273},{"className":272},[],[274],{"type":62,"value":275},"initialHeight",{"type":62,"value":277}," — estimated height of the finished UI in px.",{"type":56,"tag":117,"props":279,"children":280},{},[281,287],{"type":56,"tag":146,"props":282,"children":284},{"className":283},[],[285],{"type":62,"value":286},"placeholderMessages",{"type":62,"value":288}," — 2-4 short, playful progress messages shown while the UI builds.",{"type":56,"tag":117,"props":290,"children":291},{},[292,298],{"type":56,"tag":146,"props":293,"children":295},{"className":294},[],[296],{"type":62,"value":297},"css",{"type":62,"value":299}," — ALL styles, up front. The user sees a placeholder until css is complete,\nso keep it lean and put every style here for the css-first reveal.",{"type":56,"tag":117,"props":301,"children":302},{},[303,309,311,317,319,325],{"type":56,"tag":146,"props":304,"children":306},{"className":305},[],[307],{"type":62,"value":308},"html",{"type":62,"value":310}," — clean body markup, streamed in live as you write it. No ",{"type":56,"tag":146,"props":312,"children":314},{"className":313},[],[315],{"type":62,"value":316},"\u003Cstyle>",{"type":62,"value":318},"\nblocks (the css parameter owns all styles), no monolithic inline ",{"type":56,"tag":146,"props":320,"children":322},{"className":321},[],[323],{"type":62,"value":324},"\u003Cscript>",{"type":62,"value":326}," blocks.",{"type":56,"tag":117,"props":328,"children":329},{},[330,336],{"type":56,"tag":146,"props":331,"children":333},{"className":332},[],[334],{"type":62,"value":335},"jsFunctions",{"type":62,"value":337}," — named function declarations: your reusable toolbox of behavior.",{"type":56,"tag":117,"props":339,"children":340},{},[341,347],{"type":56,"tag":146,"props":342,"children":344},{"className":343},[],[345],{"type":62,"value":346},"jsExpressions",{"type":62,"value":348}," — an array of small statements that invoke those functions,\napplied one-by-one so the user watches each take effect.",{"type":56,"tag":65,"props":350,"children":351},{},[352,354,359,361,367,369,375],{"type":62,"value":353},"Write parameterized generators in ",{"type":56,"tag":146,"props":355,"children":357},{"className":356},[],[358],{"type":62,"value":335},{"type":62,"value":360}," (",{"type":56,"tag":146,"props":362,"children":364},{"className":363},[],[365],{"type":62,"value":366},"drawWing(color)",{"type":62,"value":368},", not\n",{"type":56,"tag":146,"props":370,"children":372},{"className":371},[],[373],{"type":62,"value":374},"drawRedWing()",{"type":62,"value":376},"). When the user asks for a refinement — \"make the wings red\" —\na well-parameterized toolbox lets a later turn append ONE new expression instead\nof regenerating the whole document.",{"type":56,"tag":82,"props":378,"children":380},{"id":379},"sandbox-environment",[381],{"type":62,"value":382},"Sandbox Environment",{"type":56,"tag":65,"props":384,"children":385},{},[386],{"type":62,"value":387},"The UI runs in a sandboxed iframe WITHOUT same-origin access:",{"type":56,"tag":113,"props":389,"children":390},{},[391,396,417,430],{"type":56,"tag":117,"props":392,"children":393},{},[394],{"type":62,"value":395},"NO localStorage, sessionStorage, cookies, IndexedDB, or same-origin fetch.",{"type":56,"tag":117,"props":397,"children":398},{},[399,401,407,409,415],{"type":62,"value":400},"Host bridge: ",{"type":56,"tag":146,"props":402,"children":404},{"className":403},[],[405],{"type":62,"value":406},"await Websandbox.connection.remote.sendPrompt({ text })",{"type":62,"value":408}," sends a\nchat message on the user's behalf; ",{"type":56,"tag":146,"props":410,"children":412},{"className":411},[],[413],{"type":62,"value":414},"await Websandbox.connection.remote.openLink({ url })",{"type":62,"value":416},"\nopens an https link in a new tab.",{"type":56,"tag":117,"props":418,"children":419},{},[420,422,428],{"type":62,"value":421},"The design system is pre-injected: CSS variables, pre-styled form elements, and\n",{"type":56,"tag":146,"props":423,"children":425},{"className":424},[],[426],{"type":62,"value":427},".c-*",{"type":62,"value":429}," SVG color-ramp classes. The css parameter holds widget-specific styles only.",{"type":56,"tag":117,"props":431,"children":432},{},[433,435,441,442,448,449,455,457,463,465,471,473,479],{"type":62,"value":434},"An importmap is pre-injected for ",{"type":56,"tag":146,"props":436,"children":438},{"className":437},[],[439],{"type":62,"value":440},"three",{"type":62,"value":220},{"type":56,"tag":146,"props":443,"children":445},{"className":444},[],[446],{"type":62,"value":447},"gsap",{"type":62,"value":220},{"type":56,"tag":146,"props":450,"children":452},{"className":451},[],[453],{"type":62,"value":454},"d3",{"type":62,"value":456},", and ",{"type":56,"tag":146,"props":458,"children":460},{"className":459},[],[461],{"type":62,"value":462},"chart.js",{"type":62,"value":464}," (served via\nesm.sh). jsFunctions\u002FjsExpressions run with classic-script semantics — top-level await\nis a SyntaxError there. Prefer dynamic ",{"type":56,"tag":146,"props":466,"children":468},{"className":467},[],[469],{"type":62,"value":470},"await import(...)",{"type":62,"value":472}," inside an async function\ndeclared in jsFunctions (keep jsExpressions synchronous invocations);\n",{"type":56,"tag":146,"props":474,"children":476},{"className":475},[],[477],{"type":62,"value":478},"\u003Cscript type=\"module\">",{"type":62,"value":480}," with bare specifiers also works in html when a module script\ngenuinely belongs there.",{"type":56,"tag":71,"props":482,"children":483},{},[],{"type":56,"tag":75,"props":485,"children":487},{"id":486},"part-2-skill-interactive-html-widgets",[488],{"type":62,"value":489},"Part 2: Skill — Interactive HTML Widgets",{"type":56,"tag":65,"props":491,"children":492},{},[493],{"type":62,"value":494},"For concepts that benefit from user exploration. More powerful than\nstatic SVGs — users can manipulate parameters and see results.",{"type":56,"tag":82,"props":496,"children":498},{"id":497},"when-to-use",[499],{"type":62,"value":500},"When to Use",{"type":56,"tag":113,"props":502,"children":503},{},[504,509,514,519],{"type":56,"tag":117,"props":505,"children":506},{},[507],{"type":62,"value":508},"The concept has a variable the user could tweak (temperature, rate, count)",{"type":56,"tag":117,"props":510,"children":511},{},[512],{"type":62,"value":513},"The system has states the user could toggle (on\u002Foff, mode A\u002FB)",{"type":56,"tag":117,"props":515,"children":516},{},[517],{"type":62,"value":518},"The explanation benefits from stepping through stages",{"type":56,"tag":117,"props":520,"children":521},{},[522],{"type":62,"value":523},"Data exploration or filtering is involved",{"type":56,"tag":82,"props":525,"children":527},{"id":526},"template-interactive-widget-with-controls",[528],{"type":62,"value":529},"Template: Interactive Widget with Controls",{"type":56,"tag":65,"props":531,"children":532},{},[533],{"type":62,"value":534},"css parameter:",{"type":56,"tag":139,"props":536,"children":539},{"className":537,"code":538,"language":297,"meta":148,"style":148},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".controls {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin: 12px 0;\n  font-size: 13px;\n  color: var(--color-text-secondary, #666);\n}\n.controls label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\ninput[type=\"range\"] { flex: 1; }\n",[540],{"type":56,"tag":146,"props":541,"children":542},{"__ignoreMap":148},[543,564,590,612,635,662,684,733,742,763,783,803,824,832],{"type":56,"tag":94,"props":544,"children":547},{"class":545,"line":546},"line",1,[548,553,559],{"type":56,"tag":94,"props":549,"children":551},{"style":550},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[552],{"type":62,"value":242},{"type":56,"tag":94,"props":554,"children":556},{"style":555},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[557],{"type":62,"value":558},"controls",{"type":56,"tag":94,"props":560,"children":561},{"style":550},[562],{"type":62,"value":563}," {\n",{"type":56,"tag":94,"props":565,"children":567},{"class":545,"line":566},2,[568,574,579,585],{"type":56,"tag":94,"props":569,"children":571},{"style":570},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[572],{"type":62,"value":573},"  display",{"type":56,"tag":94,"props":575,"children":576},{"style":550},[577],{"type":62,"value":578},":",{"type":56,"tag":94,"props":580,"children":582},{"style":581},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[583],{"type":62,"value":584}," flex",{"type":56,"tag":94,"props":586,"children":587},{"style":550},[588],{"type":62,"value":589},";\n",{"type":56,"tag":94,"props":591,"children":593},{"class":545,"line":592},3,[594,599,603,608],{"type":56,"tag":94,"props":595,"children":596},{"style":570},[597],{"type":62,"value":598},"  align-items",{"type":56,"tag":94,"props":600,"children":601},{"style":550},[602],{"type":62,"value":578},{"type":56,"tag":94,"props":604,"children":605},{"style":581},[606],{"type":62,"value":607}," center",{"type":56,"tag":94,"props":609,"children":610},{"style":550},[611],{"type":62,"value":589},{"type":56,"tag":94,"props":613,"children":615},{"class":545,"line":614},4,[616,621,625,631],{"type":56,"tag":94,"props":617,"children":618},{"style":570},[619],{"type":62,"value":620},"  gap",{"type":56,"tag":94,"props":622,"children":623},{"style":550},[624],{"type":62,"value":578},{"type":56,"tag":94,"props":626,"children":628},{"style":627},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[629],{"type":62,"value":630}," 16px",{"type":56,"tag":94,"props":632,"children":633},{"style":550},[634],{"type":62,"value":589},{"type":56,"tag":94,"props":636,"children":638},{"class":545,"line":637},5,[639,644,648,653,658],{"type":56,"tag":94,"props":640,"children":641},{"style":570},[642],{"type":62,"value":643},"  margin",{"type":56,"tag":94,"props":645,"children":646},{"style":550},[647],{"type":62,"value":578},{"type":56,"tag":94,"props":649,"children":650},{"style":627},[651],{"type":62,"value":652}," 12px",{"type":56,"tag":94,"props":654,"children":655},{"style":627},[656],{"type":62,"value":657}," 0",{"type":56,"tag":94,"props":659,"children":660},{"style":550},[661],{"type":62,"value":589},{"type":56,"tag":94,"props":663,"children":665},{"class":545,"line":664},6,[666,671,675,680],{"type":56,"tag":94,"props":667,"children":668},{"style":570},[669],{"type":62,"value":670},"  font-size",{"type":56,"tag":94,"props":672,"children":673},{"style":550},[674],{"type":62,"value":578},{"type":56,"tag":94,"props":676,"children":677},{"style":627},[678],{"type":62,"value":679}," 13px",{"type":56,"tag":94,"props":681,"children":682},{"style":550},[683],{"type":62,"value":589},{"type":56,"tag":94,"props":685,"children":687},{"class":545,"line":686},7,[688,693,697,703,708,713,718,723,728],{"type":56,"tag":94,"props":689,"children":690},{"style":570},[691],{"type":62,"value":692},"  color",{"type":56,"tag":94,"props":694,"children":695},{"style":550},[696],{"type":62,"value":578},{"type":56,"tag":94,"props":698,"children":700},{"style":699},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[701],{"type":62,"value":702}," var",{"type":56,"tag":94,"props":704,"children":705},{"style":550},[706],{"type":62,"value":707},"(",{"type":56,"tag":94,"props":709,"children":710},{"style":581},[711],{"type":62,"value":712},"--color-text-secondary",{"type":56,"tag":94,"props":714,"children":715},{"style":550},[716],{"type":62,"value":717},",",{"type":56,"tag":94,"props":719,"children":720},{"style":550},[721],{"type":62,"value":722}," #",{"type":56,"tag":94,"props":724,"children":725},{"style":581},[726],{"type":62,"value":727},"666",{"type":56,"tag":94,"props":729,"children":730},{"style":550},[731],{"type":62,"value":732},");\n",{"type":56,"tag":94,"props":734,"children":736},{"class":545,"line":735},8,[737],{"type":56,"tag":94,"props":738,"children":739},{"style":550},[740],{"type":62,"value":741},"}\n",{"type":56,"tag":94,"props":743,"children":745},{"class":545,"line":744},9,[746,750,754,759],{"type":56,"tag":94,"props":747,"children":748},{"style":550},[749],{"type":62,"value":242},{"type":56,"tag":94,"props":751,"children":752},{"style":555},[753],{"type":62,"value":558},{"type":56,"tag":94,"props":755,"children":756},{"style":555},[757],{"type":62,"value":758}," label",{"type":56,"tag":94,"props":760,"children":761},{"style":550},[762],{"type":62,"value":563},{"type":56,"tag":94,"props":764,"children":766},{"class":545,"line":765},10,[767,771,775,779],{"type":56,"tag":94,"props":768,"children":769},{"style":570},[770],{"type":62,"value":573},{"type":56,"tag":94,"props":772,"children":773},{"style":550},[774],{"type":62,"value":578},{"type":56,"tag":94,"props":776,"children":777},{"style":581},[778],{"type":62,"value":584},{"type":56,"tag":94,"props":780,"children":781},{"style":550},[782],{"type":62,"value":589},{"type":56,"tag":94,"props":784,"children":786},{"class":545,"line":785},11,[787,791,795,799],{"type":56,"tag":94,"props":788,"children":789},{"style":570},[790],{"type":62,"value":598},{"type":56,"tag":94,"props":792,"children":793},{"style":550},[794],{"type":62,"value":578},{"type":56,"tag":94,"props":796,"children":797},{"style":581},[798],{"type":62,"value":607},{"type":56,"tag":94,"props":800,"children":801},{"style":550},[802],{"type":62,"value":589},{"type":56,"tag":94,"props":804,"children":806},{"class":545,"line":805},12,[807,811,815,820],{"type":56,"tag":94,"props":808,"children":809},{"style":570},[810],{"type":62,"value":620},{"type":56,"tag":94,"props":812,"children":813},{"style":550},[814],{"type":62,"value":578},{"type":56,"tag":94,"props":816,"children":817},{"style":627},[818],{"type":62,"value":819}," 6px",{"type":56,"tag":94,"props":821,"children":822},{"style":550},[823],{"type":62,"value":589},{"type":56,"tag":94,"props":825,"children":827},{"class":545,"line":826},13,[828],{"type":56,"tag":94,"props":829,"children":830},{"style":550},[831],{"type":62,"value":741},{"type":56,"tag":94,"props":833,"children":835},{"class":545,"line":834},14,[836,841,846,852,857,862,868,872,877,882,886,890,895,900],{"type":56,"tag":94,"props":837,"children":838},{"style":555},[839],{"type":62,"value":840},"input",{"type":56,"tag":94,"props":842,"children":843},{"style":550},[844],{"type":62,"value":845},"[",{"type":56,"tag":94,"props":847,"children":849},{"style":848},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[850],{"type":62,"value":851},"type",{"type":56,"tag":94,"props":853,"children":854},{"style":550},[855],{"type":62,"value":856},"=",{"type":56,"tag":94,"props":858,"children":859},{"style":550},[860],{"type":62,"value":861},"\"",{"type":56,"tag":94,"props":863,"children":865},{"style":864},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[866],{"type":62,"value":867},"range",{"type":56,"tag":94,"props":869,"children":870},{"style":550},[871],{"type":62,"value":861},{"type":56,"tag":94,"props":873,"children":874},{"style":550},[875],{"type":62,"value":876},"]",{"type":56,"tag":94,"props":878,"children":879},{"style":550},[880],{"type":62,"value":881}," {",{"type":56,"tag":94,"props":883,"children":884},{"style":570},[885],{"type":62,"value":584},{"type":56,"tag":94,"props":887,"children":888},{"style":550},[889],{"type":62,"value":578},{"type":56,"tag":94,"props":891,"children":892},{"style":627},[893],{"type":62,"value":894}," 1",{"type":56,"tag":94,"props":896,"children":897},{"style":550},[898],{"type":62,"value":899},";",{"type":56,"tag":94,"props":901,"children":902},{"style":550},[903],{"type":62,"value":904}," }\n",{"type":56,"tag":65,"props":906,"children":907},{},[908],{"type":62,"value":909},"html parameter:",{"type":56,"tag":139,"props":911,"children":914},{"className":912,"code":913,"language":308,"meta":148,"style":148},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Inline SVG drawing that responds to controls -->\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 400\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003C!-- Dynamic elements with IDs for JS manipulation -->\n  \u003Crect id=\"dynamic-element\" x=\"100\" y=\"100\" width=\"200\" height=\"50\"\n        fill=\"#E6F1FB\" stroke=\"#185FA5\" stroke-width=\"0.5\" rx=\"8\"\u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Controls below the visual -->\n\u003Cdiv class=\"controls\">\n  \u003Clabel>\n    \u003Cspan>Parameter\u003C\u002Fspan>\n    \u003Cinput type=\"range\" id=\"param-slider\" min=\"0\" max=\"100\" value=\"50\"\n           oninput=\"updateParam(this.value)\">\n    \u003Cspan id=\"param-label\">50\u003C\u002Fspan>\n  \u003C\u002Flabel>\n\u003C\u002Fdiv>\n",[915],{"type":56,"tag":146,"props":916,"children":917},{"__ignoreMap":148},[918,927,1012,1020,1142,1238,1254,1263,1271,1308,1324,1358,1475,1523,1575,1592],{"type":56,"tag":94,"props":919,"children":920},{"class":545,"line":546},[921],{"type":56,"tag":94,"props":922,"children":924},{"style":923},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[925],{"type":62,"value":926},"\u003C!-- Inline SVG drawing that responds to controls -->\n",{"type":56,"tag":94,"props":928,"children":929},{"class":545,"line":566},[930,935,941,946,950,954,959,963,968,972,976,981,985,990,994,998,1003,1007],{"type":56,"tag":94,"props":931,"children":932},{"style":550},[933],{"type":62,"value":934},"\u003C",{"type":56,"tag":94,"props":936,"children":938},{"style":937},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[939],{"type":62,"value":940},"svg",{"type":56,"tag":94,"props":942,"children":943},{"style":848},[944],{"type":62,"value":945}," width",{"type":56,"tag":94,"props":947,"children":948},{"style":550},[949],{"type":62,"value":856},{"type":56,"tag":94,"props":951,"children":952},{"style":550},[953],{"type":62,"value":861},{"type":56,"tag":94,"props":955,"children":956},{"style":864},[957],{"type":62,"value":958},"100%",{"type":56,"tag":94,"props":960,"children":961},{"style":550},[962],{"type":62,"value":861},{"type":56,"tag":94,"props":964,"children":965},{"style":848},[966],{"type":62,"value":967}," viewBox",{"type":56,"tag":94,"props":969,"children":970},{"style":550},[971],{"type":62,"value":856},{"type":56,"tag":94,"props":973,"children":974},{"style":550},[975],{"type":62,"value":861},{"type":56,"tag":94,"props":977,"children":978},{"style":864},[979],{"type":62,"value":980},"0 0 680 400",{"type":56,"tag":94,"props":982,"children":983},{"style":550},[984],{"type":62,"value":861},{"type":56,"tag":94,"props":986,"children":987},{"style":848},[988],{"type":62,"value":989}," xmlns",{"type":56,"tag":94,"props":991,"children":992},{"style":550},[993],{"type":62,"value":856},{"type":56,"tag":94,"props":995,"children":996},{"style":550},[997],{"type":62,"value":861},{"type":56,"tag":94,"props":999,"children":1000},{"style":864},[1001],{"type":62,"value":1002},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg",{"type":56,"tag":94,"props":1004,"children":1005},{"style":550},[1006],{"type":62,"value":861},{"type":56,"tag":94,"props":1008,"children":1009},{"style":550},[1010],{"type":62,"value":1011},">\n",{"type":56,"tag":94,"props":1013,"children":1014},{"class":545,"line":592},[1015],{"type":56,"tag":94,"props":1016,"children":1017},{"style":923},[1018],{"type":62,"value":1019},"  \u003C!-- Dynamic elements with IDs for JS manipulation -->\n",{"type":56,"tag":94,"props":1021,"children":1022},{"class":545,"line":614},[1023,1028,1033,1038,1042,1046,1051,1055,1060,1064,1068,1073,1077,1082,1086,1090,1094,1098,1102,1106,1110,1115,1119,1124,1128,1132,1137],{"type":56,"tag":94,"props":1024,"children":1025},{"style":550},[1026],{"type":62,"value":1027},"  \u003C",{"type":56,"tag":94,"props":1029,"children":1030},{"style":937},[1031],{"type":62,"value":1032},"rect",{"type":56,"tag":94,"props":1034,"children":1035},{"style":848},[1036],{"type":62,"value":1037}," id",{"type":56,"tag":94,"props":1039,"children":1040},{"style":550},[1041],{"type":62,"value":856},{"type":56,"tag":94,"props":1043,"children":1044},{"style":550},[1045],{"type":62,"value":861},{"type":56,"tag":94,"props":1047,"children":1048},{"style":864},[1049],{"type":62,"value":1050},"dynamic-element",{"type":56,"tag":94,"props":1052,"children":1053},{"style":550},[1054],{"type":62,"value":861},{"type":56,"tag":94,"props":1056,"children":1057},{"style":848},[1058],{"type":62,"value":1059}," x",{"type":56,"tag":94,"props":1061,"children":1062},{"style":550},[1063],{"type":62,"value":856},{"type":56,"tag":94,"props":1065,"children":1066},{"style":550},[1067],{"type":62,"value":861},{"type":56,"tag":94,"props":1069,"children":1070},{"style":864},[1071],{"type":62,"value":1072},"100",{"type":56,"tag":94,"props":1074,"children":1075},{"style":550},[1076],{"type":62,"value":861},{"type":56,"tag":94,"props":1078,"children":1079},{"style":848},[1080],{"type":62,"value":1081}," y",{"type":56,"tag":94,"props":1083,"children":1084},{"style":550},[1085],{"type":62,"value":856},{"type":56,"tag":94,"props":1087,"children":1088},{"style":550},[1089],{"type":62,"value":861},{"type":56,"tag":94,"props":1091,"children":1092},{"style":864},[1093],{"type":62,"value":1072},{"type":56,"tag":94,"props":1095,"children":1096},{"style":550},[1097],{"type":62,"value":861},{"type":56,"tag":94,"props":1099,"children":1100},{"style":848},[1101],{"type":62,"value":945},{"type":56,"tag":94,"props":1103,"children":1104},{"style":550},[1105],{"type":62,"value":856},{"type":56,"tag":94,"props":1107,"children":1108},{"style":550},[1109],{"type":62,"value":861},{"type":56,"tag":94,"props":1111,"children":1112},{"style":864},[1113],{"type":62,"value":1114},"200",{"type":56,"tag":94,"props":1116,"children":1117},{"style":550},[1118],{"type":62,"value":861},{"type":56,"tag":94,"props":1120,"children":1121},{"style":848},[1122],{"type":62,"value":1123}," height",{"type":56,"tag":94,"props":1125,"children":1126},{"style":550},[1127],{"type":62,"value":856},{"type":56,"tag":94,"props":1129,"children":1130},{"style":550},[1131],{"type":62,"value":861},{"type":56,"tag":94,"props":1133,"children":1134},{"style":864},[1135],{"type":62,"value":1136},"50",{"type":56,"tag":94,"props":1138,"children":1139},{"style":550},[1140],{"type":62,"value":1141},"\"\n",{"type":56,"tag":94,"props":1143,"children":1144},{"class":545,"line":637},[1145,1150,1154,1158,1163,1167,1172,1176,1180,1185,1189,1194,1198,1202,1207,1211,1216,1220,1224,1229,1233],{"type":56,"tag":94,"props":1146,"children":1147},{"style":848},[1148],{"type":62,"value":1149},"        fill",{"type":56,"tag":94,"props":1151,"children":1152},{"style":550},[1153],{"type":62,"value":856},{"type":56,"tag":94,"props":1155,"children":1156},{"style":550},[1157],{"type":62,"value":861},{"type":56,"tag":94,"props":1159,"children":1160},{"style":864},[1161],{"type":62,"value":1162},"#E6F1FB",{"type":56,"tag":94,"props":1164,"children":1165},{"style":550},[1166],{"type":62,"value":861},{"type":56,"tag":94,"props":1168,"children":1169},{"style":848},[1170],{"type":62,"value":1171}," stroke",{"type":56,"tag":94,"props":1173,"children":1174},{"style":550},[1175],{"type":62,"value":856},{"type":56,"tag":94,"props":1177,"children":1178},{"style":550},[1179],{"type":62,"value":861},{"type":56,"tag":94,"props":1181,"children":1182},{"style":864},[1183],{"type":62,"value":1184},"#185FA5",{"type":56,"tag":94,"props":1186,"children":1187},{"style":550},[1188],{"type":62,"value":861},{"type":56,"tag":94,"props":1190,"children":1191},{"style":848},[1192],{"type":62,"value":1193}," stroke-width",{"type":56,"tag":94,"props":1195,"children":1196},{"style":550},[1197],{"type":62,"value":856},{"type":56,"tag":94,"props":1199,"children":1200},{"style":550},[1201],{"type":62,"value":861},{"type":56,"tag":94,"props":1203,"children":1204},{"style":864},[1205],{"type":62,"value":1206},"0.5",{"type":56,"tag":94,"props":1208,"children":1209},{"style":550},[1210],{"type":62,"value":861},{"type":56,"tag":94,"props":1212,"children":1213},{"style":848},[1214],{"type":62,"value":1215}," rx",{"type":56,"tag":94,"props":1217,"children":1218},{"style":550},[1219],{"type":62,"value":856},{"type":56,"tag":94,"props":1221,"children":1222},{"style":550},[1223],{"type":62,"value":861},{"type":56,"tag":94,"props":1225,"children":1226},{"style":864},[1227],{"type":62,"value":1228},"8",{"type":56,"tag":94,"props":1230,"children":1231},{"style":550},[1232],{"type":62,"value":861},{"type":56,"tag":94,"props":1234,"children":1235},{"style":550},[1236],{"type":62,"value":1237},"\u002F>\n",{"type":56,"tag":94,"props":1239,"children":1240},{"class":545,"line":664},[1241,1246,1250],{"type":56,"tag":94,"props":1242,"children":1243},{"style":550},[1244],{"type":62,"value":1245},"\u003C\u002F",{"type":56,"tag":94,"props":1247,"children":1248},{"style":937},[1249],{"type":62,"value":940},{"type":56,"tag":94,"props":1251,"children":1252},{"style":550},[1253],{"type":62,"value":1011},{"type":56,"tag":94,"props":1255,"children":1256},{"class":545,"line":686},[1257],{"type":56,"tag":94,"props":1258,"children":1260},{"emptyLinePlaceholder":1259},true,[1261],{"type":62,"value":1262},"\n",{"type":56,"tag":94,"props":1264,"children":1265},{"class":545,"line":735},[1266],{"type":56,"tag":94,"props":1267,"children":1268},{"style":923},[1269],{"type":62,"value":1270},"\u003C!-- Controls below the visual -->\n",{"type":56,"tag":94,"props":1272,"children":1273},{"class":545,"line":744},[1274,1278,1283,1288,1292,1296,1300,1304],{"type":56,"tag":94,"props":1275,"children":1276},{"style":550},[1277],{"type":62,"value":934},{"type":56,"tag":94,"props":1279,"children":1280},{"style":937},[1281],{"type":62,"value":1282},"div",{"type":56,"tag":94,"props":1284,"children":1285},{"style":848},[1286],{"type":62,"value":1287}," class",{"type":56,"tag":94,"props":1289,"children":1290},{"style":550},[1291],{"type":62,"value":856},{"type":56,"tag":94,"props":1293,"children":1294},{"style":550},[1295],{"type":62,"value":861},{"type":56,"tag":94,"props":1297,"children":1298},{"style":864},[1299],{"type":62,"value":558},{"type":56,"tag":94,"props":1301,"children":1302},{"style":550},[1303],{"type":62,"value":861},{"type":56,"tag":94,"props":1305,"children":1306},{"style":550},[1307],{"type":62,"value":1011},{"type":56,"tag":94,"props":1309,"children":1310},{"class":545,"line":765},[1311,1315,1320],{"type":56,"tag":94,"props":1312,"children":1313},{"style":550},[1314],{"type":62,"value":1027},{"type":56,"tag":94,"props":1316,"children":1317},{"style":937},[1318],{"type":62,"value":1319},"label",{"type":56,"tag":94,"props":1321,"children":1322},{"style":550},[1323],{"type":62,"value":1011},{"type":56,"tag":94,"props":1325,"children":1326},{"class":545,"line":785},[1327,1332,1336,1341,1346,1350,1354],{"type":56,"tag":94,"props":1328,"children":1329},{"style":550},[1330],{"type":62,"value":1331},"    \u003C",{"type":56,"tag":94,"props":1333,"children":1334},{"style":937},[1335],{"type":62,"value":94},{"type":56,"tag":94,"props":1337,"children":1338},{"style":550},[1339],{"type":62,"value":1340},">",{"type":56,"tag":94,"props":1342,"children":1343},{"style":581},[1344],{"type":62,"value":1345},"Parameter",{"type":56,"tag":94,"props":1347,"children":1348},{"style":550},[1349],{"type":62,"value":1245},{"type":56,"tag":94,"props":1351,"children":1352},{"style":937},[1353],{"type":62,"value":94},{"type":56,"tag":94,"props":1355,"children":1356},{"style":550},[1357],{"type":62,"value":1011},{"type":56,"tag":94,"props":1359,"children":1360},{"class":545,"line":805},[1361,1365,1369,1374,1378,1382,1386,1390,1394,1398,1402,1407,1411,1416,1420,1424,1429,1433,1438,1442,1446,1450,1454,1459,1463,1467,1471],{"type":56,"tag":94,"props":1362,"children":1363},{"style":550},[1364],{"type":62,"value":1331},{"type":56,"tag":94,"props":1366,"children":1367},{"style":937},[1368],{"type":62,"value":840},{"type":56,"tag":94,"props":1370,"children":1371},{"style":848},[1372],{"type":62,"value":1373}," type",{"type":56,"tag":94,"props":1375,"children":1376},{"style":550},[1377],{"type":62,"value":856},{"type":56,"tag":94,"props":1379,"children":1380},{"style":550},[1381],{"type":62,"value":861},{"type":56,"tag":94,"props":1383,"children":1384},{"style":864},[1385],{"type":62,"value":867},{"type":56,"tag":94,"props":1387,"children":1388},{"style":550},[1389],{"type":62,"value":861},{"type":56,"tag":94,"props":1391,"children":1392},{"style":848},[1393],{"type":62,"value":1037},{"type":56,"tag":94,"props":1395,"children":1396},{"style":550},[1397],{"type":62,"value":856},{"type":56,"tag":94,"props":1399,"children":1400},{"style":550},[1401],{"type":62,"value":861},{"type":56,"tag":94,"props":1403,"children":1404},{"style":864},[1405],{"type":62,"value":1406},"param-slider",{"type":56,"tag":94,"props":1408,"children":1409},{"style":550},[1410],{"type":62,"value":861},{"type":56,"tag":94,"props":1412,"children":1413},{"style":848},[1414],{"type":62,"value":1415}," min",{"type":56,"tag":94,"props":1417,"children":1418},{"style":550},[1419],{"type":62,"value":856},{"type":56,"tag":94,"props":1421,"children":1422},{"style":550},[1423],{"type":62,"value":861},{"type":56,"tag":94,"props":1425,"children":1426},{"style":864},[1427],{"type":62,"value":1428},"0",{"type":56,"tag":94,"props":1430,"children":1431},{"style":550},[1432],{"type":62,"value":861},{"type":56,"tag":94,"props":1434,"children":1435},{"style":848},[1436],{"type":62,"value":1437}," max",{"type":56,"tag":94,"props":1439,"children":1440},{"style":550},[1441],{"type":62,"value":856},{"type":56,"tag":94,"props":1443,"children":1444},{"style":550},[1445],{"type":62,"value":861},{"type":56,"tag":94,"props":1447,"children":1448},{"style":864},[1449],{"type":62,"value":1072},{"type":56,"tag":94,"props":1451,"children":1452},{"style":550},[1453],{"type":62,"value":861},{"type":56,"tag":94,"props":1455,"children":1456},{"style":848},[1457],{"type":62,"value":1458}," value",{"type":56,"tag":94,"props":1460,"children":1461},{"style":550},[1462],{"type":62,"value":856},{"type":56,"tag":94,"props":1464,"children":1465},{"style":550},[1466],{"type":62,"value":861},{"type":56,"tag":94,"props":1468,"children":1469},{"style":864},[1470],{"type":62,"value":1136},{"type":56,"tag":94,"props":1472,"children":1473},{"style":550},[1474],{"type":62,"value":1141},{"type":56,"tag":94,"props":1476,"children":1477},{"class":545,"line":826},[1478,1483,1487,1491,1496,1500,1505,1510,1515,1519],{"type":56,"tag":94,"props":1479,"children":1480},{"style":848},[1481],{"type":62,"value":1482},"           oninput",{"type":56,"tag":94,"props":1484,"children":1485},{"style":550},[1486],{"type":62,"value":856},{"type":56,"tag":94,"props":1488,"children":1489},{"style":550},[1490],{"type":62,"value":861},{"type":56,"tag":94,"props":1492,"children":1493},{"style":699},[1494],{"type":62,"value":1495},"updateParam",{"type":56,"tag":94,"props":1497,"children":1498},{"style":864},[1499],{"type":62,"value":707},{"type":56,"tag":94,"props":1501,"children":1502},{"style":550},[1503],{"type":62,"value":1504},"this.",{"type":56,"tag":94,"props":1506,"children":1507},{"style":581},[1508],{"type":62,"value":1509},"value",{"type":56,"tag":94,"props":1511,"children":1512},{"style":864},[1513],{"type":62,"value":1514},")",{"type":56,"tag":94,"props":1516,"children":1517},{"style":550},[1518],{"type":62,"value":861},{"type":56,"tag":94,"props":1520,"children":1521},{"style":550},[1522],{"type":62,"value":1011},{"type":56,"tag":94,"props":1524,"children":1525},{"class":545,"line":834},[1526,1530,1534,1538,1542,1546,1551,1555,1559,1563,1567,1571],{"type":56,"tag":94,"props":1527,"children":1528},{"style":550},[1529],{"type":62,"value":1331},{"type":56,"tag":94,"props":1531,"children":1532},{"style":937},[1533],{"type":62,"value":94},{"type":56,"tag":94,"props":1535,"children":1536},{"style":848},[1537],{"type":62,"value":1037},{"type":56,"tag":94,"props":1539,"children":1540},{"style":550},[1541],{"type":62,"value":856},{"type":56,"tag":94,"props":1543,"children":1544},{"style":550},[1545],{"type":62,"value":861},{"type":56,"tag":94,"props":1547,"children":1548},{"style":864},[1549],{"type":62,"value":1550},"param-label",{"type":56,"tag":94,"props":1552,"children":1553},{"style":550},[1554],{"type":62,"value":861},{"type":56,"tag":94,"props":1556,"children":1557},{"style":550},[1558],{"type":62,"value":1340},{"type":56,"tag":94,"props":1560,"children":1561},{"style":581},[1562],{"type":62,"value":1136},{"type":56,"tag":94,"props":1564,"children":1565},{"style":550},[1566],{"type":62,"value":1245},{"type":56,"tag":94,"props":1568,"children":1569},{"style":937},[1570],{"type":62,"value":94},{"type":56,"tag":94,"props":1572,"children":1573},{"style":550},[1574],{"type":62,"value":1011},{"type":56,"tag":94,"props":1576,"children":1578},{"class":545,"line":1577},15,[1579,1584,1588],{"type":56,"tag":94,"props":1580,"children":1581},{"style":550},[1582],{"type":62,"value":1583},"  \u003C\u002F",{"type":56,"tag":94,"props":1585,"children":1586},{"style":937},[1587],{"type":62,"value":1319},{"type":56,"tag":94,"props":1589,"children":1590},{"style":550},[1591],{"type":62,"value":1011},{"type":56,"tag":94,"props":1593,"children":1595},{"class":545,"line":1594},16,[1596,1600,1604],{"type":56,"tag":94,"props":1597,"children":1598},{"style":550},[1599],{"type":62,"value":1245},{"type":56,"tag":94,"props":1601,"children":1602},{"style":937},[1603],{"type":62,"value":1282},{"type":56,"tag":94,"props":1605,"children":1606},{"style":550},[1607],{"type":62,"value":1011},{"type":56,"tag":65,"props":1609,"children":1610},{},[1611],{"type":62,"value":1612},"jsFunctions parameter:",{"type":56,"tag":139,"props":1614,"children":1618},{"className":1615,"code":1616,"language":1617,"meta":148,"style":148},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function updateParam(value) {\n  document.getElementById('param-label').textContent = value;\n  \u002F\u002F Modify SVG elements based on value\n  const el = document.getElementById('dynamic-element');\n  el.setAttribute('width', 100 + value * 2);\n}\n","js",[1619],{"type":56,"tag":146,"props":1620,"children":1621},{"__ignoreMap":148},[1622,1652,1712,1720,1774,1844],{"type":56,"tag":94,"props":1623,"children":1624},{"class":545,"line":546},[1625,1630,1635,1639,1644,1648],{"type":56,"tag":94,"props":1626,"children":1627},{"style":848},[1628],{"type":62,"value":1629},"function",{"type":56,"tag":94,"props":1631,"children":1632},{"style":699},[1633],{"type":62,"value":1634}," updateParam",{"type":56,"tag":94,"props":1636,"children":1637},{"style":550},[1638],{"type":62,"value":707},{"type":56,"tag":94,"props":1640,"children":1642},{"style":1641},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1643],{"type":62,"value":1509},{"type":56,"tag":94,"props":1645,"children":1646},{"style":550},[1647],{"type":62,"value":1514},{"type":56,"tag":94,"props":1649,"children":1650},{"style":550},[1651],{"type":62,"value":563},{"type":56,"tag":94,"props":1653,"children":1654},{"class":545,"line":566},[1655,1660,1664,1669,1673,1678,1682,1686,1690,1694,1699,1704,1708],{"type":56,"tag":94,"props":1656,"children":1657},{"style":581},[1658],{"type":62,"value":1659},"  document",{"type":56,"tag":94,"props":1661,"children":1662},{"style":550},[1663],{"type":62,"value":242},{"type":56,"tag":94,"props":1665,"children":1666},{"style":699},[1667],{"type":62,"value":1668},"getElementById",{"type":56,"tag":94,"props":1670,"children":1671},{"style":937},[1672],{"type":62,"value":707},{"type":56,"tag":94,"props":1674,"children":1675},{"style":550},[1676],{"type":62,"value":1677},"'",{"type":56,"tag":94,"props":1679,"children":1680},{"style":864},[1681],{"type":62,"value":1550},{"type":56,"tag":94,"props":1683,"children":1684},{"style":550},[1685],{"type":62,"value":1677},{"type":56,"tag":94,"props":1687,"children":1688},{"style":937},[1689],{"type":62,"value":1514},{"type":56,"tag":94,"props":1691,"children":1692},{"style":550},[1693],{"type":62,"value":242},{"type":56,"tag":94,"props":1695,"children":1696},{"style":581},[1697],{"type":62,"value":1698},"textContent",{"type":56,"tag":94,"props":1700,"children":1701},{"style":550},[1702],{"type":62,"value":1703}," =",{"type":56,"tag":94,"props":1705,"children":1706},{"style":581},[1707],{"type":62,"value":1458},{"type":56,"tag":94,"props":1709,"children":1710},{"style":550},[1711],{"type":62,"value":589},{"type":56,"tag":94,"props":1713,"children":1714},{"class":545,"line":592},[1715],{"type":56,"tag":94,"props":1716,"children":1717},{"style":923},[1718],{"type":62,"value":1719},"  \u002F\u002F Modify SVG elements based on value\n",{"type":56,"tag":94,"props":1721,"children":1722},{"class":545,"line":614},[1723,1728,1733,1737,1742,1746,1750,1754,1758,1762,1766,1770],{"type":56,"tag":94,"props":1724,"children":1725},{"style":848},[1726],{"type":62,"value":1727},"  const",{"type":56,"tag":94,"props":1729,"children":1730},{"style":581},[1731],{"type":62,"value":1732}," el",{"type":56,"tag":94,"props":1734,"children":1735},{"style":550},[1736],{"type":62,"value":1703},{"type":56,"tag":94,"props":1738,"children":1739},{"style":581},[1740],{"type":62,"value":1741}," document",{"type":56,"tag":94,"props":1743,"children":1744},{"style":550},[1745],{"type":62,"value":242},{"type":56,"tag":94,"props":1747,"children":1748},{"style":699},[1749],{"type":62,"value":1668},{"type":56,"tag":94,"props":1751,"children":1752},{"style":937},[1753],{"type":62,"value":707},{"type":56,"tag":94,"props":1755,"children":1756},{"style":550},[1757],{"type":62,"value":1677},{"type":56,"tag":94,"props":1759,"children":1760},{"style":864},[1761],{"type":62,"value":1050},{"type":56,"tag":94,"props":1763,"children":1764},{"style":550},[1765],{"type":62,"value":1677},{"type":56,"tag":94,"props":1767,"children":1768},{"style":937},[1769],{"type":62,"value":1514},{"type":56,"tag":94,"props":1771,"children":1772},{"style":550},[1773],{"type":62,"value":589},{"type":56,"tag":94,"props":1775,"children":1776},{"class":545,"line":637},[1777,1782,1786,1791,1795,1799,1804,1808,1812,1817,1822,1826,1831,1836,1840],{"type":56,"tag":94,"props":1778,"children":1779},{"style":581},[1780],{"type":62,"value":1781},"  el",{"type":56,"tag":94,"props":1783,"children":1784},{"style":550},[1785],{"type":62,"value":242},{"type":56,"tag":94,"props":1787,"children":1788},{"style":699},[1789],{"type":62,"value":1790},"setAttribute",{"type":56,"tag":94,"props":1792,"children":1793},{"style":937},[1794],{"type":62,"value":707},{"type":56,"tag":94,"props":1796,"children":1797},{"style":550},[1798],{"type":62,"value":1677},{"type":56,"tag":94,"props":1800,"children":1801},{"style":864},[1802],{"type":62,"value":1803},"width",{"type":56,"tag":94,"props":1805,"children":1806},{"style":550},[1807],{"type":62,"value":1677},{"type":56,"tag":94,"props":1809,"children":1810},{"style":550},[1811],{"type":62,"value":717},{"type":56,"tag":94,"props":1813,"children":1814},{"style":627},[1815],{"type":62,"value":1816}," 100",{"type":56,"tag":94,"props":1818,"children":1819},{"style":550},[1820],{"type":62,"value":1821}," +",{"type":56,"tag":94,"props":1823,"children":1824},{"style":581},[1825],{"type":62,"value":1458},{"type":56,"tag":94,"props":1827,"children":1828},{"style":550},[1829],{"type":62,"value":1830}," *",{"type":56,"tag":94,"props":1832,"children":1833},{"style":627},[1834],{"type":62,"value":1835}," 2",{"type":56,"tag":94,"props":1837,"children":1838},{"style":937},[1839],{"type":62,"value":1514},{"type":56,"tag":94,"props":1841,"children":1842},{"style":550},[1843],{"type":62,"value":589},{"type":56,"tag":94,"props":1845,"children":1846},{"class":545,"line":664},[1847],{"type":56,"tag":94,"props":1848,"children":1849},{"style":550},[1850],{"type":62,"value":741},{"type":56,"tag":65,"props":1852,"children":1853},{},[1854],{"type":62,"value":1855},"jsExpressions parameter:",{"type":56,"tag":139,"props":1857,"children":1859},{"className":1615,"code":1858,"language":1617,"meta":148,"style":148},"updateParam(50);\n",[1860],{"type":56,"tag":146,"props":1861,"children":1862},{"__ignoreMap":148},[1863],{"type":56,"tag":94,"props":1864,"children":1865},{"class":545,"line":546},[1866,1870,1874,1878,1882],{"type":56,"tag":94,"props":1867,"children":1868},{"style":699},[1869],{"type":62,"value":1495},{"type":56,"tag":94,"props":1871,"children":1872},{"style":581},[1873],{"type":62,"value":707},{"type":56,"tag":94,"props":1875,"children":1876},{"style":627},[1877],{"type":62,"value":1136},{"type":56,"tag":94,"props":1879,"children":1880},{"style":581},[1881],{"type":62,"value":1514},{"type":56,"tag":94,"props":1883,"children":1884},{"style":550},[1885],{"type":62,"value":589},{"type":56,"tag":82,"props":1887,"children":1889},{"id":1888},"template-step-through-explainer",[1890],{"type":62,"value":1891},"Template: Step-Through Explainer",{"type":56,"tag":65,"props":1893,"children":1894},{},[1895],{"type":62,"value":1896},"For cyclic or staged processes (event loops, biological cycles, pipelines).",{"type":56,"tag":65,"props":1898,"children":1899},{},[1900],{"type":62,"value":534},{"type":56,"tag":139,"props":1902,"children":1904},{"className":537,"code":1903,"language":297,"meta":148,"style":148},".step-nav {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 12px 0;\n  font-size: 13px;\n}\n.step-nav button {\n  padding: 6px 16px;\n  border: 1px solid var(--color-border-tertiary, #ddd);\n  border-radius: 8px;\n  background: var(--color-background-secondary, #f5f5f5);\n  color: var(--color-text-primary, #333);\n  cursor: pointer;\n  font-size: 13px;\n}\n.step-nav button:hover {\n  background: var(--color-background-tertiary, #eee);\n}\n.dot { width: 8px; height: 8px; border-radius: 50%;\n       background: var(--color-border-tertiary, #ccc);\n       transition: background 0.2s; }\n.dot.active { background: var(--color-text-info, #185FA5); }\n.step-content { min-height: 300px; }\n#dots { display: flex; gap: 6px; }\n#step-label { margin-left: auto; color: var(--color-text-secondary, #888); }\n",[1905],{"type":56,"tag":146,"props":1906,"children":1907},{"__ignoreMap":148},[1908,1924,1943,1962,1981,2004,2023,2030,2050,2074,2127,2148,2190,2231,2252,2271,2278,2307,2349,2357,2424,2466,2497,2566,2605,2661],{"type":56,"tag":94,"props":1909,"children":1910},{"class":545,"line":546},[1911,1915,1920],{"type":56,"tag":94,"props":1912,"children":1913},{"style":550},[1914],{"type":62,"value":242},{"type":56,"tag":94,"props":1916,"children":1917},{"style":555},[1918],{"type":62,"value":1919},"step-nav",{"type":56,"tag":94,"props":1921,"children":1922},{"style":550},[1923],{"type":62,"value":563},{"type":56,"tag":94,"props":1925,"children":1926},{"class":545,"line":566},[1927,1931,1935,1939],{"type":56,"tag":94,"props":1928,"children":1929},{"style":570},[1930],{"type":62,"value":573},{"type":56,"tag":94,"props":1932,"children":1933},{"style":550},[1934],{"type":62,"value":578},{"type":56,"tag":94,"props":1936,"children":1937},{"style":581},[1938],{"type":62,"value":584},{"type":56,"tag":94,"props":1940,"children":1941},{"style":550},[1942],{"type":62,"value":589},{"type":56,"tag":94,"props":1944,"children":1945},{"class":545,"line":592},[1946,1950,1954,1958],{"type":56,"tag":94,"props":1947,"children":1948},{"style":570},[1949],{"type":62,"value":598},{"type":56,"tag":94,"props":1951,"children":1952},{"style":550},[1953],{"type":62,"value":578},{"type":56,"tag":94,"props":1955,"children":1956},{"style":581},[1957],{"type":62,"value":607},{"type":56,"tag":94,"props":1959,"children":1960},{"style":550},[1961],{"type":62,"value":589},{"type":56,"tag":94,"props":1963,"children":1964},{"class":545,"line":614},[1965,1969,1973,1977],{"type":56,"tag":94,"props":1966,"children":1967},{"style":570},[1968],{"type":62,"value":620},{"type":56,"tag":94,"props":1970,"children":1971},{"style":550},[1972],{"type":62,"value":578},{"type":56,"tag":94,"props":1974,"children":1975},{"style":627},[1976],{"type":62,"value":652},{"type":56,"tag":94,"props":1978,"children":1979},{"style":550},[1980],{"type":62,"value":589},{"type":56,"tag":94,"props":1982,"children":1983},{"class":545,"line":637},[1984,1988,1992,1996,2000],{"type":56,"tag":94,"props":1985,"children":1986},{"style":570},[1987],{"type":62,"value":643},{"type":56,"tag":94,"props":1989,"children":1990},{"style":550},[1991],{"type":62,"value":578},{"type":56,"tag":94,"props":1993,"children":1994},{"style":627},[1995],{"type":62,"value":652},{"type":56,"tag":94,"props":1997,"children":1998},{"style":627},[1999],{"type":62,"value":657},{"type":56,"tag":94,"props":2001,"children":2002},{"style":550},[2003],{"type":62,"value":589},{"type":56,"tag":94,"props":2005,"children":2006},{"class":545,"line":664},[2007,2011,2015,2019],{"type":56,"tag":94,"props":2008,"children":2009},{"style":570},[2010],{"type":62,"value":670},{"type":56,"tag":94,"props":2012,"children":2013},{"style":550},[2014],{"type":62,"value":578},{"type":56,"tag":94,"props":2016,"children":2017},{"style":627},[2018],{"type":62,"value":679},{"type":56,"tag":94,"props":2020,"children":2021},{"style":550},[2022],{"type":62,"value":589},{"type":56,"tag":94,"props":2024,"children":2025},{"class":545,"line":686},[2026],{"type":56,"tag":94,"props":2027,"children":2028},{"style":550},[2029],{"type":62,"value":741},{"type":56,"tag":94,"props":2031,"children":2032},{"class":545,"line":735},[2033,2037,2041,2046],{"type":56,"tag":94,"props":2034,"children":2035},{"style":550},[2036],{"type":62,"value":242},{"type":56,"tag":94,"props":2038,"children":2039},{"style":555},[2040],{"type":62,"value":1919},{"type":56,"tag":94,"props":2042,"children":2043},{"style":555},[2044],{"type":62,"value":2045}," button",{"type":56,"tag":94,"props":2047,"children":2048},{"style":550},[2049],{"type":62,"value":563},{"type":56,"tag":94,"props":2051,"children":2052},{"class":545,"line":744},[2053,2058,2062,2066,2070],{"type":56,"tag":94,"props":2054,"children":2055},{"style":570},[2056],{"type":62,"value":2057},"  padding",{"type":56,"tag":94,"props":2059,"children":2060},{"style":550},[2061],{"type":62,"value":578},{"type":56,"tag":94,"props":2063,"children":2064},{"style":627},[2065],{"type":62,"value":819},{"type":56,"tag":94,"props":2067,"children":2068},{"style":627},[2069],{"type":62,"value":630},{"type":56,"tag":94,"props":2071,"children":2072},{"style":550},[2073],{"type":62,"value":589},{"type":56,"tag":94,"props":2075,"children":2076},{"class":545,"line":765},[2077,2082,2086,2091,2096,2101,2105,2110,2114,2118,2123],{"type":56,"tag":94,"props":2078,"children":2079},{"style":570},[2080],{"type":62,"value":2081},"  border",{"type":56,"tag":94,"props":2083,"children":2084},{"style":550},[2085],{"type":62,"value":578},{"type":56,"tag":94,"props":2087,"children":2088},{"style":627},[2089],{"type":62,"value":2090}," 1px",{"type":56,"tag":94,"props":2092,"children":2093},{"style":581},[2094],{"type":62,"value":2095}," solid ",{"type":56,"tag":94,"props":2097,"children":2098},{"style":699},[2099],{"type":62,"value":2100},"var",{"type":56,"tag":94,"props":2102,"children":2103},{"style":550},[2104],{"type":62,"value":707},{"type":56,"tag":94,"props":2106,"children":2107},{"style":581},[2108],{"type":62,"value":2109},"--color-border-tertiary",{"type":56,"tag":94,"props":2111,"children":2112},{"style":550},[2113],{"type":62,"value":717},{"type":56,"tag":94,"props":2115,"children":2116},{"style":550},[2117],{"type":62,"value":722},{"type":56,"tag":94,"props":2119,"children":2120},{"style":581},[2121],{"type":62,"value":2122},"ddd",{"type":56,"tag":94,"props":2124,"children":2125},{"style":550},[2126],{"type":62,"value":732},{"type":56,"tag":94,"props":2128,"children":2129},{"class":545,"line":785},[2130,2135,2139,2144],{"type":56,"tag":94,"props":2131,"children":2132},{"style":570},[2133],{"type":62,"value":2134},"  border-radius",{"type":56,"tag":94,"props":2136,"children":2137},{"style":550},[2138],{"type":62,"value":578},{"type":56,"tag":94,"props":2140,"children":2141},{"style":627},[2142],{"type":62,"value":2143}," 8px",{"type":56,"tag":94,"props":2145,"children":2146},{"style":550},[2147],{"type":62,"value":589},{"type":56,"tag":94,"props":2149,"children":2150},{"class":545,"line":805},[2151,2156,2160,2164,2168,2173,2177,2181,2186],{"type":56,"tag":94,"props":2152,"children":2153},{"style":570},[2154],{"type":62,"value":2155},"  background",{"type":56,"tag":94,"props":2157,"children":2158},{"style":550},[2159],{"type":62,"value":578},{"type":56,"tag":94,"props":2161,"children":2162},{"style":699},[2163],{"type":62,"value":702},{"type":56,"tag":94,"props":2165,"children":2166},{"style":550},[2167],{"type":62,"value":707},{"type":56,"tag":94,"props":2169,"children":2170},{"style":581},[2171],{"type":62,"value":2172},"--color-background-secondary",{"type":56,"tag":94,"props":2174,"children":2175},{"style":550},[2176],{"type":62,"value":717},{"type":56,"tag":94,"props":2178,"children":2179},{"style":550},[2180],{"type":62,"value":722},{"type":56,"tag":94,"props":2182,"children":2183},{"style":581},[2184],{"type":62,"value":2185},"f5f5f5",{"type":56,"tag":94,"props":2187,"children":2188},{"style":550},[2189],{"type":62,"value":732},{"type":56,"tag":94,"props":2191,"children":2192},{"class":545,"line":826},[2193,2197,2201,2205,2209,2214,2218,2222,2227],{"type":56,"tag":94,"props":2194,"children":2195},{"style":570},[2196],{"type":62,"value":692},{"type":56,"tag":94,"props":2198,"children":2199},{"style":550},[2200],{"type":62,"value":578},{"type":56,"tag":94,"props":2202,"children":2203},{"style":699},[2204],{"type":62,"value":702},{"type":56,"tag":94,"props":2206,"children":2207},{"style":550},[2208],{"type":62,"value":707},{"type":56,"tag":94,"props":2210,"children":2211},{"style":581},[2212],{"type":62,"value":2213},"--color-text-primary",{"type":56,"tag":94,"props":2215,"children":2216},{"style":550},[2217],{"type":62,"value":717},{"type":56,"tag":94,"props":2219,"children":2220},{"style":550},[2221],{"type":62,"value":722},{"type":56,"tag":94,"props":2223,"children":2224},{"style":581},[2225],{"type":62,"value":2226},"333",{"type":56,"tag":94,"props":2228,"children":2229},{"style":550},[2230],{"type":62,"value":732},{"type":56,"tag":94,"props":2232,"children":2233},{"class":545,"line":834},[2234,2239,2243,2248],{"type":56,"tag":94,"props":2235,"children":2236},{"style":570},[2237],{"type":62,"value":2238},"  cursor",{"type":56,"tag":94,"props":2240,"children":2241},{"style":550},[2242],{"type":62,"value":578},{"type":56,"tag":94,"props":2244,"children":2245},{"style":581},[2246],{"type":62,"value":2247}," pointer",{"type":56,"tag":94,"props":2249,"children":2250},{"style":550},[2251],{"type":62,"value":589},{"type":56,"tag":94,"props":2253,"children":2254},{"class":545,"line":1577},[2255,2259,2263,2267],{"type":56,"tag":94,"props":2256,"children":2257},{"style":570},[2258],{"type":62,"value":670},{"type":56,"tag":94,"props":2260,"children":2261},{"style":550},[2262],{"type":62,"value":578},{"type":56,"tag":94,"props":2264,"children":2265},{"style":627},[2266],{"type":62,"value":679},{"type":56,"tag":94,"props":2268,"children":2269},{"style":550},[2270],{"type":62,"value":589},{"type":56,"tag":94,"props":2272,"children":2273},{"class":545,"line":1594},[2274],{"type":56,"tag":94,"props":2275,"children":2276},{"style":550},[2277],{"type":62,"value":741},{"type":56,"tag":94,"props":2279,"children":2281},{"class":545,"line":2280},17,[2282,2286,2290,2294,2298,2303],{"type":56,"tag":94,"props":2283,"children":2284},{"style":550},[2285],{"type":62,"value":242},{"type":56,"tag":94,"props":2287,"children":2288},{"style":555},[2289],{"type":62,"value":1919},{"type":56,"tag":94,"props":2291,"children":2292},{"style":555},[2293],{"type":62,"value":2045},{"type":56,"tag":94,"props":2295,"children":2296},{"style":550},[2297],{"type":62,"value":578},{"type":56,"tag":94,"props":2299,"children":2300},{"style":848},[2301],{"type":62,"value":2302},"hover",{"type":56,"tag":94,"props":2304,"children":2305},{"style":550},[2306],{"type":62,"value":563},{"type":56,"tag":94,"props":2308,"children":2310},{"class":545,"line":2309},18,[2311,2315,2319,2323,2327,2332,2336,2340,2345],{"type":56,"tag":94,"props":2312,"children":2313},{"style":570},[2314],{"type":62,"value":2155},{"type":56,"tag":94,"props":2316,"children":2317},{"style":550},[2318],{"type":62,"value":578},{"type":56,"tag":94,"props":2320,"children":2321},{"style":699},[2322],{"type":62,"value":702},{"type":56,"tag":94,"props":2324,"children":2325},{"style":550},[2326],{"type":62,"value":707},{"type":56,"tag":94,"props":2328,"children":2329},{"style":581},[2330],{"type":62,"value":2331},"--color-background-tertiary",{"type":56,"tag":94,"props":2333,"children":2334},{"style":550},[2335],{"type":62,"value":717},{"type":56,"tag":94,"props":2337,"children":2338},{"style":550},[2339],{"type":62,"value":722},{"type":56,"tag":94,"props":2341,"children":2342},{"style":581},[2343],{"type":62,"value":2344},"eee",{"type":56,"tag":94,"props":2346,"children":2347},{"style":550},[2348],{"type":62,"value":732},{"type":56,"tag":94,"props":2350,"children":2352},{"class":545,"line":2351},19,[2353],{"type":56,"tag":94,"props":2354,"children":2355},{"style":550},[2356],{"type":62,"value":741},{"type":56,"tag":94,"props":2358,"children":2360},{"class":545,"line":2359},20,[2361,2365,2370,2374,2378,2382,2386,2390,2394,2398,2402,2406,2411,2415,2420],{"type":56,"tag":94,"props":2362,"children":2363},{"style":550},[2364],{"type":62,"value":242},{"type":56,"tag":94,"props":2366,"children":2367},{"style":555},[2368],{"type":62,"value":2369},"dot",{"type":56,"tag":94,"props":2371,"children":2372},{"style":550},[2373],{"type":62,"value":881},{"type":56,"tag":94,"props":2375,"children":2376},{"style":570},[2377],{"type":62,"value":945},{"type":56,"tag":94,"props":2379,"children":2380},{"style":550},[2381],{"type":62,"value":578},{"type":56,"tag":94,"props":2383,"children":2384},{"style":627},[2385],{"type":62,"value":2143},{"type":56,"tag":94,"props":2387,"children":2388},{"style":550},[2389],{"type":62,"value":899},{"type":56,"tag":94,"props":2391,"children":2392},{"style":570},[2393],{"type":62,"value":1123},{"type":56,"tag":94,"props":2395,"children":2396},{"style":550},[2397],{"type":62,"value":578},{"type":56,"tag":94,"props":2399,"children":2400},{"style":627},[2401],{"type":62,"value":2143},{"type":56,"tag":94,"props":2403,"children":2404},{"style":550},[2405],{"type":62,"value":899},{"type":56,"tag":94,"props":2407,"children":2408},{"style":570},[2409],{"type":62,"value":2410}," border-radius",{"type":56,"tag":94,"props":2412,"children":2413},{"style":550},[2414],{"type":62,"value":578},{"type":56,"tag":94,"props":2416,"children":2417},{"style":627},[2418],{"type":62,"value":2419}," 50%",{"type":56,"tag":94,"props":2421,"children":2422},{"style":550},[2423],{"type":62,"value":589},{"type":56,"tag":94,"props":2425,"children":2427},{"class":545,"line":2426},21,[2428,2433,2437,2441,2445,2449,2453,2457,2462],{"type":56,"tag":94,"props":2429,"children":2430},{"style":570},[2431],{"type":62,"value":2432},"       background",{"type":56,"tag":94,"props":2434,"children":2435},{"style":550},[2436],{"type":62,"value":578},{"type":56,"tag":94,"props":2438,"children":2439},{"style":699},[2440],{"type":62,"value":702},{"type":56,"tag":94,"props":2442,"children":2443},{"style":550},[2444],{"type":62,"value":707},{"type":56,"tag":94,"props":2446,"children":2447},{"style":581},[2448],{"type":62,"value":2109},{"type":56,"tag":94,"props":2450,"children":2451},{"style":550},[2452],{"type":62,"value":717},{"type":56,"tag":94,"props":2454,"children":2455},{"style":550},[2456],{"type":62,"value":722},{"type":56,"tag":94,"props":2458,"children":2459},{"style":581},[2460],{"type":62,"value":2461},"ccc",{"type":56,"tag":94,"props":2463,"children":2464},{"style":550},[2465],{"type":62,"value":732},{"type":56,"tag":94,"props":2467,"children":2469},{"class":545,"line":2468},22,[2470,2475,2479,2484,2489,2493],{"type":56,"tag":94,"props":2471,"children":2472},{"style":570},[2473],{"type":62,"value":2474},"       transition",{"type":56,"tag":94,"props":2476,"children":2477},{"style":550},[2478],{"type":62,"value":578},{"type":56,"tag":94,"props":2480,"children":2481},{"style":581},[2482],{"type":62,"value":2483}," background ",{"type":56,"tag":94,"props":2485,"children":2486},{"style":627},[2487],{"type":62,"value":2488},"0.2s",{"type":56,"tag":94,"props":2490,"children":2491},{"style":550},[2492],{"type":62,"value":899},{"type":56,"tag":94,"props":2494,"children":2495},{"style":550},[2496],{"type":62,"value":904},{"type":56,"tag":94,"props":2498,"children":2500},{"class":545,"line":2499},23,[2501,2505,2509,2513,2518,2522,2527,2531,2535,2539,2544,2548,2552,2557,2562],{"type":56,"tag":94,"props":2502,"children":2503},{"style":550},[2504],{"type":62,"value":242},{"type":56,"tag":94,"props":2506,"children":2507},{"style":555},[2508],{"type":62,"value":2369},{"type":56,"tag":94,"props":2510,"children":2511},{"style":550},[2512],{"type":62,"value":242},{"type":56,"tag":94,"props":2514,"children":2515},{"style":555},[2516],{"type":62,"value":2517},"active",{"type":56,"tag":94,"props":2519,"children":2520},{"style":550},[2521],{"type":62,"value":881},{"type":56,"tag":94,"props":2523,"children":2524},{"style":570},[2525],{"type":62,"value":2526}," background",{"type":56,"tag":94,"props":2528,"children":2529},{"style":550},[2530],{"type":62,"value":578},{"type":56,"tag":94,"props":2532,"children":2533},{"style":699},[2534],{"type":62,"value":702},{"type":56,"tag":94,"props":2536,"children":2537},{"style":550},[2538],{"type":62,"value":707},{"type":56,"tag":94,"props":2540,"children":2541},{"style":581},[2542],{"type":62,"value":2543},"--color-text-info",{"type":56,"tag":94,"props":2545,"children":2546},{"style":550},[2547],{"type":62,"value":717},{"type":56,"tag":94,"props":2549,"children":2550},{"style":550},[2551],{"type":62,"value":722},{"type":56,"tag":94,"props":2553,"children":2554},{"style":581},[2555],{"type":62,"value":2556},"185FA5",{"type":56,"tag":94,"props":2558,"children":2559},{"style":550},[2560],{"type":62,"value":2561},");",{"type":56,"tag":94,"props":2563,"children":2564},{"style":550},[2565],{"type":62,"value":904},{"type":56,"tag":94,"props":2567,"children":2569},{"class":545,"line":2568},24,[2570,2574,2579,2583,2588,2592,2597,2601],{"type":56,"tag":94,"props":2571,"children":2572},{"style":550},[2573],{"type":62,"value":242},{"type":56,"tag":94,"props":2575,"children":2576},{"style":555},[2577],{"type":62,"value":2578},"step-content",{"type":56,"tag":94,"props":2580,"children":2581},{"style":550},[2582],{"type":62,"value":881},{"type":56,"tag":94,"props":2584,"children":2585},{"style":570},[2586],{"type":62,"value":2587}," min-height",{"type":56,"tag":94,"props":2589,"children":2590},{"style":550},[2591],{"type":62,"value":578},{"type":56,"tag":94,"props":2593,"children":2594},{"style":627},[2595],{"type":62,"value":2596}," 300px",{"type":56,"tag":94,"props":2598,"children":2599},{"style":550},[2600],{"type":62,"value":899},{"type":56,"tag":94,"props":2602,"children":2603},{"style":550},[2604],{"type":62,"value":904},{"type":56,"tag":94,"props":2606,"children":2608},{"class":545,"line":2607},25,[2609,2614,2619,2623,2628,2632,2636,2640,2645,2649,2653,2657],{"type":56,"tag":94,"props":2610,"children":2611},{"style":550},[2612],{"type":62,"value":2613},"#",{"type":56,"tag":94,"props":2615,"children":2616},{"style":627},[2617],{"type":62,"value":2618},"dots",{"type":56,"tag":94,"props":2620,"children":2621},{"style":550},[2622],{"type":62,"value":881},{"type":56,"tag":94,"props":2624,"children":2625},{"style":570},[2626],{"type":62,"value":2627}," display",{"type":56,"tag":94,"props":2629,"children":2630},{"style":550},[2631],{"type":62,"value":578},{"type":56,"tag":94,"props":2633,"children":2634},{"style":581},[2635],{"type":62,"value":584},{"type":56,"tag":94,"props":2637,"children":2638},{"style":550},[2639],{"type":62,"value":899},{"type":56,"tag":94,"props":2641,"children":2642},{"style":570},[2643],{"type":62,"value":2644}," gap",{"type":56,"tag":94,"props":2646,"children":2647},{"style":550},[2648],{"type":62,"value":578},{"type":56,"tag":94,"props":2650,"children":2651},{"style":627},[2652],{"type":62,"value":819},{"type":56,"tag":94,"props":2654,"children":2655},{"style":550},[2656],{"type":62,"value":899},{"type":56,"tag":94,"props":2658,"children":2659},{"style":550},[2660],{"type":62,"value":904},{"type":56,"tag":94,"props":2662,"children":2664},{"class":545,"line":2663},26,[2665,2669,2674,2678,2683,2687,2692,2696,2701,2705,2709,2713,2717,2721,2725,2730,2734],{"type":56,"tag":94,"props":2666,"children":2667},{"style":550},[2668],{"type":62,"value":2613},{"type":56,"tag":94,"props":2670,"children":2671},{"style":627},[2672],{"type":62,"value":2673},"step-label",{"type":56,"tag":94,"props":2675,"children":2676},{"style":550},[2677],{"type":62,"value":881},{"type":56,"tag":94,"props":2679,"children":2680},{"style":570},[2681],{"type":62,"value":2682}," margin-left",{"type":56,"tag":94,"props":2684,"children":2685},{"style":550},[2686],{"type":62,"value":578},{"type":56,"tag":94,"props":2688,"children":2689},{"style":581},[2690],{"type":62,"value":2691}," auto",{"type":56,"tag":94,"props":2693,"children":2694},{"style":550},[2695],{"type":62,"value":899},{"type":56,"tag":94,"props":2697,"children":2698},{"style":570},[2699],{"type":62,"value":2700}," color",{"type":56,"tag":94,"props":2702,"children":2703},{"style":550},[2704],{"type":62,"value":578},{"type":56,"tag":94,"props":2706,"children":2707},{"style":699},[2708],{"type":62,"value":702},{"type":56,"tag":94,"props":2710,"children":2711},{"style":550},[2712],{"type":62,"value":707},{"type":56,"tag":94,"props":2714,"children":2715},{"style":581},[2716],{"type":62,"value":712},{"type":56,"tag":94,"props":2718,"children":2719},{"style":550},[2720],{"type":62,"value":717},{"type":56,"tag":94,"props":2722,"children":2723},{"style":550},[2724],{"type":62,"value":722},{"type":56,"tag":94,"props":2726,"children":2727},{"style":581},[2728],{"type":62,"value":2729},"888",{"type":56,"tag":94,"props":2731,"children":2732},{"style":550},[2733],{"type":62,"value":2561},{"type":56,"tag":94,"props":2735,"children":2736},{"style":550},[2737],{"type":62,"value":904},{"type":56,"tag":65,"props":2739,"children":2740},{},[2741],{"type":62,"value":909},{"type":56,"tag":139,"props":2743,"children":2745},{"className":912,"code":2744,"language":308,"meta":148,"style":148},"\u003Cdiv class=\"step-content\" id=\"step-display\">\n  \u003C!-- SVG or HTML content per step, swapped by JS -->\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"step-nav\">\n  \u003Cbutton onclick=\"prevStep()\">Previous\u003C\u002Fbutton>\n  \u003Cdiv id=\"dots\">\u003C\u002Fdiv>\n  \u003Cbutton onclick=\"nextStep()\">Next\u003C\u002Fbutton>\n  \u003Cspan id=\"step-label\">Step 1 of 4\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[2746],{"type":56,"tag":146,"props":2747,"children":2748},{"__ignoreMap":148},[2749,2805,2813,2828,2835,2870,2930,2974,3031,3083],{"type":56,"tag":94,"props":2750,"children":2751},{"class":545,"line":546},[2752,2756,2760,2764,2768,2772,2776,2780,2784,2788,2792,2797,2801],{"type":56,"tag":94,"props":2753,"children":2754},{"style":550},[2755],{"type":62,"value":934},{"type":56,"tag":94,"props":2757,"children":2758},{"style":937},[2759],{"type":62,"value":1282},{"type":56,"tag":94,"props":2761,"children":2762},{"style":848},[2763],{"type":62,"value":1287},{"type":56,"tag":94,"props":2765,"children":2766},{"style":550},[2767],{"type":62,"value":856},{"type":56,"tag":94,"props":2769,"children":2770},{"style":550},[2771],{"type":62,"value":861},{"type":56,"tag":94,"props":2773,"children":2774},{"style":864},[2775],{"type":62,"value":2578},{"type":56,"tag":94,"props":2777,"children":2778},{"style":550},[2779],{"type":62,"value":861},{"type":56,"tag":94,"props":2781,"children":2782},{"style":848},[2783],{"type":62,"value":1037},{"type":56,"tag":94,"props":2785,"children":2786},{"style":550},[2787],{"type":62,"value":856},{"type":56,"tag":94,"props":2789,"children":2790},{"style":550},[2791],{"type":62,"value":861},{"type":56,"tag":94,"props":2793,"children":2794},{"style":864},[2795],{"type":62,"value":2796},"step-display",{"type":56,"tag":94,"props":2798,"children":2799},{"style":550},[2800],{"type":62,"value":861},{"type":56,"tag":94,"props":2802,"children":2803},{"style":550},[2804],{"type":62,"value":1011},{"type":56,"tag":94,"props":2806,"children":2807},{"class":545,"line":566},[2808],{"type":56,"tag":94,"props":2809,"children":2810},{"style":923},[2811],{"type":62,"value":2812},"  \u003C!-- SVG or HTML content per step, swapped by JS -->\n",{"type":56,"tag":94,"props":2814,"children":2815},{"class":545,"line":592},[2816,2820,2824],{"type":56,"tag":94,"props":2817,"children":2818},{"style":550},[2819],{"type":62,"value":1245},{"type":56,"tag":94,"props":2821,"children":2822},{"style":937},[2823],{"type":62,"value":1282},{"type":56,"tag":94,"props":2825,"children":2826},{"style":550},[2827],{"type":62,"value":1011},{"type":56,"tag":94,"props":2829,"children":2830},{"class":545,"line":614},[2831],{"type":56,"tag":94,"props":2832,"children":2833},{"emptyLinePlaceholder":1259},[2834],{"type":62,"value":1262},{"type":56,"tag":94,"props":2836,"children":2837},{"class":545,"line":637},[2838,2842,2846,2850,2854,2858,2862,2866],{"type":56,"tag":94,"props":2839,"children":2840},{"style":550},[2841],{"type":62,"value":934},{"type":56,"tag":94,"props":2843,"children":2844},{"style":937},[2845],{"type":62,"value":1282},{"type":56,"tag":94,"props":2847,"children":2848},{"style":848},[2849],{"type":62,"value":1287},{"type":56,"tag":94,"props":2851,"children":2852},{"style":550},[2853],{"type":62,"value":856},{"type":56,"tag":94,"props":2855,"children":2856},{"style":550},[2857],{"type":62,"value":861},{"type":56,"tag":94,"props":2859,"children":2860},{"style":864},[2861],{"type":62,"value":1919},{"type":56,"tag":94,"props":2863,"children":2864},{"style":550},[2865],{"type":62,"value":861},{"type":56,"tag":94,"props":2867,"children":2868},{"style":550},[2869],{"type":62,"value":1011},{"type":56,"tag":94,"props":2871,"children":2872},{"class":545,"line":664},[2873,2877,2882,2887,2891,2895,2900,2905,2909,2913,2918,2922,2926],{"type":56,"tag":94,"props":2874,"children":2875},{"style":550},[2876],{"type":62,"value":1027},{"type":56,"tag":94,"props":2878,"children":2879},{"style":937},[2880],{"type":62,"value":2881},"button",{"type":56,"tag":94,"props":2883,"children":2884},{"style":848},[2885],{"type":62,"value":2886}," onclick",{"type":56,"tag":94,"props":2888,"children":2889},{"style":550},[2890],{"type":62,"value":856},{"type":56,"tag":94,"props":2892,"children":2893},{"style":550},[2894],{"type":62,"value":861},{"type":56,"tag":94,"props":2896,"children":2897},{"style":699},[2898],{"type":62,"value":2899},"prevStep",{"type":56,"tag":94,"props":2901,"children":2902},{"style":864},[2903],{"type":62,"value":2904},"()",{"type":56,"tag":94,"props":2906,"children":2907},{"style":550},[2908],{"type":62,"value":861},{"type":56,"tag":94,"props":2910,"children":2911},{"style":550},[2912],{"type":62,"value":1340},{"type":56,"tag":94,"props":2914,"children":2915},{"style":581},[2916],{"type":62,"value":2917},"Previous",{"type":56,"tag":94,"props":2919,"children":2920},{"style":550},[2921],{"type":62,"value":1245},{"type":56,"tag":94,"props":2923,"children":2924},{"style":937},[2925],{"type":62,"value":2881},{"type":56,"tag":94,"props":2927,"children":2928},{"style":550},[2929],{"type":62,"value":1011},{"type":56,"tag":94,"props":2931,"children":2932},{"class":545,"line":686},[2933,2937,2941,2945,2949,2953,2957,2961,2966,2970],{"type":56,"tag":94,"props":2934,"children":2935},{"style":550},[2936],{"type":62,"value":1027},{"type":56,"tag":94,"props":2938,"children":2939},{"style":937},[2940],{"type":62,"value":1282},{"type":56,"tag":94,"props":2942,"children":2943},{"style":848},[2944],{"type":62,"value":1037},{"type":56,"tag":94,"props":2946,"children":2947},{"style":550},[2948],{"type":62,"value":856},{"type":56,"tag":94,"props":2950,"children":2951},{"style":550},[2952],{"type":62,"value":861},{"type":56,"tag":94,"props":2954,"children":2955},{"style":864},[2956],{"type":62,"value":2618},{"type":56,"tag":94,"props":2958,"children":2959},{"style":550},[2960],{"type":62,"value":861},{"type":56,"tag":94,"props":2962,"children":2963},{"style":550},[2964],{"type":62,"value":2965},">\u003C\u002F",{"type":56,"tag":94,"props":2967,"children":2968},{"style":937},[2969],{"type":62,"value":1282},{"type":56,"tag":94,"props":2971,"children":2972},{"style":550},[2973],{"type":62,"value":1011},{"type":56,"tag":94,"props":2975,"children":2976},{"class":545,"line":735},[2977,2981,2985,2989,2993,2997,3002,3006,3010,3014,3019,3023,3027],{"type":56,"tag":94,"props":2978,"children":2979},{"style":550},[2980],{"type":62,"value":1027},{"type":56,"tag":94,"props":2982,"children":2983},{"style":937},[2984],{"type":62,"value":2881},{"type":56,"tag":94,"props":2986,"children":2987},{"style":848},[2988],{"type":62,"value":2886},{"type":56,"tag":94,"props":2990,"children":2991},{"style":550},[2992],{"type":62,"value":856},{"type":56,"tag":94,"props":2994,"children":2995},{"style":550},[2996],{"type":62,"value":861},{"type":56,"tag":94,"props":2998,"children":2999},{"style":699},[3000],{"type":62,"value":3001},"nextStep",{"type":56,"tag":94,"props":3003,"children":3004},{"style":864},[3005],{"type":62,"value":2904},{"type":56,"tag":94,"props":3007,"children":3008},{"style":550},[3009],{"type":62,"value":861},{"type":56,"tag":94,"props":3011,"children":3012},{"style":550},[3013],{"type":62,"value":1340},{"type":56,"tag":94,"props":3015,"children":3016},{"style":581},[3017],{"type":62,"value":3018},"Next",{"type":56,"tag":94,"props":3020,"children":3021},{"style":550},[3022],{"type":62,"value":1245},{"type":56,"tag":94,"props":3024,"children":3025},{"style":937},[3026],{"type":62,"value":2881},{"type":56,"tag":94,"props":3028,"children":3029},{"style":550},[3030],{"type":62,"value":1011},{"type":56,"tag":94,"props":3032,"children":3033},{"class":545,"line":744},[3034,3038,3042,3046,3050,3054,3058,3062,3066,3071,3075,3079],{"type":56,"tag":94,"props":3035,"children":3036},{"style":550},[3037],{"type":62,"value":1027},{"type":56,"tag":94,"props":3039,"children":3040},{"style":937},[3041],{"type":62,"value":94},{"type":56,"tag":94,"props":3043,"children":3044},{"style":848},[3045],{"type":62,"value":1037},{"type":56,"tag":94,"props":3047,"children":3048},{"style":550},[3049],{"type":62,"value":856},{"type":56,"tag":94,"props":3051,"children":3052},{"style":550},[3053],{"type":62,"value":861},{"type":56,"tag":94,"props":3055,"children":3056},{"style":864},[3057],{"type":62,"value":2673},{"type":56,"tag":94,"props":3059,"children":3060},{"style":550},[3061],{"type":62,"value":861},{"type":56,"tag":94,"props":3063,"children":3064},{"style":550},[3065],{"type":62,"value":1340},{"type":56,"tag":94,"props":3067,"children":3068},{"style":581},[3069],{"type":62,"value":3070},"Step 1 of 4",{"type":56,"tag":94,"props":3072,"children":3073},{"style":550},[3074],{"type":62,"value":1245},{"type":56,"tag":94,"props":3076,"children":3077},{"style":937},[3078],{"type":62,"value":94},{"type":56,"tag":94,"props":3080,"children":3081},{"style":550},[3082],{"type":62,"value":1011},{"type":56,"tag":94,"props":3084,"children":3085},{"class":545,"line":765},[3086,3090,3094],{"type":56,"tag":94,"props":3087,"children":3088},{"style":550},[3089],{"type":62,"value":1245},{"type":56,"tag":94,"props":3091,"children":3092},{"style":937},[3093],{"type":62,"value":1282},{"type":56,"tag":94,"props":3095,"children":3096},{"style":550},[3097],{"type":62,"value":1011},{"type":56,"tag":65,"props":3099,"children":3100},{},[3101],{"type":62,"value":1612},{"type":56,"tag":139,"props":3103,"children":3105},{"className":1615,"code":3104,"language":1617,"meta":148,"style":148},"function initSteps(steps) {\n  window.steps = steps;\n  window.current = 0;\n  const dotsEl = document.getElementById('dots');\n  steps.forEach(() => {\n    const d = document.createElement('div');\n    d.className = 'dot';\n    dotsEl.appendChild(d);\n  });\n  renderStep();\n}\n\nfunction renderStep() {\n  const { steps, current } = window;\n  document.getElementById('step-display').innerHTML = steps[current].svg;\n  document.getElementById('step-label').textContent =\n    `Step ${current + 1} of ${steps.length}`;\n  document.querySelectorAll('.dot').forEach((d, i) =>\n    d.classList.toggle('active', i === current));\n}\n\nfunction nextStep() {\n  window.current = (window.current + 1) % window.steps.length;\n  renderStep();\n}\n\nfunction prevStep() {\n  window.current = (window.current - 1 + window.steps.length) % window.steps.length;\n  renderStep();\n}\n",[3106],{"type":56,"tag":146,"props":3107,"children":3108},{"__ignoreMap":148},[3109,3138,3167,3195,3247,3281,3335,3373,3407,3423,3439,3446,3453,3473,3515,3591,3639,3707,3782,3849,3856,3863,3883,3961,3976,3983,3990,4011,4112,4128],{"type":56,"tag":94,"props":3110,"children":3111},{"class":545,"line":546},[3112,3116,3121,3125,3130,3134],{"type":56,"tag":94,"props":3113,"children":3114},{"style":848},[3115],{"type":62,"value":1629},{"type":56,"tag":94,"props":3117,"children":3118},{"style":699},[3119],{"type":62,"value":3120}," initSteps",{"type":56,"tag":94,"props":3122,"children":3123},{"style":550},[3124],{"type":62,"value":707},{"type":56,"tag":94,"props":3126,"children":3127},{"style":1641},[3128],{"type":62,"value":3129},"steps",{"type":56,"tag":94,"props":3131,"children":3132},{"style":550},[3133],{"type":62,"value":1514},{"type":56,"tag":94,"props":3135,"children":3136},{"style":550},[3137],{"type":62,"value":563},{"type":56,"tag":94,"props":3139,"children":3140},{"class":545,"line":566},[3141,3146,3150,3154,3158,3163],{"type":56,"tag":94,"props":3142,"children":3143},{"style":581},[3144],{"type":62,"value":3145},"  window",{"type":56,"tag":94,"props":3147,"children":3148},{"style":550},[3149],{"type":62,"value":242},{"type":56,"tag":94,"props":3151,"children":3152},{"style":581},[3153],{"type":62,"value":3129},{"type":56,"tag":94,"props":3155,"children":3156},{"style":550},[3157],{"type":62,"value":1703},{"type":56,"tag":94,"props":3159,"children":3160},{"style":581},[3161],{"type":62,"value":3162}," steps",{"type":56,"tag":94,"props":3164,"children":3165},{"style":550},[3166],{"type":62,"value":589},{"type":56,"tag":94,"props":3168,"children":3169},{"class":545,"line":592},[3170,3174,3178,3183,3187,3191],{"type":56,"tag":94,"props":3171,"children":3172},{"style":581},[3173],{"type":62,"value":3145},{"type":56,"tag":94,"props":3175,"children":3176},{"style":550},[3177],{"type":62,"value":242},{"type":56,"tag":94,"props":3179,"children":3180},{"style":581},[3181],{"type":62,"value":3182},"current",{"type":56,"tag":94,"props":3184,"children":3185},{"style":550},[3186],{"type":62,"value":1703},{"type":56,"tag":94,"props":3188,"children":3189},{"style":627},[3190],{"type":62,"value":657},{"type":56,"tag":94,"props":3192,"children":3193},{"style":550},[3194],{"type":62,"value":589},{"type":56,"tag":94,"props":3196,"children":3197},{"class":545,"line":614},[3198,3202,3207,3211,3215,3219,3223,3227,3231,3235,3239,3243],{"type":56,"tag":94,"props":3199,"children":3200},{"style":848},[3201],{"type":62,"value":1727},{"type":56,"tag":94,"props":3203,"children":3204},{"style":581},[3205],{"type":62,"value":3206}," dotsEl",{"type":56,"tag":94,"props":3208,"children":3209},{"style":550},[3210],{"type":62,"value":1703},{"type":56,"tag":94,"props":3212,"children":3213},{"style":581},[3214],{"type":62,"value":1741},{"type":56,"tag":94,"props":3216,"children":3217},{"style":550},[3218],{"type":62,"value":242},{"type":56,"tag":94,"props":3220,"children":3221},{"style":699},[3222],{"type":62,"value":1668},{"type":56,"tag":94,"props":3224,"children":3225},{"style":937},[3226],{"type":62,"value":707},{"type":56,"tag":94,"props":3228,"children":3229},{"style":550},[3230],{"type":62,"value":1677},{"type":56,"tag":94,"props":3232,"children":3233},{"style":864},[3234],{"type":62,"value":2618},{"type":56,"tag":94,"props":3236,"children":3237},{"style":550},[3238],{"type":62,"value":1677},{"type":56,"tag":94,"props":3240,"children":3241},{"style":937},[3242],{"type":62,"value":1514},{"type":56,"tag":94,"props":3244,"children":3245},{"style":550},[3246],{"type":62,"value":589},{"type":56,"tag":94,"props":3248,"children":3249},{"class":545,"line":637},[3250,3255,3259,3264,3268,3272,3277],{"type":56,"tag":94,"props":3251,"children":3252},{"style":581},[3253],{"type":62,"value":3254},"  steps",{"type":56,"tag":94,"props":3256,"children":3257},{"style":550},[3258],{"type":62,"value":242},{"type":56,"tag":94,"props":3260,"children":3261},{"style":699},[3262],{"type":62,"value":3263},"forEach",{"type":56,"tag":94,"props":3265,"children":3266},{"style":937},[3267],{"type":62,"value":707},{"type":56,"tag":94,"props":3269,"children":3270},{"style":550},[3271],{"type":62,"value":2904},{"type":56,"tag":94,"props":3273,"children":3274},{"style":848},[3275],{"type":62,"value":3276}," =>",{"type":56,"tag":94,"props":3278,"children":3279},{"style":550},[3280],{"type":62,"value":563},{"type":56,"tag":94,"props":3282,"children":3283},{"class":545,"line":664},[3284,3289,3294,3298,3302,3306,3311,3315,3319,3323,3327,3331],{"type":56,"tag":94,"props":3285,"children":3286},{"style":848},[3287],{"type":62,"value":3288},"    const",{"type":56,"tag":94,"props":3290,"children":3291},{"style":581},[3292],{"type":62,"value":3293}," d",{"type":56,"tag":94,"props":3295,"children":3296},{"style":550},[3297],{"type":62,"value":1703},{"type":56,"tag":94,"props":3299,"children":3300},{"style":581},[3301],{"type":62,"value":1741},{"type":56,"tag":94,"props":3303,"children":3304},{"style":550},[3305],{"type":62,"value":242},{"type":56,"tag":94,"props":3307,"children":3308},{"style":699},[3309],{"type":62,"value":3310},"createElement",{"type":56,"tag":94,"props":3312,"children":3313},{"style":937},[3314],{"type":62,"value":707},{"type":56,"tag":94,"props":3316,"children":3317},{"style":550},[3318],{"type":62,"value":1677},{"type":56,"tag":94,"props":3320,"children":3321},{"style":864},[3322],{"type":62,"value":1282},{"type":56,"tag":94,"props":3324,"children":3325},{"style":550},[3326],{"type":62,"value":1677},{"type":56,"tag":94,"props":3328,"children":3329},{"style":937},[3330],{"type":62,"value":1514},{"type":56,"tag":94,"props":3332,"children":3333},{"style":550},[3334],{"type":62,"value":589},{"type":56,"tag":94,"props":3336,"children":3337},{"class":545,"line":686},[3338,3343,3347,3352,3356,3361,3365,3369],{"type":56,"tag":94,"props":3339,"children":3340},{"style":581},[3341],{"type":62,"value":3342},"    d",{"type":56,"tag":94,"props":3344,"children":3345},{"style":550},[3346],{"type":62,"value":242},{"type":56,"tag":94,"props":3348,"children":3349},{"style":581},[3350],{"type":62,"value":3351},"className",{"type":56,"tag":94,"props":3353,"children":3354},{"style":550},[3355],{"type":62,"value":1703},{"type":56,"tag":94,"props":3357,"children":3358},{"style":550},[3359],{"type":62,"value":3360}," '",{"type":56,"tag":94,"props":3362,"children":3363},{"style":864},[3364],{"type":62,"value":2369},{"type":56,"tag":94,"props":3366,"children":3367},{"style":550},[3368],{"type":62,"value":1677},{"type":56,"tag":94,"props":3370,"children":3371},{"style":550},[3372],{"type":62,"value":589},{"type":56,"tag":94,"props":3374,"children":3375},{"class":545,"line":735},[3376,3381,3385,3390,3394,3399,3403],{"type":56,"tag":94,"props":3377,"children":3378},{"style":581},[3379],{"type":62,"value":3380},"    dotsEl",{"type":56,"tag":94,"props":3382,"children":3383},{"style":550},[3384],{"type":62,"value":242},{"type":56,"tag":94,"props":3386,"children":3387},{"style":699},[3388],{"type":62,"value":3389},"appendChild",{"type":56,"tag":94,"props":3391,"children":3392},{"style":937},[3393],{"type":62,"value":707},{"type":56,"tag":94,"props":3395,"children":3396},{"style":581},[3397],{"type":62,"value":3398},"d",{"type":56,"tag":94,"props":3400,"children":3401},{"style":937},[3402],{"type":62,"value":1514},{"type":56,"tag":94,"props":3404,"children":3405},{"style":550},[3406],{"type":62,"value":589},{"type":56,"tag":94,"props":3408,"children":3409},{"class":545,"line":744},[3410,3415,3419],{"type":56,"tag":94,"props":3411,"children":3412},{"style":550},[3413],{"type":62,"value":3414},"  }",{"type":56,"tag":94,"props":3416,"children":3417},{"style":937},[3418],{"type":62,"value":1514},{"type":56,"tag":94,"props":3420,"children":3421},{"style":550},[3422],{"type":62,"value":589},{"type":56,"tag":94,"props":3424,"children":3425},{"class":545,"line":765},[3426,3431,3435],{"type":56,"tag":94,"props":3427,"children":3428},{"style":699},[3429],{"type":62,"value":3430},"  renderStep",{"type":56,"tag":94,"props":3432,"children":3433},{"style":937},[3434],{"type":62,"value":2904},{"type":56,"tag":94,"props":3436,"children":3437},{"style":550},[3438],{"type":62,"value":589},{"type":56,"tag":94,"props":3440,"children":3441},{"class":545,"line":785},[3442],{"type":56,"tag":94,"props":3443,"children":3444},{"style":550},[3445],{"type":62,"value":741},{"type":56,"tag":94,"props":3447,"children":3448},{"class":545,"line":805},[3449],{"type":56,"tag":94,"props":3450,"children":3451},{"emptyLinePlaceholder":1259},[3452],{"type":62,"value":1262},{"type":56,"tag":94,"props":3454,"children":3455},{"class":545,"line":826},[3456,3460,3465,3469],{"type":56,"tag":94,"props":3457,"children":3458},{"style":848},[3459],{"type":62,"value":1629},{"type":56,"tag":94,"props":3461,"children":3462},{"style":699},[3463],{"type":62,"value":3464}," renderStep",{"type":56,"tag":94,"props":3466,"children":3467},{"style":550},[3468],{"type":62,"value":2904},{"type":56,"tag":94,"props":3470,"children":3471},{"style":550},[3472],{"type":62,"value":563},{"type":56,"tag":94,"props":3474,"children":3475},{"class":545,"line":834},[3476,3480,3484,3488,3492,3497,3502,3506,3511],{"type":56,"tag":94,"props":3477,"children":3478},{"style":848},[3479],{"type":62,"value":1727},{"type":56,"tag":94,"props":3481,"children":3482},{"style":550},[3483],{"type":62,"value":881},{"type":56,"tag":94,"props":3485,"children":3486},{"style":581},[3487],{"type":62,"value":3162},{"type":56,"tag":94,"props":3489,"children":3490},{"style":550},[3491],{"type":62,"value":717},{"type":56,"tag":94,"props":3493,"children":3494},{"style":581},[3495],{"type":62,"value":3496}," current",{"type":56,"tag":94,"props":3498,"children":3499},{"style":550},[3500],{"type":62,"value":3501}," }",{"type":56,"tag":94,"props":3503,"children":3504},{"style":550},[3505],{"type":62,"value":1703},{"type":56,"tag":94,"props":3507,"children":3508},{"style":581},[3509],{"type":62,"value":3510}," window",{"type":56,"tag":94,"props":3512,"children":3513},{"style":550},[3514],{"type":62,"value":589},{"type":56,"tag":94,"props":3516,"children":3517},{"class":545,"line":1577},[3518,3522,3526,3530,3534,3538,3542,3546,3550,3554,3559,3563,3567,3571,3575,3579,3583,3587],{"type":56,"tag":94,"props":3519,"children":3520},{"style":581},[3521],{"type":62,"value":1659},{"type":56,"tag":94,"props":3523,"children":3524},{"style":550},[3525],{"type":62,"value":242},{"type":56,"tag":94,"props":3527,"children":3528},{"style":699},[3529],{"type":62,"value":1668},{"type":56,"tag":94,"props":3531,"children":3532},{"style":937},[3533],{"type":62,"value":707},{"type":56,"tag":94,"props":3535,"children":3536},{"style":550},[3537],{"type":62,"value":1677},{"type":56,"tag":94,"props":3539,"children":3540},{"style":864},[3541],{"type":62,"value":2796},{"type":56,"tag":94,"props":3543,"children":3544},{"style":550},[3545],{"type":62,"value":1677},{"type":56,"tag":94,"props":3547,"children":3548},{"style":937},[3549],{"type":62,"value":1514},{"type":56,"tag":94,"props":3551,"children":3552},{"style":550},[3553],{"type":62,"value":242},{"type":56,"tag":94,"props":3555,"children":3556},{"style":581},[3557],{"type":62,"value":3558},"innerHTML",{"type":56,"tag":94,"props":3560,"children":3561},{"style":550},[3562],{"type":62,"value":1703},{"type":56,"tag":94,"props":3564,"children":3565},{"style":581},[3566],{"type":62,"value":3162},{"type":56,"tag":94,"props":3568,"children":3569},{"style":937},[3570],{"type":62,"value":845},{"type":56,"tag":94,"props":3572,"children":3573},{"style":581},[3574],{"type":62,"value":3182},{"type":56,"tag":94,"props":3576,"children":3577},{"style":937},[3578],{"type":62,"value":876},{"type":56,"tag":94,"props":3580,"children":3581},{"style":550},[3582],{"type":62,"value":242},{"type":56,"tag":94,"props":3584,"children":3585},{"style":581},[3586],{"type":62,"value":940},{"type":56,"tag":94,"props":3588,"children":3589},{"style":550},[3590],{"type":62,"value":589},{"type":56,"tag":94,"props":3592,"children":3593},{"class":545,"line":1594},[3594,3598,3602,3606,3610,3614,3618,3622,3626,3630,3634],{"type":56,"tag":94,"props":3595,"children":3596},{"style":581},[3597],{"type":62,"value":1659},{"type":56,"tag":94,"props":3599,"children":3600},{"style":550},[3601],{"type":62,"value":242},{"type":56,"tag":94,"props":3603,"children":3604},{"style":699},[3605],{"type":62,"value":1668},{"type":56,"tag":94,"props":3607,"children":3608},{"style":937},[3609],{"type":62,"value":707},{"type":56,"tag":94,"props":3611,"children":3612},{"style":550},[3613],{"type":62,"value":1677},{"type":56,"tag":94,"props":3615,"children":3616},{"style":864},[3617],{"type":62,"value":2673},{"type":56,"tag":94,"props":3619,"children":3620},{"style":550},[3621],{"type":62,"value":1677},{"type":56,"tag":94,"props":3623,"children":3624},{"style":937},[3625],{"type":62,"value":1514},{"type":56,"tag":94,"props":3627,"children":3628},{"style":550},[3629],{"type":62,"value":242},{"type":56,"tag":94,"props":3631,"children":3632},{"style":581},[3633],{"type":62,"value":1698},{"type":56,"tag":94,"props":3635,"children":3636},{"style":550},[3637],{"type":62,"value":3638}," =\n",{"type":56,"tag":94,"props":3640,"children":3641},{"class":545,"line":2280},[3642,3647,3652,3657,3662,3667,3671,3676,3681,3685,3689,3693,3698,3703],{"type":56,"tag":94,"props":3643,"children":3644},{"style":550},[3645],{"type":62,"value":3646},"    `",{"type":56,"tag":94,"props":3648,"children":3649},{"style":864},[3650],{"type":62,"value":3651},"Step ",{"type":56,"tag":94,"props":3653,"children":3654},{"style":550},[3655],{"type":62,"value":3656},"${",{"type":56,"tag":94,"props":3658,"children":3659},{"style":581},[3660],{"type":62,"value":3661},"current ",{"type":56,"tag":94,"props":3663,"children":3664},{"style":550},[3665],{"type":62,"value":3666},"+",{"type":56,"tag":94,"props":3668,"children":3669},{"style":627},[3670],{"type":62,"value":894},{"type":56,"tag":94,"props":3672,"children":3673},{"style":550},[3674],{"type":62,"value":3675},"}",{"type":56,"tag":94,"props":3677,"children":3678},{"style":864},[3679],{"type":62,"value":3680}," of ",{"type":56,"tag":94,"props":3682,"children":3683},{"style":550},[3684],{"type":62,"value":3656},{"type":56,"tag":94,"props":3686,"children":3687},{"style":581},[3688],{"type":62,"value":3129},{"type":56,"tag":94,"props":3690,"children":3691},{"style":550},[3692],{"type":62,"value":242},{"type":56,"tag":94,"props":3694,"children":3695},{"style":581},[3696],{"type":62,"value":3697},"length",{"type":56,"tag":94,"props":3699,"children":3700},{"style":550},[3701],{"type":62,"value":3702},"}`",{"type":56,"tag":94,"props":3704,"children":3705},{"style":550},[3706],{"type":62,"value":589},{"type":56,"tag":94,"props":3708,"children":3709},{"class":545,"line":2309},[3710,3714,3718,3723,3727,3731,3736,3740,3744,3748,3752,3756,3760,3764,3768,3773,3777],{"type":56,"tag":94,"props":3711,"children":3712},{"style":581},[3713],{"type":62,"value":1659},{"type":56,"tag":94,"props":3715,"children":3716},{"style":550},[3717],{"type":62,"value":242},{"type":56,"tag":94,"props":3719,"children":3720},{"style":699},[3721],{"type":62,"value":3722},"querySelectorAll",{"type":56,"tag":94,"props":3724,"children":3725},{"style":937},[3726],{"type":62,"value":707},{"type":56,"tag":94,"props":3728,"children":3729},{"style":550},[3730],{"type":62,"value":1677},{"type":56,"tag":94,"props":3732,"children":3733},{"style":864},[3734],{"type":62,"value":3735},".dot",{"type":56,"tag":94,"props":3737,"children":3738},{"style":550},[3739],{"type":62,"value":1677},{"type":56,"tag":94,"props":3741,"children":3742},{"style":937},[3743],{"type":62,"value":1514},{"type":56,"tag":94,"props":3745,"children":3746},{"style":550},[3747],{"type":62,"value":242},{"type":56,"tag":94,"props":3749,"children":3750},{"style":699},[3751],{"type":62,"value":3263},{"type":56,"tag":94,"props":3753,"children":3754},{"style":937},[3755],{"type":62,"value":707},{"type":56,"tag":94,"props":3757,"children":3758},{"style":550},[3759],{"type":62,"value":707},{"type":56,"tag":94,"props":3761,"children":3762},{"style":1641},[3763],{"type":62,"value":3398},{"type":56,"tag":94,"props":3765,"children":3766},{"style":550},[3767],{"type":62,"value":717},{"type":56,"tag":94,"props":3769,"children":3770},{"style":1641},[3771],{"type":62,"value":3772}," i",{"type":56,"tag":94,"props":3774,"children":3775},{"style":550},[3776],{"type":62,"value":1514},{"type":56,"tag":94,"props":3778,"children":3779},{"style":848},[3780],{"type":62,"value":3781}," =>\n",{"type":56,"tag":94,"props":3783,"children":3784},{"class":545,"line":2351},[3785,3789,3793,3798,3802,3807,3811,3815,3819,3823,3827,3831,3836,3840,3845],{"type":56,"tag":94,"props":3786,"children":3787},{"style":581},[3788],{"type":62,"value":3342},{"type":56,"tag":94,"props":3790,"children":3791},{"style":550},[3792],{"type":62,"value":242},{"type":56,"tag":94,"props":3794,"children":3795},{"style":581},[3796],{"type":62,"value":3797},"classList",{"type":56,"tag":94,"props":3799,"children":3800},{"style":550},[3801],{"type":62,"value":242},{"type":56,"tag":94,"props":3803,"children":3804},{"style":699},[3805],{"type":62,"value":3806},"toggle",{"type":56,"tag":94,"props":3808,"children":3809},{"style":937},[3810],{"type":62,"value":707},{"type":56,"tag":94,"props":3812,"children":3813},{"style":550},[3814],{"type":62,"value":1677},{"type":56,"tag":94,"props":3816,"children":3817},{"style":864},[3818],{"type":62,"value":2517},{"type":56,"tag":94,"props":3820,"children":3821},{"style":550},[3822],{"type":62,"value":1677},{"type":56,"tag":94,"props":3824,"children":3825},{"style":550},[3826],{"type":62,"value":717},{"type":56,"tag":94,"props":3828,"children":3829},{"style":581},[3830],{"type":62,"value":3772},{"type":56,"tag":94,"props":3832,"children":3833},{"style":550},[3834],{"type":62,"value":3835}," ===",{"type":56,"tag":94,"props":3837,"children":3838},{"style":581},[3839],{"type":62,"value":3496},{"type":56,"tag":94,"props":3841,"children":3842},{"style":937},[3843],{"type":62,"value":3844},"))",{"type":56,"tag":94,"props":3846,"children":3847},{"style":550},[3848],{"type":62,"value":589},{"type":56,"tag":94,"props":3850,"children":3851},{"class":545,"line":2359},[3852],{"type":56,"tag":94,"props":3853,"children":3854},{"style":550},[3855],{"type":62,"value":741},{"type":56,"tag":94,"props":3857,"children":3858},{"class":545,"line":2426},[3859],{"type":56,"tag":94,"props":3860,"children":3861},{"emptyLinePlaceholder":1259},[3862],{"type":62,"value":1262},{"type":56,"tag":94,"props":3864,"children":3865},{"class":545,"line":2468},[3866,3870,3875,3879],{"type":56,"tag":94,"props":3867,"children":3868},{"style":848},[3869],{"type":62,"value":1629},{"type":56,"tag":94,"props":3871,"children":3872},{"style":699},[3873],{"type":62,"value":3874}," nextStep",{"type":56,"tag":94,"props":3876,"children":3877},{"style":550},[3878],{"type":62,"value":2904},{"type":56,"tag":94,"props":3880,"children":3881},{"style":550},[3882],{"type":62,"value":563},{"type":56,"tag":94,"props":3884,"children":3885},{"class":545,"line":2499},[3886,3890,3894,3898,3902,3906,3911,3915,3919,3923,3927,3932,3937,3941,3945,3949,3953,3957],{"type":56,"tag":94,"props":3887,"children":3888},{"style":581},[3889],{"type":62,"value":3145},{"type":56,"tag":94,"props":3891,"children":3892},{"style":550},[3893],{"type":62,"value":242},{"type":56,"tag":94,"props":3895,"children":3896},{"style":581},[3897],{"type":62,"value":3182},{"type":56,"tag":94,"props":3899,"children":3900},{"style":550},[3901],{"type":62,"value":1703},{"type":56,"tag":94,"props":3903,"children":3904},{"style":937},[3905],{"type":62,"value":360},{"type":56,"tag":94,"props":3907,"children":3908},{"style":581},[3909],{"type":62,"value":3910},"window",{"type":56,"tag":94,"props":3912,"children":3913},{"style":550},[3914],{"type":62,"value":242},{"type":56,"tag":94,"props":3916,"children":3917},{"style":581},[3918],{"type":62,"value":3182},{"type":56,"tag":94,"props":3920,"children":3921},{"style":550},[3922],{"type":62,"value":1821},{"type":56,"tag":94,"props":3924,"children":3925},{"style":627},[3926],{"type":62,"value":894},{"type":56,"tag":94,"props":3928,"children":3929},{"style":937},[3930],{"type":62,"value":3931},") ",{"type":56,"tag":94,"props":3933,"children":3934},{"style":550},[3935],{"type":62,"value":3936},"%",{"type":56,"tag":94,"props":3938,"children":3939},{"style":581},[3940],{"type":62,"value":3510},{"type":56,"tag":94,"props":3942,"children":3943},{"style":550},[3944],{"type":62,"value":242},{"type":56,"tag":94,"props":3946,"children":3947},{"style":581},[3948],{"type":62,"value":3129},{"type":56,"tag":94,"props":3950,"children":3951},{"style":550},[3952],{"type":62,"value":242},{"type":56,"tag":94,"props":3954,"children":3955},{"style":581},[3956],{"type":62,"value":3697},{"type":56,"tag":94,"props":3958,"children":3959},{"style":550},[3960],{"type":62,"value":589},{"type":56,"tag":94,"props":3962,"children":3963},{"class":545,"line":2568},[3964,3968,3972],{"type":56,"tag":94,"props":3965,"children":3966},{"style":699},[3967],{"type":62,"value":3430},{"type":56,"tag":94,"props":3969,"children":3970},{"style":937},[3971],{"type":62,"value":2904},{"type":56,"tag":94,"props":3973,"children":3974},{"style":550},[3975],{"type":62,"value":589},{"type":56,"tag":94,"props":3977,"children":3978},{"class":545,"line":2607},[3979],{"type":56,"tag":94,"props":3980,"children":3981},{"style":550},[3982],{"type":62,"value":741},{"type":56,"tag":94,"props":3984,"children":3985},{"class":545,"line":2663},[3986],{"type":56,"tag":94,"props":3987,"children":3988},{"emptyLinePlaceholder":1259},[3989],{"type":62,"value":1262},{"type":56,"tag":94,"props":3991,"children":3993},{"class":545,"line":3992},27,[3994,3998,4003,4007],{"type":56,"tag":94,"props":3995,"children":3996},{"style":848},[3997],{"type":62,"value":1629},{"type":56,"tag":94,"props":3999,"children":4000},{"style":699},[4001],{"type":62,"value":4002}," prevStep",{"type":56,"tag":94,"props":4004,"children":4005},{"style":550},[4006],{"type":62,"value":2904},{"type":56,"tag":94,"props":4008,"children":4009},{"style":550},[4010],{"type":62,"value":563},{"type":56,"tag":94,"props":4012,"children":4014},{"class":545,"line":4013},28,[4015,4019,4023,4027,4031,4035,4039,4043,4047,4052,4056,4060,4064,4068,4072,4076,4080,4084,4088,4092,4096,4100,4104,4108],{"type":56,"tag":94,"props":4016,"children":4017},{"style":581},[4018],{"type":62,"value":3145},{"type":56,"tag":94,"props":4020,"children":4021},{"style":550},[4022],{"type":62,"value":242},{"type":56,"tag":94,"props":4024,"children":4025},{"style":581},[4026],{"type":62,"value":3182},{"type":56,"tag":94,"props":4028,"children":4029},{"style":550},[4030],{"type":62,"value":1703},{"type":56,"tag":94,"props":4032,"children":4033},{"style":937},[4034],{"type":62,"value":360},{"type":56,"tag":94,"props":4036,"children":4037},{"style":581},[4038],{"type":62,"value":3910},{"type":56,"tag":94,"props":4040,"children":4041},{"style":550},[4042],{"type":62,"value":242},{"type":56,"tag":94,"props":4044,"children":4045},{"style":581},[4046],{"type":62,"value":3182},{"type":56,"tag":94,"props":4048,"children":4049},{"style":550},[4050],{"type":62,"value":4051}," -",{"type":56,"tag":94,"props":4053,"children":4054},{"style":627},[4055],{"type":62,"value":894},{"type":56,"tag":94,"props":4057,"children":4058},{"style":550},[4059],{"type":62,"value":1821},{"type":56,"tag":94,"props":4061,"children":4062},{"style":581},[4063],{"type":62,"value":3510},{"type":56,"tag":94,"props":4065,"children":4066},{"style":550},[4067],{"type":62,"value":242},{"type":56,"tag":94,"props":4069,"children":4070},{"style":581},[4071],{"type":62,"value":3129},{"type":56,"tag":94,"props":4073,"children":4074},{"style":550},[4075],{"type":62,"value":242},{"type":56,"tag":94,"props":4077,"children":4078},{"style":581},[4079],{"type":62,"value":3697},{"type":56,"tag":94,"props":4081,"children":4082},{"style":937},[4083],{"type":62,"value":3931},{"type":56,"tag":94,"props":4085,"children":4086},{"style":550},[4087],{"type":62,"value":3936},{"type":56,"tag":94,"props":4089,"children":4090},{"style":581},[4091],{"type":62,"value":3510},{"type":56,"tag":94,"props":4093,"children":4094},{"style":550},[4095],{"type":62,"value":242},{"type":56,"tag":94,"props":4097,"children":4098},{"style":581},[4099],{"type":62,"value":3129},{"type":56,"tag":94,"props":4101,"children":4102},{"style":550},[4103],{"type":62,"value":242},{"type":56,"tag":94,"props":4105,"children":4106},{"style":581},[4107],{"type":62,"value":3697},{"type":56,"tag":94,"props":4109,"children":4110},{"style":550},[4111],{"type":62,"value":589},{"type":56,"tag":94,"props":4113,"children":4115},{"class":545,"line":4114},29,[4116,4120,4124],{"type":56,"tag":94,"props":4117,"children":4118},{"style":699},[4119],{"type":62,"value":3430},{"type":56,"tag":94,"props":4121,"children":4122},{"style":937},[4123],{"type":62,"value":2904},{"type":56,"tag":94,"props":4125,"children":4126},{"style":550},[4127],{"type":62,"value":589},{"type":56,"tag":94,"props":4129,"children":4131},{"class":545,"line":4130},30,[4132],{"type":56,"tag":94,"props":4133,"children":4134},{"style":550},[4135],{"type":62,"value":741},{"type":56,"tag":65,"props":4137,"children":4138},{},[4139],{"type":62,"value":1855},{"type":56,"tag":139,"props":4141,"children":4143},{"className":1615,"code":4142,"language":1617,"meta":148,"style":148},"initSteps([\n  { title: \"Step 1\", svg: `\u003Csvg>...\u003C\u002Fsvg>`, desc: \"What happens first\" },\n  { title: \"Step 2\", svg: `\u003Csvg>...\u003C\u002Fsvg>`, desc: \"Then this\" },\n]);\n",[4144],{"type":56,"tag":146,"props":4145,"children":4146},{"__ignoreMap":148},[4147,4160,4250,4331],{"type":56,"tag":94,"props":4148,"children":4149},{"class":545,"line":546},[4150,4155],{"type":56,"tag":94,"props":4151,"children":4152},{"style":699},[4153],{"type":62,"value":4154},"initSteps",{"type":56,"tag":94,"props":4156,"children":4157},{"style":581},[4158],{"type":62,"value":4159},"([\n",{"type":56,"tag":94,"props":4161,"children":4162},{"class":545,"line":566},[4163,4168,4173,4177,4182,4187,4191,4195,4200,4204,4209,4214,4219,4223,4228,4232,4236,4241,4245],{"type":56,"tag":94,"props":4164,"children":4165},{"style":550},[4166],{"type":62,"value":4167},"  {",{"type":56,"tag":94,"props":4169,"children":4170},{"style":937},[4171],{"type":62,"value":4172}," title",{"type":56,"tag":94,"props":4174,"children":4175},{"style":550},[4176],{"type":62,"value":578},{"type":56,"tag":94,"props":4178,"children":4179},{"style":550},[4180],{"type":62,"value":4181}," \"",{"type":56,"tag":94,"props":4183,"children":4184},{"style":864},[4185],{"type":62,"value":4186},"Step 1",{"type":56,"tag":94,"props":4188,"children":4189},{"style":550},[4190],{"type":62,"value":861},{"type":56,"tag":94,"props":4192,"children":4193},{"style":550},[4194],{"type":62,"value":717},{"type":56,"tag":94,"props":4196,"children":4197},{"style":937},[4198],{"type":62,"value":4199}," svg",{"type":56,"tag":94,"props":4201,"children":4202},{"style":550},[4203],{"type":62,"value":578},{"type":56,"tag":94,"props":4205,"children":4206},{"style":550},[4207],{"type":62,"value":4208}," `",{"type":56,"tag":94,"props":4210,"children":4211},{"style":864},[4212],{"type":62,"value":4213},"\u003Csvg>...\u003C\u002Fsvg>",{"type":56,"tag":94,"props":4215,"children":4216},{"style":550},[4217],{"type":62,"value":4218},"`",{"type":56,"tag":94,"props":4220,"children":4221},{"style":550},[4222],{"type":62,"value":717},{"type":56,"tag":94,"props":4224,"children":4225},{"style":937},[4226],{"type":62,"value":4227}," desc",{"type":56,"tag":94,"props":4229,"children":4230},{"style":550},[4231],{"type":62,"value":578},{"type":56,"tag":94,"props":4233,"children":4234},{"style":550},[4235],{"type":62,"value":4181},{"type":56,"tag":94,"props":4237,"children":4238},{"style":864},[4239],{"type":62,"value":4240},"What happens first",{"type":56,"tag":94,"props":4242,"children":4243},{"style":550},[4244],{"type":62,"value":861},{"type":56,"tag":94,"props":4246,"children":4247},{"style":550},[4248],{"type":62,"value":4249}," },\n",{"type":56,"tag":94,"props":4251,"children":4252},{"class":545,"line":592},[4253,4257,4261,4265,4269,4274,4278,4282,4286,4290,4294,4298,4302,4306,4310,4314,4318,4323,4327],{"type":56,"tag":94,"props":4254,"children":4255},{"style":550},[4256],{"type":62,"value":4167},{"type":56,"tag":94,"props":4258,"children":4259},{"style":937},[4260],{"type":62,"value":4172},{"type":56,"tag":94,"props":4262,"children":4263},{"style":550},[4264],{"type":62,"value":578},{"type":56,"tag":94,"props":4266,"children":4267},{"style":550},[4268],{"type":62,"value":4181},{"type":56,"tag":94,"props":4270,"children":4271},{"style":864},[4272],{"type":62,"value":4273},"Step 2",{"type":56,"tag":94,"props":4275,"children":4276},{"style":550},[4277],{"type":62,"value":861},{"type":56,"tag":94,"props":4279,"children":4280},{"style":550},[4281],{"type":62,"value":717},{"type":56,"tag":94,"props":4283,"children":4284},{"style":937},[4285],{"type":62,"value":4199},{"type":56,"tag":94,"props":4287,"children":4288},{"style":550},[4289],{"type":62,"value":578},{"type":56,"tag":94,"props":4291,"children":4292},{"style":550},[4293],{"type":62,"value":4208},{"type":56,"tag":94,"props":4295,"children":4296},{"style":864},[4297],{"type":62,"value":4213},{"type":56,"tag":94,"props":4299,"children":4300},{"style":550},[4301],{"type":62,"value":4218},{"type":56,"tag":94,"props":4303,"children":4304},{"style":550},[4305],{"type":62,"value":717},{"type":56,"tag":94,"props":4307,"children":4308},{"style":937},[4309],{"type":62,"value":4227},{"type":56,"tag":94,"props":4311,"children":4312},{"style":550},[4313],{"type":62,"value":578},{"type":56,"tag":94,"props":4315,"children":4316},{"style":550},[4317],{"type":62,"value":4181},{"type":56,"tag":94,"props":4319,"children":4320},{"style":864},[4321],{"type":62,"value":4322},"Then this",{"type":56,"tag":94,"props":4324,"children":4325},{"style":550},[4326],{"type":62,"value":861},{"type":56,"tag":94,"props":4328,"children":4329},{"style":550},[4330],{"type":62,"value":4249},{"type":56,"tag":94,"props":4332,"children":4333},{"class":545,"line":614},[4334,4339],{"type":56,"tag":94,"props":4335,"children":4336},{"style":581},[4337],{"type":62,"value":4338},"])",{"type":56,"tag":94,"props":4340,"children":4341},{"style":550},[4342],{"type":62,"value":589},{"type":56,"tag":82,"props":4344,"children":4346},{"id":4345},"css-animation-patterns-for-live-diagrams",[4347],{"type":62,"value":4348},"CSS Animation Patterns (for live diagrams)",{"type":56,"tag":65,"props":4350,"children":4351},{},[4352],{"type":62,"value":4353},"These belong in the css parameter alongside the rest of your styles:",{"type":56,"tag":139,"props":4355,"children":4357},{"className":537,"code":4356,"language":297,"meta":148,"style":148},"\u002F* Flowing particles along a path *\u002F\n@keyframes flow {\n  to { stroke-dashoffset: -20; }\n}\n.flowing {\n  stroke-dasharray: 5 5;\n  animation: flow 1.6s linear infinite;\n}\n\n\u002F* Pulsing glow for active elements *\u002F\n@keyframes pulse {\n  0%, 100% { opacity: 0.3; }\n  50% { opacity: 0.7; }\n}\n.pulsing { animation: pulse 2s ease-in-out infinite; }\n\n\u002F* Flickering (for flames, sparks) *\u002F\n@keyframes flicker {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.8; }\n}\n\n\u002F* Always respect reduced motion preferences *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n  }\n}\n",[4358],{"type":56,"tag":146,"props":4359,"children":4360},{"__ignoreMap":148},[4361,4369,4387,4421,4428,4444,4469,4500,4507,4514,4522,4538,4580,4613,4620,4668,4675,4683,4699,4738,4770,4777,4784,4792,4826,4873,4899,4923,4931],{"type":56,"tag":94,"props":4362,"children":4363},{"class":545,"line":546},[4364],{"type":56,"tag":94,"props":4365,"children":4366},{"style":923},[4367],{"type":62,"value":4368},"\u002F* Flowing particles along a path *\u002F\n",{"type":56,"tag":94,"props":4370,"children":4371},{"class":545,"line":566},[4372,4378,4383],{"type":56,"tag":94,"props":4373,"children":4375},{"style":4374},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[4376],{"type":62,"value":4377},"@keyframes",{"type":56,"tag":94,"props":4379,"children":4380},{"style":1641},[4381],{"type":62,"value":4382}," flow",{"type":56,"tag":94,"props":4384,"children":4385},{"style":550},[4386],{"type":62,"value":563},{"type":56,"tag":94,"props":4388,"children":4389},{"class":545,"line":592},[4390,4395,4399,4404,4408,4413,4417],{"type":56,"tag":94,"props":4391,"children":4392},{"style":555},[4393],{"type":62,"value":4394},"  to",{"type":56,"tag":94,"props":4396,"children":4397},{"style":550},[4398],{"type":62,"value":881},{"type":56,"tag":94,"props":4400,"children":4401},{"style":570},[4402],{"type":62,"value":4403}," stroke-dashoffset",{"type":56,"tag":94,"props":4405,"children":4406},{"style":550},[4407],{"type":62,"value":578},{"type":56,"tag":94,"props":4409,"children":4410},{"style":627},[4411],{"type":62,"value":4412}," -20",{"type":56,"tag":94,"props":4414,"children":4415},{"style":550},[4416],{"type":62,"value":899},{"type":56,"tag":94,"props":4418,"children":4419},{"style":550},[4420],{"type":62,"value":904},{"type":56,"tag":94,"props":4422,"children":4423},{"class":545,"line":614},[4424],{"type":56,"tag":94,"props":4425,"children":4426},{"style":550},[4427],{"type":62,"value":741},{"type":56,"tag":94,"props":4429,"children":4430},{"class":545,"line":637},[4431,4435,4440],{"type":56,"tag":94,"props":4432,"children":4433},{"style":550},[4434],{"type":62,"value":242},{"type":56,"tag":94,"props":4436,"children":4437},{"style":555},[4438],{"type":62,"value":4439},"flowing",{"type":56,"tag":94,"props":4441,"children":4442},{"style":550},[4443],{"type":62,"value":563},{"type":56,"tag":94,"props":4445,"children":4446},{"class":545,"line":664},[4447,4452,4456,4461,4465],{"type":56,"tag":94,"props":4448,"children":4449},{"style":570},[4450],{"type":62,"value":4451},"  stroke-dasharray",{"type":56,"tag":94,"props":4453,"children":4454},{"style":550},[4455],{"type":62,"value":578},{"type":56,"tag":94,"props":4457,"children":4458},{"style":627},[4459],{"type":62,"value":4460}," 5",{"type":56,"tag":94,"props":4462,"children":4463},{"style":627},[4464],{"type":62,"value":4460},{"type":56,"tag":94,"props":4466,"children":4467},{"style":550},[4468],{"type":62,"value":589},{"type":56,"tag":94,"props":4470,"children":4471},{"class":545,"line":686},[4472,4477,4481,4486,4491,4496],{"type":56,"tag":94,"props":4473,"children":4474},{"style":570},[4475],{"type":62,"value":4476},"  animation",{"type":56,"tag":94,"props":4478,"children":4479},{"style":550},[4480],{"type":62,"value":578},{"type":56,"tag":94,"props":4482,"children":4483},{"style":581},[4484],{"type":62,"value":4485}," flow ",{"type":56,"tag":94,"props":4487,"children":4488},{"style":627},[4489],{"type":62,"value":4490},"1.6s",{"type":56,"tag":94,"props":4492,"children":4493},{"style":581},[4494],{"type":62,"value":4495}," linear infinite",{"type":56,"tag":94,"props":4497,"children":4498},{"style":550},[4499],{"type":62,"value":589},{"type":56,"tag":94,"props":4501,"children":4502},{"class":545,"line":735},[4503],{"type":56,"tag":94,"props":4504,"children":4505},{"style":550},[4506],{"type":62,"value":741},{"type":56,"tag":94,"props":4508,"children":4509},{"class":545,"line":744},[4510],{"type":56,"tag":94,"props":4511,"children":4512},{"emptyLinePlaceholder":1259},[4513],{"type":62,"value":1262},{"type":56,"tag":94,"props":4515,"children":4516},{"class":545,"line":765},[4517],{"type":56,"tag":94,"props":4518,"children":4519},{"style":923},[4520],{"type":62,"value":4521},"\u002F* Pulsing glow for active elements *\u002F\n",{"type":56,"tag":94,"props":4523,"children":4524},{"class":545,"line":785},[4525,4529,4534],{"type":56,"tag":94,"props":4526,"children":4527},{"style":4374},[4528],{"type":62,"value":4377},{"type":56,"tag":94,"props":4530,"children":4531},{"style":1641},[4532],{"type":62,"value":4533}," pulse",{"type":56,"tag":94,"props":4535,"children":4536},{"style":550},[4537],{"type":62,"value":563},{"type":56,"tag":94,"props":4539,"children":4540},{"class":545,"line":805},[4541,4546,4550,4554,4558,4563,4567,4572,4576],{"type":56,"tag":94,"props":4542,"children":4543},{"style":555},[4544],{"type":62,"value":4545},"  0%",{"type":56,"tag":94,"props":4547,"children":4548},{"style":581},[4549],{"type":62,"value":220},{"type":56,"tag":94,"props":4551,"children":4552},{"style":555},[4553],{"type":62,"value":958},{"type":56,"tag":94,"props":4555,"children":4556},{"style":550},[4557],{"type":62,"value":881},{"type":56,"tag":94,"props":4559,"children":4560},{"style":570},[4561],{"type":62,"value":4562}," opacity",{"type":56,"tag":94,"props":4564,"children":4565},{"style":550},[4566],{"type":62,"value":578},{"type":56,"tag":94,"props":4568,"children":4569},{"style":627},[4570],{"type":62,"value":4571}," 0.3",{"type":56,"tag":94,"props":4573,"children":4574},{"style":550},[4575],{"type":62,"value":899},{"type":56,"tag":94,"props":4577,"children":4578},{"style":550},[4579],{"type":62,"value":904},{"type":56,"tag":94,"props":4581,"children":4582},{"class":545,"line":826},[4583,4588,4592,4596,4600,4605,4609],{"type":56,"tag":94,"props":4584,"children":4585},{"style":555},[4586],{"type":62,"value":4587},"  50%",{"type":56,"tag":94,"props":4589,"children":4590},{"style":550},[4591],{"type":62,"value":881},{"type":56,"tag":94,"props":4593,"children":4594},{"style":570},[4595],{"type":62,"value":4562},{"type":56,"tag":94,"props":4597,"children":4598},{"style":550},[4599],{"type":62,"value":578},{"type":56,"tag":94,"props":4601,"children":4602},{"style":627},[4603],{"type":62,"value":4604}," 0.7",{"type":56,"tag":94,"props":4606,"children":4607},{"style":550},[4608],{"type":62,"value":899},{"type":56,"tag":94,"props":4610,"children":4611},{"style":550},[4612],{"type":62,"value":904},{"type":56,"tag":94,"props":4614,"children":4615},{"class":545,"line":834},[4616],{"type":56,"tag":94,"props":4617,"children":4618},{"style":550},[4619],{"type":62,"value":741},{"type":56,"tag":94,"props":4621,"children":4622},{"class":545,"line":1577},[4623,4627,4632,4636,4641,4645,4650,4655,4660,4664],{"type":56,"tag":94,"props":4624,"children":4625},{"style":550},[4626],{"type":62,"value":242},{"type":56,"tag":94,"props":4628,"children":4629},{"style":555},[4630],{"type":62,"value":4631},"pulsing",{"type":56,"tag":94,"props":4633,"children":4634},{"style":550},[4635],{"type":62,"value":881},{"type":56,"tag":94,"props":4637,"children":4638},{"style":570},[4639],{"type":62,"value":4640}," animation",{"type":56,"tag":94,"props":4642,"children":4643},{"style":550},[4644],{"type":62,"value":578},{"type":56,"tag":94,"props":4646,"children":4647},{"style":581},[4648],{"type":62,"value":4649}," pulse ",{"type":56,"tag":94,"props":4651,"children":4652},{"style":627},[4653],{"type":62,"value":4654},"2s",{"type":56,"tag":94,"props":4656,"children":4657},{"style":581},[4658],{"type":62,"value":4659}," ease-in-out infinite",{"type":56,"tag":94,"props":4661,"children":4662},{"style":550},[4663],{"type":62,"value":899},{"type":56,"tag":94,"props":4665,"children":4666},{"style":550},[4667],{"type":62,"value":904},{"type":56,"tag":94,"props":4669,"children":4670},{"class":545,"line":1594},[4671],{"type":56,"tag":94,"props":4672,"children":4673},{"emptyLinePlaceholder":1259},[4674],{"type":62,"value":1262},{"type":56,"tag":94,"props":4676,"children":4677},{"class":545,"line":2280},[4678],{"type":56,"tag":94,"props":4679,"children":4680},{"style":923},[4681],{"type":62,"value":4682},"\u002F* Flickering (for flames, sparks) *\u002F\n",{"type":56,"tag":94,"props":4684,"children":4685},{"class":545,"line":2309},[4686,4690,4695],{"type":56,"tag":94,"props":4687,"children":4688},{"style":4374},[4689],{"type":62,"value":4377},{"type":56,"tag":94,"props":4691,"children":4692},{"style":1641},[4693],{"type":62,"value":4694}," flicker",{"type":56,"tag":94,"props":4696,"children":4697},{"style":550},[4698],{"type":62,"value":563},{"type":56,"tag":94,"props":4700,"children":4701},{"class":545,"line":2351},[4702,4706,4710,4714,4718,4722,4726,4730,4734],{"type":56,"tag":94,"props":4703,"children":4704},{"style":555},[4705],{"type":62,"value":4545},{"type":56,"tag":94,"props":4707,"children":4708},{"style":581},[4709],{"type":62,"value":220},{"type":56,"tag":94,"props":4711,"children":4712},{"style":555},[4713],{"type":62,"value":958},{"type":56,"tag":94,"props":4715,"children":4716},{"style":550},[4717],{"type":62,"value":881},{"type":56,"tag":94,"props":4719,"children":4720},{"style":570},[4721],{"type":62,"value":4562},{"type":56,"tag":94,"props":4723,"children":4724},{"style":550},[4725],{"type":62,"value":578},{"type":56,"tag":94,"props":4727,"children":4728},{"style":627},[4729],{"type":62,"value":894},{"type":56,"tag":94,"props":4731,"children":4732},{"style":550},[4733],{"type":62,"value":899},{"type":56,"tag":94,"props":4735,"children":4736},{"style":550},[4737],{"type":62,"value":904},{"type":56,"tag":94,"props":4739,"children":4740},{"class":545,"line":2359},[4741,4745,4749,4753,4757,4762,4766],{"type":56,"tag":94,"props":4742,"children":4743},{"style":555},[4744],{"type":62,"value":4587},{"type":56,"tag":94,"props":4746,"children":4747},{"style":550},[4748],{"type":62,"value":881},{"type":56,"tag":94,"props":4750,"children":4751},{"style":570},[4752],{"type":62,"value":4562},{"type":56,"tag":94,"props":4754,"children":4755},{"style":550},[4756],{"type":62,"value":578},{"type":56,"tag":94,"props":4758,"children":4759},{"style":627},[4760],{"type":62,"value":4761}," 0.8",{"type":56,"tag":94,"props":4763,"children":4764},{"style":550},[4765],{"type":62,"value":899},{"type":56,"tag":94,"props":4767,"children":4768},{"style":550},[4769],{"type":62,"value":904},{"type":56,"tag":94,"props":4771,"children":4772},{"class":545,"line":2426},[4773],{"type":56,"tag":94,"props":4774,"children":4775},{"style":550},[4776],{"type":62,"value":741},{"type":56,"tag":94,"props":4778,"children":4779},{"class":545,"line":2468},[4780],{"type":56,"tag":94,"props":4781,"children":4782},{"emptyLinePlaceholder":1259},[4783],{"type":62,"value":1262},{"type":56,"tag":94,"props":4785,"children":4786},{"class":545,"line":2499},[4787],{"type":56,"tag":94,"props":4788,"children":4789},{"style":923},[4790],{"type":62,"value":4791},"\u002F* Always respect reduced motion preferences *\u002F\n",{"type":56,"tag":94,"props":4793,"children":4794},{"class":545,"line":2568},[4795,4800,4804,4809,4813,4818,4822],{"type":56,"tag":94,"props":4796,"children":4797},{"style":4374},[4798],{"type":62,"value":4799},"@media",{"type":56,"tag":94,"props":4801,"children":4802},{"style":550},[4803],{"type":62,"value":360},{"type":56,"tag":94,"props":4805,"children":4806},{"style":581},[4807],{"type":62,"value":4808},"prefers-reduced-motion",{"type":56,"tag":94,"props":4810,"children":4811},{"style":550},[4812],{"type":62,"value":578},{"type":56,"tag":94,"props":4814,"children":4815},{"style":581},[4816],{"type":62,"value":4817}," reduce",{"type":56,"tag":94,"props":4819,"children":4820},{"style":550},[4821],{"type":62,"value":1514},{"type":56,"tag":94,"props":4823,"children":4824},{"style":550},[4825],{"type":62,"value":563},{"type":56,"tag":94,"props":4827,"children":4828},{"class":545,"line":2607},[4829,4834,4838,4842,4847,4852,4856,4860,4864,4869],{"type":56,"tag":94,"props":4830,"children":4831},{"style":555},[4832],{"type":62,"value":4833},"  *",{"type":56,"tag":94,"props":4835,"children":4836},{"style":550},[4837],{"type":62,"value":717},{"type":56,"tag":94,"props":4839,"children":4840},{"style":555},[4841],{"type":62,"value":1830},{"type":56,"tag":94,"props":4843,"children":4844},{"style":550},[4845],{"type":62,"value":4846},"::",{"type":56,"tag":94,"props":4848,"children":4849},{"style":848},[4850],{"type":62,"value":4851},"before",{"type":56,"tag":94,"props":4853,"children":4854},{"style":550},[4855],{"type":62,"value":717},{"type":56,"tag":94,"props":4857,"children":4858},{"style":555},[4859],{"type":62,"value":1830},{"type":56,"tag":94,"props":4861,"children":4862},{"style":550},[4863],{"type":62,"value":4846},{"type":56,"tag":94,"props":4865,"children":4866},{"style":848},[4867],{"type":62,"value":4868},"after",{"type":56,"tag":94,"props":4870,"children":4871},{"style":550},[4872],{"type":62,"value":563},{"type":56,"tag":94,"props":4874,"children":4875},{"class":545,"line":2663},[4876,4881,4885,4890,4895],{"type":56,"tag":94,"props":4877,"children":4878},{"style":570},[4879],{"type":62,"value":4880},"    animation-duration",{"type":56,"tag":94,"props":4882,"children":4883},{"style":550},[4884],{"type":62,"value":578},{"type":56,"tag":94,"props":4886,"children":4887},{"style":627},[4888],{"type":62,"value":4889}," 0.01ms",{"type":56,"tag":94,"props":4891,"children":4892},{"style":627},[4893],{"type":62,"value":4894}," !important",{"type":56,"tag":94,"props":4896,"children":4897},{"style":550},[4898],{"type":62,"value":589},{"type":56,"tag":94,"props":4900,"children":4901},{"class":545,"line":3992},[4902,4907,4911,4915,4919],{"type":56,"tag":94,"props":4903,"children":4904},{"style":570},[4905],{"type":62,"value":4906},"    animation-iteration-count",{"type":56,"tag":94,"props":4908,"children":4909},{"style":550},[4910],{"type":62,"value":578},{"type":56,"tag":94,"props":4912,"children":4913},{"style":627},[4914],{"type":62,"value":894},{"type":56,"tag":94,"props":4916,"children":4917},{"style":627},[4918],{"type":62,"value":4894},{"type":56,"tag":94,"props":4920,"children":4921},{"style":550},[4922],{"type":62,"value":589},{"type":56,"tag":94,"props":4924,"children":4925},{"class":545,"line":4013},[4926],{"type":56,"tag":94,"props":4927,"children":4928},{"style":550},[4929],{"type":62,"value":4930},"  }\n",{"type":56,"tag":94,"props":4932,"children":4933},{"class":545,"line":4114},[4934],{"type":56,"tag":94,"props":4935,"children":4936},{"style":550},[4937],{"type":62,"value":741},{"type":56,"tag":71,"props":4939,"children":4940},{},[],{"type":56,"tag":75,"props":4942,"children":4944},{"id":4943},"part-3-skill-data-visualization",[4945],{"type":62,"value":4946},"Part 3: Skill — Data Visualization",{"type":56,"tag":82,"props":4948,"children":4950},{"id":4949},"when-to-use-1",[4951],{"type":62,"value":500},{"type":56,"tag":113,"props":4953,"children":4954},{},[4955,4960,4965,4970],{"type":56,"tag":117,"props":4956,"children":4957},{},[4958],{"type":62,"value":4959},"Comparing quantities",{"type":56,"tag":117,"props":4961,"children":4962},{},[4963],{"type":62,"value":4964},"Showing trends over time",{"type":56,"tag":117,"props":4966,"children":4967},{},[4968],{"type":62,"value":4969},"Displaying distributions or proportions",{"type":56,"tag":117,"props":4971,"children":4972},{},[4973],{"type":62,"value":4974},"Making data explorable",{"type":56,"tag":82,"props":4976,"children":4978},{"id":4977},"approach-inline-svg-charts-no-dependencies",[4979],{"type":62,"value":4980},"Approach: Inline SVG Charts (No Dependencies)",{"type":56,"tag":65,"props":4982,"children":4983},{},[4984],{"type":62,"value":4985},"For simple charts, hand-draw in SVG. No library needed.",{"type":56,"tag":139,"props":4987,"children":4990},{"className":4988,"code":4989,"language":940,"meta":148,"style":148},"language-svg shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Simple bar chart -->\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 300\">\n  \u003C!-- Y axis -->\n  \u003Cline x1=\"80\" y1=\"40\" x2=\"80\" y2=\"250\" stroke=\"currentColor\"\n        stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n  \u003C!-- X axis -->\n  \u003Cline x1=\"80\" y1=\"250\" x2=\"620\" y2=\"250\" stroke=\"currentColor\"\n        stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n\n  \u003C!-- Bars -->\n  \u003Crect x=\"120\" y=\"100\" width=\"60\" height=\"150\" rx=\"4\"\n        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"150\" y=\"270\" text-anchor=\"middle\" font-size=\"12\"\n        fill=\"currentColor\" opacity=\"0.7\">Q1\u003C\u002Ftext>\n  \u003Ctext x=\"150\" y=\"92\" text-anchor=\"middle\" font-size=\"12\"\n        fill=\"#3C3489\">$42k\u003C\u002Ftext>\n  \u003C!-- ... more bars -->\n\u003C\u002Fsvg>\n",[4991],{"type":56,"tag":146,"props":4992,"children":4993},{"__ignoreMap":148},[4994,5002,5010,5018,5026,5034,5042,5050,5057,5064,5072,5080,5088,5096,5104,5112,5120,5128],{"type":56,"tag":94,"props":4995,"children":4996},{"class":545,"line":546},[4997],{"type":56,"tag":94,"props":4998,"children":4999},{},[5000],{"type":62,"value":5001},"\u003C!-- Simple bar chart -->\n",{"type":56,"tag":94,"props":5003,"children":5004},{"class":545,"line":566},[5005],{"type":56,"tag":94,"props":5006,"children":5007},{},[5008],{"type":62,"value":5009},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 300\">\n",{"type":56,"tag":94,"props":5011,"children":5012},{"class":545,"line":592},[5013],{"type":56,"tag":94,"props":5014,"children":5015},{},[5016],{"type":62,"value":5017},"  \u003C!-- Y axis -->\n",{"type":56,"tag":94,"props":5019,"children":5020},{"class":545,"line":614},[5021],{"type":56,"tag":94,"props":5022,"children":5023},{},[5024],{"type":62,"value":5025},"  \u003Cline x1=\"80\" y1=\"40\" x2=\"80\" y2=\"250\" stroke=\"currentColor\"\n",{"type":56,"tag":94,"props":5027,"children":5028},{"class":545,"line":637},[5029],{"type":56,"tag":94,"props":5030,"children":5031},{},[5032],{"type":62,"value":5033},"        stroke-width=\"0.5\" opacity=\"0.3\"\u002F>\n",{"type":56,"tag":94,"props":5035,"children":5036},{"class":545,"line":664},[5037],{"type":56,"tag":94,"props":5038,"children":5039},{},[5040],{"type":62,"value":5041},"  \u003C!-- X axis -->\n",{"type":56,"tag":94,"props":5043,"children":5044},{"class":545,"line":686},[5045],{"type":56,"tag":94,"props":5046,"children":5047},{},[5048],{"type":62,"value":5049},"  \u003Cline x1=\"80\" y1=\"250\" x2=\"620\" y2=\"250\" stroke=\"currentColor\"\n",{"type":56,"tag":94,"props":5051,"children":5052},{"class":545,"line":735},[5053],{"type":56,"tag":94,"props":5054,"children":5055},{},[5056],{"type":62,"value":5033},{"type":56,"tag":94,"props":5058,"children":5059},{"class":545,"line":744},[5060],{"type":56,"tag":94,"props":5061,"children":5062},{"emptyLinePlaceholder":1259},[5063],{"type":62,"value":1262},{"type":56,"tag":94,"props":5065,"children":5066},{"class":545,"line":765},[5067],{"type":56,"tag":94,"props":5068,"children":5069},{},[5070],{"type":62,"value":5071},"  \u003C!-- Bars -->\n",{"type":56,"tag":94,"props":5073,"children":5074},{"class":545,"line":785},[5075],{"type":56,"tag":94,"props":5076,"children":5077},{},[5078],{"type":62,"value":5079},"  \u003Crect x=\"120\" y=\"100\" width=\"60\" height=\"150\" rx=\"4\"\n",{"type":56,"tag":94,"props":5081,"children":5082},{"class":545,"line":805},[5083],{"type":56,"tag":94,"props":5084,"children":5085},{},[5086],{"type":62,"value":5087},"        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n",{"type":56,"tag":94,"props":5089,"children":5090},{"class":545,"line":826},[5091],{"type":56,"tag":94,"props":5092,"children":5093},{},[5094],{"type":62,"value":5095},"  \u003Ctext x=\"150\" y=\"270\" text-anchor=\"middle\" font-size=\"12\"\n",{"type":56,"tag":94,"props":5097,"children":5098},{"class":545,"line":834},[5099],{"type":56,"tag":94,"props":5100,"children":5101},{},[5102],{"type":62,"value":5103},"        fill=\"currentColor\" opacity=\"0.7\">Q1\u003C\u002Ftext>\n",{"type":56,"tag":94,"props":5105,"children":5106},{"class":545,"line":1577},[5107],{"type":56,"tag":94,"props":5108,"children":5109},{},[5110],{"type":62,"value":5111},"  \u003Ctext x=\"150\" y=\"92\" text-anchor=\"middle\" font-size=\"12\"\n",{"type":56,"tag":94,"props":5113,"children":5114},{"class":545,"line":1594},[5115],{"type":56,"tag":94,"props":5116,"children":5117},{},[5118],{"type":62,"value":5119},"        fill=\"#3C3489\">$42k\u003C\u002Ftext>\n",{"type":56,"tag":94,"props":5121,"children":5122},{"class":545,"line":2280},[5123],{"type":56,"tag":94,"props":5124,"children":5125},{},[5126],{"type":62,"value":5127},"  \u003C!-- ... more bars -->\n",{"type":56,"tag":94,"props":5129,"children":5130},{"class":545,"line":2309},[5131],{"type":56,"tag":94,"props":5132,"children":5133},{},[5134],{"type":62,"value":5135},"\u003C\u002Fsvg>\n",{"type":56,"tag":82,"props":5137,"children":5139},{"id":5138},"approach-chartjs-for-complexinteractive-charts",[5140],{"type":62,"value":5141},"Approach: Chart.js (For Complex\u002FInteractive Charts)",{"type":56,"tag":65,"props":5143,"children":5144},{},[5145,5147,5152],{"type":62,"value":5146},"When you need tooltips, responsive legends, animations. ",{"type":56,"tag":146,"props":5148,"children":5150},{"className":5149},[],[5151],{"type":62,"value":462},{"type":62,"value":5153}," is in the\npre-injected importmap — load it with a dynamic import inside a jsFunction:",{"type":56,"tag":65,"props":5155,"children":5156},{},[5157],{"type":62,"value":909},{"type":56,"tag":139,"props":5159,"children":5161},{"className":912,"code":5160,"language":308,"meta":148,"style":148},"\u003Cdiv style=\"position:relative;width:100%;height:300px\">\n  \u003Ccanvas id=\"myChart\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>\n",[5162],{"type":56,"tag":146,"props":5163,"children":5164},{"__ignoreMap":148},[5165,5202,5247],{"type":56,"tag":94,"props":5166,"children":5167},{"class":545,"line":546},[5168,5172,5176,5181,5185,5189,5194,5198],{"type":56,"tag":94,"props":5169,"children":5170},{"style":550},[5171],{"type":62,"value":934},{"type":56,"tag":94,"props":5173,"children":5174},{"style":937},[5175],{"type":62,"value":1282},{"type":56,"tag":94,"props":5177,"children":5178},{"style":848},[5179],{"type":62,"value":5180}," style",{"type":56,"tag":94,"props":5182,"children":5183},{"style":550},[5184],{"type":62,"value":856},{"type":56,"tag":94,"props":5186,"children":5187},{"style":550},[5188],{"type":62,"value":861},{"type":56,"tag":94,"props":5190,"children":5191},{"style":864},[5192],{"type":62,"value":5193},"position:relative;width:100%;height:300px",{"type":56,"tag":94,"props":5195,"children":5196},{"style":550},[5197],{"type":62,"value":861},{"type":56,"tag":94,"props":5199,"children":5200},{"style":550},[5201],{"type":62,"value":1011},{"type":56,"tag":94,"props":5203,"children":5204},{"class":545,"line":566},[5205,5209,5214,5218,5222,5226,5231,5235,5239,5243],{"type":56,"tag":94,"props":5206,"children":5207},{"style":550},[5208],{"type":62,"value":1027},{"type":56,"tag":94,"props":5210,"children":5211},{"style":937},[5212],{"type":62,"value":5213},"canvas",{"type":56,"tag":94,"props":5215,"children":5216},{"style":848},[5217],{"type":62,"value":1037},{"type":56,"tag":94,"props":5219,"children":5220},{"style":550},[5221],{"type":62,"value":856},{"type":56,"tag":94,"props":5223,"children":5224},{"style":550},[5225],{"type":62,"value":861},{"type":56,"tag":94,"props":5227,"children":5228},{"style":864},[5229],{"type":62,"value":5230},"myChart",{"type":56,"tag":94,"props":5232,"children":5233},{"style":550},[5234],{"type":62,"value":861},{"type":56,"tag":94,"props":5236,"children":5237},{"style":550},[5238],{"type":62,"value":2965},{"type":56,"tag":94,"props":5240,"children":5241},{"style":937},[5242],{"type":62,"value":5213},{"type":56,"tag":94,"props":5244,"children":5245},{"style":550},[5246],{"type":62,"value":1011},{"type":56,"tag":94,"props":5248,"children":5249},{"class":545,"line":592},[5250,5254,5258],{"type":56,"tag":94,"props":5251,"children":5252},{"style":550},[5253],{"type":62,"value":1245},{"type":56,"tag":94,"props":5255,"children":5256},{"style":937},[5257],{"type":62,"value":1282},{"type":56,"tag":94,"props":5259,"children":5260},{"style":550},[5261],{"type":62,"value":1011},{"type":56,"tag":65,"props":5263,"children":5264},{},[5265],{"type":62,"value":1612},{"type":56,"tag":139,"props":5267,"children":5269},{"className":1615,"code":5268,"language":1617,"meta":148,"style":148},"async function renderRevenueChart() {\n  const { default: Chart } = await import('chart.js\u002Fauto');\n  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n  const textColor = isDark ? '#c2c0b6' : '#3d3d3a';\n  const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';\n\n  new Chart(document.getElementById('myChart'), {\n    type: 'line',\n    data: {\n      labels: ['Jan', 'Feb', 'Mar', 'Apr'],\n      datasets: [{\n        label: 'Revenue',\n        data: [30, 45, 28, 62],\n        borderColor: '#534AB7',\n        backgroundColor: 'rgba(83,74,183,0.1)',\n        fill: true,\n        tension: 0.3\n      }]\n    },\n    options: {\n      responsive: true,\n      maintainAspectRatio: false,\n      plugins: {\n        legend: { labels: { color: textColor } }\n      },\n      scales: {\n        x: { ticks: { color: textColor }, grid: { color: gridColor } },\n        y: { ticks: { color: textColor }, grid: { color: gridColor } }\n      }\n    }\n  });\n}\n",[5270],{"type":56,"tag":146,"props":5271,"children":5272},{"__ignoreMap":148},[5273,5299,5367,5430,5490,5548,5555,5612,5641,5657,5746,5767,5796,5852,5881,5910,5931,5948,5961,5969,5985,6005,6026,6042,6091,6099,6115,6194,6270,6278,6286,6302],{"type":56,"tag":94,"props":5274,"children":5275},{"class":545,"line":546},[5276,5281,5286,5291,5295],{"type":56,"tag":94,"props":5277,"children":5278},{"style":848},[5279],{"type":62,"value":5280},"async",{"type":56,"tag":94,"props":5282,"children":5283},{"style":848},[5284],{"type":62,"value":5285}," function",{"type":56,"tag":94,"props":5287,"children":5288},{"style":699},[5289],{"type":62,"value":5290}," renderRevenueChart",{"type":56,"tag":94,"props":5292,"children":5293},{"style":550},[5294],{"type":62,"value":2904},{"type":56,"tag":94,"props":5296,"children":5297},{"style":550},[5298],{"type":62,"value":563},{"type":56,"tag":94,"props":5300,"children":5301},{"class":545,"line":566},[5302,5306,5310,5315,5319,5324,5328,5332,5337,5342,5346,5350,5355,5359,5363],{"type":56,"tag":94,"props":5303,"children":5304},{"style":848},[5305],{"type":62,"value":1727},{"type":56,"tag":94,"props":5307,"children":5308},{"style":550},[5309],{"type":62,"value":881},{"type":56,"tag":94,"props":5311,"children":5312},{"style":937},[5313],{"type":62,"value":5314}," default",{"type":56,"tag":94,"props":5316,"children":5317},{"style":550},[5318],{"type":62,"value":578},{"type":56,"tag":94,"props":5320,"children":5321},{"style":581},[5322],{"type":62,"value":5323}," Chart",{"type":56,"tag":94,"props":5325,"children":5326},{"style":550},[5327],{"type":62,"value":3501},{"type":56,"tag":94,"props":5329,"children":5330},{"style":550},[5331],{"type":62,"value":1703},{"type":56,"tag":94,"props":5333,"children":5334},{"style":4374},[5335],{"type":62,"value":5336}," await",{"type":56,"tag":94,"props":5338,"children":5339},{"style":550},[5340],{"type":62,"value":5341}," import",{"type":56,"tag":94,"props":5343,"children":5344},{"style":937},[5345],{"type":62,"value":707},{"type":56,"tag":94,"props":5347,"children":5348},{"style":550},[5349],{"type":62,"value":1677},{"type":56,"tag":94,"props":5351,"children":5352},{"style":864},[5353],{"type":62,"value":5354},"chart.js\u002Fauto",{"type":56,"tag":94,"props":5356,"children":5357},{"style":550},[5358],{"type":62,"value":1677},{"type":56,"tag":94,"props":5360,"children":5361},{"style":937},[5362],{"type":62,"value":1514},{"type":56,"tag":94,"props":5364,"children":5365},{"style":550},[5366],{"type":62,"value":589},{"type":56,"tag":94,"props":5368,"children":5369},{"class":545,"line":592},[5370,5374,5379,5383,5387,5391,5396,5400,5404,5409,5413,5417,5421,5426],{"type":56,"tag":94,"props":5371,"children":5372},{"style":848},[5373],{"type":62,"value":1727},{"type":56,"tag":94,"props":5375,"children":5376},{"style":581},[5377],{"type":62,"value":5378}," isDark",{"type":56,"tag":94,"props":5380,"children":5381},{"style":550},[5382],{"type":62,"value":1703},{"type":56,"tag":94,"props":5384,"children":5385},{"style":581},[5386],{"type":62,"value":3510},{"type":56,"tag":94,"props":5388,"children":5389},{"style":550},[5390],{"type":62,"value":242},{"type":56,"tag":94,"props":5392,"children":5393},{"style":699},[5394],{"type":62,"value":5395},"matchMedia",{"type":56,"tag":94,"props":5397,"children":5398},{"style":937},[5399],{"type":62,"value":707},{"type":56,"tag":94,"props":5401,"children":5402},{"style":550},[5403],{"type":62,"value":1677},{"type":56,"tag":94,"props":5405,"children":5406},{"style":864},[5407],{"type":62,"value":5408},"(prefers-color-scheme: dark)",{"type":56,"tag":94,"props":5410,"children":5411},{"style":550},[5412],{"type":62,"value":1677},{"type":56,"tag":94,"props":5414,"children":5415},{"style":937},[5416],{"type":62,"value":1514},{"type":56,"tag":94,"props":5418,"children":5419},{"style":550},[5420],{"type":62,"value":242},{"type":56,"tag":94,"props":5422,"children":5423},{"style":581},[5424],{"type":62,"value":5425},"matches",{"type":56,"tag":94,"props":5427,"children":5428},{"style":550},[5429],{"type":62,"value":589},{"type":56,"tag":94,"props":5431,"children":5432},{"class":545,"line":614},[5433,5437,5442,5446,5450,5455,5459,5464,5468,5473,5477,5482,5486],{"type":56,"tag":94,"props":5434,"children":5435},{"style":848},[5436],{"type":62,"value":1727},{"type":56,"tag":94,"props":5438,"children":5439},{"style":581},[5440],{"type":62,"value":5441}," textColor",{"type":56,"tag":94,"props":5443,"children":5444},{"style":550},[5445],{"type":62,"value":1703},{"type":56,"tag":94,"props":5447,"children":5448},{"style":581},[5449],{"type":62,"value":5378},{"type":56,"tag":94,"props":5451,"children":5452},{"style":550},[5453],{"type":62,"value":5454}," ?",{"type":56,"tag":94,"props":5456,"children":5457},{"style":550},[5458],{"type":62,"value":3360},{"type":56,"tag":94,"props":5460,"children":5461},{"style":864},[5462],{"type":62,"value":5463},"#c2c0b6",{"type":56,"tag":94,"props":5465,"children":5466},{"style":550},[5467],{"type":62,"value":1677},{"type":56,"tag":94,"props":5469,"children":5470},{"style":550},[5471],{"type":62,"value":5472}," :",{"type":56,"tag":94,"props":5474,"children":5475},{"style":550},[5476],{"type":62,"value":3360},{"type":56,"tag":94,"props":5478,"children":5479},{"style":864},[5480],{"type":62,"value":5481},"#3d3d3a",{"type":56,"tag":94,"props":5483,"children":5484},{"style":550},[5485],{"type":62,"value":1677},{"type":56,"tag":94,"props":5487,"children":5488},{"style":550},[5489],{"type":62,"value":589},{"type":56,"tag":94,"props":5491,"children":5492},{"class":545,"line":637},[5493,5497,5502,5506,5510,5514,5518,5523,5527,5531,5535,5540,5544],{"type":56,"tag":94,"props":5494,"children":5495},{"style":848},[5496],{"type":62,"value":1727},{"type":56,"tag":94,"props":5498,"children":5499},{"style":581},[5500],{"type":62,"value":5501}," gridColor",{"type":56,"tag":94,"props":5503,"children":5504},{"style":550},[5505],{"type":62,"value":1703},{"type":56,"tag":94,"props":5507,"children":5508},{"style":581},[5509],{"type":62,"value":5378},{"type":56,"tag":94,"props":5511,"children":5512},{"style":550},[5513],{"type":62,"value":5454},{"type":56,"tag":94,"props":5515,"children":5516},{"style":550},[5517],{"type":62,"value":3360},{"type":56,"tag":94,"props":5519,"children":5520},{"style":864},[5521],{"type":62,"value":5522},"rgba(255,255,255,0.08)",{"type":56,"tag":94,"props":5524,"children":5525},{"style":550},[5526],{"type":62,"value":1677},{"type":56,"tag":94,"props":5528,"children":5529},{"style":550},[5530],{"type":62,"value":5472},{"type":56,"tag":94,"props":5532,"children":5533},{"style":550},[5534],{"type":62,"value":3360},{"type":56,"tag":94,"props":5536,"children":5537},{"style":864},[5538],{"type":62,"value":5539},"rgba(0,0,0,0.06)",{"type":56,"tag":94,"props":5541,"children":5542},{"style":550},[5543],{"type":62,"value":1677},{"type":56,"tag":94,"props":5545,"children":5546},{"style":550},[5547],{"type":62,"value":589},{"type":56,"tag":94,"props":5549,"children":5550},{"class":545,"line":664},[5551],{"type":56,"tag":94,"props":5552,"children":5553},{"emptyLinePlaceholder":1259},[5554],{"type":62,"value":1262},{"type":56,"tag":94,"props":5556,"children":5557},{"class":545,"line":686},[5558,5563,5567,5571,5576,5580,5584,5588,5592,5596,5600,5604,5608],{"type":56,"tag":94,"props":5559,"children":5560},{"style":550},[5561],{"type":62,"value":5562},"  new",{"type":56,"tag":94,"props":5564,"children":5565},{"style":699},[5566],{"type":62,"value":5323},{"type":56,"tag":94,"props":5568,"children":5569},{"style":937},[5570],{"type":62,"value":707},{"type":56,"tag":94,"props":5572,"children":5573},{"style":581},[5574],{"type":62,"value":5575},"document",{"type":56,"tag":94,"props":5577,"children":5578},{"style":550},[5579],{"type":62,"value":242},{"type":56,"tag":94,"props":5581,"children":5582},{"style":699},[5583],{"type":62,"value":1668},{"type":56,"tag":94,"props":5585,"children":5586},{"style":937},[5587],{"type":62,"value":707},{"type":56,"tag":94,"props":5589,"children":5590},{"style":550},[5591],{"type":62,"value":1677},{"type":56,"tag":94,"props":5593,"children":5594},{"style":864},[5595],{"type":62,"value":5230},{"type":56,"tag":94,"props":5597,"children":5598},{"style":550},[5599],{"type":62,"value":1677},{"type":56,"tag":94,"props":5601,"children":5602},{"style":937},[5603],{"type":62,"value":1514},{"type":56,"tag":94,"props":5605,"children":5606},{"style":550},[5607],{"type":62,"value":717},{"type":56,"tag":94,"props":5609,"children":5610},{"style":550},[5611],{"type":62,"value":563},{"type":56,"tag":94,"props":5613,"children":5614},{"class":545,"line":735},[5615,5620,5624,5628,5632,5636],{"type":56,"tag":94,"props":5616,"children":5617},{"style":937},[5618],{"type":62,"value":5619},"    type",{"type":56,"tag":94,"props":5621,"children":5622},{"style":550},[5623],{"type":62,"value":578},{"type":56,"tag":94,"props":5625,"children":5626},{"style":550},[5627],{"type":62,"value":3360},{"type":56,"tag":94,"props":5629,"children":5630},{"style":864},[5631],{"type":62,"value":545},{"type":56,"tag":94,"props":5633,"children":5634},{"style":550},[5635],{"type":62,"value":1677},{"type":56,"tag":94,"props":5637,"children":5638},{"style":550},[5639],{"type":62,"value":5640},",\n",{"type":56,"tag":94,"props":5642,"children":5643},{"class":545,"line":744},[5644,5649,5653],{"type":56,"tag":94,"props":5645,"children":5646},{"style":937},[5647],{"type":62,"value":5648},"    data",{"type":56,"tag":94,"props":5650,"children":5651},{"style":550},[5652],{"type":62,"value":578},{"type":56,"tag":94,"props":5654,"children":5655},{"style":550},[5656],{"type":62,"value":563},{"type":56,"tag":94,"props":5658,"children":5659},{"class":545,"line":765},[5660,5665,5669,5674,5678,5683,5687,5691,5695,5700,5704,5708,5712,5717,5721,5725,5729,5734,5738,5742],{"type":56,"tag":94,"props":5661,"children":5662},{"style":937},[5663],{"type":62,"value":5664},"      labels",{"type":56,"tag":94,"props":5666,"children":5667},{"style":550},[5668],{"type":62,"value":578},{"type":56,"tag":94,"props":5670,"children":5671},{"style":937},[5672],{"type":62,"value":5673}," [",{"type":56,"tag":94,"props":5675,"children":5676},{"style":550},[5677],{"type":62,"value":1677},{"type":56,"tag":94,"props":5679,"children":5680},{"style":864},[5681],{"type":62,"value":5682},"Jan",{"type":56,"tag":94,"props":5684,"children":5685},{"style":550},[5686],{"type":62,"value":1677},{"type":56,"tag":94,"props":5688,"children":5689},{"style":550},[5690],{"type":62,"value":717},{"type":56,"tag":94,"props":5692,"children":5693},{"style":550},[5694],{"type":62,"value":3360},{"type":56,"tag":94,"props":5696,"children":5697},{"style":864},[5698],{"type":62,"value":5699},"Feb",{"type":56,"tag":94,"props":5701,"children":5702},{"style":550},[5703],{"type":62,"value":1677},{"type":56,"tag":94,"props":5705,"children":5706},{"style":550},[5707],{"type":62,"value":717},{"type":56,"tag":94,"props":5709,"children":5710},{"style":550},[5711],{"type":62,"value":3360},{"type":56,"tag":94,"props":5713,"children":5714},{"style":864},[5715],{"type":62,"value":5716},"Mar",{"type":56,"tag":94,"props":5718,"children":5719},{"style":550},[5720],{"type":62,"value":1677},{"type":56,"tag":94,"props":5722,"children":5723},{"style":550},[5724],{"type":62,"value":717},{"type":56,"tag":94,"props":5726,"children":5727},{"style":550},[5728],{"type":62,"value":3360},{"type":56,"tag":94,"props":5730,"children":5731},{"style":864},[5732],{"type":62,"value":5733},"Apr",{"type":56,"tag":94,"props":5735,"children":5736},{"style":550},[5737],{"type":62,"value":1677},{"type":56,"tag":94,"props":5739,"children":5740},{"style":937},[5741],{"type":62,"value":876},{"type":56,"tag":94,"props":5743,"children":5744},{"style":550},[5745],{"type":62,"value":5640},{"type":56,"tag":94,"props":5747,"children":5748},{"class":545,"line":785},[5749,5754,5758,5762],{"type":56,"tag":94,"props":5750,"children":5751},{"style":937},[5752],{"type":62,"value":5753},"      datasets",{"type":56,"tag":94,"props":5755,"children":5756},{"style":550},[5757],{"type":62,"value":578},{"type":56,"tag":94,"props":5759,"children":5760},{"style":937},[5761],{"type":62,"value":5673},{"type":56,"tag":94,"props":5763,"children":5764},{"style":550},[5765],{"type":62,"value":5766},"{\n",{"type":56,"tag":94,"props":5768,"children":5769},{"class":545,"line":805},[5770,5775,5779,5783,5788,5792],{"type":56,"tag":94,"props":5771,"children":5772},{"style":937},[5773],{"type":62,"value":5774},"        label",{"type":56,"tag":94,"props":5776,"children":5777},{"style":550},[5778],{"type":62,"value":578},{"type":56,"tag":94,"props":5780,"children":5781},{"style":550},[5782],{"type":62,"value":3360},{"type":56,"tag":94,"props":5784,"children":5785},{"style":864},[5786],{"type":62,"value":5787},"Revenue",{"type":56,"tag":94,"props":5789,"children":5790},{"style":550},[5791],{"type":62,"value":1677},{"type":56,"tag":94,"props":5793,"children":5794},{"style":550},[5795],{"type":62,"value":5640},{"type":56,"tag":94,"props":5797,"children":5798},{"class":545,"line":826},[5799,5804,5808,5812,5817,5821,5826,5830,5835,5839,5844,5848],{"type":56,"tag":94,"props":5800,"children":5801},{"style":937},[5802],{"type":62,"value":5803},"        data",{"type":56,"tag":94,"props":5805,"children":5806},{"style":550},[5807],{"type":62,"value":578},{"type":56,"tag":94,"props":5809,"children":5810},{"style":937},[5811],{"type":62,"value":5673},{"type":56,"tag":94,"props":5813,"children":5814},{"style":627},[5815],{"type":62,"value":5816},"30",{"type":56,"tag":94,"props":5818,"children":5819},{"style":550},[5820],{"type":62,"value":717},{"type":56,"tag":94,"props":5822,"children":5823},{"style":627},[5824],{"type":62,"value":5825}," 45",{"type":56,"tag":94,"props":5827,"children":5828},{"style":550},[5829],{"type":62,"value":717},{"type":56,"tag":94,"props":5831,"children":5832},{"style":627},[5833],{"type":62,"value":5834}," 28",{"type":56,"tag":94,"props":5836,"children":5837},{"style":550},[5838],{"type":62,"value":717},{"type":56,"tag":94,"props":5840,"children":5841},{"style":627},[5842],{"type":62,"value":5843}," 62",{"type":56,"tag":94,"props":5845,"children":5846},{"style":937},[5847],{"type":62,"value":876},{"type":56,"tag":94,"props":5849,"children":5850},{"style":550},[5851],{"type":62,"value":5640},{"type":56,"tag":94,"props":5853,"children":5854},{"class":545,"line":834},[5855,5860,5864,5868,5873,5877],{"type":56,"tag":94,"props":5856,"children":5857},{"style":937},[5858],{"type":62,"value":5859},"        borderColor",{"type":56,"tag":94,"props":5861,"children":5862},{"style":550},[5863],{"type":62,"value":578},{"type":56,"tag":94,"props":5865,"children":5866},{"style":550},[5867],{"type":62,"value":3360},{"type":56,"tag":94,"props":5869,"children":5870},{"style":864},[5871],{"type":62,"value":5872},"#534AB7",{"type":56,"tag":94,"props":5874,"children":5875},{"style":550},[5876],{"type":62,"value":1677},{"type":56,"tag":94,"props":5878,"children":5879},{"style":550},[5880],{"type":62,"value":5640},{"type":56,"tag":94,"props":5882,"children":5883},{"class":545,"line":1577},[5884,5889,5893,5897,5902,5906],{"type":56,"tag":94,"props":5885,"children":5886},{"style":937},[5887],{"type":62,"value":5888},"        backgroundColor",{"type":56,"tag":94,"props":5890,"children":5891},{"style":550},[5892],{"type":62,"value":578},{"type":56,"tag":94,"props":5894,"children":5895},{"style":550},[5896],{"type":62,"value":3360},{"type":56,"tag":94,"props":5898,"children":5899},{"style":864},[5900],{"type":62,"value":5901},"rgba(83,74,183,0.1)",{"type":56,"tag":94,"props":5903,"children":5904},{"style":550},[5905],{"type":62,"value":1677},{"type":56,"tag":94,"props":5907,"children":5908},{"style":550},[5909],{"type":62,"value":5640},{"type":56,"tag":94,"props":5911,"children":5912},{"class":545,"line":1594},[5913,5917,5921,5927],{"type":56,"tag":94,"props":5914,"children":5915},{"style":937},[5916],{"type":62,"value":1149},{"type":56,"tag":94,"props":5918,"children":5919},{"style":550},[5920],{"type":62,"value":578},{"type":56,"tag":94,"props":5922,"children":5924},{"style":5923},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[5925],{"type":62,"value":5926}," true",{"type":56,"tag":94,"props":5928,"children":5929},{"style":550},[5930],{"type":62,"value":5640},{"type":56,"tag":94,"props":5932,"children":5933},{"class":545,"line":2280},[5934,5939,5943],{"type":56,"tag":94,"props":5935,"children":5936},{"style":937},[5937],{"type":62,"value":5938},"        tension",{"type":56,"tag":94,"props":5940,"children":5941},{"style":550},[5942],{"type":62,"value":578},{"type":56,"tag":94,"props":5944,"children":5945},{"style":627},[5946],{"type":62,"value":5947}," 0.3\n",{"type":56,"tag":94,"props":5949,"children":5950},{"class":545,"line":2309},[5951,5956],{"type":56,"tag":94,"props":5952,"children":5953},{"style":550},[5954],{"type":62,"value":5955},"      }",{"type":56,"tag":94,"props":5957,"children":5958},{"style":937},[5959],{"type":62,"value":5960},"]\n",{"type":56,"tag":94,"props":5962,"children":5963},{"class":545,"line":2351},[5964],{"type":56,"tag":94,"props":5965,"children":5966},{"style":550},[5967],{"type":62,"value":5968},"    },\n",{"type":56,"tag":94,"props":5970,"children":5971},{"class":545,"line":2359},[5972,5977,5981],{"type":56,"tag":94,"props":5973,"children":5974},{"style":937},[5975],{"type":62,"value":5976},"    options",{"type":56,"tag":94,"props":5978,"children":5979},{"style":550},[5980],{"type":62,"value":578},{"type":56,"tag":94,"props":5982,"children":5983},{"style":550},[5984],{"type":62,"value":563},{"type":56,"tag":94,"props":5986,"children":5987},{"class":545,"line":2426},[5988,5993,5997,6001],{"type":56,"tag":94,"props":5989,"children":5990},{"style":937},[5991],{"type":62,"value":5992},"      responsive",{"type":56,"tag":94,"props":5994,"children":5995},{"style":550},[5996],{"type":62,"value":578},{"type":56,"tag":94,"props":5998,"children":5999},{"style":5923},[6000],{"type":62,"value":5926},{"type":56,"tag":94,"props":6002,"children":6003},{"style":550},[6004],{"type":62,"value":5640},{"type":56,"tag":94,"props":6006,"children":6007},{"class":545,"line":2468},[6008,6013,6017,6022],{"type":56,"tag":94,"props":6009,"children":6010},{"style":937},[6011],{"type":62,"value":6012},"      maintainAspectRatio",{"type":56,"tag":94,"props":6014,"children":6015},{"style":550},[6016],{"type":62,"value":578},{"type":56,"tag":94,"props":6018,"children":6019},{"style":5923},[6020],{"type":62,"value":6021}," false",{"type":56,"tag":94,"props":6023,"children":6024},{"style":550},[6025],{"type":62,"value":5640},{"type":56,"tag":94,"props":6027,"children":6028},{"class":545,"line":2499},[6029,6034,6038],{"type":56,"tag":94,"props":6030,"children":6031},{"style":937},[6032],{"type":62,"value":6033},"      plugins",{"type":56,"tag":94,"props":6035,"children":6036},{"style":550},[6037],{"type":62,"value":578},{"type":56,"tag":94,"props":6039,"children":6040},{"style":550},[6041],{"type":62,"value":563},{"type":56,"tag":94,"props":6043,"children":6044},{"class":545,"line":2568},[6045,6050,6054,6058,6063,6067,6071,6075,6079,6083,6087],{"type":56,"tag":94,"props":6046,"children":6047},{"style":937},[6048],{"type":62,"value":6049},"        legend",{"type":56,"tag":94,"props":6051,"children":6052},{"style":550},[6053],{"type":62,"value":578},{"type":56,"tag":94,"props":6055,"children":6056},{"style":550},[6057],{"type":62,"value":881},{"type":56,"tag":94,"props":6059,"children":6060},{"style":937},[6061],{"type":62,"value":6062}," labels",{"type":56,"tag":94,"props":6064,"children":6065},{"style":550},[6066],{"type":62,"value":578},{"type":56,"tag":94,"props":6068,"children":6069},{"style":550},[6070],{"type":62,"value":881},{"type":56,"tag":94,"props":6072,"children":6073},{"style":937},[6074],{"type":62,"value":2700},{"type":56,"tag":94,"props":6076,"children":6077},{"style":550},[6078],{"type":62,"value":578},{"type":56,"tag":94,"props":6080,"children":6081},{"style":581},[6082],{"type":62,"value":5441},{"type":56,"tag":94,"props":6084,"children":6085},{"style":550},[6086],{"type":62,"value":3501},{"type":56,"tag":94,"props":6088,"children":6089},{"style":550},[6090],{"type":62,"value":904},{"type":56,"tag":94,"props":6092,"children":6093},{"class":545,"line":2607},[6094],{"type":56,"tag":94,"props":6095,"children":6096},{"style":550},[6097],{"type":62,"value":6098},"      },\n",{"type":56,"tag":94,"props":6100,"children":6101},{"class":545,"line":2663},[6102,6107,6111],{"type":56,"tag":94,"props":6103,"children":6104},{"style":937},[6105],{"type":62,"value":6106},"      scales",{"type":56,"tag":94,"props":6108,"children":6109},{"style":550},[6110],{"type":62,"value":578},{"type":56,"tag":94,"props":6112,"children":6113},{"style":550},[6114],{"type":62,"value":563},{"type":56,"tag":94,"props":6116,"children":6117},{"class":545,"line":3992},[6118,6123,6127,6131,6136,6140,6144,6148,6152,6156,6161,6166,6170,6174,6178,6182,6186,6190],{"type":56,"tag":94,"props":6119,"children":6120},{"style":937},[6121],{"type":62,"value":6122},"        x",{"type":56,"tag":94,"props":6124,"children":6125},{"style":550},[6126],{"type":62,"value":578},{"type":56,"tag":94,"props":6128,"children":6129},{"style":550},[6130],{"type":62,"value":881},{"type":56,"tag":94,"props":6132,"children":6133},{"style":937},[6134],{"type":62,"value":6135}," ticks",{"type":56,"tag":94,"props":6137,"children":6138},{"style":550},[6139],{"type":62,"value":578},{"type":56,"tag":94,"props":6141,"children":6142},{"style":550},[6143],{"type":62,"value":881},{"type":56,"tag":94,"props":6145,"children":6146},{"style":937},[6147],{"type":62,"value":2700},{"type":56,"tag":94,"props":6149,"children":6150},{"style":550},[6151],{"type":62,"value":578},{"type":56,"tag":94,"props":6153,"children":6154},{"style":581},[6155],{"type":62,"value":5441},{"type":56,"tag":94,"props":6157,"children":6158},{"style":550},[6159],{"type":62,"value":6160}," },",{"type":56,"tag":94,"props":6162,"children":6163},{"style":937},[6164],{"type":62,"value":6165}," grid",{"type":56,"tag":94,"props":6167,"children":6168},{"style":550},[6169],{"type":62,"value":578},{"type":56,"tag":94,"props":6171,"children":6172},{"style":550},[6173],{"type":62,"value":881},{"type":56,"tag":94,"props":6175,"children":6176},{"style":937},[6177],{"type":62,"value":2700},{"type":56,"tag":94,"props":6179,"children":6180},{"style":550},[6181],{"type":62,"value":578},{"type":56,"tag":94,"props":6183,"children":6184},{"style":581},[6185],{"type":62,"value":5501},{"type":56,"tag":94,"props":6187,"children":6188},{"style":550},[6189],{"type":62,"value":3501},{"type":56,"tag":94,"props":6191,"children":6192},{"style":550},[6193],{"type":62,"value":4249},{"type":56,"tag":94,"props":6195,"children":6196},{"class":545,"line":4013},[6197,6202,6206,6210,6214,6218,6222,6226,6230,6234,6238,6242,6246,6250,6254,6258,6262,6266],{"type":56,"tag":94,"props":6198,"children":6199},{"style":937},[6200],{"type":62,"value":6201},"        y",{"type":56,"tag":94,"props":6203,"children":6204},{"style":550},[6205],{"type":62,"value":578},{"type":56,"tag":94,"props":6207,"children":6208},{"style":550},[6209],{"type":62,"value":881},{"type":56,"tag":94,"props":6211,"children":6212},{"style":937},[6213],{"type":62,"value":6135},{"type":56,"tag":94,"props":6215,"children":6216},{"style":550},[6217],{"type":62,"value":578},{"type":56,"tag":94,"props":6219,"children":6220},{"style":550},[6221],{"type":62,"value":881},{"type":56,"tag":94,"props":6223,"children":6224},{"style":937},[6225],{"type":62,"value":2700},{"type":56,"tag":94,"props":6227,"children":6228},{"style":550},[6229],{"type":62,"value":578},{"type":56,"tag":94,"props":6231,"children":6232},{"style":581},[6233],{"type":62,"value":5441},{"type":56,"tag":94,"props":6235,"children":6236},{"style":550},[6237],{"type":62,"value":6160},{"type":56,"tag":94,"props":6239,"children":6240},{"style":937},[6241],{"type":62,"value":6165},{"type":56,"tag":94,"props":6243,"children":6244},{"style":550},[6245],{"type":62,"value":578},{"type":56,"tag":94,"props":6247,"children":6248},{"style":550},[6249],{"type":62,"value":881},{"type":56,"tag":94,"props":6251,"children":6252},{"style":937},[6253],{"type":62,"value":2700},{"type":56,"tag":94,"props":6255,"children":6256},{"style":550},[6257],{"type":62,"value":578},{"type":56,"tag":94,"props":6259,"children":6260},{"style":581},[6261],{"type":62,"value":5501},{"type":56,"tag":94,"props":6263,"children":6264},{"style":550},[6265],{"type":62,"value":3501},{"type":56,"tag":94,"props":6267,"children":6268},{"style":550},[6269],{"type":62,"value":904},{"type":56,"tag":94,"props":6271,"children":6272},{"class":545,"line":4114},[6273],{"type":56,"tag":94,"props":6274,"children":6275},{"style":550},[6276],{"type":62,"value":6277},"      }\n",{"type":56,"tag":94,"props":6279,"children":6280},{"class":545,"line":4130},[6281],{"type":56,"tag":94,"props":6282,"children":6283},{"style":550},[6284],{"type":62,"value":6285},"    }\n",{"type":56,"tag":94,"props":6287,"children":6289},{"class":545,"line":6288},31,[6290,6294,6298],{"type":56,"tag":94,"props":6291,"children":6292},{"style":550},[6293],{"type":62,"value":3414},{"type":56,"tag":94,"props":6295,"children":6296},{"style":937},[6297],{"type":62,"value":1514},{"type":56,"tag":94,"props":6299,"children":6300},{"style":550},[6301],{"type":62,"value":589},{"type":56,"tag":94,"props":6303,"children":6305},{"class":545,"line":6304},32,[6306],{"type":56,"tag":94,"props":6307,"children":6308},{"style":550},[6309],{"type":62,"value":741},{"type":56,"tag":65,"props":6311,"children":6312},{},[6313],{"type":62,"value":1855},{"type":56,"tag":139,"props":6315,"children":6317},{"className":1615,"code":6316,"language":1617,"meta":148,"style":148},"renderRevenueChart();\n",[6318],{"type":56,"tag":146,"props":6319,"children":6320},{"__ignoreMap":148},[6321],{"type":56,"tag":94,"props":6322,"children":6323},{"class":545,"line":546},[6324,6329,6333],{"type":56,"tag":94,"props":6325,"children":6326},{"style":699},[6327],{"type":62,"value":6328},"renderRevenueChart",{"type":56,"tag":94,"props":6330,"children":6331},{"style":581},[6332],{"type":62,"value":2904},{"type":56,"tag":94,"props":6334,"children":6335},{"style":550},[6336],{"type":62,"value":589},{"type":56,"tag":71,"props":6338,"children":6339},{},[],{"type":56,"tag":75,"props":6341,"children":6343},{"id":6342},"part-4-skill-mermaid-diagrams",[6344],{"type":62,"value":6345},"Part 4: Skill — Mermaid Diagrams",{"type":56,"tag":65,"props":6347,"children":6348},{},[6349],{"type":62,"value":6350},"For relationship diagrams (ERDs, class diagrams, sequence diagrams) where\nprecise layout math isn't worth doing by hand.",{"type":56,"tag":65,"props":6352,"children":6353},{},[6354],{"type":62,"value":6355},"Mermaid is not in the importmap — load it by URL in a module script placed in\nthe html parameter (CDN script tags still work there):",{"type":56,"tag":139,"props":6357,"children":6359},{"className":912,"code":6358,"language":308,"meta":148,"style":148},"\u003Cdiv id=\"diagram\">\u003C\u002Fdiv>\n\u003Cscript type=\"module\">\nimport mermaid from 'https:\u002F\u002Fesm.sh\u002Fmermaid@11\u002Fdist\u002Fmermaid.esm.min.mjs';\nconst dark = matchMedia('(prefers-color-scheme: dark)').matches;\nmermaid.initialize({\n  startOnLoad: false,\n  theme: 'base',\n  themeVariables: {\n    darkMode: dark,\n    fontSize: '13px',\n    lineColor: dark ? '#9c9a92' : '#73726c',\n    textColor: dark ? '#c2c0b6' : '#3d3d3a',\n  },\n});\nconst { svg } = await mermaid.render('d', `\n  erDiagram\n    USERS ||--o{ POSTS : writes\n    POSTS ||--o{ COMMENTS : has\n`);\ndocument.getElementById('diagram').innerHTML = svg;\n\u003C\u002Fscript>\n",[6360],{"type":56,"tag":146,"props":6361,"children":6362},{"__ignoreMap":148},[6363,6407,6444,6479,6533,6558,6578,6607,6623,6644,6673,6728,6780,6788,6803,6870,6878,6886,6894,6909,6965],{"type":56,"tag":94,"props":6364,"children":6365},{"class":545,"line":546},[6366,6370,6374,6378,6382,6386,6391,6395,6399,6403],{"type":56,"tag":94,"props":6367,"children":6368},{"style":550},[6369],{"type":62,"value":934},{"type":56,"tag":94,"props":6371,"children":6372},{"style":937},[6373],{"type":62,"value":1282},{"type":56,"tag":94,"props":6375,"children":6376},{"style":848},[6377],{"type":62,"value":1037},{"type":56,"tag":94,"props":6379,"children":6380},{"style":550},[6381],{"type":62,"value":856},{"type":56,"tag":94,"props":6383,"children":6384},{"style":550},[6385],{"type":62,"value":861},{"type":56,"tag":94,"props":6387,"children":6388},{"style":864},[6389],{"type":62,"value":6390},"diagram",{"type":56,"tag":94,"props":6392,"children":6393},{"style":550},[6394],{"type":62,"value":861},{"type":56,"tag":94,"props":6396,"children":6397},{"style":550},[6398],{"type":62,"value":2965},{"type":56,"tag":94,"props":6400,"children":6401},{"style":937},[6402],{"type":62,"value":1282},{"type":56,"tag":94,"props":6404,"children":6405},{"style":550},[6406],{"type":62,"value":1011},{"type":56,"tag":94,"props":6408,"children":6409},{"class":545,"line":566},[6410,6414,6419,6423,6427,6431,6436,6440],{"type":56,"tag":94,"props":6411,"children":6412},{"style":550},[6413],{"type":62,"value":934},{"type":56,"tag":94,"props":6415,"children":6416},{"style":937},[6417],{"type":62,"value":6418},"script",{"type":56,"tag":94,"props":6420,"children":6421},{"style":848},[6422],{"type":62,"value":1373},{"type":56,"tag":94,"props":6424,"children":6425},{"style":550},[6426],{"type":62,"value":856},{"type":56,"tag":94,"props":6428,"children":6429},{"style":550},[6430],{"type":62,"value":861},{"type":56,"tag":94,"props":6432,"children":6433},{"style":864},[6434],{"type":62,"value":6435},"module",{"type":56,"tag":94,"props":6437,"children":6438},{"style":550},[6439],{"type":62,"value":861},{"type":56,"tag":94,"props":6441,"children":6442},{"style":550},[6443],{"type":62,"value":1011},{"type":56,"tag":94,"props":6445,"children":6446},{"class":545,"line":592},[6447,6452,6457,6462,6466,6471,6475],{"type":56,"tag":94,"props":6448,"children":6449},{"style":4374},[6450],{"type":62,"value":6451},"import",{"type":56,"tag":94,"props":6453,"children":6454},{"style":581},[6455],{"type":62,"value":6456}," mermaid ",{"type":56,"tag":94,"props":6458,"children":6459},{"style":4374},[6460],{"type":62,"value":6461},"from",{"type":56,"tag":94,"props":6463,"children":6464},{"style":550},[6465],{"type":62,"value":3360},{"type":56,"tag":94,"props":6467,"children":6468},{"style":864},[6469],{"type":62,"value":6470},"https:\u002F\u002Fesm.sh\u002Fmermaid@11\u002Fdist\u002Fmermaid.esm.min.mjs",{"type":56,"tag":94,"props":6472,"children":6473},{"style":550},[6474],{"type":62,"value":1677},{"type":56,"tag":94,"props":6476,"children":6477},{"style":550},[6478],{"type":62,"value":589},{"type":56,"tag":94,"props":6480,"children":6481},{"class":545,"line":614},[6482,6487,6492,6496,6501,6505,6509,6513,6517,6521,6525,6529],{"type":56,"tag":94,"props":6483,"children":6484},{"style":848},[6485],{"type":62,"value":6486},"const",{"type":56,"tag":94,"props":6488,"children":6489},{"style":581},[6490],{"type":62,"value":6491}," dark ",{"type":56,"tag":94,"props":6493,"children":6494},{"style":550},[6495],{"type":62,"value":856},{"type":56,"tag":94,"props":6497,"children":6498},{"style":699},[6499],{"type":62,"value":6500}," matchMedia",{"type":56,"tag":94,"props":6502,"children":6503},{"style":581},[6504],{"type":62,"value":707},{"type":56,"tag":94,"props":6506,"children":6507},{"style":550},[6508],{"type":62,"value":1677},{"type":56,"tag":94,"props":6510,"children":6511},{"style":864},[6512],{"type":62,"value":5408},{"type":56,"tag":94,"props":6514,"children":6515},{"style":550},[6516],{"type":62,"value":1677},{"type":56,"tag":94,"props":6518,"children":6519},{"style":581},[6520],{"type":62,"value":1514},{"type":56,"tag":94,"props":6522,"children":6523},{"style":550},[6524],{"type":62,"value":242},{"type":56,"tag":94,"props":6526,"children":6527},{"style":581},[6528],{"type":62,"value":5425},{"type":56,"tag":94,"props":6530,"children":6531},{"style":550},[6532],{"type":62,"value":589},{"type":56,"tag":94,"props":6534,"children":6535},{"class":545,"line":637},[6536,6541,6545,6550,6554],{"type":56,"tag":94,"props":6537,"children":6538},{"style":581},[6539],{"type":62,"value":6540},"mermaid",{"type":56,"tag":94,"props":6542,"children":6543},{"style":550},[6544],{"type":62,"value":242},{"type":56,"tag":94,"props":6546,"children":6547},{"style":699},[6548],{"type":62,"value":6549},"initialize",{"type":56,"tag":94,"props":6551,"children":6552},{"style":581},[6553],{"type":62,"value":707},{"type":56,"tag":94,"props":6555,"children":6556},{"style":550},[6557],{"type":62,"value":5766},{"type":56,"tag":94,"props":6559,"children":6560},{"class":545,"line":664},[6561,6566,6570,6574],{"type":56,"tag":94,"props":6562,"children":6563},{"style":937},[6564],{"type":62,"value":6565},"  startOnLoad",{"type":56,"tag":94,"props":6567,"children":6568},{"style":550},[6569],{"type":62,"value":578},{"type":56,"tag":94,"props":6571,"children":6572},{"style":5923},[6573],{"type":62,"value":6021},{"type":56,"tag":94,"props":6575,"children":6576},{"style":550},[6577],{"type":62,"value":5640},{"type":56,"tag":94,"props":6579,"children":6580},{"class":545,"line":686},[6581,6586,6590,6594,6599,6603],{"type":56,"tag":94,"props":6582,"children":6583},{"style":937},[6584],{"type":62,"value":6585},"  theme",{"type":56,"tag":94,"props":6587,"children":6588},{"style":550},[6589],{"type":62,"value":578},{"type":56,"tag":94,"props":6591,"children":6592},{"style":550},[6593],{"type":62,"value":3360},{"type":56,"tag":94,"props":6595,"children":6596},{"style":864},[6597],{"type":62,"value":6598},"base",{"type":56,"tag":94,"props":6600,"children":6601},{"style":550},[6602],{"type":62,"value":1677},{"type":56,"tag":94,"props":6604,"children":6605},{"style":550},[6606],{"type":62,"value":5640},{"type":56,"tag":94,"props":6608,"children":6609},{"class":545,"line":735},[6610,6615,6619],{"type":56,"tag":94,"props":6611,"children":6612},{"style":937},[6613],{"type":62,"value":6614},"  themeVariables",{"type":56,"tag":94,"props":6616,"children":6617},{"style":550},[6618],{"type":62,"value":578},{"type":56,"tag":94,"props":6620,"children":6621},{"style":550},[6622],{"type":62,"value":563},{"type":56,"tag":94,"props":6624,"children":6625},{"class":545,"line":744},[6626,6631,6635,6640],{"type":56,"tag":94,"props":6627,"children":6628},{"style":937},[6629],{"type":62,"value":6630},"    darkMode",{"type":56,"tag":94,"props":6632,"children":6633},{"style":550},[6634],{"type":62,"value":578},{"type":56,"tag":94,"props":6636,"children":6637},{"style":581},[6638],{"type":62,"value":6639}," dark",{"type":56,"tag":94,"props":6641,"children":6642},{"style":550},[6643],{"type":62,"value":5640},{"type":56,"tag":94,"props":6645,"children":6646},{"class":545,"line":765},[6647,6652,6656,6660,6665,6669],{"type":56,"tag":94,"props":6648,"children":6649},{"style":937},[6650],{"type":62,"value":6651},"    fontSize",{"type":56,"tag":94,"props":6653,"children":6654},{"style":550},[6655],{"type":62,"value":578},{"type":56,"tag":94,"props":6657,"children":6658},{"style":550},[6659],{"type":62,"value":3360},{"type":56,"tag":94,"props":6661,"children":6662},{"style":864},[6663],{"type":62,"value":6664},"13px",{"type":56,"tag":94,"props":6666,"children":6667},{"style":550},[6668],{"type":62,"value":1677},{"type":56,"tag":94,"props":6670,"children":6671},{"style":550},[6672],{"type":62,"value":5640},{"type":56,"tag":94,"props":6674,"children":6675},{"class":545,"line":785},[6676,6681,6685,6689,6694,6698,6703,6707,6711,6715,6720,6724],{"type":56,"tag":94,"props":6677,"children":6678},{"style":937},[6679],{"type":62,"value":6680},"    lineColor",{"type":56,"tag":94,"props":6682,"children":6683},{"style":550},[6684],{"type":62,"value":578},{"type":56,"tag":94,"props":6686,"children":6687},{"style":581},[6688],{"type":62,"value":6491},{"type":56,"tag":94,"props":6690,"children":6691},{"style":550},[6692],{"type":62,"value":6693},"?",{"type":56,"tag":94,"props":6695,"children":6696},{"style":550},[6697],{"type":62,"value":3360},{"type":56,"tag":94,"props":6699,"children":6700},{"style":864},[6701],{"type":62,"value":6702},"#9c9a92",{"type":56,"tag":94,"props":6704,"children":6705},{"style":550},[6706],{"type":62,"value":1677},{"type":56,"tag":94,"props":6708,"children":6709},{"style":550},[6710],{"type":62,"value":5472},{"type":56,"tag":94,"props":6712,"children":6713},{"style":550},[6714],{"type":62,"value":3360},{"type":56,"tag":94,"props":6716,"children":6717},{"style":864},[6718],{"type":62,"value":6719},"#73726c",{"type":56,"tag":94,"props":6721,"children":6722},{"style":550},[6723],{"type":62,"value":1677},{"type":56,"tag":94,"props":6725,"children":6726},{"style":550},[6727],{"type":62,"value":5640},{"type":56,"tag":94,"props":6729,"children":6730},{"class":545,"line":805},[6731,6736,6740,6744,6748,6752,6756,6760,6764,6768,6772,6776],{"type":56,"tag":94,"props":6732,"children":6733},{"style":937},[6734],{"type":62,"value":6735},"    textColor",{"type":56,"tag":94,"props":6737,"children":6738},{"style":550},[6739],{"type":62,"value":578},{"type":56,"tag":94,"props":6741,"children":6742},{"style":581},[6743],{"type":62,"value":6491},{"type":56,"tag":94,"props":6745,"children":6746},{"style":550},[6747],{"type":62,"value":6693},{"type":56,"tag":94,"props":6749,"children":6750},{"style":550},[6751],{"type":62,"value":3360},{"type":56,"tag":94,"props":6753,"children":6754},{"style":864},[6755],{"type":62,"value":5463},{"type":56,"tag":94,"props":6757,"children":6758},{"style":550},[6759],{"type":62,"value":1677},{"type":56,"tag":94,"props":6761,"children":6762},{"style":550},[6763],{"type":62,"value":5472},{"type":56,"tag":94,"props":6765,"children":6766},{"style":550},[6767],{"type":62,"value":3360},{"type":56,"tag":94,"props":6769,"children":6770},{"style":864},[6771],{"type":62,"value":5481},{"type":56,"tag":94,"props":6773,"children":6774},{"style":550},[6775],{"type":62,"value":1677},{"type":56,"tag":94,"props":6777,"children":6778},{"style":550},[6779],{"type":62,"value":5640},{"type":56,"tag":94,"props":6781,"children":6782},{"class":545,"line":826},[6783],{"type":56,"tag":94,"props":6784,"children":6785},{"style":550},[6786],{"type":62,"value":6787},"  },\n",{"type":56,"tag":94,"props":6789,"children":6790},{"class":545,"line":834},[6791,6795,6799],{"type":56,"tag":94,"props":6792,"children":6793},{"style":550},[6794],{"type":62,"value":3675},{"type":56,"tag":94,"props":6796,"children":6797},{"style":581},[6798],{"type":62,"value":1514},{"type":56,"tag":94,"props":6800,"children":6801},{"style":550},[6802],{"type":62,"value":589},{"type":56,"tag":94,"props":6804,"children":6805},{"class":545,"line":1577},[6806,6810,6814,6819,6823,6827,6831,6836,6840,6845,6849,6853,6857,6861,6865],{"type":56,"tag":94,"props":6807,"children":6808},{"style":848},[6809],{"type":62,"value":6486},{"type":56,"tag":94,"props":6811,"children":6812},{"style":550},[6813],{"type":62,"value":881},{"type":56,"tag":94,"props":6815,"children":6816},{"style":581},[6817],{"type":62,"value":6818}," svg ",{"type":56,"tag":94,"props":6820,"children":6821},{"style":550},[6822],{"type":62,"value":3675},{"type":56,"tag":94,"props":6824,"children":6825},{"style":550},[6826],{"type":62,"value":1703},{"type":56,"tag":94,"props":6828,"children":6829},{"style":4374},[6830],{"type":62,"value":5336},{"type":56,"tag":94,"props":6832,"children":6833},{"style":581},[6834],{"type":62,"value":6835}," mermaid",{"type":56,"tag":94,"props":6837,"children":6838},{"style":550},[6839],{"type":62,"value":242},{"type":56,"tag":94,"props":6841,"children":6842},{"style":699},[6843],{"type":62,"value":6844},"render",{"type":56,"tag":94,"props":6846,"children":6847},{"style":581},[6848],{"type":62,"value":707},{"type":56,"tag":94,"props":6850,"children":6851},{"style":550},[6852],{"type":62,"value":1677},{"type":56,"tag":94,"props":6854,"children":6855},{"style":864},[6856],{"type":62,"value":3398},{"type":56,"tag":94,"props":6858,"children":6859},{"style":550},[6860],{"type":62,"value":1677},{"type":56,"tag":94,"props":6862,"children":6863},{"style":550},[6864],{"type":62,"value":717},{"type":56,"tag":94,"props":6866,"children":6867},{"style":550},[6868],{"type":62,"value":6869}," `\n",{"type":56,"tag":94,"props":6871,"children":6872},{"class":545,"line":1594},[6873],{"type":56,"tag":94,"props":6874,"children":6875},{"style":864},[6876],{"type":62,"value":6877},"  erDiagram\n",{"type":56,"tag":94,"props":6879,"children":6880},{"class":545,"line":2280},[6881],{"type":56,"tag":94,"props":6882,"children":6883},{"style":864},[6884],{"type":62,"value":6885},"    USERS ||--o{ POSTS : writes\n",{"type":56,"tag":94,"props":6887,"children":6888},{"class":545,"line":2309},[6889],{"type":56,"tag":94,"props":6890,"children":6891},{"style":864},[6892],{"type":62,"value":6893},"    POSTS ||--o{ COMMENTS : has\n",{"type":56,"tag":94,"props":6895,"children":6896},{"class":545,"line":2351},[6897,6901,6905],{"type":56,"tag":94,"props":6898,"children":6899},{"style":550},[6900],{"type":62,"value":4218},{"type":56,"tag":94,"props":6902,"children":6903},{"style":581},[6904],{"type":62,"value":1514},{"type":56,"tag":94,"props":6906,"children":6907},{"style":550},[6908],{"type":62,"value":589},{"type":56,"tag":94,"props":6910,"children":6911},{"class":545,"line":2359},[6912,6916,6920,6924,6928,6932,6936,6940,6944,6948,6953,6957,6961],{"type":56,"tag":94,"props":6913,"children":6914},{"style":581},[6915],{"type":62,"value":5575},{"type":56,"tag":94,"props":6917,"children":6918},{"style":550},[6919],{"type":62,"value":242},{"type":56,"tag":94,"props":6921,"children":6922},{"style":699},[6923],{"type":62,"value":1668},{"type":56,"tag":94,"props":6925,"children":6926},{"style":581},[6927],{"type":62,"value":707},{"type":56,"tag":94,"props":6929,"children":6930},{"style":550},[6931],{"type":62,"value":1677},{"type":56,"tag":94,"props":6933,"children":6934},{"style":864},[6935],{"type":62,"value":6390},{"type":56,"tag":94,"props":6937,"children":6938},{"style":550},[6939],{"type":62,"value":1677},{"type":56,"tag":94,"props":6941,"children":6942},{"style":581},[6943],{"type":62,"value":1514},{"type":56,"tag":94,"props":6945,"children":6946},{"style":550},[6947],{"type":62,"value":242},{"type":56,"tag":94,"props":6949,"children":6950},{"style":581},[6951],{"type":62,"value":6952},"innerHTML ",{"type":56,"tag":94,"props":6954,"children":6955},{"style":550},[6956],{"type":62,"value":856},{"type":56,"tag":94,"props":6958,"children":6959},{"style":581},[6960],{"type":62,"value":4199},{"type":56,"tag":94,"props":6962,"children":6963},{"style":550},[6964],{"type":62,"value":589},{"type":56,"tag":94,"props":6966,"children":6967},{"class":545,"line":2426},[6968,6972,6976],{"type":56,"tag":94,"props":6969,"children":6970},{"style":550},[6971],{"type":62,"value":1245},{"type":56,"tag":94,"props":6973,"children":6974},{"style":937},[6975],{"type":62,"value":6418},{"type":56,"tag":94,"props":6977,"children":6978},{"style":550},[6979],{"type":62,"value":1011},{"type":56,"tag":65,"props":6981,"children":6982},{},[6983],{"type":62,"value":6984},"Use Mermaid for: ERDs, class diagrams, sequence diagrams, Gantt charts.\nUse hand-drawn SVG for: everything else (flowcharts, architecture,\nillustrative diagrams) — you get much better control.",{"type":56,"tag":71,"props":6986,"children":6987},{},[],{"type":56,"tag":75,"props":6989,"children":6991},{"id":6990},"part-5-skill-explanatory-writing-between-visuals",[6992],{"type":62,"value":6993},"Part 5: Skill — Explanatory Writing Between Visuals",{"type":56,"tag":82,"props":6995,"children":6997},{"id":6996},"narration-patterns",[6998],{"type":62,"value":6999},"Narration Patterns",{"type":56,"tag":65,"props":7001,"children":7002},{},[7003,7008],{"type":56,"tag":105,"props":7004,"children":7005},{},[7006],{"type":62,"value":7007},"The Walk-Through",{"type":62,"value":7009},": Point at parts of the visual and explain them.",{"type":56,"tag":7011,"props":7012,"children":7013},"blockquote",{},[7014],{"type":56,"tag":65,"props":7015,"children":7016},{},[7017],{"type":62,"value":7018},"\"Starting at the top, the roof deck collects distributed loads across\nits surface. These get channeled into the rafters below, which act\nlike one-way bridges...\"",{"type":56,"tag":65,"props":7020,"children":7021},{},[7022,7027],{"type":56,"tag":105,"props":7023,"children":7024},{},[7025],{"type":62,"value":7026},"The \"Why It Matters\"",{"type":62,"value":7028},": Connect the visual to real consequences.",{"type":56,"tag":7011,"props":7030,"children":7031},{},[7032],{"type":56,"tag":65,"props":7033,"children":7034},{},[7035],{"type":62,"value":7036},"\"This is why lower columns are always larger — they're carrying the\naccumulated weight of every floor above.\"",{"type":56,"tag":65,"props":7038,"children":7039},{},[7040,7045],{"type":56,"tag":105,"props":7041,"children":7042},{},[7043],{"type":62,"value":7044},"The \"Common Mistake\"",{"type":62,"value":7046},": Anticipate misconceptions.",{"type":56,"tag":7011,"props":7048,"children":7049},{},[7050],{"type":56,"tag":65,"props":7051,"children":7052},{},[7053],{"type":62,"value":7054},"\"One thing that trips people up: removing a single column doesn't just\nlose that member — it breaks the entire load chain.\"",{"type":56,"tag":65,"props":7056,"children":7057},{},[7058,7063],{"type":56,"tag":105,"props":7059,"children":7060},{},[7061],{"type":62,"value":7062},"The \"Go Deeper\" Offer",{"type":62,"value":7064},": End with expansion paths.",{"type":56,"tag":7011,"props":7066,"children":7067},{},[7068],{"type":56,"tag":65,"props":7069,"children":7070},{},[7071],{"type":62,"value":7072},"\"Want me to show how lateral loads (wind, seismic) take a completely\ndifferent path?\"",{"type":56,"tag":82,"props":7074,"children":7076},{"id":7075},"tone-rules",[7077],{"type":62,"value":7078},"Tone Rules",{"type":56,"tag":113,"props":7080,"children":7081},{},[7082,7087,7092,7097,7102,7107,7112],{"type":56,"tag":117,"props":7083,"children":7084},{},[7085],{"type":62,"value":7086},"Warm and direct. Not academic, not dumbed-down.",{"type":56,"tag":117,"props":7088,"children":7089},{},[7090],{"type":62,"value":7091},"Use \"you\" and \"we\" freely.",{"type":56,"tag":117,"props":7093,"children":7094},{},[7095],{"type":62,"value":7096},"Analogies and metaphors are powerful. Use them.",{"type":56,"tag":117,"props":7098,"children":7099},{},[7100],{"type":62,"value":7101},"Short paragraphs (2-4 sentences). No walls of text.",{"type":56,"tag":117,"props":7103,"children":7104},{},[7105],{"type":62,"value":7106},"Bold key terms on first introduction, then don't re-bold.",{"type":56,"tag":117,"props":7108,"children":7109},{},[7110],{"type":62,"value":7111},"Never use bullet points for explanations. Prose only.",{"type":56,"tag":117,"props":7113,"children":7114},{},[7115],{"type":62,"value":7116},"Ask at most one question per response.",{"type":56,"tag":71,"props":7118,"children":7119},{},[],{"type":56,"tag":75,"props":7121,"children":7123},{"id":7122},"part-6-skill-knowing-what-not-to-visualize",[7124],{"type":62,"value":7125},"Part 6: Skill — Knowing What NOT to Visualize",{"type":56,"tag":65,"props":7127,"children":7128},{},[7129],{"type":62,"value":7130},"Not everything needs a diagram. Skip visuals when:",{"type":56,"tag":113,"props":7132,"children":7133},{},[7134,7139,7144,7149,7154],{"type":56,"tag":117,"props":7135,"children":7136},{},[7137],{"type":62,"value":7138},"The answer is a single fact or number",{"type":56,"tag":117,"props":7140,"children":7141},{},[7142],{"type":62,"value":7143},"The user is venting or emotional (empathy, not charts)",{"type":56,"tag":117,"props":7145,"children":7146},{},[7147],{"type":62,"value":7148},"The topic is purely textual (writing, editing, drafting)",{"type":56,"tag":117,"props":7150,"children":7151},{},[7152],{"type":62,"value":7153},"A code snippet is the answer (just show the code)",{"type":56,"tag":117,"props":7155,"children":7156},{},[7157],{"type":62,"value":7158},"The user explicitly asked for brief\u002Fconcise",{"type":56,"tag":82,"props":7160,"children":7162},{"id":7161},"the-would-they-screenshot-this-test",[7163],{"type":62,"value":7164},"The \"Would They Screenshot This?\" Test",{"type":56,"tag":65,"props":7166,"children":7167},{},[7168],{"type":62,"value":7169},"If the user would likely screenshot or save the visual to reference\nlater, it was worth making. If not, just use text.",{"type":56,"tag":71,"props":7171,"children":7172},{},[],{"type":56,"tag":75,"props":7174,"children":7176},{"id":7175},"part-7-putting-it-all-together",[7177],{"type":62,"value":7178},"Part 7: Putting It All Together",{"type":56,"tag":82,"props":7180,"children":7182},{"id":7181},"example-response-structure-complex-technical-question",[7183],{"type":62,"value":7184},"Example Response Structure (Complex Technical Question)",{"type":56,"tag":139,"props":7186,"children":7189},{"className":7187,"code":7188,"language":62},[142],"[1-2 sentence hook validating the question]\n\n[Visual: SVG diagram or interactive widget]\n\n[Walk-through narration: 3-4 paragraphs explaining the visual,\n pointing at specific parts, noting key insights]\n\n[One \"go deeper\" offer with 2-3 specific directions]\n",[7190],{"type":56,"tag":146,"props":7191,"children":7192},{"__ignoreMap":148},[7193],{"type":62,"value":7188},{"type":56,"tag":82,"props":7195,"children":7197},{"id":7196},"example-response-structure-simple-question-with-visual-aid",[7198],{"type":62,"value":7199},"Example Response Structure (Simple Question with Visual Aid)",{"type":56,"tag":139,"props":7201,"children":7204},{"className":7202,"code":7203,"language":62},[142],"[Direct answer in 1-2 sentences]\n\n[Small supporting visual if it adds value]\n\n[One additional insight or context sentence]\n",[7205],{"type":56,"tag":146,"props":7206,"children":7207},{"__ignoreMap":148},[7208],{"type":62,"value":7203},{"type":56,"tag":82,"props":7210,"children":7212},{"id":7211},"quality-checklist-before-responding",[7213],{"type":62,"value":7214},"Quality Checklist Before Responding",{"type":56,"tag":113,"props":7216,"children":7219},{"className":7217},[7218],"contains-task-list",[7220,7231,7240,7249,7258,7267,7276,7285],{"type":56,"tag":117,"props":7221,"children":7224},{"className":7222},[7223],"task-list-item",[7225,7229],{"type":56,"tag":840,"props":7226,"children":7228},{"disabled":1259,"type":7227},"checkbox",[],{"type":62,"value":7230}," Did I pick the right format? (text vs SVG vs interactive vs chart)",{"type":56,"tag":117,"props":7232,"children":7234},{"className":7233},[7223],[7235,7238],{"type":56,"tag":840,"props":7236,"children":7237},{"disabled":1259,"type":7227},[],{"type":62,"value":7239}," Are all styles in the css parameter and behavior split into\njsFunctions (toolbox) + jsExpressions (invocations)?",{"type":56,"tag":117,"props":7241,"children":7243},{"className":7242},[7223],[7244,7247],{"type":56,"tag":840,"props":7245,"children":7246},{"disabled":1259,"type":7227},[],{"type":62,"value":7248}," Is the visual self-explanatory even without the narration?",{"type":56,"tag":117,"props":7250,"children":7252},{"className":7251},[7223],[7253,7256],{"type":56,"tag":840,"props":7254,"children":7255},{"disabled":1259,"type":7227},[],{"type":62,"value":7257}," Does the narration add value beyond what the visual shows?",{"type":56,"tag":117,"props":7259,"children":7261},{"className":7260},[7223],[7262,7265],{"type":56,"tag":840,"props":7263,"children":7264},{"disabled":1259,"type":7227},[],{"type":62,"value":7266}," Are colors meaningful, not decorative?",{"type":56,"tag":117,"props":7268,"children":7270},{"className":7269},[7223],[7271,7274],{"type":56,"tag":840,"props":7272,"children":7273},{"disabled":1259,"type":7227},[],{"type":62,"value":7275}," Does it work in dark mode?",{"type":56,"tag":117,"props":7277,"children":7279},{"className":7278},[7223],[7280,7283],{"type":56,"tag":840,"props":7281,"children":7282},{"disabled":1259,"type":7227},[],{"type":62,"value":7284}," Is the response concise? (Cut anything that doesn't teach)",{"type":56,"tag":117,"props":7286,"children":7288},{"className":7287},[7223],[7289,7292],{"type":56,"tag":840,"props":7290,"children":7291},{"disabled":1259,"type":7227},[],{"type":62,"value":7293}," Did I offer a clear next step?",{"type":56,"tag":71,"props":7295,"children":7296},{},[],{"type":56,"tag":75,"props":7298,"children":7300},{"id":7299},"appendix-quick-reference",[7301],{"type":62,"value":7302},"Appendix: Quick Reference",{"type":56,"tag":7304,"props":7305,"children":7306},"table",{},[7307,7326],{"type":56,"tag":7308,"props":7309,"children":7310},"thead",{},[7311],{"type":56,"tag":7312,"props":7313,"children":7314},"tr",{},[7315,7321],{"type":56,"tag":7316,"props":7317,"children":7318},"th",{},[7319],{"type":62,"value":7320},"Concept Type",{"type":56,"tag":7316,"props":7322,"children":7323},{},[7324],{"type":62,"value":7325},"Best Format",{"type":56,"tag":7327,"props":7328,"children":7329},"tbody",{},[7330,7344,7357,7370,7383,7396,7409,7422,7435,7448,7461],{"type":56,"tag":7312,"props":7331,"children":7332},{},[7333,7339],{"type":56,"tag":7334,"props":7335,"children":7336},"td",{},[7337],{"type":62,"value":7338},"How X works (physical)",{"type":56,"tag":7334,"props":7340,"children":7341},{},[7342],{"type":62,"value":7343},"Illustrative SVG diagram",{"type":56,"tag":7312,"props":7345,"children":7346},{},[7347,7352],{"type":56,"tag":7334,"props":7348,"children":7349},{},[7350],{"type":62,"value":7351},"How X works (abstract)",{"type":56,"tag":7334,"props":7353,"children":7354},{},[7355],{"type":62,"value":7356},"Interactive HTML + SVG",{"type":56,"tag":7312,"props":7358,"children":7359},{},[7360,7365],{"type":56,"tag":7334,"props":7361,"children":7362},{},[7363],{"type":62,"value":7364},"Process \u002F workflow",{"type":56,"tag":7334,"props":7366,"children":7367},{},[7368],{"type":62,"value":7369},"SVG flowchart",{"type":56,"tag":7312,"props":7371,"children":7372},{},[7373,7378],{"type":56,"tag":7334,"props":7374,"children":7375},{},[7376],{"type":62,"value":7377},"Architecture",{"type":56,"tag":7334,"props":7379,"children":7380},{},[7381],{"type":62,"value":7382},"SVG structural diagram",{"type":56,"tag":7312,"props":7384,"children":7385},{},[7386,7391],{"type":56,"tag":7334,"props":7387,"children":7388},{},[7389],{"type":62,"value":7390},"Data relationships",{"type":56,"tag":7334,"props":7392,"children":7393},{},[7394],{"type":62,"value":7395},"Mermaid ERD",{"type":56,"tag":7312,"props":7397,"children":7398},{},[7399,7404],{"type":56,"tag":7334,"props":7400,"children":7401},{},[7402],{"type":62,"value":7403},"Trends \u002F comparisons",{"type":56,"tag":7334,"props":7405,"children":7406},{},[7407],{"type":62,"value":7408},"Chart.js or SVG bar chart",{"type":56,"tag":7312,"props":7410,"children":7411},{},[7412,7417],{"type":56,"tag":7334,"props":7413,"children":7414},{},[7415],{"type":62,"value":7416},"Cyclic process",{"type":56,"tag":7334,"props":7418,"children":7419},{},[7420],{"type":62,"value":7421},"HTML step-through widget",{"type":56,"tag":7312,"props":7423,"children":7424},{},[7425,7430],{"type":56,"tag":7334,"props":7426,"children":7427},{},[7428],{"type":62,"value":7429},"System states",{"type":56,"tag":7334,"props":7431,"children":7432},{},[7433],{"type":62,"value":7434},"Interactive widget + toggles",{"type":56,"tag":7312,"props":7436,"children":7437},{},[7438,7443],{"type":56,"tag":7334,"props":7439,"children":7440},{},[7441],{"type":62,"value":7442},"Quick answer",{"type":56,"tag":7334,"props":7444,"children":7445},{},[7446],{"type":62,"value":7447},"Plain text",{"type":56,"tag":7312,"props":7449,"children":7450},{},[7451,7456],{"type":56,"tag":7334,"props":7452,"children":7453},{},[7454],{"type":62,"value":7455},"Code solution",{"type":56,"tag":7334,"props":7457,"children":7458},{},[7459],{"type":62,"value":7460},"Code block \u002F artifact",{"type":56,"tag":7312,"props":7462,"children":7463},{},[7464,7469],{"type":56,"tag":7334,"props":7465,"children":7466},{},[7467],{"type":62,"value":7468},"Emotional support",{"type":56,"tag":7334,"props":7470,"children":7471},{},[7472],{"type":62,"value":7473},"Warm text only",{"type":56,"tag":7475,"props":7476,"children":7477},"style",{},[7478],{"type":62,"value":7479},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":7481,"total":592},[7482,7503,7510],{"slug":7483,"name":7484,"fn":7485,"description":7486,"org":7487,"tags":7488,"stars":24,"repoUrl":25,"updatedAt":7502},"advanced-visualization-techniques","Advanced Visualization Techniques","create advanced generative UI visualizations","UI mockups, dashboards, advanced interactivity, generative art, simulations, math visualizations, and design system rules for producing rich generateSandboxedUi output.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7489,7492,7493,7496,7499],{"name":7490,"slug":7491,"type":14},"Dashboards","dashboards",{"name":22,"slug":23,"type":14},{"name":7494,"slug":7495,"type":14},"Frontend","frontend",{"name":7497,"slug":7498,"type":14},"Generative Art","generative-art",{"name":7500,"slug":7501,"type":14},"UI Components","ui-components","2026-07-12T08:06:40.712754",{"slug":4,"name":5,"fn":6,"description":7,"org":7504,"tags":7505,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7506,7507,7508,7509],{"name":19,"slug":20,"type":14},{"name":10,"slug":9,"type":14},{"name":22,"slug":23,"type":14},{"name":16,"slug":17,"type":14},{"slug":7511,"name":7512,"fn":7513,"description":7514,"org":7515,"tags":7516,"stars":24,"repoUrl":25,"updatedAt":7524},"svg-diagram-generation","SVG Diagram Generation","generate SVG diagrams for system visualization","Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7517,7518,7519,7522],{"name":10,"slug":9,"type":14},{"name":22,"slug":23,"type":14},{"name":7520,"slug":7521,"type":14},"Diagrams","diagrams",{"name":7523,"slug":940,"type":14},"SVG","2026-07-12T08:06:38.154791",{"items":7526,"total":834},[7527,7540,7558,7575,7587,7600,7613,7627,7639,7651,7667,7681],{"slug":7528,"name":7528,"fn":7529,"description":7530,"org":7531,"tags":7532,"stars":7537,"repoUrl":7538,"updatedAt":7539},"a2ui-renderer","render declarative agent UI surfaces","Render A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via \u003CCopilotKit a2ui={{ theme }}>. Auto-activates via \u002Finfo — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit\u002Freact-core\u002Fv2; low-level primitives (A2UIProvider, A2UIRenderer, createCatalog) ship from @copilotkit\u002Fa2ui-renderer. Covers theme customization, createSurface dedup, action-bridge try\u002Ffinally cleanup. Load when an agent emits A2UI operations (createSurface \u002F updateComponents \u002F updateDataModel), when wiring a2ui on CopilotRuntime, or when styling A2UI surfaces.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7533,7534,7535,7536],{"name":10,"slug":9,"type":14},{"name":22,"slug":23,"type":14},{"name":7494,"slug":7495,"type":14},{"name":7500,"slug":7501,"type":14},35928,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit","2026-07-12T08:06:36.722091",{"slug":7541,"name":7541,"fn":7542,"description":7543,"org":7544,"tags":7545,"stars":7537,"repoUrl":7538,"updatedAt":7557},"copilotkit-agui","build and debug CopilotKit agent backends","Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent\u002FHttpAgent patterns, state synchronization, tool calls, and human-in-the-loop flows.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7546,7547,7550,7553,7554],{"name":19,"slug":20,"type":14},{"name":7548,"slug":7549,"type":14},"API Development","api-development",{"name":7551,"slug":7552,"type":14},"Backend","backend",{"name":10,"slug":9,"type":14},{"name":7555,"slug":7556,"type":14},"Debugging","debugging","2026-07-12T08:06:22.179755",{"slug":7559,"name":7559,"fn":7560,"description":7561,"org":7562,"tags":7563,"stars":7537,"repoUrl":7538,"updatedAt":7574},"copilotkit-contribute","contribute to CopilotKit open-source project","Use when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit\u002FCopilotKit.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7564,7565,7568,7571],{"name":10,"slug":9,"type":14},{"name":7566,"slug":7567,"type":14},"Engineering","engineering",{"name":7569,"slug":7570,"type":14},"GitHub","github",{"name":7572,"slug":7573,"type":14},"Pull Requests","pull-requests","2026-07-12T08:06:30.102192",{"slug":7576,"name":7576,"fn":7577,"description":7578,"org":7579,"tags":7580,"stars":7537,"repoUrl":7538,"updatedAt":7586},"copilotkit-debug","diagnose and debug CopilotKit issues","Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7581,7582,7583],{"name":10,"slug":9,"type":14},{"name":7555,"slug":7556,"type":14},{"name":7584,"slug":7585,"type":14},"Observability","observability","2026-07-12T08:06:23.407872",{"slug":7588,"name":7588,"fn":7589,"description":7590,"org":7591,"tags":7592,"stars":7537,"repoUrl":7538,"updatedAt":7599},"copilotkit-develop","build AI features with CopilotKit","Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7593,7594,7597,7598],{"name":19,"slug":20,"type":14},{"name":7595,"slug":7596,"type":14},"AI Context","ai-context",{"name":10,"slug":9,"type":14},{"name":7494,"slug":7495,"type":14},"2026-07-12T08:06:28.856644",{"slug":7601,"name":7601,"fn":7602,"description":7603,"org":7604,"tags":7605,"stars":7537,"repoUrl":7538,"updatedAt":7612},"copilotkit-integrations","integrate agent frameworks into CopilotKit applications","Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7606,7607,7608,7609],{"name":19,"slug":20,"type":14},{"name":7548,"slug":7549,"type":14},{"name":10,"slug":9,"type":14},{"name":7610,"slug":7611,"type":14},"Integrations","integrations","2026-07-12T08:06:32.560054",{"slug":7614,"name":7614,"fn":7615,"description":7616,"org":7617,"tags":7618,"stars":7537,"repoUrl":7538,"updatedAt":7626},"copilotkit-self-update","update CopilotKit agent skills","Use when the user wants to update, refresh, or reinstall the CopilotKit agent SKILLS (the SKILL.md files that teach this agent about CopilotKit). NOT for updating the CopilotKit codebase or project — this is specifically about refreshing the skills\u002Fknowledge this agent has loaded. Triggers on \"update copilotkit skills\", \"update skills\", \"refresh skills\", \"skills are stale\", \"skills are outdated\", \"get latest skills\", \"my copilotkit knowledge is wrong\", \"copilotkit APIs changed\", \"skills seem old\", \"wrong API names\", \"reinstall skills\", \"skills not working right\", \"update your copilotkit knowledge\".",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7619,7620,7623],{"name":10,"slug":9,"type":14},{"name":7621,"slug":7622,"type":14},"Documentation","documentation",{"name":7624,"slug":7625,"type":14},"Productivity","productivity","2026-07-12T08:06:31.345052",{"slug":7628,"name":7628,"fn":7629,"description":7630,"org":7631,"tags":7632,"stars":7537,"repoUrl":7538,"updatedAt":7638},"copilotkit-setup","set up CopilotKit in projects","Use when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring, provider setup, and first working chat integration.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7633,7634,7635],{"name":10,"slug":9,"type":14},{"name":7494,"slug":7495,"type":14},{"name":7636,"slug":7637,"type":14},"Onboarding","onboarding","2026-07-12T08:06:25.534415",{"slug":7640,"name":7640,"fn":7641,"description":7642,"org":7643,"tags":7644,"stars":7537,"repoUrl":7538,"updatedAt":7650},"copilotkit-upgrade","migrate CopilotKit applications to v2","Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7645,7646,7647],{"name":10,"slug":9,"type":14},{"name":7566,"slug":7567,"type":14},{"name":7648,"slug":7649,"type":14},"Migration","migration","2026-07-12T08:06:26.949801",{"slug":7652,"name":7652,"fn":7653,"description":7654,"org":7655,"tags":7656,"stars":7537,"repoUrl":7538,"updatedAt":7666},"react-core","integrate CopilotKit into React applications","@copilotkit\u002Freact-core — mount the CopilotKit provider (from @copilotkit\u002Freact-core\u002Fv2) in a Next.js App Router \u002F React Router v7 \u002F TanStack Start \u002F SPA app, drop in CopilotChat\u002FCopilotPopup\u002FCopilotSidebar (v2 chat components ship from react-core\u002Fv2 — NOT react-ui, which is CSS-only in v2), access and subscribe to agents with useAgent \u002F useAgentContext \u002F useCapabilities, switch between multiple agents, manage durable Intelligence threads with useThreads, register browser-side tools via useFrontendTool, render tool calls with useRenderTool \u002F useComponent \u002F useDefaultRenderTool, gate execution with useHumanInTheLoop, wire file attachments with useAttachments, configure suggestion pills, and register activity- and custom-message renderers. publicLicenseKey is canonical (publicApiKey is deprecated alias). Load the reference under references\u002F that matches your task.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7657,7658,7659,7662,7665],{"name":10,"slug":9,"type":14},{"name":7494,"slug":7495,"type":14},{"name":7660,"slug":7661,"type":14},"Next.js","next-js",{"name":7663,"slug":7664,"type":14},"React","react",{"name":7500,"slug":7501,"type":14},"2026-07-12T08:06:15.72619",{"slug":7668,"name":7668,"fn":7669,"description":7670,"org":7671,"tags":7672,"stars":7537,"repoUrl":7538,"updatedAt":7680},"runtime","mount and configure CopilotRuntime servers","@copilotkit\u002Fruntime — mount a fetch-native CopilotRuntime on any JS server, wire middleware, pick an AgentRunner, instantiate BuiltInAgent (Factory Mode with TanStack AI is the preferred default) or plug in any of 12 external agent frameworks (Mastra, LangGraph, CrewAI Crews\u002FFlows, PydanticAI, ADK, LlamaIndex, Agno, AWS Strands, MS Agent Framework, AG2, A2A), enable Intelligence mode for durable threads + websocket, register server-side tools via defineTool, and wire voice transcription. Uses the fetch-based createCopilotRuntimeHandler primitive — the Express\u002FHono adapters are discouraged. Load the reference under references\u002F that matches your task.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7673,7674,7675,7677],{"name":7551,"slug":7552,"type":14},{"name":10,"slug":9,"type":14},{"name":7676,"slug":39,"type":14},"JavaScript",{"name":7678,"slug":7679,"type":14},"Middleware","middleware","2026-07-12T08:06:10.034875",{"slug":7483,"name":7484,"fn":7485,"description":7486,"org":7682,"tags":7683,"stars":24,"repoUrl":25,"updatedAt":7502},{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[7684,7685,7686,7687,7688],{"name":7490,"slug":7491,"type":14},{"name":22,"slug":23,"type":14},{"name":7494,"slug":7495,"type":14},{"name":7497,"slug":7498,"type":14},{"name":7500,"slug":7501,"type":14}]